/* =========================================================================
   UoM A&F — Plugin Design Bridge
   -------------------------------------------------------------------------
   Remaps the four ACCFIN BSc plugins (apply-online, eclass, student-portal,
   academics) from their original Astra-era navy/gold palette to the new
   theme's Stanford-inspired Cardinal Red identity, and unifies typography
   with Source Serif 4 + Source Sans 3.

   Loaded conditionally by inc/class-plugin-bridge.php on:
     /apply-online/  /my-subscription/  /my-studies/  /eclass/
   plus on any page rendered by the eclass course router
   (?accfinbsc_ec_course=...).
   ========================================================================= */


/* ====== 1. CSS-VARIABLE REMAP — works for plugins that already use vars ===
 * apply-online (`--ao-*`) and eclass (`--ec-*`) define their palette via
 * :root variables. Re-declaring those same names with higher specificity
 * (body level) cascades through every rule in their stylesheets.
 * ========================================================================= */
body.accfinbsc-ao-page,
body.page-template-page-php.page-apply-online,
body[class*="accfinbsc-ec"],
body.page-eclass,
body.page-my-subscription,
body.page-my-studies {
	/* Apply-online */
	--ao-bg:        #8C1515;
	--ao-bg-dark:   #5A0E0E;
	--ao-bg-light:  #B83A4B;
	--ao-gold:      #D2C295;
	--ao-gold-light:#E5D9B6;
	--ao-text:      #2E2D29;
	--ao-text-muted:#53565A;
	--ao-border:    #DAD7CB;
	--ao-bg-soft:   #FAFAF7;

	/* Eclass */
	--ec-bg:        #8C1515;
	--ec-bg-dark:   #5A0E0E;
	--ec-bg-light:  #B83A4B;
	--ec-gold:      #D2C295;
	--ec-gold-light:#E5D9B6;
	--ec-body:      #FAFAF7;
	--ec-text:      #2E2D29;
	--ec-text-muted:#53565A;
	--ec-border:    #DAD7CB;
}


/* ====== 2. TYPOGRAPHY UNIFICATION ===================================== */
.ao-page,
.ec-page,
.accfinbsc-sp-panel,
.accfinbsc-ac-wrap,
.accfinbsc-ac-card,
.accfinbsc-sp-card {
	font-family: var(--font-sans);
}
.ao-hero h1, .ao-hero__title,
.ec-hero h1, .ec-hero__title,
.accfinbsc-sp-title,
.accfinbsc-ac-title,
.accfinbsc-ac-card-title,
.accfinbsc-sp-card-title {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}


/* ====== 3. STUDENT PORTAL (`accfinbsc-sp-*`) — hard-coded navy =========== */
/* Default `.accfinbsc-sp-btn` (used inside subscription panels) is restyled
 * to match the Stanford palette. */
.accfinbsc-sp-btn {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
	font-family: var(--font-sans);
	letter-spacing: 0.01em;
}
.accfinbsc-sp-btn:hover {
	background: var(--cardinal-red-dark) !important;
}

/* When the Student Login button appears in the masthead nav, it must NOT
 * compete visually with the primary red `.nav-cta` (Apply) sitting beside
 * it. We restyle it as a secondary, outlined ghost button — same height,
 * same typography rhythm, sharp corners (no pill), Cardinal Red on hover. */
.masthead .nav .accfinbsc-sp-menu-item .accfinbsc-sp-btn,
.masthead .nav-list .accfinbsc-sp-menu-item .accfinbsc-sp-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.45rem !important;
	padding: calc(0.55rem - 2px) calc(1rem - 2px) !important; /* match smaller .nav-cta minus border */
	border: 2px solid var(--black) !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--black) !important;
	font-family: var(--font-sans) !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	white-space: nowrap !important;
	transition: all 0.3s var(--ease-out-quart) !important;
}
/* Compact further when the masthead has shrunk on scroll */
.masthead.scrolled .nav .accfinbsc-sp-menu-item .accfinbsc-sp-btn,
.masthead.scrolled .nav-list .accfinbsc-sp-menu-item .accfinbsc-sp-btn {
	padding: calc(0.45rem - 2px) calc(0.85rem - 2px) !important;
	font-size: 12px !important;
}
.masthead .nav .accfinbsc-sp-menu-item .accfinbsc-sp-btn:hover,
.masthead .nav-list .accfinbsc-sp-menu-item .accfinbsc-sp-btn:hover {
	background: var(--black) !important;
	border-color: var(--black) !important;
	color: var(--white) !important;
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(46, 45, 41, 0.18);
}

/* The subscription-status badge that the plugin appends inline to the
 * Student Login button (e.g. "Active", "Past Due") needs to stay legible
 * against the new outlined background. */
.masthead .nav .accfinbsc-sp-menu-item .accfinbsc-sp-menu-badge,
.masthead .nav-list .accfinbsc-sp-menu-item .accfinbsc-sp-menu-badge {
	margin-left: 0 !important;
}

/* Make sure the plugin's underline-on-hover (inherited from `.nav ul li a`)
 * does not appear under the outlined button. */
.masthead .nav .accfinbsc-sp-menu-item .accfinbsc-sp-btn::after,
.masthead .nav-list .accfinbsc-sp-menu-item .accfinbsc-sp-btn::after {
	display: none !important;
}

.accfinbsc-sp-overlay {
	background: rgba(46, 45, 41, 0.55) !important; /* --black at 55% */
}

.accfinbsc-sp-close,
.accfinbsc-sp-title {
	color: var(--cardinal-red) !important;
}

.accfinbsc-sp-form label span {
	color: var(--cool-grey);
}
.accfinbsc-sp-form label {
	color: var(--black);
}


/* ====== 4. ACADEMICS (`accfinbsc-ac-*`) — hard-coded navy/gold ========== */
.accfinbsc-ac-breadcrumb a,
.accfinbsc-ac-title,
.accfinbsc-ac-card-title,
.accfinbsc-ac-group legend {
	color: var(--cardinal-red) !important;
}

.accfinbsc-ac-card {
	border-color: var(--fog) !important;
	box-shadow: 0 4px 24px rgba(140, 21, 21, 0.06) !important;
}
.accfinbsc-ac-card-locked {
	background: var(--off-white) !important;
	border-color: var(--fog) !important;
}

.accfinbsc-ac-deadline {
	background: var(--sandstone-light) !important;
	border-left-color: var(--sandstone) !important;
	color: var(--black) !important;
}
.accfinbsc-ac-warning {
	background: #FBEDED !important;
	border-color: var(--cardinal-red-light) !important;
	color: var(--cardinal-red-dark) !important;
}
.accfinbsc-ac-note {
	background: var(--sandstone-light) !important;
	color: var(--warm-grey) !important;
}
.accfinbsc-ac-group {
	border-color: var(--fog) !important;
}
.accfinbsc-ac-lock-badge {
	background: var(--fog) !important;
	color: var(--warm-grey) !important;
}


/* ====== 5. PAGE-HERO HANDLING ON FOOTER-INJECTED PAGES ==================
 * eclass renders its own full-bleed hero via wp_footer, so we hide the
 * theme one to avoid a double-hero effect.
 *
 * apply-online used to do the same with a dark navy hero that clashed
 * badly with the theme. We now KEEP the theme's editorial Cardinal-Red
 * page-hero on /apply-online/ and HIDE the plugin's own hero, so the
 * page reads as a native theme page.
 * ========================================================================= */
body[class*="accfinbsc-ec"] .page-hero,
body.page-eclass .page-hero {
	display: none;
}

body[class*="accfinbsc-ec"] .page-body,
body.page-eclass .page-body {
	display: none;
}

/* Apply Online: hide the navy plugin hero, keep the theme's */
body.accfinbsc-ao-page .ao-hero,
body.page-apply-online .ao-hero {
	display: none !important;
}
/* The theme's page-body wrapper is empty on apply-online (the_content is
 * blank) — hide its padding so the form sits directly under the page-hero. */
body.accfinbsc-ao-page .page-body,
body.page-apply-online .page-body {
	display: none;
}


/* ====== 6. PAGE-BODY CONTAINER (for shortcode pages) ==================== */
.page-body {
	padding: var(--s-6) 0 var(--s-8);
	background: var(--off-white);
}
.page-body .wrap {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2rem;
}
.page-body .page-content {
	background: var(--white);
	padding: var(--s-5) var(--s-5);
	border: 1px solid var(--fog);
}

@media (max-width: 720px) {
	.page-body { padding: var(--s-5) 0 var(--s-6); }
	.page-body .wrap { padding: 0 1rem; }
	.page-body .page-content { padding: var(--s-4) var(--s-3); }
}


/* ====== 7. ELCASS COURSE LIST CARDS (extra polish) ====================== */
.ec-course-card,
.ec-course__title,
.ec-section__title {
	font-family: var(--font-display);
}

.ec-pill,
.accfinbsc-sp-menu-badge {
	font-family: var(--font-sans);
	letter-spacing: 0.06em;
}


/* =========================================================================
   ====== 8. APPLY-ONLINE — full editorial restyle =========================
   The plugin ships a navy-blue, rounded-card design with gold pill buttons
   that does not match the rest of the theme. The block below restyles the
   wp_footer-injected `.ao-page` so the form reads as a native page of the
   Stanford-style theme: sharp corners, fog borders, Source Serif/Sans,
   Cardinal Red accents, off-white surfaces.
   ========================================================================= */

/* Anchor everything to the apply-online body */
body.accfinbsc-ao-page,
body.page-apply-online {
	background: var(--off-white);
}

/* Outer wrapper sits in document flow and gets editorial padding */
body.accfinbsc-ao-page .ao-page,
body.page-apply-online .ao-page {
	background: var(--off-white);
	padding: clamp(2.5rem, 5vw, 4.5rem) 1.5rem clamp(3rem, 6vw, 6rem);
	font-family: var(--font-sans);
}

/* ----- ALERT (top-of-form error) --------------------------------------- */
body.accfinbsc-ao-page .ao-alert,
body.page-apply-online .ao-alert {
	max-width: var(--content-width);
	margin: 0 auto 1.5rem;
	padding: 1rem 1.25rem;
	border-radius: 0;
	background: #FBEDED;
	border-left: 3px solid var(--cardinal-red);
	color: var(--cardinal-red-dark);
	box-shadow: none;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.55;
}
body.accfinbsc-ao-page .ao-alert-warn,
body.page-apply-online .ao-alert-warn {
	background: var(--sandstone-light);
	border-left-color: var(--cardinal-red);
	color: var(--warm-grey);
}

/* ----- FORM CARD -------------------------------------------------------- */
body.accfinbsc-ao-page .ao-form,
body.page-apply-online .ao-form,
body.accfinbsc-ao-page .ao-success-card,
body.page-apply-online .ao-success-card {
	max-width: var(--content-width);
	margin: 0 auto;
	background: var(--white);
	border: 1px solid var(--fog);
	border-top: 3px solid var(--cardinal-red);
	border-radius: 0;
	box-shadow: 0 24px 48px rgba(46, 45, 41, 0.06);
	padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3.25rem);
}

