/* ==========================================================================
   Nantucket AI - LearnPress screen polish
   Phase 7. Shipped by wp-content/mu-plugins/nai-lms-style.php.
   Master copy: learn-build/design/lms-polish.css

   Scope: LearnPress student screens only (course, lesson, quiz, profile,
   login/register). Every selector is prefixed with an LP hook
   (.learnpress-*, .lp-*, .course-*, #learn-press-*, #popup-*, #content-item-*).
   Nothing here can reach an Elementor marketing page.

   Palette is the site palette, no new hues:
     teal    #0e7490   hover #0a5468
     ink     #0a1520   ink-2 #464e55
     sand    #faf7f2   sand-2 #f5f0e8
     seafoam #34d399   coral  #ef6351
     hairline rgba(14,116,144,0.12)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Retune LearnPress's own CSS variables.
   LearnPress reads these ~150 times across its stylesheet, so correcting them
   here fixes far more than an equivalent number of hand-written overrides.
   Defaults being replaced: border #E2E0DB, radius 5px, grey #F7F7FB,
   base #333, accent #666, meta #8a8a8a.
   -------------------------------------------------------------------------- */
:root {
	--nai-teal: #0e7490;
	--nai-teal-dk: #0a5468;
	--nai-ink: #0a1520;
	--nai-ink-2: #464e55;
	--nai-sand: #faf7f2;
	--nai-sand-2: #f5f0e8;
	--nai-seafoam: #34d399;
	--nai-coral: #ef6351;
	--nai-hairline: rgba(14, 116, 144, 0.12);
	--nai-hairline-2: rgba(14, 116, 144, 0.3);
	--nai-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

	--lp-border-color: rgba(14, 116, 144, 0.12);
	--lp-border-radius: 4px;
	--lp-white-grey: #f5f0e8;
	--lp-fix-bg-section-item: #f5f0e8;
	--lp-color-base: #0a1520;
	--lp-color-accent: #464e55;
	--lp-color-meta: #464e55;
	--lp-bg-color-lesson: #ffffff;
}

/* --------------------------------------------------------------------------
   2. Typography. The kit already puts Inter on the page; form controls do not
   inherit font-family, so they are pinned explicitly. Italic field labels are
   a theme default that reads as a mistake next to the marketing pages.
   -------------------------------------------------------------------------- */
body.learnpress-page button,
body.learnpress-page input,
body.learnpress-page select,
body.learnpress-page textarea,
body.learnpress-profile button,
body.learnpress-profile input,
body.learnpress-profile select,
body.learnpress-profile textarea,
body.course-item-popup button,
body.course-item-popup input,
body.course-item-popup select,
body.course-item-popup textarea {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
}

/* LearnPress italicises field labels via
   .learn-press-form .form-fields .form-field > label, which is (0,3,1). The
   override has to match that weight or it loses. */
.learn-press-form .form-fields .form-field > label,
.learn-press-form label,
.lp-user-profile label,
#learn-press-user-profile label,
form[name="learn-press-login"] label,
form[name="learn-press-register"] label {
	font-style: normal;
	font-weight: 600;
	color: var(--nai-ink);
}

.learn-press-form .form-fields .form-field > label .required,
.learn-press-form .form-fields .form-field .required,
.learn-press-form .required,
.lp-user-profile .required,
form[name="learn-press-login"] .required,
form[name="learn-press-register"] .required {
	color: var(--nai-coral);
}

/* --------------------------------------------------------------------------
   3. Buttons. One pill treatment across every LearnPress action control so
   they read as the same family as the marketing CTAs.
   -------------------------------------------------------------------------- */
body.learnpress-page .lp-button,
body.learnpress-profile .lp-button,
body.course-item-popup .lp-button,
.lp-single-course .lp-button,
.lp-single-course button.course-btn-continue,
.lp-single-course form.enroll-course button,
.lp-single-course form.purchase-course button,
#learn-press-quiz-app .lp-button,
#learn-press-quiz-app button:not(.modal-button-cancel):not(.page-numbers),
.quiz-buttons .button-right .lp-button,
.learn-press-form button[type="submit"],
form[name="learn-press-login"] button[type="submit"],
form[name="learn-press-register"] button[type="submit"] {
	border-radius: 999px;
	border: 1px solid var(--nai-teal);
	background: var(--nai-teal);
	color: #ffffff;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.3;
	padding: 12px 28px;
	text-transform: none;
	letter-spacing: 0;
	box-shadow: 0 4px 20px rgba(14, 116, 144, 0.22);
	transition: background 0.25s ease, border-color 0.25s ease,
		box-shadow 0.25s ease, transform 0.25s ease;
}

