/*
 * IPP E-Learning — frontend styles.
 *
 * Colours and typography follow the "Inclusive Pathways to Peace" Visual
 * Identity Guidelines:
 *
 *   Primary   Dark Blue #105a84 · Light Blue #9fd9ee · White #ffffff
 *   Accent    Turquoise #00ffff · Grey Turquoise #88ced0
 *   Type      Franklin Gothic Book (body), Avant Garde Gothic Condensed
 *             (headings), Arial as the approved alternative
 *
 * Turquoise and grey turquoise reach only 1.25:1 and 1.78:1 against white, so
 * they are used decoratively (fills, rules, badges) and never for text. Text
 * tones are tints of the official dark blue; the pass/fail colours are
 * functional signals rather than brand colours.
 *
 * Every combination below was checked to at least WCAG AA (4.5:1 for text,
 * 3:1 for form-control borders).
 *
 * Everything is scoped under .ipp-app so the plugin cannot leak styles into
 * the host theme. Colour scheme: the light palette is the default, because
 * this widget is embedded inside your theme and following the visitor's
 * operating system preference would put a dark panel inside a light page.
 * Use theme="dark" or theme="auto" on the shortcode to change that.
 */

.ipp-app {
	/* Official palette */
	--ipp-blue: #105a84;
	--ipp-blue-light: #9fd9ee;
	--ipp-turquoise: #00ffff;
	--ipp-turquoise-grey: #88ced0;

	/* Text — tints of the official dark blue */
	--ipp-ink: #0d2b3d;
	--ipp-ink-soft: #3c6273;
	--ipp-ink-faint: #4f7080;

	/* Surfaces */
	--ipp-bg: #ffffff;
	--ipp-bg-soft: #f2fafd;
	--ipp-bg-sink: #e2f3fa;
	--ipp-line: #bfe2f0;
	--ipp-line-soft: #daeef6;
	--ipp-line-strong: #3f7c9a;

	/* Roles */
	--ipp-brand: var(--ipp-blue);
	--ipp-brand-ink: #0b4162;
	--ipp-brand-soft: var(--ipp-blue-light);
	--ipp-on-brand: #ffffff;
	--ipp-accent: var(--ipp-blue);
	--ipp-accent-soft: #d9f2f3;
	--ipp-deco: var(--ipp-turquoise);
	--ipp-deco-soft: var(--ipp-turquoise-grey);
	--ipp-peace: var(--ipp-brand-ink);
	--ipp-peace-soft: #dff1f8;

	/* Functional signals, not brand colours */
	--ipp-good: #146b4a;
	--ipp-good-soft: #dcf1e7;
	--ipp-warn: #7a4a04;
	--ipp-warn-soft: #fdefd6;
	--ipp-bad: #a3241c;
	--ipp-bad-soft: #fbe3e1;

	/* Typography */
	--ipp-font: "Franklin Gothic Book", "Franklin Gothic Medium", "ITC Franklin Gothic", "Libre Franklin", Arial, Helvetica, sans-serif;
	--ipp-font-heading: "Avant Garde Gothic Condensed", "ITC Avant Garde Gothic", "Century Gothic", "URW Gothic", var(--ipp-font);

	--ipp-radius: 10px;
	--ipp-radius-lg: 16px;
	--ipp-shadow: 0 1px 2px rgba(13, 43, 61, .06), 0 8px 24px -12px rgba(13, 43, 61, .2);
	--ipp-gap: 1.5rem;
	--ipp-measure: 68ch;
	--ipp-logo-size: 170px;

	box-sizing: border-box;
	background: var(--ipp-bg);
	color: var(--ipp-ink);
	font-family: var(--ipp-font);
	font-size: 1rem;
	line-height: 1.65;
	-webkit-text-size-adjust: 100%;
}

/* Dark palette, applied only when the site opts in. */
.ipp-app--dark {
	--ipp-ink: #eaf7fd;
	--ipp-ink-soft: #a8cbdb;
	--ipp-ink-faint: #86a9ba;

	--ipp-bg: #0b2b3d;
	--ipp-bg-soft: #0f3a53;
	--ipp-bg-sink: #14496a;
	--ipp-line: #1f5b7e;
	--ipp-line-soft: #17475f;
	--ipp-line-strong: #6aa3bd;

	--ipp-brand: var(--ipp-blue-light);
	--ipp-brand-ink: #c7e9f6;
	--ipp-brand-soft: #123f5c;
	--ipp-on-brand: #0d2b3d;
	--ipp-accent: var(--ipp-blue-light);
	--ipp-accent-soft: #123f5c;
	--ipp-peace: var(--ipp-turquoise-grey);
	--ipp-peace-soft: #10404f;

	--ipp-good: #6fd6a8;
	--ipp-good-soft: #10362b;
	--ipp-warn: #e2ab5a;
	--ipp-warn-soft: #352a17;
	--ipp-bad: #f4938a;
	--ipp-bad-soft: #3a201f;

	--ipp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
}