/* ----- PROGRESS --------------------------------------------------------- */
body.accfinbsc-ao-page .ao-progress,
body.page-apply-online .ao-progress {
	margin: 0 0 2rem;
}
body.accfinbsc-ao-page .ao-progress-bar,
body.page-apply-online .ao-progress-bar {
	height: 3px;
	background: var(--fog);
	border-radius: 0;
	overflow: hidden;
}
body.accfinbsc-ao-page .ao-progress-fill,
body.page-apply-online .ao-progress-fill {
	background: var(--cardinal-red);
	border-radius: 0;
}
body.accfinbsc-ao-page .ao-progress-num,
body.page-apply-online .ao-progress-num {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--fog);
	color: var(--cool-grey);
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	transition: all 0.25s var(--ease-out-quart);
}
body.accfinbsc-ao-page .ao-progress-step.is-active .ao-progress-num,
body.page-apply-online .ao-progress-step.is-active .ao-progress-num {
	background: var(--white);
	border-color: var(--cardinal-red);
	color: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-progress-step.is-done .ao-progress-num,
body.page-apply-online .ao-progress-step.is-done .ao-progress-num {
	background: var(--cardinal-red);
	border-color: var(--cardinal-red);
	color: var(--white);
}
body.accfinbsc-ao-page .ao-progress-label,
body.page-apply-online .ao-progress-label {
	font-family: var(--font-sans);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--cool-grey);
}
body.accfinbsc-ao-page .ao-progress-step.is-active .ao-progress-label,
body.page-apply-online .ao-progress-step.is-active .ao-progress-label {
	color: var(--cardinal-red);
}

/* ----- STEP HEADING ----------------------------------------------------- */
body.accfinbsc-ao-page .ao-step-indicator,
body.page-apply-online .ao-step-indicator {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cardinal-red);
	margin: 0 0 0.85rem;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
}
body.accfinbsc-ao-page .ao-step-indicator::before,
body.page-apply-online .ao-step-indicator::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-step-indicator .ao-step-current,
body.page-apply-online .ao-step-indicator .ao-step-current {
	color: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-step-title,
body.page-apply-online .ao-step-title {
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 2.6vw, 2.2rem);
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--black);
	margin: 0 0 0.6rem;
}
body.accfinbsc-ao-page .ao-step-desc,
body.page-apply-online .ao-step-desc {
	font-family: var(--font-serif);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--cool-grey);
	margin: 0 0 2rem;
	max-width: 60ch;
}

/* ----- LABELS / HELP ---------------------------------------------------- */
body.accfinbsc-ao-page .ao-label,
body.page-apply-online .ao-label {
	font-family: var(--font-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--black);
}
body.accfinbsc-ao-page .ao-req,
body.page-apply-online .ao-req {
	color: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-help,
body.page-apply-online .ao-help {
	font-family: var(--font-serif);
	font-size: 13px;
	color: var(--cool-grey);
	line-height: 1.55;
}

/* ----- INPUTS ----------------------------------------------------------- */
body.accfinbsc-ao-page .ao-input,
body.page-apply-online .ao-input {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--fog);
	border-radius: 0;
	background: var(--white);
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--black);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
body.accfinbsc-ao-page .ao-input:focus,
body.page-apply-online .ao-input:focus,
body.accfinbsc-ao-page .ao-form input:focus,
body.page-apply-online .ao-form input:focus,
body.accfinbsc-ao-page .ao-form textarea:focus,
body.page-apply-online .ao-form textarea:focus,
body.accfinbsc-ao-page .ao-form select:focus,
body.page-apply-online .ao-form select:focus {
	border-color: var(--cardinal-red) !important;
	outline: none;
	box-shadow: 0 0 0 3px rgba(140, 21, 21, 0.12) !important;
}
body.accfinbsc-ao-page .ao-textarea,
body.page-apply-online .ao-textarea {
	min-height: 160px;
	font-family: var(--font-serif);
	line-height: 1.6;
}

/* ----- RADIO / CHECKBOX ------------------------------------------------- */
body.accfinbsc-ao-page .ao-radio,
body.page-apply-online .ao-radio,
body.accfinbsc-ao-page .ao-checkbox,
body.page-apply-online .ao-checkbox {
	border: 1px solid var(--fog);
	border-radius: 0;
	background: var(--white);
	transition: border-color 0.2s ease, background 0.2s ease;
}
body.accfinbsc-ao-page .ao-radio:has(input:checked),
body.page-apply-online .ao-radio:has(input:checked),
body.accfinbsc-ao-page .ao-checkbox:has(input:checked),
body.page-apply-online .ao-checkbox:has(input:checked) {
	border-color: var(--cardinal-red);
	background: var(--sandstone-light);
}
body.accfinbsc-ao-page .ao-radio-dot,
body.page-apply-online .ao-radio-dot {
	border-color: var(--fog);
}
body.accfinbsc-ao-page .ao-radio input:checked + .ao-radio-dot,
body.page-apply-online .ao-radio input:checked + .ao-radio-dot {
	border-color: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-radio input:checked + .ao-radio-dot::after,
body.page-apply-online .ao-radio input:checked + .ao-radio-dot::after {
	background: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-checkbox-box,
body.page-apply-online .ao-checkbox-box {
	border-radius: 2px;
	border-color: var(--fog);
}
body.accfinbsc-ao-page .ao-checkbox input:checked + .ao-checkbox-box,
body.page-apply-online .ao-checkbox input:checked + .ao-checkbox-box {
	background: var(--cardinal-red);
	border-color: var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-checkbox input:checked + .ao-checkbox-box::after,
body.page-apply-online .ao-checkbox input:checked + .ao-checkbox-box::after {
	border-right-color: var(--white);
	border-bottom-color: var(--white);
}
body.accfinbsc-ao-page .ao-radio-label,
body.page-apply-online .ao-radio-label,
body.accfinbsc-ao-page .ao-checkbox-label,
body.page-apply-online .ao-checkbox-label {
	font-family: var(--font-serif);
	color: var(--black);
}

/* ----- FILE UPLOAD ------------------------------------------------------ */
body.accfinbsc-ao-page .ao-file-drop,
body.page-apply-online .ao-file-drop {
	border: 2px dashed var(--fog);
	border-radius: 0;
	background: var(--off-white);
	padding: 1.75rem 1rem;
	font-family: var(--font-sans);
}
body.accfinbsc-ao-page .ao-file-drop:hover,
body.page-apply-online .ao-file-drop:hover,
body.accfinbsc-ao-page .ao-field-file.is-drag-hover .ao-file-drop,
body.page-apply-online .ao-field-file.is-drag-hover .ao-file-drop {
	border-color: var(--cardinal-red);
	background: var(--sandstone-light);
}
body.accfinbsc-ao-page .ao-file-icon,
body.page-apply-online .ao-file-icon {
	background: var(--cardinal-red);
	color: var(--white);
	border-radius: 50%;
}
body.accfinbsc-ao-page .ao-file-text,
body.page-apply-online .ao-file-text {
	color: var(--cool-grey);
	font-family: var(--font-sans);
	font-size: 14px;
}
body.accfinbsc-ao-page .ao-file-text strong,
body.page-apply-online .ao-file-text strong {
	color: var(--cardinal-red);
	font-weight: 700;
}
body.accfinbsc-ao-page .ao-file-list li,
body.page-apply-online .ao-file-list li {
	background: var(--off-white);
	border: 1px solid var(--fog);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--black);
}

/* ----- BUTTONS ---------------------------------------------------------- */
body.accfinbsc-ao-page .ao-btn,
body.page-apply-online .ao-btn {
	border-radius: 0 !important;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0.95rem 1.85rem;
	box-shadow: none !important;
	transition: all 0.25s var(--ease-out-quart);
}
body.accfinbsc-ao-page .ao-btn-gold,
body.page-apply-online .ao-btn-gold {
	background: var(--cardinal-red);
	color: var(--white);
	border: 1px solid var(--cardinal-red);
}
body.accfinbsc-ao-page .ao-btn-gold:not(:disabled):hover,
body.page-apply-online .ao-btn-gold:not(:disabled):hover {
	background: var(--cardinal-red-dark);
	border-color: var(--cardinal-red-dark);
	transform: translateY(-1px);
	box-shadow: 0 8px 18px rgba(140, 21, 21, 0.25) !important;
}
body.accfinbsc-ao-page .ao-btn-ghost,
body.page-apply-online .ao-btn-ghost {
	background: transparent;
	color: var(--black);
	border: 1px solid var(--black);
}
body.accfinbsc-ao-page .ao-btn-ghost:hover,
body.page-apply-online .ao-btn-ghost:hover {
	background: var(--black);
	color: var(--white);
	border-color: var(--black);
}
body.accfinbsc-ao-page .ao-btn-link,
body.page-apply-online .ao-btn-link {
	font-family: var(--font-sans);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cool-grey);
	text-decoration: none;
	border: none;
	padding: 0.7rem 0;
}
body.accfinbsc-ao-page .ao-btn-link:hover,
body.page-apply-online .ao-btn-link:hover {
	color: var(--cardinal-red);
	background: transparent;
}

/* ----- STEP NAV --------------------------------------------------------- */
body.accfinbsc-ao-page .ao-step-nav,
body.page-apply-online .ao-step-nav {
	border-top: 1px solid var(--fog);
	padding-top: 1.75rem;
	margin-top: 2.5rem;
}

/* ----- SUCCESS SCREEN --------------------------------------------------- */
body.accfinbsc-ao-page .ao-success-card,
body.page-apply-online .ao-success-card {
	max-width: 720px;
	text-align: center;
}
body.accfinbsc-ao-page .ao-success-ref,
body.page-apply-online .ao-success-ref {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--cardinal-red);
	margin-bottom: 0.6rem;
}
body.accfinbsc-ao-page .ao-success-ref-num,
body.page-apply-online .ao-success-ref-num {
	font-family: var(--font-display);
	font-size: 2.4rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--black);
}
body.accfinbsc-ao-page .ao-success-ref-help,
body.page-apply-online .ao-success-ref-help {
	font-family: var(--font-serif);
	color: var(--cool-grey);
	margin-bottom: 2rem;
}

/* ----- INVALID STATE ---------------------------------------------------- */
body.accfinbsc-ao-page .ao-field.is-invalid .ao-input,
body.page-apply-online .ao-field.is-invalid .ao-input,
body.accfinbsc-ao-page .ao-field.is-invalid .ao-radio,
body.page-apply-online .ao-field.is-invalid .ao-radio,
body.accfinbsc-ao-page .ao-field.is-invalid .ao-checkbox,
body.page-apply-online .ao-field.is-invalid .ao-checkbox,
body.accfinbsc-ao-page .ao-field.is-invalid .ao-file-drop,
body.page-apply-online .ao-field.is-invalid .ao-file-drop {
	border-color: var(--cardinal-red) !important;
	box-shadow: 0 0 0 3px rgba(140, 21, 21, 0.12) !important;
}

@media (max-width: 720px) {
	body.accfinbsc-ao-page .ao-progress-step,
	body.page-apply-online .ao-progress-step {
		min-width: 32px;
	}
	body.accfinbsc-ao-page .ao-progress-label,
	body.page-apply-online .ao-progress-label {
		display: none;
	}
}

