/* Course data & integrations graphic (templates/_graphics/courseData.twig) */
/* Browser page frame */
[data-g17-graphic="courseData"] .g17g-cd-page {
    position: absolute; z-index: 2; overflow: hidden; border-radius: 1em; background: var(--g17g-card);
    box-shadow: 0 .9em 2.4em var(--g17g-shadow), 0 .1em .35em var(--g17g-shadow-soft), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="courseData"] .g17g-cd-bar { display: flex; align-items: center; gap: .5em; height: 2.3em; padding: 0 .55em 0 .8em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="courseData"] .g17g-cd-dots { flex: none; display: flex; gap: .28em; }
[data-g17-graphic="courseData"] .g17g-cd-dots i { width: .48em; height: .48em; border-radius: 50%; background: var(--g17g-border); }
[data-g17-graphic="courseData"] .g17g-cd-url {
    flex: 1; min-width: 0; display: flex; align-items: center; gap: .4em; height: 2.4em; padding: 0 .9em;
    border-radius: 999px; background: var(--g17g-soft); font-size: .58em; color: var(--g17g-muted); white-space: nowrap;
}
[data-g17-graphic="courseData"] .g17g-cd-url svg { flex: none; width: 1.15em; height: 1.15em; color: var(--g17g-green); }

/* Flat illustrations, drawn from brand shapes */
[data-g17-graphic="courseData"] .a-sky { fill: var(--g17g-green-tint); }
[data-g17-graphic="courseData"] .a-hill { fill: var(--g17g-green-bar); }
[data-g17-graphic="courseData"] .a-hill2 { fill: var(--g17g-green-bg); }
[data-g17-graphic="courseData"] .a-gbg { fill: var(--g17g-green-bg); }
[data-g17-graphic="courseData"] .a-pbg { fill: var(--g17g-purple-bg); }
[data-g17-graphic="courseData"] .a-soft { fill: var(--g17g-purple-soft); }
[data-g17-graphic="courseData"] .a-green { fill: var(--g17g-green); }
[data-g17-graphic="courseData"] .a-lime { fill: var(--g17g-green-light); }
[data-g17-graphic="courseData"] .a-purple { fill: var(--g17g-purple); }
[data-g17-graphic="courseData"] .a-card { fill: var(--g17g-card); }
[data-g17-graphic="courseData"] .a-pipe { fill: none; stroke: var(--g17g-purple); stroke-linecap: round; stroke-linejoin: round; }

