/* ==========================================================================
   ALTUS portal — design-system component layer
   --------------------------------------------------------------------------
   portal.altusaviation.co.za · prefix altus-ld- (the main site uses altus-nv-)

   Loads AFTER style.css and depends on the tokens declared in its :root.
   style.css  = the frame LearnDash renders (Focus Mode chrome, course shell).
   THIS FILE  = the components LearnDash does not render — everything inside
                the content canvas. That is the line drawn in
                60-Portal/portal-design-system.md: style what LearnDash
                renders, design what LearnDash does not.

   Ported from the approved Phase 3 prototype
   60-Portal/altus-portal-page-anatomy.html. The prototype used short generic
   class names (.mhead, .grid, .card, .btn) that are safe in a standalone file
   and certain to collide with Themify and LearnDash here, so every one of them
   is renamed to the altus-ld- namespace. The layout JSON and the prototype are
   kept in step through the map in the handoff.

   Selectors carry an `html body` ancestor rather than !important. Themify's
   generated stylesheets load after the child theme, so equal specificity
   loses — build-guide rule 7.

   Version is the child theme's style.css Version header; bump it there.
   ========================================================================== */

:root {
	/* Component-layer additions to the brand tokens in style.css */
	--altus-faint:        #9AA0A8;
	--altus-carbon:       #0E1116;
	--altus-zebra:        #FBFCFD;

	/* Examinable emphasis — decision 41. Level 1 is a 10% tint: measured on
	   real prose at the 15–20% density cap, 6% disappeared and 14% striped. */
	--altus-exam-tint:    rgba(244, 55, 69, 0.10);

	/* Practice blue. Deliberately NOT brand red: an H5P checkpoint is ungated
	   practice and must not read as assessment. */
	--altus-practice:     #1565C0;
	--altus-practice-line:#CFE4FB;
	--altus-practice-bg:  #F5FAFF;

	/* State tints */
	--altus-green-bg:     #EDFAF3;
	--altus-green-line:   #BFE8D5;
	--altus-green-ink:    #0F7A50;
	--altus-red-bg:       #FFF1F2;
	--altus-red-line:     #FFD4D8;
	--altus-warn-bg:      #FFF8EC;
	--altus-warn-line:    #FFE0B2;
	--altus-warn-ink:     #B26A00;
}

/* Box-sizing. The portal is content-box globally, and that put the rail's
   waypoint dots two pixels off the track: a 16px dot with a 2px border measures
   20px and centres at 10px from the path edge, while the track centres at 8px.
   Small, and the kind of thing that makes a page look slightly wrong without
   anyone being able to say why. Every component in this file is border-box. */
html body [class*="altus-ld-"],
html body [class*="altus-ld-"] *,
html body [class*="altus-ld-"]::before,
html body [class*="altus-ld-"]::after,
html body [class*="altus-ld-"] *::before,
html body [class*="altus-ld-"] *::after {
	box-sizing: border-box;
}

/* Smooth in-page travel for the section rail, with room for the sticky
   LearnDash Focus Mode header. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}


/* ==========================================================================
   1 · MODULE HEADER — rows 1 and 2 of the module page
   ========================================================================== */

html body .altus-ld-mhead {
	position: relative;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	margin: 0 0 16px;
	overflow: hidden;
	box-shadow: var(--altus-shadow);
}

/* The 5px gradient edge is on the block itself, not a module ::after —
   build-guide rule 2 suppresses those. */
html body .altus-ld-mhead::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--altus-gradient);
}

html body .altus-ld-mhead__pad { padding: 34px 38px 30px; }

html body .altus-ld-eyebrow {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--altus-red-link);
	margin: 0 0 12px;
}

html body .altus-ld-mhead h1 {
	font-family: var(--altus-font-head);
	font-size: clamp(28px, 3.6vw, 40px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--altus-ink);
	max-width: 22ch;
	margin: 0 0 16px;
}

html body .altus-ld-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

html body .altus-ld-chip {
	font-family: var(--altus-font-head);
	font-size: 12px;
	font-weight: 500;
	color: var(--altus-secondary);
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	border-radius: 99px;
	padding: 6px 13px;
}

html body .altus-ld-chip b { color: var(--altus-ink); font-weight: 700; }

/* --- "What this module is for" — the tinted footer of the same card ------- */

html body .altus-ld-forwhat {
	border-top: 1px solid var(--altus-border);
	background: var(--altus-cloud);
	padding: 26px 38px 28px;
}

html body .altus-ld-forwhat h3 {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--altus-red-link);
	margin: 0 0 14px;
}

html body .altus-ld-aim {
	font-size: 16px;
	color: var(--altus-body);
	margin: 0 0 20px;
	max-width: 78ch;
}

html body .altus-ld-los {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

html body .altus-ld-los li {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 15.5px;
	line-height: 1.5;
	margin: 0;
}

html body .altus-ld-los__n {
	flex: 0 0 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 11px;
	color: var(--altus-red-link);
	display: grid;
	place-items: center;
	margin-top: 2px;
}

/* Self-demonstrating legend — the key carries the treatment, so it needs no
   explanation of the mechanism (decision 41). */
html body .altus-ld-legend {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px dashed var(--altus-border);
	font-size: 14px;
	color: var(--altus-secondary);
}


/* ==========================================================================
   2 · NARRATION — row 3. The player itself is a Themify Audio module.
   ========================================================================== */

html body .altus-ld-narration {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 16px 0 0;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 12px;
	padding: 13px 18px;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-narration__t {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 14px;
	color: var(--altus-ink);
}

html body .altus-ld-narration__s { font-size: 12.5px; color: var(--altus-faint); }


/* ==========================================================================
   3 · BODY GRID AND THE FLIGHT-PATH RAIL — rows 4 and 5
   --------------------------------------------------------------------------
   The rail is the signature element. Same visual idea as the website hero's
   flight-chart line, but functional: one waypoint per section, the track
   filling in the red gradient as the student scrolls.

   The rail's CONTENT is generated at runtime from the body headings by
   child-theme-scripts.js — build-guide gotcha 6, and the reason anchors never
   appear in module content. The markup below is the empty shell the builder
   holds.
   ========================================================================== */

html body .altus-ld-rail { position: sticky; top: 96px; }

html body .altus-ld-rail__label {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: var(--altus-faint);
	margin: 0 0 16px;
}

html body .altus-ld-path { position: relative; padding-left: 26px; }

html body .altus-ld-path::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: var(--altus-border);
	border-radius: 2px;
}

html body .altus-ld-path__fill {
	position: absolute;
	left: 7px;
	top: 8px;
	width: 2px;
	background: var(--altus-gradient);
	border-radius: 2px;
	height: 0;
	transition: height .35s ease;
}

html body .altus-ld-wp {
	position: relative;
	display: block;
	font-size: 13.5px;
	line-height: 1.42;
	color: var(--altus-secondary);
	text-decoration: none;
	padding: 7px 0;
	cursor: pointer;
	transition: color .16s ease;
}

html body .altus-ld-wp::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 12px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--altus-white);
	border: 2px solid var(--altus-border);
	transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

html body .altus-ld-wp:hover { color: var(--altus-red-link); }

html body .altus-ld-wp.is-done::before {
	background: var(--altus-green);
	border-color: var(--altus-green);
}

html body .altus-ld-wp.is-on { color: var(--altus-ink); font-weight: 600; }

html body .altus-ld-wp.is-on::before {
	border-color: var(--altus-red-link);
	background: var(--altus-red-link);
	box-shadow: 0 0 0 4px rgba(211, 43, 56, .14);
}

html body .altus-ld-rail__foot {
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px solid var(--altus-border);
	font-size: 11.5px;
	color: var(--altus-faint);
	line-height: 1.5;
}

/* --- the reading column --------------------------------------------------- */

html body .altus-ld-body {
	max-width: 74ch;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	padding: 14px 44px 44px;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-body h2 {
	font-family: var(--altus-font-head);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.22;
	letter-spacing: -.02em;
	color: var(--altus-ink);
	margin: 44px 0 14px;
	scroll-margin-top: 100px;
}

html body .altus-ld-body h2:first-child { margin-top: 26px; }

html body .altus-ld-body h3 {
	font-family: var(--altus-font-head);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--altus-ink);
	margin: 30px 0 10px;
}

/* Module 5 is the first module with a fourth heading level (three of them,
   under Pre-Flight Preparation). Sized between h3 and body so the nesting reads,
   and deliberately NOT in the rail - the rail is h2 and h3 only. */
html body .altus-ld-body h4 {
	font-family: var(--altus-font-head);
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--altus-red-link);
	margin: 20px 0 6px;
}

html body .altus-ld-body p { margin: 0 0 17px; }

/* --- typography, measured pass 2026-08-04 ---------------------------------
The body was rendering at Inter 300 / 16px - Light - on pages up to 22,700px
tall, and list items came out #666 against the paragraphs' #3D434C, so the same
level of content sat in two different greys. Neither was set by us; both were
inherited from the theme. They are set explicitly here.
The lead paragraph is the adjacent-sibling selector below: the first paragraph
after any H2 gets it, with NO class written into the page, so it survives any
future rebuild of the module body and needs no content edit. */

html body .altus-ld-body p,
html body .altus-ld-body li {
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: var(--altus-body);
}

html body .altus-ld-body li::marker { color: var(--altus-red-edge); }

/* wpautop turns the blank lines between block elements into real <p></p> on
   render - 23 of them across Modules 3, 4 and 5, none present in the source, so
   there is nothing to delete in the builder. They carry the paragraph margin and
   nothing else: invisible vertical slack. Hidden here rather than fought at the
   filter, which also covers any created by a future edit. */
html body .altus-ld-body p:empty { display: none; }

/* Defined terms. Italic is reserved for the moment a term is DEFINED - Andre's
   ruling 2026-08-04 - not for every first use. These pages already carry two
   emphasis systems, the examinable span and its key, and both are traced to
   question-bank items. A third that fired on every mention of a defined term
   would compete with the one that has an honest basis. Six terms across the
   whole subject, each at its definition and nowhere else. */
html body .altus-ld-body em,
html body.ld-in-focus-mode .altus-ld-body em {
	font-style: italic;
	font-weight: 500;
	color: var(--altus-ink);
}

/* Aside - 14.5px secondary. Defined and ready, DELIBERATELY UNUSED on Air Law.
   The rule Andre chose was "administrative detail only", and applying it found
   nothing that survived reading: every candidate turned out to be a duty or a
   rule rather than a look-it-up fact. Forcing four paragraphs into grey to have
   something to show would have been the wrong call. First real use is expected
   on Human Factors. */
html body .altus-ld-body p.altus-ld-aside,
html body.ld-in-focus-mode .altus-ld-body p.altus-ld-aside {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--altus-secondary);
}

/* body.ld-in-focus-mode .learndash-wrapper p sets the body colour at (0,2,3);
   a bare .altus-ld-body h2 + p is (0,1,4) and loses - four elements do not beat
   two classes. Matching the focus-mode class takes this to (0,2,4). */
html body.ld-in-focus-mode .altus-ld-body h2 + p,
html body .altus-ld-body h2 + p {
	font-size: 19px;
	line-height: 1.55;
	color: var(--altus-ink);
}

/* The callout label asked for the heading face and lost to a Themify span rule,
   and inherited the body's 26.4px line-height. Both corrected, with weight to
   spare because the losing rule was not found by reading - it was found by
   measuring the rendered label. */
html body .altus-ld-body .altus-ld-practical__label,
html body .altus-ld-practical__label {
	font-family: var(--altus-font-head) !important;
	line-height: 1.2;
}

html body .altus-ld-body td,
html body .altus-ld-body th { font-weight: 400; }