.ao-submit-btn,
.ec-btn-primary {
	font-family: var(--font-sans);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}


/* =========================================================================
   ====== 9. LOGGED-IN USER MENU (theme-side, injected by plugin-bridge.php)
   ========================================================================= */
.uom-user-menu {
	position: relative;
	list-style: none;
}
.uom-user-trigger {
	display: inline-flex; align-items: center; gap: 0.65rem;
	padding: 0.4rem 0.6rem 0.4rem 0.4rem;
	background: transparent; border: 1px solid var(--fog);
	color: var(--black); cursor: pointer; line-height: 1;
	transition: all 0.25s var(--ease-out-quart);
	font-family: var(--font-sans);
}
.uom-user-trigger:hover {
	border-color: var(--cardinal-red);
	box-shadow: 0 8px 18px rgba(140, 21, 21, 0.10);
}
.uom-user-trigger[aria-expanded="true"] {
	border-color: var(--cardinal-red);
	background: var(--white);
}
.uom-user-avatar {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--cardinal-red); color: var(--white);
	font-family: var(--font-display); font-weight: 600; font-size: 13px;
	letter-spacing: 0.02em;
}
.uom-user-text {
	display: flex; flex-direction: column; gap: 2px;
	text-align: left; min-width: 0;
}
.uom-user-name {
	font-family: var(--font-sans); font-weight: 600; font-size: 13px;
	color: var(--black); letter-spacing: 0.01em; max-width: 18ch;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.uom-user-role {
	font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--cool-grey);
}
.uom-user-chev {
	font-size: 9px; color: var(--cool-grey);
	transition: transform 0.25s var(--ease-out-quart);
}
.uom-user-trigger[aria-expanded="true"] .uom-user-chev {
	transform: rotate(180deg);
	color: var(--cardinal-red);
}

/* Dropdown panel */
.uom-user-panel {
	position: absolute;
	top: calc(100% + 16px); right: 0;
	min-width: 360px; max-width: 92vw;
	background: var(--white);
	border-top: 4px solid var(--cardinal-red);
	box-shadow: 0 24px 48px rgba(46, 45, 41, 0.18);
	opacity: 0; pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 0.2s ease, transform 0.2s var(--ease-out-quart);
	z-index: 200;
}
.uom-user-menu.is-open .uom-user-panel {
	opacity: 1; pointer-events: auto; transform: translateY(0);
}
.uom-user-panel-head {
	padding: 1.5rem 1.75rem 1.25rem;
	background: var(--off-white);
	border-bottom: 1px solid var(--fog);
}
.uom-user-panel-eyebrow {
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase; color: var(--cardinal-red);
	margin-bottom: 0.4rem;
}
.uom-user-panel-title {
	font-family: var(--font-display); font-size: 1.15rem; font-weight: 500;
	color: var(--black); letter-spacing: -0.01em;
}
/* Override global `.nav ul { display: flex }` from style.css which would
 * otherwise force these items into a horizontal row inside the header nav. */
.uom-user-menu .uom-user-panel-list,
.nav ul.uom-user-panel-list {
	display: flex !important;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	list-style: none;
	padding: 0.65rem 0.65rem;
	margin: 0;
}
.uom-user-menu .uom-user-panel-item,
.nav ul .uom-user-panel-item {
	list-style: none;
	width: 100%;
	margin: 0;
	position: relative;
}
.uom-user-panel-item.uom-user-link--sep {
	margin-top: 0.5rem;
	padding-top: 0.5rem;
	border-top: 1px solid var(--fog);
}
.uom-user-link {
	display: grid; grid-template-columns: 36px 1fr 14px;
	gap: 1rem; align-items: center;
	padding: 0.85rem 1.25rem;
	text-decoration: none;
	transition: background 0.2s ease;
}
.uom-user-link:hover { background: var(--off-white); }
.uom-user-link-icon {
	width: 36px; height: 36px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sandstone-light); color: var(--cardinal-red);
	font-size: 14px;
}
.uom-user-link-body { display: flex; flex-direction: column; gap: 2px; }
.uom-user-link-title {
	font-family: var(--font-sans); font-weight: 600; font-size: 14px;
	color: var(--black); line-height: 1.2;
}
.uom-user-link-desc {
	font-family: var(--font-serif); font-size: 12.5px; line-height: 1.4;
	color: var(--cool-grey);
}
.uom-user-link-arrow {
	font-size: 10px; color: var(--cool-grey);
	transition: transform 0.2s var(--ease-out-quart), color 0.2s ease;
}
.uom-user-link:hover .uom-user-link-arrow {
	color: var(--cardinal-red); transform: translateX(3px);
}
/* The sign-out item gets a quieter look */
.uom-user-link--sep .uom-user-link-icon {
	background: var(--fog); color: var(--warm-grey);
}
.uom-user-link--sep .uom-user-link-title { color: var(--warm-grey); }

/* Underline-on-hover from the global .nav ul li a should not appear on the
 * trigger button (it's a <button>, not an <a>, so already exempt) — but we
 * neutralise it on the inner LIs just in case. */
.uom-user-menu .uom-user-link::after { display: none !important; }

@media (max-width: 1024px) {
	.uom-user-text { display: none; }
	.uom-user-trigger { padding: 0.4rem; }
	.uom-user-panel { right: -8px; min-width: 320px; }
}


/* =========================================================================
   ====== 10. PLUGIN PAGES — STANFORD-STYLE PAGE FRAME =====================
   The three plugin pages (my-subscription, my-studies, eclass) sit inside
   page.php's `.page-body > .wrap > .page-content` container. Earlier we
   *hid* `.page-hero` and `.page-body` to let the plugin's own (navy/gold)
   hero take over. We now reverse that for my-subscription + my-studies
   which never had their own hero, and we make the eclass hero blend with
   the rest of the site. The container is upgraded to a premium dashboard
   surface with proper editorial typography.
   ========================================================================= */

/* RE-ENABLE the theme page-hero on shortcode pages (my-subscription /
 * my-studies). It was previously hidden together with the eclass hero. */
body.page-my-subscription .page-hero,
body.page-my-studies .page-hero {
	display: block !important;
	background:
		radial-gradient(ellipse 60% 70% at 100% 0%, rgba(140, 21, 21, 0.06) 0%, transparent 60%),
		radial-gradient(ellipse 60% 70% at 0% 100%, rgba(210, 194, 149, 0.18) 0%, transparent 60%),
		var(--white);
	border-bottom: 1px solid var(--fog);
}
body.page-my-subscription .page-body,
body.page-my-studies .page-body {
	display: block !important;
}

/* Premium "dashboard" surface for the shortcode container */
body.page-my-subscription .page-body,
body.page-my-studies .page-body {
	background: var(--off-white);
	padding: 4rem 0 6rem;
}
body.page-my-subscription .page-body .wrap,
body.page-my-studies .page-body .wrap {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 2rem;
}
body.page-my-subscription .page-body .page-content,
body.page-my-studies .page-body .page-content {
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

/* ====== 10a. MY-SUBSCRIPTION cards =================================== */
.accfinbsc-sp-wrap {
	max-width: 100% !important;
	display: flex; flex-direction: column; gap: 1.75rem;
}
.accfinbsc-sp-card {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 4px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 2.25rem 2rem !important;
	box-shadow: 0 12px 28px rgba(46, 45, 41, 0.05) !important;
	max-width: 100% !important;
	margin: 0 !important;
}
.accfinbsc-sp-card-title,
.accfinbsc-sp-history-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.6vw, 1.95rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.015em !important;
	color: var(--black) !important;
	margin: 0 0 1rem !important;
	line-height: 1.2 !important;
}
.accfinbsc-sp-status-line {
	margin: 0 0 1.5rem !important;
}
.accfinbsc-sp-status-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.45rem 0.95rem;
	background: var(--sandstone-light);
	color: var(--cardinal-red);
	font-family: var(--font-sans); font-size: 11px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
}
.accfinbsc-sp-meta {
	display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem;
	margin: 0 0 1.5rem !important;
	padding: 1rem 0;
	border-top: 1px solid var(--fog);
	border-bottom: 1px solid var(--fog);
}
.accfinbsc-sp-meta dt {
	font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--cool-grey); padding-top: 2px;
}
.accfinbsc-sp-meta dd {
	font-family: var(--font-display); font-size: 1.05rem;
	color: var(--black); margin: 0;
}
.accfinbsc-sp-pay-btn,
.accfinbsc-sp-portal-btn {
	display: inline-flex !important; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1.6rem !important;
	background: var(--cardinal-red) !important; color: var(--white) !important;
	border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 0.06em !important; text-transform: uppercase !important;
	text-decoration: none !important;
	transition: all 0.3s var(--ease-out-quart) !important;
}
.accfinbsc-sp-pay-btn:hover,
.accfinbsc-sp-portal-btn:hover {
	background: var(--cardinal-red-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(140, 21, 21, 0.22);
}
.accfinbsc-sp-portal-btn {
	background: transparent !important;
	color: var(--cardinal-red) !important;
	border: 2px solid var(--cardinal-red) !important;
	padding: calc(0.85rem - 2px) calc(1.6rem - 2px) !important;
}
.accfinbsc-sp-portal-btn:hover {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
}
.accfinbsc-sp-logout {
	margin: 1.5rem 0 0 !important;
	padding-top: 1.25rem !important;
	border-top: 1px solid var(--fog);
}
.accfinbsc-sp-logout a {
	color: var(--cool-grey) !important;
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	text-decoration: none;
}
.accfinbsc-sp-logout a:hover { color: var(--cardinal-red) !important; }

/* History table — editorial styling */
.accfinbsc-sp-history-table {
	width: 100%; border-collapse: collapse;
	font-family: var(--font-sans); font-size: 0.95rem;
	margin-top: 1rem;
}
.accfinbsc-sp-history-table thead {
	background: var(--black); color: var(--white);
}
.accfinbsc-sp-history-table th {
	padding: 0.95rem 1rem; text-align: left;
	font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em;
	text-transform: uppercase;
}
.accfinbsc-sp-history-table td {
	padding: 1rem; border-bottom: 1px solid var(--fog);
	color: var(--black);
}
.accfinbsc-sp-history-row:hover { background: var(--sandstone-light); }
.accfinbsc-sp-history-badge {
	display: inline-flex; align-items: center;
	padding: 0.25rem 0.65rem;
	font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; border-radius: 0;
}
.accfinbsc-sp-history-badge-completed,
.accfinbsc-sp-history-badge-paid    { background: var(--palo-alto); color: var(--white); }
.accfinbsc-sp-history-badge-billed  { background: var(--poppy);     color: var(--white); }
.accfinbsc-sp-history-badge-past_due{ background: var(--cardinal-red); color: var(--white); }
.accfinbsc-sp-history-badge-canceled{ background: var(--fog);       color: var(--warm-grey); }

/* ====== 10b. MY-STUDIES cards (academics) ===========================
 * Mirrors section 10a (my-subscription) selector-for-selector so the two
 * pages read as a single product. The plugin's own academics.css uses a
 * navy/rounded design system that we override here with Cardinal-Red,
 * sharp-cornered editorial cards.
 * ==================================================================== */

/* Wrap & study-plan stack */
.accfinbsc-ac-wrap,
.accfinbsc-ac-study-plan {
	max-width: 100% !important;
	margin: 0 !important;
	display: flex; flex-direction: column; gap: 1.75rem;
}

/* Card shell — identical to .accfinbsc-sp-card */
.accfinbsc-ac-card {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 4px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 2.25rem 2rem !important;
	box-shadow: 0 12px 28px rgba(46, 45, 41, 0.05) !important;
	max-width: 100% !important;
	margin: 0 !important;
	overflow: hidden;
}
.accfinbsc-ac-card-locked {
	background: var(--off-white) !important;
	border-top-color: var(--warm-grey) !important;
}

/* Card titles */
.accfinbsc-ac-card-title,
.accfinbsc-ac-grades-title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.5rem, 2.6vw, 1.95rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.015em !important;
	color: var(--black) !important;
	line-height: 1.2 !important;
	margin: 0 0 1rem !important;
	display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
}
/* The big "Hello, X" title at the top of the page sits alone, no extra row */
.accfinbsc-ac-card-title-main {
	margin: 0 !important;
}
.accfinbsc-ac-grades-intro {
	font-family: var(--font-serif);
	font-size: 0.95rem; line-height: 1.55;
	color: var(--cool-grey); margin: 0 0 1.25rem;
}