@media (prefers-color-scheme: dark) {
	.ipp-app--auto {
		--ipp-ink: #eaf7fd;
		--ipp-ink-soft: #a8cbdb;
		--ipp-ink-faint: #86a9ba;

		--ipp-bg: #0b2b3d;
		--ipp-bg-soft: #0f3a53;
		--ipp-bg-sink: #14496a;
		--ipp-line: #1f5b7e;
		--ipp-line-soft: #17475f;
		--ipp-line-strong: #6aa3bd;

		--ipp-brand: var(--ipp-blue-light);
		--ipp-brand-ink: #c7e9f6;
		--ipp-brand-soft: #123f5c;
		--ipp-on-brand: #0d2b3d;
		--ipp-accent: var(--ipp-blue-light);
		--ipp-accent-soft: #123f5c;
		--ipp-peace: var(--ipp-turquoise-grey);
		--ipp-peace-soft: #10404f;

		--ipp-good: #6fd6a8;
		--ipp-good-soft: #10362b;
		--ipp-warn: #e2ab5a;
		--ipp-warn-soft: #352a17;
		--ipp-bad: #f4938a;
		--ipp-bad-soft: #3a201f;

		--ipp-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -12px rgba(0, 0, 0, .6);
	}
}

/*
 * Opt-in break-out for themes with a narrow content column.
 *
 * !important is deliberate: block themes constrain every child of
 * .is-layout-constrained with `margin-left: auto !important`, and this rule
 * only applies when the site owner has explicitly asked for width="wide".
 */
.ipp-app--wide {
	margin-left: calc(50% - min(37.5rem, 47vw)) !important;
	margin-right: auto !important;
	max-width: none !important;
	width: min(75rem, 94vw);
}

.ipp-app *,
.ipp-app *::before,
.ipp-app *::after {
	box-sizing: inherit;
}

.ipp-app :where(h2, h3, h4, h5) {
	color: var(--ipp-ink);
	font-family: var(--ipp-font-heading);
	letter-spacing: .005em;
	line-height: 1.25;
	margin: 0;
	text-wrap: balance;
}

.ipp-app p {
	margin: 0 0 1em;
}

.ipp-app a {
	color: var(--ipp-brand);
}

.ipp-app :focus-visible {
	outline: 3px solid var(--ipp-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.ipp-noscript {
	background: var(--ipp-warn-soft);
	border: 1px solid var(--ipp-warn);
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink);
	padding: 1.25rem;
}

/* ------------------------------------------------------------------ buttons */

.ipp-btn {
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	font: inherit;
	font-weight: 600;
	line-height: 1.2;
	padding: .7em 1.4em;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}

.ipp-btn:disabled {
	cursor: not-allowed;
	opacity: .55;
}

.ipp-btn--primary {
	background: var(--ipp-brand);
	border-color: var(--ipp-brand);
	color: var(--ipp-on-brand);
}

.ipp-btn--primary:not(:disabled):hover {
	background: var(--ipp-brand-ink);
	border-color: var(--ipp-brand-ink);
}

.ipp-btn--ghost {
	border-color: var(--ipp-line);
	color: var(--ipp-brand);
}

.ipp-btn--ghost:not(:disabled):hover {
	background: var(--ipp-bg-soft);
	border-color: var(--ipp-brand);
}

.ipp-btn--block {
	width: 100%;
}

.ipp-linkbtn {
	appearance: none;
	background: none;
	border: 0;
	color: var(--ipp-ink-soft);
	cursor: pointer;
	font: inherit;
	font-size: .85em;
	padding: 0;
	text-decoration: underline;
}

.ipp-linkbtn:hover {
	color: var(--ipp-brand);
}

/* --------------------------------------------------------------------- gate */

.ipp-gate {
	background: var(--ipp-bg);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius-lg);
	overflow: hidden;
}

.ipp-gate__hero {
	background: linear-gradient(160deg, var(--ipp-blue-light), var(--ipp-bg-soft));
	border-bottom: 1px solid var(--ipp-line);
	padding: clamp(1.5rem, 4vw, 3rem);
}

/*
 * Themes very often force `img { width: 100% }` inside post content, which
 * beats a single class on specificity, so the logo is pinned to its intended
 * size explicitly. Change --ipp-logo-size to resize it.
 */
.ipp-app img {
	height: auto;
	max-width: 100%;
}

.ipp-app .ipp-gate__logo {
	display: block;
	height: auto !important;
	margin: 0 0 1.25rem;
	max-width: var(--ipp-logo-size) !important;
	min-width: 0;
	width: auto !important;
}

.ipp-gate__eyebrow {
	color: var(--ipp-brand-ink);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 .75rem;
	text-transform: uppercase;
}

.ipp-gate__title {
	font-size: clamp(1.6rem, 4.5vw, 2.5rem);
	margin: 0 0 .5rem;
}

