/* Course search & discovery graphic, powered by Search17 (templates/_graphics/courseSearch.twig) */
/* Browser page frame */
[data-g17-graphic="courseSearch"] .g17g-cs-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="courseSearch"] .g17g-cs-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="courseSearch"] .g17g-cs-dots { flex: none; display: flex; gap: .28em; }
[data-g17-graphic="courseSearch"] .g17g-cs-dots i { width: .48em; height: .48em; border-radius: 50%; background: var(--g17g-border); }
[data-g17-graphic="courseSearch"] .g17g-cs-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="courseSearch"] .g17g-cs-url svg { flex: none; width: 1.15em; height: 1.15em; color: var(--g17g-green); }

/* Flat illustrations, drawn from brand shapes */
[data-g17-graphic="courseSearch"] .a-sky { fill: var(--g17g-green-tint); }
[data-g17-graphic="courseSearch"] .a-hill { fill: var(--g17g-green-bar); }
[data-g17-graphic="courseSearch"] .a-hill2 { fill: var(--g17g-green-bg); }
[data-g17-graphic="courseSearch"] .a-gbg { fill: var(--g17g-green-bg); }
[data-g17-graphic="courseSearch"] .a-pbg { fill: var(--g17g-purple-bg); }
[data-g17-graphic="courseSearch"] .a-soft { fill: var(--g17g-purple-soft); }
[data-g17-graphic="courseSearch"] .a-green { fill: var(--g17g-green); }
[data-g17-graphic="courseSearch"] .a-lime { fill: var(--g17g-green-light); }
[data-g17-graphic="courseSearch"] .a-purple { fill: var(--g17g-purple); }
[data-g17-graphic="courseSearch"] .a-card { fill: var(--g17g-card); }
[data-g17-graphic="courseSearch"] .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="courseSearch"] .g17g-cs-track { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
[data-g17-graphic="courseSearch"] .g17g-cs-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="courseSearch"] .g17g-cs-cursor path { fill: var(--g17g-card); stroke: var(--g17g-text); stroke-width: 1.5; stroke-linejoin: round; }
[data-g17-graphic="courseSearch"] .g17g-cs-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="courseSearch"] .g17g-cs-burst { position: absolute; width: 0; height: 0; z-index: 5; pointer-events: none; }
[data-g17-graphic="courseSearch"] .g17g-cs-burst i { position: absolute; left: -.21em; top: -.21em; width: .42em; height: .42em; border-radius: 50%; background: var(--g17g-green); opacity: 0; }
[data-g17-graphic="courseSearch"] .g17g-cs-burst i:nth-child(even) { background: var(--g17g-purple); }

/* The course finder & the Search17 dashboard */
[data-g17-graphic="courseSearch"] .g17g-cs-body { padding: .8em .95em 1em; }
[data-g17-graphic="courseSearch"] .g17g-cs-h1 { display: block; font-size: 1.1em; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }

/* Search box and its dropdown of recent & top searches */
[data-g17-graphic="courseSearch"] .g17g-cs-searchwrap { position: relative; z-index: 3; margin-top: .55em; }
[data-g17-graphic="courseSearch"] .g17g-cs-search {
    position: relative; display: flex; align-items: center; gap: .6em; height: 2.6em; padding: 0 1em;
    border-radius: 999px; background: var(--g17g-card); box-shadow: inset 0 0 0 1px var(--g17g-border); font-size: .78em; white-space: nowrap;
}
[data-g17-graphic="courseSearch"] .g17g-cs-search svg { flex: none; width: 1.2em; height: 1.2em; color: var(--g17g-faint); }
[data-g17-graphic="courseSearch"] .g17g-cs-drop {
    position: absolute; left: 0; right: 0; top: 100%; margin-top: .35em; padding: .55em .5em .4em; border-radius: .8em; background: var(--g17g-card);
    box-shadow: 0 .7em 1.8em var(--g17g-shadow), 0 0 0 1px var(--g17g-edge);
}
[data-g17-graphic="courseSearch"] .g17g-cs-droplabel { display: block; margin: .15em .45em .3em; font-size: .54em; font-weight: 700; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-droplabel ~ .g17g-cs-droplabel { margin-top: .7em; }
[data-g17-graphic="courseSearch"] .g17g-cs-term { display: flex; align-items: center; gap: .55em; height: 2.35em; padding: 0 .55em; border-radius: .5em; font-size: .66em; font-weight: 600; white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-term svg { width: 1.15em; height: 1.15em; color: var(--g17g-purple); }

/* Did you mean */
[data-g17-graphic="courseSearch"] .g17g-cs-dym { margin: .6em .2em 0; font-size: .62em; color: var(--g17g-text); white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-dym b { color: var(--g17g-green-text); }
[data-g17-graphic="courseSearch"] .g17g-cs-dym span { margin-left: .35em; color: var(--g17g-muted); }

/* Filters with live counts: a plain chip with a green "on" chip laid exactly over it */
[data-g17-graphic="courseSearch"] .g17g-cs-filters { display: flex; gap: .4em; margin-top: .55em; }
[data-g17-graphic="courseSearch"] .g17g-cs-filter { position: relative; background: var(--g17g-card); color: var(--g17g-muted); box-shadow: inset 0 0 0 1px var(--g17g-border); }
[data-g17-graphic="courseSearch"] .g17g-cs-filter__on {
    position: absolute; inset: 0; display: inline-flex; align-items: center; gap: .35em; padding: .3em .7em;
    border-radius: inherit; background: var(--g17g-green-bg); color: var(--g17g-green-text);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g17g-green) 55%, transparent); font-style: normal;
}
[data-g17-graphic="courseSearch"] .g17g-cs-filter__on svg { width: 1.1em; height: 1.1em; }
[data-g17-graphic="courseSearch"] .g17g-cs-n { display: inline-grid; justify-items: start; height: 1.25em; overflow: hidden; padding: 0 .4em; border-radius: 999px; background: var(--g17g-soft); line-height: 1.25em; font-weight: 700; }
[data-g17-graphic="courseSearch"] .g17g-cs-filter__on .g17g-cs-n { background: var(--g17g-card); }
[data-g17-graphic="courseSearch"] .g17g-cs-n > span { grid-area: 1 / 1; }

/* Result count and speed */
[data-g17-graphic="courseSearch"] .g17g-cs-meta { display: flex; align-items: center; gap: .6em; margin-top: .8em; font-size: .64em; color: var(--g17g-muted); }
[data-g17-graphic="courseSearch"] .g17g-cs-count { position: relative; display: block; width: 7.4em; height: 1.3em; overflow: hidden; font-weight: 700; color: var(--g17g-text); }
[data-g17-graphic="courseSearch"] .g17g-cs-count > span { position: absolute; left: 0; top: 0; white-space: nowrap; }

/* Results: three sets in one place, crossfaded as the search narrows */
[data-g17-graphic="courseSearch"] .g17g-cs-results { position: relative; height: 14.4em; margin-top: .4em; border-top: 1px solid var(--g17g-rule); }
[data-g17-graphic="courseSearch"] .g17g-cs-set { position: absolute; inset: 0; }
[data-g17-graphic="courseSearch"] .g17g-cs-res { display: flex; align-items: center; gap: .6em; height: 2.4em; padding: 0 .15em; border-bottom: 1px solid var(--g17g-rule); }
[data-g17-graphic="courseSearch"] .g17g-cs-res .g17g-chip { font-size: .56em; }
[data-g17-graphic="courseSearch"] .g17g-cs-ico { flex: none; display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: .45em; }
[data-g17-graphic="courseSearch"] .g17g-cs-ico svg { width: .95em; height: .95em; }
[data-g17-graphic="courseSearch"] .g17g-cs-ico--green { background: var(--g17g-green-bg); color: var(--g17g-green-text); }
[data-g17-graphic="courseSearch"] .g17g-cs-ico--purple { background: var(--g17g-purple-bg); color: var(--g17g-purple); }

/* Search17 dashboard */
[data-g17-graphic="courseSearch"] .g17g-cs-cplabel { display: block; margin-bottom: .25em; font-size: .56em; font-weight: 700; color: var(--g17g-faint); white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-cprow { position: relative; isolation: isolate; display: flex; align-items: center; gap: .5em; height: 2.15em; margin: 0 -.45em; padding: 0 .45em; white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-cprow + .g17g-cs-cprow { box-shadow: 0 -1px 0 var(--g17g-rule); }
[data-g17-graphic="courseSearch"] .g17g-cs-cprow__on { position: absolute; inset: 0; z-index: -1; border-radius: .55em; background: var(--g17g-green-tint); opacity: 0; }
[data-g17-graphic="courseSearch"] .g17g-cs-cprow b { font-size: .68em; }
[data-g17-graphic="courseSearch"] .g17g-cs-cprow > span:not(.g17g-cs-act) { font-size: .6em; color: var(--g17g-muted); }
[data-g17-graphic="courseSearch"] .g17g-cs-act { margin-left: auto; display: inline-grid; justify-items: end; align-items: center; position: relative; }
[data-g17-graphic="courseSearch"] .g17g-cs-act > * { grid-area: 1 / 1; }
[data-g17-graphic="courseSearch"] .g17g-cs-pin { padding: .3em .9em; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--g17g-purple-soft); font-size: .56em; font-weight: 700; color: var(--g17g-purple-text); }
[data-g17-graphic="courseSearch"] .g17g-cs-act .g17g-chip { font-size: .56em; }
[data-g17-graphic="courseSearch"] .g17g-cs-act .g17g-cs-burst { left: 50%; top: 50%; }
[data-g17-graphic="courseSearch"] .g17g-foot { margin-top: .6em; }
[data-g17-graphic="courseSearch"] .g17g-cs-sort { margin-left: auto; display: inline-flex; align-items: center; gap: .2em; font-size: 1em; color: var(--g17g-muted); white-space: nowrap; }
[data-g17-graphic="courseSearch"] .g17g-cs-sort svg { width: 1.2em; height: 1.2em; }
[data-g17-graphic="courseSearch"] .g17g-cs-speed { font-size: .88em; }