/* Breadcrumb (top of /my-studies/?course=XXX views) */
.accfinbsc-ac-breadcrumb {
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: var(--cool-grey) !important;
	margin: 0 0 1.25rem !important;
}
.accfinbsc-ac-breadcrumb a {
	color: var(--cardinal-red) !important;
	text-decoration: none !important;
}
.accfinbsc-ac-breadcrumb a:hover {
	color: var(--cardinal-red-dark) !important;
	text-decoration: underline !important;
}

/* Status line + semester badge — mirrors .accfinbsc-sp-status-* */
.accfinbsc-ac-status-line {
	margin: 0 0 1.5rem !important;
}
.accfinbsc-ac-status-badge {
	display: inline-flex; align-items: center; gap: 0.5rem;
	padding: 0.45rem 0.95rem;
	background: var(--sandstone-light);
	color: var(--cardinal-red);
	font-family: var(--font-sans); font-size: 11px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	border-radius: 0;
}
.accfinbsc-ac-status-badge-active,
.accfinbsc-ac-status-badge-current  { background: var(--sandstone-light); color: var(--cardinal-red); }
.accfinbsc-ac-status-badge-completed,
.accfinbsc-ac-status-badge-passed   { background: var(--palo-alto);     color: var(--white); }
.accfinbsc-ac-status-badge-pending  { background: var(--poppy);         color: var(--white); }
.accfinbsc-ac-status-badge-locked,
.accfinbsc-ac-status-badge-none     { background: var(--fog);           color: var(--warm-grey); }

/* Locked semester pill on a card title row */
.accfinbsc-ac-lock-badge {
	display: inline-flex; align-items: center;
	padding: 0.25rem 0.65rem;
	background: var(--fog); color: var(--warm-grey);
	font-family: var(--font-sans); font-size: 10px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	border-radius: 0;
}

/* Meta dl (deadline / period dates) — mirrors .accfinbsc-sp-meta */
.accfinbsc-ac-meta {
	display: grid; grid-template-columns: max-content 1fr; gap: 0.6rem 1.5rem;
	margin: 0 0 1.5rem !important;
	padding: 1rem 0;
	border-top: 1px solid var(--fog);
	border-bottom: 1px solid var(--fog);
}
.accfinbsc-ac-meta dt {
	font-family: var(--font-sans);
	font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--cool-grey); padding-top: 2px;
}
.accfinbsc-ac-meta dd {
	font-family: var(--font-display); font-size: 1.05rem;
	color: var(--black); margin: 0;
}

/* Inline helpers / callouts ----------------------------------------- */
.accfinbsc-ac-deadline {
	font-family: var(--font-sans);
	font-size: 0.92rem; line-height: 1.5;
	color: var(--black);
	background: var(--sandstone-light);
	border-left: 3px solid var(--cardinal-red);
	border-radius: 0;
	padding: 0.7rem 1rem;
	margin: 0 0 1rem;
}
.accfinbsc-ac-warning {
	font-family: var(--font-sans);
	font-size: 0.92rem; font-weight: 600; line-height: 1.5;
	color: var(--cardinal-red-dark) !important;
	background: rgba(140, 21, 21, 0.06) !important;
	border: 1px solid rgba(140, 21, 21, 0.18) !important;
	border-left: 3px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1rem !important;
	margin: 1rem 0 !important;
}
.accfinbsc-ac-note {
	font-family: var(--font-serif);
	font-size: 0.95rem; line-height: 1.55;
	color: var(--cool-grey) !important;
	background: var(--off-white) !important;
	border-left: 3px solid var(--fog) !important;
	border-radius: 0 !important;
	padding: 0.75rem 1rem !important;
	margin: 0.75rem 0 !important;
}
.accfinbsc-ac-muted {
	color: var(--cool-grey) !important;
	font-size: 0.9rem;
}

/* Enrollment form --------------------------------------------------- */
.accfinbsc-ac-form { margin-top: 1rem; }
.accfinbsc-ac-group {
	border: 1px solid var(--fog) !important;
	border-radius: 0 !important;
	padding: 1rem 1.25rem !important;
	margin: 0 0 1rem !important;
	background: var(--white);
}
.accfinbsc-ac-group legend {
	padding: 0 0.5rem !important;
	font-family: var(--font-sans);
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: var(--cardinal-red) !important;
}
.accfinbsc-ac-course {
	display: flex; align-items: flex-start; gap: 0.85rem;
	padding: 0.7rem 0.4rem;
	border-bottom: 1px solid var(--fog);
	cursor: pointer;
	transition: background 0.18s ease;
}
.accfinbsc-ac-course:last-child { border-bottom: 0; }
.accfinbsc-ac-course:hover { background: var(--sandstone-light); }
.accfinbsc-ac-course input[type="checkbox"] {
	margin-top: 0.3rem; cursor: pointer;
	width: 16px; height: 16px; flex-shrink: 0;
	accent-color: var(--cardinal-red);
}
.accfinbsc-ac-course-body {
	display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.accfinbsc-ac-course-body strong {
	font-family: var(--font-sans);
	font-size: 0.95rem; font-weight: 600;
	color: var(--black); line-height: 1.3;
}
.accfinbsc-ac-course-body small {
	font-family: var(--font-serif);
	font-size: 12.5px; line-height: 1.4;
	color: var(--cool-grey);
}

/* Submit row + button — mirrors .accfinbsc-sp-pay-btn */
.accfinbsc-ac-actions {
	margin-top: 1.25rem;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.accfinbsc-ac-submit {
	display: inline-flex !important; align-items: center; gap: 0.6rem;
	padding: 0.85rem 1.6rem !important;
	background: var(--cardinal-red) !important; color: var(--white) !important;
	border: none !important; border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 0.06em !important; text-transform: uppercase !important;
	cursor: pointer;
	transition: all 0.3s var(--ease-out-quart) !important;
}
.accfinbsc-ac-submit:hover {
	background: var(--cardinal-red-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(140, 21, 21, 0.22);
}
.accfinbsc-ac-submit[disabled] {
	opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none;
}
.accfinbsc-ac-status {
	font-family: var(--font-sans);
	font-size: 12px; font-weight: 600;
	letter-spacing: 0.05em; color: var(--cool-grey);
}
.accfinbsc-ac-status.is-error { color: var(--cardinal-red); }

/* Progress card (top of study plan) --------------------------------- */
.accfinbsc-ac-progress-card {
	padding: 2rem 2rem !important;
}
.accfinbsc-ac-progress-summary {
	display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 1.25rem;
	padding: 1rem 0;
	border-top: 1px solid var(--fog);
	border-bottom: 1px solid var(--fog);
}
.accfinbsc-ac-progress-stat {
	display: flex; flex-direction: column; gap: 0.25rem;
	flex: 1; min-width: 120px;
}
.accfinbsc-ac-progress-stat-value {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	font-weight: 500; letter-spacing: -0.02em;
	color: var(--cardinal-red); line-height: 1.1;
}
.accfinbsc-ac-progress-stat-label {
	font-family: var(--font-sans);
	font-size: 11px; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
	color: var(--cool-grey);
}
.accfinbsc-ac-progress-bar-wrap {
	height: 6px; background: var(--fog);
	border-radius: 0 !important;
	overflow: hidden;
}
.accfinbsc-ac-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--cardinal-red), var(--cardinal-red-dark));
	border-radius: 0 !important;
	transition: width 0.55s var(--ease-out-quart);
	min-width: 0;
}

/* Semester accordions ----------------------------------------------- */
.accfinbsc-ac-sem-section {
	background: var(--white);
	border: 1px solid var(--fog);
	border-radius: 0 !important;
	box-shadow: 0 6px 14px rgba(46, 45, 41, 0.04);
	overflow: hidden;
}
.accfinbsc-ac-sem-header {
	display: flex; align-items: center; gap: 1rem;
	width: 100%;
	padding: 1rem 1.5rem !important;
	border: 0 !important;
	background: var(--off-white) !important;
	cursor: pointer; text-align: left;
	font-family: var(--font-sans);
	border-bottom: 1px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease;
}
.accfinbsc-ac-sem-header:hover { background: var(--sandstone-light) !important; }
.accfinbsc-ac-sem-section.is-open .accfinbsc-ac-sem-header {
	background: var(--white) !important;
	border-bottom-color: var(--fog);
}
.accfinbsc-ac-sem-header-title {
	font-family: var(--font-sans);
	font-size: 12px !important; font-weight: 700 !important;
	letter-spacing: 0.18em !important; text-transform: uppercase !important;
	color: var(--black) !important;
	flex: 1; min-width: 0;
}
.accfinbsc-ac-sem-arrow {
	width: 0.55rem; height: 0.55rem;
	border-right: 2px solid var(--cool-grey);
	border-bottom: 2px solid var(--cool-grey);
	transform: rotate(45deg);
	transition: transform 0.28s var(--ease-out-quart), border-color 0.2s ease;
	flex-shrink: 0;
}
.accfinbsc-ac-sem-section.is-open .accfinbsc-ac-sem-arrow {
	transform: rotate(-135deg);
	border-color: var(--cardinal-red);
}
.accfinbsc-ac-sem-content {
	max-height: 0; overflow: hidden;
	transition: max-height 0.35s ease;
	background: var(--white);
}
.accfinbsc-ac-sem-section.is-open .accfinbsc-ac-sem-content {
	max-height: 4000px;
}

/* Standalone section titles inside the Grades card */
.accfinbsc-ac-sem-title {
	margin: 1.5rem 0 0.5rem;
	font-family: var(--font-sans);
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--black);
	display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap;
}
.accfinbsc-ac-sem-title:first-of-type { margin-top: 0; }
.accfinbsc-ac-avg {
	display: inline-flex; align-items: center;
	padding: 0.2rem 0.6rem;
	background: var(--sandstone-light);
	color: var(--cardinal-red);
	font-family: var(--font-sans);
	font-size: 10px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	border-radius: 0;
}

