/*
 * Benefits Downbeat — the single-course "What You'll Learn?" section,
 * recomposed (Marc's pick from the 2026-08-27 concepts artifact): the
 * first benefit, when long enough to be the course's thesis, becomes a
 * serif lead; the rest land as one even checklist on a white card panel,
 * replacing the ragged two-column card masonry. Styles ONLY the
 * .acdb DOM the layer's JS builds
 * (assets/js/academy-benefits-downbeat.js) and hides the vendor block by
 * class while active — vendor markup and meta are untouched, so the
 * Overlays switch off restores stock instantly.
 *
 * Color law (Marc, 2026-08-27, third ruling is final): the section wears
 * the ROOM's accent — var(--ao-accent), the same blue every other
 * course-page control rides (overhaul light / m2-canon / m2-dark night
 * all re-declare it, so day and night both come free). Teal was rejected
 * on this surface TWICE (classic #0bd3c0 read success-green; neon
 * #2ee6d2 was "still teal... makes no sense" beside the blue buttons) —
 * lagoon belongs to the watch page, not here. No hardcoded colors in
 * rules: everything rides --ao-* tokens; --acdb-accent exists only as
 * the single repoint seam (academy/benefits_downbeat_accent filter,
 * inline override from assets.php). The marker-stroke highlight from the
 * concepts artifact is GONE for good — IRL it clipped, and a blue stroke
 * under a phrase reads as a hyperlink.
 *
 * !important on text color/type AND the full section-scoped selector on
 * every text rule: the overhaul stylesheet styles this page's paragraphs
 * with !important greys at multi-class specificity, which turned the
 * lead pale on prod — the layer speaks the room's dialect back at it,
 * one class louder (3 classes beats overhaul's 2-class p rules).
 *
 * Widths are container-intrinsic (cqi type ramps on .acdb / .acdb-mast)
 * — the course column is not the viewport, so this sheet carries no
 * viewport media queries and never will. Since v4 it carries no width
 * BRANCH either: the type scales, the composition does not change.
 *
 * v2 — ONE VOICE (Marc's pick, N1 from the 2026-08-27 identity-concepts
 * artifact): the area speaks once. The description becomes a serif
 * masthead on the open ground (vendor H2 dressed as the eyebrow,
 * .acdb-mast-on), and the tab zone dissolves into an always-visible
 * ledger at the foot of the benefits panel (.acdb-absorbed hides the
 * vendor block; .acdb-room remains as the no-panel fallback). N2's
 * pitch chips / label rewrites and N3's ink stage were not picked —
 * still no new colors, still the room's blue.
 *
 * v3 — MOBILE PORT (Marc, 2026-08-27: "looks a tad ass or unfinished,
 * bg color differs from the top"): the milk glass is retired for the
 * room's flat white. See ONE WHITE below.
 *
 * v4 — NO BREAKPOINT (Marc, 2026-08-28, screen recording: "wth is this
 * zoom change, it disrupts way too much... the zoomed out version looks
 * neat but the regular one kinda chaotic"). v3 also carried a
 * @container (max-width: 640px) branch that swapped the card between
 * two compositions. Measured off the recording's frames: the course
 * column is 734 CSS px at BOTH of his zooms — the container never
 * changed size — yet one zoom step flipped the branch anyway. A hard
 * composition switch 13% away from the column's real width is a trap
 * whatever the engine is doing with zoom, so the branch is gone and
 * this sheet now has NO width branch at all: one composition at every
 * width, phone to desktop, which is the only kind that cannot flip.
 *
 * v5 — TWO-UP RESTORED, ZONE BY ZONE (Marc, 2026-08-30, red pen drawn
 * down the ragged right edge: "maybe we should honor the OG at least
 * more for the desktop version... almost 50% of the width is unused").
 * v4's single ruled column was tidy and wasted half a 730px card. The
 * two zones now use the width in the way each one's content wants,
 * and neither needs a query to do it:
 *
 *   · The promise — short punchy lines — goes back to the OG's
 *     auto-fit two-up on gaps. No row rules: in a grid the tracks
 *     share rows, but a rule on the first row would break across the
 *     36px column gap, and the airy checklist is what the OG was.
 *   · The absorbed ledger — full sentences, 50-65 chars — stays ONE
 *     full-width ruled column. That is what kills the OG's real
 *     defect: 4 audience rows beside 1 requirement row left a hole in
 *     the card's foot, and a hole is what "chaotic" was pointing at.
 *     Full width also lets every one of those sentences set on a
 *     single line.
 *
 * Hierarchy is register, not size: promise rows are --ao-ink on the
 * 22px chip, ledger rows --ao-ink-soft on an 18px chip under their
 * label, both at 16px/15px. Nothing about the composition changes with
 * width — only how many tracks the promise sits in.
 *
 * v6 — HALO (Marc, 2026-09-01, picked B from the "Downbeat Marks"
 * artifact; A ink stroke, C count-in numerals and D dash were NOT
 * picked): the row mark loses its fill. The 22px chip was the most
 * saturated area on the card — a solid accent block with a white glyph
 * is the vocabulary of a form checkbox, and four of them at one weight
 * made the promise and the audience read as one to-do list. The chip
 * keeps its footprint and rhythm and becomes a 1.5px accent ring with
 * an accent check; the ledger's rows drop the check for a 6px accent
 * pip centred in the same 22px column, so the two zones now carry two
 * marks and the ledger text holds the promise's left edge. Still the
 * room's blue, still tokens only, still CSS-only on the DOM the JS
 * builds — the script did not change. The .acdb-room fallback's
 * icon-font check wears the same ring.
 */