/* A media query adds no specificity - the html body prefix is repeated. */
@media (max-width: 700px) {
	html body .altus-ld-body p,
	html body .altus-ld-body li { font-size: 16.5px; }
	html body .altus-ld-body h2 + p { font-size: 18px; }
}
html body .altus-ld-body ul,
html body .altus-ld-body ol { margin: 0 0 18px; padding-left: 22px; }
html body .altus-ld-body li { margin-bottom: 7px; }
html body .altus-ld-body strong { color: var(--altus-ink); font-weight: 600; }

/* Pull quote. AL-007: the manuals set short rhetorical lines - "Safety.",
   "Fly safely. Fly responsibly. Fly professionally." - in bold body text, which
   competes with level 2 emphasis. Those lines get an explicit treatment here so
   bold can mean one thing only. */
html body .altus-ld-pull {
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	letter-spacing: -.01em;
	color: var(--altus-ink);
	border-left: 3px solid var(--altus-red-link);
	padding: 2px 0 2px 18px;
	margin: 26px 0 26px;
}

html body .altus-ld-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .88em;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	border-radius: 4px;
	padding: 1px 5px;
}

/* A caption-style aside used for build notes and figure provenance. */
html body .altus-ld-note {
	margin-top: 12px;
	font-size: 13px;
	color: var(--altus-faint);
	font-style: italic;
}


/* ==========================================================================
   4 · EXAMINABLE EMPHASIS — decision 41, three levels
   --------------------------------------------------------------------------
   Level 1  .altus-exam      faint tint, no line — the examinable sentence
   Level 2  .altus-exam-key  semibold ink — the testable value inside it,
                             applied ONLY where a discrete value exists
   Level 3  ordinary prose   everything else, including normalised manual bold

   These two classes are the reason highlighting uses spans and never anchors:
   Themify's inline editor rewrites href and leaves spans alone. Verified
   surviving a builder save on topic 1057.
   ========================================================================== */

html body .altus-exam {
	background: var(--altus-exam-tint);
	padding: 2px 3px;
	border-radius: 3px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

html body .altus-exam-key { font-weight: 700; color: var(--altus-ink); }

/* A tint is a colour-only signal and dies in greyscale. Rather than argue
   against the tint, print converts it to a rule. */
@media print {
	html body .altus-exam {
		background: transparent;
		border-bottom: 1.5px solid #000;
		padding: 0;
		border-radius: 0;
	}
	html body .altus-exam-key { font-weight: 700; }
}


/* ==========================================================================
   5 · DATA TABLE — decision 37. Replaces every image of a table.
   --------------------------------------------------------------------------
   An image of a table is unreadable on a 360px phone and students study on
   phones. Renders intact inside a Text module — no Code module needed.
   ========================================================================== */

html body .altus-ld-table {
	margin: 0 0 26px;
	border: 1px solid var(--altus-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--altus-shadow);
	background: var(--altus-white);
}

html body .altus-ld-table__cap {
	background: var(--altus-cloud);
	border-bottom: 1px solid var(--altus-border);
	padding: 11px 16px;
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--altus-ink);
}

html body .altus-ld-table__scroll { overflow-x: auto; }

html body .altus-ld-table table {
	border-collapse: collapse;
	width: 100%;
	min-width: 100%;
	font-size: 15px;
	margin: 0;
	border: 0;
}

html body .altus-ld-table th {
	background: var(--altus-white);
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--altus-secondary);
	text-align: left;
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--altus-border);
	white-space: nowrap;
}

html body .altus-ld-table td {
	padding: 11px 16px;
	border: 0;
	border-bottom: 1px solid var(--altus-border);
	vertical-align: top;
}

html body .altus-ld-table tr:last-child td { border-bottom: 0; }
html body .altus-ld-table tbody tr:nth-child(even) { background: var(--altus-zebra); }


/* ==========================================================================
   6 · PROCESS FLOW — decision 37
   ========================================================================== */