/* The pointer: a full stage layer that moves by xPercent / yPercent, so the tip lands on a stage % */
[data-g17-graphic="courseData"] .g17g-cd-track { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
[data-g17-graphic="courseData"] .g17g-cd-cursor {
    position: absolute; left: 0; top: 0; width: 1.55em; height: 1.55em; margin: -.13em 0 0 -.2em; transform-origin: 13% 8%;
    filter: drop-shadow(0 .15em .25em var(--g17g-shadow));
}
[data-g17-graphic="courseData"] .g17g-cd-cursor path { fill: var(--g17g-card); stroke: var(--g17g-text); stroke-width: 1.5; stroke-linejoin: round; }
[data-g17-graphic="courseData"] .g17g-cd-click { position: absolute; left: -.8em; top: -.8em; width: 1.6em; height: 1.6em; border-radius: 50%; border: 2px solid var(--g17g-green); opacity: 0; }

/* A small burst of green and purple dots on success */
[data-g17-graphic="courseData"] .g17g-cd-burst { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
[data-g17-graphic="courseData"] .g17g-cd-burst i { position: absolute; left: -.21em; top: -.21em; width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="courseData"] .g17g-cd-burst i:nth-child(even) { background: var(--g17g-purple); }

/* The course page & the EBS record */
[data-g17-graphic="courseData"] .s-card { fill: none; stroke: var(--g17g-card); }
[data-g17-graphic="courseData"] .s-purple { fill: none; stroke: var(--g17g-purple); }
[data-g17-graphic="courseData"] .s-green { fill: none; stroke: var(--g17g-green); }

[data-g17-graphic="courseData"] .g17g-cd-body { padding: .75em .9em .85em; }
[data-g17-graphic="courseData"] .g17g-cd-crumb { display: block; font-size: .56em; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: .9em; align-items: center; margin-top: .55em; }
[data-g17-graphic="courseData"] .g17g-cd-img { position: relative; display: block; height: 9em; border-radius: .75em; overflow: hidden; }
[data-g17-graphic="courseData"] .g17g-cd-img > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
[data-g17-graphic="courseData"] .g17g-cd-h1 { display: block; margin: .4em 0 .15em; font-size: 1.12em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-sub { display: block; font-size: .6em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-btns { display: flex; gap: .45em; margin-top: .8em; }
[data-g17-graphic="courseData"] .g17g-cd-cta, [data-g17-graphic="courseData"] .g17g-cd-ghost {
    display: inline-flex; align-items: center; height: 2.4em; padding: 0 1.05em; border-radius: 999px; font-size: .6em; font-weight: 700; white-space: nowrap;
}
[data-g17-graphic="courseData"] .g17g-cd-cta { background: var(--g17g-green); color: var(--g17g-on-green); }
[data-g17-graphic="courseData"] .g17g-cd-ghost { color: var(--g17g-purple-text); box-shadow: inset 0 0 0 1px var(--g17g-purple-soft); }

/* Key facts, each value rolling to its new figure */
[data-g17-graphic="courseData"] .g17g-cd-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55em; margin-top: .85em; }
[data-g17-graphic="courseData"] .g17g-cd-fact { position: relative; isolation: isolate; padding: .6em .65em .85em; border-radius: .7em; box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="courseData"] .g17g-cd-flash { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--g17g-green-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g17g-green) 45%, transparent); opacity: 0; }
[data-g17-graphic="courseData"] .g17g-cd-icon { display: grid; place-items: center; width: 1.55em; height: 1.55em; border-radius: 50%; background: var(--g17g-green-bg); color: var(--g17g-green-text); }
[data-g17-graphic="courseData"] .g17g-cd-icon svg { width: 60%; height: 60%; }
[data-g17-graphic="courseData"] .g17g-cd-label { display: block; margin-top: .55em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-val { position: relative; display: inline-grid; height: 1.3em; overflow: hidden; white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-val > span { grid-area: 1 / 1; line-height: 1.3em; }
[data-g17-graphic="courseData"] .g17g-cd-fact .g17g-cd-val { display: grid; margin-top: .1em; font-size: .88em; font-weight: 800; letter-spacing: -.01em; }
[data-g17-graphic="courseData"] .g17g-cd-places { position: absolute; left: .65em; right: .65em; bottom: .5em; height: .22em; border-radius: .2em; background: var(--g17g-rule); overflow: hidden; }
[data-g17-graphic="courseData"] .g17g-cd-places b { position: absolute; inset: 0; border-radius: inherit; background: var(--g17g-purple); transform-origin: 0 50%; transform: scaleX(.7); }
[data-g17-graphic="courseData"] .g17g-cd-foot { display: flex; align-items: center; gap: .4em; margin-top: .75em; font-size: .56em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-foot svg { width: 1.25em; height: 1.25em; color: var(--g17g-green); }
[data-g17-graphic="courseData"] .g17g-cd-when { display: inline-grid; }
[data-g17-graphic="courseData"] .g17g-cd-when > span { grid-area: 1 / 1; }

/* EBS record */
[data-g17-graphic="courseData"] .g17g-cd-rec { display: flex; align-items: center; justify-content: space-between; height: 2.55em; font-size: .64em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-rec + .g17g-cd-rec { box-shadow: 0 -1px 0 var(--g17g-rule); }
[data-g17-graphic="courseData"] .g17g-cd-input { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 8.4em; height: 1.95em; padding: 0 .7em; border-radius: .5em; box-shadow: inset 0 0 0 1px var(--g17g-border); font-weight: 700; color: var(--g17g-text); }
[data-g17-graphic="courseData"] .g17g-cd-input .g17g-cd-val { justify-items: end; }
[data-g17-graphic="courseData"] .g17g-cd-save { display: flex; align-items: center; justify-content: space-between; margin-top: .55em; padding-top: .6em; border-top: 1px solid var(--g17g-rule); font-size: .58em; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="courseData"] .g17g-cd-savebtn { position: relative; width: 6.6em; height: 2.3em; border-radius: 999px; overflow: hidden; background: var(--g17g-green); color: var(--g17g-on-green); font-size: 1.05em; font-weight: 700; }
[data-g17-graphic="courseData"] .g17g-cd-savebtn__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: .3em; }
[data-g17-graphic="courseData"] .g17g-cd-savebtn__label svg { width: 1.05em; height: 1.05em; }
[data-g17-graphic="courseData"] .s-gtext { fill: none; stroke: var(--g17g-green-text); }