body.learnpress-page .lp-button:hover,
body.learnpress-profile .lp-button:hover,
body.course-item-popup .lp-button:hover,
.lp-single-course .lp-button:hover,
.lp-single-course button.course-btn-continue:hover,
.lp-single-course form.enroll-course button:hover,
#learn-press-quiz-app .lp-button:hover,
#learn-press-quiz-app button:not(.modal-button-cancel):not(.page-numbers):hover,
.quiz-buttons .button-right .lp-button:hover,
.learn-press-form button[type="submit"]:hover,
form[name="learn-press-login"] button[type="submit"]:hover,
form[name="learn-press-register"] button[type="submit"]:hover {
	background: var(--nai-teal-dk);
	border-color: var(--nai-teal-dk);
	color: #ffffff;
	opacity: 1;
	box-shadow: 0 6px 30px rgba(14, 116, 144, 0.32);
	transform: translateY(-2px);
}

/* Secondary / ghost. On the result screen Retake is .button-left .lp-button.start
   and Review is .button-right .lp-button.review-quiz. Retake is the primary
   action, so only Review drops back to the outline treatment. */
#learn-press-quiz-app button.modal-button-cancel,
#learn-press-quiz-app .quiz-buttons button.review-quiz,
.quiz-buttons button.review-quiz {
	background: transparent;
	color: var(--nai-teal);
	border: 1px solid var(--nai-hairline-2);
	box-shadow: none;
}

#learn-press-quiz-app button.modal-button-cancel:hover,
#learn-press-quiz-app .quiz-buttons button.review-quiz:hover,
.quiz-buttons button.review-quiz:hover {
	background: rgba(14, 116, 144, 0.06);
	border-color: var(--nai-teal);
	color: var(--nai-teal-dk);
	box-shadow: none;
}

/* Login / register submits stay full width, pill radius. */
form[name="learn-press-login"] button[type="submit"],
form[name="learn-press-register"] button[type="submit"] {
	width: 100%;
}

/* Focus ring, carried over from the parent site. */
body.learnpress-page :is(a, button, input, select, textarea):focus-visible,
body.learnpress-profile :is(a, button, input, select, textarea):focus-visible,
body.course-item-popup :is(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--nai-teal);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Cards, panels, inputs. Hairline borders instead of grey rules.
   -------------------------------------------------------------------------- */
body.learnpress-page input[type="text"],
body.learnpress-page input[type="email"],
body.learnpress-page input[type="password"],
body.learnpress-profile input[type="text"],
body.learnpress-profile input[type="email"],
body.learnpress-profile input[type="password"],
.learn-press-form input {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	background: #ffffff;
	color: var(--nai-ink);
}

body.learnpress-page input:focus,
body.learnpress-profile input:focus,
.learn-press-form input:focus {
	border-color: var(--nai-teal);
}