.ipp-gate__subtitle {
	color: var(--ipp-ink-soft);
	font-size: clamp(1rem, 2.2vw, 1.2rem);
	margin: 0 0 1rem;
}

.ipp-gate__intro {
	margin: 0;
	max-width: var(--ipp-measure);
}

.ipp-gate__facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.ipp-gate__facts li {
	background: var(--ipp-bg);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	padding: .9rem 1rem;
}

.ipp-gate__fact-value {
	color: var(--ipp-brand);
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.ipp-gate__fact-label {
	color: var(--ipp-ink-soft);
	font-size: .85rem;
}

.ipp-gate__body {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
	padding: clamp(1.5rem, 4vw, 3rem);
}

@media (min-width: 900px) {
	.ipp-gate__body {
		grid-template-columns: 1.15fr .85fr;
	}
}

.ipp-gate__h3 {
	font-size: 1.25rem;
	margin: 0 0 1.25rem;
}

.ipp-gate__module {
	border-left: 3px solid var(--ipp-brand-soft);
	margin-bottom: 1.75rem;
	padding-left: 1.25rem;
}

.ipp-gate__module-no {
	color: var(--ipp-accent);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .3rem;
	text-transform: uppercase;
}

.ipp-gate__module-title {
	font-size: 1.1rem;
	margin: 0 0 .5rem;
}

.ipp-gate__module-summary {
	color: var(--ipp-ink-soft);
	font-size: .95rem;
}

.ipp-gate__module-objectives {
	color: var(--ipp-ink-soft);
	font-size: .9rem;
	margin: 0;
	padding-left: 1.2rem;
}

.ipp-gate__note {
	background: var(--ipp-bg-soft);
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink-soft);
	font-size: .92rem;
	margin: 1.5rem 0 0;
	padding: 1rem 1.25rem;
}

/* --------------------------------------------------------------------- form */

.ipp-form {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
	position: sticky;
	top: 1.5rem;
}

.ipp-form__title {
	font-size: 1.25rem;
	margin: 0 0 .5rem;
}

.ipp-form__lede {
	color: var(--ipp-ink-soft);
	font-size: .92rem;
	margin-bottom: 1.5rem;
}

.ipp-form__row {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 520px) {
	.ipp-form__row { grid-template-columns: 1fr 1fr; }
}

.ipp-field {
	margin-bottom: 1rem;
}

.ipp-field label {
	display: block;
	font-size: .9rem;
	font-weight: 600;
	margin-bottom: .35rem;
}

.ipp-field input[type="text"],
.ipp-field input[type="email"],
.ipp-field select {
	background: var(--ipp-bg);
	border: 1px solid var(--ipp-line-strong);
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink);
	font: inherit;
	padding: .6em .8em;
	width: 100%;
}

.ipp-field input:focus,
.ipp-field select:focus {
	border-color: var(--ipp-brand);
}

.ipp-field--check {
	align-items: flex-start;
	display: flex;
	gap: .65rem;
	margin: 1.25rem 0;
}

.ipp-field--check input {
	flex: 0 0 auto;
	margin-top: .35em;
	width: 1.1em;
	height: 1.1em;
}

.ipp-field--check label {
	font-size: .88rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

.ipp-field__help {
	color: var(--ipp-ink-faint);
	font-size: .82rem;
	margin: .35rem 0 0;
}

.ipp-req { color: var(--ipp-bad); }
.ipp-optional { color: var(--ipp-ink-faint); font-weight: 400; }

.ipp-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.ipp-form__error {
	background: var(--ipp-bad-soft);
	border: 1px solid var(--ipp-bad);
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink);
	font-size: .9rem;
	margin: 0 0 1rem;
	padding: .75rem 1rem;
}

.ipp-form__foot {
	color: var(--ipp-ink-faint);
	font-size: .8rem;
	margin: 1rem 0 0;
}

/* ------------------------------------------------------------------- course */

.ipp-course[hidden] { display: none; }