.academy-single-course__content-item--benefits.acdb-on,
.academy-single-course__content-item--additional-info.acdb-room,
.academy-single-course__content-item--description.acdb-mast-on {
	--acdb-accent: var(--ao-accent, #2563EB);
}

/* Vendor block stands down only while the class is on — the class is the
   last thing the JS sets, so a half-failed boot leaves stock visible. */
.academy-single-course__content-item--benefits.acdb-on .benefits-title,
.academy-single-course__content-item--benefits.acdb-on .benefits-content {
	display: none;
}

.acdb {
	container-type: inline-size;
}

/* ONE WHITE (Marc, 2026-08-27 mobile pass: "bg color differs from the
   top? looks off"). The panel was milk glass — 78% surface-card over a
   static 14px blur. Measured on prod at 393px: this panel was the only
   translucent surface in the room (.academy-accordion > li computes a
   flat rgb(255,255,255)), so it alone sampled the holographic ground and
   drifted bright-at-the-top to grey-at-the-foot down its 640px mobile
   height — a second, dirtier white beside the room's fixed one, which is
   exactly what read as unfinished. The glass earned nothing at 78% over
   a pastel wash (it only muddied), and a full-bleed backdrop-filter is a
   real scroll cost on iOS, so it is gone at every width: two whites
   across breakpoints would be worse than either. The panel now wears the
   room's card white, flat, and the ground can do whatever it likes
   behind it. Night comes free — the token is #1B1916 under m2-dark.
   The additional-info block (Targeted Audience / Requirements tabs)
   wears the same panel — the room dresses to match the instrument. */
.acdb__panel,
.academy-single-course__content-item--additional-info.acdb-room {
	background: var(--ao-surface-card);
	border: 1px solid var(--ao-border-light);
	border-radius: var(--ao-r-lg, 22px);
	box-shadow: var(--ao-sh-lg);
	padding: 28px;
	padding: clamp(22px, 5cqi, 44px);
}

/* The vendor h4's own text, demoted to an eyebrow (same element level —
   the section keeps its heading for the document outline). */
.academy-single-course__content-item--benefits.acdb-on .acdb__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	padding: 0;
	border: none;
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ao-ink) !important;
}

.academy-single-course__content-item--benefits.acdb-on .acdb__eyebrow::after {
	content: "";
	flex: 0 0 44px;
	height: 2px;
	border-radius: 1px;
	background: var(--acdb-accent);
}