.lp-form-login,
.lp-form-register,
#learn-press-user-profile .learn-press-form,
.learn-press-form-login,
.learn-press-form-register {
	background: #ffffff;
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   5. Course single page.
   -------------------------------------------------------------------------- */
.lp-single-course .course-section-header,
.lp-course-curriculum .course-section-header {
	background: var(--nai-sand-2);
	border-bottom: 1px solid var(--nai-hairline);
}

.lp-single-course .course-section__title,
#popup-sidebar .course-section__title {
	color: var(--nai-ink);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* Card treatment is for the course landing page only. In the in-course
   sidebar the sections must stay flush, or the rail turns into a stack of
   floating boxes. */
.lp-single-course .lp-course-curriculum .course-section {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	overflow: hidden;
}

.lp-single-course .lp-course-curriculum .course-section + .course-section {
	margin-top: 12px;
}

.lp-course-curriculum .course-item {
	border-top: 1px solid var(--nai-hairline);
}

.lp-course-curriculum .course-item:hover {
	background: rgba(14, 116, 144, 0.04);
}

.lp-course-curriculum .course-item__link {
	color: var(--nai-ink);
}

/* Status icons: completed reads seafoam, failed reads coral, locked stays
   muted. LearnPress ships #3bb54a / #f02425 / #999 for these. */
.lp-course-curriculum .course-section .course-item-ico.completed::before,
.lp-course-curriculum .course-section .course-item-ico.passed.completed::before,
.lp-course-curriculum .course-section .course-item-ico.started::before {
	color: var(--nai-seafoam);
}

.lp-course-curriculum .course-section .course-item-ico.in-progress::before,
.lp-course-curriculum .course-section .course-item-ico.doing::before {
	color: var(--nai-hairline-2);
}

.lp-course-curriculum .course-section .course-item-ico.failed.completed::before {
	color: var(--nai-coral);
}

.lp-course-curriculum .course-section .course-item-ico.locked::before,
.lp-course-curriculum .course-section .course-item-ico.preview::before {
	color: #a2aab1;
}

.lp-single-course .course-item-ico.lp_lesson::before,
.lp-single-course .course-item-ico.lp_quiz::before,
#popup-sidebar .course-item-ico.lp_lesson::before,
#popup-sidebar .course-item-ico.lp_quiz::before {
	color: var(--nai-teal);
}

.lp-single-course .course-toggle-all-sections {
	color: var(--nai-teal);
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.lp-single-course .lp-course-curriculum__title,
.lp-single-course .course-curriculum-info {
	border-bottom: 1px solid var(--nai-hairline);
}

.lp-single-course .course-curriculum-info__left li {
	color: var(--nai-ink-2);
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.lp-single-course .course-instructor a,
.lp-single-course .course-categories a {
	color: var(--nai-teal);
}

/* Progress readouts read seafoam, matching the site's success token. */
.lp-single-course .learn-press-progress__active,
.lp-single-course .lp-progress-bar .lp-progress-value,
#popup-sidebar .learn-press-progress__active,
#popup-header .learn-press-progress__active,
.course-progress .learn-press-progress__active,
.lp-progress-bar > div,
.progress-bg > .progress-active {
	background: var(--nai-seafoam);
}

.lp-single-course .learn-press-progress,
#popup-header .learn-press-progress,
.progress-bg {
	background: rgba(14, 116, 144, 0.1);
	border-radius: 999px;
}

/* --------------------------------------------------------------------------
   6. In-course view: sidebar, header bar, prev/next nav.
   -------------------------------------------------------------------------- */
#popup-sidebar {
	background: #ffffff;
	border-right: 1px solid var(--nai-hairline);
	box-shadow: none;
}

#popup-sidebar .course-item.current,
.course-curriculum .course-item.current {
	background: rgba(14, 116, 144, 0.06);
}

/* LearnPress marks the current item with a 3px #00adff rail. */
#popup-sidebar .course-item.current::before,
.course-curriculum .course-item.current::before,
.course-curriculum .course-item::before {
	background: var(--nai-teal);
}

#popup-header {
	background: var(--nai-ink);
	color: var(--nai-sand);
	border-bottom: 1px solid rgba(34, 211, 238, 0.15);
}

#popup-header .course-title,
#popup-header .course-title a,
#popup-header .items-progress,
#popup-header .number {
	color: var(--nai-sand);
}

.course-item-nav {
	border-top: 1px solid var(--nai-hairline);
	padding-top: 14px;
}

.course-item-nav .prev a,
.course-item-nav .next a {
	color: var(--nai-teal);
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.course-item-nav .prev a:hover,
.course-item-nav .next a:hover {
	color: var(--nai-teal-dk);
}

.course-item-nav__name {
	color: var(--nai-ink-2);
}

/* Lesson body: keep the reading measure honest. */
#learn-press-content-item .content-item-summary > h1.course-item-title {
	letter-spacing: -0.02em;
	line-height: 1.15;
}

/* --------------------------------------------------------------------------
   7. Quiz.
   -------------------------------------------------------------------------- */

