a { color: #4f9134; }

.sponsor-name, .color-orange { color:#c0d32c; }


ul.main-menu { list-style:none; top:30px; position:relative;}
ul.main-menu li { padding-left:15px; padding-right:15px;}
ul.main-menu li a { text-decoration:none; color:#666; font-family: 'Source Sans Pro', sans-serif; font-size:16px;}
ul.main-menu li a:hover { color:#c0d32c;}
/* Task #934 (revision 4, points 436/437): `.navigation .width-navigation .navbar-nav`
   is the PUBLIC eduma header menu, not portal chrome. custom.css is loaded on the
   public shell for Login/Register only (header_view.php $is_auth_page), so this lime
   override repainted Courses / Laws & Regulations / Other / Español / Punjabi
   #c0d32c on exactly those two pages while every other public page kept them white.
   The public menu now keeps the theme's own colour everywhere; the remaining
   selectors are untouched. */
.thim-course-search-overlay .search-toggle, .widget_shopping_cart .minicart_hover .cart-items-number, .menu-right .search-form:after { color:#c0d32c !important;}


.nicdark_navigation_6 { margin-top:33px; margin-bottom:30px; }
.nicdark_top_28 { top: 28px; }

.nicdark_bg_green { background-color:#c0d32c;}
.nicdark_bg_red { background-color:#96bd61; }

/* 8.2 navigation 6 */
.nicdark_navigation_6 { margin-left: 70px;}
.nicdark_navigation_6 > ul { list-style: none; margin: 0px; padding: 0px; }
.nicdark_navigation_6 > ul > li { display: inline-block; }
.nicdark_navigation_6 > ul > li:after { content: "|"; display: inline-block; margin: 0px 20px; color: #f1f1f1; }
.nicdark_navigation_6 > ul > li:last-child:after { content: ""; margin: 0px; }
.nicdark_navigation_6 li a { color: #727475; font-size: 16px; font-family: 'Montserrat'; }
.nicdark_navigation_6 li a:hover { color: #c0d32c;}

.nicdark_navigation_6 > ul li:hover > ul.nicdark_sub_menu { display: block; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu { position: absolute; margin: 0px; padding: 0px; list-style: none; display: none; margin-left: -20px; padding-top: 53px; width: 170px; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu > li { padding: 10px 20px; border-bottom: 1px solid #f1f1f1; text-align: left; background-color: #fff; position: relative; box-shadow: 0px 2px 5px #f1f1f1; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu > li:hover { background-color: #f9f9f9; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu > li:last-child { border-bottom: 0px solid #000; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu li a { color: #727475; font-size: 14px; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu li a:hover { color:#c0d32c; }
.nicdark_navigation_6 > ul li > ul.nicdark_sub_menu li > ul.nicdark_sub_menu { margin-left: 150px; top: 0; padding-top: 0; padding-left: 20px; }
/*responsive*/
.nicdark_navigation_6_sidebar > ul { list-style: none; margin: 0px; padding: 0px; }
.nicdark_navigation_6_sidebar > ul > li { display: inline-block; }
.nicdark_navigation_6_sidebar li a { color: #fff; font-size: 16px; font-family: 'Montserrat'; }
.nicdark_navigation_6_sidebar li > a { padding: 10px 0px; display: inline-block; font-size: 24px; text-transform: lowercase; }
.nicdark_navigation_6_sidebar > ul li > ul.nicdark_sub_menu { margin: 0px; padding: 0px; list-style: none; }
.nicdark_navigation_6_sidebar > ul li > ul.nicdark_sub_menu > li { padding: 10px 20px; text-align: left; }
.nicdark_navigation_6_sidebar > ul li > ul.nicdark_sub_menu li a { color: #fff; font-size: 14px; }
.nicdark_navigation_6_sidebar > ul li > ul.nicdark_sub_menu li > ul.nicdark_sub_menu {  }
/*top header*/
.nicdark_navigation_top_header_3 > ul { list-style: none; margin: 0px; padding: 0px; }
.nicdark_navigation_top_header_3 > ul > li { display: inline-block; }
.nicdark_navigation_top_header_3> ul > li:after { content: "|"; display: inline-block; margin: 0px 15px; font-size: 13px; color:#b59974; }
.nicdark_navigation_top_header_3 > ul > li:last-child:after { content: ""; margin: 0px; }
.nicdark_navigation_top_header_3 li a { font-size: 13px; }
.nicdark_navigation_top_header_3 > ul li:hover > ul.nicdark_sub_menu { display: block; }
.nicdark_navigation_top_header_3 > ul li > ul.nicdark_sub_menu { padding: 10px 0px 0px 15px; position: absolute; margin: 0px; list-style: none; display: none; z-index: 9; }
.nicdark_navigation_top_header_3 > ul li > ul.nicdark_sub_menu > li { padding: 7px 15px; font-size: 13px; border-bottom: 1px solid #595959; background-color: #444444; }
.nicdark_navigation_top_header_3 > ul li > ul.nicdark_sub_menu > li:last-child { border-bottom: 0px solid #000; }



/************************************ COURSES ********************************************/

/* Task #934: `display` here was `inline-block !important`. That outranked BOTH
   `.course-next-locked { display:none !important }` and the inline `display:none`
   that jQuery .hide() writes, so the wrong-answer branch
   (`$('#next_section, #next_section_page').hide()`) never actually hid anything -
   the Next button stayed visible and clickable after a failed quiz. Verified in
   the browser: computed display stayed `inline-block` after .hide(). */
a.course-navigation-arrow { display:inline-block; margin-bottom:0; padding:10px 14px; font-size:20px; line-height:24px; background-color:#cf7d4d; color:#FFF; }
a.course-navigation-arrow:hover { background-color:#427bbe; }

h1,h2,h3,h4,h5,h6{ font-family: var(--sj-font-head, 'Montserrat', sans-serif); }
body, p,a,input,label{ font-family: var(--sj-font-body, 'Varela Round', sans-serif); }

p { font-size:16px; line-height: 24px; color:#525252; } /* was #666 (5.74:1) -> 7.81:1 on #fff, 7.17:1 on #f5f5f5 (G17) */
h1,h2,h3,h4,h5,h6, p strong { color:#333;}



/* Task #934: the player used its own #f0f0f0 grey, which met the shell's
   --sj-canvas in a visible seam above and below the content card. One
   background token across every portal page instead. */
.course-wrapper { background: var(--sj-canvas); padding-top:20px; padding-bottom:20px;}
.course-content { background:#FFF; padding:20px; border:1px solid var(--sj-line); overflow-x: hidden; max-width: 100%; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word;}
.course-title { margin-top:8px;}

.course-sidebar { background:#FFF; padding:0px; border:1px solid var(--sj-line); /*margin-right:10px;*/}
.course-sidebar ul { list-style:none; margin:0; padding:0; }
.course-sidebar ul li { padding:4px 20px 4px 30px; color:#CCC; position:relative; }
.course-sidebar ul li:hover { background-color:#eefce8; }
.course-sidebar ul li.active { color:#666 !important; }
/* Task #934: the tick was pinned `top: 5px`, a fixed offset from the top of the
   <li>. That <li> is a 44px-min flex row with `align-items: center` and grows to
   68px when the section name wraps, so on every wrapped item the tick floated up
   beside the first line while the text stayed centred. Centre the tick too, and
   drop the `float` - it does nothing on an absolutely positioned box. */
.course-sidebar ul li.done:before { content: "\e013"; font-family: 'Glyphicons Halflings'; font-size: 12px; position: absolute; color: #95cb9d; top: 50%; transform: translateY(-50%); left: 12px; line-height: 1; }
.course-sidebar ul li.failed:before { content: "\e014"; font-family: 'Glyphicons Halflings'; font-size: 12px; position: absolute;  color: #ef9da2; top: 5px; left:10px; float:left; }
.course-sidebar ul li a { color: #666 !important;}
.course-sidebar ul li a:hover { text-decoration: none;}

.course-sidebar ol { list-style:none; margin:0; padding:0; }
.course-sidebar ol li { padding:4px 20px 4px 30px; }
.course-sidebar ol li:hover { background-color:#eefce8; }
.course-sidebar ol li:hover:before { content: "\e080"; font-family: 'Glyphicons Halflings'; font-size: 16px; position: relative;  color: #c0d32c; top: 0px; float:right; }
.course-sidebar ol li a { display:block; text-decoration:none; color:inherit; }

.course-sidebar h2 { background-color:#427bbe; color:#FFF; font-size:16px; padding:5px 10px; }


/*******************************/
.course-content ul li { font-family: 'Varela Round', sans-serif; font-size: 16px; line-height: 24px; color: #575757;} /* Task #721 AAA portal pass: #666 on #fff was 5.74:1 -> #575757 = 7.23:1 */
.course-content img { max-width: 100%; height: auto; }
.course-content iframe { max-width: 100%; }
.course-content .table-responsive { overflow-x: auto; max-width: 100%; }
/* Task #934: lesson bodies are authored as LAYOUT tables (one row, two cells,
   no <th> anywhere on the site) carrying a hard `width: 945px` / width="...".
   Constrain them at every width so the prose can never push the content column
   sideways; the phone rules below then stack the cells outright. */
.course-content table.course-content-table {
	max-width: 100% !important;
	table-layout: fixed;
}
.course-content table.course-content-table td {
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.course-wrapper > .col-md-2, .course-wrapper > .col-md-3, .course-wrapper > .col-md-6, .course-wrapper > .col-md-7, .course-wrapper > .col-md-8, .course-wrapper > .col-md-9 { float: left; }

/* Responsive slide scaling — slides are fixed 960x540, scale to fit container */
.sjce-slide-wrapper { width: 100%; max-width: 960px; margin: 0 auto; overflow: hidden; position: relative; }
.sjce-slide-wrapper .sjce-slide { transform-origin: top left; }
/* Hide decorative footer bar at bottom of slides (baked into background image) */
.sjce-slide .pf { clip-path: inset(0 0 18px 0); }



/****** footer *******************/

/**** course alerts ***/
.alert.alert-danger { color: #78302f; } /* Task #721 AAA portal pass: Bootstrap default #a94442 on #f2dede was 4.53:1 (passes AA, fails AAA) -> #78302f = 7.20:1 */
.alert-p-info { background-color: #2c581e !important; color: #fff !important; border-radius: 0 !important; height: 81px; }
.alert-p-warning { background-color: #8f3f4b !important; color: #fff !important; border-radius: 0 !important; height: auto; line-height: 1.4; min-height: 81px; padding: 16px; white-space: normal; }
.alert-p-danger { background-color: #c44141 !important; color: #fff !important; border-radius: 0 !important; height:81px; }
.alert-p-info::after, .alert-p-warning::after, .alert-p-danger::after {
    content: '';
    background: url("/images/i.png");
    background-position: center center;
    background-size: cover;
    height: 81px;
    width: 107px;
    position:absolute;
    right: 90px;
		top:0;
}

/* Course-review shell: the player must be usable independently of the public site.
   Task #934: was `background-color: #f0f0f0; margin-bottom: 100px` — the grey is
   now the shared canvas (set with the design tokens further down) and the 100px
   lane is gone with the fixed footer. */
.course-review-shell { background-color: var(--sj-canvas); }
.course-contents-toggle { display: none; }

@media (max-width: 991px) {
	.course-review-shell .hidden-xs { display: none !important; }
	.course-review-shell .visible-xs { display: block !important; }
	/* Neutralise the Bootstrap grid column's position:relative so the mobile
	   collapse panel (position:absolute below) anchors to the fixed navbar and
	   spans the full viewport, instead of the shrink-wrapped .col-xs-9. */
	.course-review-shell > .navbar .col-xs-9 { position: static; }
	.course-review-shell .menu-bar {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		top: 8px;
		right: max(22px, calc((100vw - 1320px) / 2));
	}
	/* Task #934 mobile-menu fix: the phone nav is now a slide-in sidebar (see
	   _menu_login_view.php), matching the AgCEU portal drawer. The old Bootstrap
	   collapse dropdown pushed the page down, so the hamburger sat above a wall of
	   links with the content shoved off-screen. The drawer is re-parented to
	   <body> at runtime, hence these selectors are NOT nested under
	   .course-review-shell. */
	.course-review-shell .menu-bar {
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		-webkit-appearance: none;
		appearance: none;
	}
	.course-review-shell .menu-bar:hover { background: #f2f6fb; }
}

/* Phone navigation drawer (Task #934). Lives outside the max-width media block
   because the drawer element is moved to <body>; it is only ever rendered
   inside .visible-xs, which Bootstrap hides above the phone breakpoint. */
.portal-nav-drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: auto;
	z-index: 1000002;
	width: min(320px, calc(100vw - 40px));
	height: 100%;
	height: 100vh;
	height: 100dvh;
	max-height: 100dvh;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	visibility: hidden;
	background: #fff;
	box-shadow: -8px 0 28px rgba(23, 50, 72, .22);
	opacity: 0;
	transform: translateX(100%);
	transition: transform .25s ease, opacity .2s ease, visibility 0s linear .25s;
}
.portal-nav-drawer.is-open {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
	transition-delay: 0s;
}
.portal-nav-drawer-header {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	min-height: 60px;
	align-items: center;
	justify-content: space-between;
	padding: 10px 8px 10px 20px;
	border-bottom: 1px solid var(--sj-line);
	background: #fff;
}
.portal-nav-drawer-header span {
	color: var(--sj-blue);
	font-family: 'Barlow Condensed', 'Varela Round', sans-serif;
	font-size: 17px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.portal-nav-close {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	-webkit-appearance: none;
	appearance: none;
	color: var(--sj-blue);
	font: 400 28px/1 Arial, sans-serif;
}
.portal-nav-close:hover { background: #f2f6fb; }
.portal-nav-close:focus-visible { background: #f2f6fb; outline: 2px solid var(--sj-blue-active); outline-offset: -2px; }
.portal-nav-drawer ul { margin: 0; padding: 0; list-style: none; }
.portal-nav-drawer ul li { display: block; }
.portal-nav-drawer ul li a {
	display: flex;
	min-height: 48px;
	align-items: center;
	padding: 12px 20px;
	border-bottom: 1px solid var(--sj-line);
	color: #333;
	font-family: 'Varela Round', sans-serif;
	font-size: 15px;
	line-height: 1.3;
	text-decoration: none;
}
.portal-nav-drawer ul li:last-child a { border-bottom: 0; }
.portal-nav-drawer ul li a:hover,
.portal-nav-drawer ul li a:focus { background: #f2f6fb; color: var(--sj-blue-active); }
.portal-nav-drawer ul li.active a { background: var(--sj-blue-active); color: #fff; border-color: var(--sj-blue-active); }
.portal-nav-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1000001;
	background: rgba(23, 50, 72, .45);
	opacity: 0;
	transition: opacity .25s ease;
}
.portal-nav-backdrop[hidden] { display: none !important; }
.portal-nav-backdrop.is-visible { opacity: 1; }
body.portal-nav-open {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

@media (max-width: 991px) {

	.course-wrapper {
		margin-top: 76px !important;
		padding: 12px !important;
		overflow-x: visible !important;
	}
	.course-wrapper > .col-md-1,
	.course-wrapper > .col-md-2,
	.course-wrapper > .col-md-3,
	.course-wrapper > .col-md-4,
	.course-wrapper > .col-md-5,
	.course-wrapper > .col-md-6,
	.course-wrapper > .col-md-7,
	.course-wrapper > .col-md-8,
	.course-wrapper > .col-md-9,
	.course-wrapper > .col-md-10,
	.course-wrapper > .col-md-11,
	.course-wrapper > .col-md-12 {
		float: none;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.course-sidebar-column { margin-bottom: 12px; }
	.course-contents-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		min-height: 44px;
		padding: 10px 14px;
		border: 1px solid #2a587a;
		background: #2a587a;
		color: #fff;
		font-size: 16px;
		font-family: 'Montserrat', sans-serif;
		text-align: left;
	}
	.course-contents-toggle:focus { outline: 3px solid #c0d32c; outline-offset: 2px; }
	.course-contents-panel.is-mobile.is-collapsed { display: none; }
	.course-contents-panel { margin-top: 0; }
	/* Task #934: the toggle button already reads "Contents"; the panel's own <h2>
	   repeated it as a plain line directly underneath. Hide it visually but keep it
	   in the accessibility tree - the panel is aria-labelledby this id, so
	   display:none would strip the region's accessible name. Desktop still shows
	   it: there the toggle is hidden and this h2 IS the heading. */
	#course-contents-title {
		position: absolute !important;
		width: 1px; height: 1px;
		padding: 0; margin: -1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
		border: 0;
	}
	.course-sidebar ul li {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 12px 0 36px;
	}
	.course-sidebar ul li a,
	.course-sidebar ol li a {
		min-height: 44px;
		padding-top: 10px;
		padding-bottom: 10px;
		line-height: 24px;
	}
	.course-sidebar ol li { padding: 0 12px 0 36px; }

	.course-content { padding: 16px 12px 24px; overflow: visible; }
	.course-content > .row { margin-left: 0; margin-right: 0; }
	.course-content > .row > [class*="col-"] {
		float: none;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.course-content > .course-heading-row {
		margin: 0;
		padding: 16px 12px 12px;
	}
	.course-content > .course-lesson-body {
		margin: 0;
		padding: 16px 16px 24px;
	}
	.course-content > .course-lesson-body > .col-md-12 > :first-child { margin-top: 0; }
	.course-content .course-title { margin-top: 0; margin-bottom: 4px; font-size: 22px; line-height: 1.25; }
	.course-content .course-subtitle { margin-top: 0; margin-bottom: 12px; font-size: 16px; line-height: 1.4; }
	.course-content iframe { width: 100% !important; }
	.course-content .sjce-slide-wrapper { max-width: 100%; }
	/* Task #934: the lesson prose lives inside a layout table, so on a phone it
	   was rendering 1388px wide inside a 351px column and .table-responsive turned
	   the whole lesson into a horizontal scroller. Drop the table formatting so the
	   cells stack and the text reflows, the way the AgCEU player reads. The
	   authored widths are inline/attribute values, hence !important. */
	.course-content table.course-content-table,
	.course-content table.course-content-table tbody,
	.course-content table.course-content-table tr,
	.course-content table.course-content-table td {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}
	.course-content table.course-content-table td {
		padding-left: 0;
		padding-right: 0;
	}
	/* an empty spacer cell (the layout table's gutter) must not leave a gap */
	.course-content table.course-content-table td:empty { display: none; }

	/* Task #934: the advertising rail is authored last in the document, so on a
	   phone it already falls after the lesson - the ask was that it stay there.
	   Pin that with an explicit order (harmless while the columns are blocks,
	   load-bearing if this ever becomes a flex/grid row) and give it a centred
	   full-width slot. It carries only HTML comments when no banner is booked,
	   so :empty cannot match it - collapse it by margin instead of by display,
	   and only pay for spacing once something real is inside. */
	.course-ad-column {
		order: 99;
		margin: 0;
		padding: 0 !important;
		text-align: center;
	}
	.course-ad-column > * { margin-top: 16px; }
	.course-ad-column img {
		display: inline-block;
		max-width: 100%;
		height: auto;
	}
	.course-ad-column .sidebar-course-review { text-align: left; }
	/* Task: mobile timer must NOT be sticky/fixed — it scrolls with the page like
	   any other block. (Previously position:sticky here, plus the bottom nav's
	   position:fixed below, made the timer/arrows overlap the heading and forced
	   a compensating 88px bottom padding on .course-content — both removed.) */
	.course-timer-row {
		position: static;
		margin: 0 0 16px;
		padding: 10px 12px;
		background: #fff;
		border: 1px solid var(--sj-line);
		border-left: 4px solid var(--sj-btn-bg);
	}
	.course-timer-row p { margin: 0; }
	/* Task #934: the AgCEU structure - ONE Back/Next pair, in a fixed action bar
	   pinned to the bottom of the viewport, always in thumb reach. The pair that
	   used to sit under the title (.course-heading-navigation) is the duplicate
	   now and is hidden at every width. Back leads, Next trails, so the two read
	   as opposite directions instead of one ambiguous cluster. */
	.course-heading-navigation {
		display: none !important;
	}
	.course-player-shell .course-player-navigation {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		margin: 0;
		padding: 10px 12px !important;
		background: #fff;
		border-top: 1px solid var(--sj-line);
		box-shadow: 0 -4px 10px rgba(0, 0, 0, .08);
		z-index: 20;
	}
	.course-player-navigation > a.course-navigation-arrow { flex: 0 1 auto; min-width: 120px; }
	/* One control only (first page, or the final Take Exam): keep it on the
	   trailing edge instead of letting it drift to the left. */
	.course-player-navigation > a.course-navigation-arrow:only-child { margin-left: auto; }
	/* The bar is fixed, so the document has to reserve its height or it covers
	   the last footer link. Scoped to .course-player-shell, NOT the shared
	   .course-review-shell: that class is on every portal page (dashboard, quiz
	   history, account, exams) and none of those render the bar, so reserving
	   there left a band of empty space below their footer. */
	.course-player-shell { padding-bottom: 68px; }
	/* The Sienna launcher is fixed in the bottom-left corner at z-index 500000,
	   so it lands directly on top of Back. Reserve its lane the same way the
	   footer does, and give the lane back the moment the learner drags the
	   launcher somewhere else (html.sjce-a11y-moved, set by a11y-support.js). */
	.course-player-shell .course-player-navigation { padding-left: 74px !important; }
	html.sjce-a11y-moved .course-player-shell .course-player-navigation { padding-left: 12px !important; }
	a.course-navigation-arrow {
		min-width: 44px;
		min-height: 44px;
		padding: 10px 14px;
	}
	/* Task #934: these were pinned to a 40x40 icon square. They now carry a
	   "Back"/"Next" label, so let them size to their content while staying a
	   44px tap target. */
	.course-heading-row a.course-navigation-arrow,
	.course-timer-row .course-heading-navigation a.course-navigation-arrow {
		box-sizing: border-box;
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 44px;
		padding: 10px 14px;
		font-size: 15px;
		line-height: 20px;
		text-align: center;
	}
	/* Back left / Next right, on one row, each half the width - the AgCEU pair. */
	.course-heading-row > .course-heading-navigation {
		display: flex;
		align-items: center;
		gap: 10px;
		margin-top: 12px;
	}
	.course-heading-row > .course-heading-navigation > a.course-navigation-arrow {
		flex: 1 1 0;
	}

	/* Task #934: this used to carry `padding-bottom: 84px` to keep the fixed
	   accessibility launcher off the footer text, which left a tall band of empty
	   blue below the links on every phone page. Reserve the launcher's lane on the
	   side instead — the same treatment the >=992px rule below already uses — so
	   the footer is only as tall as its content. Once the launcher has been
	   dragged elsewhere (html.sjce-a11y-moved, set by a11y-support.js) even that
	   inset is dropped. */
	.course-review-shell footer.navbar-fixed-bottom {
		position: static;
		width: 100%;
		margin: 28px 0 0;
		padding-bottom: 14px;
	}
	.course-review-shell footer .container-fluid { padding: 0 16px; }
	.course-review-shell footer .text-right { text-align: left; }
	.course-review-shell footer ul.menu-footer { padding-left: 0; }
	.course-review-shell footer ul.menu-footer li { margin: 0 10px 8px 0; }
}

/* Task #934: the phone timer used to become a 2-column grid hosting the
   Back/Next pair (.has-course-navigation, added by JS). The player follows the
   AgCEU structure now - the pair lives in a fixed bottom bar and the timer is a
   plain label|countdown|BYPASS strip - so those rules matched nothing and their
   .col-md-6 children no longer exist. Removed rather than left as dead weight. */

/* Task #934: above 991px the portal footer stays navbar-fixed-bottom, which puts it
   in the same corner as the Sienna accessibility button (fixed, left 20px, 58px wide).
   The button painted over "Copyright ..." on every portal page. Reserve its lane so
   the copyright clears it; the <=991px block above already handles this with
   padding-bottom, because there the footer is static. */
@media (min-width: 992px) {
	.course-review-shell footer.navbar-fixed-bottom .col-md-6:first-child { padding-left: 90px; }
}

/* Task: on desktop (>=992px) the top-right arrow pair (.course-heading-navigation) duplicates
   the bottom .course-player-navigation control. Mirror of the <=991px rule (which hides the
   bottom set): hide the top set on desktop so a single arrow control (the bottom one) remains. */
@media (min-width: 992px) {
	.course-heading-navigation {
		display: none !important;
	}
}

/* ==========================================================================
   Task #934: course-portal top nav (migrated from the inline <style> that
   used to live in _menu_login_view.php — single source of truth for these
   rules; do not duplicate them in a view). custom.css is loaded by
   header_course_review_view.php, the only place _menu_login_view is used.
   ========================================================================== */

/* Desktop menu: flexible, single-row, vertically centred against the logo.
   Old rules used fixed 130x70 li which overflowed at 1280–1440 with 6 items. */
ul.menu-course {
	list-style: none;
	margin: 0;
	padding: 0;
	height: 70px;
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex-wrap: nowrap;
	position: relative;
}
ul.menu-course li {
	display: flex;
	align-items: stretch;
	min-width: 0;
	border-left: 1px solid #efefef;
	font-size: 14px;
	position: relative;
	text-align: center;
}
ul.menu-course li:last-child { border-right: 1px solid #efefef; }
/* Task (header underline): the desktop top nav (this ul; the ≤991px collapse
   menu is a separate ul.menu-course-collapsed / .course-review-shell .menu
   ruleset above and is intentionally untouched — a stacked list keeps a
   solid active fill) no longer solid-fills on hover/active; an underline
   under the link text reads better against the white header bar. */
ul.menu-course li:hover, ul.menu-course li.active { background-color: transparent; }
ul.menu-course li:hover > a, ul.menu-course li.active > a { color: #2a587a; }
/* Never underline the nav text on hover/focus — Bootstrap's base `a:hover`
   (and the eduma bundle on the details shell) adds one, which duplicates the
   bar drawn under the item by the :hover/.active ::after rules below. The
   a11y.css focus ring still marks keyboard focus. */
ul.menu-course li a,
ul.menu-course li a:hover,
ul.menu-course li a:focus,
ul.menu-course li a:active,
html[data-sjce-input="keyboard"] ul.menu-course li a:focus {
	text-decoration: none;
}
ul.menu-course li a {
	position: relative;
	text-decoration: none;
	color: #666;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 16px;
	white-space: nowrap;
}
ul.menu-course li.active > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	height: 2px;
	background: #2a587a;
}
ul.menu-course li:hover > a::after {
	content: '';
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	height: 2px;
	background: #b9c7d2;
}
/* Slightly tighten padding on narrower laptops so all six items stay on one row. */
@media (max-width: 1440px) { ul.menu-course li a { padding: 0 13px; } }
@media (max-width: 1300px) { ul.menu-course li a { padding: 0 10px; font-size: 13px; } }

/* Mobile hamburger + collapse menu (base rules; the course-review-shell
   @media block above adds the touch-target overrides). */
.menu-bar {
	position: absolute;
	top: 20px;
	right: 0;
	height: 14px;
	margin-left: -10px;
}
.bars {
	display: block;
	width: 20px;
	height: 3px;
	background-color: #333;
	box-shadow: 0 5px 0 #333, 0 10px 0 #333;
}
/* Task #934: this was an unscoped `.menu` rule written for the Bootstrap
   collapse dropdown panel (`<div class="collapse menu">`, still used by the
   public header's Account menu). custom.css is also loaded on the public
   login/register pages, where the site footer's link lists are `<ul class="menu">`
   — so this rule was setting `display:none` on them and BOTH footer columns
   rendered empty. Scoped to the collapse panel it was written for. */
.collapse.menu {
	display: none;
	width: 100%;
	padding: 50px 10px 50px;
	margin: 0 auto;
	text-align: center;
	background-color: #fff;
	z-index: 1000;
}
.menu ul {
	margin-bottom: 0;
	list-style: none;
	padding-left: 0;
}
.menu ul li a {
	height: 30px;
	font-size: 12px;
	line-height: 30px;
	display: block;
	border-top: 1px solid #ccc;
	color: #333;
	text-decoration: none;
}
.menu ul li a:hover {
	background-color: #c0d32c;
	color: #fff;
}
.menu ul li.active a {
	background-color: #427bbe;
	color: #fff;
}

/* ==========================================================================
   Task #934: shared portal-page container tokens. The portal dashboard
   (portal_courses_view) defines .portal-page; history/account reuse the
   same centred column via .portal-account-page. Keep both in sync here so
   every logged-in portal page shares one width/rhythm system.
   ========================================================================== */
.portal-account-page { max-width: 1180px; margin: 110px auto 130px; padding: 0 20px; }
@media (max-width: 767px) { .portal-account-page { margin-top: 88px; padding: 0 15px; } }
/* Task #934 remediation: portal page/section headings use the established
   heading ink #333 (custom.css h1–h6), not brand blue. #2a587a stays the
   brand primary for buttons/nav/links only. */
.portal-account-page h2 { color: #333; margin: 0 0 8px; }
.portal-account-page h3 { color: #333; font-size: 18px; margin: 22px 0 12px; }

/* History/account/details pages historically wrapped content in a stray
   .col-md-9 / .col-sm-9 (public two-column layout), leaving dead space on the
   right inside the single-column portal. Neutralise that. */
.portal-account-page > .col-md-9,
.portal-account-page.col-sm-9,
.portal-account-page.col-md-9 { width: 100%; float: none; padding: 0; }
.portal-account-page .container { width: auto; padding-left: 0; padding-right: 0; }
.portal-account-page section { margin-bottom: 26px; }

/* My Profile form: bare inputs/selects rendered unstyled vs the rest of the
   site. Give them the site's form-control look without renaming any field. */
.portal-account-page .nav-tabs { margin-bottom: 18px; }
.portal-account-page input[type="text"],
.portal-account-page input[type="email"],
.portal-account-page input[type="password"],
.portal-account-page input[type="number"],
.portal-account-page input:not([type]),
.portal-account-page select {
	display: block;
	width: 100%;
	height: 36px;
	padding: 6px 10px;
	font-size: 14px;
	line-height: 1.4;
	color: #333;
	background-color: #fff;
	border: 1px solid #eee;
	border-radius: 0;
	box-shadow: none;
}
.portal-account-page input[type="checkbox"] { width: auto; height: auto; display: inline-block; margin-right: 6px; }
.portal-account-page .input-group-lg { margin-bottom: 12px; }
.portal-account-page .input-group-lg > label,
.portal-account-page .portal-field-label { color: #333; display: block; font-size: 13px; font-weight: 400; margin: 0 0 6px; }
.portal-account-page table.borderless input[type="number"] { display: inline-block; width: 65px; height: 32px; }
/* Submit button: match the site's success button rather than a raw <button>.
   Uses the same tokens as .btn-success (#357a26 / #2e6a21 / 4px) so the Update
   button is literally the same component as every other portal action. */
.portal-account-page button[type="submit"] {
	background-color: #357a26;
	border: 1px solid #2e6a21;
	color: #fff;
	padding: 11px 18px;
	font-size: 14px;
	min-height: 44px;
	border-radius: var(--sj-radius);
}
.portal-account-page button[type="submit"]:hover,
.portal-account-page button[type="submit"]:focus { background-color: #2e6a21; color: #fff; }

/* Task #934: a 4-column table at 375px pushes Status and the primary action
   off-screen behind a horizontal scroll students do not discover. Restack the
   rows as cards using the same tokens as the My Courses dashboard, so a phone
   shows the course, its state and one full-width action. */
@media (max-width: 767px) {
	/* .table-responsive sets overflow-x:auto in its own max-width:767px block —
	   match its element to win on specificity rather than reaching for !important. */
	.portal-table-cards.table-responsive { overflow-x: visible; border: 0; margin-bottom: 0; }
	.portal-table-cards > table.table { margin-bottom: 0; }
	.portal-table-cards table.table thead { display: none; }
	.portal-table-cards table.table,
	.portal-table-cards table.table > tbody,
	.portal-table-cards table.table > tbody > tr,
	.portal-table-cards table.table > tbody > tr > td { display: block; width: 100%; }
	.portal-table-cards table.table > tbody > tr {
		margin-bottom: 12px;
		padding: 14px;
		background-color: #fff;
		border: 1px solid var(--sj-line);
		border-radius: var(--sj-radius);
	}
	.portal-table-cards table.table-striped > tbody > tr:nth-of-type(odd) { background-color: #fff; }
	.portal-table-cards table.table > tbody > tr > td {
		padding: 3px 0;
		border: 0;
		text-align: left !important;
		/* the site's table styling sets nowrap, which clips long course titles
		   once the cell is a block inside a 375px card */
		white-space: normal;
		overflow-wrap: break-word;
	}
	.portal-table-cards table.table > tbody > tr > td[data-label]:before {
		content: attr(data-label) ": ";
		color: #6b7b88;
	}
	.portal-table-cards table.table > tbody > tr > td[data-label="Course"] {
		margin-bottom: 6px;
		color: #2a587a;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.3;
	}
	.portal-table-cards table.table > tbody > tr > td[data-label="Course"]:before { content: none; }
	.portal-table-cards table.table > tbody > tr > td .btn {
		display: block;
		width: 100%;
		min-height: 44px;
		margin-top: 10px;
		padding: 12px 16px;
		font-size: 15px;
	}
}

/* Task #934: the /p page views (FAQ etc.) ship their own accordion JS + CSS
   (.collapsible / .content_collapse, including the +/− :after indicator), so
   only supply portal typography/spacing here — duplicating the indicator or
   the max-height mechanics would double them up. */
.portal-static .vc_tta-container { margin: 26px 0 8px; }
.portal-static .vc_tta-container h2 { color: #333; font-size: 22px; margin: 0; }
.portal-static h3.collapsible > a {
	color: #333;
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}
.portal-static .content_collapse > p { padding: 0 4px 14px; margin: 0; color: #444; }
.portal-static article { background: #fff; border: 1px solid #dce4ea; border-radius: var(--sj-radius); box-shadow: var(--sj-shadow-card); max-width: 100%; padding: 24px; }
.portal-static .entry-content h4 { color: #333; margin-top: 22px; }
/* Keep bootstrap .row negative margins from causing horizontal scroll inside
   the padded portal container (matters at 375px). */
.portal-static .row { margin-left: 0; margin-right: 0; }
.portal-static img { max-width: 100%; height: auto; }
@media (max-width: 767px) { .portal-static article { padding: 16px; } }

/* Task #931: Terms of Service (/p/5) readability — measure, clause indents,
   TOC and back-to-top. Scoped to .portal-static so the logged-in shell picks
   them up; the page view carries shell-agnostic inline fallbacks for anon. */
.portal-static .entry-content { max-width: 760px; margin: 0 auto; }
.portal-static .entry-content p { line-height: 1.7; }
.portal-static .entry-content h2 { scroll-margin-top: 90px; font-size: 22px; margin-top: 40px; color: #333; }
.portal-static .entry-content .clause-sub { padding-left: 28px; border-left: 2px solid #e6e6e6; }
.portal-static .terms-effective { color: #474e55; font-size: 13px; font-style: italic; margin: 0 0 18px; } /* Task #721 AAA portal pass: #6b7680 on #fff was 4.64:1 -> #4f575f = 7.34:1 */
.portal-static .terms-toc { border: 1px solid var(--sj-line); border-radius: var(--sj-radius); margin: 0 0 30px; overflow: hidden; }
.portal-static .terms-toc h3.collapsible { border-bottom: 1px solid var(--sj-line); padding: 14px 32px 14px 16px; }
.portal-static .terms-toc ol { margin: 0; padding: 12px 16px 12px 34px; }
.portal-static .terms-toc li { margin: 4px 0; }
.portal-static .terms-toc a { color: #25507f; text-decoration: none; } /* Task #721 A2: #427bbe on #fafcfd = 4.24:1, fails 4.5:1; #356caa on #fafcfd = 5.26:1. AAA portal pass: #356caa on #fafcfd was 5.26:1 -> #2b578a = 7.20:1 */
.portal-static .terms-toc a:hover { text-decoration: underline; }
.portal-static .terms-top-wrap { margin: 6px 0 4px; text-align: right; }
.portal-static .terms-top-link { color: #25507f; display: inline-block; font-size: 13px; line-height: 1.2; min-height: 44px; padding: 12px 4px; border-radius: var(--sj-radius-sm); text-decoration: none; } /* Task #721 A2: #427bbe on #fff = 4.36:1, fails 4.5:1; #356caa on #fff = 5.42:1. AAA portal pass: #356caa on #fff was 5.42:1 -> #2b578a = 7.20:1+ */
.portal-static .terms-top-link:hover { text-decoration: underline; }
/* Task #721 A2: link-in-text-block — inline body links inside the WYSIWYG
   copy (.entry-content p / li) were color-only distinguished from
   surrounding text (no underline, insufficient contrast). Underline them;
   explicitly exclude .terms-top-link (its own "back to top" affordance)
   and any link inside .terms-toc (the table of contents) — neither is a
   link inside a text block, and axe did not flag either for this rule, so
   the two rules above keep controlling their text-decoration. */
.portal-static .entry-content p a:not(.terms-top-link),
.portal-static .entry-content li a:not(.terms-toc a) { text-decoration: underline; }

/* Task #721 AAA portal pass: the Contact Us (p/6) wpcf7 Submit button had no
   authored color, so it rendered with the browser's default button chrome
   (#525252 text on #efefef bg = 6.80:1, passes AA, fails AAA). */
.wpcf7-form-control[type="submit"] { color: #4e4e4e; }

/* ==========================================================================
   Task #934: portal component system — ONE design language for every
   logged-in page (My Courses, Quiz History, Certificates, My Profile).
   Migrated out of the inline <style> in portal_courses_view.php so the
   dashboard, the history tables and the profile form all render the same
   chips, pills, buttons and surfaces. Do not restate these in a view.

   Tokens (aligned to the established SJ-CE language, Task #934 remediation):
     heading ink .......... #333 (custom.css h1-h6)   hairline ..... #e6e6e6 / #eee
     brand primary ........ #2a587a  (buttons / nav-active / links, NOT headings)
     nav active ........... #427bbe
     primary action ....... #357a26 bg, #2e6a21 border, 4px  (= .btn-success)
     secondary action ..... #2a587a outline (= .portal-action--secondary)
     status chip .......... bootstrap .label look (solid bg, #fff, radius .25em)
     surfaces ............. square corners; status chips retain their compact pill shape
     muted text ........... #555        surface .............. #fff
   ========================================================================== */

/* --- page container ----------------------------------------------------- */
.portal-page { max-width: 1180px; margin: 110px auto 130px; padding: 0 20px; }
.portal-page h2 { color: #333; margin: 0 0 8px; }
.portal-intro { margin: 0 0 26px; color: #555; }

/* --- surfaces: stat tiles, course cards and history tables all share the
       same white / hairline / square-corner treatment --------------------- */
.portal-stat,
.portal-course,
.portal-account-page .table-responsive {
	background: #fff;
	border: 1px solid #dce4ea;
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow-card);
}
.portal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 28px; }
.portal-stat { padding: 18px; }
.portal-stat__number { color: #2a587a; display: block; font-size: 28px; font-weight: 700; line-height: 1.1; }
.portal-stat__label { color: #555; display: block; margin-top: 6px; }

.portal-course { margin-bottom: 16px; padding: 20px; }
.portal-course__head { align-items: start; display: flex; gap: 18px; justify-content: space-between; }
.portal-course h3 { font-size: 20px; margin: 0; }
.portal-course h3 a { color: #2a587a; }
.portal-course__footer { align-items: center; display: flex; gap: 16px; justify-content: space-between; }
.portal-course__meta { color: #555; font-size: 14px; }
.portal-course__details { color: #666; font-size: 13px; margin: 8px 0 0; }
.portal-course[hidden] { display: none; }
.portal-empty { background: #fff; border: 1px dashed #b9c7d2; border-radius: var(--sj-radius); color: #555; padding: 26px; }

/* Quiz-history tables adopt the card surface (border lives on the wrapper so
   the 4px corners survive the horizontal scroll container). Ink/borders/zebra
   match the established .table.table-striped (#333 head, #e6e6e6 rules, #f9f9f9). */
.portal-account-page .table-responsive { overflow-x: auto; }
.portal-account-page .table { background: transparent; border: 0; margin-bottom: 0; }
.portal-account-page .table > thead > tr > th {
	border-bottom: 1px solid #dce4ea;
	color: #2a587a;
	font-weight: 700;
	padding: 14px 16px;
}
.portal-account-page .table > tbody > tr > td { border-top: 1px solid #dce4ea; padding: 14px 16px; vertical-align: middle; }
.portal-account-page .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafcfd; }

/* --- status chips: one component, driven by portal_status_id from
       Individuals_model::get_portal_courses() (0/1/2/4). Task #934 remediation:
       aligned to the established Bootstrap-3 .label used by exams_history's
       Exams/Certificate tabs (solid fill, #fff text, radius .25em) so the same
       chip renders identically on the dashboard AND every history tab.
       Colours map to the .label variants (default/info/warning/success). ---- */
.portal-status {
	border-radius: 999px;
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	padding: .2em .6em .3em;
	color: #245a88;
	white-space: nowrap;
}
.portal-status--0 { background: #f2f2f2; color: #555; }
.portal-status--1 { background: #e7f0f9; color: #245a88; }
.portal-status--2 { background: #fdf3e2; color: #70490f; } /* Task #721 AAA portal pass: #8a5a12 on #fdf3e2 was 5.38:1 -> #70490f = 7.21:1 */
.portal-status--4 { background: #e8f3e8; color: #235a26; } /* Task #721 AAA portal pass: #27632a on #e8f3e8 was 6.34:1 -> #235a26 = 7.19:1 */

/* --- progress bar ------------------------------------------------------- */
.portal-progress { background: #e5e7ea; border-radius: 99px; height: 9px; margin: 13px 0 8px; overflow: hidden; }
.portal-progress span { background: #357a26; display: block; height: 100%; }

/* --- pills: the dashboard's filters and the bootstrap .nav-tabs on
       history/profile are the same control, so they get the same skin.
       (data-toggle="tab" behaviour is untouched — visuals only.)
       Task (sjc-tabs): all three groups now carry .sjc-tabs and get their
       look from the .sjc-tabs rules below instead — these selectors are
       scoped with :not(.sjc-tabs) so this old pill idiom no longer applies
       to them (kept only in case anything else still relies on it). ------ */
.portal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.portal-account-page .nav-tabs:not(.sjc-tabs) { border-bottom: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.portal-account-page .nav-tabs:not(.sjc-tabs) > li { float: none; margin: 0; }
.portal-filter,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li > a {
	background: #fff;
	border: 1px solid #b9c7d2;
	border-radius: 999px;
	color: #2a587a;
	font-size: 14px;
	line-height: 20px;
	margin: 0;
	min-height: 40px;
	padding: 9px 16px;
}
.portal-filter:hover,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li > a:hover,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li > a:focus {
	background: #eef3f7;
	border-color: #2a587a;
	color: #2a587a;
}
.portal-filter[aria-pressed="true"],
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a:hover,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a:focus {
	background: #2a587a;
	border-color: #2a587a;
	color: #fff;
}
/* Keep the keyboard focus ring visible on both idioms. */
.portal-filter:focus-visible,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li > a:focus-visible,
.portal-page .btn:focus-visible { outline: 2px solid #427bbe; outline-offset: 2px; }

/* --- actions: every portal call-to-action is the site's .btn-success at a
       44px tap target. "Review course" is the one secondary action, so it
       gets an outline treatment instead of bootstrap's off-palette teal. -- */
.portal-page .btn,
.portal-account-page .table .btn {
	border-radius: var(--sj-radius);
	font-size: 14px;
	min-height: 44px;
	padding: 11px 18px;
	white-space: normal;
}
.portal-action--secondary,
.portal-action--secondary:hover,
.portal-action--secondary:focus {
	background: #fff;
	border: 1px solid #2a587a;
	color: #2a587a;
}
.portal-action--secondary:hover,
.portal-action--secondary:focus { background: #eef3f7; }

/* --- small screens ------------------------------------------------------ */
@media (max-width: 767px) {
	.portal-page { margin-top: 88px; padding: 0 15px; }
	.portal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.portal-stat { padding: 14px; }
	.portal-course { padding: 16px; }
	.portal-course__head, .portal-course__footer { align-items: stretch; flex-direction: column; }
	/* The chip must keep hugging its text — stretching it turns a status pill
	   into a full-width bar that reads like a banner. */
	.portal-course__head .portal-status { align-self: flex-start; margin-top: 4px; }
	.portal-course__footer .btn { text-align: center; width: 100%; }
}











/* --- My Profile: "Other" free-text inputs ------------------------------- *
   The stacked-field rule above (display:block; width:100%) is meant for the
   one-field-per-row layout. Three inputs on this page are different: the
   "Other" boxes in License Type, Licenses and Crops sit INLINE next to their
   checkbox inside a <label>. Blocking them drops the box onto its own line,
   leaves the checkbox orphaned above it and bulges the Crops cell out of the
   grid, so keep label-nested text inputs inline. (Crops keeps its own 80%
   inline width; the others get a usable minimum.) */
.portal-account-page label input[type="text"] {
	display: inline-block;
	width: auto;
	min-width: 170px;
	max-width: 100%;
	vertical-align: middle;
}

/* ========================================================================
   SJ CE portal redesign v2 (Task #934)

   The portal uses these variables and primitives across Courses, history,
   certificates, profile and FAQ. Keep page-specific styling out of views so
   the same visual language reaches every student task page.
   ======================================================================== */
:root {
	--sj-blue: #2a587a;
	--sj-blue-active: #427bbe;
	--sj-green: #357a26;
	--sj-green-dark: #2e6a21;
	--sj-lime: #c0d32c;
	--sj-ink: #26323b;
	--sj-muted: #454f57; /* was #586773 (5.82:1) -> 8.37:1 on #fff, 7.78:1 on #f4f7f9 (G17) */
	--sj-line: #dce4ea;
	--sj-canvas: #f4f7f9;
	--sj-surface: #fff;
	/* The SJ-CE portal uses the classic square-corner visual language. */
	--sj-radius: 0;
	--sj-radius-sm: 0;
	--sj-shadow: 0 8px 24px rgba(23, 50, 72, .07);
	--sj-shadow-card: 0 8px 24px rgba(23, 50, 72, .07);
	--sj-focus: #427bbe;
	/* Task (portal classic-theme unification): the course-details page (eduma
	   bundle, css/sj-custom.css) renders h1-h6 in Barlow Condensed and body
	   copy in Roboto — confirmed via computed styles. custom.css previously
	   forced Montserrat/Varela Round with equal-specificity selectors loaded
	   AFTER sj-custom.css, so it silently won on every course_review-shell
	   page (portal + course details when logged in). Routing both through
	   these tokens makes the portal match the details page instead of
	   fighting it, and keeps a single edit point. */
	--sj-font-head: 'Barlow Condensed', sans-serif;
	--sj-font-body: 'Roboto', sans-serif;
	--sj-space-1: 4px;
	--sj-space-2: 8px;
	--sj-space-3: 12px;
	--sj-space-4: 16px;
	--sj-space-5: 24px;
	--sj-space-6: 32px;
}

/* Shared portal shell ---------------------------------------------------- */
.course-review-shell { background: var(--sj-canvas); color: var(--sj-ink); }
.course-review-shell { overflow-x: hidden; }
.course-review-shell > .navbar.navbar-fixed-top {
	border: 0;
	border-bottom: 1px solid var(--sj-line);
	box-shadow: 0 1px 0 rgba(23, 50, 72, .03);
	min-height: 76px;
}
.course-review-shell > .navbar .container-fluid { align-items: center; display: flex; min-height: 76px; }
.course-review-shell > .navbar .portal-header-frame { margin: 0; max-width: none; padding: 0; width: 100%; }
.course-review-shell > .navbar .col-xs-3 { align-items: center; display: flex; padding: 0; width: auto; }
.course-review-shell > .navbar .col-xs-9 { margin-left: auto; padding: 0; width: auto; }
.course-review-shell > .navbar .col-xs-3 > a { align-items: center; display: flex; gap: 10px; text-decoration: none; }
.course-review-shell > .navbar .img-responsive { display: block; max-height: 46px; max-width: 126px; width: auto; }
.portal-brand-caption { border-left: 1px solid var(--sj-line); color: var(--sj-blue); display: inline-block; font: 700 12px/1.2 var(--sj-font-head); letter-spacing: .04em; margin-left: 11px; padding-left: 11px; text-transform: uppercase; }
.course-review-shell > .navbar .portal-brand { align-items: center; display: flex; gap: 11px; text-decoration: none; }
/* Task (route split / portal logo): swap for the shared public-site logo (see
   header_course_review_view.php); height-anchored like the old circle mark so
   the 76px bar doesn't reflow, width follows the image's own ~2.9:1 ratio. */
.portal-brand-logo { display: block; height: 42px; width: auto; }
ul.menu-course { height: 76px; }
ul.menu-course li { border-left-color: #edf1f4; }
ul.menu-course li:last-child { border-right: 0; }
ul.menu-course li a { color: #45525c; font-family: var(--sj-font-body); padding: 0 17px; } /* Task #721 AAA P9: was #52606a on #fff = 6.something:1 -> 8.03:1 */
@media (min-width: 992px) {
	.course-review-shell > .navbar .portal-header-frame > .col-xs-3 { justify-content: flex-start; padding-left: 3.5vw; width: 16.66666667%; }
	.course-review-shell > .navbar .portal-header-frame > .col-xs-9 { display: flex; justify-content: flex-end; margin-left: 0; padding-right: 3.5vw; width: 83.33333333%; }
	.course-review-shell > .navbar ul.menu-course { margin: 0; }
	html.portal-header-position-locked .course-review-shell > .navbar .portal-header-frame { position: relative; }
	html.portal-header-position-locked .course-review-shell > .navbar .portal-header-frame > .col-xs-3 { left: var(--portal-brand-center-vw); min-height: 76px; padding: 0; position: absolute; top: 0; transform: translateX(-50%); width: auto; }
	html.portal-header-position-locked .course-review-shell > .navbar .portal-header-frame > .col-xs-9 { left: var(--portal-menu-center-vw); padding: 0; position: absolute; top: 0; transform: translateX(-50%); width: auto; }
}
/* Task (header underline): restatement of the base rule above — keep in sync
   (transparent fill, underline handled by the shared ::after rules). */
ul.menu-course li:hover, ul.menu-course li.active { background-color: transparent; }

/* Shared page hierarchy -------------------------------------------------- */
.portal-page,
.portal-account-page { max-width: 1280px; margin: 112px auto 128px; padding: 0 24px; }
.portal-page-heading { margin: 0 0 22px; }
.portal-eyebrow { color: #234573; display: block; font: 700 11px/1.3 var(--sj-font-head); letter-spacing: .1em; margin-bottom: 5px; text-transform: uppercase; } /* Task #721 A1: var(--sj-blue-active) #427bbe on #f4f7f9 = 4.06:1, fails WCAG AA 4.5:1; #356caa on #f4f7f9 = 5.035:1 (same blue hue family, --sj-blue-active left untouched since it's shared by buttons/active states). AAA P9 (2026-08-27): #356caa on #f4f7f9 = 6.91:1, still short of 7:1 -> #234573 = 8.99:1. .portal-page-heading--welcome .portal-eyebrow below is a separate light-on-dark variant, left untouched. */
.portal-page h2,
.portal-account-page h2,
.portal-faq-heading h2 { color: var(--sj-ink); font: 700 28px/1.2 var(--sj-font-head); margin: 0; }
.portal-page .portal-intro,
.portal-account-page .portal-intro,
.portal-faq-heading .portal-intro { color: var(--sj-muted); font-size: 15px; margin: 6px 0 0; }
.portal-page-heading--welcome { background: linear-gradient(130deg, var(--sj-blue), var(--sj-blue-active)); border-radius: var(--sj-radius); box-shadow: var(--sj-shadow); color: #fff; overflow: hidden; padding: 24px 28px; position: relative; }
.portal-page-heading--welcome:after { border: 38px solid rgba(255, 255, 255, .11); border-radius: 50%; content: ''; height: 230px; position: absolute; right: -66px; top: -98px; width: 230px; }
.portal-page-heading--welcome .portal-eyebrow { color: #e5f0f7; position: relative; }
.portal-page-heading--welcome h2 { color: #fff; position: relative; }
.portal-page-heading--welcome .portal-intro { color: #eaf3f9; max-width: 680px; position: relative; }

/* Cards, metrics and course actions ------------------------------------ */
.portal-stat,
.portal-course,
.portal-account-page .table-responsive,
.portal-profile-card,
.portal-static article { background: var(--sj-surface); border: 1px solid var(--sj-line); border-radius: var(--sj-radius); box-shadow: var(--sj-shadow); }
.portal-stats { gap: 14px; margin-bottom: 22px; }
.portal-stat { padding: 18px; }
.portal-stat__number { color: var(--sj-blue); font-family: var(--sj-font-head); font-size: 26px; }
.portal-stat__label { color: #4d5961; font-size: 12px; } /* Task #721 AAA portal pass: #61717b on #fff was 5.05:1 -> #4d5961 = 7.20:1 */
.portal-course-list { display: grid; gap: 15px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.portal-catalog-cta { margin-top: 26px; text-align: center; }
/* My Courses previously kept 128px of bottom margin below this button and the
   shared footer added another 50px. Use that existing breathing room as the CTA
   lane instead: the action is centred between the course cards and footer, with
   no extra blank strip that makes the document wider/taller than its content. */
.portal-page--courses { margin-bottom: 0; }
.portal-page--courses .portal-catalog-cta {
	align-items: center;
	display: flex;
	justify-content: center;
	margin-top: 0;
	min-height: 128px;
}
.portal-course { margin: 0; padding: 20px; }
.portal-course h3 { font: 600 18px/1.35 var(--sj-font-head); }
.portal-course h3 a { color: var(--sj-ink); text-decoration: none; }
.portal-course h3 a:hover { color: var(--sj-blue); text-decoration: underline; }
.portal-course__details { color: var(--sj-muted); font-size: 12px; margin: 8px 0 17px; }
.portal-course__footer { gap: 13px; }
.portal-course__meta { color: #4c5961; font-size: 12px; } /* Task #721 AAA portal pass: #60717b on #fff was 5.07:1 -> #4c5961 = 7.22:1 */
.portal-progress { background: #e6ebee; height: 8px; margin: 0 0 8px; }
.portal-progress span { background: var(--sj-green); }
.portal-status { border-radius: 99px; font: 700 11px/1.3 var(--sj-font-head); padding: 4px 9px; }
.portal-status--0 { background: #f2f2f2; color: #555; }
.portal-status--1 { background: #e7f0f9; color: #245a88; }
.portal-status--2 { background: #fdf3e2; color: #70490f; } /* Task #721 AAA portal pass: #8a5a12 on #fdf3e2 was 5.38:1 -> #70490f = 7.21:1 */
.portal-status--4 { background: #e8f3e8; color: #235a26; } /* Task #721 AAA portal pass: #27632a on #e8f3e8 was 6.34:1 -> #235a26 = 7.19:1 */
.portal-page .btn,
.portal-account-page .table .btn,
.portal-account-page button[type="submit"] { border-radius: var(--sj-radius); font-family: var(--sj-font-body); font-size: 13px; min-height: 42px; padding: 9px 15px; }
.portal-page .btn-success,
.portal-account-page .table .btn-success,
.portal-account-page button[type="submit"] { background-color: var(--sj-green); border-color: var(--sj-green-dark); }
.portal-page .btn-success:hover,
.portal-page .btn-success:focus,
.portal-account-page .table .btn-success:hover,
.portal-account-page .table .btn-success:focus,
.portal-account-page button[type="submit"]:hover,
.portal-account-page button[type="submit"]:focus { background-color: var(--sj-green-dark); border-color: var(--sj-green-dark); }

/* Controls and tables ---------------------------------------------------- */
/* Task (sjc-tabs): same :not(.sjc-tabs) scoping as the earlier restatement
   — this restatement previously won the cascade (later in file, higher
   specificity than the plain .sjc-tabs rules) and re-applied the pill fill
   even after the first block was neutralised, so it needs the same scoping. */
.portal-filter,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li > a { border-color: #b9c7d2; color: var(--sj-blue); font-size: 13px; min-height: 38px; padding: 8px 13px; }
.portal-filter[aria-pressed="true"],
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a:hover,
.portal-account-page .nav-tabs:not(.sjc-tabs) > li.active > a:focus { background: var(--sj-blue); border-color: var(--sj-blue); color: #fff; }
.portal-account-page .table-responsive { overflow: hidden; }
.portal-account-page .table > thead > tr > th { background: #f9fbfc; border-bottom-color: var(--sj-line); color: var(--sj-blue); font: 700 11px/1.3 var(--sj-font-head); letter-spacing: .03em; padding: 13px 20px; text-transform: uppercase; }
.portal-account-page .table > tbody > tr > td { border-top-color: var(--sj-line); padding: 15px 20px; }
.portal-account-page .table-striped > tbody > tr:nth-of-type(odd) { background-color: #fafcfd; }
.portal-account-page .alert { border-radius: var(--sj-radius); }

/* Profile form ---------------------------------------------------------- */
.portal-profile-card { padding: 24px; }
.portal-profile-card .container { width: auto; }
.portal-profile-card h3 { border-bottom: 1px solid var(--sj-line); color: #43515b; font: 600 15px/1.35 var(--sj-font-head); margin: 23px 0 18px; padding-bottom: 12px; }
.portal-profile-card .input-group-lg > label,
.portal-profile-card .portal-field-label { color: #43515b; font-size: 12px; margin-bottom: 5px; }
.portal-profile-card input[type="text"],
.portal-profile-card input[type="email"],
.portal-profile-card input[type="password"],
.portal-profile-card input[type="number"],
.portal-profile-card input:not([type]),
.portal-profile-card select { border-color: #cbd7df; border-radius: var(--sj-radius-sm); height: 40px; padding: 8px 10px; }
.portal-profile-card input:focus,
.portal-profile-card select:focus { border-color: #8ba5b8; box-shadow: none; outline: 1px solid #6f8fa5; outline-offset: 1px; }
.portal-profile-card button[type="submit"] { margin-top: 8px; }
/* Crop/livestock rows use legacy table markup only for inline field alignment;
   they are not data tables and should not inherit the history card surface. */
.portal-page--profile .table-responsive { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.portal-crop-column { border-right: 1px solid #eee; }
.portal-crop-row {
	align-items: center;
	display: grid;
	gap: 12px;
	grid-template-columns: minmax(0, 1fr) auto;
	min-height: 48px;
	padding: 4px 0;
}
.portal-crop-choice { align-items: center; display: flex; gap: 8px; margin: 0; min-width: 0; }
.portal-crop-choice > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.portal-crop-choice > span { min-width: 0; overflow-wrap: anywhere; }
.portal-crop-choice--other > input[type="text"] { flex: 1 1 auto; min-width: 0; width: 100%; }
.portal-crop-acres { align-items: center; display: flex; gap: 7px; white-space: nowrap; }
.portal-profile-card .portal-crop-acres > input[type="number"] { flex: 0 0 72px; padding: 8px; width: 72px; }
.portal-livestock-column { border-right: 1px solid #eee; }
.portal-livestock-row {
	align-items: center;
	display: grid;
	gap: 14px;
	grid-template-columns: minmax(0, 1fr) auto;
	margin: 0;
	min-height: 56px;
	padding: 8px 0;
}
.portal-livestock-choice { align-items: center; display: flex; gap: 8px; min-width: 0; }
.portal-livestock-choice > input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.portal-livestock-choice > span { min-width: 0; overflow-wrap: anywhere; }
.portal-livestock-heads { align-items: center; display: flex; gap: 8px; white-space: nowrap; }
.portal-profile-card .portal-livestock-heads > input[type="number"] { flex: 0 0 72px; padding: 8px; width: 72px; }

@media (max-width: 767px) {
	.portal-crop-column,
	.portal-livestock-column { border-right: 0; }
	.portal-crop-row,
	.portal-livestock-row { gap: 10px; }
	.portal-profile-card .portal-crop-acres > input[type="number"],
	.portal-profile-card .portal-livestock-heads > input[type="number"] { flex-basis: 66px; width: 66px; }
}

/* FAQ uses the existing accordion behavior with the portal visual system. */
.portal-static .portal-faq-heading,
.portal-faq-heading { margin-bottom: 22px; }
.portal-static article { max-width: none; padding: 20px; }
.portal-static .vc_tta-container { margin: 24px 0 8px; }
.portal-static .vc_tta-container h2 { color: var(--sj-ink); font: 700 16px/1.35 var(--sj-font-head); }
.portal-static h3.collapsible { background: #fff; border: 0; border-bottom: 1px solid var(--sj-line); color: var(--sj-ink); font: 600 14px/1.4 var(--sj-font-head); margin: 0; padding: 14px 32px 14px 0; position: relative; }
.portal-static h3.collapsible:hover,
.portal-static h3.collapsible.active_collapse { background: #f8fafb; color: var(--sj-blue); }
.portal-static h3.collapsible:after { color: var(--sj-blue); margin: 0; position: absolute; right: 12px; }
.portal-static .content_collapse { background: #fafcfd; }
.portal-static .content_collapse > p { color: var(--sj-muted); padding: 14px 16px; }
.portal-faq-overview { background: #eef4f8; border-left: 4px solid var(--sj-lime); border-radius: 0 var(--sj-radius) var(--sj-radius) 0; color: #43515b; margin: 0 0 16px; padding: 14px 17px; }
.portal-faq-overview p { margin: 0; }

/* Task #934: the footer sits at the END of the document instead of being pinned
   to the viewport. As `position: fixed` it had to be paid for with 66px of shell
   padding plus a 100px margin, and that reservation was the empty band under
   every page. A flex column keeps it at the bottom of the viewport on short
   pages without taking it out of flow, so nothing has to be reserved. */
.course-review-shell { display: flex; flex-direction: column; min-height: 100vh; }
.course-review-shell > main#main { flex: 1 0 auto; }
.course-review-shell > footer#colophon { margin-top: 0; flex: 0 0 auto; width: 100%; }
.course-review-shell > footer.navbar-fixed-bottom { flex: 0 0 auto; }
.course-review-shell footer.navbar-fixed-bottom { background: var(--sj-blue); border: 0; margin: 0; min-height: 0; position: static; width: 100%; z-index: 3; }
.course-review-shell footer.navbar-fixed-bottom p,
.course-review-shell footer.navbar-fixed-bottom a { color: #fff; }
.course-review-shell footer.navbar-fixed-bottom .container-fluid { align-items: center; display: flex; max-width: 1280px; min-height: 66px; padding: 0 24px; }
.course-review-shell footer.navbar-fixed-bottom .container-fluid > .row { align-items: center; display: flex; justify-content: space-between; margin: 0; width: 100%; }
.course-review-shell footer.navbar-fixed-bottom .col-md-6 { padding: 0; width: auto; }
@media (min-width: 992px) { .course-review-shell footer.navbar-fixed-bottom .col-md-6:first-child { padding-left: 0; } }
/* The accessibility launcher is fixed in the lower-left corner on desktop. */
@media (min-width: 992px) { .course-review-shell footer.navbar-fixed-bottom .portal-footer__legal { padding-left: 88px !important; } }
.course-review-shell footer.navbar-fixed-bottom p { font-size: 12px; margin: 0; white-space: nowrap; }
.course-review-shell footer.navbar-fixed-bottom .portal-footer__links { margin-left: auto; }
.course-review-shell footer.navbar-fixed-bottom ul.menu-footer { display: flex; gap: 22px; margin: 0; padding: 0; }
.course-review-shell footer.navbar-fixed-bottom ul.menu-footer li { margin: 0; }
.course-review-shell footer.navbar-fixed-bottom ul.menu-footer a { font-size: 13px; text-decoration: none; }
.course-review-shell footer.navbar-fixed-bottom ul.menu-footer a:hover,
.course-review-shell footer.navbar-fixed-bottom ul.menu-footer a:focus { color: #fff; text-decoration: underline; }

@media (max-width: 991px) {
	.course-review-shell > .navbar .container-fluid { padding: 0 16px; }
	.course-review-shell footer.navbar-fixed-bottom { margin-top: 54px; }
	.course-details-shell main#main { background: var(--sj-canvas); float: none; width: 100%; }
	.course-details-shell footer.navbar-fixed-bottom { clear: both; }
	.portal-page,
	.portal-account-page { margin-top: 100px; }
	.portal-course-list { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.course-review-shell > .navbar.navbar-fixed-top,
	.course-review-shell > .navbar .container-fluid { min-height: 64px; }
	.course-review-shell > .navbar .img-responsive { max-height: 38px; max-width: 100px; }
	.course-review-shell .menu-bar { right: 16px; }
	.portal-brand-logo { height: 32px; }
	.portal-brand-caption { display: none; }
	.portal-page,
	.portal-account-page { margin-top: 84px; padding: 0 15px; }
	.portal-page-heading--welcome { padding: 20px; }
	.portal-page h2,
	.portal-account-page h2,
	.portal-faq-heading h2 { font-size: 25px; }
	.portal-stats { gap: 10px; }
	.portal-stat { padding: 14px; }
	.portal-course { padding: 16px; }
	.portal-profile-card { padding: 16px; }
	.portal-account-page .table-responsive { overflow: visible; }
	.portal-table-cards table.table > tbody > tr { border-color: var(--sj-line); border-radius: var(--sj-radius); box-shadow: var(--sj-shadow); margin-bottom: 12px; padding: 14px; }
	.portal-table-cards table.table > tbody > tr > td .btn { min-height: 42px; }
	.portal-static article { padding: 16px; }
	.course-review-shell footer.navbar-fixed-bottom .container-fluid { display: block; padding: 14px 16px; }
	.course-review-shell footer.navbar-fixed-bottom .container-fluid > .row { align-items: flex-start; display: block; }
	.course-review-shell footer.navbar-fixed-bottom p { line-height: 1.45; white-space: normal; }
	.course-review-shell footer.navbar-fixed-bottom .text-right { margin-top: 10px; text-align: left; }
	.course-review-shell footer.navbar-fixed-bottom ul.menu-footer { flex-wrap: wrap; gap: 8px 14px; }
}

/* Task #934: the accessibility launcher is fixed to the bottom-left corner, and
   below 992px the portal footer is static — so the launcher lands on top of the
   copyright line. The previous fix padded 84px onto the bottom of the footer,
   which read as a slab of empty blue under the links (and grew the page for
   everyone). Inset the footer content past the launcher's lane instead, exactly
   like the >=992px rule does, and drop even that inset once the launcher has
   been dragged elsewhere. Placed after the rules above so it wins the
   equal-specificity `padding` shorthands they set. */
@media (max-width: 991px) {
	.course-review-shell footer.navbar-fixed-bottom .container-fluid { padding-left: 100px; }
	/* The copyright line is `white-space: nowrap` on the wide footer; kept nowrap
	   next to the inset above it cannot shrink and pushes the links column a few
	   pixels past the viewport. The footer is stacked at these widths anyway. */
	.course-review-shell footer.navbar-fixed-bottom p { white-space: normal; }
}
@media (max-width: 767px) {
	.course-review-shell footer.navbar-fixed-bottom .container-fluid { padding-left: 74px; }
}
@media (max-width: 991px) {
	html.sjce-a11y-moved .course-review-shell footer.navbar-fixed-bottom .container-fluid { padding-left: 24px; }
}

/* ==========================================================================
   SJ PORTAL DESIGN SYSTEM (task: classic-theme unification, 2026-08-24)

   Shared primitives for every page that loads this stylesheet: the course
   portal shell (.course-review-shell — My Courses, Quiz History, My Profile,
   course details when logged in) AND the two auth pages (Login, Register),
   which opt in via .auth-page. Existing .portal-* selectors above are NOT
   renamed — .sj-card/.sj-btn/.sj-input declarations are additive classes new
   markup can reach for, while .portal-course/.portal-stat/.portal-profile-card
   inputs already consume the same tokens (var(--sj-radius) etc.) above, so
   the two systems render identically without a markup rewrite.
   ========================================================================== */

/* --- surface / card ------------------------------------------------------ */
.sj-card {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow-card);
	padding: var(--sj-space-5) var(--sj-space-5);
}

/* --- buttons --------------------------------------------------------------
   .portal-page .btn / .portal-account-page button[type=submit] above already
   render as .sj-btn (same radius/min-height/padding tokens); the classes
   below are for new markup (auth pages) that isn't wrapped in .portal-*. -- */
.sj-btn {
	align-items: center;
	background: var(--sj-green);
	border: 1px solid var(--sj-green-dark);
	border-radius: var(--sj-radius);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font: 700 14px/1.2 var(--sj-font-body);
	justify-content: center;
	min-height: 40px;
	padding: 10px 20px;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}
.sj-btn:hover,
.sj-btn:focus { background: var(--sj-green-dark); border-color: var(--sj-green-dark); color: #fff; text-decoration: none; }
.sj-btn--block { display: flex; width: 100%; }
.sj-btn--secondary {
	background: transparent;
	border-color: var(--sj-blue);
	color: var(--sj-blue);
}
.sj-btn--secondary:hover,
.sj-btn--secondary:focus { background: #eef3f7; border-color: var(--sj-blue); color: var(--sj-blue); }
.sj-btn--tertiary {
	background: transparent;
	border: 0;
	color: var(--sj-blue);
	min-height: auto;
	padding: 2px 0;
	text-decoration: underline;
}
.sj-btn--tertiary:hover,
.sj-btn--tertiary:focus { color: var(--sj-blue-active); }
.sj-btn[disabled],
.sj-btn.is-disabled {
	background: #cbd5db;
	border-color: #cbd5db;
	color: #78868f;
	cursor: not-allowed;
}

/* --- inputs / selects ------------------------------------------------------
   Compact controls use the same square-corner treatment as portal cards. --- */
.sj-input,
.sj-select {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	color: var(--sj-ink);
	font: 400 15px/1.4 var(--sj-font-body);
	min-height: 40px;
	padding: 8px 12px;
	width: 100%;
}
.sj-input:focus,
.sj-select:focus {
	border-color: var(--sj-focus);
	box-shadow: 0 0 0 2px rgba(66, 123, 190, .18);
	outline: 0;
}
.sj-label {
	color: var(--sj-muted);
	display: block;
	font: 700 12px/1.3 var(--sj-font-body);
	margin-bottom: var(--sj-space-1);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* --- links ----------------------------------------------------------------
   Applies to any plain <a> reached by this stylesheet (portal shell +
   .auth-page); more specific rules above (nav, buttons, chips) still win. */
.course-review-shell a,
.auth-page a {
	color: var(--sj-blue);
}
/* Task #934: `:focus` also fires on a mouse click / tap, so this hover colour
   used to latch onto whichever link was pressed last — the nav item you just
   clicked stayed blue. Keyboard focus (data-sjce-input, set by a11y-support.js)
   still gets the full treatment. */
.course-review-shell a:hover,
.auth-page a:hover,
html[data-sjce-input="keyboard"] .course-review-shell a:focus,
html[data-sjce-input="keyboard"] .auth-page a:focus {
	color: var(--sj-blue-active);
	text-decoration: underline;
}

/* --- accessibility: one focus-visible ring, portal-wide -------------------
   :focus (mouse click) is left alone; :focus-visible only fires for
   keyboard/AT focus so mouse users don't see a ring on every click. */
.course-review-shell button:focus-visible,
.course-review-shell a:focus-visible,
.course-review-shell input:focus-visible,
.course-review-shell select:focus-visible,
.course-review-shell textarea:focus-visible,
.course-review-shell .sj-btn:focus-visible,
.auth-page button:focus-visible,
.auth-page a:focus-visible,
.auth-page input:focus-visible,
.auth-page select:focus-visible,
.auth-page textarea:focus-visible,
.sj-btn:focus-visible,
.sj-input:focus-visible,
.sj-select:focus-visible {
	outline: 2px solid var(--sj-focus);
	outline-offset: 2px;
}

/* ==========================================================================
   Auth pages (Login, Register) — task: classic-theme unification.
   Migrated out of the ad-hoc inline <style> blocks in
   individuals_login_view.php / individuals_register_view.php so both share
   the portal's tokens instead of one-off hex values. Scoped to .auth-page so
   nothing here reaches the rest of the public site (header_view.php only
   loads this stylesheet on these two routes — see header_view.php).
   Form field NAMES/IDs/behaviour are untouched; style only.
   ========================================================================== */
.auth-page { padding: var(--sj-space-6) var(--sj-space-4) 64px; }
.auth-page .row { margin-bottom: var(--sj-space-4); }
.auth-page .auth-card {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius);
	box-shadow: var(--sj-shadow-card);
	margin: 0 auto;
	max-width: 480px;
	padding: var(--sj-space-6) var(--sj-space-5);
}
.auth-page.auth-page--wide .auth-card { max-width: 1080px; text-align: left; }
.auth-page h2 { color: var(--sj-ink); font: 700 28px/1.2 var(--sj-font-head); margin: 0 0 var(--sj-space-5); }
.auth-page label { color: var(--sj-muted); display: block; font: 700 12px/1.3 var(--sj-font-body); margin-bottom: var(--sj-space-1); text-align: left; text-transform: uppercase; letter-spacing: .03em; }
.auth-page .form-control,
.auth-page select {
	background: var(--sj-surface);
	border: 1px solid var(--sj-line);
	border-radius: var(--sj-radius-sm);
	box-shadow: none;
	color: var(--sj-ink);
	font: 400 15px/1.4 var(--sj-font-body);
	height: 40px;
	padding: 8px 12px;
	width: 100%;
}
.auth-page .form-control:focus,
.auth-page select:focus {
	border-color: var(--sj-focus);
	box-shadow: 0 0 0 2px rgba(66, 123, 190, .18);
	outline: 0;
}
.auth-page .link-bottom { color: var(--sj-muted); font-size: 14px; margin-top: var(--sj-space-4); }
.auth-page button[type="submit"],
.auth-page .sj-btn { min-height: 44px; width: 100%; }
/* Registration's crop/licence grid keeps its bootstrap column layout — only
   field surfaces and spacing are tokenised, not the multi-column structure. */
.auth-page.auth-page--wide .input-group-lg { width: 100%; }
.auth-page.auth-page--wide .input-group-lg input,
.auth-page.auth-page--wide .input-group-lg select { width: 100%; }
.auth-page.auth-page--wide .acres { width: 60px; }
.auth-page.auth-page--wide table.borderless { table-layout: fixed; }
.auth-page.auth-page--wide table.borderless td,
.auth-page.auth-page--wide table.borderless th,
.auth-page.auth-page--wide table.borderless tr { border: none !important; }
.auth-page.auth-page--wide table.borderless td:nth-of-type(2) input { width: 65px !important; }
.auth-page.auth-page--wide table.borderless td:nth-of-type(2) { width: 77px !important; }
.auth-page.auth-page--wide table.borderless td:first-of-type { width: 60% !important; }
@media (max-width: 767px) {
	.auth-page { padding: var(--sj-space-5) var(--sj-space-3) 48px; }
	.auth-page .auth-card,
	.auth-page.auth-page--wide .auth-card { padding: var(--sj-space-5) var(--sj-space-4); max-width: 100%; }
}

/* ==========================================================================
   Register page — structure/rhythm aligned with the AgCEU registration page
   --------------------------------------------------------------------------
   Measured against agceu.eventassay.com/individuals/register at 1280px:
     container   AgCEU 1200px flat, no card   SJ-CE was a 1080px bordered card
     section h3  AgCEU 24px/700, 20px/10px    SJ-CE was 16px/600 with margin 0
     check label AgCEU 15px sentence case     SJ-CE was 12px UPPERCASE
     submit      AgCEU ~100px, sits in flow   SJ-CE was a 970px full-width bar
   The zero-margin 16px headings were the real problem: nine sections ran
   together with nothing separating them. AgCEU uses whitespace alone (its
   headings carry no rule - the lines are the field borders underneath), so
   that is what is reproduced here.

   Scoped to .auth-page--wide, which only individuals_register_view.php sets,
   so Login and Forgot Password keep their centred card. SJ-CE's own palette,
   type and the Task #721 accessibility sizing are all left alone - this is
   layout and rhythm only, not a re-skin in AgCEU green.
   ========================================================================== */
.auth-page.auth-page--wide .auth-card {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: 1200px;
	padding: 0;
}
.auth-page.auth-page--wide h3 {
	color: var(--sj-ink);
	font: 700 24px/1.25 var(--sj-font-head);
	margin: 32px 0 12px;
}
/* h2 stays at 28px so the page title still outranks the section headings -
   AgCEU renders both at 24px, which flattens the hierarchy. */

/* Visible choice labels: sentence case at a readable size. The uppercase 12px
   treatment belongs to field labels, not to 60+ crop/licence checkboxes. */
.auth-page.auth-page--wide label.a11y-check-label,
.auth-page.auth-page--wide .registration-choice-label {
	color: var(--sj-ink);
	font: 400 15px/1.4 var(--sj-font-body);
	letter-spacing: 0;
	text-transform: none;
}

/* Submit sits in the flow at its natural width instead of spanning the page.
   Keeps the 44px minimum target height from the Task #721 pass. */
.auth-page.auth-page--wide button[type="submit"],
.auth-page.auth-page--wide input[type="submit"],
.auth-page.auth-page--wide .sj-btn[type="submit"] {
	min-height: 44px;
	padding: 0 32px;
	width: auto;
}

@media (max-width: 767px) {
	.auth-page.auth-page--wide .auth-card { max-width: 100%; padding: 0; }
	.auth-page.auth-page--wide h3 { font-size: 20px; margin: 24px 0 10px; }
	/* one full-width tap target is the right call on a phone */
	.auth-page.auth-page--wide button[type="submit"],
	.auth-page.auth-page--wide input[type="submit"],
	.auth-page.auth-page--wide .sj-btn[type="submit"] { width: 100%; }
}

/* --------------------------------------------------------------------------
   Crops / Livestock choice grid — column rules, matching the AgCEU register page
   --------------------------------------------------------------------------
   Two problems this fixes, both visible against AgCEU:

   1. No divider between the columns. AgCEU puts border-right on every choice
      cell; because the cells stack, those borders read as continuous vertical
      rules down the group.

   2. A ragged, broken grid. These cells were Bootstrap 3 floats, so a label
      that wraps to two lines ("Processing Tomatoes" at this column width) is
      taller than its neighbours and the next float catches on it — which is
      why Soybeans ended up alone in the third column with a blank row under
      it. Floats cannot self-heal from that. A real grid keeps every row
      aligned no matter how long a crop name is, and equal-height cells are
      also what makes the borders join into an unbroken line.

   Applies to Crops and Livestock only — they are the two sections whose rows
   carry .registration-choice-grid. -------------------------------------- */
.auth-page--wide .registration-choice-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
/* Bootstrap's .row clearfix generates ::before and ::after, and generated
   content becomes a real grid item — they were taking the first and last cells,
   which pushed the whole crop list one column to the right and left Alfalfa
   sitting under column 2. Floats never showed this because the clearfix is
   invisible in a float layout. */
.auth-page--wide .registration-choice-grid::before,
.auth-page--wide .registration-choice-grid::after {
	display: none;
}
/* Grid items ignore float, but the Bootstrap width would still resolve against
   the track and shrink each cell to a third of it. */
.auth-page--wide .registration-choice-grid > .registration-choice-column {
	border-right: 1px solid var(--sj-line);
	float: none;
	padding: 0 20px;
	width: auto;
}
.auth-page--wide .registration-choice-grid > .registration-choice-column:first-child {
	padding-left: 0;
}
/* No rule hanging off the right-hand edge of the group. */
.auth-page--wide .registration-choice-grid > .registration-choice-column:nth-child(3n) {
	border-right: 0;
}

@media (max-width: 991px) {
	.auth-page--wide .registration-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.auth-page--wide .registration-choice-grid > .registration-choice-column:nth-child(3n) {
		border-right: 1px solid var(--sj-line);
	}
	.auth-page--wide .registration-choice-grid > .registration-choice-column:nth-child(2n) {
		border-right: 0;
	}
}
@media (max-width: 767px) {
	.auth-page--wide .registration-choice-grid { grid-template-columns: minmax(0, 1fr); }
	/* A single column has nothing to divide. The :nth-child selectors have to be
	   repeated here: the max-width:991px block above also matches at this width,
	   and its :nth-child(3n) rule outranks a plain class selector, so without
	   these every third cell kept a stray divider on a phone. */
	.auth-page--wide .registration-choice-grid > .registration-choice-column,
	.auth-page--wide .registration-choice-grid > .registration-choice-column:nth-child(2n),
	.auth-page--wide .registration-choice-grid > .registration-choice-column:nth-child(3n) {
		border-right: 0;
		padding: 0;
	}
}

/* ==========================================================================
   Tab-label visibility fix: the eduma theme (wp-content/themes/eduma/style.css)
   hides ALL .course-tabs .nav-tabs li a span labels site-wide, leaving
   icon-only tabs on the public course-details page. Override here (custom.css
   loads after the theme bundle) rather than editing the theme file.
   ========================================================================== */
.learn-press .course-tabs .nav-tabs li a span,
.course-tabs .nav-tabs li a span { display: inline !important; }

/* Logged-in course details render inside .course-review-shell rather than a
   .learn-press body, so Eduma's four-across tab rule no longer matches. Keep
   every available course tab square and on one row in the portal shell. */
.course-review-shell .course-tabs > .nav-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow: hidden;
	width: 100%;
}
.course-review-shell .course-tabs > .nav-tabs > li {
	float: none;
	flex: 1 1 0;
	margin: 0;
	min-width: 0;
}
.course-review-shell .course-tabs > .nav-tabs > li > a {
	align-items: center;
	border-radius: 0;
	display: flex;
	justify-content: center;
	min-height: 48px;
	white-space: nowrap;
	width: 100%;
}
@media (max-width: 767px) {
	.course-review-shell .course-tabs > .nav-tabs > li > a {
		font-size: 12px;
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* ==========================================================================
   .sjc-tabs: shared tab idiom for the portal's three chip/tab groups
   (My Courses filters, Quiz History tabs, My Profile tabs). Replaces the
   older pill idiom (.portal-filter / .portal-account-page .nav-tabs — those
   rules are neutralised just below rather than fought with !important).
   Works as both a native button group (.sjc-tab) and as Bootstrap
   .nav.nav-tabs > li > a markup so data-toggle="tab" keeps working.
   ========================================================================== */
.sjc-tabs { display: flex; flex-wrap: wrap; gap: 0; padding: 0; margin: 0 0 20px; border-bottom: 1px solid #eee; list-style: none; }
.sjc-tabs .sjc-tab,
.sjc-tabs > li > a {
	position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 44px; padding: 0 18px;
	background: #f9f9f9; border: 1px solid #eee; border-bottom: 0; border-radius: 0;
	font-size: 13px; font-weight: 700; color: var(--sj-ink); line-height: 29px; cursor: pointer;
}
.sjc-tabs .sjc-tab::before,
.sjc-tabs > li > a::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 0; background: #2a587a; }
/* Task #934: only the SELECTED filter carries colour. Idle and hover tabs use
   the body ink so the coloured one is unambiguous - previously every tab was
   SJ blue and only a 4px top bar distinguished the active one. Hover still
   lightens the background, so the control keeps its affordance without
   competing with the selected state for attention. */
.sjc-tabs .sjc-tab:hover, .sjc-tabs > li > a:hover { background: #fff; color: var(--sj-ink); }
.sjc-tabs .sjc-tab[aria-selected="true"],
.sjc-tabs .sjc-tab[aria-selected="true"]:hover,
.sjc-tabs > li.active > a,
.sjc-tabs > li.active > a:hover { background: #fff; color: var(--sj-blue); }
.sjc-tabs .sjc-tab[aria-selected="true"]::before, .sjc-tabs > li.active > a::before { height: 4px; }
.sjc-tabs .sjc-tab .sjc-tab-label, .sjc-tabs > li > a span { display: inline !important; }
.sjc-tabs .sjc-tab:focus-visible, .sjc-tabs > li > a:focus-visible { outline: 2px solid #427bbe; outline-offset: 2px; z-index: 1; }
@media (max-width: 767px) { .sjc-tabs .sjc-tab, .sjc-tabs > li { flex: 1 1 48%; } }

/* Bootstrap's own .nav-tabs (bootstrap.min.css, loaded on course-review-shell
   pages) contributes float, margin-bottom and border-radius to li/li>a that
   leak through .sjc-tabs — reset them explicitly here so .sjc-tabs owns the
   full visual, whether it lands on a <ul class="nav nav-tabs sjc-tabs"> or a
   plain <div class="sjc-tabs">. */
.sjc-tabs.nav-tabs { border-bottom: 1px solid #eee; }
.sjc-tabs.nav-tabs > li { float: none; margin: 0; border: 0; }
.sjc-tabs.nav-tabs > li > a { margin-right: 0; border-radius: 0; }
.sjc-tabs.nav-tabs > li.active > a,
.sjc-tabs.nav-tabs > li.active > a:hover,
.sjc-tabs.nav-tabs > li.active > a:focus { border: 1px solid #eee; border-bottom: 0; }

@media (max-width: 767px) {
	.portal-page--history .sjc-tabs,
	.portal-page--profile .sjc-tabs {
		flex-wrap: nowrap;
		width: 100%;
	}
	.portal-page--history .sjc-tabs.nav-tabs > li,
	.portal-page--profile .sjc-tabs.nav-tabs > li {
		display: flex;
		flex: 1 1 0;
		min-width: 0;
	}
	.portal-page--history .sjc-tabs.nav-tabs > li + li,
	.portal-page--profile .sjc-tabs.nav-tabs > li + li { margin-left: -1px; }
	.portal-page--history .sjc-tabs.nav-tabs > li > a {
		flex: 1;
		min-width: 0;
		min-height: 54px;
		padding: 7px 2px;
		font-size: 10px;
		line-height: 1.2;
		text-align: center;
		white-space: normal;
	}
	.portal-page--profile .sjc-tabs.nav-tabs > li > a {
		flex: 1;
		min-width: 0;
		padding-left: 8px;
		padding-right: 8px;
		text-align: center;
	}
}

/* ========================================================================== 
   v4 UNIFIED BUTTON SYSTEM (task #934) — matches public "Continue the course"
   CTA (courses_details_view.php, .thim-enroll-course-button: #2a587a, Roboto,
   13px/700, uppercase, square, 40px). Supersedes v2/v3 button COLORS above.
   Appended last so equal-specificity selectors win by cascade order; where an
   existing rule is more specific (e.g. .portal-page .btn-success,
   .portal-account-page .table .btn-success) the selectors below match or
   exceed that specificity. Additive only — v2/v3 blocks are left intact.
   Contrast (WCAG AA, verified): primary #fff on #2a587a 7.57:1; hover
   #fff on #1f4460 10.22:1; disabled #48545c on #cbd5db 5.22:1;
   secondary #2a587a on #fff 7.57:1; arrows #fff on #2a587a 7.57:1.
   ========================================================================== */
:root {
	--sj-btn-bg: #2a587a;
	--sj-btn-bg-hover: #1f4460;
	--sj-btn-bg-active: #16344a;
	--sj-btn-fg: #fff;
	--sj-btn-radius: 0;
	--sj-btn-font: var(--sj-font-body);
	--sj-btn-fs: 13px;
	--sj-btn-fw: 700;
	--sj-btn-pad: 0 25px;
	--sj-btn-h: 40px;
	--sj-btn-focus: #427bbe;
	--sj-btn-disabled-bg: #cbd5db;
	--sj-btn-disabled-fg: #48545c; /* #5c6a73 in spec = 3.74:1 on #cbd5db (fails AA); darkened to reach 5.22:1 */
}

/* --- base: typography + layout for every portal action button (no markup
       changes). line-height 1.2 (not a fixed 40px) lets labels wrap on
       mobile; min-height keeps the 40px CTA rhythm. -------------------------- */
.portal-page .btn,
.portal-page .btn.btn-success,
.portal-account-page .btn,
.portal-account-page .table .btn,
.portal-account-page .table .btn-success,
.portal-account-page button[type="submit"],
.course-review-shell .sj-btn,
.auth-page .sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: var(--sj-btn-bg);
	color: var(--sj-btn-fg);
	font-family: var(--sj-btn-font);
	font-size: var(--sj-btn-fs);
	font-weight: var(--sj-btn-fw);
	text-transform: uppercase;
	letter-spacing: .02em;
	padding: 8px 25px;
	min-height: var(--sj-btn-h);
	line-height: 1.2;
	border: 0;
	border-radius: var(--sj-btn-radius);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}
.portal-page .btn:hover,
.portal-page .btn.btn-success:hover,
.portal-account-page .btn:hover,
.portal-account-page .table .btn:hover,
.portal-account-page .table .btn-success:hover,
.portal-account-page button[type="submit"]:hover,
.course-review-shell .sj-btn:hover,
.auth-page .sj-btn:hover {
	background: var(--sj-btn-bg-hover);
	color: #fff;
	text-decoration: none;
}
.portal-page .btn:active,
.portal-account-page .btn:active,
.portal-account-page .table .btn:active,
.portal-account-page button[type="submit"]:active,
.course-review-shell .sj-btn:active,
.auth-page .sj-btn:active {
	background: var(--sj-btn-bg-active);
	color: #fff;
}
.portal-page .btn:focus-visible,
.portal-account-page .btn:focus-visible,
.portal-account-page .table .btn:focus-visible,
.portal-account-page button[type="submit"]:focus-visible,
.course-review-shell .sj-btn:focus-visible,
.auth-page .sj-btn:focus-visible {
	outline: 2px solid var(--sj-btn-focus);
	outline-offset: 2px;
}

/* --- a11y.css OVERRIDE (css/a11y.css?v=9 loads AFTER custom.css and forces
       .btn-success { background-color:#357a26; border-color:#2e6a21;
       color:#fff } !important — hover/active -> #2e6a21). That would keep the
       primary portal CTAs GREEN. Re-assert the v4 blue with !important, scoped
       to portal wrappers only (specificity 0,3,0 > a11y's 0,1,0). Do NOT edit
       a11y.css. Non-btn-success primaries (profile submit) don't need this. */
.portal-page .btn.btn-success,
.portal-account-page .table .btn-success,
.portal-account-page .table .btn.btn-success {
	background-color: var(--sj-btn-bg) !important;
	border-color: var(--sj-btn-bg) !important;
	color: var(--sj-btn-fg) !important;
}
.portal-page .btn.btn-success:hover,
.portal-account-page .table .btn-success:hover,
.portal-account-page .table .btn.btn-success:hover {
	background-color: var(--sj-btn-bg-hover) !important;
	border-color: var(--sj-btn-bg-hover) !important;
	color: var(--sj-btn-fg) !important;
}
.portal-page .btn.btn-success:active,
.portal-account-page .table .btn-success:active,
.portal-account-page .table .btn.btn-success:active {
	background-color: var(--sj-btn-bg-active) !important;
	border-color: var(--sj-btn-bg-active) !important;
	color: var(--sj-btn-fg) !important;
}
.portal-page .btn.btn-success:focus,
.portal-account-page .table .btn-success:focus,
.portal-account-page .table .btn.btn-success:focus {
	background-color: var(--sj-btn-bg) !important;
	border-color: var(--sj-btn-bg) !important;
	color: var(--sj-btn-fg) !important;
}

/* --- secondary (white / blue outline). Selectors match the specificity of
       the primary base that would otherwise recolour them (incl. table
       context) and sit after it, so the outline wins. --------------------- */
.portal-page .portal-action--secondary,
.portal-page .btn.btn-default,
.portal-account-page .portal-action--secondary,
.portal-account-page .table .portal-action--secondary,
.portal-account-page .table .btn-default,
.course-review-shell .sj-btn--secondary,
.auth-page .sj-btn--secondary {
	background: #fff;
	border: 1px solid #2a587a;
	color: #2a587a;
}
.portal-page .portal-action--secondary:hover,
.portal-page .btn.btn-default:hover,
.portal-account-page .portal-action--secondary:hover,
.portal-account-page .table .portal-action--secondary:hover,
.portal-account-page .table .btn-default:hover,
.course-review-shell .sj-btn--secondary:hover,
.auth-page .sj-btn--secondary:hover {
	background: #eef3f7;
	color: #2a587a;
}
.portal-page .portal-action--secondary:focus-visible,
.portal-account-page .portal-action--secondary:focus-visible,
.portal-account-page .table .portal-action--secondary:focus-visible,
.course-review-shell .sj-btn--secondary:focus-visible,
.auth-page .sj-btn--secondary:focus-visible {
	outline: 2px solid var(--sj-btn-focus);
	outline-offset: 2px;
}

/* --- ghost / tertiary ---------------------------------------------------- */
.course-review-shell .sj-btn--tertiary,
.auth-page .sj-btn--tertiary,
.sj-btn--tertiary {
	background: transparent;
	border: 0;
	color: #2a587a;
	text-decoration: none;
}
.course-review-shell .sj-btn--tertiary:hover,
.auth-page .sj-btn--tertiary:hover,
.sj-btn--tertiary:hover { background: #eef3f7; color: #2a587a; text-decoration: none; }

/* --- disabled (all variants). Placed last so it wins over primary/secondary. */
.portal-page .btn[disabled],
.portal-page .btn.disabled,
.portal-account-page .btn[disabled],
.portal-account-page .btn.disabled,
.portal-account-page button[type="submit"][disabled],
.course-review-shell .sj-btn[disabled],
.course-review-shell .sj-btn.disabled,
.course-review-shell .sj-btn.is-disabled,
.auth-page .sj-btn[disabled],
.sj-btn[disabled],
.sj-btn.is-disabled {
	background: var(--sj-btn-disabled-bg);
	border-color: var(--sj-btn-disabled-bg);
	color: var(--sj-btn-disabled-fg);
	cursor: not-allowed;
}
.portal-page .btn[disabled]:hover,
.portal-account-page .btn[disabled]:hover,
.course-review-shell .sj-btn[disabled]:hover,
.sj-btn[disabled]:hover,
.sj-btn.is-disabled:hover {
	background: var(--sj-btn-disabled-bg);
	color: var(--sj-btn-disabled-fg);
}

/* --- course-player nav arrows: was #cf7d4d ORANGE on #fff (3.14:1, fails).
       Now #2a587a (7.57:1). Square shape/padding/chevron size unchanged. --- */
a.course-navigation-arrow { background-color: var(--sj-btn-bg); color: #fff; }
a.course-navigation-arrow:hover,
a.course-navigation-arrow:focus { background-color: var(--sj-btn-bg-hover); color: #fff; }
a.course-navigation-arrow:focus-visible { outline: 2px solid var(--sj-btn-focus); outline-offset: 2px; }
a.course-navigation-arrow .glyphicon { color: #fff; }

/* Task #934: the player's Back/Next controls were bare 40px chevron squares, so
   the only cue for what they did was the icon direction. Ported from the AgCEU
   take-course page: a labelled button with the chevron on the leading edge,
   Next filled with the SJ-CE blue and Back outlined, both sized as one tap
   target. The label is real text, so it scales with the Sienna font controls. */
/* NB: deliberately does NOT set `display`. The view emits inline
   `style="display:none"` on a locked Next/exam link, jQuery .show()/.hide()
   drive the same property, and .course-next-locked hides with `!important` -
   an `!important` display here outranks all three and leaves a hidden button
   holding its 158x44 of layout. The chevron and label are inline spans, so
   vertical-align lines them up without needing flex on the anchor itself. */
a.course-navigation-arrow {
	min-height: 44px;
	padding: 11px 16px;
	border: 1px solid var(--sj-btn-bg);
	border-radius: 3px;
	font-family: 'Montserrat', sans-serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	/* same easing the .sj-btn design-token buttons already use, so every control
	   in the portal reacts at one speed */
	transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}
/* hover recoloured the fill but left the border on the lighter base colour.
   NB: must stay ABOVE the :active rule — same specificity, so source order is
   what decides the press-while-hovering case (the LVHA order). */
a.course-navigation-arrow:hover,
a.course-navigation-arrow:focus { border-color: var(--sj-btn-bg-hover); }
/* Pressed state. The player's Back/Next/exam controls were the one button family
   that never got an `:active` rule, so a press produced no feedback — the colour
   only moved on :hover, which touch devices never show. Uses the existing
   --sj-btn-bg-active token (#16344a) that .sj-btn already uses, so the press
   reads the same everywhere. The 1px nudge gives it a physical feel. */
a.course-navigation-arrow:active {
	background-color: var(--sj-btn-bg-active);
	border-color: var(--sj-btn-bg-active);
	color: #fff;
	transform: translateY(1px);
}
@media (prefers-reduced-motion: reduce) {
	a.course-navigation-arrow { transition: none; }
	a.course-navigation-arrow:active { transform: none; }
}
a.course-navigation-arrow .glyphicon { top: 0; font-size: 14px; vertical-align: middle; }
a.course-navigation-arrow .course-navigation-label { white-space: nowrap; vertical-align: middle; }
/* chevron on the leading edge: left for Back, right for Next */
a.course-navigation-back .course-navigation-label { margin-left: 6px; }
a.course-navigation-arrow:not(.course-navigation-back) .course-navigation-label { margin-right: 6px; }

/* --- Task #934: player heading, timer strip and sponsor card (AgCEU shape) --- */

/* Position counters. Muted and lighter than the heading they annotate so they
   read as metadata, not as part of the course/section name. */
.course-pagination {
	color: #575757; /* Task #721 AAA portal pass: #6b6b6b on #fff was 5.33:1 -> #575757 = 7.23:1 */
	font-weight: 400;
	white-space: nowrap;
}
.course-title .course-pagination { font-size: .62em; }
.course-subtitle .course-pagination { font-size: .92em; }

/* Timer strip: label | countdown | BYPASS. Two declared tracks, not three - the
   bypass button only renders for QA accounts, and a declared third track would
   still contribute its column-gap for everyone else, floating the countdown off
   the right edge. `grid-column: 3` creates an IMPLICIT track only when the
   button is actually present. */
.course-timer {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-auto-columns: auto;
	column-gap: 16px;
	align-items: center;
}
.course-timer-copy { grid-column: 1; grid-row: 1; }
.course-timer-copy p { color: #6b6b6b; font-size: 14px; line-height: 18px; }
.course-timer-countdown { grid-column: 2; grid-row: 1; min-width: 64px; padding: 0; text-align: right; }
.course-timer-bypass { grid-column: 3; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; }
/* Bootstrap's .row clearfix would become two stray grid items. */
.course-timer::before, .course-timer::after { display: none; }

/* BYPASS is a QA affordance, not a course action: outlined, never the filled
   green .btn-success it used to borrow (which read as the primary control).
   Task #721 item I3: BYPASS is now a real <button> (it stops the timer, it
   never navigates), so these selectors are element-agnostic. */
.course-player-bypass {
	padding: 8px 14px;
	background: #fff;
	border: 1px solid var(--sj-btn-bg);
	border-radius: 3px;
	color: var(--sj-btn-bg);
	font-weight: 700;
	letter-spacing: .02em;
	transition: background-color .15s ease, color .15s ease;
}
.course-player-bypass:hover,
.course-player-bypass:focus { background: var(--sj-btn-bg); color: #fff; }
.course-player-bypass:active { background: var(--sj-btn-bg-active); border-color: var(--sj-btn-bg-active); color: #fff; }
@media (prefers-reduced-motion: reduce) { .course-player-bypass { transition: none; } }

/* Sponsor card: its own surface above the Contents toggle, so the paid logo is
   visible without opening the drawer. */
.course-sidebar-column > .course-sponsor2 {
	margin-bottom: 12px;
	background: #fff;
	border: 1px solid var(--sj-line);
}
/* Back is the secondary action: outlined, not filled. */
a.course-navigation-arrow.course-navigation-back {
	background-color: #fff;
	color: var(--sj-btn-bg);
}
a.course-navigation-arrow.course-navigation-back .glyphicon { color: var(--sj-btn-bg); }
a.course-navigation-arrow.course-navigation-back:hover,
a.course-navigation-arrow.course-navigation-back:focus {
	background-color: var(--sj-btn-bg);
	color: #fff;
}
a.course-navigation-arrow.course-navigation-back:hover .glyphicon,
a.course-navigation-arrow.course-navigation-back:focus .glyphicon { color: #fff; }
/* the outlined variant inverts on hover, so its pressed state has to darken the
   fill it just gained rather than fall back to the filled button's rule */
a.course-navigation-arrow.course-navigation-back:active {
	background-color: var(--sj-btn-bg-active);
	border-color: var(--sj-btn-bg-active);
	color: #fff;
}
a.course-navigation-arrow.course-navigation-back:active .glyphicon { color: #fff; }

/* --- public CTA: keep public + portal states identical. custom.css loads
       after the eduma bundle on course-details, so these win. --------------- */
.learnpress .thim-enroll-course-button:hover { background: #1f4460; }
.learnpress .thim-enroll-course-button:active { background: #16344a; }
.learnpress .thim-enroll-course-button:focus-visible { outline: 2px solid var(--sj-btn-focus); outline-offset: 2px; }
.learnpress .course-payment {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
}
.learnpress .course-payment .course-price { float: none; margin: 0; }
.course-detail-action-group {
	display: flex;
	align-items: center;
	flex: 1 1 180px;
	flex-wrap: wrap;
	gap: 8px 12px;
}
.learnpress .course-detail-action {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 44px;
	padding: 10px 18px;
	line-height: 1.35;
	text-align: center;
	white-space: normal;
}
.course-detail-completion { color: #315567; font-size: 14px; font-weight: 600; }
.learnpress .course-payment .course-progress { flex: 1 0 100%; margin: 2px 0 0; }
.portal-action-unavailable { color: #505860; font-weight: 600; } /* Task #721 AAA portal pass: #5f6972 on #fff/#fafcfd was 5.44-5.60:1 -> #505860 = 7.0+:1 */

/* --- responsive: comfortable 44px touch targets at phone width; dashboard
       card CTA goes full-width (its footer flexes to a column); quiz-history
       table buttons stay inline (auto width). ----------------------------- */
@media (max-width: 480px) {
	.learnpress .course-payment { align-items: stretch; }
	.learnpress .course-payment .course-price,
	.learnpress .course-payment .course-detail-action-group,
	.learnpress .course-payment .course-detail-action,
	.learnpress .thim-course-landing-button .course-detail-action { width: 100%; }
	.course-detail-action-group { display: block; flex-basis: 100%; }
	.course-detail-completion { display: block; margin-top: 8px; text-align: center; }
	/* Match the base rule's selector list (incl. .btn.btn-success at 0,3,0 and
	   .table .btn) so min-height:44px actually wins over the 40px base. */
	.portal-page .btn,
	.portal-page .btn.btn-success,
	.portal-account-page .btn,
	.portal-account-page .table .btn,
	.portal-account-page .table .btn-success,
	.portal-account-page button[type="submit"],
	.course-review-shell .sj-btn,
	.auth-page .sj-btn { min-height: 44px; }
	.portal-course__footer { flex-wrap: wrap; }
	.portal-course__footer .btn { width: 100%; }
	.portal-account-page .table .btn { width: auto; }
}

/* --- Contents panel: completed / available / locked -----------------------
   Mirror AgCEU's three-state hierarchy using SJ-CE's brand blue. Completed
   sections are blue, the first incomplete but available section is dark ink,
   and future locked sections are muted gray. The server supplies the same
   access map that controls whether an anchor or a non-interactive span renders,
   so visual state can never grant access by itself. */
.course-sidebar ul li.course-section--completed,
.course-sidebar ul li.course-section--completed > a,
.course-sidebar ul li.course-section--completed > span {
	color: #2a587a !important;
}
.course-sidebar ul li.course-section--completed::before {
	color: #2a587a;
}
.course-sidebar ul li.course-section--completed:hover {
	background-color: #eef4f9;
}

.course-sidebar ul li.course-section--available:not(.course-section--completed),
.course-sidebar ul li.course-section--available:not(.course-section--completed) > a,
.course-sidebar ul li.course-section--available:not(.course-section--completed) > span {
	color: #333 !important;
	font-weight: 600;
}
.course-sidebar ul li.course-section--available:not(.course-section--completed):hover {
	background-color: #f1f4f6;
}

.course-sidebar ul li.course-section--locked,
.course-sidebar ul li.course-section--locked > span {
	color: #b7bcc2 !important;
	font-weight: 400;
}
.course-sidebar ul li.course-section--locked:hover {
	background-color: transparent;
}

/* The current row keeps a non-colour cue. Its accent follows the row state:
   dark for an incomplete available section, SJ blue after completion. */
.course-sidebar ul li.active {
	background-color: #f1f4f6;
}
.course-sidebar ul li.active::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: #333;
}
.course-sidebar ul li.active.course-section--completed {
	background-color: #eef4f9;
}
.course-sidebar ul li.active.course-section--completed::after {
	background-color: #2a587a;
}