html body .altus-ld-flow {
	display: grid;
	gap: 0;
	margin: 0 0 28px;
	border: 1px solid var(--altus-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-flow__step {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	padding: 18px 20px;
	background: var(--altus-white);
	border-bottom: 1px solid var(--altus-border);
	position: relative;
}

html body .altus-ld-flow__step:last-child { border-bottom: 0; }

html body .altus-ld-flow__num {
	flex: 0 0 30px;
	height: 30px;
	border-radius: 8px;
	background: var(--altus-gradient);
	color: var(--altus-white);
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 13px;
	display: grid;
	place-items: center;
}

html body .altus-ld-flow__step h4 {
	font-family: var(--altus-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 3px;
}

html body .altus-ld-flow__step p {
	margin: 0;
	font-size: 14.5px;
	color: var(--altus-secondary);
	line-height: 1.5;
}

/* Connector notch. On the step, not on a module wrapper. */
html body .altus-ld-flow__step::after {
	content: "";
	position: absolute;
	left: 35px;
	bottom: -7px;
	width: 12px;
	height: 12px;
	background: var(--altus-white);
	border-right: 1px solid var(--altus-border);
	border-bottom: 1px solid var(--altus-border);
	transform: rotate(45deg);
	z-index: 2;
}

html body .altus-ld-flow__step:last-child::after { display: none; }


/* ==========================================================================
   7 · FIGURES — the image PRESENTS, the component REFERENCES (decision 37)
   ========================================================================== */

html body .altus-ld-body figure {
	margin: 0 0 26px;
	border: 1px solid var(--altus-border);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--altus-shadow);
	background: var(--altus-white);
}

html body .altus-ld-body figure img {
	display: block;
	width: 100%;
	height: auto;
	background: var(--altus-cloud);
}

html body .altus-ld-body figcaption {
	padding: 12px 16px;
	border-top: 1px solid var(--altus-border);
	font-size: 13.5px;
	color: var(--altus-secondary);
	line-height: 1.5;
}


/* ==========================================================================
   8 · H5P CHECKPOINT — row 6. Practice, never marked.
   ========================================================================== */

html body .altus-ld-h5p {
	margin: 34px 0;
	border: 1px solid var(--altus-practice-line);
	background: linear-gradient(180deg, var(--altus-practice-bg), var(--altus-white));
	border-radius: 14px;
	padding: 24px 26px;
}

html body .altus-ld-h5p__hd {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

html body .altus-ld-h5p__badge {
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--altus-practice);
	color: var(--altus-white);
	border-radius: 5px;
	padding: 4px 9px;
}

/* Ungated status is stated, not implied. */
html body .altus-ld-h5p__ungated {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	color: var(--altus-practice);
}

html body .altus-ld-h5p h3 {
	font-family: var(--altus-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 6px;
}

html body .altus-ld-h5p p {
	font-size: 14.5px;
	color: var(--altus-secondary);
	margin: 0 0 16px;
}

/* Placeholder for an interaction not yet authored. Kept for the modules whose
   interactions are still to come — a fake Start-practice button would read as a
   broken control rather than as work outstanding. */
html body .altus-ld-h5p__slot {
	border: 1px dashed var(--altus-practice-line);
	border-radius: 10px;
	padding: 22px;
	text-align: center;
	background: var(--altus-white);
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 13px;
	color: var(--altus-practice);
}

/* The H5P embed itself. H5P renders inside its own iframe, so what it looks
   like INSIDE is H5P's business and cannot be reached from this stylesheet —
   the same line the design system draws around LearnDash. What is ours is the
   frame it sits in, and making sure the plugin's own card treatment does not
   double up with the checkpoint card's. Brand styling inside the iframe would
   need the h5p_alter_library_styles filter; worth doing once the interaction
   set is settled, not before. */
html body .altus-ld-h5p .h5p-content {
	border: 0;
	background: transparent;
	font-family: var(--altus-font-body);
	margin: 0;
	max-width: none;
}

html body .altus-ld-h5p .h5p-iframe-wrapper {
	background: transparent;
	border-radius: 10px;
	overflow: hidden;
}

/* H5P's action bar carries Reuse / Embed / Copyright links that are authoring
   affordances, not student ones. The plugin's Display Options can hide them
   globally; this makes sure they never crowd the card if they are left on. */
html body .altus-ld-h5p .h5p-actions {
	border: 0;
	background: transparent;
	font-size: 12px;
}

/* The H5P plugin's own frame sits inside the card and should not double the
   border and padding it already has. */
html body .altus-ld-h5p .h5p-iframe-wrapper,
html body .altus-ld-h5p .h5p-content {
	border: 0;
	background: transparent;
}


/* ==========================================================================
   9 · MODULE CLOSE — rows 7 to 10 (decision 36: self-check, takeaway, quiz;
   there is NO exam-focus box — the highlight spans carry that job inline)
   ========================================================================== */

html body .altus-ld-close { display: grid; gap: 20px; margin-top: 52px; }

html body .altus-ld-card {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	padding: 30px 34px;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-card > h3 {
	font-family: var(--altus-font-head);
	font-size: 20px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 6px;
}

html body .altus-ld-card__lead {
	font-size: 15px;
	color: var(--altus-secondary);
	margin: 0 0 20px;
}

/* --- outcome self-check --------------------------------------------------- */

html body .altus-ld-selfcheck {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 11px;
}

html body .altus-ld-selfcheck li {
	display: flex;
	gap: 13px;
	align-items: flex-start;
	padding: 14px 16px;
	border: 1px solid var(--altus-border);
	border-radius: 10px;
	background: var(--altus-cloud);
	font-size: 15.5px;
	line-height: 1.5;
	margin: 0;
}

html body .altus-ld-selfcheck__box {
	flex: 0 0 20px;
	height: 20px;
	border-radius: 5px;
	border: 2px solid var(--altus-border);
	background: var(--altus-white);
	margin-top: 2px;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
	display: grid;
	place-items: center;
	font-size: 12px;
	color: var(--altus-white);
}

html body .altus-ld-selfcheck li.is-ok .altus-ld-selfcheck__box {
	background: var(--altus-green);
	border-color: var(--altus-green);
}

/* Revisit control. NOT an anchor — the inline editor rewrites href to
   data-tb-inline-nav and never restores it, so a baked link would work until
   Andre first edits this module and then die silently. The script turns this
   span into a scroll action at runtime. */
html body .altus-ld-selfcheck__revisit {
	font-size: 13px;
	display: block;
	margin-top: 4px;
	color: var(--altus-secondary);
	text-decoration: none;
	border-bottom: 1px solid var(--altus-border);
	cursor: pointer;
	width: fit-content;
}

html body .altus-ld-selfcheck__revisit:hover {
	color: var(--altus-red-link);
	border-color: var(--altus-red-link);
}

/* --- key takeaway, where the manual has one ------------------------------- */

html body .altus-ld-takeaway {
	border-left: 4px solid var(--altus-red-link);
	background: var(--altus-cloud);
	border-radius: 0 12px 12px 0;
	padding: 22px 26px;
	margin-top: 24px;
}

html body .altus-ld-takeaway h4 {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--altus-red-link);
	margin: 0 0 10px;
}

html body .altus-ld-takeaway p { margin: 0 0 12px; font-size: 15.5px; }
html body .altus-ld-takeaway p:last-child { margin: 0; }

/* --- "In practice" callout -------------------------------------------------
Replaces the inline "Practical Meaning" headings (Andre's ruling 2026-08-04).
There were 22 of them across the subject - eleven on Module 4 alone - and the
rail is built from the headings, so a module's own contents list read
"Practical Meaning, Practical Meaning, Practical Meaning". As a callout the
teaching intent survives, the contents list gets its meaning back, and the page
gains a second texture.
Deliberately LIGHTER than .altus-ld-takeaway: that one appears once per module
and can afford a fill, this one appears up to eleven times on a page and would
bully the prose if it had the same weight. Rule and label only. */

html body .altus-ld-practical {
	border-left: 3px solid var(--altus-red-edge);
	padding: 2px 0 2px 20px;
	margin: 24px 0;
}

html body .altus-ld-practical__label {
	display: block;
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--altus-red-link);
	margin: 0 0 8px;
}

html body .altus-ld-practical > *:last-child { margin-bottom: 0; }

/* Media queries add no specificity - the html body prefix has to be repeated. */
@media (max-width: 700px) {
	html body .altus-ld-practical { padding-left: 14px; margin: 20px 0; }
}

/* --- module check quiz card ----------------------------------------------- */

/* The card is the ROW, not a div inside a module, because the CTA has to sit
   beside the text and Themify columns are display:grid — module wrappers
   blockify, so two modules can never sit side by side inside one column
   (build-guide rule 1). Two columns at 3_1 with the card styling on the row's
   inner element is the edit-safe way to get a text-plus-button card, and it
   keeps the link on Buttons module settings where the inline editor cannot
   rewrite it. */
html body .altus-ld-quizcard .row_inner,
html body .altus-ld-next .row_inner {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	padding: 24px 30px;
	box-shadow: var(--altus-shadow);
	align-items: center;
}

html body .altus-ld-next .row_inner {
	border-style: dashed;
	box-shadow: none;
}

html body .altus-ld-quizcard .module,
html body .altus-ld-next .module { margin-bottom: 0; }

html body .altus-ld-quizcard__body {
	display: flex;
	gap: 22px;
	align-items: center;
	flex-wrap: wrap;
}

html body .altus-ld-quizcard__icon {
	flex: 0 0 52px;
	height: 52px;
	border-radius: 13px;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	display: grid;
	place-items: center;
	font-family: var(--altus-font-head);
	font-weight: 800;
	color: var(--altus-red-link);
	font-size: 19px;
}

html body .altus-ld-quizcard__text { flex: 1 1 260px; }

html body .altus-ld-quizcard h3 {
	font-family: var(--altus-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 4px;
}

html body .altus-ld-quizcard p { margin: 0; font-size: 14.5px; color: var(--altus-secondary); }

/* --- what's next ---------------------------------------------------------- */

/* Row spacing. The builder holds one row per anatomy block, so the rhythm of
   the page is set here rather than in per-row padding settings Andre might
   change by accident. */
html body .altus-ld-row--body .row_inner { margin-top: 44px; column-gap: 52px; }
html body .altus-ld-row--close .row_inner { margin-top: 52px; }
html body .altus-ld-row--quiz .row_inner { margin-top: 20px; }
html body .altus-ld-row--next .row_inner { margin-top: 20px; }

/* Focus Mode ships the content twice — see the note in child-theme-scripts.js.
   The script removes the copies; this rule hides them at paint time so a
   deferred script does not leave a flash of doubled content. Keyed on the
   duplicated id rather than on position, so a page that legitimately held two
   different builder blocks would be untouched. */
html body.ld-in-focus-mode .ld-tab-bar__panel > div[id^="themify_builder_content-"] ~ div[id^="themify_builder_content-"] {
	display: none !important;
}

/* Rail column. The rail sticks INSIDE its column, so the column has to run the
   full height of the row — align-self:start collapses it to the rail's own
   height and the rail then has no travel and scrolls away after one screen.
   Measured on topic 1057: column 623px against a 9,000px row. */
html body .altus-ld-railcol { align-self: stretch; }

/* The rail sticks via its MODULE wrapper, not via the rail div.
   Sticky is constrained by the nearest block container, and inside a Text
   module that is .tb_text_wrap — measured at 560px on topic 1057, so the rail
   unstuck after half a screen even though the column ran 7,799px. The module is
   a direct child of the grid column, so making the MODULE the sticky element
   gives the rail the whole column to travel in. align-self:start keeps the
   module from stretching, which is what leaves it room to move. */
html body .altus-ld-railcol > .module {
	position: sticky;
	top: 96px;
	align-self: start;
}

html body .altus-ld-railcol .altus-ld-rail { position: static; top: auto; }

/* LearnDash prints the post title as an H1 at the top of the focus canvas. On a
   module page our header card carries the title, so the two would read as a
   stutter. Hidden only where our card is actually present, which leaves the 51
   legacy topics that have no card with their title intact. */
html body.ld-in-focus-mode .ld-focus-content:has(.altus-ld-mhead) > h1 { display: none; }

html body .altus-ld-next__label {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--altus-faint);
}

html body .altus-ld-next__title {
	font-family: var(--altus-font-head);
	font-weight: 700;
	color: var(--altus-ink);
	font-size: 16px;
}


/* ==========================================================================
   10 · BUTTONS
   --------------------------------------------------------------------------
   Links live on Themify Buttons-module settings, never on an anchor inside
   Text content (build-guide rule 4). These rules therefore style the markup
   the Buttons module emits as well as the bare class.
   ========================================================================== */

html body .altus-ld-btn .module-buttons-item a,
html body a.altus-ld-btn,
html body button.altus-ld-btn {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 15px;
	padding: 13px 24px;
	border-radius: 9px;
	background: var(--altus-gradient);
	color: var(--altus-white);
	border: 0;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: filter .16s ease, transform .16s ease;
}

html body .altus-ld-btn .module-buttons-item a:hover,
html body a.altus-ld-btn:hover,
html body button.altus-ld-btn:hover { filter: brightness(1.06); }

/* Themify paints button text with `.module.module-buttons .ui { color:
   var(--tb_pr_color) }` — three classes, which outranks a selector carrying two
   classes and three elements however long it looks. Measured result: the label
   rendered #333 on the brand gradient. Two fixes, deliberately belt and braces:
   the variable is set at source, which is the mechanism Themify itself uses and
   therefore survives a builder styling tweak, and the class is matched on the
   anchor so specificity is 0,3,3 against Themify's 0,3,0. */
html body .altus-ld-btn,
html body .altus-ld-btn .module-buttons-item {
	--tb_pr_color: var(--altus-white);
}

html body .altus-ld-btn .module-buttons-item a.ui,
html body .altus-ld-btn .module-buttons-item a.ui:hover,
html body .altus-ld-btn .module-buttons-item a.ui:focus,
html body .altus-ld-btn .module-buttons-item a.ui:visited {
	color: var(--altus-white);
	text-align: center;
	justify-content: center;
}

html body .altus-ld-btn--ghost,
html body .altus-ld-btn--ghost .module-buttons-item {
	--tb_pr_color: var(--altus-ink);
}

html body .altus-ld-btn--ghost .module-buttons-item a.ui,
html body .altus-ld-btn--ghost .module-buttons-item a.ui:hover,
html body .altus-ld-btn--ghost .module-buttons-item a.ui:visited {
	color: var(--altus-ink);
}

html body .altus-ld-btn--ghost .module-buttons-item a,
html body a.altus-ld-btn--ghost,
html body button.altus-ld-btn--ghost {
	background: var(--altus-white);
	color: var(--altus-ink);
	border: 1px solid var(--altus-border);
}

/* Mark Complete is LearnDash's own button. It is styled, not rebuilt. */
html body .altus-ld-markdone { display: flex; justify-content: center; margin-top: 26px; }


/* ==========================================================================
   11 · SUBJECT PAGE (Lesson) — anatomy 2
   ========================================================================== */

html body .altus-ld-phead h1 {
	font-family: var(--altus-font-head);
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.02em;
	color: var(--altus-ink);
	margin: 0 0 14px;
}

html body .altus-ld-phead__lede {
	font-size: 18px;
	color: var(--altus-body);
	max-width: 66ch;
}

html body .altus-ld-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px;
	margin: 28px 0 0;
}

html body .altus-ld-stat {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 13px;
	padding: 18px 20px;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-stat__v {
	font-family: var(--altus-font-head);
	font-weight: 800;
	font-size: 26px;
	color: var(--altus-ink);
	letter-spacing: -.02em;
}

html body .altus-ld-stat__k {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--altus-red-link);
	margin-top: 6px;
}

html body .altus-ld-modlist { display: grid; gap: 12px; margin-top: 12px; }

html body .altus-ld-modrow {
	display: flex;
	gap: 18px;
	align-items: center;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 13px;
	padding: 17px 22px;
	box-shadow: var(--altus-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
}

html body .altus-ld-modrow:hover {
	transform: translateY(-2px);
	box-shadow: var(--altus-shadow-lift);
}

html body .altus-ld-modrow__idx {
	flex: 0 0 38px;
	height: 38px;
	border-radius: 10px;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	display: grid;
	place-items: center;
	font-family: var(--altus-font-head);
	font-weight: 700;
	color: var(--altus-secondary);
	font-size: 15px;
}

html body .altus-ld-modrow.is-done .altus-ld-modrow__idx {
	background: var(--altus-green);
	border-color: var(--altus-green);
	color: var(--altus-white);
}

html body .altus-ld-modrow.is-now .altus-ld-modrow__idx {
	background: var(--altus-gradient);
	border-color: transparent;
	color: var(--altus-white);
}

html body .altus-ld-modrow__t { flex: 1 1 240px; }

html body .altus-ld-modrow h4 {
	font-family: var(--altus-font-head);
	font-size: 16px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 2px;
}

html body .altus-ld-modrow__meta { font-size: 13px; color: var(--altus-faint); }

html body .altus-ld-pill {
	font-family: var(--altus-font-head);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: 99px;
}

html body .altus-ld-pill--done {
	background: var(--altus-green-bg);
	color: var(--altus-green-ink);
	border: 1px solid var(--altus-green-line);
}

html body .altus-ld-pill--now {
	background: var(--altus-red-bg);
	color: var(--altus-red-link);
	border: 1px solid var(--altus-red-line);
}

html body .altus-ld-pill--lock {
	background: var(--altus-cloud);
	color: var(--altus-faint);
	border: 1px solid var(--altus-border);
}

/* --- mock exam and the readiness gauge — decision 26 ----------------------- */

html body .altus-ld-mock {
	margin-top: 22px;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: var(--altus-shadow);
}

html body .altus-ld-mock__hd { padding: 26px 30px; border-bottom: 1px solid var(--altus-border); }

html body .altus-ld-mock__hd h3 {
	font-family: var(--altus-font-head);
	font-size: 21px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 6px;
}

html body .altus-ld-mock__hd p { margin: 0; font-size: 15px; color: var(--altus-secondary); }

html body .altus-ld-gauge { padding: 26px 30px; display: grid; gap: 16px; }

html body .altus-ld-gauge__line {
	position: relative;
	height: 12px;
	border-radius: 99px;
	background: var(--altus-cloud);
	border: 1px solid var(--altus-border);
	overflow: visible;
	margin-top: 22px;
}

html body .altus-ld-gauge__fill {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	border-radius: 99px;
	background: var(--altus-gradient);
}

/* 75% is the gate. 85% is the honest number — a bare gate pass predicts a
   fail on the final, and the student is told so rather than left to find out. */
html body .altus-ld-gauge__mark {
	position: absolute;
	top: -9px;
	bottom: -9px;
	width: 2px;
	background: var(--altus-ink);
}

html body .altus-ld-gauge__mark span {
	position: absolute;
	top: -22px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--altus-ink);
	white-space: nowrap;
}

html body .altus-ld-gauge__mark--ready { background: var(--altus-green); }
html body .altus-ld-gauge__mark--ready span { color: var(--altus-green); }

html body .altus-ld-gauge__labels {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: var(--altus-faint);
}

html body .altus-ld-readiness {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 18px 22px;
	border-radius: 12px;
	background: var(--altus-green-bg);
	border: 1px solid var(--altus-green-line);
}

html body .altus-ld-readiness--notyet {
	background: var(--altus-warn-bg);
	border-color: var(--altus-warn-line);
}

html body .altus-ld-readiness__t {
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 15px;
	color: var(--altus-green-ink);
	margin-bottom: 3px;
}

html body .altus-ld-readiness--notyet .altus-ld-readiness__t { color: var(--altus-warn-ink); }
html body .altus-ld-readiness p { margin: 0; font-size: 14.5px; color: var(--altus-body); }


/* ==========================================================================
   12 · COURSE HOME — anatomy 3
   ========================================================================== */

html body .altus-ld-subjgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 16px;
	margin-top: 14px;
}