/* Status bar sits on the teal fill, so its text has to be light. LearnPress
   leaves it inheriting the dark body colour, which is unreadable. */
.quiz-status > div {
	border-radius: 4px;
	box-shadow: 0 4px 20px rgba(14, 116, 144, 0.18);
}

.quiz-status .questions-index,
.quiz-status .current-point,
.quiz-status .countdown,
.quiz-status .countdown span,
.quiz-status .countdown i,
.quiz-status .questions-index span {
	color: var(--nai-sand);
}

.quiz-status .questions-index {
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.quiz-status .questions-index span {
	color: #ffffff;
	font-weight: 700;
}

/* Finish Quiz reads as a ghost button on the teal bar. */
.quiz-status .submit-quiz #button-submit-quiz,
#learn-press-quiz-app .quiz-status .lp-button#button-submit-quiz {
	background: transparent;
	border: 1px solid rgba(245, 240, 232, 0.55);
	color: var(--nai-sand);
	border-radius: 999px;
	padding: 8px 20px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: none;
	box-shadow: none;
}

.quiz-status .submit-quiz #button-submit-quiz:hover,
#learn-press-quiz-app .quiz-status .lp-button#button-submit-quiz:hover {
	background: var(--nai-sand);
	border-color: var(--nai-sand);
	color: var(--nai-teal-dk);
	box-shadow: none;
	transform: none;
}

#learn-press-quiz-app .question-title {
	color: var(--nai-ink);
	letter-spacing: -0.01em;
}

#learn-press-quiz-app .question-index {
	color: var(--nai-teal);
}

/* Answer options: card per option, hairline border, teal selection. The
   LearnPress defaults here are #00adff dots and an #e1f5ff hover wash. */
.answer-options .answer-option {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	background: #ffffff;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.answer-options .answer-option:hover {
	background: rgba(14, 116, 144, 0.05);
	border-color: var(--nai-hairline-2);
}

#learn-press-quiz-app .answer-options .answer-option .option-title,
#learn-press-quiz-app .answer-options .answer-option .option-title-content,
.answer-options .answer-option .option-title {
	color: var(--nai-ink);
	font-size: 0.9375rem;
}

/* .option-title::before is a 3px rail down the left edge of the option, not a
   radio. LearnPress ships #ddd, and #00adff once the option is selected. */
.answer-options .answer-option .option-title::before {
	background: var(--nai-hairline);
	border: 0;
}

.answer-options .answer-option input[type="checkbox"]:checked ~ .option-title::before,
.answer-options .answer-option input[type="radio"]:checked ~ .option-title::before {
	background: var(--nai-teal);
}

/* The visible control is the input itself: LearnPress paints a 32px
   #f9fafc disc with a #cfcfcf border and a #00adff dot when checked. */
.answer-options .answer-option input[type="checkbox"],
.answer-options .answer-option input[type="radio"] {
	width: 24px;
	min-width: 24px;
	height: 24px;
	border: 1px solid var(--nai-hairline-2);
	background: #ffffff;
}

.answer-options .answer-option input[type="checkbox"]:checked,
.answer-options .answer-option input[type="radio"]:checked {
	border-color: var(--nai-teal);
}

.answer-options .answer-option input[type="radio"]:checked::after {
	background: var(--nai-teal);
	width: 10px;
	height: 10px;
}

.answer-options .answer-option input[type="checkbox"]::after {
	color: var(--nai-teal);
}

.answer-options .answer-option:has(input:checked) {
	background: rgba(14, 116, 144, 0.07);
	border-color: var(--nai-teal);
}

/* Graded states: seafoam correct, coral wrong. Replaces #3bb54a / #f00. */
.answer-options .answer-option.answered-correct,
.answer-options .answer-option.correct {
	background: rgba(52, 211, 153, 0.1);
	border-color: rgba(52, 211, 153, 0.55);
}

.answer-options .answer-option.answered-correct input[type="radio"]::after,
.answer-options .answer-option.answered-correct input[type="checkbox"]::after,
.answer-options .answer-option.correct input[type="radio"]::after {
	background: var(--nai-seafoam);
	color: var(--nai-seafoam);
}

