/* =====================================================================
   Academy course-card CC island (archive + [academy_courses] cards)
   One glass capsule in the cover's top-right corner, where the lone
   "?" button used to sit. Two white keys bracket it: "CC" on the
   left, then one dot per subtitle language in that language's colour,
   then the "?" on the right. A course without subtitles keeps just the
   "?" key; one without About text keeps just CC and the dots.
   Hovering or focusing the card opens every dot into its code
   (EN · ES · FR), each bubble landing with a little jelly wobble while
   a glint crosses the glass; the visitor's own language wears a ring.
   The About card the "?" opens gains a Subtitles row naming each
   language in its own language. Screens that can't hover show the
   codes outright.
     island  academy_course_loop_cc_island()   includes/functions.php
     CC tag  academy_get_course_loop_cc_tag()  includes/functions.php
     ring    html[data-academy-visitor-lang]   Assets::print_cc_tag_boot_script()
   Replaced the category-row tag, which pushed long categories onto a
   second line (Marc's call, 2026-10-17). Keeps the v2 palette: one
   pastel per language, plus a strong tone for the dot and the ring.
   V2 · B, the second style, puts the same tag beside the category
   pill instead; see its section at the end.
   ===================================================================== */

.academy-course .academy-course__header { position: relative; }

/* The island is centred where the lone 28px "?" sat (12px from the
   corner, so 10px for its 32px), at every width. Inside, two white
   keys bracket the language dots: "CC" on the left, "?" on the right,
   both 20px tall at a 6px inset, so every radius is concentric
   (capsule 16 = key 10 + 6). */
.academy-course .academy-cc-island {
	--cc-spring: cubic-bezier(.34, 1.36, .64, 1);
	--cc-key: linear-gradient(180deg, #fff 40%, #eef0f9);
	--cc-key-shadow: inset 0 -1px 0 rgba(40, 50, 110, .1), 0 1px 2.5px rgba(10, 22, 60, .32);
	--cc-key-ink: #1e2a5e;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 80; /* the "?" layer: over the cover and V3's hairline ring */
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 7px;
	height: 32px;
	margin: 0;
	padding: 0 6px;
	border-radius: 999px;
	font-family: var(--ao-font-ui, 'DM Sans', system-ui, sans-serif);
	font-style: normal;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none; /* the cover stays one big link; the "?" opts back in */
}

/* The glass, the "?" button's own recipe with a little more light up
   top. It lives on a layer of its own so the blur never softens the
   content, and so the glint below can ride on top of it. */
.academy-course .academy-cc-island::before,
.academy-course .academy-cc-island::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	pointer-events: none;
}
.academy-course .academy-cc-island::before {
	background:
		linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 64%),
		var(--ao-info-glass, rgba(255, 255, 255, .18));
	box-shadow:
		inset 0 0 0 1.5px var(--ao-info-glass-border, rgba(255, 255, 255, .45)),
		inset 0 1px 1px rgba(255, 255, 255, .3),
		var(--ao-info-btn-shadow, 0 4px 14px rgba(10, 40, 90, .2));
	-webkit-backdrop-filter: blur(8px) saturate(1.5);
	backdrop-filter: blur(8px) saturate(1.5);
}
/* The glint: a band of light parked off the left end, swept across
   once each time the card is hovered (see the motion block below). */
.academy-course .academy-cc-island::after {
	background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .42) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
	background-size: 250% 100%;
	background-position: 100% 0;
	opacity: 0;
}

.academy-cc-tag {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}
/* no "?" after it: the last bubble's curve runs concentric with the island's end */
.academy-cc-island > .academy-cc-tag:last-child { margin-right: 2px; }

/* "CC": a white key, so it reads on any cover, pale ones included */
.academy-cc-tag__cc {
	flex: none;
	box-sizing: border-box;
	display: grid;
	place-items: center;
	height: 20px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--cc-key);
	box-shadow: var(--cc-key-shadow);
	color: var(--cc-key-ink);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .06em;
	text-indent: .06em; /* re-centres the tracked caps */
}