.ipp-course__bar {
	align-items: flex-end;
	border-bottom: 2px solid var(--ipp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
}

.ipp-course__eyebrow {
	color: var(--ipp-ink-faint);
	font-size: .78rem;
	letter-spacing: .06em;
	margin: 0 0 .2rem;
	text-transform: uppercase;
}

.ipp-course__title {
	font-size: clamp(1.2rem, 3vw, 1.6rem);
}

.ipp-course__meter { min-width: 240px; }

.ipp-meter__track {
	background: var(--ipp-bg-sink);
	border-radius: 999px;
	height: 10px;
	overflow: hidden;
}

.ipp-meter__fill {
	background: linear-gradient(90deg, var(--ipp-brand), var(--ipp-deco-soft));
	border-radius: 999px;
	height: 100%;
	transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	.ipp-meter__fill { transition: none; }
}

.ipp-meter__label {
	display: flex;
	font-size: .82rem;
	justify-content: space-between;
	margin: .4rem 0 0;
}

.ipp-meter__count { color: var(--ipp-ink-soft); }
.ipp-meter__percent { color: var(--ipp-brand); font-weight: 700; }

.ipp-course__who {
	color: var(--ipp-ink-faint);
	display: flex;
	flex-wrap: wrap;
	font-size: .85rem;
	gap: .75rem;
	margin: .6rem 0 0;
}

.ipp-toc-toggle {
	align-items: center;
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-weight: 600;
	gap: .6rem;
	margin-bottom: 1rem;
	padding: .65rem 1rem;
	width: 100%;
}

.ipp-toc-toggle__icon {
	background:
		linear-gradient(currentColor, currentColor) center 2px / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center 7px / 100% 2px no-repeat,
		linear-gradient(currentColor, currentColor) center 12px / 100% 2px no-repeat;
	height: 14px;
	width: 18px;
}

@media (min-width: 900px) {
	.ipp-toc-toggle { display: none; }
}

.ipp-layout {
	display: grid;
	gap: var(--ipp-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.ipp-layout { grid-template-columns: 300px minmax(0, 1fr); }
}

/* ---------------------------------------------------------------------- toc */

.ipp-toc {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius-lg);
	padding: 1rem;
}

@media (max-width: 899px) {
	.ipp-toc[hidden] { display: none; }
}

@media (min-width: 900px) {
	.ipp-toc {
		align-self: start;
		max-height: calc(100vh - 3rem);
		overflow-y: auto;
		position: sticky;
		top: 1.5rem;
	}
	.ipp-toc[hidden] { display: block; }
}

.ipp-toc__module + .ipp-toc__module { margin-top: 1.25rem; }

.ipp-toc__module-head {
	align-items: baseline;
	border-bottom: 1px solid var(--ipp-line);
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	margin-bottom: .5rem;
	padding-bottom: .4rem;
}

.ipp-toc__module-title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	margin: 0;
	text-transform: uppercase;
}

.ipp-toc__module-count {
	color: var(--ipp-ink-faint);
	font-size: .78rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

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

.ipp-toc__link {
	align-items: flex-start;
	background: none;
	border: 0;
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink-soft);
	cursor: pointer;
	display: flex;
	font: inherit;
	font-size: .88rem;
	gap: .55rem;
	line-height: 1.4;
	padding: .5rem .6rem;
	text-align: left;
	width: 100%;
}

.ipp-toc__link:hover {
	background: var(--ipp-bg-sink);
	color: var(--ipp-ink);
}

.ipp-toc__link.is-current {
	background: var(--ipp-brand-soft);
	color: var(--ipp-brand-ink);
	font-weight: 600;
}

.ipp-toc__mark {
	border: 2px solid var(--ipp-line);
	border-radius: 50%;
	flex: 0 0 auto;
	height: 15px;
	margin-top: .25em;
	position: relative;
	width: 15px;
}

.ipp-toc__link.is-done .ipp-toc__mark {
	background: var(--ipp-good);
	border-color: var(--ipp-good);
}

.ipp-toc__link.is-done .ipp-toc__mark::after {
	border: solid var(--ipp-on-brand);
	border-width: 0 2px 2px 0;
	content: "";
	height: 7px;
	left: 4px;
	position: absolute;
	top: 1px;
	transform: rotate(45deg);
	width: 4px;
}

.ipp-toc__link.is-quiz .ipp-toc__mark { border-radius: 3px; }

.ipp-toc__text { flex: 1 1 auto; }

.ipp-toc__badge {
	background: var(--ipp-deco-soft);
	border-radius: 4px;
	color: var(--ipp-ink);
	display: inline-block;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	margin-left: .35rem;
	padding: .05em .4em;
	text-transform: uppercase;
	vertical-align: middle;
}

/* --------------------------------------------------------------------- main */

.ipp-main { min-width: 0; }
.ipp-main:focus { outline: none; }

.ipp-lesson__head {
	border-bottom: 1px solid var(--ipp-line-soft);
	margin-bottom: 1.75rem;
	padding-bottom: 1.25rem;
}

.ipp-lesson__crumb {
	color: var(--ipp-ink-faint);
	font-size: .8rem;
	letter-spacing: .05em;
	margin: 0 0 .4rem;
	text-transform: uppercase;
}

.ipp-lesson__title {
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	margin: 0 0 .5rem;
}

.ipp-lesson__meta {
	color: var(--ipp-ink-faint);
	font-size: .85rem;
	margin: 0;
}

.ipp-lesson__lede {
	color: var(--ipp-ink-soft);
	font-size: 1.08rem;
	max-width: var(--ipp-measure);
}

.ipp-prose { max-width: var(--ipp-measure); }
.ipp-prose > :last-child { margin-bottom: 0; }

.ipp-heading {
	margin: 2.25rem 0 .85rem;
}

.ipp-heading--3 { font-size: 1.3rem; }
.ipp-heading--4 { font-size: 1.1rem; }

.ipp-list {
	margin: 0 0 1.25rem;
	max-width: var(--ipp-measure);
	padding-left: 1.4rem;
}