.answer-options .answer-option.answered-wrong,
.answer-options .answer-option.wrong {
	background: rgba(239, 99, 81, 0.09);
	border-color: rgba(239, 99, 81, 0.5);
}

.answer-options .answer-option.answered-wrong input[type="radio"]::after,
.answer-options .answer-option.wrong input[type="radio"]::after {
	background: var(--nai-coral);
}

.answer-options .answer-option.answered-wrong input[type="checkbox"]::after,
.answer-options .answer-option.wrong input[type="checkbox"]::after {
	color: var(--nai-coral);
}

/* Question explanation block. */
#learn-press-quiz-app .question-explanation,
#learn-press-quiz-app .explanation-content {
	background: var(--nai-sand-2);
	border-left: 3px solid var(--nai-teal);
	border-radius: 0 4px 4px 0;
	color: var(--nai-ink);
}

/* Question pagination. These are a mix of <span> and <button>, so they have to
   be pulled back out of the generic pill treatment and given one shared look. */
#learn-press-quiz-app .questions-pagination .page-numbers,
#learn-press-quiz-app button.page-numbers,
#learn-press-quiz-app span.page-numbers,
.questions-pagination .page-numbers {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	color: var(--nai-teal);
	background: #ffffff;
	font-weight: 600;
	font-size: 0.875rem;
	padding: 8px 14px;
	min-width: 0;
	box-shadow: none;
	transform: none;
	text-transform: none;
	letter-spacing: 0;
}

#learn-press-quiz-app button.page-numbers:hover,
.questions-pagination button.page-numbers:hover {
	border-color: var(--nai-teal);
	background: rgba(14, 116, 144, 0.06);
	color: var(--nai-teal-dk);
	box-shadow: none;
	transform: none;
}

#learn-press-quiz-app .questions-pagination .page-numbers.current,
#learn-press-quiz-app span.page-numbers.current,
.questions-pagination .page-numbers.current {
	background: var(--nai-teal);
	border-color: var(--nai-teal);
	color: #ffffff;
}

#learn-press-quiz-app .questions-pagination .page-numbers.dots,
.questions-pagination .page-numbers.dots {
	border-color: transparent;
	color: var(--nai-ink-2);
}

/* Confirm modal. */
#lp-modal-window {
	border-radius: 4px;
	border: 1px solid var(--nai-hairline);
	box-shadow: 0 24px 60px rgba(6, 15, 26, 0.22);
}

#lp-modal-content {
	color: var(--nai-ink);
	font-weight: 600;
}

#lp-modal-overlay {
	background: rgba(6, 15, 26, 0.55);
}

/* Quiz result. */
.quiz-result .result-heading {
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--nai-teal);
}

.quiz-result .result-message {
	background: var(--nai-coral);
	border-radius: 999px;
	color: #ffffff;
	font-weight: 600;
	max-width: 320px;
	margin-left: auto;
	margin-right: auto;
}

.quiz-result.passed .result-message {
	background: var(--nai-seafoam);
	color: #06281c;
}

.quiz-result .result-grade .result-achieved {
	color: var(--nai-ink);
	border-bottom: 1px solid var(--nai-hairline);
}

.quiz-result.passed .result-grade .result-achieved,
.quiz-result.passed .result-message strong {
	color: var(--nai-teal);
}

.quiz-result .result-grade .result-require {
	color: var(--nai-ink-2);
}

/* The ring track is a ::before with a 10px #ccc border; the score arc is the
   SVG circle stroke. Both have to be recoloured or the dial stays grey. */
.quiz-result .result-grade::before {
	border-color: var(--nai-hairline);
}

.quiz-result .circle-progress-bar__circle,
.quiz-result .result-grade svg .circle-progress-bar__circle {
	stroke: var(--nai-seafoam);
}

.quiz-result.failed .circle-progress-bar__circle,
.quiz-result.failed .result-grade svg .circle-progress-bar__circle {
	stroke: var(--nai-coral);
}

.quiz-result .result-statistic .result-statistic-field + li {
	border-top: 1px solid var(--nai-hairline);
}

.quiz-result .result-statistic .result-statistic-field span {
	color: var(--nai-ink-2);
}