.academy-cc-tag__langs {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* One language. The open bubble is the default, so screens without
   hover simply show it; the folded dot is the hover screens' resting
   state. 23 × 17 leaves ~5.5px either side of a two-letter code. */
.academy-cc-tag__lang,
.academy-cc-tag__name {
	--cc-strong: #8b90a3;
	--cc-soft: #dfe2ea;
	--cc-ink: #2b2f3d;
	position: relative;
	box-sizing: border-box;
	border-radius: 999px;
	/* candy: a gloss up top, a little shade underneath */
	background:
		radial-gradient(120% 85% at 32% 10%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 56%) no-repeat,
		linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(40, 20, 60, .07)) no-repeat,
		var(--cc-soft);
	box-shadow: 0 1.5px 3px -.5px color-mix(in srgb, var(--cc-strong) 50%, transparent);
	color: var(--cc-ink);
	font-weight: 700;
}
.academy-cc-tag__lang {
	--cc-i: 0;
	--cc-wait: calc(60ms + var(--cc-i) * 32ms); /* hover intent, then left to right */
	flex: none;
	display: grid;
	place-items: center;
	width: 23px;
	height: 17px;
	font-size: 8.5px;
	letter-spacing: .03em;
	text-indent: .03em;
	transition:
		width .46s var(--cc-spring) var(--cc-wait),
		height .46s var(--cc-spring) var(--cc-wait),
		margin .46s var(--cc-spring) var(--cc-wait),
		opacity .2s ease var(--cc-wait),
		background-color .3s ease var(--cc-wait),
		box-shadow .3s ease var(--cc-wait),
		color .2s ease calc(var(--cc-wait) + 130ms);
}
.academy-cc-tag__lang:nth-child(2) { --cc-i: 1; }
.academy-cc-tag__lang:nth-child(3) { --cc-i: 2; }
.academy-cc-tag__lang:nth-child(4) { --cc-i: 3; }
.academy-cc-tag__lang:nth-child(5) { --cc-i: 4; }
.academy-cc-tag__lang:nth-child(6) { --cc-i: 5; }
.academy-cc-tag__lang:nth-child(7) { --cc-i: 6; }
.academy-cc-tag__lang:nth-child(n+8) { --cc-i: 7; }

/* 4+ languages: open, the first two keep their bubbles and the rest
   fold into "+N", so the island never grows past three codes. The
   negative margin cancels the folded bubble's share of the gap. */
.academy-cc-tag--more .academy-cc-tag__lang:nth-child(n+3):not(.academy-cc-tag__lang--more) {
	width: 0;
	margin-left: -3px;
	opacity: 0;
}

/* The visitor's ring sits just OUTSIDE the bubble, so it never crowds
   the code. Nothing around the island clips, so it can't be cut. */
.academy-cc-tag__lang::after,
.academy-cc-tag__name::after {
	content: '';
	position: absolute;
	inset: -1.5px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	pointer-events: none;
}
.academy-cc-tag__lang::after { transition: opacity .2s ease calc(var(--cc-wait) + 160ms); }
html[data-academy-visitor-lang="en"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="en"]::after,
html[data-academy-visitor-lang="es"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="es"]::after,
html[data-academy-visitor-lang="fr"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="fr"]::after,
html[data-academy-visitor-lang="de"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="de"]::after,
html[data-academy-visitor-lang="it"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="it"]::after,
html[data-academy-visitor-lang="pt"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="pt"]::after,
html[data-academy-visitor-lang="zh"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="zh"]::after,
html[data-academy-visitor-lang="ja"] :is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="ja"]::after {
	border-color: var(--cc-strong);
}