.ipp-list li { margin-bottom: .5rem; }

.ipp-list--check {
	list-style: none;
	padding-left: 0;
}

.ipp-list--check li {
	padding-left: 1.75rem;
	position: relative;
}

.ipp-list--check li::before {
	border: solid var(--ipp-good);
	border-width: 0 2px 2px 0;
	content: "";
	height: 9px;
	left: .35rem;
	position: absolute;
	top: .45em;
	transform: rotate(45deg);
	width: 5px;
}

.ipp-list--quest { list-style: none; padding-left: 0; }
.ipp-list--quest li {
	border-left: 2px solid var(--ipp-brand-soft);
	margin-bottom: .75rem;
	padding-left: 1rem;
}

.ipp-list__title {
	font-weight: 700;
	margin: 1.75rem 0 .75rem;
}

/* ----------------------------------------------------------------- callouts */

.ipp-callout {
	background: var(--ipp-bg-soft);
	border-left: 4px solid var(--ipp-brand);
	border-radius: 0 var(--ipp-radius) var(--ipp-radius) 0;
	margin: 1.75rem 0;
	max-width: var(--ipp-measure);
	padding: 1.15rem 1.35rem;
}

.ipp-callout__label {
	color: var(--ipp-brand);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .5rem;
	text-transform: uppercase;
}

.ipp-callout__body > :last-child { margin-bottom: 0; }
.ipp-callout ul, .ipp-callout ol { margin-bottom: 0; padding-left: 1.3rem; }

.ipp-callout--insight { background: var(--ipp-brand-soft); border-color: var(--ipp-brand); }
.ipp-callout--insight .ipp-callout__label { color: var(--ipp-brand-ink); }

.ipp-callout--peace { background: var(--ipp-peace-soft); border-color: var(--ipp-peace); }
.ipp-callout--peace .ipp-callout__label { color: var(--ipp-peace); }

.ipp-callout--warning { background: var(--ipp-warn-soft); border-color: var(--ipp-warn); }
.ipp-callout--warning .ipp-callout__label { color: var(--ipp-warn); }

.ipp-callout--tip { background: var(--ipp-good-soft); border-color: var(--ipp-good); }
.ipp-callout--tip .ipp-callout__label { color: var(--ipp-good); }

.ipp-callout--practice,
.ipp-callout--example { background: var(--ipp-accent-soft); border-color: var(--ipp-accent); }
.ipp-callout--practice .ipp-callout__label,
.ipp-callout--example .ipp-callout__label { color: var(--ipp-accent); }

.ipp-callout--trainer {
	background: var(--ipp-bg-sink);
	border-color: var(--ipp-ink-soft);
}
.ipp-callout--trainer .ipp-callout__label { color: var(--ipp-ink-soft); }

/* ------------------------------------------------------------- objectives */

.ipp-objectives {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	margin: 0 0 1.75rem;
	max-width: var(--ipp-measure);
	padding: 1.15rem 1.35rem;
}

.ipp-objectives__title {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	margin: 0 0 .6rem;
	text-transform: uppercase;
}

.ipp-objectives__list {
	margin: 0;
	padding-left: 1.2rem;
}

.ipp-objectives__list li { margin-bottom: .35rem; }

/* ------------------------------------------------------------- keypoints */

.ipp-keypoints {
	background: var(--ipp-brand-soft);
	border-radius: var(--ipp-radius);
	margin: 2.25rem 0 1rem;
	max-width: var(--ipp-measure);
	padding: 1.25rem 1.5rem;
}

.ipp-keypoints__title {
	color: var(--ipp-brand-ink);
	font-size: 1rem;
	margin: 0 0 .6rem;
}

.ipp-keypoints__list { margin: 0; padding-left: 1.2rem; }
.ipp-keypoints__list li { margin-bottom: .35rem; }

/* ---------------------------------------------------------------- tables */

.ipp-tablewrap {
	margin: 1.75rem 0;
	max-width: 100%;
	overflow-x: auto;
}

.ipp-table {
	border-collapse: collapse;
	font-size: .92rem;
	min-width: 32rem;
	width: 100%;
}

.ipp-table caption {
	caption-side: top;
	color: var(--ipp-ink-faint);
	font-size: .82rem;
	padding-bottom: .5rem;
	text-align: left;
}

.ipp-table th,
.ipp-table td {
	border: 1px solid var(--ipp-line);
	padding: .65rem .8rem;
	text-align: left;
	vertical-align: top;
}

.ipp-table thead th {
	background: var(--ipp-bg-sink);
	font-size: .82rem;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.ipp-table tbody th { background: var(--ipp-bg-soft); font-weight: 600; }
.ipp-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--ipp-bg-soft) 55%, transparent); }

/* ----------------------------------------------------------------- cards */

.ipp-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
}

@media (min-width: 640px) {
	.ipp-cards--2 { grid-template-columns: repeat(2, 1fr); }
	.ipp-cards--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
	.ipp-cards--3 { grid-template-columns: repeat(3, 1fr); }
}