.quiz-result .result-statistic .result-statistic-field p {
	color: var(--nai-ink);
	font-weight: 600;
}

.quiz-result .result-statistic .result-statistic-field.result-questions-correct span::before {
	color: var(--nai-seafoam);
}

.quiz-result .result-statistic .result-statistic-field.result-questions-wrong span::before {
	color: var(--nai-coral);
}

/* Countdown alarm state, LearnPress ships #f00. */
.quiz-status .countdown .clock.x .circle-progress-bar__circle {
	stroke: var(--nai-coral);
}

/* --------------------------------------------------------------------------
   8. Profile.
   -------------------------------------------------------------------------- */

/* Tab rail styled like the site nav: mono, uppercase, small. */
.lp-profile-nav-tabs > li > a {
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nai-ink);
}

.lp-profile-nav-tabs > li {
	border: 1px solid var(--nai-hairline);
	border-bottom: 0;
	background: #ffffff;
}

.lp-profile-nav-tabs > li:last-child {
	border-bottom: 1px solid var(--nai-hairline);
}

.lp-profile-nav-tabs > li:first-child {
	border-radius: 4px 4px 0 0;
}

.lp-profile-nav-tabs > li:last-child {
	border-radius: 0 0 4px 4px;
}

.lp-profile-nav-tabs > li:hover {
	background: rgba(14, 116, 144, 0.05);
}

.lp-profile-nav-tabs > li.active,
.lp-profile-nav-tabs > li.active:hover {
	background: var(--nai-teal);
	border-color: var(--nai-teal);
}

.lp-profile-nav-tabs > li.active > a,
.lp-profile-nav-tabs > li.active > a i {
	color: #ffffff;
}

.lp-profile-nav-tabs > li > a i {
	color: var(--nai-teal);
}

.lp-profile-username {
	letter-spacing: -0.02em;
}

/* Statistic tiles. LearnPress ships iOS system colours here:
   #00C7BE, #AF52DE, #5856D6, #34C759, #FF3B30. None are in the palette. */
.dashboard-statistic__row .statistic-box,
#dashboard-statistic .statistic-box {
	background: #ffffff;
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
}

.statistic-box__icon span,
.statistic-box__icon .lp-icon-enrolled_courses,
.statistic-box__icon .lp-icon-total_course {
	background: rgba(14, 116, 144, 0.1);
	color: var(--nai-teal);
	border-radius: 12px;
}

.statistic-box__icon .lp-icon-in_progress_course,
.statistic-box__icon .lp-icon-student_in_progress {
	background: rgba(34, 211, 238, 0.12);
	color: #0891b2;
}

.statistic-box__icon .lp-icon-finished_courses,
.statistic-box__icon .lp-icon-published_course {
	background: rgba(6, 15, 26, 0.08);
	color: var(--nai-ink);
}

.statistic-box__icon .lp-icon-passed_courses,
.statistic-box__icon .lp-icon-student_completed {
	background: rgba(52, 211, 153, 0.16);
	color: #0f8a63;
}

.statistic-box__icon .lp-icon-failed_courses,
.statistic-box__icon .lp-icon-pending_course {
	background: rgba(239, 99, 81, 0.12);
	color: #c4402f;
}

.statistic-box__icon .lp-icon-total_student {
	background: rgba(14, 116, 144, 0.1);
	color: var(--nai-teal);
}

.statistic-box__text label {
	color: var(--nai-ink-2);
}

.statistic-box__text__number {
	color: var(--nai-ink);
	font-weight: 700;
}

/* Filter tabs above the table.
   Scoped to ul.learn-press-filters, NOT to .learn-press-course-tab-filters.
   That outer div also wraps the results table, so a descendant selector on it
   pushed mono-uppercase onto every course title link in the table body. */
ul.learn-press-filters > li > a,
.learn-press-tabs ul.learn-press-filters > li > a {
	font-family: var(--nai-mono);
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--nai-ink-2);
}

ul.learn-press-filters > li > a.active,
ul.learn-press-filters > li.active > a {
	color: var(--nai-teal);
	border-bottom-color: var(--nai-teal);
}

/* Tables. */
.lp-list-table {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	width: 100%;
}