html body .altus-ld-subj {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 14px;
	padding: 22px 24px;
	box-shadow: var(--altus-shadow);
	transition: transform .18s ease, box-shadow .18s ease;
	position: relative;
	overflow: hidden;
}

html body .altus-ld-subj:hover {
	transform: translateY(-3px);
	box-shadow: var(--altus-shadow-lift);
}

html body .altus-ld-subj::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 4px;
	background: var(--altus-border);
}

html body .altus-ld-subj.is-done::before { background: var(--altus-green); }
html body .altus-ld-subj.is-now::before { background: var(--altus-gradient); }

html body .altus-ld-subj h4 {
	font-family: var(--altus-font-head);
	font-size: 17px;
	font-weight: 700;
	color: var(--altus-ink);
	margin: 0 0 5px;
}

html body .altus-ld-subj__meta { font-size: 12.5px; color: var(--altus-faint); margin-bottom: 14px; }

html body .altus-ld-progress {
	height: 6px;
	border-radius: 99px;
	background: var(--altus-cloud);
	overflow: hidden;
	border: 1px solid var(--altus-border);
}

html body .altus-ld-progress i { display: block; height: 100%; background: var(--altus-gradient); }

html body .altus-ld-subj__pct {
	font-family: var(--altus-font-head);
	font-weight: 700;
	font-size: 12px;
	color: var(--altus-ink);
	margin-top: 8px;
}

/* The one dark band brand-system.md allows, spent on the terminal assessment
   so the final feels different from everything above it. */
html body .altus-ld-final {
	margin-top: 22px;
	background: var(--altus-carbon);
	color: var(--altus-white);
	border-radius: 16px;
	padding: 34px 36px;
	position: relative;
	overflow: hidden;
}

html body .altus-ld-final::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(244, 55, 69, .28), transparent 70%);
}

html body .altus-ld-final h3 {
	font-family: var(--altus-font-head);
	color: var(--altus-white);
	font-size: 23px;
	font-weight: 700;
	margin: 0 0 8px;
}