.academy-single-course__content-item--benefits.acdb-on .acdb__lead {
	font-family: var(--m2-display, 'Fraunces', 'Source Serif 4', Georgia, serif) !important;
	font-size: 26px !important;
	font-size: clamp(21px, 3.4cqi, 29px) !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: var(--ao-ink) !important;
	max-width: 34ch;
	margin: 0 0 10px;
	text-wrap: balance;
}

.academy-single-course__content-item--benefits.acdb-on .acdb__kicker {
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 14px !important;
	line-height: 1.55 !important;
	color: var(--ao-ink-muted) !important;
	max-width: 60ch;
	margin: 0 0 26px;
}

.acdb__rule {
	border: none;
	border-top: 1px solid var(--ao-border-light);
	margin: 0 0 24px;
}

/* v5: the OG two-up is back for the promise (Marc, 2026-08-30, red pen
   down the ragged edge: "almost 50% of the width is unused"). It was
   right to be nervous about the column count — but the thing that made
   the zoom flip intolerable was the COMPOSITION changing (rules
   appearing, the ledger restructuring), not the count. auto-fit is not
   a branch: it is continuous, it needs no query, and the only thing it
   varies is how many tracks the same rows sit in. The rules, the
   labels, the ledger and the registers are now identical at every
   width, so a reflow reads as a reflow.

   240px min, not the OG's 260: at a 610px column (what the sidebar
   leaves at ~1024px of window) 260 fell one track short and dropped to
   a single column, which is exactly the kind of surprise this card has
   had enough of. 240 holds two tracks from ~530px of container up —
   every desktop and tablet column this page produces — and a phone at
   363 is nowhere near it. */
.acdb__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	align-items: start;
	gap: 16px 36px;
}

.academy-single-course__content-item--benefits.acdb-on .acdb__item {
	display: flex;
	gap: 12px;
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: var(--ao-ink-soft) !important;
	/* a narrow column cannot absorb a long unbroken token, and one
	   benefit that overflows hands the whole document a sideways scroll */
	overflow-wrap: break-word;
}

/* The promise speaks first: full ink beside the ring, against the
   ledger's soft ink beside the pip. Ink and chip carry the hierarchy;
   the promise dropped back from v4's 17px to the base 16px because a
   size bump only made the two-up wrap harder, and the one step down to
   the ledger's 15px is enough. Four classes: the base rule above is
   three, and it carries !important because overhaul's greys do. */
.academy-single-course__content-item--benefits.acdb-on .acdb__grid > .acdb__item {
	color: var(--ao-ink) !important;
	text-wrap: pretty;
}

/* The tail tie: the layer's JS wraps a trailing emoji and the word
   before it in this span (see setTied()). It has to be nowrap rather
   than a plain non-breaking space, because WordPress rewrites those
   emoji into <img class="emoji"> and a replaced element takes a line
   break in front of it that U+00A0 cannot stop. */
.acdb__tie {
	white-space: nowrap;
}

.acdb__tie img.emoji,
.acdb__item img.emoji {
	/* the WP emoji image ships without dimensions and inherits the row's
	   line-height box; pin it to the text so a tied tail cannot grow the
	   line it was glued into */
	width: 1em;
	height: 1em;
	vertical-align: -.1em;
}

/* v6 HALO: the ring. Same 22px footprint the promise rows have carried
   since v1, no fill — an inset box-shadow draws the 1.5px accent ring
   (a border would eat into the box and shift the glyph), and the check
   is the accent itself. Nothing on the card is a solid block any more,
   so the serif lead is the heaviest thing on it again. */