/* Tables — mirrors .accfinbsc-sp-history-table */
.accfinbsc-ac-table {
	width: 100%; border-collapse: collapse;
	font-family: var(--font-sans); font-size: 0.95rem;
	background: var(--white);
	border-radius: 0 !important;
	overflow: hidden;
	margin: 0 0 0.5rem;
}
.accfinbsc-ac-table thead {
	background: var(--black); color: var(--white);
}
.accfinbsc-ac-table thead th {
	padding: 0.95rem 1rem !important;
	text-align: left;
	font-family: var(--font-sans);
	font-size: 10.5px !important; font-weight: 700 !important;
	letter-spacing: 0.18em !important; text-transform: uppercase !important;
	color: var(--white) !important;
	background: var(--black) !important;
}
.accfinbsc-ac-table th,
.accfinbsc-ac-table td {
	padding: 0.95rem 1rem !important;
	border-bottom: 1px solid var(--fog) !important;
	vertical-align: middle;
	color: var(--black);
}
.accfinbsc-ac-table tbody tr:last-child td { border-bottom: 0 !important; }
.accfinbsc-ac-table tbody tr:hover { background: var(--sandstone-light); }
.accfinbsc-ac-table code {
	background: var(--sandstone-light) !important;
	color: var(--cardinal-red) !important;
	padding: 0.1rem 0.45rem !important;
	border-radius: 0 !important;
	font-family: ui-monospace, Consolas, monospace !important;
	font-size: 11.5px !important; font-weight: 700;
	letter-spacing: 0.04em;
}

/* Grade cells */
.accfinbsc-ac-grade {
	font-family: var(--font-display);
	font-size: 1.05rem; font-weight: 600;
	letter-spacing: -0.005em;
}
.accfinbsc-ac-grade-pass { color: var(--palo-alto) !important; }
.accfinbsc-ac-grade-fail { color: var(--cardinal-red) !important; }

/* Status pills — mirrors .accfinbsc-sp-history-badge palette */
.accfinbsc-ac-badge {
	display: inline-flex; align-items: center;
	padding: 0.25rem 0.65rem;
	font-family: var(--font-sans);
	font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: 0.14em !important; text-transform: uppercase !important;
	border-radius: 0 !important;
	background: var(--fog); color: var(--warm-grey);
}
.accfinbsc-ac-badge-pass    { background: var(--palo-alto)    !important; color: var(--white)      !important; }
.accfinbsc-ac-badge-fail    { background: var(--cardinal-red) !important; color: var(--white)      !important; }
.accfinbsc-ac-badge-pending { background: var(--poppy)        !important; color: var(--white)      !important; }
.accfinbsc-ac-badge-none    { background: var(--fog)          !important; color: var(--warm-grey)  !important; }

/* Muted (non-enrolled) rows in the study plan */
.accfinbsc-ac-row-muted { opacity: 0.5; }
.accfinbsc-ac-row-muted:hover { opacity: 0.85; background: var(--off-white) !important; }

/* The "Course Enrollment" banner card sits flush above the progress card */
.accfinbsc-ac-enroll-banner { margin-bottom: 0 !important; }

/* Padding tweak: the two utility cards (`.accfinbsc-ac-card-locked`, the
 * tight enrollment banner, etc.) are still cards — ensure they pick up the
 * same vertical rhythm as the subscription cards on small screens. */
@media (max-width: 720px) {
	.accfinbsc-ac-card,
	.accfinbsc-ac-progress-card { padding: 1.5rem 1.25rem !important; }
	.accfinbsc-ac-progress-summary { gap: 1.25rem; }
	.accfinbsc-ac-table th,
	.accfinbsc-ac-table td { padding: 0.7rem 0.75rem !important; font-size: 0.88rem; }
	.accfinbsc-ac-sem-header { padding: 0.85rem 1rem !important; }
}

/* ====== 10c. ECLASS (`accfinbsc-eclass`) ============================
 * The plugin renders its own full-bleed page via wp_footer (since theme
 * .page-hero/.page-body are hidden in section 5). The native CSS uses a
 * navy/gold pill aesthetic. We strip it back to the same editorial
 * language as my-subscription / my-studies: white cards, sharp corners,
 * cardinal red accents, sandstone hover, theme typography.
 * ==================================================================== */

/* ----- Page wrapper -------------------------------------------------- */
.ec-page {
	background: var(--off-white) !important;
	color: var(--black) !important;
	font-family: var(--font-sans) !important;
}

/* ----- HERO --------------------------------------------------------- */
/* Strip the clip-path/blob/circle/grid noise; keep cardinal-red bg
 * (already remapped via --ec-bg in section 1) and apply theme typography.
 * The decorative pseudo-shapes are hidden so the hero reads as a clean
 * editorial banner that lives in the same family as other interior pages. */
.ec-hero {
	clip-path: none !important;
	margin-bottom: 0 !important;
	padding: clamp(5rem, 10vw, 7.5rem) clamp(1.5rem, 8vw, 7rem) clamp(4rem, 8vw, 6rem) !important;
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
}
.ec-hero--compact {
	padding: clamp(4rem, 8vw, 6rem) clamp(1.5rem, 8vw, 7rem) clamp(3rem, 6vw, 4.5rem) !important;
}
.ec-hero__grid,
.ec-hero__blob,
.ec-hero__circle,
.ec-hero__line { display: none !important; }
.ec-hero__inner {
	max-width: var(--content-width, 72rem) !important;
	margin: 0 auto !important;
}
.ec-hero__back {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: rgba(255, 255, 255, 0.75) !important;
	text-decoration: none !important;
	margin-bottom: 1.5rem !important;
}
.ec-hero__back:hover { color: var(--white) !important; }
.ec-hero__eyebrow {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.22em !important; text-transform: uppercase !important;
	color: var(--sandstone) !important;
	margin: 0 0 1.5rem !important;
}
.ec-hero__eyebrow::before {
	background: var(--sandstone) !important;
	width: 2.4rem !important; height: 1px !important;
}
.ec-hero__title {
	font-family: var(--font-display) !important;
	font-size: clamp(2.2rem, 5vw, 4rem) !important;
	font-weight: 400 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em !important;
	color: var(--white) !important;
	margin: 0 0 1.4rem !important;
}
.ec-hero__title .ec-accent {
	color: var(--sandstone) !important;
	font-weight: 400 !important;
	padding-left: 0 !important;
	display: inline !important;
}
.ec-hero__sub {
	font-family: var(--font-serif) !important;
	font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
	line-height: 1.7 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	max-width: 42rem !important;
	margin: 0 0 1.5rem !important;
}
.ec-hero__profs {
	font-family: var(--font-sans) !important;
	font-size: 0.92rem !important;
	color: rgba(255, 255, 255, 0.75) !important;
	margin: 0.25rem 0 1.5rem !important;
}
.ec-hero__profs strong {
	color: var(--white) !important;
	font-weight: 600 !important;
}
.ec-hero__actions {
	display: flex !important; gap: 0.75rem !important; flex-wrap: wrap !important;
	margin-top: 0.5rem !important;
}

/* ----- Sections ----------------------------------------------------- */
.ec-section {
	max-width: var(--content-width, 72rem) !important;
	margin: 3rem auto !important;
	padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
	position: relative; z-index: 1;
}
.ec-section--available { padding-bottom: 4rem !important; }
.ec-section__title {
	font-family: var(--font-display) !important;
	font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.015em !important;
	color: var(--black) !important;
	display: block !important;
	border-bottom: 1px solid var(--fog) !important;
	padding-bottom: 0.85rem !important;
	margin: 0 0 1.75rem !important;
	position: relative;
}
.ec-section__title::after {
	content: ""; position: absolute;
	left: 0; bottom: -1px;
	width: 3rem; height: 3px;
	background: var(--cardinal-red);
}

/* ----- Empty / flashes --------------------------------------------- */
.ec-empty {
	font-family: var(--font-serif) !important;
	font-size: 0.98rem !important; line-height: 1.6 !important;
	color: var(--cool-grey) !important;
	background: var(--white) !important;
	border: 1px dashed var(--fog) !important;
	border-radius: 0 !important;
	padding: 2rem !important;
	text-align: center !important;
}
.ec-flash {
	max-width: var(--content-width, 72rem) !important;
	margin: 1.5rem auto 0 !important;
	padding: 1rem 1.5rem !important;
	border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 0.95rem !important;
	border-left: 4px solid var(--cardinal-red) !important;
	background: var(--sandstone-light) !important;
	color: var(--black) !important;
}
.ec-flash-success {
	border-left-color: var(--palo-alto) !important;
	background: rgba(23, 94, 84, 0.08) !important;
	color: var(--palo-alto) !important;
}
.ec-flash-info {
	border-left-color: var(--cardinal-red) !important;
	background: var(--sandstone-light) !important;
	color: var(--black) !important;
}
.ec-flash-error {
	border-left-color: var(--cardinal-red-dark) !important;
	background: rgba(140, 21, 21, 0.06) !important;
	color: var(--cardinal-red-dark) !important;
}

/* ----- Course cards ------------------------------------------------- */
.ec-card-grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: 1.5rem !important;
}
.ec-card {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 4px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 1.75rem !important;
	box-shadow: 0 12px 28px rgba(46, 45, 41, 0.05) !important;
	color: var(--black) !important;
	min-height: 200px;
	transition: all 0.3s var(--ease-out-quart) !important;
}
.ec-card:hover {
	border-color: var(--cardinal-red) !important;
	border-top-color: var(--cardinal-red-dark) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 18px 36px rgba(46, 45, 41, 0.08) !important;
}
.ec-card__cover {
	opacity: 0.08 !important;
	height: 100px !important;
}
.ec-card__code {
	display: inline-block !important;
	padding: 0.25rem 0.65rem !important;
	background: var(--sandstone-light) !important;
	color: var(--cardinal-red) !important;
	font-family: ui-monospace, Consolas, monospace !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.1em !important;
	border-radius: 0 !important;
	margin: 0 0 0.85rem !important;
	width: max-content !important;
}
.ec-card__title {
	font-family: var(--font-display) !important;
	font-size: 1.2rem !important; font-weight: 500 !important;
	color: var(--black) !important;
	margin: 0 0 0.5rem !important;
	line-height: 1.25 !important;
	letter-spacing: -0.005em !important;
}
.ec-card__summary {
	font-family: var(--font-serif) !important;
	font-size: 0.94rem !important; line-height: 1.55 !important;
	color: var(--cool-grey) !important;
	margin: 0 0 0.75rem !important;
}
.ec-card__profs {
	font-family: var(--font-sans) !important;
	font-size: 0.82rem !important; font-weight: 600 !important;
	color: var(--cool-grey) !important;
	margin: 0 0 0.5rem !important;
}
.ec-card__meta {
	display: flex; flex-wrap: wrap; gap: 0.4rem 1rem !important;
	margin-top: auto; padding-top: 0.85rem !important;
	border-top: 1px solid var(--fog) !important;
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	color: var(--cool-grey) !important;
}
.ec-card--joined {
	border-left: 3px solid var(--cardinal-red) !important;
}
.ec-card__action {
	margin-top: 1rem !important; padding-top: 0.85rem !important;
	border-top: 1px solid var(--fog) !important;
}