.ipp-card {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	padding: 1rem 1.15rem;
}

.ipp-card__title {
	font-size: .98rem;
	font-weight: 700;
	margin: 0 0 .4rem;
}

.ipp-card__text { font-size: .92rem; }
.ipp-card__text > :last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- steps */

.ipp-steps {
	counter-reset: ippstep;
	list-style: none;
	margin: 1.5rem 0;
	max-width: var(--ipp-measure);
	padding: 0;
}

.ipp-step {
	counter-increment: ippstep;
	margin-bottom: 1.25rem;
	padding-left: 3rem;
	position: relative;
}

.ipp-step::before {
	align-items: center;
	background: var(--ipp-brand);
	border-radius: 50%;
	color: var(--ipp-on-brand);
	content: counter(ippstep);
	display: flex;
	font-size: .9rem;
	font-weight: 700;
	height: 2rem;
	justify-content: center;
	left: 0;
	position: absolute;
	top: -.1rem;
	width: 2rem;
}

.ipp-step__title { font-weight: 700; margin: 0 0 .3rem; }
.ipp-step__text > :last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- accordion */

.ipp-accordion {
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	margin: 1.5rem 0;
	max-width: var(--ipp-measure);
	overflow: hidden;
}

.ipp-accordion__item + .ipp-accordion__item { border-top: 1px solid var(--ipp-line); }

.ipp-accordion__summary {
	background: var(--ipp-bg-soft);
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	padding: .85rem 1.15rem .85rem 2.4rem;
	position: relative;
}

.ipp-accordion__summary::-webkit-details-marker { display: none; }

.ipp-accordion__summary::before {
	border: solid var(--ipp-brand);
	border-width: 0 2px 2px 0;
	content: "";
	height: 7px;
	left: 1.15rem;
	position: absolute;
	top: 1.25em;
	transform: rotate(-45deg) translateY(-2px);
	transition: transform .2s ease;
	width: 7px;
}

.ipp-accordion__item[open] > .ipp-accordion__summary::before {
	transform: rotate(45deg) translateY(-2px);
}

.ipp-accordion__summary:hover { background: var(--ipp-bg-sink); }

.ipp-accordion__body { padding: .25rem 1.15rem 1.15rem; }
.ipp-accordion__body > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- quote */

.ipp-quote {
	border-left: 4px solid var(--ipp-accent);
	margin: 2rem 0;
	max-width: var(--ipp-measure);
	padding-left: 1.35rem;
}

.ipp-quote blockquote { margin: 0; }

.ipp-quote p {
	font-size: 1.2rem;
	font-style: italic;
	margin-bottom: .5rem;
}

.ipp-quote figcaption {
	color: var(--ipp-ink-faint);
	font-size: .85rem;
}

.ipp-divider {
	background: var(--ipp-line);
	border: 0;
	height: 1px;
	margin: 2.5rem 0;
}

/* ------------------------------------------------------- knowledge check */

.ipp-check {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	margin: 2rem 0;
	max-width: var(--ipp-measure);
	padding: 1.25rem 1.4rem;
}

.ipp-check__label {
	color: var(--ipp-accent);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .6rem;
	text-transform: uppercase;
}

.ipp-check__fieldset { border: 0; margin: 0; padding: 0; }

.ipp-check__question {
	font-weight: 600;
	margin-bottom: .85rem;
	padding: 0;
}

.ipp-check__options { list-style: none; margin: 0 0 1rem; padding: 0; }

.ipp-check__option {
	align-items: flex-start;
	display: grid;
	gap: 0 .6rem;
	grid-template-columns: auto 1fr;
	margin-bottom: .55rem;
}

.ipp-check__option input {
	margin-top: .4em;
	width: 1.05em;
	height: 1.05em;
}

.ipp-check__option label { cursor: pointer; }

.ipp-check__hint {
	color: var(--ipp-ink-soft);
	font-size: .85rem;
	grid-column: 2;
	padding-top: .2rem;
}

.ipp-check__option.is-right label { color: var(--ipp-good); font-weight: 600; }
.ipp-check__option.is-wrong label { color: var(--ipp-bad); }

.ipp-check__result {
	font-weight: 600;
	margin: .75rem 0 0;
	min-height: 1.5em;
}

.ipp-check__result.is-right { color: var(--ipp-good); }
.ipp-check__result.is-wrong { color: var(--ipp-bad); }
.ipp-check__result.is-partial { color: var(--ipp-warn); }

.ipp-check__explanation {
	background: var(--ipp-bg);
	border-radius: var(--ipp-radius);
	font-size: .92rem;
	margin-top: .85rem;
	padding: .9rem 1.1rem;
}

/* ----------------------------------------------------------- reflection */

.ipp-reflect {
	border: 1px dashed var(--ipp-line);
	border-radius: var(--ipp-radius);
	margin: 2rem 0;
	max-width: var(--ipp-measure);
	padding: 1.25rem 1.4rem;
}