.acdb__tick {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: 50%;
	background: transparent;
	box-shadow: inset 0 0 0 1.5px var(--acdb-accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.acdb__tick svg {
	width: 11px;
	height: 11px;
	fill: none;
	stroke: var(--acdb-accent);
	stroke-width: 2.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ------------------------------------------------------------------
   ONE VOICE masthead (v2): the description promoted to the area's
   statement. The vendor H2 keeps its element and text and becomes the
   eyebrow; the promoted paragraph is hidden ONLY under the compound
   .acdb-mast-on gate, so a half-failed boot leaves stock visible. The
   eyebrow rule must out-shout overhaul's section-heading block (1 class
   + !important on face, size, tracking, border) AND this sheet's own
   v1 dash-replacement below (2 classes) — hence the full scope and
   !important throughout. */

.academy-single-course .academy-single-course__content-item--description.acdb-mast-on .academy-single-course__content-item--description-title {
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin: 0 0 18px !important;
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase;
	color: var(--ao-ink) !important;
}

.academy-single-course .academy-single-course__content-item--description.acdb-mast-on .academy-single-course__content-item--description-title::after {
	content: "";
	display: block;
	flex: 0 0 44px;
	width: 44px;
	height: 2px;
	margin-top: 0;
	border-radius: 1px;
	background: var(--acdb-accent);
}

.acdb-mast {
	container-type: inline-size;
}

.academy-single-course .academy-single-course__content-item--description.acdb-mast-on .acdb-mast__statement {
	font-family: var(--m2-display, 'Fraunces', 'Source Serif 4', Georgia, serif) !important;
	font-size: 30px !important;
	font-size: clamp(26px, 4.6cqi, 34px) !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	color: var(--ao-ink) !important;
	max-width: 24ch;
	margin: 0 0 10px;
	text-wrap: balance;
}

.academy-single-course .academy-single-course__content-item--description.acdb-mast-on .acdb-mast__kicker {
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--ao-ink-muted) !important;
	max-width: 60ch;
	margin: 0;
}

.academy-single-course__content-item--description.acdb-mast-on .acdb-mast-stock {
	display: none;
}

/* ------------------------------------------------------------------
   ONE VOICE ledger (v2): the tab zone's columns, always visible at the
   foot of the benefits panel. Rows reuse .acdb__item, so text and tick
   speak the grid's exact voice. */

/* Each ledger column carries its own top rule, so the divider language
   is the same one the rows use; the standalone hr would double it. */
.acdb__rule--ledger {
	display: none;
}

.acdb__ledger-col {
	margin-top: 10px;
	padding-top: 20px;
	border-top: 1px solid var(--ao-border-light);
}

.academy-single-course__content-item--benefits.acdb-on .acdb__ledger-label {
	margin: 0 0 2px;
	padding: 0;
	border: none;
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ao-ink-muted) !important;
}

.acdb__ledger-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.acdb__ledger-list .acdb__item {
	padding: 12px 0;
}

.acdb__ledger-list .acdb__item + .acdb__item {
	border-top: 1px solid var(--ao-border-light);
}

.acdb__ledger-col:last-child .acdb__ledger-list .acdb__item:last-child {
	padding-bottom: 0;
}

/* The ledger is the fine print under the promise — a step down in size,
   ink and mark, which is what keeps one column from reading as one
   undifferentiated list. */
.academy-single-course__content-item--benefits.acdb-on .acdb__ledger-list .acdb__item {
	font-size: 15px !important;
	color: var(--ao-ink-soft) !important;
}

/* v6 HALO: the ledger's mark is a 6px accent pip, not a smaller ring —
   two zones, two marks. It keeps the full 22px column so the ledger
   text sits on the promise's left edge (v5's 18px chip had it 4px
   short), and the svg is hidden rather than removed: the JS still
   builds one tick per row, and the Overlays switch still restores
   stock. */
.acdb__ledger-list .acdb__tick {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	box-shadow: none;
}

.acdb__ledger-list .acdb__tick svg {
	display: none;
}

.acdb__ledger-list .acdb__tick::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--acdb-accent);
}

/* vendor tab block stands down once its columns live in the panel —
   display gets !important so no vendor or theme rule can resurrect a
   duplicate of content that now renders twice otherwise */
.academy-single-course__content-item--additional-info.acdb-absorbed {
	display: none !important;
}