/* ----- Tabs --------------------------------------------------------- */
.ec-tabs {
	max-width: var(--content-width, 72rem) !important;
	margin: 1.5rem auto 0 !important;
	padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
	display: flex !important; gap: 0 !important; flex-wrap: wrap !important;
	border-bottom: 1px solid var(--fog) !important;
}
.ec-tab {
	padding: 0.95rem 1.25rem !important;
	font-family: var(--font-sans) !important;
	font-size: 11.5px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: var(--cool-grey) !important;
	text-decoration: none !important;
	border-bottom: 3px solid transparent !important;
	background: transparent !important;
	transition: color 0.2s ease, border-color 0.2s ease !important;
}
.ec-tab:hover { color: var(--black) !important; }
.ec-tab.is-active {
	color: var(--cardinal-red) !important;
	border-bottom-color: var(--cardinal-red) !important;
}
.ec-tab__count {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 20px !important;
	padding: 1px 7px !important;
	border-radius: 0 !important;
	background: var(--off-white) !important;
	color: var(--cool-grey) !important;
	font-family: var(--font-sans) !important;
	font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	margin-left: 0.55rem !important;
}
.ec-tab.is-active .ec-tab__count {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
}
.ec-tabpanel {
	max-width: var(--content-width, 72rem) !important;
	margin: 1.75rem auto 4rem !important;
	padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
}

/* ----- Lists (announcements, files, resources, assignments, quizzes) */
.ec-list { display: grid !important; gap: 1.25rem !important; padding: 0 !important; margin: 0 !important; }
.ec-list__item {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-radius: 0 !important;
	padding: 1.5rem 1.75rem !important;
	box-shadow: 0 8px 22px rgba(46, 45, 41, 0.04) !important;
	color: var(--black) !important;
	list-style: none;
}
.ec-list__item.is-pinned {
	border-left: 4px solid var(--cardinal-red) !important;
}
.ec-list__title {
	font-family: var(--font-display) !important;
	font-size: 1.15rem !important; font-weight: 500 !important;
	color: var(--black) !important;
	letter-spacing: -0.005em !important;
	margin: 0 0 0.35rem !important;
	line-height: 1.25 !important;
}
.ec-list__title a {
	color: inherit !important;
	text-decoration: none !important;
}
.ec-list__title a:hover { color: var(--cardinal-red) !important; }
.ec-list__date,
.ec-list__filename {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.14em !important; text-transform: uppercase !important;
	color: var(--cool-grey) !important;
	margin: 0 0 0.7rem !important;
}
.ec-list__body {
	font-family: var(--font-serif) !important;
	font-size: 0.98rem !important; line-height: 1.65 !important;
	color: var(--black) !important;
}
.ec-list__body p { margin: 0 0 0.75rem; }
.ec-list__body p:last-child { margin-bottom: 0; }
.ec-list__meta {
	display: flex !important; flex-wrap: wrap;
	gap: 0.5rem 1rem !important;
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 600 !important;
	letter-spacing: 0.06em !important;
	color: var(--cool-grey) !important;
	margin: 0.5rem 0 0.85rem !important;
}
.ec-pin { font-size: 0.95rem; margin-right: 0.4rem; }
.ec-files .ec-list__item {
	display: flex !important; align-items: center !important;
	gap: 1.5rem !important; justify-content: space-between !important;
}

/* ----- Status badges (assignments + quizzes) ----------------------- */
.ec-badge {
	display: inline-flex; align-items: center;
	padding: 0.25rem 0.65rem !important;
	border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: 0.14em !important; text-transform: uppercase !important;
	background: var(--fog); color: var(--warm-grey);
}
.ec-badge--open,
.ec-badge--available    { background: var(--sandstone-light) !important; color: var(--cardinal-red) !important; }
.ec-badge--submitted,
.ec-badge--in_progress  { background: var(--poppy)           !important; color: var(--white)         !important; }
.ec-badge--graded,
.ec-badge--completed    { background: var(--palo-alto)       !important; color: var(--white)         !important; }
.ec-badge--closed       { background: var(--fog)             !important; color: var(--warm-grey)     !important; }

/* ----- Forms (assignment submission, quiz, resource upload, …) ----- */
.ec-card-block {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 4px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: clamp(1.5rem, 3vw, 2.25rem) !important;
	box-shadow: 0 12px 28px rgba(46, 45, 41, 0.05) !important;
	margin: 0 0 1.5rem !important;
}
.ec-prose {
	font-family: var(--font-serif) !important;
	font-size: 1rem !important; line-height: 1.7 !important;
	color: var(--black) !important;
}
.ec-prose--quote {
	background: var(--off-white) !important;
	border-left: 3px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 1rem 1.25rem !important;
	color: var(--cool-grey) !important;
	font-family: var(--font-serif) !important;
	font-size: 0.95rem !important; line-height: 1.6 !important;
}
.ec-form { display: flex; flex-direction: column; gap: 0.85rem; }
.ec-form-inline {
	display: flex; flex-wrap: wrap; gap: 0.85rem;
	align-items: flex-end;
}
.ec-label {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.14em !important; text-transform: uppercase !important;
	color: var(--cardinal-red) !important;
}
.ec-input {
	padding: 0.8rem 1rem !important;
	border: 1.5px solid var(--fog) !important;
	border-radius: 0 !important;
	background: var(--white) !important;
	font-family: var(--font-sans) !important;
	font-size: 0.95rem !important;
	color: var(--black) !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.ec-input:focus {
	outline: none !important;
	border-color: var(--cardinal-red) !important;
	box-shadow: 0 0 0 3px rgba(140, 21, 21, 0.12) !important;
}
.ec-help {
	font-family: var(--font-sans) !important;
	font-size: 12px !important;
	color: var(--cool-grey) !important;
}
.ec-warn {
	font-family: var(--font-sans) !important;
	font-size: 0.92rem !important; line-height: 1.5 !important;
	color: var(--cardinal-red-dark) !important;
	background: rgba(140, 21, 21, 0.06) !important;
	border: 1px solid rgba(140, 21, 21, 0.18) !important;
	border-left: 3px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1rem !important;
}

/* ----- Grade box (assignment & quiz result) ----------------------- */
.ec-grade-box {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
	border-radius: 0 !important;
	padding: 1.25rem 1.5rem !important;
	margin-top: 1.25rem !important;
}
.ec-grade-box--big {
	text-align: center;
	padding: 2.25rem 1.25rem !important;
	background: linear-gradient(135deg, var(--cardinal-red) 0%, var(--cardinal-red-dark) 100%) !important;
}
.ec-grade-box__label {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.18em !important; text-transform: uppercase !important;
	color: var(--sandstone) !important;
	margin: 0 0 0.5rem !important;
}
.ec-grade-box__value {
	font-family: var(--font-display) !important;
	font-size: clamp(2rem, 4vw, 2.6rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	color: var(--white) !important;
}
.ec-grade-box__sub {
	font-family: var(--font-serif) !important;
	font-size: 0.92rem !important;
	color: rgba(255, 255, 255, 0.85) !important;
	margin-top: 0.4rem;
}
.ec-grade-box__feedback {
	font-family: var(--font-serif) !important;
	font-size: 0.95rem !important; line-height: 1.55 !important;
	background: rgba(255, 255, 255, 0.1) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1rem !important;
	margin-top: 0.85rem !important;
}

/* ----- Buttons ---------------------------------------------------- */
.ec-btn {
	display: inline-flex !important; align-items: center; justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.6rem !important;
	border: 0 !important; border-radius: 0 !important;
	font-family: var(--font-sans) !important;
	font-size: 13px !important; font-weight: 600 !important;
	letter-spacing: 0.06em !important; text-transform: uppercase !important;
	cursor: pointer;
	text-decoration: none !important;
	transition: all 0.3s var(--ease-out-quart) !important;
}
.ec-btn-sm {
	padding: 0.6rem 1.2rem !important;
	font-size: 11.5px !important;
	letter-spacing: 0.08em !important;
}
.ec-btn-gold {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
	box-shadow: 0 8px 18px rgba(140, 21, 21, 0.18) !important;
}
.ec-btn-gold:hover {
	background: var(--cardinal-red-dark) !important;
	transform: translateY(-1px);
	box-shadow: 0 12px 24px rgba(140, 21, 21, 0.24) !important;
}
.ec-btn-ghost {
	background: transparent !important;
	color: var(--black) !important;
	border: 2px solid var(--black) !important;
	padding: calc(0.85rem - 2px) calc(1.6rem - 2px) !important;
}
.ec-btn-ghost.ec-btn-sm {
	padding: calc(0.6rem - 2px) calc(1.2rem - 2px) !important;
}
.ec-btn-ghost:hover {
	background: var(--black) !important;
	border-color: var(--black) !important;
	color: var(--white) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 22px rgba(46, 45, 41, 0.22);
}
/* Inside the dark cardinal hero, the ghost button needs to read against red. */
.ec-hero .ec-btn-ghost {
	color: var(--white) !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
	background: transparent !important;
}
.ec-hero .ec-btn-ghost:hover {
	background: var(--white) !important;
	border-color: var(--white) !important;
	color: var(--cardinal-red) !important;
}
.ec-hero .ec-btn-gold {
	background: var(--white) !important;
	color: var(--cardinal-red) !important;
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18) !important;
}
.ec-hero .ec-btn-gold:hover {
	background: var(--sandstone) !important;
	color: var(--cardinal-red-dark) !important;
}

/* ----- Quiz timer + question cards + review ------------------------- */
.ec-quiz-timer {
	background: var(--cardinal-red) !important;
	color: var(--white) !important;
	border-radius: 0 !important;
	padding: 0.85rem 1.25rem !important;
	box-shadow: 0 8px 20px rgba(140, 21, 21, 0.22) !important;
	font-family: ui-monospace, Consolas, monospace !important;
}
.ec-quiz-timer__label {
	font-family: var(--font-sans) !important;
	font-size: 10px !important; font-weight: 700 !important;
	letter-spacing: 0.18em !important; text-transform: uppercase !important;
	color: var(--sandstone) !important;
}
.ec-quiz-timer__value {
	font-size: 1.05rem !important; font-weight: 700;
	color: var(--white) !important;
}
.ec-quiz-timer.is-warning .ec-quiz-timer__value { color: var(--sandstone) !important; }
.ec-quiz-timer.is-danger {
	background: var(--cardinal-red-dark) !important;
}
.ec-quiz-q {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-radius: 0 !important;
	padding: 1.25rem 1.5rem !important;
	margin: 0 0 1.25rem !important;
	box-shadow: 0 6px 14px rgba(46, 45, 41, 0.04) !important;
}
.ec-quiz-q__title {
	font-family: var(--font-display) !important;
	font-size: 1.05rem !important; font-weight: 500 !important;
	color: var(--black) !important;
	margin: 0 0 0.85rem !important;
	letter-spacing: -0.005em !important;
}
.ec-quiz-q__opt {
	display: flex !important; align-items: flex-start; gap: 0.85rem;
	padding: 0.7rem 0.85rem !important;
	border-radius: 0 !important;
	margin-bottom: 0.35rem !important;
	cursor: pointer;
	transition: background 0.18s ease !important;
	font-family: var(--font-sans) !important;
	font-size: 0.94rem !important;
	color: var(--black) !important;
}
.ec-quiz-q__opt:hover { background: var(--sandstone-light) !important; }
.ec-quiz-q__opt input[type="radio"],
.ec-quiz-q__opt input[type="checkbox"] {
	margin-top: 0.25rem;
	accent-color: var(--cardinal-red);
}

.ec-quiz-review { padding-left: 0 !important; list-style: none; }
.ec-quiz-review__q {
	background: var(--white);
	border: 1px solid var(--fog) !important;
	border-radius: 0 !important;
	border-left: 4px solid transparent !important;
	padding: 0.95rem 1.15rem !important;
	margin-bottom: 0.85rem !important;
}
.ec-quiz-review__q--ok {
	border-left-color: var(--palo-alto) !important;
	background: rgba(23, 94, 84, 0.06) !important;
}
.ec-quiz-review__q--bad {
	border-left-color: var(--cardinal-red) !important;
	background: rgba(140, 21, 21, 0.05) !important;
}
.ec-quiz-review__title {
	font-family: var(--font-sans) !important;
	font-size: 0.95rem !important; font-weight: 700 !important;
	color: var(--black) !important;
	margin: 0 0 0.4rem !important;
}
.ec-quiz-review__opts {
	font-family: var(--font-sans);
	font-size: 0.9rem;
}
.ec-quiz-review__opts .is-correct { color: var(--palo-alto) !important; font-weight: 700; }
.ec-quiz-review__opts .is-wrong   { color: var(--cardinal-red) !important; text-decoration: line-through; }

/* ----- Stats (professor / dashboards) ----------------------------- */
.ec-stats-row {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 1rem;
	margin: 0 0 1.5rem;
}
.ec-stat-card {
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 3px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	padding: 1.25rem 1.5rem !important;
	box-shadow: 0 8px 18px rgba(46, 45, 41, 0.04) !important;
}
.ec-stat-num {
	font-family: var(--font-display) !important;
	font-size: clamp(1.6rem, 2.8vw, 2.1rem) !important;
	font-weight: 500 !important;
	letter-spacing: -0.02em !important;
	color: var(--cardinal-red) !important;
	line-height: 1.1 !important;
}
.ec-stat-label {
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: var(--cool-grey) !important;
	margin-top: 0.35rem;
}

/* ----- Mobile tweaks ---------------------------------------------- */
@media (max-width: 720px) {
	.ec-hero { padding: 4rem 1.25rem 3rem !important; }
	.ec-card-grid { grid-template-columns: 1fr !important; }
	.ec-tabs { gap: 0; overflow-x: auto; }
	.ec-tab { padding: 0.85rem 0.95rem !important; font-size: 10.5px !important; }
	.ec-card,
	.ec-list__item,
	.ec-card-block { padding: 1.25rem 1.1rem !important; }
	.ec-files .ec-list__item { flex-direction: column !important; align-items: flex-start !important; }
}

/* =========================================================================
   ====== 10c.LMS — ECLASS LMS ARCHITECTURE UPGRADE
   -------------------------------------------------------------------------
   Substantial structural & visual upgrade that reshapes the eclass plugin
   from a brochure-card grid into a proper Learning Management System.
   Built on top of the editorial styles in section 10c above.

   What changes:
     • The auto-injected sidebar (`.ec-page__body-host > .sp-nav` via
       class-sidebar-injector.php) gets an editorial rebuild with FA icons,
       an eyebrow label and cardinal-red active accents.
     • Course-list page gets a clear visual hierarchy between "My classes"
       (featured rich cards) and "Available e-classes" (compact catalog).
     • Course-single page tabs become STICKY with a soft drop shadow so
       students always see the tab bar while scrolling long lists.
     • Each tab panel gets a module-style eyebrow + structured spacing.
     • Every list item becomes an "activity card" with a per-panel status
       icon (announcement, file, link, assignment, quiz) and a clear
       call-to-action on the right.
     • Course meta strip (code · ECTS · profs) renders as a sticky bar at
       the top of the body when the user scrolls past the hero.
   ========================================================================= */

/* ----- Body host & sidebar layout ---------------------------------- */
.ec-page__body-host {
	max-width: var(--content-width, 72rem) !important;
	margin: 2.5rem auto 0 !important;
	padding: 0 clamp(1.5rem, 4vw, 2rem) !important;
	grid-template-columns: 264px 1fr !important;
	gap: 2.5rem !important;
}
.ec-page__body { min-width: 0 !important; }

/* Sidebar shell */
.ec-page__body-host > .sp-nav {
	position: sticky !important; top: 6rem !important;
	background: var(--white) !important;
	border: 1px solid var(--fog) !important;
	border-top: 4px solid var(--cardinal-red) !important;
	border-radius: 0 !important;
	box-shadow: 0 12px 28px rgba(46, 45, 41, 0.06) !important;
	padding: 1.25rem 0.65rem 1rem !important;
	display: flex !important; flex-direction: column !important;
}
/* "Quick access" section eyebrow at the top of the sidebar */
.ec-page__body-host > .sp-nav::before {
	content: "Quick Access";
	display: block;
	padding: 0 0.85rem 0.85rem;
	font-family: var(--font-sans);
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--cardinal-red);
	border-bottom: 1px solid var(--fog);
	margin-bottom: 0.55rem;
}
.ec-page__body-host .sp-nav__item {
	display: flex !important; align-items: center !important; gap: 0.75rem !important;
	padding: 0.85rem 0.95rem !important;
	font-family: var(--font-sans) !important;
	font-size: 11px !important; font-weight: 700 !important;
	letter-spacing: 0.16em !important; text-transform: uppercase !important;
	color: var(--cool-grey) !important;
	text-decoration: none !important;
	background: transparent !important;
	border-radius: 0 !important;
	border-left: 3px solid transparent !important;
	transition: background 0.18s ease, color 0.18s ease, border-left-color 0.18s ease, padding-left 0.22s var(--ease-out-quart) !important;
}
.ec-page__body-host .sp-nav__item:hover {
	background: var(--off-white) !important;
	color: var(--black) !important;
	border-left-color: var(--cardinal-red) !important;
	padding-left: 1.15rem !important;
}
.ec-page__body-host .sp-nav__item--active {
	background: var(--off-white) !important;
	color: var(--cardinal-red) !important;
	border-left-color: var(--cardinal-red) !important;
}
/* Sidebar item icons via FontAwesome 6 (loaded site-wide). We match by
 * href so the markup stays untouched. */