html body .altus-ld-final p { color: #B9C0CA; font-size: 15.5px; max-width: 60ch; margin: 0 0 20px; }
html body .altus-ld-final__lock { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #8C95A1; }

html body .altus-ld-sechd { margin-top: 44px; margin-bottom: 6px; }

html body .altus-ld-sechd h2 {
	font-family: var(--altus-font-head);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--altus-ink);
	margin: 0;
}

html body .altus-ld-sechd p { font-size: 15px; color: var(--altus-secondary); margin: 6px 0 0; }


/* ==========================================================================
   13 · RESPONSIVE
   --------------------------------------------------------------------------
   The rail collapses to a static card under 920px. LearnDash drops its own
   sidebar under 1180px, which is why 920 rather than 1024 is the breakpoint
   that matters here.
   ========================================================================== */

@media (max-width: 920px) {
	/* Stack the two-column rows. The rail going static is not enough on its own:
	   the row keeps its 1:3 grid, so at 360px the reading column measured 176px.
	   Themify writes the track list into its own generated stylesheet, which
	   loads after the child theme, so this is the one place !important is the
	   honest tool - the same call already made for the legacy single-column
	   rows in style.css. */
	html body .altus-ld-row--body .row_inner,
	html body .altus-ld-row--quiz .row_inner,
	html body .altus-ld-row--next .row_inner {
		grid-template-columns: 1fr !important;
		column-gap: 0 !important;
		row-gap: 18px;
	}

	/* Collapsing the track list is not enough on its own: Themify places each
	   column at an explicit grid position, so the second column creates an
	   implicit track and the row stays side by side. Measured at 360px, the
	   reading column came out 115px wide. Forcing every child across the single
	   track is what actually stacks them. */
	html body .altus-ld-row--body .row_inner > *,
	html body .altus-ld-row--quiz .row_inner > *,
	html body .altus-ld-row--next .row_inner > * {
		grid-column: 1 / -1 !important;
	}

	html body .altus-ld-railcol > .module { position: static; top: auto; }
	html body .altus-ld-rail {
		position: static;
		margin-bottom: 28px;
		background: var(--altus-white);
		border: 1px solid var(--altus-border);
		border-radius: 12px;
		padding: 18px 20px;
	}
	html body .altus-ld-body { padding: 14px 22px 30px; }
	html body .altus-ld-mhead__pad,
	html body .altus-ld-forwhat { padding-left: 24px; padding-right: 24px; }
	html body .altus-ld-card { padding: 24px 22px; }
	html body .altus-ld-mock__hd,
	html body .altus-ld-gauge { padding-left: 20px; padding-right: 20px; }
	html body .altus-ld-final { padding: 26px 22px; }
}

@media (max-width: 560px) {
	html body .altus-ld-mhead h1 { max-width: none; }
	html body .altus-ld-quizcard { gap: 14px; }
	html body .altus-ld-btn .module-buttons-item a,
	html body a.altus-ld-btn,
	html body button.altus-ld-btn { width: 100%; }
}

/* Builder edit mode: nothing generated at runtime may hide content while
   Andre is editing — build-guide gotcha 6. */
html body.themify_builder_active .altus-ld-rail { position: static; }
html body.themify_builder_active .altus-ld-wp { color: var(--altus-ink); }


/* ==========================================================================
   14 · STUDENT DASHBOARD
   --------------------------------------------------------------------------
   Lifted 2026-07-28 out of the two inline <style> blocks that the shortcode
   library printed inside its own output on every render. The PHP now lives at
   inc/altus-ld-shortcodes.php and prints no CSS at all. Rules are unchanged
   from the originals, !important included: they are fighting LearnDash's own
   wrapper styling inside the welcome card, which is the same battle the rest
   of this stylesheet won by specificity — but re-fighting it here would be a
   visual change to a page nobody has reviewed, and this move is a relocation,
   not a redesign. Re-tokenise when the dashboard itself is designed.
   ========================================================================== */

/* Neutralise the LearnDash wrapper margin bleeding into the welcome card */
.altus-dashboard-card--welcome .altus-resume-pill-wrap .learndash-wrapper,
.altus-dashboard-card--welcome .altus-resume-pill-wrap #ld-course-wrap {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* Desktop button and text alignment */
.altus-card-head--hero {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	gap: 20px !important;
}

.altus-card-actions {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
}

/* Identical button sizing */
.altus-dashboard-card--welcome .ld-course-resume,
.altus-dashboard-card--welcome .altus-secondary-pill {
	margin: 0 !important;
	height: 48px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

@media (max-width: 768px) {
	.altus-card-head--hero {
		flex-direction: column !important;
		align-items: stretch !important;
		text-align: left !important;
	}
	.altus-card-head--hero h2.altus-dynamic-greeting {
		margin-top: 14px !important;
	}
	.altus-card-actions {
		flex-direction: column !important;
		width: 100% !important;
		margin-top: 16px !important;
		gap: 12px !important;
	}
	.altus-card-actions > *,
	.altus-dashboard-card--welcome .altus-resume-pill-wrap,
	.altus-dashboard-card--welcome .altus-resume-pill-wrap .learndash-wrapper,
	.altus-dashboard-card--welcome .ld-course-resume,
	.altus-dashboard-card--welcome .altus-secondary-pill {
		width: 100% !important;
		margin: 0 !important;
	}
}

/* Ultimate Member profile edit mode, wrapped to match the premium hero */
.altus-um-edit-mode {
	margin-bottom: 24px;
	background: rgba(255, 255, 255, 0.98);
	border-radius: 28px;
	border: 1px solid rgba(15, 23, 42, 0.06);
	box-shadow: 0 26px 60px rgba(15, 23, 42, 0.08);
	overflow: hidden;
}

.altus-um-edit-mode .um-profile {
	box-shadow: none !important;
	margin-bottom: 0 !important;
	border: none !important;
	border-radius: 0 !important;
}


/* ==========================================================================
   14 · COURSE HOME (anatomy 3) — additions 2026-07-29
   ========================================================================== */

/* The variant in the course title sits in muted weight beside the brand-ink h1. */
html body .altus-ld-phead__variant { color: var(--altus-secondary); font-weight: 600; }

/* Progress fills default to empty; state is written at runtime, never baked. */
html body .altus-ld-progress i { width: 0; }

/* The theme prints the post title above the canvas; where the built course/subject header
   is present it carries the H1, so the theme's is hidden — same treatment as the module
   page's :has(.altus-ld-mhead) rule. */
html body:has(.altus-ld-phead) h1.post-title.entry-title { display: none; }

/* Subject numbering on the course home cards — Andre, 2026-07-29. */
html body .altus-ld-subj__head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
html body .altus-ld-subj__head h4 { margin: 0; }
html body .altus-ld-subj__num { flex: 0 0 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-family: var(--altus-font-head); font-weight: 700; font-size: 13px; background: var(--altus-cloud); border: 1px solid var(--altus-border); color: var(--altus-ink); }
html body .altus-ld-subj.is-now .altus-ld-subj__num { background: var(--altus-gradient); border-color: transparent; color: #fff; }

/* The sitewide LearnDash heading rule (frame layer) outranks the final card's white
   heading at (0,2,2) vs (0,1,3). Matched at higher specificity, no !important. */
html body .learndash-wrapper .altus-ld-final h3 { color: #fff; }

/* Course-home mobile pass — Andre's S23 review, 2026-07-29.
   Measured at 412px: side inset stacked to 68px (20 theme container + 20 #content +
   16 LearnDash wrapper + 12 text wrap) and ~170px of dead space above the content
   (body reserves 100px for a 59px header; the LD wrapper adds 40+24). */

/* The grid track could not shrink below 300px, so single-column phones pushed the
   cards past the right edge of their container. min() lets the track compress. */
html body .altus-ld-subjgrid { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }

@media (max-width: 680px) {
	html body:has(.altus-ld-phead) { padding-top: 72px; }
	html body:has(.altus-ld-phead) #layout { width: 100%; }
	html body:has(.altus-ld-phead) #content { padding-left: 8px; padding-right: 8px; padding-top: 12px; }
	html body:has(.altus-ld-phead) .learndash-wrapper { margin-top: 6px; padding: 10px 8px 0; }
	html body .altus-ld-row--chead .tb_text_wrap,
	html body .altus-ld-row--subjects .tb_text_wrap,
	html body .altus-ld-row--cfinal .tb_text_wrap { padding-left: 0; padding-right: 0; }
}

/* Course-home mobile pass, second round — measured winners 2026-07-29:
   theme rules for body padding-top, #layout max-width 90%, #content padding and the
   Themify text-wrap padding all outrank the first-round selectors. #pagewrap id
   prefix per build-guide gotcha 7; the body offset is the one place !important is
   used, because body has no ancestor to borrow specificity from. */
@media (max-width: 680px) {
	html body:has(.altus-ld-phead) { padding-top: 72px !important; }
	html body:has(.altus-ld-phead) #pagewrap #layout { max-width: 100%; width: 100%; }
	html body:has(.altus-ld-phead) #pagewrap #content { padding: 12px 8px 0; }
	html body:has(.altus-ld-phead) #pagewrap .learndash-wrapper { padding-left: 8px; padding-right: 8px; }
	html body #pagewrap .altus-ld-row--chead .tb_text_wrap,
	html body #pagewrap .altus-ld-row--subjects .tb_text_wrap,
	html body #pagewrap .altus-ld-row--cfinal .tb_text_wrap { padding-left: 0; padding-right: 0; }
}

/* Course-home mobile pass, third round — the inline Customizer-era style block sets
   .single-sfwd-courses #content and the wrapper/text-wrap paddings with !important,
   so matching priority is the only lever left. Scoped to the same media query. */
@media (max-width: 680px) {
	html body:has(.altus-ld-phead) #pagewrap #content { padding: 12px 8px 0 !important; }
	html body:has(.altus-ld-phead) #pagewrap .learndash-wrapper { padding-left: 8px !important; padding-right: 8px !important; }
	html body #pagewrap .altus-ld-row--chead .tb_text_wrap,
	html body #pagewrap .altus-ld-row--subjects .tb_text_wrap,
	html body #pagewrap .altus-ld-row--cfinal .tb_text_wrap { padding-left: 0 !important; padding-right: 0 !important; }
}


/* ==========================================================================
   15 - SUBJECT PAGE (anatomy 2) - additions 2026-07-30
   ========================================================================== */

/* Focus Mode prints its own H1 above the canvas. Where the built subject header is
   present it carries the H1, so LearnDash's is hidden. Same rule shape as the module
   page's :has(.altus-ld-mhead) at line 941 - the course-home phead rule could not be
   reused because a course page does not render in Focus Mode and its title is
   h1.post-title.entry-title instead. */
html body.ld-in-focus-mode .ld-focus-content:has(.altus-ld-phead) > h1 { display: none; }

/* The 14 mobile pass enumerated the three course-home row classes BY NAME, so every
   new page anatomy silently lost the text-wrap reset. Matched on the row-class prefix
   instead, scoped to pages carrying a built page header, so it cannot go stale again.
   Priority matches the inline Customizer-era block - see 14, third round. */
@media (max-width: 680px) {
	html body:has(.altus-ld-phead) #pagewrap [class*="altus-ld-row--"] .tb_text_wrap {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* The module row is index + title + status pill on one flex line. Below 680 the
	   pill drops to its own line, indented past the index so it aligns with the title,
	   rather than squeezing the title to two words per line. */
	html body .altus-ld-modrow { flex-wrap: wrap; gap: 12px 14px; padding: 15px 18px; }
	html body .altus-ld-modrow__t { flex: 1 1 140px; }
	html body .altus-ld-modrow .altus-ld-pill { margin-left: 52px; }

	/* Gauge marker labels are absolutely positioned above the track and collide at
	   narrow widths. */
	html body .altus-ld-gauge { padding-left: 18px; padding-right: 18px; }
	html body .altus-ld-gauge__mark span { font-size: 9px; letter-spacing: .04em; }

	/* MEASURED: the two marker labels are each ~55px wide and sit 10 percentage points
	   apart, so they overlap on any track narrower than about 570px - i.e. every phone.
	   Shrinking the type does not close a 20px deficit. Stacking them does: the gate
	   label stays above the track and the ready label moves below it, both still centred
	   on their own mark, so neither can collide and neither runs past the track ends. */
	html body .altus-ld-gauge__line { margin-bottom: 20px; }
	html body .altus-ld-gauge__mark--ready span { top: auto; bottom: -21px; }
}


/* ==========================================================================
   16 - ANDRE REVIEW ROUND, 2026-07-31
   Card links, the LearnDash accordion, the body measure, H5P and mobile.
   ========================================================================== */

/* --- 16.1 the runtime card link ------------------------------------------ */
/* An inset anchor rather than a click handler: real link semantics, real
   hover, middle-click and keyboard all work, and no layout shifts. */
html body .altus-ld-cardlink {
	position: absolute; inset: 0; z-index: 3;
	border-radius: inherit;
	font-size: 0; color: transparent; text-decoration: none;
}
html body .altus-ld-cardlink:focus-visible {
	outline: 2px solid var(--altus-red-link); outline-offset: 3px;
}
html body .altus-ld-modrow { position: relative; }
html body .altus-ld-subj.is-linked,
html body .altus-ld-modrow.is-linked { cursor: pointer; }
html body .altus-ld-modrow.is-linked:hover .altus-ld-pill--now { filter: brightness(1.06); }

/* --- 16.2 the module body measure ---------------------------------------- */
/* Andre, 2026-07-31: the body card should finish level with the header card
   above it. The 74ch reading measure was stopping ~39px short of the column. */
html body .altus-ld-body { max-width: none; }

/* --- 16.3 the Buttons module --------------------------------------------- */
/* Themify prints a stray <br> as the first child of the button anchor, which
   creates a line box ahead of the label and throws the centring out. */
html body .altus-ld-btn a.builder_button br { display: none; }
html body .altus-ld-btn a.builder_button {
	justify-content: center; align-items: center; text-align: center;
}
html body .altus-ld-btn .module-buttons-item { justify-content: flex-end; }

/* --- 16.4 the LearnDash accordion ---------------------------------------- */
/* MEASURED root cause of the squeeze Andre reported: .ld-accordion__items is a
   TWO-COLUMN grid (430px 430px inside 875px), and nesting compounds it - a
   lesson gets half the width, its topics half of that, a topic quiz half again,
   which is why "Module 1 Check" wrapped onto three lines. A course tree is a
   list, not a card grid. One column at every level. */
html body .learndash-wrapper [class*="ld-accordion__items"] {
	grid-template-columns: 1fr !important;
}
html body .learndash-wrapper [class*="ld-accordion__item--"] {
	grid-template-columns: 1fr auto !important;
}

/* Padding stacked at every nesting level too. One inset, once. */
html body .learndash-wrapper [class*="ld-accordion__section"] { padding: 10px 14px 18px; }
html body .learndash-wrapper [class*="ld-accordion__section"] [class*="ld-accordion__section"] { padding: 8px 0 8px 14px; }

/* Brand. LearnDash ships slate-blue chrome; this is the "style what LearnDash
   renders" half of the design system - colour and type, nothing structural. */
html body .learndash-wrapper .ld-accordion {
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;
	padding: 20px 22px;
	box-shadow: var(--altus-shadow);
}
html body .learndash-wrapper .ld-accordion__heading {
	font-family: var(--altus-font-head);
	font-weight: 700; color: var(--altus-ink);
}
html body .learndash-wrapper .ld-accordion__expand-button,
html body .learndash-wrapper .ld-accordion__expand-button-text {
	font-family: var(--altus-font-head); font-weight: 600;
	color: var(--altus-secondary);
}
html body .learndash-wrapper .ld-accordion__expand-button:hover,
html body .learndash-wrapper .ld-accordion__expand-button:hover .ld-accordion__expand-button-text {
	color: var(--altus-red-link);
}
html body .learndash-wrapper .ld-accordion__expand-button-icon path { fill: currentColor; }
html body .learndash-wrapper [class*="ld-accordion__item--"] {
	border: 1px solid var(--altus-border);
	border-radius: 12px;
	background: var(--altus-white);
}
html body .learndash-wrapper [class*="ld-accordion__item--"]:hover { border-color: var(--altus-red-line); }
html body .learndash-wrapper [class*="ld-accordion__item-title"] {
	font-family: var(--altus-font-head); font-weight: 600;
	color: var(--altus-ink);
}
html body .learndash-wrapper [class*="ld-accordion__item-title"]:hover { color: var(--altus-red-link); }

/* --- 16.5 H5P checkpoint card -------------------------------------------- */
html body .altus-ld-h5p .h5p-iframe-wrapper,
html body .altus-ld-h5p iframe.h5p-iframe { max-width: 100%; }

@media (max-width: 680px) {
	/* Module page rows sat 44-52px apart, which is a lot of dead scroll on a
	   phone. Andre, 2026-07-31: tighter. */
	html body .altus-ld-row--body .row_inner { margin-top: 18px; }
	html body .altus-ld-row--close .row_inner { margin-top: 20px; }
	html body .altus-ld-row--quiz .row_inner,
	html body .altus-ld-row--next .row_inner { margin-top: 12px; }

	/* The quiz card is icon + text + button. Stacked, the button gets its own
	   full-width line instead of overlapping the copy. */
	html body .altus-ld-quizcard .row_inner > * { margin-bottom: 0; }
	html body .altus-ld-btn .module-buttons-item { justify-content: stretch; }
	html body .altus-ld-btn a.builder_button { width: 100%; }

	/* H5P was inheriting the desktop 24/26 inset on a ~330px card. */
	html body .altus-ld-h5p { padding: 16px 12px; }
	html body .altus-ld-h5p .altus-ld-h5p__badge { margin-bottom: 8px; }
}

/* --- 16.6 out-specifying the legacy accordion grid ------------------------ */
/* MEASURED, and it is the residual code Andre suspected: the Global Course Home
   snippet still prints a ~9KB inline <style> on course pages, and inside it
   .single-sfwd-courses .learndash-wrapper .ld-accordion__items forces
   grid-template-columns: repeat(2, 1fr) !important at (0,3,0). Every other 16.4
   rule landed; only the grid lost, which is why the tree still nested itself into
   halves. An id prefix beats any number of classes.

   Fixed here rather than in the snippet because course 168 still runs on that
   snippet (Round 5 ruling) and this is reversible. When the snippet is finally
   retired, this block and its 14 comment lines can go with it. */
html body.single-sfwd-courses #pagewrap .learndash-wrapper [class*="ld-accordion__items"] {
	grid-template-columns: 1fr !important;
}
html body.single-sfwd-courses #pagewrap .learndash-wrapper [class*="ld-accordion__item--"] {
	grid-template-columns: 1fr auto !important;
}

/* --- 16.7 narrow-width follow-ups, measured at a 344px column ------------- */
@media (max-width: 680px) {
	/* The Buttons module anchor is inline-flex (tf_in_flx), so width:100% alone
	   did nothing and the button kept sitting alongside the quiz copy. */
	html body .altus-ld-btn .module-buttons-item { display: flex; width: 100%; }
	html body .altus-ld-btn a.builder_button { flex: 1 1 100%; width: 100%; box-sizing: border-box; }

	/* The body card padding left the H5P frame only ~229px to work with. */
	html body .altus-ld-body { padding-left: 14px; padding-right: 14px; }

	/* The accordion card overflowed its container by ~45px. */
	html body .learndash-wrapper .ld-accordion { max-width: 100%; padding: 14px 12px; }
	html body .learndash-wrapper [class*="ld-accordion__section"] { padding: 8px 6px 12px; }
	html body .learndash-wrapper [class*="ld-accordion__section"] [class*="ld-accordion__section"] { padding: 6px 0 6px 10px; }
	html body .learndash-wrapper [class*="ld-accordion__item-header"] { padding: 12px 12px; }
}


/* ==========================================================================
   17 - ANDRE REVIEW ROUND 2, 2026-08-02
   The accordion stops being nested boxes, Focus Mode chrome gets brand colour.
   ========================================================================== */

/* --- 17.1 accordion rows are FLEX, not grid ------------------------------- */
/* 16.4 forced every item to "1fr auto" on the assumption the two cells were
   [content, expander]. MEASURED wrong for quiz rows: theirs are [icon, title],
   so 1fr on the icon threw "Module 1 Check" to the far right of a 569px row -
   which is also why the block read as full width with nothing in it. Flex fits
   every row shape: things sit left in source order, an expander pushes right. */
html body .learndash-wrapper [class*="ld-accordion__item--"],
html body.single-sfwd-courses #pagewrap .learndash-wrapper [class*="ld-accordion__item--"] {
	display: flex !important;
	grid-template-columns: none !important;
	align-items: center;
	gap: 10px;
}
html body .learndash-wrapper [class*="ld-accordion__item-header"] { flex: 1 1 auto; min-width: 0; }
html body .learndash-wrapper [class*="ld-accordion__item--"] > [class*="expand-button"] { margin-left: auto; flex: 0 0 auto; }

/* --- 17.2 flat rows instead of boxes inside boxes ------------------------- */
/* Andre: three levels of red-bordered box nested inside each other reads as
   clutter. A tree wants one hairline per row and an indent rule for depth. */
html body .learndash-wrapper [class*="ld-accordion__item--"] {
	border: 0;
	border-bottom: 1px solid var(--altus-border);
	border-radius: 0;
	background: transparent;
}
html body .learndash-wrapper [class*="ld-accordion__item--"]:last-child { border-bottom: 0; }
html body .learndash-wrapper [class*="ld-accordion__items"] [class*="ld-accordion__items"] {
	border-left: 2px solid var(--altus-border);
	margin-left: 12px;
	padding-left: 14px;
}

/* --- 17.3 hover only what is actually hovered ----------------------------- */
/* The rows NEST, so an item :hover matched the row, its parent and its
   grandparent at once and the whole tree lit up. Titles are anchors and anchors
   do not nest, so hover belongs on the title alone. The 16.4 item-level hover
   border is dropped rather than guarded. */
html body .learndash-wrapper [class*="ld-accordion__item--"]:hover { border-color: var(--altus-border); }
html body .learndash-wrapper [class*="ld-accordion__item-title"] { color: var(--altus-ink); text-decoration: none; }
html body .learndash-wrapper a[class*="ld-accordion__item-title"]:hover { color: var(--altus-red-link); }

/* --- 17.4 the expand control --------------------------------------------- */
/* Themify underlines links inside entry content; on the course page that painted
   a blue rule under EXPAND. Killed in every state, colour kept quiet grey. */
html body .learndash-wrapper .ld-accordion__expand-button,
html body .learndash-wrapper .ld-accordion__expand-button:hover,
html body .learndash-wrapper .ld-accordion__expand-button:focus,
html body .learndash-wrapper .ld-accordion__expand-button-text,
html body .learndash-wrapper .ld-accordion__expand-button-text:hover {
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
}
html body .learndash-wrapper .ld-accordion__expand-button:hover,
html body .learndash-wrapper .ld-accordion__expand-button:hover .ld-accordion__expand-button-text { color: var(--altus-red-link); }

/* --- 17.5 Focus Mode navigation ------------------------------------------ */
/* LearnDash ships slate-blue links and a blue hover. Brand them, and give the
   transparent buttons a real hover rather than a colour shift only. */
html body .learndash-wrapper .ld-navigation__previous-link,
html body .learndash-wrapper .ld-navigation__next-link,
html body .learndash-wrapper .ld-navigation__back-to-course-link { color: var(--altus-secondary); }
html body .learndash-wrapper .ld-navigation__previous-link:hover,
html body .learndash-wrapper .ld-navigation__next-link:hover,
html body .learndash-wrapper .ld-navigation__back-to-course-link:hover { color: var(--altus-red-link); }
html body .learndash-wrapper .ld-button.ld-button-transparent {
	color: var(--altus-red-link);
	border-color: var(--altus-border);
}
html body .learndash-wrapper .ld-button.ld-button-transparent:hover {
	color: #fff;
	background: var(--altus-gradient);
	border-color: transparent;
}

/* --- 17.6 completion green ------------------------------------------------ */
/* LearnDash has its own success green; the brand has one already. Same job,
   one colour. */
html body .learndash-wrapper .ld-status-icon.ld-status-complete,
html body .learndash-wrapper .ld-status-complete,
html body .learndash-wrapper .ld-progress-bar .ld-progress-bar__progress { background-color: var(--altus-green); }
html body .learndash-wrapper .ld-status-complete.ld-status-icon svg path { fill: #fff; }
html body .learndash-wrapper .ld-text.ld-lesson-status-complete,
html body .learndash-wrapper .ld-status-complete + .ld-text { color: var(--altus-green-ink); }

/* --- 17.7 nested lists break to their own line ---------------------------- */
/* Consequence of 17.1: a topic item CONTAINS its quiz list, so making the item
   flex put the child list on the same line as the topic header and threw the
   quiz 770px to the right. The row wraps, and any nested list or section takes
   a full-width line of its own. */
html body .learndash-wrapper [class*="ld-accordion__item--"] { flex-wrap: wrap; }
html body .learndash-wrapper [class*="ld-accordion__item--"] > [class*="ld-accordion__items"],
html body .learndash-wrapper [class*="ld-accordion__item--"] > [class*="ld-accordion__section"] {
	flex: 1 0 100%;
	width: 100%;
}

/* MEASURED: the nested list is wrapped in .ld-accordion__item-steps, not in a
   __items or __section element, so 17.7 missed it and the quiz still sat 770px
   right of its topic. This is the container that actually holds child steps. */
html body .learndash-wrapper [class*="ld-accordion__item--"] > [class*="ld-accordion__item-steps"] {
	flex: 1 0 100%;
	width: 100%;
}

/* --- 17.8 the last two LearnDash blues ------------------------------------ */
/* MEASURED: both are rgb(35,90,243), LearnDash accent blue, and both mean
   COMPLETE - which the brand already has a colour for. The svg paths carry an
   explicit fill rather than currentColor, so the fill has to be named too. */
html body .learndash-wrapper .ld-accordion__item-attribute-icon,
html body .learndash-wrapper .ld-navigation__progress-completed-action,
html body .learndash-wrapper .ld-navigation__label--completed,
html body .learndash-wrapper .ld-svgicon__lesson-complete,
html body .learndash-wrapper .ld-svgicon__check-circle {
	color: var(--altus-green) !important;
}
html body .learndash-wrapper .ld-accordion__item-attribute-icon path,
html body .learndash-wrapper .ld-svgicon__lesson-complete path,
html body .learndash-wrapper .ld-svgicon__check-circle path,
html body .learndash-wrapper .ld-navigation__progress-completed-action svg path {
	fill: currentColor !important;
}

/* --- 17.9 the nav buttons keep a transparent border for their focus ring --- */
/* MEASURED: .ld-navigation__* links ship "border: 2px solid transparent" and
   LearnDash fills that border with its accent blue on hover and focus - which is
   why the border still read blue after 17.5 set only the text colour. Name the
   border colour in every interactive state, and give focus a brand ring rather
   than removing the affordance. */
html body .learndash-wrapper .ld-navigation__previous-link,
html body .learndash-wrapper .ld-navigation__next-link,
html body .learndash-wrapper .ld-navigation__back-to-course-link { border-color: transparent; }
html body .learndash-wrapper .ld-navigation__previous-link:hover,
html body .learndash-wrapper .ld-navigation__next-link:hover,
html body .learndash-wrapper .ld-navigation__back-to-course-link:hover,
html body .learndash-wrapper .ld-navigation__previous-link:focus,
html body .learndash-wrapper .ld-navigation__next-link:focus,
html body .learndash-wrapper .ld-navigation__back-to-course-link:focus,
html body .learndash-wrapper .ld-navigation__previous-link:active,
html body .learndash-wrapper .ld-navigation__next-link:active,
html body .learndash-wrapper .ld-navigation__back-to-course-link:active {
	border-color: var(--altus-red-line) !important;
	color: var(--altus-red-link) !important;
	outline-color: var(--altus-red-link) !important;
}
html body .learndash-wrapper .ld-navigation__previous-link:focus-visible,
html body .learndash-wrapper .ld-navigation__next-link:focus-visible,
html body .learndash-wrapper .ld-navigation__back-to-course-link:focus-visible,
html body .learndash-wrapper .ld-button:focus-visible {
	outline: 2px solid var(--altus-red-link) !important;
	outline-offset: 2px;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:hover,
html body .learndash-wrapper .ld-button.ld-button-transparent:focus,
html body .learndash-wrapper .ld-button.ld-button-transparent:active {
	border-color: transparent !important;
}

/* --- Two-level rail: sub waypoints (H3) - 2026-08-02 -------------------------
   child-theme-scripts.js adds .altus-ld-wp--sub for H3 headings, and only on
   modules whose H3s outnumber their H2s - Module 3 is 6 against 48, Modules 1
   and 2 are untouched. A sub shows only while its parent section is current, so
   Module 3 reads as six Parts with one expanded rather than a 54-stop list.
   NOTE: a Focus Mode topic page has NO #pagewrap. The id-prefix rule in the
   design system is for course pages, where the Global Course Home snippet has
   to be beaten. These rules scope on .altus-ld-rail instead, which exists in
   both contexts and still outranks the plain .altus-ld-wp rules above.
   Dot geometry is measured, not guessed: the main dot is 16px at left -26px,
   which centres it 8px from the path's left edge; a 12px sub dot centres on the
   same track at left -24px. */
.altus-ld-rail .altus-ld-wp--sub{display:none}
.altus-ld-rail .altus-ld-wp--sub.is-shown{display:block;padding-left:12px;font-size:12.5px;line-height:1.35;color:#4a5160}
.altus-ld-rail .altus-ld-wp--sub.is-shown::before{left:-24px;top:13px;width:12px;height:12px;background:#fff;border:2px solid #d32b38;box-shadow:none}
.altus-ld-rail .altus-ld-wp--sub.is-shown.is-done::before{background:#d32b38}
.altus-ld-rail .altus-ld-wp--sub.is-shown.is-on{color:#14181f;font-weight:600}
.altus-ld-rail .altus-ld-wp--sub.is-shown.is-on::before{background:#d32b38;box-shadow:0 0 0 4px rgba(211,43,56,.14)}

/* A rail that expands has to be allowed to run out of room. Only on the wide
   layout - under 920px the rail is a static card, not a sticky column. */
@media (min-width:920px){
  .altus-ld-railcol .altus-ld-rail{max-height:calc(100vh - 150px);overflow-y:auto;scrollbar-width:thin}
}


/* --- Mobile: data tables stack instead of scrolling sideways - 2026-08-02 ------
   MEASURED at a real 390px viewport (iframe probe, see the handoff): the body is
   309px, the table scroll container 277px, and the tables render 352-407px. Every
   table overflowed by 75-130px and had to be swiped sideways. A definition table
   read by swiping is a table a student skips.

   Below 700px each row becomes a block. That needs data-label on every td - the
   generator emits it - because the header row has to be hidden when stacked, and
   without labels a five-column table like SA-CATS 101 Table 1 is unreadable.

   SPECIFICITY NOTE, learned the hard way: a base rule sets the cell border at
   specificity 13. The first attempt at these overrides sat at 11 and lost, which
   rendered as a stray rule under every term. Everything here is scoped
   tbody > tr > td so it ties at 13 and wins on order. */
@media (max-width:700px){
  .altus-ld-table .altus-ld-table__scroll{overflow-x:visible}
  .altus-ld-table table{min-width:0;width:100%;display:block}
  .altus-ld-table thead{display:none}
  .altus-ld-table tbody{display:block}
  .altus-ld-table tbody tr{display:block;padding:11px 14px;border-bottom:1px solid rgba(20,24,31,.10)}
  .altus-ld-table tbody tr:last-child{border-bottom:0}
  .altus-ld-table tbody tr td{display:block;padding:0;border:0 none;width:auto}
  .altus-ld-table tbody tr td[data-label]::before{
    content:attr(data-label);display:block;
    font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;
    color:#6B7280;margin-bottom:2px;
  }

  /* Glossary shape (Term / Abbreviation / Meaning). Labelling those three is
     noise - the shape says what they are - and inlining the term and its
     abbreviation cuts the stacked height by about a third. Measured on Module 2:
     the Visual Operation Types table goes 1710px stacked to 924px here, and the
     whole page 36,868px to 28,237px. */
  .altus-ld-table--glossary tbody tr td{display:inline;border:0 none}
  .altus-ld-table--glossary tbody tr td[data-label]::before{content:none}
  .altus-ld-table--glossary tbody tr td:nth-child(1){font-weight:600;color:#14181F}
  .altus-ld-table--glossary tbody tr td:nth-child(2){color:#6B7280;font-size:12.5px;margin-left:6px;white-space:nowrap}
  .altus-ld-table--glossary tbody tr td:nth-child(3){display:block;margin-top:4px;color:#3D434C}
}


/* --- Presenter mode keeps a readable measure - 2026-08-02 --------------------
   MEASURED on the Module 2 and Module 3 checks: switching presenter mode on adds
   .ld-presenter-mode__body--loaded to <body> and DROPS the max-width:1180px from
   .ld-focus-content. Quiz content goes 1068px to 2148px on a 2560px screen - one
   line of question text across the whole monitor. It affects EVERY quiz, which is
   why this is a rule and not a per-post setting: a new quiz inherits it and the
   fault cannot come back. Presenter mode is for showing a quiz to a room, so the
   type stays larger; only the measure is capped. */
body.ld-presenter-mode__body--loaded .ld-focus-content{
  max-width:1180px;
  margin-left:auto;
  margin-right:auto;
}
@media (min-width:1400px){
  body.ld-presenter-mode__body--loaded .ld-focus-content{max-width:1280px}
}


/* --- Figures open full screen - 2026-08-02 ------------------------------------
   Measured: a figure is about 797px wide on desktop and 277px at 390px. Air Law's
   diagrams are 2048px originals with labels inside them, so at 277px they are not
   readable. child-theme-scripts.js section 17 makes each one a button and builds
   this overlay; nothing here lives in module content. */
.altus-ld-body figure img{cursor:zoom-in}
.altus-ld-body figure img:focus-visible{outline:3px solid rgba(244,55,69,.45);outline-offset:3px}

.altus-ld-figzoom{
  position:fixed;inset:0;z-index:100000;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:24px 16px;
  background:rgba(14,17,22,.94);
  overflow:auto;
  /* NO fade. Two attempts at one failed here: a requestAnimationFrame class
     toggle and then a CSS animation, and BOTH left the overlay built but stuck
     at opacity 0 wherever frames or animations are throttled. An entrance
     animation on a figure viewer is decoration; being visible is not. The
     overlay is simply opaque. */
}
.altus-ld-figzoom__img{
  max-width:100%;max-height:78vh;
  width:auto;height:auto;
  object-fit:contain;
  background:#fff;border-radius:8px;
}
.altus-ld-figzoom__cap{
  max-width:70ch;color:#E7E9EE;font-size:13.5px;line-height:1.5;text-align:center;
}
.altus-ld-figzoom__hint{color:#9AA1AC;font-size:12px;letter-spacing:.02em}

/* Actual size + pan. Fit-to-screen gains only 1.27x on a phone (measured 290px
   page, 370px fitted, 1600px original), which is not enough to read the labels
   inside an Air Law diagram. Tapping the image switches to 1:1 and the overlay
   scrolls. */
.altus-ld-figzoom__img{cursor:zoom-in}
.altus-ld-figzoom.is-actual{align-items:flex-start;justify-content:flex-start}
.altus-ld-figzoom.is-actual .altus-ld-figzoom__img{
  max-width:none;max-height:none;width:auto;height:auto;
  border-radius:0;cursor:zoom-out;
}
.altus-ld-figzoom.is-actual .altus-ld-figzoom__cap,
.altus-ld-figzoom.is-actual .altus-ld-figzoom__hint{display:none}
.altus-ld-figzoom__close{
  position:absolute;top:12px;right:12px;
  box-sizing:border-box;padding:0;
  width:44px;height:44px;min-width:44px;  /* 44px is the touch-target floor */
  display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;
  color:#fff;background:rgba(255,255,255,.14);
  border:0;border-radius:50%;cursor:pointer;
}
.altus-ld-figzoom__close:hover,.altus-ld-figzoom__close:focus-visible{background:rgba(255,255,255,.26)}

/* On a phone the point is to fill the screen, so let the image use the height. */
@media (max-width:700px){
  .altus-ld-figzoom{padding:16px 10px}
  .altus-ld-figzoom__img{max-height:70vh}
}


/* --- One navigation, not two - 2026-08-02 -------------------------------------
   The course home and the subject page each showed our designed cards AND
   LearnDash's own content accordion listing the same thing - two pictures of the
   same course on one page, and on the course home the accordion was the only
   route into the still-empty final exam shell.

   HIDDEN, NOT REMOVED, AND THAT MATTERS: child-theme-scripts.js section 16 builds
   the card links by reading hrefs off LearnDash's own list (measured: 6 anchors in
   this accordion). display:none keeps them in the DOM, so the cards keep working.
   Deleting this block server-side would silently unlink every card.

   Focus Mode's sidebar is a different element and is untouched - it stays the
   in-module navigation. */
body.single-sfwd-courses .ld-accordion,
body.single-sfwd-lessons .ld-accordion{display:none}

/* Topic pages too. Measured: the accordion there is titled "Topic Content" and
   holds ONE item - the module's own check - in 228px of chrome. That link
   already exists in the Focus Mode sidebar and again as the quiz card's button,
   so it was the third copy of the same thing. Nothing on a topic page reads
   hrefs off it: section 16 wires only [data-altus-subject] on the course home
   and .altus-ld-modrow on the subject page, and the quiz card button is a real
   Buttons-module link. */
body.single-sfwd-topic .ld-accordion{display:none}


/* --- LearnDash progress bar, branded - 2026-08-02 -----------------------------
   Measured: .ld-progress-bar__meter-foreground computed rgb(35,90,243), which is
   LearnDash's stock blue, on a rgb(210,215,226) track. Progress everywhere else
   on the portal is the red gradient (the rail fill), so this matches it, and a
   finished course goes status green. */
.ld-progress-bar__meter-foreground{
  background:linear-gradient(90deg,#F43745 0%,#A82630 100%) !important;
}
.ld-progress-bar__meter-background{background:#E6E8EC !important}
.ld-progress-bar__meter-percentage,
.ld-progress-bar__meter-label{color:#4A5160}
/* 100% reads as an achievement, not as more of the same */
.ld-progress-bar[data-progress="100"] .ld-progress-bar__meter-foreground,
.ld-progress-bar--complete .ld-progress-bar__meter-foreground{
  background:#1E9E5A !important;
}


/* --- Two more states for the status pill - 2026-08-02 -------------------------
   Section 18 sets these from LearnDash's real data. --done already existed
   further up this file and is reused. --soon is new: it marks a module whose
   lesson or topic does not exist yet. "Locked" was being shown for both, which
   told a student that Module 5 would open with progress when it has not been
   built at all. */
.altus-ld-pill--soon{
  background:rgba(20,24,31,.06);
  color:#6B7280;
}
.altus-ld-subj.is-soon .altus-ld-subj__pct{color:#6B7280}
.altus-ld-subj.is-done .altus-ld-subj__pct{color:#137A43;font-weight:600}
.altus-ld-subj.is-done .altus-ld-progress > i{background:#1E9E5A}


/* --- Focus Mode brand logo block, transparent - 2026-08-02 --------------------
   Andre's request. MEASURED: .ld-brand-logo computes rgb(255,255,255), set by a
   single LearnDash rule at specificity 40 (no !important). A plain
   .ld-brand-logo override sits at 10 and would lose silently, so this is scoped
   and marked - the same specificity trap that cost an iteration on the mobile
   tables.

   Note the block is 67px tall inside a 52px header, so it overhangs by 15px.
   The header behind it is ALSO white, so the visible change is that overhang. */
.ld-brand-logo{background:transparent !important}


/* ===== MOBILE SPACING PASS (rev 2) ================================
   Measured at 375px on the Air Law subject page before writing.
   Component base rules are "html body .altus-..." = specificity 12,
   and a media query adds none, so every override below carries the
   same html body prefix or better and sits last in the file.
   LearnDash core boxes are forced with !important - their rules are
   in another sheet at higher specificity.
   Before: h1 at 472px from the top, stat tiles 429px in one column. */
@media (max-width:700px){
  /* Only the subject page. On topic pages this margin is the ONLY thing
     clearing the 71px fixed .ld-focus-header - body has no padding-top there. */
  html body.ld-in-focus-mode .learndash-wrapper .ld-focus-main:has(.altus-ld-phead){margin-top:12px !important}
  html body.ld-in-focus-mode .ld-tab-bar__panel > p:empty{display:none}
  html body.ld-in-focus-mode .learndash-wrapper .ld-focus-main .ld-focus-content{margin-top:0 !important;padding-top:16px !important;padding-bottom:24px !important;margin-bottom:24px !important}
  html body.ld-in-focus-mode .learndash-wrapper .ld-focus-main .ld-layout__content{row-gap:24px !important}
  html body .altus-ld-phead h1{margin-bottom:10px}
  html body .altus-ld-phead__lede{font-size:16px}
  html body .altus-ld-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0}
  html body .altus-ld-stat{padding:12px;border-radius:11px}
  html body .altus-ld-stat__v{font-size:21px}
  html body .altus-ld-stat__k{font-size:9.5px;margin-top:4px}
  html body .altus-ld-modlist{gap:10px;margin-top:10px}
  html body .altus-ld-modrow{padding:13px 14px;gap:10px 12px}
  /* meta was 13px/26.4px and wrapped to two lines at 375px (natural 211px in a
     200px box). 12px/1.5 brings it to ~195px - one line, ~30px shorter per row. */
  html body .altus-ld-modrow__meta{font-size:12px;line-height:1.5}
}


/* ==========================================================================
   Round 21 — Andre's front-end review, 2026-08-03 evening.
   Measured on the live pages before styling: LearnDash puts a #235af3 focus
   ring on .ld-trigger-mobile-nav, tints .ld-button-transparent blue on
   hover/focus, and colours the quiz legend/grid with its stock #2F8351 /
   #DB0000 / #3259EB. None of that is brand. Re-tokened below, and the quiz
   Review affordance is removed (Andre: not wanted).
   ========================================================================== */

/* Focus Mode header triggers: nothing on mouse click, brand 2px red ring on
   keyboard focus (brand-system.md: "red 2px focus ring"). */
html body .learndash-wrapper .ld-trigger-mobile-nav,
html body .learndash-wrapper .ld-focus-sidebar-trigger {
	-webkit-tap-highlight-color: transparent;
}
html body .learndash-wrapper .ld-trigger-mobile-nav:focus,
html body .learndash-wrapper .ld-trigger-mobile-nav:focus-visible,
html body .learndash-wrapper .ld-trigger-mobile-nav:active,
html body .learndash-wrapper .ld-focus-sidebar-trigger:focus,
html body .learndash-wrapper .ld-focus-sidebar-trigger:focus-visible {
	outline: 2px solid #F43745 !important;
	outline-offset: 2px;
	box-shadow: none;
}

/* Transparent nav buttons (Previous Lesson / Next Quiz / Back to Course):
   every state brand red on white, never LearnDash blue. */
html body .learndash-wrapper .ld-button.ld-button-transparent,
html body .learndash-wrapper .ld-button.ld-button-transparent:visited {
	color: #D32B38;
	background: transparent;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:hover {
	color: #A82630;
	background: #FDF2F3;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:focus {
	outline: none;
	box-shadow: none;
	background: transparent;
	color: #D32B38;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:focus-visible {
	outline: 2px solid #F43745;
	outline-offset: 2px;
}

/* The quiz Review affordance goes: the button and its legend chip. */
html body .learndash-wrapper .wpProQuiz_content input[name="review"],
html body .learndash-wrapper li.learndash-quiz-review-legend-item-review {
	display: none !important;
}

/* Question stems semibold ink so the stem reads apart from the answers. */
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text,
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_question_text p {
	font-weight: 600;
	color: #14181F;
}

/* Quiz state colours to brand tokens. Order matters: Target, then Solved,
   then SolvedCorrect / SolvedIncorrect, so answered states win the cascade. */
html body .learndash-wrapper .wpProQuiz_content span.wpProQuiz_reviewColor_Answer {
	background: #FFFFFF !important;
	border-color: #6A7078 !important;
}
html body .learndash-wrapper .wpProQuiz_content span.wpProQuiz_reviewColor_AnswerCorrect { background: #1FA971 !important; }
html body .learndash-wrapper .wpProQuiz_content span.wpProQuiz_reviewColor_AnswerIncorrect { background: #D32B38 !important; }

html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionTarget {
	background: #14181F !important;
	border-color: #14181F !important;
	color: #FFFFFF !important;
}
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolved {
	background: #FFFFFF !important;
	border-color: #6A7078 !important;
	color: #14181F !important;
}
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolvedCorrect {
	background: #1FA971 !important;
	border-color: #1FA971 !important;
	color: #FFFFFF !important;
}
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_reviewQuestion li.wpProQuiz_reviewQuestionSolvedIncorrect {
	background: #D32B38 !important;
	border-color: #D32B38 !important;
	color: #FFFFFF !important;
}

/* Answer rows after checking: brand green / red families. */
html body .learndash-wrapper .wpProQuiz_content li.wpProQuiz_questionListItem.wpProQuiz_answerCorrect,
html body .learndash-wrapper .wpProQuiz_content li.wpProQuiz_questionListItem.wpProQuiz_answerCorrect label {
	background-color: #EDFAF3 !important;
	border-color: #1FA971 !important;
}
html body .learndash-wrapper .wpProQuiz_content li.wpProQuiz_questionListItem.wpProQuiz_answerIncorrect,
html body .learndash-wrapper .wpProQuiz_content li.wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label {
	background-color: #FDF2F3 !important;
	border-color: #D32B38 !important;
}


/* ==========================================================================
   Round 22 — Andre 2026-08-04 morning.
   Selected answer option carried LearnDash's hardcoded #235af3 border
   (learndash.min.css, label.is-selected at 5 classes deep). Brand red, and
   the radio dot follows via accent-color. The hamburger ring above was also
   reworked this round: brand red on EVERY focus, click included.
   ========================================================================== */
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem:not(.ld-sortable__item) label.is-selected,
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionListItem label.is-selected {
	border-color: #D32B38 !important;
}
html body .learndash-wrapper .wpProQuiz_content input.wpProQuiz_questionInput {
	accent-color: #D32B38;
}


/* ==========================================================================
   Round 22b — Andre 2026-08-04. LearnDash's .ld-button:hover (#0E2A90) wins
   the cascade through its :not()-inflated wrapper selector, which is how the
   transparent nav buttons (Previous Lesson / Next Quiz) got a blue fill on
   hover under our red text. Every button state owned outright below.
   ========================================================================== */
html body .learndash-wrapper .ld-button.ld-button-transparent,
html body .learndash-wrapper .ld-button.ld-button-transparent:visited {
	color: #D32B38 !important;
	background: transparent !important;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:hover {
	color: #A82630 !important;
	background: #FDF2F3 !important;
}
html body .learndash-wrapper .ld-button.ld-button-transparent:focus,
html body .learndash-wrapper .ld-button.ld-button-transparent:active {
	color: #D32B38 !important;
	background: transparent !important;
	outline: 2px solid #F43745 !important;
	outline-offset: 2px;
	box-shadow: none !important;
}

/* Filled primary buttons: LD blue #235af3, hover #0E2A90 -> brand red. */
html body .learndash-wrapper .ld-button:not(.ld-button-transparent):not(.ld-button-reverse) {
	background-color: #D32B38 !important;
	color: #FFFFFF !important;
}
html body .learndash-wrapper .ld-button:not(.ld-button-transparent):not(.ld-button-reverse):hover,
html body .learndash-wrapper .ld-button:not(.ld-button-transparent):not(.ld-button-reverse):focus {
	background-color: #A82630 !important;
	color: #FFFFFF !important;
}

/* Reverse buttons (white fill, blue text; hover inverts to blue) -> red. */
html body .learndash-wrapper .ld-button.ld-button-reverse {
	color: #D32B38 !important;
}
html body .learndash-wrapper .ld-button.ld-button-reverse:hover {
	background-color: #D32B38 !important;
	color: #FFFFFF !important;
}


/* ==========================================================================
   Round 22c — Andre 2026-08-04. The LESSON COMPLETE row floated 48px above
   the module card (ld-layout grid row-gap 32px + a 16px margin on the
   neutralised duplicate-content <p> in the tab panel) while sitting 16px
   under the breadcrumbs. Row-gap to 16px and the stray margin gone = even.
   Column gap untouched: LD uses the shorthand gap for the sidebar column too.
   ========================================================================== */
html body .learndash-wrapper.ld-layout {
	row-gap: 16px;
}
html body .ld-tab-bar__panel > p:first-child:empty,
html body .ld-tab-bar__panel > p:first-child {
	margin-block: 0;
}


/* --- Breadcrumb: room above it ------------------------------------------
 * LearnDash gives the breadcrumb 8px of padding-top, which sits it hard
 * against the focus header's progress bar. Andre's review 2026-08-04.
 * html body prefix so it clears the base rules, per the specificity note
 * in the blueprint.
 * --------------------------------------------------------------------- */
html body .ld-breadcrumbs.ld-breadcrumbs--modern {
	padding-top: 24px;
}


/* --- Focus Mode hamburger: the X state -----------------------------------
 * The .expanded class exists on .ld-mobile-nav and LearnDash keeps it in
 * sync with the sidebar, but NOTHING in any stylesheet on this site drew an
 * X from it - checked all 65 sheets. The control could only ever show three
 * bars. These are the missing rules. The bars are 4px tall, 8px apart, so
 * 8px of travel brings them together. Andre's review 2026-08-04.
 * --------------------------------------------------------------------- */
html body .ld-mobile-nav .bar-1,
html body .ld-mobile-nav .bar-2,
html body .ld-mobile-nav .bar-3 {
	transition: transform 0.22s ease, opacity 0.18s ease;
}

html body .ld-mobile-nav.expanded .bar-1 {
	transform: translateY(8px) rotate(45deg);
}

html body .ld-mobile-nav.expanded .bar-2 {
	opacity: 0;
}

html body .ld-mobile-nav.expanded .bar-3 {
	transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   Round 26 — Andre 2026-08-04. Once an answer is CHECKED, the option border
   must report the grade, not the selection.

   Round 22 put brand red on label.is-selected at specificity 53. The
   correct/incorrect rules below it colour the LI, not the label, so a student
   who picked the RIGHT answer still saw a red border round it. These rules
   target the label inside a graded LI and sit at 54, one element higher, so
   they win over it.

   !important is required: Round 22 set the red at "border-color:#D32B38 !important",
   so nothing without it can win at any specificity. This is the documented
   LearnDash exception, extended one step.

   NOTE: the option is a DIV, not an LI. An li. prefix silently matches nothing
   here — that cost a round. The .wpProQuiz_questionList ancestor is what
   carries the specificity instead.

   The selection state before Check is untouched: every selector here needs an
   answer* class, and LearnDash only adds those once Check is clicked.
   ========================================================================== */

/* Picked it, and it was right. */
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label.is-selected,
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerCorrect label {
	border-color: var(--altus-green) !important;
}

/* The right answer, revealed after picking a wrong one. It was black. */
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete label.is-selected,
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerCorrectIncomplete label {
	border-color: var(--altus-green) !important;
}

/* Picked it, and it was wrong. Stated rather than inherited from is-selected. */
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label.is-selected,
html body .learndash-wrapper .wpProQuiz_content .wpProQuiz_questionList .wpProQuiz_questionListItem.wpProQuiz_answerIncorrect label {
	border-color: var(--altus-red-link) !important;
}


/* ==========================================================================
   Round 27 — Andre 2026-08-04. The three module-foot navigation links
   (Previous Lesson / Next Quiz / Back to Course) turned #F3F8FF on hover.

   That is LearnDash's --ld-color-system-light-1, set on
   .ld-navigation__*-link:hover in modern.min.css at specificity 20 and with
   NO !important. These sit at 32 and win plainly. The hover treatment on
   this portal is the red border and red label we already set in 17.9 — the
   card itself stays white.
   ========================================================================== */
html body .learndash-wrapper .ld-navigation__previous-link:hover,
html body .learndash-wrapper .ld-navigation__previous-link:focus,
html body .learndash-wrapper .ld-navigation__previous-link:focus-visible,
html body .learndash-wrapper .ld-navigation__previous-link:focus-within,
html body .learndash-wrapper .ld-navigation__previous-link:active,
html body .learndash-wrapper .ld-navigation__next-link:hover,
html body .learndash-wrapper .ld-navigation__next-link:focus,
html body .learndash-wrapper .ld-navigation__next-link:focus-visible,
html body .learndash-wrapper .ld-navigation__next-link:focus-within,
html body .learndash-wrapper .ld-navigation__next-link:active,
html body .learndash-wrapper .ld-navigation__back-to-course-link:hover,
html body .learndash-wrapper .ld-navigation__back-to-course-link:focus,
html body .learndash-wrapper .ld-navigation__back-to-course-link:focus-visible,
html body .learndash-wrapper .ld-navigation__back-to-course-link:focus-within,
html body .learndash-wrapper .ld-navigation__back-to-course-link:active {
	background-color: var(--altus-white);
}


/* ==========================================================================
   Round 28 — Andre 2026-08-04. The check-quiz intro gets the module header's
   card, and the quiz title gets room above it.

   Same recipe as .altus-ld-mhead: white, 16px radius, 1px --altus-border,
   --altus-shadow, and the 5px --altus-gradient edge as an ::before. Written
   as its own class rather than reusing .altus-ld-mhead, because the header
   card carries type and padding rules a quiz intro does not want.

   The quiz pages are NOT Themify-built — their body is plain post_content —
   so the wrapper div is written into each quiz post, not into a layout.
   ========================================================================== */
html body .altus-ld-quizintro {
	position: relative;
	overflow: hidden;
	background: var(--altus-white);
	border: 1px solid var(--altus-border);
	border-radius: 16px;   /* matches .altus-ld-mhead, not the 12px token */
	box-shadow: var(--altus-shadow);
	padding: 28px 34px;
	margin: 0 0 30px;
}

html body .altus-ld-quizintro::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: var(--altus-gradient);
}

html body .altus-ld-quizintro p {
	margin: 0 0 14px;
}

html body .altus-ld-quizintro p:last-child {
	margin-bottom: 0;
}

/* Room above the quiz title. It is the first child of .ld-focus-content and
   sat hard under the focus header.
   style.css sets "margin:0 0 20px" on the focus-mode h1 at specificity 33, so
   this needs 43 AND !important to land. */
html body.ld-in-focus-mode.single-sfwd-quiz .learndash-wrapper .ld-focus-content > h1 {
	margin-top: 20px !important;
}

@media (max-width: 700px) {
	html body .altus-ld-quizintro {
		padding: 22px 20px;
		margin-bottom: 24px;
	}

	html body.ld-in-focus-mode.single-sfwd-quiz .learndash-wrapper .ld-focus-content > h1 {
		margin-top: 14px !important;
	}
}