.ipp-reflect__label {
	color: var(--ipp-peace);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .5rem;
	text-transform: uppercase;
}

.ipp-reflect__prompt { display: block; font-weight: 600; margin-bottom: .75rem; }

.ipp-reflect__input {
	background: var(--ipp-bg);
	border: 1px solid var(--ipp-line-strong);
	border-radius: var(--ipp-radius);
	color: var(--ipp-ink);
	font: inherit;
	padding: .7em .85em;
	resize: vertical;
	width: 100%;
}

.ipp-reflect__note {
	color: var(--ipp-ink-faint);
	font-size: .78rem;
	margin: .45rem 0 0;
}

/* ------------------------------------------------------------- session */

.ipp-session,
.ipp-handout {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius-lg);
	margin: 2rem 0;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ipp-session__eyebrow {
	color: var(--ipp-accent);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .3rem;
	text-transform: uppercase;
}

.ipp-session__title { font-size: 1.4rem; margin: 0 0 1rem; }

.ipp-session__meta {
	border-bottom: 1px solid var(--ipp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
}

.ipp-session__meta dt {
	color: var(--ipp-ink-faint);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.ipp-session__meta dd { font-weight: 700; margin: 0; }

.ipp-session__h {
	border-bottom: 2px solid var(--ipp-brand-soft);
	font-size: 1rem;
	letter-spacing: .04em;
	margin: 1.75rem 0 .85rem;
	padding-bottom: .3rem;
	text-transform: uppercase;
}

.ipp-session__steps {
	counter-reset: ippsess;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ipp-session__step {
	border-left: 3px solid var(--ipp-brand-soft);
	counter-increment: ippsess;
	margin-bottom: 1.5rem;
	padding-left: 1.15rem;
}

.ipp-session__step-title { margin: 0 0 .45rem; }

.ipp-session__step-name { font-weight: 700; }

.ipp-session__step-time {
	background: var(--ipp-brand-soft);
	border-radius: 999px;
	color: var(--ipp-brand-ink);
	font-size: .78rem;
	font-weight: 600;
	margin-left: .4rem;
	padding: .15em .7em;
	white-space: nowrap;
}

.ipp-session__print { margin: 1.75rem 0 0; }

.ipp-handout__title { font-size: 1.15rem; margin: 0 0 .5rem; }
.ipp-handout__intro { color: var(--ipp-ink-soft); font-size: .92rem; }

.ipp-handout__cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
	list-style: none;
	margin: 1.25rem 0 0;
	padding: 0;
}

@media (min-width: 720px) {
	.ipp-handout__cards { grid-template-columns: repeat(2, 1fr); }
}

.ipp-handout__card {
	background: var(--ipp-bg);
	border: 2px dashed var(--ipp-line);
	border-radius: var(--ipp-radius);
	padding: 1rem 1.15rem;
}

.ipp-handout__card-title {
	font-size: .95rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}

.ipp-handout__card p:last-child,
.ipp-handout__card ul:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- quiz */

.ipp-quiz { max-width: var(--ipp-measure); }

.ipp-quiz__intro {
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.ipp-quiz__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
}

.ipp-quiz__facts li { font-size: .88rem; }
.ipp-quiz__facts strong { display: block; font-size: 1.25rem; }

.ipp-quiz__q {
	border: 1px solid var(--ipp-line);
	border-radius: var(--ipp-radius);
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.4rem;
}

.ipp-quiz__q-no {
	color: var(--ipp-ink-faint);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .07em;
	margin: 0 0 .5rem;
	text-transform: uppercase;
}

.ipp-quiz__q-text { font-weight: 600; margin-bottom: .35rem; padding: 0; }

.ipp-quiz__q-hint {
	color: var(--ipp-ink-faint);
	font-size: .82rem;
	margin: 0 0 .85rem;
}

.ipp-quiz__fieldset { border: 0; margin: 0; padding: 0; }

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

.ipp-quiz__option {
	align-items: flex-start;
	display: grid;
	gap: 0 .65rem;
	grid-template-columns: auto 1fr;
	margin-bottom: .5rem;
}

.ipp-quiz__option input { margin-top: .4em; width: 1.05em; height: 1.05em; }
.ipp-quiz__option label { cursor: pointer; }

.ipp-quiz__q.is-unanswered { border-color: var(--ipp-bad); }
.ipp-quiz__q.is-correct { background: var(--ipp-good-soft); border-color: var(--ipp-good); }
.ipp-quiz__q.is-incorrect { background: var(--ipp-bad-soft); border-color: var(--ipp-bad); }

.ipp-quiz__verdict {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	margin: .85rem 0 .35rem;
	text-transform: uppercase;
}

.ipp-quiz__q.is-correct .ipp-quiz__verdict { color: var(--ipp-good); }
.ipp-quiz__q.is-incorrect .ipp-quiz__verdict { color: var(--ipp-bad); }

.ipp-quiz__feedback { font-size: .92rem; margin: 0; }

.ipp-quiz__option.is-answer label { font-weight: 700; }

.ipp-quiz__actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1.5rem;
}

.ipp-quiz__error {
	background: var(--ipp-bad-soft);
	border: 1px solid var(--ipp-bad);
	border-radius: var(--ipp-radius);
	font-size: .9rem;
	margin: 1rem 0 0;
	padding: .75rem 1rem;
}

.ipp-result {
	border-radius: var(--ipp-radius-lg);
	margin-bottom: 1.75rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.ipp-result--pass { background: var(--ipp-good-soft); border: 1px solid var(--ipp-good); }
.ipp-result--fail { background: var(--ipp-warn-soft); border: 1px solid var(--ipp-warn); }

.ipp-result__badge {
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .1em;
	margin: 0 0 .5rem;
	text-transform: uppercase;
}

.ipp-result--pass .ipp-result__badge { color: var(--ipp-good); }
.ipp-result--fail .ipp-result__badge { color: var(--ipp-warn); }

.ipp-result__score { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 700; margin: 0 0 .35rem; }
.ipp-result__mark { color: var(--ipp-ink-soft); font-size: .9rem; margin: 0; }

/* --------------------------------------------------------- certificate */

.ipp-certpanel {
	background: linear-gradient(160deg, var(--ipp-blue-light), var(--ipp-bg-soft));
	border: 1px solid var(--ipp-brand);
	border-radius: var(--ipp-radius-lg);
	margin: 2rem 0;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	text-align: center;
}

.ipp-certpanel__title { font-size: 1.4rem; margin: 0 0 .5rem; }
.ipp-certpanel__text { color: var(--ipp-ink-soft); margin: 0 auto 1.5rem; max-width: 46ch; }
.ipp-certpanel__code {
	background: var(--ipp-bg);
	border-radius: var(--ipp-radius);
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 1.05rem;
	letter-spacing: .05em;
	margin-bottom: 1.25rem;
	padding: .5rem 1rem;
}

.ipp-certpanel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	justify-content: center;
}

/* ------------------------------------------------------------- footer nav */

.ipp-lessonnav {
	align-items: center;
	border-top: 1px solid var(--ipp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

.ipp-lessonnav__side {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}

.ipp-complete {
	align-items: center;
	background: var(--ipp-bg-soft);
	border: 1px solid var(--ipp-line);
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	font-weight: 600;
	gap: .6rem;
	padding: .55rem 1.2rem;
}

.ipp-complete input { width: 1.05em; height: 1.05em; }
.ipp-complete.is-done { background: var(--ipp-good-soft); border-color: var(--ipp-good); color: var(--ipp-good); }

/* ------------------------------------------------------------------ misc */

.ipp-loading {
	color: var(--ipp-ink-faint);
	padding: 3rem 0;
	text-align: center;
}

.ipp-toast {
	background: var(--ipp-ink);
	border-radius: var(--ipp-radius);
	bottom: 1.5rem;
	box-shadow: var(--ipp-shadow);
	color: var(--ipp-bg);
	font-size: .9rem;
	left: 50%;
	max-width: 90vw;
	padding: .75rem 1.25rem;
	position: fixed;
	transform: translateX(-50%);
	z-index: 9999;
}

.ipp-toast[hidden] { display: none; }

.ipp-verifyform { margin: 1.5rem 0; max-width: 30rem; }
.ipp-verifyform label { display: block; font-weight: 600; margin-bottom: .35rem; }
.ipp-verifyform__row { display: flex; gap: .5rem; }
.ipp-verifyform input {
	border: 1px solid #cddde6;
	border-radius: 10px;
	flex: 1 1 auto;
	font: inherit;
	padding: .6em .8em;
}

.ipp-verifybox {
	border-radius: 10px;
	margin-top: 1rem;
	padding: 1rem 1.25rem;
}

.ipp-verifybox--ok { background: #dcf1e7; border: 1px solid #1c7a52; }
.ipp-verifybox--bad { background: #fbe3e1; border: 1px solid #a32b23; }

.ipp-verifybox__badge {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin: 0 0 .35rem;
	text-transform: uppercase;
}

/* ------------------------------------------------------------------ print */

@media print {
	.ipp-toc,
	.ipp-toc-toggle,
	.ipp-course__meter,
	.ipp-lessonnav,
	.ipp-session__print,
	.ipp-toast,
	.ipp-reflect__note {
		display: none !important;
	}

	.ipp-layout { display: block; }

	.ipp-app {
		--ipp-bg: #fff;
		--ipp-bg-soft: #fff;
		--ipp-bg-sink: #f4f4f4;
		--ipp-ink: #000;
		color: #000;
	}

	.ipp-session,
	.ipp-handout,
	.ipp-callout,
	.ipp-accordion { break-inside: avoid; }

	.ipp-accordion__body { display: block !important; }

	.ipp-handout__card { break-inside: avoid; page-break-inside: avoid; }
}