.ec-page__body-host .sp-nav__item::before {
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 900;
	font-size: 13px;
	width: 18px;
	display: inline-flex; align-items: center; justify-content: center;
	color: inherit;
	flex-shrink: 0;
}
.ec-page__body-host .sp-nav__item[href*="my-subscription"]::before { content: "\f543"; }   /* receipt */
.ec-page__body-host .sp-nav__item[href*="my-studies"]::before      { content: "\f19d"; }   /* graduation-cap */
.ec-page__body-host .sp-nav__item[href*="eclass"]::before          { content: "\f51c"; }   /* chalkboard-user */
.ec-page__body-host .sp-nav__item--logout::before                  { content: "\f2f5"; }   /* arrow-right-from-bracket */

.ec-page__body-host .sp-nav__divider {
	background: var(--fog) !important;
	margin: 0.85rem 0.65rem !important;
}
.ec-page__body-host .sp-nav__item--logout {
	color: var(--cool-grey) !important;
}
.ec-page__body-host .sp-nav__item--logout:hover {
	color: var(--cardinal-red) !important;
}

/* ----- Course list (/eclass/) — "My classes" featured layout ------- */
.ec-page__body > .ec-section:first-of-type {
	margin-top: 0 !important;
	padding-top: 0 !important;
}
/* Distinguish My classes (joined) from Available */
.ec-card-grid:has(> .ec-card--joined) {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
	gap: 1.75rem !important;
}
/* Featured "joined" card — bigger, richer, with subtle progress placeholder */
.ec-card.ec-card--joined {
	border-left: 0 !important;
	border-top: 4px solid var(--cardinal-red) !important;
	min-height: 240px !important;
	padding: 1.85rem 1.85rem 1.65rem !important;
	position: relative;
	overflow: hidden;
}
.ec-card.ec-card--joined .ec-card__cover {
	height: 110px !important;
	opacity: 0.12 !important;
	filter: saturate(1.1);
}
.ec-card.ec-card--joined .ec-card__title {
	font-size: 1.3rem !important;
	margin-top: 0.15rem !important;
}
/* "ENROLLED" status pill — pure CSS, sits at the top-right of the card */
.ec-card.ec-card--joined::before {
	content: "Enrolled";
	position: absolute;
	top: 14px; right: 14px;
	z-index: 2;
	padding: 0.2rem 0.55rem;
	background: var(--cardinal-red);
	color: var(--white);
	font-family: var(--font-sans);
	font-size: 9.5px; font-weight: 700;
	letter-spacing: 0.18em; text-transform: uppercase;
}
/* Continue affordance bottom-right (CSS only — visually hints clickability) */
.ec-card.ec-card--joined::after {
	content: "Open class \2192";
	display: inline-block;
	margin-top: 1rem;
	font-family: var(--font-sans);
	font-size: 12px; font-weight: 700;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--cardinal-red);
	transition: transform 0.25s var(--ease-out-quart), color 0.2s ease;
}
.ec-card.ec-card--joined:hover::after {
	color: var(--cardinal-red-dark);
	transform: translateX(4px);
}

/* Available section — compact catalog look */
.ec-section--available .ec-card-grid {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
	gap: 1.25rem !important;
}
.ec-section--available .ec-card {
	border-top: 1px solid var(--fog) !important;
	border-top-width: 1px !important;
	padding: 1.5rem 1.5rem 1.4rem !important;
	min-height: 180px !important;
	box-shadow: 0 6px 16px rgba(46, 45, 41, 0.04) !important;
}
.ec-section--available .ec-card:hover {
	border-top: 4px solid var(--cardinal-red) !important;
	margin-top: -3px !important;
}
.ec-section--available .ec-card .ec-card__title { font-size: 1.05rem !important; }

/* ----- Course single — sticky tabs with scroll shadow -------------- */
.ec-page__body > .ec-tabs {
	position: sticky !important;
	top: 0 !important;
	z-index: 50 !important;
	background: var(--off-white) !important;
	margin: 0 0 0 !important;
	padding: 0.5rem 0 0 !important;
	max-width: none !important;
	border-bottom: 1px solid var(--fog) !important;
}
/* Soft shadow that bleeds out from under the sticky bar — gives the
 * "lifted while scrolling" feel without needing JS. */
.ec-page__body > .ec-tabs::after {
	content: "";
	position: absolute;
	left: 0; right: 0; top: 100%;
	height: 14px;
	background: linear-gradient(180deg, rgba(46, 45, 41, 0.08), transparent);
	pointer-events: none;
}

/* Module-style eyebrow on top of each tab panel — uses data-panel attr.
 * Provides architectural rhythm: every panel feels like a discrete module
 * in an LMS course room. */
