/*
 * The programme path.
 *
 * Geometry follows GamificationOverviewPage.xaml, whose templates lay each step out on a
 * five-column grid of *, 30, 10, 40, * -- flexible outer columns with a fixed centre, so
 * the nodes stay a constant distance from the middle on any phone width. The same split is
 * used here, with the connector artwork spanning it.
 *
 * Node colours come from CustomGamificationLectionButtonViewModel.SetColors():
 *   locked        SGGray        flat
 *   open          SGBlue        raised on an SGShadowBlue lip
 *   done          SGBlueShadow  flat, darker
 *
 * The "raised" look in MAUI is two stacked Borders, the back one taller by six pixels. A
 * box-shadow does the same here with one element.
 */

.gpath {
    list-style: none;
    margin: 0;
    padding: 0 0 24px 0;
}

/* --- chapter divider ------------------------------------------------------------- */

.gpath__chapter {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 12px 24px;
}

.gpath__chapter-rule {
    height: 1px;
    background: var(--sg-gray-200, #C8C8C8);
}

.gpath__chapter-title {
    margin: 0;
    font-family: var(--sg-font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    color: var(--sg-blue-shadow, #0056A4);
}

.gpath__chapter--disabled .gpath__chapter-title {
    color: var(--sg-dark-gray, #3B3B3B);
}

/* --- one step -------------------------------------------------------------------- */

.gpath__step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.gpath__row {
    display: grid;
    grid-template-columns: 1fr 30px 10px 40px 1fr;
    align-items: start;
}

/*
 * All three cells belong to the same row. Without this the right-hand variant breaks: the
 * lesson is placed in column 4, then the connector is asked for column 2, and grid will
 * not move backwards within a row -- so it starts a new one and the quiz node drops two
 * hundred pixels below the lesson it belongs to.
 */
.gpath__row > * {
    grid-row: 1;
}

/* Left-hand steps put the lesson node on the left and its quiz on the right; right-hand
   steps mirror the whole row. One rule rather than two near-identical templates. */
.gpath__step--left .gpath__lesson {
    grid-column: 1 / 3;
    justify-self: end;
}

.gpath__step--left .gpath__line--between {
    grid-column: 3 / 5;
}

.gpath__step--left .gpath__quiz {
    grid-column: 5;
    justify-self: start;
}

.gpath__step--right .gpath__lesson {
    grid-column: 4 / 6;
    justify-self: start;
}

.gpath__step--right .gpath__line--between {
    grid-column: 2 / 4;
    transform: scaleX(-1);
}

.gpath__step--right .gpath__quiz {
    grid-column: 1;
    justify-self: end;
}

.gpath__step--right .gpath__line--enter,
.gpath__step--right .gpath__line--exit {
    transform: scaleX(-1);
}

/* The made-up path of the tutorial still draws its exercise as a node centred in a row. */
.gpath__step--exercise .gpath__lesson {
    grid-column: 1 / 6;
    justify-self: center;
}

/*
 * An exercise step (.gex), on the side opposite to the step before it. Under its name: the curve coming in, which starts on the
 * axis (the middle of the screen) and ends above the node, then the node, then the curve going out, which starts under the node
 * and ends on the axis. Both curves are pathline_others (277 x 305) drawn 74 high, so 67 wide, and the node sits where they
 * end -- 67 beside the axis, which is about 60% of the width on the right. On the right the curve in is mirrored; on the left
 * the one out is.
 */
.gex {
    --gex-curve: 67px;
}

.gex__enter,
.gex__exit {
    display: block;
    height: auto;
    width: 60px;
    pointer-events: none;
}

/* A node of no width, centred on the end of the curve, so it is centred there whatever its own width. */
.gex__node {
    display: flex;
    justify-content: center;
    width: 0;
}

.gex--right .gex__enter { margin: 0 0 0 49%; transform: scaleX(-1); }
.gex--right .gex__node { margin-left: calc(47% + var(--gex-curve)); }
.gex--right .gex__exit { margin: 6px 0 0 49%; }

.gex--left .gex__enter { margin: 0 0 0 calc(49% - var(--gex-curve)); }
.gex--left .gex__node { margin-left: calc(47% - var(--gex-curve)); }
.gex--left .gex__exit { margin: 6px 0 0 calc(49% - var(--gex-curve)); transform: scaleX(-1); }

/*
 * The last exercise of a chapter: the way out stays as it is, and the optional-contents button stands beside it on the side the
 * node is not -- in the half the curve does not use, so it neither moves the curve nor is moved by it.
 */
.gex__tail {
    position: relative;
}

.gex__optional {
    position: absolute;
    top: 20px;
    width: calc(47% - 12px);
}

.gex--right .gex__optional { left: 12px; }
.gex--left .gex__optional { right: 12px; }

/* Smaller than the page's buttons: it shares the width with the way out. The label wraps inside it. */
.gex__optional .custom-button {
    min-width: 0;
    padding: 10px 14px;
    font-size: 14px;
}

.gex__optional .custom-button__label {
    min-width: 0;
    overflow-wrap: anywhere;
}

.gpath__lesson {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    max-width: 150px;
}

.gpath__label {
    font-family: var(--sg-font-body);
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    color: var(--sg-primary, #2F303D);
}

/* --- connectors ------------------------------------------------------------------ */

.gpath__line {
    display: block;
    width: auto;
    pointer-events: none;
}

/* The opening tick: a 9x105 sliver drawn at 30px tall, centred, as the start template
   does. It is the only connector with no dimmed variant. */
.gpath__line--start {
    height: 30px;
    align-self: center;
}

/* The sweep in from the step above. It ends under the node it leads to, so it is aligned
   to the same side and inset to meet the node rather than the screen edge. */
.gpath__line--enter {
    height: 18px;
    align-self: flex-end;
    margin-right: 22%;
}

.gpath__step--right .gpath__line--enter {
    align-self: flex-start;
    margin-right: 0;
    margin-left: 22%;
}

/* Between the lesson and its quiz. Pulled up so it starts level with the node tops
   rather than hanging below them. */
.gpath__line--between {
    width: 45px;
    height: auto;
    max-height: 70px;
    margin: 4px 2px 0 2px;
    align-self: start;
}

/* The run out towards the next step. Negative top margin closes the gap the fixed node
   height would otherwise leave between the node and the curve. */
.gpath__line--exit {
    height: 74px;
    align-self: flex-start;
    margin: 4px 0 0 34%;
}

.gpath__step--right .gpath__line--exit {
    align-self: flex-end;
    margin-left: 0;
    margin-right: 22%;
}

/* --- nodes ----------------------------------------------------------------------- */

.gnode {
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gnode[disabled] {
    cursor: default;
}

.gnode__face {
    display: flex;
    align-items: center;
    justify-content: center;
}

.gnode__face img {
    display: block;
}

/* The lesson node: RoundRectangle 24, 80x56, 35px icon. */
.gnode--lesson .gnode__face {
    min-width: 80px;
    height: 56px;
    border-radius: 24px;
    padding: 12px;
}

.gnode--lesson .gnode__face img {
    width: 35px;
    height: 35px;
}

/* The quiz node: RoundRectangle 10, 40x32, 20px icon. */
.gnode--quiz .gnode__face {
    min-width: 40px;
    height: 32px;
    border-radius: 10px;
    padding: 6px;
}

.gnode--quiz .gnode__face img {
    width: 20px;
    height: 20px;
}

/*
 * The three states. The lip under an open node is what makes it look pressable; a done
 * node loses it and sits flush, which is the native app shrinking its shadow layer from
 * 60 to 54 and matching the two colours.
 */
.gnode--open .gnode__face {
    background: var(--sg-blue, #1469C4);
    box-shadow: 0 6px 0 var(--sg-shadow-blue, #082A4E), 0 8px 3px rgba(0, 0, 0, 0.35);
}

.gnode--done .gnode__face {
    background: var(--sg-blue-shadow, #0056A4);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.gnode--locked .gnode__face {
    background: var(--sg-gray, #B8B8B8);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.25);
}

.gnode--locked .gnode__face img {
    opacity: 0.85;
}

/* Pressing an open node pushes it onto its lip, which is the affordance the shape is
   promising. Only the open state moves: the others are not pressable. */
.gnode--open:not([disabled]):active .gnode__face {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--sg-shadow-blue, #082A4E), 0 3px 2px rgba(0, 0, 0, 0.35);
}

.gnode:focus-visible .gnode__face {
    outline: 3px solid var(--sg-blue-shadow, #0056A4);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gnode--open:not([disabled]):active .gnode__face {
        transform: none;
    }
}

/* --- milestones ------------------------------------------------------------------ */

/*
 * Ten symbols along a bar, filled to where the patient has got to. The native view is a
 * nine-column grid of segments, each filled by its own percentage; flex with a shared
 * basis gives the same even spacing without hard-coding the count, so a programme with a
 * different number of milestones still lays out.
 */

.milestones {
    margin: 0 0 20px 0;
}

.milestones__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.milestones__title {
    margin: 0;
    font-family: var(--sg-font-body);
    font-size: 18px;
    font-weight: 700;
    color: var(--sg-primary, #2F303D);
}

.milestones__points {
    margin: 0;
    font-family: var(--sg-font-body);
    color: var(--sg-blue, #1469C4);
}

.milestones__points-now {
    font-size: 22px;
    font-weight: 700;
}

.milestones__points-total {
    font-size: 18px;
}

.milestones__bar {
    position: relative;
    border: 1px solid var(--sg-gray, #B8B8B8);
    border-radius: 24px;
    background: var(--sg-light-background, #F2F8F9);
    padding: 6px 12px;
    height: 26px;
    display: flex;
    align-items: center;
}

/* The track is inset by half a symbol at each end so the first and last symbols sit on
   the bar's ends rather than overhanging them. */
.milestones__track,
.milestones__symbols {
    position: absolute;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: center;
}

.milestones__track {
    height: 4px;
    border-radius: 2px;
    background: var(--sg-gray, #B8B8B8);
    overflow: hidden;
}

.milestones__segment {
    flex: 1 1 0;
    height: 100%;
}

.milestones__fill {
    height: 100%;
    background: var(--sg-blue, #1469C4);
}

.milestones__symbols {
    justify-content: space-between;
}

.milestones__symbol {
    width: 20px;
    height: 20px;
    display: block;
}

/* --- the nodes that close the path ----------------------------------------------- */

.gpath__end {
    display: flex;
    justify-content: center;
    margin: 0 16px 0 16px;
}

/* The certificate button, under the chapter progress. */
.gcert {
    display: flex;
    margin: 16px 16px 0 16px;
}

.gend {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;
    border-radius: 24px;
    border: 1px solid transparent;
    font-family: var(--sg-font-body);
    text-align: left;
    cursor: pointer;
}

.gend[disabled] {
    cursor: default;
}

/* Disabled and enabled palettes are the phase button's: a pale blue card with a dark
   border when open, flat grey when not. */
.gend--unlocked {
    background: var(--sg-aqua-blue, #EAEFF4);
    border-color: var(--sg-gradient-dark-blue, #004583);
    color: var(--sg-dark-blue, #002B5B);
}

.gend--locked {
    background: var(--sg-gray-90a, #E6E7E8);
    border-color: var(--sg-gray, #B8B8B8);
    color: var(--sg-dark-gray, #3B3B3B);
}

.gend__lock {
    width: 24px;
    height: 24px;
    flex: none;
}

.gend__body {
    flex: 1 1 auto;
    min-width: 0;
}

.gend__kicker,
.gend__name,
.gend__status {
    margin: 0;
}

.gend__kicker {
    font-size: 13px;
    opacity: 0.8;
}

.gend__name {
    font-size: 16px;
    font-weight: 700;
}

.gend__status {
    font-size: 13px;
}

.gend__art {
    width: 48px;
    height: 48px;
    flex: none;
    object-fit: contain;
}

/* The phase button is a card of four rows (CustomGamificationPhaseButtonView): the lock at the left, the state in large
   type, the phase number small, and the phase's icon beside its name. A 2px border, 24px of padding inside it. */
.gend--phase,
.gend--certificate {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    /* The whole width of its list item, not the 320px the goal button stops at. */
    max-width: none;
    padding: 24px;
    border-width: 2px;
}

.gend--phase .gend__lock {
    width: 48px;
    height: 48px;
    align-self: flex-start;
    margin-bottom: 24px;
}

.gend--phase .gend__status {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    margin-bottom: 24px;
}

.gend--phase .gend__kicker {
    font-size: 12px;
    opacity: 1;
    margin-bottom: 18px;
}

.gend__phase {
    display: flex;
    align-items: center;
    gap: 10px;
}

.gend--phase .gend__art {
    width: auto;
    height: 24px;
}

.gend--phase .gend__name {
    font-size: 18px;
    font-weight: 600;
}

/* The certificate button is laid out like the phase button (the frame is shared above): its icon in the first row at the left, the size of the
   phase button's lock, and under it the text in the size of the phase's status line. */
.gend--certificate {
    text-align: left;
}

.gend__art--certificate {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
}

.gend--certificate .gend__name {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}

/*
 * The goal button, as natively (GoalItemTemplate): the whole width of the list and 184 high, with its artwork filling it, and the
 * icon over the label, both centred. Open it is blue with the light label; shut it is grey with a grey border and a dark label.
 */
.gend--goal {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    max-width: none;
    height: 184px;
    padding: 12px;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.gend--goal.gend--unlocked {
    border: 0;
    background-color: var(--sg-blue, #1469C4);
    background-image: url('../img/goal_bg_enabled.png');
    color: var(--sg-surface, #F8FAFC);
}

.gend--goal.gend--locked {
    border: 2px solid var(--sg-gray, #B8B8B8);
    background-color: var(--sg-gray, #B8B8B8);
    background-image: url('../img/goal_bg_disabled.png');
    color: var(--sg-dark-gray, #3B3B3B);
}

.gend--goal .gend__name {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.2;
    color: inherit;
}

.gend__art--goal {
    width: 56px;
    height: 56px;
}

.gend:focus-visible {
    outline: 3px solid var(--sg-blue-shadow, #0056A4);
    outline-offset: 3px;
}

/* --- the play node that starts the information phase ------------------------------ */

/*
 * The native start template is a radial-gradient pill (SGBlue → SGGradientDarkBlue) on an
 * SGShadowBlue lip, carrying the play glyph. Same construction as a lesson node, one size
 * larger, because it is the only thing on the screen before the programme begins.
 */

.gpath__start-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 0;
}

.gstart {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gstart__face {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    height: 60px;
    border-radius: 28px;
    padding: 12px;
    background: radial-gradient(circle at 50% 30%,
                var(--sg-blue, #1469C4) 0%,
                var(--sg-gradient-dark-blue, #004583) 100%);
    box-shadow: 0 6px 0 var(--sg-shadow-blue, #082A4E), 0 8px 3px rgba(0, 0, 0, 0.35);
}

.gstart__face img {
    width: 34px;
    height: 34px;
    display: block;
}

.gstart:active .gstart__face {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--sg-shadow-blue, #082A4E), 0 3px 2px rgba(0, 0, 0, 0.35);
}

.gstart:focus-visible .gstart__face {
    outline: 3px solid var(--sg-blue-shadow, #0056A4);
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .gstart:active .gstart__face { transform: none; }
}

/* --- chapter progress ------------------------------------------------------------ */

/*
 * EducationChapterProgressTemplate: a white card sitting on a grey lip, carrying a list
 * icon, the chapter title and a percentage with a 100px bar. The lip is the same
 * two-border construction as the path nodes -- a back border two pixels taller than the
 * front one -- which a single box-shadow reproduces.
 */

.chapter-progress {
    margin: 10px 16px 24px 16px;
}

.chapter-progress__card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    padding: 28px 16px;
    border-radius: 10px;
    background: var(--sg-surface, #F8FAFC);
    box-shadow: 0 2px 0 var(--sg-gray-primary-default, #C6C8CA), 0 4px 4px rgba(0, 0, 0, 0.3);
}

.chapter-progress__icon {
    width: 30px;
    height: 30px;
    flex: none;
}

.chapter-progress__title {
    margin: 0;
    min-width: 0;
    font-family: var(--sg-font-alt);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--sg-dark-blue, #002B5B);

    /* TailTruncation in the template: a long chapter title must not wrap the card. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chapter-progress__meter {
    display: flex;
    align-items: center;
    gap: 6px;
}

.chapter-progress__percent {
    font-family: var(--sg-font-alt);
    font-size: 12px;
    line-height: 1.8;
    color: var(--sg-dark-blue, #002B5B);
}

.chapter-progress__track {
    position: relative;
    width: 100px;
    height: 10px;
    border-radius: 5px;
    background: var(--sg-divider-primary, #C6C8CA);
    overflow: hidden;
}

.chapter-progress__fill {
    height: 8px;
    margin-top: 1px;
    border-radius: 5px;
    background: var(--sg-blue, #1469C4);
}

/* --- the lessons of the path, as the native item templates lay them out ------------------------------------------------------ */

/*
 * Five columns, a flexible one at each side of a fixed middle of 30, 10 and 40 points; the right-hand template has the middle as
 * 40, 10, 30. The middle is the axis of the screen, and the connectors are anchored to it, so they meet the nodes at any width
 * -- which a percentage of the width, as these were laid before, does not do.
 */
.gp {
    display: grid;
    grid-template-columns: 1fr 30px 10px 40px 1fr;
    align-items: start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.gp--right {
    grid-template-columns: 1fr 40px 10px 30px 1fr;
}

.gp > img {
    display: block;
    pointer-events: none;
}

/* The lesson name between two rules: 50 points long, at the outer edges of a 12-point-margin, 24-point-inset row. */
.gp__divider {
    grid-row: 1;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 2fr 8fr 2fr;
    align-items: center;
    margin: 12px 24px;
}

.gp__divider--wide {
    grid-template-columns: 3fr 6fr 3fr;
}

.gp__rule {
    width: 50px;
    max-width: 100%;
    height: 1px;
    background: var(--sg-gray);
}

.gp__rule:first-child { justify-self: start; }
.gp__rule:last-child { justify-self: end; }

.gp__lection {
    color: var(--sg-blue-shadow);
    font-size: 16px;
    line-height: 1.3;
    text-align: center;
}

.gp__lection--locked {
    color: var(--sg-dark-gray);
}

/* What is next: greyed, and the rules paler. */
.gp__divider--muted .gp__rule {
    background: var(--sg-gray-90);
}

.gp__divider--muted .gp__lection {
    color: var(--sg-gray);
    text-shadow: 0 0 12px rgba(184, 184, 184, 0.7);
}

/* ---- left ---- */

.gp--left,
.gp--start {
    grid-template-rows: auto 20px auto auto;
}

.gp--left .gp__enter {
    grid-row: 2;
    grid-column: 1 / 4;
    justify-self: end;
    height: 18px;
    margin-bottom: 2px;
}

.gp--left .gp__lesson,
.gp--start .gp__lesson {
    grid-column: 1 / 3;
    justify-self: end;
    align-self: start;
}

.gp--left .gp__lesson { grid-row: 3; }

.gp--left .gp__middle,
.gp--start .gp__middle {
    grid-column: 3 / 5;
    justify-self: start;
    width: 45px;
    height: auto;
    margin: 30px 2px 18px 2px;
}

.gp--left .gp__middle { grid-row: 3; }

.gp--left .gp__quiz,
.gp--start .gp__quiz {
    grid-column: 5;
    justify-self: start;
    align-self: end;
}

.gp--left .gp__quiz { grid-row: 3; }

.gp--left .gp__exit {
    grid-row: 4;
    grid-column: 3 / 6;
    justify-self: start;
    height: 74px;
    margin-left: 5px;
}

/* ---- right: the left one mirrored ---- */

.gp--right {
    grid-template-rows: auto 20px auto auto;
}

.gp--right .gp__enter {
    grid-row: 2;
    grid-column: 3 / 6;
    justify-self: start;
    height: 18px;
    transform: scaleX(-1);
}

.gp--right .gp__lesson {
    grid-row: 3;
    grid-column: 4 / 6;
    justify-self: start;
    align-self: start;
}

.gp--right .gp__middle {
    grid-row: 3;
    grid-column: 2;
    justify-self: start;
    width: 45px;
    height: auto;
    margin: 30px 2px 18px 2px;
    transform: scaleX(-1);
}

.gp--right .gp__quiz {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    align-self: end;
}

.gp--right .gp__exit {
    grid-row: 4;
    grid-column: 1 / 4;
    justify-self: end;
    height: 74px;
    margin-right: 5px;
    transform: scaleX(-1);
}

/* ---- the preview of what is next: the divider and the way in, and nothing else ---- */

.gp--next {
    grid-template-rows: auto 20px;
}

/* ---- the first lesson: the start tick, the play node, then the lesson as any other ---- */

.gp--start {
    grid-template-rows: auto 30px auto auto 20px;
}

.gp__start-tick {
    grid-row: 2;
    grid-column: 2 / 5;
    justify-self: center;
    height: 30px;
}

.gp__begin-start {
    grid-row: 3;
    grid-column: 1;
    justify-self: end;
    height: 50px;
    margin: 28px 2px 2px 0;
}

/* The play node: 80 wide, the radial-gradient pill on its dark lip, as the lesson nodes are raised. */
.gp__play {
    grid-row: 3;
    grid-column: 2 / 5;
    justify-self: center;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.gp__play-face {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    height: 56px;
    box-sizing: border-box;
    padding: 12px;
    border-radius: 24px;
    background: radial-gradient(circle at 20% 20%, var(--sg-blue) 0%, var(--sg-gradient-dark-blue) 100%);
    box-shadow: 0 6px 0 var(--sg-shadow-blue), 0 8px 3px rgba(0, 0, 0, 0.35);
}

.gp__play-face img {
    width: 30px;
    height: 30px;
    display: block;
}

.gp__play:active .gp__play-face {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--sg-shadow-blue), 0 3px 2px rgba(0, 0, 0, 0.35);
}

.gp__play:focus-visible {
    outline: 3px solid var(--sg-blue-shadow);
    outline-offset: 3px;
}

.gp--start .gp__lesson { grid-row: 4; }
.gp--start .gp__middle { grid-row: 4; }
.gp--start .gp__quiz { grid-row: 4; }

/* The closing curve under the first lesson: 17 high, 20 in from the start of the third column. */
.gp__end-start {
    grid-row: 5;
    grid-column: 3 / 6;
    justify-self: start;
    height: 17px;
    margin-left: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .gp__play:active .gp__play-face { transform: none; }
}