/* The palette: a pastel bubble, a strong dot and ring, a dark code */
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="en"] { --cc-soft: #aacaff; --cc-strong: #4f86f0; --cc-ink: #1f3a8a; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="es"] { --cc-soft: #ffb19a; --cc-strong: #f0704f; --cc-ink: #8a2a14; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="fr"] { --cc-soft: #c7afff; --cc-strong: #9772ea; --cc-ink: #4a2e8a; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="de"] { --cc-soft: #9ee0b5; --cc-strong: #36ac6e; --cc-ink: #185a32; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="pt"] { --cc-soft: #ffc880; --cc-strong: #ee9a2e; --cc-ink: #8a4d0e; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="it"] { --cc-soft: #ffa8c5; --cc-strong: #ec5f93; --cc-ink: #8a1f48; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="ja"] { --cc-soft: #ffe066; --cc-strong: #e0b417; --cc-ink: #7a5a0a; }
:is(.academy-cc-tag__lang, .academy-cc-tag__name)[data-lang="zh"] { --cc-soft: #ff9a9a; --cc-strong: #e65252; --cc-ink: #8a1717; }
/* "+N" is neutral, and opens third, right after the two bubbles it follows */
.academy-cc-tag__langs .academy-cc-tag__lang--more { --cc-soft: #e3e6ee; --cc-strong: #9aa0b4; --cc-ink: #4b5163; --cc-i: 2; }

/* ---- The "?" inside the island -------------------------------------
   The lone "?" button's markup, restyled as the CC key's twin: the
   island places it (static, so its About card and caret hang off the
   island) and the island's glass stands in for its own. */
.academy-courses .academy-course .academy-cc-island .academy-course-card-info {
	position: static !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	pointer-events: auto;
}
.academy-courses .academy-course .academy-cc-island .academy-course-card-info__icon {
	position: relative !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 0 !important;  /* m2-academy's mobile polish grows the lone "?" to 40px; */
	min-height: 0 !important; /* in here the key keeps its size and gets a 44px tap target */
	border: 0 !important;
	background: var(--cc-key) !important;
	box-shadow: var(--cc-key-shadow) !important;
	color: var(--cc-key-ink) !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}
.academy-courses .academy-course .academy-cc-island .academy-course-card-info__icon svg {
	width: 14px !important;
	height: 14px !important;
}
.academy-courses .academy-course .academy-cc-island .academy-course-card-info__icon:hover,
.academy-courses .academy-course .academy-cc-island .academy-course-card-info__icon:focus-visible,
.academy-courses .academy-course .academy-cc-island .academy-course-card-info.is-expanded .academy-course-card-info__icon {
	background: var(--cc-key) !important;
	box-shadow: inset 0 -1px 0 rgba(40, 50, 110, .1), 0 2px 6px rgba(10, 22, 60, .34) !important;
	color: var(--ao-accent, #3d5af1) !important;
}
/* The caret points at the middle of the "?" */
.academy-courses .academy-course .academy-cc-island .academy-course-card-info::after {
	right: 9px !important;
}
@media (hover: none), (pointer: coarse) {
	/* a 44px target for fingers, without growing the key */
	.academy-courses .academy-course .academy-cc-island .academy-course-card-info__icon::before {
		content: '';
		position: absolute;
		inset: -12px;
		border-radius: 50%;
	}
}

/* ---- The About card's Subtitles row --------------------------------
   Built from the card's own header pieces, so "CC SUBTITLES" mirrors
   "? ABOUT THIS COURSE" above it. */
.academy-course .academy-course-card-info__subtitles {
	display: block;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid rgba(30, 50, 110, .08);
}
.academy-courses .academy-course .academy-course-card-info__tooltip-badge--cc {
	font-size: 7.5px !important;
	letter-spacing: .04em;
	text-indent: .04em;
}
.academy-course .academy-course-card-info__languages {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.academy-cc-tag__name {
	display: inline-grid;
	place-items: center;
	height: 22px;
	padding: 0 10px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .01em;
}
.academy-cc-tag__name::after { inset: -2px; }

/* ---- Hover screens --------------------------------------------------
   At rest every language folds to a dot of its colour (all of them,
   even past the third), "+N" folds away, and everything folds back at
   once when the pointer leaves. An open About card (tapped on a
   touch laptop) keeps the codes open too. */
@media (hover: hover) {
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-tag__lang {
		width: 7px;
		height: 7px;
		margin-left: 0;
		opacity: 1;
		background-color: var(--cc-strong);
		color: transparent;
		box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(8, 18, 48, .3);
		transition-duration: .22s, .22s, .22s, .22s, .22s, .22s, .08s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	}
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-tag__lang--more {
		width: 0;
		margin-left: -3px;
		opacity: 0;
	}
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-tag__lang::after {
		opacity: 0;
		transition: opacity .1s ease;
	}
}

/* Hover screens: each bubble lands with a jelly wobble, in the same
   left-to-right order as the bloom, as a glint crosses the glass. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-tag__lang {
		animation: academy-cc-tag-jelly .64s ease-out calc(var(--cc-wait) + 40ms) both;
	}
	.academy-course:is(:hover, :focus-within) .academy-cc-island::after {
		animation: academy-cc-island-glint .9s cubic-bezier(.3, 0, .2, 1) .1s both;
	}
}
@keyframes academy-cc-tag-jelly {
	0% { transform: scale(1); }
	30% { transform: scale(1.16, .84); }
	55% { transform: scale(.93, 1.08); }
	78% { transform: scale(1.03, .98); }
	100% { transform: none; }
}
@keyframes academy-cc-island-glint {
	0% { background-position: 100% 0; opacity: 1; }
	100% { background-position: 0 0; opacity: 1; }
}

/* ---- V2 · B: the tag beside the category ------------------------------
   V2's second style (academy_cc_indicator() 'v2b', "B · Edge dots"
   from the category-row round): no island, the "?" stays the lone
   glass button, and the tag sits at the right end of the category
   pill's row, an outlined CC mark (or a filled one, --solid) followed
   by the same candy dots.
   The row can't wrap, so the card can't grow: .academy-cc-edge takes
   only the room the pill leaves and, as a size container, opens only
   as many codes as fit in it, counting the rest into "+N". Where no
   code fits beside the mark, the mark steps aside while the card is
   hovered, but only for two or more languages: a lone code blooms
   beside the mark on every card, and where the row is short it runs a
   few px into the card's padding (safe flex-end) rather than move
   the mark. The row takes over the pill's bottom margin, so a card
   with CC is exactly as tall as one without.
     row  academy_course_loop_category_row()  includes/functions.php */
.academy-course .academy-course__meta-row {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 16px;
}
.academy-course .academy-course__meta-row > .academy-course__meta--category {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis; /* only for a category too long to leave the dots room */
}
.academy-course .academy-cc-edge {
	--cc-n: 1; /* languages; set per card */
	--cc-spring: cubic-bezier(.34, 1.36, .64, 1);
	/* Resting dots sit 9px apart (6px dot, 3px gap). Where the room is
	   shorter (mark 21 + gap 4 + 6px for the first dot, then the rest),
	   they close up and overlap like beads instead, down to 3px apart. */
	--cc-dot-pull: clamp(-6px, calc((100cqw - 31px) / (var(--cc-n) - 1) - 9px), 0px);
	/* the same, hovered in the tightest rows: the first code open (23)
	   and its gap (3), then a dot for each of the others */
	--cc-dot-pull-open: clamp(-6px, calc((100cqw - 32px) / (var(--cc-n) - 2) - 9px), 0px);
	flex: 1 1 0;
	/* The pill keeps its full name: only a category over ~180px would
	   give way to the mark. Short of room for the mark and a dot (V3's
	   wider pill with its longest names), the dot rides a few px into
	   the card's padding, never over the pill. */
	min-width: 21px;
	display: flex;
	justify-content: flex-end; /* dots rest at the right end and bloom leftwards */
	justify-content: safe flex-end; /* …and anything too wide spills right, never over the pill */
	container: academy-cc-edge / inline-size;
	font-family: var(--ao-font-ui, 'DM Sans', system-ui, sans-serif);
	font-style: normal;
	line-height: 1;
	text-transform: none;
	white-space: nowrap;
	pointer-events: none; /* decoration; the card's links stay the targets */
}
.academy-cc-edge .academy-cc-tag { gap: 4px; }
/* The candy's own coloured shadow, plus a hairline of the card's white
   that only shows where closed-up dots overlap */
.academy-cc-edge .academy-cc-tag__lang {
	--cc-dot-shadow: 0 0 0 1px #fff, 0 1.5px 3px -.5px color-mix(in srgb, var(--cc-strong) 50%, transparent);
	padding-top: 2px; /* DM Sans caps sit high in a line-height-1 box; fallback nudge, see the text-box block below */
	box-shadow: var(--cc-dot-shadow);
}

/* The mark: the captions icon, outlined in the category's blue */
.academy-cc-edge .academy-cc-tag__cc {
	width: 21px;
	height: 17px;
	padding: 0;
	overflow: hidden;
	border-radius: 5px;
	background: none;
	box-shadow: inset 0 0 0 1.5px var(--ao-accent, #3d5af1);
	color: var(--ao-accent, #3d5af1);
	font-size: 8px;
	font-weight: 800;
	transition:
		width .46s var(--cc-spring) 60ms,
		margin .46s var(--cc-spring) 60ms,
		opacity .2s ease 60ms;
}
/* …or filled (Design → Edge Dots → CC mark, academy_cc_edge_mark()):
   solid blue with the dots' gloss, so it weighs as much as they do */
.academy-cc-edge.academy-cc-edge--solid .academy-cc-tag__cc {
	background:
		radial-gradient(120% 85% at 32% 10%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 56%) no-repeat,
		linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(10, 10, 60, .14)) no-repeat,
		var(--ao-accent, #3d5af1);
	box-shadow: 0 1.5px 3px -.5px color-mix(in srgb, var(--ao-accent, #3d5af1) 60%, transparent);
	color: #fff;
}
/* Codes and mark centred on their capital letters, not on the font's
   metrics, so they sit dead centre in every engine (the 2px nudge above
   was tuned in Chrome; Safari drew it low). Browsers without text-box
   keep the nudge. */
@supports (text-box: trim-both cap alphabetic) {
	.academy-cc-edge .academy-cc-tag__lang,
	.academy-cc-edge .academy-cc-tag__cc {
		display: block;
		padding: calc((17px - 1cap) / 2) 0 0;
		text-align: center;
		text-box: trim-both cap alphabetic;
	}
	.academy-cc-edge .academy-cc-tag__lang--more::before { display: inline; }
}

/* "+N" counts whatever the room folded away before it */
.academy-cc-edge .academy-cc-tag__langs { counter-reset: academy-cc-more; }
.academy-cc-edge .academy-cc-tag__lang--more {
	width: 0;
	margin-left: -3px;
	opacity: 0;
}
.academy-cc-edge .academy-cc-tag__lang--more::before { content: '+' counter(academy-cc-more); }

/* How many codes open is up to the room. Beside the mark: three from
   100px (21 + 4 + 3 × 23 + 2 × 3), two from 74px, one from 48px. With
   the mark stepped aside (hover screens only, below): two from 49px,
   one from 23px. Short of that, the dots stay dots. */
@container academy-cc-edge (width >= 100px) {
	/* 4+ languages: the first two, then "+N" */
	.academy-cc-edge .academy-cc-tag__langs:has(> :nth-child(5)) > .academy-cc-tag__lang:nth-child(n+3):not(.academy-cc-tag__lang--more) {
		width: 0;
		margin-left: -3px;
		opacity: 0;
		counter-increment: academy-cc-more;
	}
	.academy-cc-edge .academy-cc-tag__langs:has(> :nth-child(5)) > .academy-cc-tag__lang--more {
		width: 23px;
		margin-left: 0;
		opacity: 1;
	}
}
@container academy-cc-edge (74px <= width < 100px) {
	/* 3+ languages: the first, then "+N" */
	.academy-cc-edge .academy-cc-tag__langs:has(> .academy-cc-tag__lang--more) > .academy-cc-tag__lang:nth-child(n+2):not(.academy-cc-tag__lang--more) {
		width: 0;
		margin-left: -3px;
		opacity: 0;
		counter-increment: academy-cc-more;
	}
	.academy-cc-edge .academy-cc-tag__lang--more {
		--cc-i: 1;
		width: 23px;
		margin-left: 0;
		opacity: 1;
	}
}
@container academy-cc-edge (width < 49px) {
	/* No room for two codes even without the mark: past the first,
	   every language stays a dot */
	.academy-cc-edge .academy-cc-tag__lang + .academy-cc-tag__lang:not(.academy-cc-tag__lang--more) {
		width: 6px;
		height: 6px;
		background-color: var(--cc-strong);
		color: transparent;
	}
	.academy-cc-edge .academy-cc-tag__lang + .academy-cc-tag__lang:not(.academy-cc-tag__lang--more)::after { opacity: 0; }
}

/* Touch screens show the open tag at rest, so the mark never steps
   aside there: where the codes would need its room, the dots stay. */
@media (hover: none) {
	@container academy-cc-edge (width < 74px) {
		.academy-cc-edge .academy-cc-tag__langs:has(> :nth-child(2)) > .academy-cc-tag__lang:not(.academy-cc-tag__lang--more) {
			width: 6px;
			height: 6px;
			background-color: var(--cc-strong);
			color: transparent;
		}
		.academy-cc-edge .academy-cc-tag__langs:has(> :nth-child(2)) > .academy-cc-tag__lang + .academy-cc-tag__lang:not(.academy-cc-tag__lang--more) {
			margin-left: var(--cc-dot-pull);
		}
		.academy-cc-edge .academy-cc-tag__langs:has(> :nth-child(2)) > .academy-cc-tag__lang::after { opacity: 0; }
	}
	@container academy-cc-edge (width < 48px) {
		.academy-cc-edge .academy-cc-tag__lang:not(.academy-cc-tag__lang--more) {
			width: 6px;
			height: 6px;
			background-color: var(--cc-strong);
			color: transparent;
		}
		.academy-cc-edge .academy-cc-tag__lang::after { opacity: 0; }
	}
}

/* Hover screens, while the card is hovered or focused: where the
   codes need the mark's room, it steps aside for them. */
@media (hover: hover) {
	@container academy-cc-edge (49px <= width < 74px) {
		/* 2 languages: both codes. 3+: the first, then "+N" */
		.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag:has(.academy-cc-tag__lang:nth-child(2)) .academy-cc-tag__cc {
			width: 0;
			margin-right: -4px;
			opacity: 0;
		}
		.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag__langs:has(> .academy-cc-tag__lang--more) > .academy-cc-tag__lang:nth-child(n+2):not(.academy-cc-tag__lang--more) {
			width: 0;
			margin-left: -3px;
			opacity: 0;
			counter-increment: academy-cc-more;
		}
		.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag__lang--more {
			--cc-i: 1;
			width: 23px;
			margin-left: 0;
			opacity: 1;
		}
	}
	@container academy-cc-edge (width < 49px) {
		/* 2+ languages: the first language's code, then a dot for each of
		   the others (a lone code opens beside the mark, see above) */
		.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag:has(.academy-cc-tag__lang:nth-child(2)) .academy-cc-tag__cc {
			width: 0;
			margin-right: -4px;
			opacity: 0;
		}
		.academy-course:is(:hover, :focus-within, .academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag__lang + .academy-cc-tag__lang + .academy-cc-tag__lang:not(.academy-cc-tag__lang--more) {
			margin-left: var(--cc-dot-pull-open);
		}
	}

	/* At rest: the mark and a dot per language, "+N" folded away, and
	   everything folds back at once when the pointer leaves */
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag .academy-cc-tag__lang {
		width: 6px;
		height: 6px;
		margin-left: 0;
		opacity: 1;
		background-color: var(--cc-strong);
		color: transparent;
		box-shadow: var(--cc-dot-shadow);
		transition-duration: .22s, .22s, .22s, .22s, .22s, .22s, .08s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	}
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag .academy-cc-tag__lang + .academy-cc-tag__lang {
		margin-left: var(--cc-dot-pull);
	}
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag .academy-cc-tag__lang + .academy-cc-tag__lang--more {
		width: 0;
		margin-left: -3px;
		opacity: 0;
	}
	.academy-course:not(:hover):not(:focus-within):not(.academy-course--tooltip-open) .academy-cc-edge .academy-cc-tag__cc {
		transition-duration: .22s;
		transition-delay: 0s;
		transition-timing-function: cubic-bezier(.4, 0, .2, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.academy-cc-tag__lang,
	.academy-cc-tag__lang::after,
	.academy-cc-edge .academy-cc-tag__cc { transition: none !important; }
}