.ec-page__body > .ec-tabpanel {
	padding-top: 1.75rem !important;
}
.ec-page__body > .ec-tabpanel::before {
	display: block;
	margin: 0 0 1.25rem;
	font-family: var(--font-sans);
	font-size: 10.5px; font-weight: 700;
	letter-spacing: 0.22em; text-transform: uppercase;
	color: var(--cardinal-red);
}
.ec-page__body > .ec-tabpanel[data-panel="announcements"]::before { content: "Course Module \B7 Announcements"; }
.ec-page__body > .ec-tabpanel[data-panel="files"]::before         { content: "Course Module \B7 Files & Notes"; }
.ec-page__body > .ec-tabpanel[data-panel="resources"]::before     { content: "Course Module \B7 External Resources"; }
.ec-page__body > .ec-tabpanel[data-panel="assignments"]::before   { content: "Course Module \B7 Assignments"; }
.ec-page__body > .ec-tabpanel[data-panel="quizzes"]::before       { content: "Course Module \B7 Quizzes"; }

/* ----- LMS activity cards (replace flat list rows) ----------------- */
.ec-list { gap: 0.85rem !important; }
.ec-list__item {
	display: grid !important;
	grid-template-columns: 56px 1fr auto !important;
	column-gap: 1.5rem !important;
	row-gap: 0.4rem !important;
	align-items: center !important;
	padding: 1.35rem 1.5rem !important;
	border-top: 3px solid transparent !important;
	transition: border-top-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease !important;
}
.ec-list__item:hover {
	border-top-color: var(--cardinal-red) !important;
	transform: translateY(-1px);
	box-shadow: 0 14px 30px rgba(46, 45, 41, 0.08) !important;
}

/* Status icon column — rendered via ::before on the LI. The icon glyph
 * is set per panel with the [data-panel="…"] selector below. */
.ec-list__item::before {
	grid-column: 1; grid-row: 1 / span 4;
	content: "";
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--sandstone-light);
	color: var(--cardinal-red);
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 900; font-size: 18px;
	border-radius: 0;
	transition: background 0.22s ease, color 0.22s ease;
}
.ec-list__item:hover::before {
	background: var(--cardinal-red);
	color: var(--white);
}
/* Per-panel icon glyph */
.ec-tabpanel[data-panel="announcements"] .ec-list__item::before { content: "\f0a1"; }   /* bullhorn */
.ec-tabpanel[data-panel="files"] .ec-list__item::before         { content: "\f15b"; }   /* file */
.ec-tabpanel[data-panel="resources"] .ec-list__item::before     { content: "\f0c1"; }   /* link */
.ec-tabpanel[data-panel="assignments"] .ec-list__item::before   { content: "\f15c"; }   /* file-lines (assignment) */
.ec-tabpanel[data-panel="quizzes"] .ec-list__item::before       { content: "\f059"; }   /* circle-question */

/* Pinned announcements still render their pin (📌) but in a quieter spot */
.ec-list__item.is-pinned {
	border-top-color: var(--cardinal-red-dark) !important;
	background: linear-gradient(180deg, rgba(140, 21, 21, 0.025) 0%, var(--white) 38%) !important;
}
.ec-list__item.is-pinned::before {
	background: var(--cardinal-red-dark) !important;
	color: var(--white) !important;
}
.ec-pin {
	display: inline-flex; align-items: center;
	margin-right: 0.5rem;
	font-size: 0.85rem;
}

/* The text body sits in column 2; title/date/meta/body are stacked. */
.ec-list__item > * { grid-column: 2; }
/* The action button (last child <a class="ec-btn">) goes to column 3. */
.ec-list__item > .ec-btn,
.ec-list__item > a.ec-btn {
	grid-column: 3; grid-row: 1 / span 4;
	align-self: center;
	white-space: nowrap;
}
/* `.ec-files` items keep the same flex feel but inherit the new grid. */
.ec-files .ec-list__item {
	display: grid !important;
}
.ec-files .ec-list__item > div { grid-column: 2; min-width: 0; }
.ec-files .ec-list__item > .ec-btn { grid-column: 3; }
.ec-files .ec-list__filename {
	font-family: ui-monospace, Consolas, monospace !important;
	font-size: 11.5px !important;
	letter-spacing: 0 !important; text-transform: none !important;
	background: var(--off-white);
	color: var(--cool-grey) !important;
	padding: 0.15rem 0.5rem;
	display: inline-block;
}

/* Title alignment fixes for activity cards */
.ec-list__item .ec-list__title { margin: 0 0 0.2rem !important; }
.ec-list__item .ec-list__date,
.ec-list__item .ec-list__filename { margin: 0 0 0.5rem !important; }
.ec-list__item .ec-list__meta    { margin: 0 0 0.55rem !important; }
.ec-list__item .ec-list__body p:first-child { margin-top: 0; }

/* ----- Hero: course meta strip (code · ECTS · profs) -------------- */
/* Tightens the hero on course-single pages so the user gets to the tabs
 * faster — feels closer to a "course room" landing. */
.ec-page__body > .ec-flash:first-child { margin-top: 1rem !important; }

/* ----- Empty states: add a friendly icon -------------------------- */
.ec-empty {
	display: flex !important; flex-direction: column;
	align-items: center; justify-content: center;
	gap: 0.85rem !important;
	padding: 2.5rem 2rem !important;
}
.ec-empty::before {
	content: "\f5a2"; /* mug-saucer / "nothing here" feel */
	font-family: "Font Awesome 6 Free", "FontAwesome";
	font-weight: 900;
	font-size: 1.85rem;
	color: var(--cool-grey);
	opacity: 0.55;
}
.ec-tabpanel[data-panel="announcements"] .ec-empty::before { content: "\f0a1"; }
.ec-tabpanel[data-panel="files"] .ec-empty::before         { content: "\f15b"; }
.ec-tabpanel[data-panel="resources"] .ec-empty::before     { content: "\f0c1"; }
.ec-tabpanel[data-panel="assignments"] .ec-empty::before   { content: "\f15c"; }
.ec-tabpanel[data-panel="quizzes"] .ec-empty::before       { content: "\f059"; }

/* ----- Mobile fallback for the LMS layout ------------------------- */
@media (max-width: 880px) {
	.ec-page__body-host {
		grid-template-columns: 1fr !important;
		gap: 1.5rem !important;
		margin-top: 1.75rem !important;
	}
	.ec-page__body-host > .sp-nav {
		position: static !important;
		flex-direction: row !important; flex-wrap: wrap !important;
		padding: 0.65rem !important;
	}
	.ec-page__body-host > .sp-nav::before {
		flex-basis: 100%; padding: 0 0.5rem 0.45rem; margin: 0 0 0.45rem;
	}
	.ec-page__body-host .sp-nav__item {
		flex: 1 0 auto;
		border-left: 0 !important;
		border-bottom: 3px solid transparent !important;
		padding: 0.65rem 0.85rem !important;
	}
	.ec-page__body-host .sp-nav__item:hover {
		padding-left: 0.85rem !important;
		border-left: 0 !important;
		border-bottom-color: var(--cardinal-red) !important;
	}
	.ec-page__body-host .sp-nav__item--active {
		border-left: 0 !important;
		border-bottom-color: var(--cardinal-red) !important;
	}
	.ec-page__body-host .sp-nav__divider {
		flex-basis: 100%; height: 1px !important; margin: 0.35rem 0 !important;
	}
}
@media (max-width: 720px) {
	.ec-list__item {
		grid-template-columns: 44px 1fr !important;
		column-gap: 1rem !important;
		padding: 1.1rem 1.15rem !important;
	}
	.ec-list__item::before {
		width: 40px; height: 40px; font-size: 15px;
		grid-row: 1 / span 1;
	}
	.ec-list__item > .ec-btn,
	.ec-list__item > a.ec-btn,
	.ec-files .ec-list__item > .ec-btn {
		grid-column: 1 / -1;
		grid-row: auto;
		justify-self: stretch;
		margin-top: 0.5rem;
	}
}


/* ====== 10d. ECLASS HERO — keep theme page-hero hidden on eclass ===== */
/* Eclass already renders its own hero, so theme .page-hero stays hidden
 * (already handled by the existing rule in section 5).                    */


/* =========================================================================
   ====== 11. MOBILE NAV — login/logout & user menu consistency ============
   Desktop: Student Login is an outlined button next to the Apply CTA; the
   logged-in user menu is an absolute-positioned dropdown anchored right.
   Mobile (≤1024px): the whole primary nav collapses into a stacked
   accordion. Without these overrides, the login button keeps its cramped
   desktop pill padding inside the stack, and the user-menu panel escapes
   the stack (absolute-positioned, 360px wide) — both inconsistent with the
   rest of the open-nav items. This section makes them behave like every
   other row in the mobile accordion.
   ========================================================================= */
@media (max-width: 1024px) {

  /* Student Login button — stretch full-width inside the open mobile nav,
     same rhythm as a nav-link row, but retain its outlined identity. */
  .masthead .nav.is-open .accfinbsc-sp-menu-item {
    padding: 0.6rem 0;
  }
  .masthead .nav.is-open .accfinbsc-sp-menu-item .accfinbsc-sp-btn {
    display: flex !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 0.95rem 1rem !important;
    font-size: 13px !important;
    letter-spacing: 0.06em !important;
  }

  /* Logged-in user-menu trigger — flatten into a stacked accordion row.
     Strip the pill border; use the same baseline padding as nav-link rows. */
  .masthead .nav.is-open .uom-user-menu {
    width: 100%;
  }
  .masthead .nav.is-open .uom-user-trigger {
    width: 100%;
    justify-content: flex-start;
    border: none !important;
    background: transparent !important;
    padding: 1rem 0.25rem;
    gap: 0.85rem;
    box-shadow: none !important;
  }
  /* Show the hidden name/role text inside the open accordion (desktop
     collapse rule hides it above 1024 for the narrow icon-only variant). */
  .masthead .nav.is-open .uom-user-text {
    display: flex !important;
  }

  /* Dropdown panel — convert from absolute pop-over to inline disclosure.
     Let the user-menu.js .is-open click-state drive reveal/hide exactly
     the same way as on desktop, just rendered inline. */
  .masthead .nav.is-open .uom-user-panel {
    position: static !important;
    top: auto; right: auto;
    min-width: 0;
    max-width: none;
    width: 100%;
    box-shadow: none !important;
    border: none;
    border-top: 1px solid var(--fog);
    transform: none !important;
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s var(--ease-out-quart),
                opacity 0.25s var(--ease-out-quart);
  }
  .masthead .nav.is-open .uom-user-menu.is-open .uom-user-panel {
    opacity: 1;
    pointer-events: auto;
    max-height: 720px; /* generous — collapses to content */
  }
  .masthead .nav.is-open .uom-user-panel-head {
    padding: 1rem 0.35rem 0.75rem;
    background: transparent;
  }
  .masthead .nav.is-open .uom-user-panel-list {
    padding: 0.25rem 0 0.5rem;
  }
  .masthead .nav.is-open .uom-user-link {
    padding: 0.85rem 0.35rem;
    grid-template-columns: 32px 1fr 12px;
    gap: 0.85rem;
  }
  .masthead .nav.is-open .uom-user-link-icon {
    width: 32px; height: 32px;
  }
}