.lp-list-table thead th,
.lp-list-table th {
	background: var(--nai-sand-2);
	color: var(--nai-ink);
	font-family: var(--nai-mono);
	font-size: 0.6875rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	border-bottom: 1px solid var(--nai-hairline);
}

.lp-list-table tbody td {
	border-bottom: 1px solid var(--nai-hairline);
	color: var(--nai-ink);
	vertical-align: middle;
}

.lp-list-table tbody tr:last-child td {
	border-bottom: 0;
}

.lp-list-table tbody tr:hover {
	background: rgba(14, 116, 144, 0.04);
}

/* Body cells stay sentence case in the page face, whatever the surrounding
   filter chrome does. */
.lp-list-table tbody a,
.lp-list-table .course-title,
.lp-list-table a {
	color: var(--nai-ink);
	font-weight: 600;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	text-transform: none;
	letter-spacing: 0;
}

.lp-list-table a:hover .course-title,
.lp-list-table a:hover {
	color: var(--nai-teal);
}

.lp-list-table .course-img img {
	border-radius: 4px;
	border: 1px solid var(--nai-hairline);
	display: block;
}

.lp-profile-content .lp-user-item,
.lp-list-table .lp-user-item {
	color: var(--nai-ink-2);
	font-size: 0.875rem;
}

/* Avatar edit affordance. */
.lp-btn-to-edit-avatar {
	background: #ffffff;
	border: 1px solid var(--nai-hairline);
	color: var(--nai-teal);
}

/* Pagination inside the profile. */
.lp-profile-content .learn-press-pagination .page-numbers {
	border: 1px solid var(--nai-hairline);
	border-radius: 4px;
	color: var(--nai-teal);
}

.lp-profile-content .learn-press-pagination .page-numbers.current {
	background: var(--nai-teal);
	border-color: var(--nai-teal);
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   9. Responsive.
   -------------------------------------------------------------------------- */

/* Wide content scrolls inside its own box instead of clipping. At 390 the
   profile table and both tab strips were cut off at the right edge. */
@media (max-width: 900px) {
	.lp-profile-content .lp_profile_course_progress,
	.lp-profile-content .profile-list-table,
	.lp-profile-content .learn-press-subtab-content > .lp-list-table,
	.lp-profile-content table.lp-list-table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.lp-profile-nav-tabs,
	.learn-press-course-tab-filters,
	.learn-press-filters {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}

	.lp-profile-nav-tabs > li,
	.learn-press-filters > li {
		flex: 0 0 auto;
	}
}

/* The in-course sidebar is 300px and the content column keeps its own width,
   so below ~1024px with a desktop user agent the lesson body is pushed off
   screen. LearnPress only closes the sidebar when wp_is_mobile() is true,
   which is user-agent based and therefore wrong behind a page cache. This
   makes the fallback viewport based. */
@media (max-width: 1024px) {
	body.course-item-popup #popup-content {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		flex: 1 1 100% !important;
	}

	body.course-item-popup #popup-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: min(320px, 86vw);
		flex: 0 0 auto;
		z-index: 10000;
		box-shadow: 0 0 50px rgba(6, 15, 26, 0.35);
		transition: transform 0.3s ease;
	}

	body.course-item-popup.lp-sidebar-toggle__close #popup-sidebar {
		transform: translateX(-100%);
	}

	body.course-item-popup #learn-press-content-item,
	body.course-item-popup .content-item-scrollable {
		width: 100%;
		max-width: 100%;
	}
}

/* Quiz status bar stacks on small screens; keep it legible. */
@media (max-width: 600px) {
	.quiz-status > div {
		row-gap: 8px;
		text-align: center;
	}

	.quiz-status .submit-quiz #button-submit-quiz {
		width: 100%;
	}

	.quiz-result .result-message {
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   10. Reduced motion, matching the parent site's block.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.learnpress-page .lp-button,
	body.learnpress-profile .lp-button,
	body.course-item-popup .lp-button,
	body.course-item-popup #popup-sidebar,
	.answer-options .answer-option {
		transition: none;
	}

	body.learnpress-page .lp-button:hover,
	body.learnpress-profile .lp-button:hover,
	body.course-item-popup .lp-button:hover {
		transform: none;
	}
}