/* ------------------------------------------------------------------
   The room: Targeted Audience / Requirements (2026-08-27, Marc's
   wrap-up pass). Vendor paints this zone --academy-dark-gray-color
   text, 14px, a 12px grey check, and a 2px near-white border under
   EVERY tab li — the "weird white lines" over the holographic ground.
   CSS-only recompose of the vendor DOM (no rebuild; the tab switching
   stays vendor JS): tabs speak the eyebrow's voice, list rows become
   the same ink-and-chip ledger as the benefits grid. Class-gated like
   everything else — .acdb-room is added by the layer JS, so off means
   untouched stock. */

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav {
	display: flex;
	gap: 28px;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: 1px solid var(--ao-border-light) !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav li {
	display: block;
	margin: 0 0 -1px !important;
	border-bottom: 2px solid transparent !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav li a {
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: .18em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	padding: 4px 0 14px !important;
}

/* inactive keeps real ink (soft, never washed grey) — outranks
   m2-dark's muted lift by one class */
.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav li:not(.active) a {
	color: var(--ao-ink-soft) !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav li.active {
	border-bottom-color: var(--acdb-accent) !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-nav li.active a {
	color: var(--acdb-accent) !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-tabs-content {
	margin-top: 6px !important;
}

.academy-single-course__content-item--additional-info.acdb-room .academy-lists li {
	display: flex !important;
	align-items: flex-start;
	gap: 12px;
	margin: 0 !important;
	padding: 14px 0 !important;
}

/* quiet ledger separators between rows, none after the last */
.academy-single-course__content-item--additional-info.acdb-room .academy-lists li + li {
	border-top: 1px solid var(--ao-border-light);
}

.academy-single-course__content-item--additional-info.acdb-room .academy-lists li span {
	font-family: var(--ao-font-ui, system-ui, sans-serif) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
	color: var(--ao-ink-soft) !important;
}

/* the vendor's icon-font check, dressed as the same ring as the
   promise ticks (v6 HALO) — one mark language across the whole page */
.academy-single-course__content-item--additional-info.acdb-room .academy-lists li i.academy-icon--check {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin: 1px 0 0 !important;
	border-radius: 50%;
	background: transparent !important;
	box-shadow: inset 0 0 0 1.5px var(--acdb-accent);
	color: var(--acdb-accent) !important;
	font-size: 11px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* ------------------------------------------------------------------
   Section headings ("Course Overview", "Course Content", reviews):
   overhaul underlines them edge to edge with --ao-border-light, which
   floats over the holographic ground as a glowing white line. Replace
   the line with the system's short accent dash — the same stroke the
   eyebrow carries. Pure CSS on the page wrapper, no class gate needed:
   decorative, and the whole sheet unloads with the Overlays switch.
   (benefits-title is hidden by the layer and needs nothing.) */

.academy-single-course .academy-single-course__content-item--description-title,
.academy-single-course .academy-curriculum-title,
.academy-single-course .feedback-title {
	border-bottom: none !important;
	padding-bottom: 0 !important;
	margin-bottom: 22px !important;
}

.academy-single-course .academy-single-course__content-item--description-title::after,
.academy-single-course .academy-curriculum-title::after,
.academy-single-course .feedback-title::after {
	content: "";
	display: block;
	width: 44px;
	height: 2px;
	margin-top: 12px;
	border-radius: 1px;
	background: var(--ao-accent, #2563EB);
}

/* ------------------------------------------------------------------
   Two spacing corrections that came out of the mobile pass and hold at
   every width (they were briefly trapped inside the v3 breakpoint):
   the panel had 17px of vendor section margin separating it from the
   masthead's last line, and the lead's hairline hung off the lead
   (10px above, 24px below) so it read as its underline rather than as
   the divider it is. */

.acdb__panel {
	margin-top: 10px;
}

.academy-single-course__content-item--benefits.acdb-on .acdb__lead {
	margin-bottom: 18px;
}

.acdb__rule {
	margin-bottom: 16px;
}