/* Yousmle Score Boost — program dashboard & widgets.
   Everything is namespaced under .ysb-wrap so theme styles stay out. */

/* Self-hosted variable font (latin subset, SIL OFL) used everywhere —
   Reza's call: no serifs, they're harder to read. */
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url('../fonts/SourceSans3.woff2') format('woff2');
}

@font-face {
	font-family: 'Source Sans 3';
	font-style: italic;
	font-weight: 200 900;
	font-display: swap;
	src: url('../fonts/SourceSans3-Italic.woff2') format('woff2');
}

/* Page background in blank-canvas mode: soft cool ground with a faint
   light wash behind the app bar so the white cards lift off the page. */
body.ysb-canvas {
	margin: 0;
	background-color: #edf1f7;
	background-image: radial-gradient(1100px 480px at 50% -120px, #e2e9f4 0%, rgba(226, 233, 244, 0) 70%);
	background-repeat: no-repeat;
}

.ysb-wrap {
	--ysb-navy: #12233f;
	--ysb-navy2: #1a3a63;
	--ysb-gold: #e8a33d;
	--ysb-gold-dark: #c98a25;
	--ysb-ink: #1c2733;
	--ysb-muted: #5b6b7c;
	--ysb-bg: #f2f5f9;
	--ysb-card: #ffffff;
	--ysb-line: #e3e9f0;
	--ysb-green: #2e9e6b;
	--ysb-amber-bg: #fdf3e3;
	--ysb-radius: 12px;
	--ysb-font-sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	font-family: var(--ysb-font-sans);
	color: var(--ysb-ink);
	line-height: 1.6;
	max-width: 1200px;
	margin: 0 auto;
	padding: 28px 20px 90px;
	box-sizing: border-box;
}

.ysb-wrap *,
.ysb-wrap *::before,
.ysb-wrap *::after {
	box-sizing: border-box;
}

.ysb-wrap h1,
.ysb-wrap h2,
.ysb-wrap h3,
.ysb-wrap p {
	margin: 0;
}

.ysb-wrap button {
	/* Not the `font` shorthand: that would outrank the single-class button
	   styles below and wipe their size/weight. */
	font-family: inherit;
	cursor: pointer;
}

/* Scoped reset — keep common theme styles from bleeding into the app.
   (For full isolation use the "Score Boost App — Full Screen" template.) */
.ysb-wrap h1,
.ysb-wrap h2,
.ysb-wrap h3,
.ysb-wrap h4,
.ysb-wrap h5 {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	padding: 0;
	border: none;
}

.ysb-wrap button {
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	line-height: 1.4;
}

.ysb-wrap a {
	box-shadow: none;
}

.ysb-wrap input,
.ysb-wrap select,
.ysb-wrap textarea {
	max-width: 100%;
	box-shadow: none;
	line-height: 1.4;
}

.ysb-wrap ul,
.ysb-wrap ol {
	padding-left: 0;
}

.ysb-lesson-content ul,
.ysb-lesson-content ol {
	padding-left: 0;
	list-style-position: outside;
}

/* ------------------------------------------------------------------ layout */

.ysb-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 350px;
	gap: 28px;
	align-items: start;
}

.ysb-sidebar {
	display: grid;
	gap: 18px;
	min-width: 0;
}

.ysb-main {
	min-width: 0;
}

/* Mobile-only slot for the lead CTA — see the 1024px breakpoint below,
   where it swaps places with the sidebar's copy of the same card. */
.ysb-shortcut-mobile-slot {
	display: none;
	margin-top: 16px;
}

/* ------------------------------------------------------------------ shared */

.ysb-kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ysb-muted);
	margin-bottom: 8px;
}

.ysb-kicker.gold {
	color: var(--ysb-gold);
}

.ysb-card {
	background: var(--ysb-card);
	border: 1px solid var(--ysb-line);
	border-radius: var(--ysb-radius);
	padding: 22px 20px;
}

.ysb-wrap .ysb-btn-gold {
	display: inline-block;
	background: var(--ysb-gold);
	color: var(--ysb-navy);
	font-weight: 700;
	font-size: 14px;
	border: none;
	border-radius: 9px;
	padding: 12px 22px;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s;
}

.ysb-wrap .ysb-btn-gold:hover {
	background: var(--ysb-gold-dark);
	color: var(--ysb-navy);
}

.ysb-wrap .ysb-btn-ghost {
	background: transparent;
	border: 1.5px solid var(--ysb-line);
	color: var(--ysb-muted);
	border-radius: 9px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
}

.ysb-wrap .ysb-btn-ghost:hover {
	border-color: var(--ysb-gold);
	color: var(--ysb-ink);
}

.ysb-wrap .ysb-btn-ghost-light {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	border-radius: 9px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.ysb-wrap .ysb-btn-ghost-light:hover {
	background: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.ysb-wrap .ysb-linkbtn {
	background: none;
	border: none;
	color: var(--ysb-gold-dark);
	text-decoration: underline;
	font-size: 13px;
	padding: 0;
}

.ysb-wrap .ysb-applybtn {
	display: block;
	background: var(--ysb-gold);
	color: var(--ysb-navy);
	font-weight: 700;
	text-decoration: none;
	padding: 13px 18px;
	border-radius: 9px;
	font-size: 14px;
	text-align: center;
	transition: background 0.15s;
}

.ysb-wrap .ysb-applybtn:hover {
	background: var(--ysb-gold-dark);
	color: var(--ysb-navy);
}

/* ------------------------------------------------------------------ header */

.ysb-welcome {
	font-size: clamp(26px, 3.4vw, 34px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
	text-align: center;
}

.ysb-sub {
	color: var(--ysb-muted);
	font-size: 15px;
	margin-top: 6px;
}

.ysb-progress {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 18px 0 22px;
}

.ysb-progress-track {
	flex: 1;
	height: 7px;
	background: var(--ysb-line);
	border-radius: 4px;
	overflow: hidden;
}

.ysb-progress-fill {
	height: 100%;
	background: var(--ysb-gold);
	border-radius: 4px;
	transition: width 0.4s ease;
}

.ysb-progress-count {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ysb-muted);
	white-space: nowrap;
}

/* -------------------------------------------------------------------- hero */

.ysb-hero-card {
	background: var(--ysb-navy);
	color: #fff;
	border-radius: var(--ysb-radius);
	padding: 22px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.ysb-hero-info {
	flex: 1;
	min-width: 240px;
}

.ysb-hero-title {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	text-wrap: balance;
}

.ysb-hero-meta {
	color: #c7d3e2;
	font-size: 13.5px;
	margin-top: 6px;
}

.ysb-hero-meta .ysb-dot {
	margin: 0 6px;
}

.ysb-hero-btn {
	flex-shrink: 0;
}

/* --------------------------------------------------------------- list head */

.ysb-list-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 26px 0 12px;
	flex-wrap: wrap;
}

.ysb-list-head h2 {
	font-size: 18px;
	font-weight: 800;
}

.ysb-unlock-note {
	font-size: 12.5px;
	color: var(--ysb-muted);
}

.ysb-part {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ysb-gold-dark);
	margin: 20px 4px 10px;
}

.ysb-list > .ysb-part:first-child {
	margin-top: 4px;
}

/* -------------------------------------------------------------- lesson rows */

.ysb-row {
	background: var(--ysb-card);
	border: 1px solid var(--ysb-line);
	border-radius: var(--ysb-radius);
	margin-bottom: 8px;
	overflow: hidden;
}

.ysb-row.is-upnow {
	border-color: var(--ysb-navy);
	box-shadow: 0 0 0 1px var(--ysb-navy);
}

.ysb-row.open {
	box-shadow: 0 6px 24px rgba(15, 36, 64, 0.08);
}

.ysb-row-head {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 14px 18px;
	background: none;
	border: none;
	text-align: left;
	color: inherit;
}

.ysb-row:not(.is-locked) .ysb-row-head:hover {
	background: #fbfcfd;
}

.ysb-row.is-locked .ysb-row-head {
	cursor: default;
}

.ysb-row.is-locked .ysb-row-title,
.ysb-row.is-locked .ysb-row-num {
	color: var(--ysb-muted);
}

.ysb-row-num {
	flex-shrink: 0;
	width: 84px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ysb-navy2);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ysb-row-check {
	display: none;
	color: var(--ysb-green);
	font-weight: 800;
}

.ysb-row.is-done .ysb-row-check {
	display: inline;
}

.ysb-row-tt {
	flex: 1;
	min-width: 0;
	display: block;
}

.ysb-row-title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.ysb-row-peek {
	display: block;
	font-size: 12.5px;
	color: var(--ysb-muted);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ysb-row.open .ysb-row-peek {
	display: none;
}

.ysb-row-min {
	flex-shrink: 0;
	font-size: 12.5px;
	color: var(--ysb-muted);
	white-space: nowrap;
}

.ysb-pill {
	flex-shrink: 0;
	font-size: 11.5px;
	font-weight: 600;
	border-radius: 999px;
	padding: 4px 12px;
	white-space: nowrap;
	background: var(--ysb-bg);
	border: 1px solid var(--ysb-line);
	color: var(--ysb-muted);
}

.ysb-row.is-upnow .ysb-pill {
	background: var(--ysb-navy);
	border-color: var(--ysb-navy);
	color: #fff;
}

.ysb-row.is-done .ysb-pill {
	background: #e9f7f0;
	border-color: #cdeadd;
	color: var(--ysb-green);
}

.ysb-row-body[hidden] {
	display: none;
}

.ysb-row-body {
	padding: 4px 26px 26px;
	border-top: 1px solid var(--ysb-line);
}

/* ------------------------------------------------------------ lesson content */

.ysb-lesson-content {
	font-family: var(--ysb-font-sans);
	font-size: 16.5px;
	line-height: 1.7;
	max-width: 72ch;
}

.ysb-lesson-content a.ysb-applybtn,
.ysb-lesson-content a.ysb-applybtn:hover {
	/* Outranks the generic lesson-link color so CTA buttons inside lesson
	   bodies keep navy text on the gold background. */
	color: var(--ysb-navy);
	font-family: var(--ysb-font-sans);
}

.ysb-lesson-content p {
	margin: 14px 0;
}

.ysb-lesson-content h4 {
	font-size: 17px;
	margin: 18px 0 8px;
}

.ysb-lesson-content ul,
.ysb-lesson-content ol {
	margin: 0 0 14px 22px;
	padding: 0;
}

.ysb-lesson-content li {
	margin-bottom: 9px;
	font-size: 16px;
}

.ysb-lesson-content a {
	color: var(--ysb-gold-dark);
}

.ysb-hl {
	background: linear-gradient(transparent 55%, rgba(232, 163, 61, 0.35) 55%);
}

.ysb-pull {
	font-size: 19px;
	line-height: 1.4;
	border-left: 3px solid var(--ysb-gold);
	padding: 4px 0 4px 18px;
	margin: 16px 0;
	color: var(--ysb-navy);
}

.ysb-videobox {
	position: relative;
	background: #000;
	border-radius: 10px;
	aspect-ratio: 16 / 9;
	margin: 16px 0;
	overflow: hidden;
}

.ysb-videobox iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ysb-slot {
	background: var(--ysb-navy);
	border-radius: 10px;
	padding: 20px;
	margin: 16px 0;
	color: #c7d3e2;
	font-family: var(--ysb-font-sans);
	font-size: 13.5px;
	text-align: center;
}

.ysb-slot b {
	color: #fff;
}

.ysb-ps {
	font-size: 14.5px;
	color: var(--ysb-muted);
	border-top: 1px solid var(--ysb-line);
	margin-top: 18px;
	padding-top: 14px;
}

/* In-lesson callout pointing at another tab (e.g. the Specialty Explorer
   push in Lesson 12). Placed after the lesson link rule so its link
   styling wins. */
.ysb-lesson-callout {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #eef3fb;
	border: 1px solid #dbe5f3;
	border-radius: 10px;
	padding: 12px 16px;
	margin: 16px 0;
	font-family: var(--ysb-font-sans);
}

.ysb-lesson-callout p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #33465e;
}

.ysb-lesson-callout a {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 13px;
	color: var(--ysb-navy);
	text-decoration: none;
	white-space: nowrap;
	background: #fff;
	border: 1.5px solid var(--ysb-navy2);
	border-radius: 8px;
	padding: 8px 14px;
	transition: background 0.15s, color 0.15s;
}

.ysb-lesson-callout a:hover {
	background: var(--ysb-navy);
	color: #fff;
}

@media (max-width: 640px) {
	.ysb-lesson-callout {
		flex-wrap: wrap;
	}
}

.ysb-cta {
	background: var(--ysb-navy);
	color: #fff;
	border-radius: var(--ysb-radius);
	padding: 24px 26px;
	margin: 18px 0;
	font-family: var(--ysb-font-sans);
}

.ysb-cta h3 {
	font-family: var(--ysb-font-sans);
	font-size: 20px;
	margin-bottom: 10px;
	color: #fff;
}

.ysb-cta p {
	color: #c7d3e2;
	font-size: 14px;
	margin-bottom: 16px;
	line-height: 1.6;
}

.ysb-cta .ysb-applybtn {
	display: inline-block;
}

.ysb-complete-btn {
	margin-top: 16px;
}

.ysb-complete-btn .ysb-complete-done-label {
	display: none;
}

.ysb-row.is-done .ysb-complete-btn {
	background: #e9f7f0;
	color: var(--ysb-green);
	cursor: default;
}

.ysb-row.is-done .ysb-complete-btn .ysb-complete-label {
	display: none;
}

.ysb-row.is-done .ysb-complete-btn .ysb-complete-done-label {
	display: inline;
}

/* ------------------------------------------------------------------ nudges */

.ysb-nudge {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	background: #eef3fb;
	border: 1px solid #dbe5f3;
	border-radius: var(--ysb-radius);
	padding: 12px 16px;
	margin-bottom: 8px;
}

.ysb-nudge p {
	font-size: 13px;
	color: #33465e;
	line-height: 1.5;
}

.ysb-wrap .ysb-nudge-btn {
	flex-shrink: 0;
	display: inline-block;
	background: #fff;
	border: 1.5px solid var(--ysb-navy2);
	color: var(--ysb-navy);
	border-radius: 8px;
	padding: 8px 14px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}

.ysb-wrap .ysb-nudge-btn:hover {
	background: var(--ysb-navy);
	color: #fff;
}

@media (max-width: 640px) {
	.ysb-nudge {
		flex-wrap: wrap;
	}
}

/* -------------------------------------------------------------- checkpoints */

.ysb-checkpoint {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: var(--ysb-amber-bg);
	border: 1px solid #f3dfb9;
	border-radius: var(--ysb-radius);
	padding: 14px 18px;
	margin-bottom: 8px;
	font-size: 13.5px;
	line-height: 1.5;
}

.ysb-checkpoint-num {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ysb-gold);
	color: var(--ysb-navy);
	font-weight: 800;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.ysb-checkpoint p {
	flex: 1;
	color: #6b5322;
}

.ysb-checkpoint p b {
	color: #4d3a12;
}

.ysb-checkpoint a {
	flex-shrink: 0;
	font-weight: 700;
	font-size: 13px;
	color: #8f6114;
	text-decoration: none;
	white-space: nowrap;
	margin-top: 2px;
}

.ysb-checkpoint a:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------------ shortcut card */

.ysb-shortcut {
	background: #ffb548;
	border-color: #ffb548;
	color: var(--ysb-navy);
	text-align: center;
}

.ysb-shortcut .ysb-kicker.gold {
	color: var(--ysb-navy);
}

.ysb-shortcut h3 {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.3;
	color: var(--ysb-navy);
	margin-bottom: 16px;
}

.ysb-shortcut p {
	color: var(--ysb-navy);
	font-size: 13.5px;
	line-height: 1.6;
	margin-top: 16px;
}

.ysb-shortcut .ysb-applybtn {
	background: var(--ysb-navy);
	color: #fff;
	font-size: 18px;
	cursor: pointer;
	transition: background-color 180ms ease-out;
}

.ysb-shortcut .ysb-applybtn:hover {
	background: #36445c;
	color: #fff;
}

/* ----------------------------------------------------------------- exam card */

.ysb-date-input {
	width: 100%;
	padding: 10px 12px;
	border: 1.5px solid var(--ysb-line);
	border-radius: 9px;
	font: inherit;
	font-size: 14px;
	color: var(--ysb-ink);
	background: #fff;
}

.ysb-date-input:focus {
	outline: none;
	border-color: var(--ysb-gold);
}

.ysb-exam-big {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 14px 0 6px;
}

.ysb-exam-days {
	font-size: 46px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.ysb-exam-days-label {
	font-size: 14px;
	font-weight: 600;
	color: var(--ysb-muted);
}

.ysb-exam-note {
	font-size: 12.5px;
	color: var(--ysb-muted);
	line-height: 1.55;
}

.ysb-exam-note a {
	color: var(--ysb-gold-dark);
	font-weight: 600;
}

.ysb-exam-pick {
	font-size: 13.5px;
	color: var(--ysb-ink);
	margin-bottom: 10px;
}

.ysb-exam-hint {
	font-size: 12px;
	color: var(--ysb-muted);
	margin-top: 8px;
}

.ysb-exam-saved {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ysb-green);
	margin-top: 8px;
}

/* ------------------------------------------------------------- app shell */

.ysb-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--ysb-card);
	border: 1px solid var(--ysb-line);
	border-radius: var(--ysb-radius);
	padding: 12px 18px;
	margin-bottom: 20px;
}

.ysb-logo {
	display: inline-flex;
	line-height: 0;
	flex-shrink: 1;
	min-width: 0;
}

.ysb-logo img {
	height: 32px;
	width: auto;
	display: block;
	max-width: 100%;
	object-fit: contain;
}

.ysb-app > .ysb-welcome {
	overflow-wrap: anywhere;
	margin: 0 0 12px;
}

.ysb-exam-chip {
	display: flex;
	align-items: baseline;
	gap: 7px;
	background: var(--ysb-navy);
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 9px 16px;
	flex-shrink: 0;
	transition: background 0.15s;
}

.ysb-exam-chip:hover {
	background: var(--ysb-navy2);
}

.ysb-exam-chip-num {
	font-size: 19px;
	font-weight: 800;
	color: var(--ysb-gold);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.ysb-exam-chip-num:empty {
	display: none;
}

.ysb-exam-chip-label {
	font-size: 12px;
	font-weight: 600;
	color: #c7d3e2;
	white-space: nowrap;
}

.ysb-nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--ysb-line);
	margin-bottom: 22px;
}

.ysb-nav button {
	display: flex;
	align-items: center;
	gap: 8px;
	background: none;
	border: none;
	border-bottom: 2.5px solid transparent;
	padding: 10px 14px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ysb-muted);
	margin-bottom: -1px;
}

.ysb-nav button svg {
	width: 17px;
	height: 17px;
}

.ysb-nav button:hover {
	color: var(--ysb-ink);
}

.ysb-nav button.is-active {
	color: var(--ysb-navy);
	border-bottom-color: var(--ysb-gold);
}

.ysb-panel {
	display: none;
}

.ysb-panel.is-active {
	display: block;
}

.ysb-narrow {
	max-width: 640px;
	margin: 0 auto;
	display: grid;
	gap: 16px;
}

.ysb-seg {
	display: flex;
	background: #e8edf4;
	border-radius: 10px;
	padding: 4px;
	gap: 4px;
}

.ysb-seg button {
	flex: 1;
	border: none;
	background: none;
	border-radius: 8px;
	padding: 9px 10px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ysb-muted);
}

.ysb-seg button.is-active {
	background: #fff;
	color: var(--ysb-navy);
	box-shadow: 0 1px 3px rgba(15, 36, 64, 0.12);
}

/* -------------------------------------------------------------- exam sheet */

.ysb-sheet {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.ysb-sheet[hidden] {
	display: none;
}

.ysb-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 36, 64, 0.55);
}

.ysb-sheet-card {
	position: relative;
	width: 100%;
	max-width: 400px;
	display: grid;
	gap: 10px;
}

.ysb-wrap .ysb-sheet-close {
	background: #fff;
}

/* ------------------------------------------------------------- onboarding */

.ysb-onb {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: linear-gradient(150deg, rgba(18, 35, 63, 0.97), rgba(26, 58, 99, 0.97));
}

.ysb-onb[hidden] {
	display: none;
}

.ysb-onb-card {
	width: 100%;
	max-width: 440px;
	background: #fff;
	border-radius: 16px;
	padding: 28px 26px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
	max-height: 88vh;
	overflow-y: auto;
}

.ysb-onb-dots {
	display: flex;
	gap: 6px;
	margin: 6px 0 16px;
}

.ysb-onb-dots span {
	width: 22px;
	height: 4px;
	border-radius: 2px;
	background: var(--ysb-line);
}

.ysb-onb-dots span.on {
	background: var(--ysb-gold);
}

.ysb-onb-title {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 6px;
	color: var(--ysb-ink);
}

.ysb-onb-sub {
	font-size: 13.5px;
	color: var(--ysb-muted);
	margin: 0 0 14px;
}

.ysb-onb-input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--ysb-line);
	border-radius: 9px;
	font: inherit;
	font-size: 15px;
	margin-bottom: 10px;
	background: #fff;
	color: var(--ysb-ink);
}

.ysb-onb-input:focus {
	outline: none;
	border-color: var(--ysb-gold);
}

.ysb-onb-input.ysb-input-err {
	border-color: #dc2626;
}

.ysb-onb-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-bottom: 8px;
}

.ysb-onb-grid .ysb-quiz-opt {
	margin-bottom: 0;
}

.ysb-onb .ysb-btn-gold {
	width: 100%;
}

.ysb-onb-skip {
	display: block;
	margin: 12px auto 0;
}

/* --------------------------------------------------------- score predictor */

.ysb-sp-title {
	font-size: 15px;
	font-weight: 800;
	margin: 2px 0 12px;
}

.ysb-sp-title:empty {
	display: none;
}

.ysb-sp-body .ysb-btn-gold {
	width: 100%;
	margin-top: 4px;
}

.ysb-sp-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.ysb-sp-check {
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 9px 13px;
	background: var(--ysb-bg);
	border: 1px solid var(--ysb-line);
	border-radius: 8px;
	font-size: 13px;
	cursor: pointer;
}

.ysb-sp-eyebrow {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ysb-muted);
	margin: 0 0 4px;
	font-weight: 700;
}

.ysb-sp-hero {
	text-align: center;
}

.ysb-sp-range {
	font-size: 44px;
	font-weight: 800;
	color: var(--ysb-navy);
	line-height: 1.05;
	font-variant-numeric: tabular-nums;
}

.ysb-sp-context {
	font-size: 13px;
	color: #374151;
	margin-top: 8px;
	text-align: left;
}

.ysb-sp-context strong {
	color: var(--ysb-navy);
}

.ysb-sp-lead {
	font-size: 13px;
	font-weight: 700;
	margin: 0 0 8px;
}

.ysb-sp-symptoms {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

.ysb-sp-symptoms li {
	padding: 9px 12px;
	background: #fff;
	border-left: 3px solid var(--ysb-navy2);
	border-radius: 4px;
	font-size: 12.5px;
	font-style: italic;
	color: #374151;
}

.ysb-sp-fix {
	padding: 10px 12px;
	background: #fff;
	border-radius: 6px;
	font-size: 12.5px;
	color: #374151;
	margin: 0 0 8px;
}

.ysb-sp-cta {
	display: grid;
	gap: 8px;
	justify-items: center;
}

.ysb-sp-cta .ysb-applybtn {
	width: 100%;
}

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

.ysb-quiz-segments {
	display: flex;
	gap: 5px;
	margin-bottom: 14px;
}

.ysb-quiz-segments span {
	flex: 1;
	height: 4px;
	border-radius: 2px;
	background: var(--ysb-line);
}

.ysb-quiz-segments span.on {
	background: var(--ysb-navy2);
}

.ysb-quiz-q {
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	margin-bottom: 12px;
}

.ysb-wrap .ysb-quiz-opt {
	display: block;
	width: 100%;
	text-align: left;
	background: #fff;
	border: 1.5px solid var(--ysb-line);
	border-radius: 9px;
	padding: 11px 14px;
	font-size: 13.5px;
	margin-bottom: 8px;
	color: var(--ysb-ink);
	transition: border-color 0.15s;
}

.ysb-wrap .ysb-quiz-opt:hover {
	border-color: var(--ysb-navy2);
}

.ysb-quiz-verdict h4 {
	font-size: 15px;
	font-weight: 800;
	margin: 0 0 8px;
}

.ysb-quiz-verdict p {
	font-size: 13px;
	color: var(--ysb-muted);
	margin-bottom: 12px;
}

.ysb-quiz-restart {
	margin-top: 10px;
}

/* ------------------------------------------------------- explorer / planner */

.ysb-se-sub {
	font-size: 13px;
	color: var(--ysb-muted);
	margin-bottom: 14px;
}

.ysb-field {
	margin-bottom: 14px;
}

.ysb-field label {
	display: block;
	font-weight: 600;
	font-size: 13px;
	color: #374151;
}

.ysb-field-hint {
	display: block;
	font-size: 11.5px;
	font-weight: 400;
	color: var(--ysb-muted);
	margin: 2px 0 4px;
}

.ysb-field select,
.ysb-field input[type='number'] {
	width: 100%;
	margin-top: 5px;
	padding: 10px 12px;
	border: 1.5px solid var(--ysb-line);
	border-radius: 9px;
	font-size: 14px;
	background: #fff;
	color: var(--ysb-ink);
	-webkit-appearance: none;
	appearance: none;
}

.ysb-field select {
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center;
	padding-right: 32px;
}

.ysb-field select:focus,
.ysb-field input:focus {
	outline: none;
	border-color: var(--ysb-gold);
}

.ysb-se-results {
	margin-top: 6px;
}

.ysb-se-card {
	background: var(--ysb-bg);
	border-radius: 10px;
	padding: 16px;
	margin-bottom: 12px;
	animation: ysbSlideUp 0.35s ease-out;
}

@keyframes ysbSlideUp {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.ysb-se-card {
		animation: none;
	}
	.ysb-progress-fill {
		transition: none;
	}
}

.ysb-se-card-header {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ysb-muted);
	margin-bottom: 8px;
}

.ysb-se-card h5 {
	font-size: 14.5px;
	font-weight: 700;
	margin: 0 0 10px;
	color: var(--ysb-ink);
}

.ysb-se-card p {
	font-size: 13px;
	color: #4b5563;
}

.ysb-stat-line {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	border-bottom: 1px solid var(--ysb-line);
	font-size: 12.5px;
}

.ysb-stat-line:last-child {
	border-bottom: none;
}

.ysb-stat-label {
	color: var(--ysb-muted);
}

.ysb-stat-val {
	font-weight: 700;
	white-space: nowrap;
}

.ysb-stat-val.green {
	color: #16a34a;
}

.ysb-stat-val.red {
	color: #dc2626;
}

.ysb-big-num {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.15;
}

.ysb-big-num.red {
	color: #dc2626;
}

.ysb-caption {
	font-size: 12px;
	color: var(--ysb-muted);
	margin-top: 3px;
}

.ysb-divider {
	height: 1px;
	background: var(--ysb-line);
	margin: 12px 0;
}

.ysb-score-track {
	position: relative;
	height: 9px;
	background: linear-gradient(to right, #ef4444, #f59e0b 35%, #22c55e 65%, #3b82f6);
	border-radius: 5px;
	/* room for the "You" label above and "Avg Matched" below */
	margin: 46px 4px 52px;
}

.ysb-score-pin {
	position: absolute;
	top: -6px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	border: 3px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
	transform: translateX(-50%);
	transition: left 0.4s ease;
}

.ysb-score-pin.you {
	background: var(--ysb-navy);
	z-index: 2;
}

.ysb-score-pin.avg {
	background: #3b82f6;
	z-index: 1;
}

.ysb-score-pin-label {
	position: absolute;
	top: 26px;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10px;
	font-weight: 700;
	white-space: nowrap;
	text-align: center;
	line-height: 1.25;
}

.ysb-score-pin-label.above {
	top: auto;
	bottom: 26px;
}

.ysb-score-pin.you .ysb-score-pin-label {
	color: var(--ysb-navy);
}

.ysb-score-pin.avg .ysb-score-pin-label {
	color: #3b82f6;
}

.ysb-callout {
	margin-top: 10px;
	padding: 10px 13px;
	border-radius: 8px;
	font-size: 12.5px;
	line-height: 1.45;
}

.ysb-callout.info {
	background: #eff6ff;
	border-left: 3px solid #3b82f6;
	color: #1e40af;
}

.ysb-callout.warm {
	background: #f0fdf4;
	border-left: 3px solid #22c55e;
	color: #166534;
}

.ysb-callout.amber {
	background: #fef3c7;
	border-left: 3px solid #f59e0b;
	color: #92400e;
}

.ysb-se-card.closing {
	background: linear-gradient(135deg, var(--ysb-navy) 0%, #2e2e5e 100%);
	color: #fff;
	text-align: center;
}

.ysb-se-card.closing .ysb-se-card-header {
	color: rgba(255, 255, 255, 0.5);
}

.ysb-se-card.closing h5 {
	color: #fff;
}

.ysb-se-card.closing p {
	color: rgba(255, 255, 255, 0.8);
}

.ysb-gap-badge {
	display: inline-block;
	background: rgba(255, 255, 255, 0.12);
	padding: 4px 16px;
	border-radius: 8px;
	font-weight: 800;
	font-size: 19px;
	color: #fbbf24;
	margin: 8px 0;
}

.ysb-per-day {
	display: inline-block;
	background: #fef2f2;
	color: #991b1b;
	font-weight: 800;
	font-size: 14px;
	padding: 4px 12px;
	border-radius: 6px;
	margin-top: 6px;
}

.ysb-se-sources {
	font-size: 10.5px;
	color: #b0b5c0;
	margin-top: 14px;
	line-height: 1.5;
	text-align: center;
}

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

.ysb-gate-wrap {
	display: flex;
	justify-content: center;
	padding-top: 48px;
}

.ysb-gate-inner {
	display: grid;
	justify-items: center;
	gap: 22px;
	width: 100%;
	max-width: 460px;
}

.ysb-gate-logo img {
	height: 36px;
}

.ysb-gate-card {
	background: var(--ysb-card);
	border: 1px solid var(--ysb-line);
	border-radius: 14px;
	padding: 34px 30px;
	max-width: 460px;
	width: 100%;
	box-shadow: 0 10px 40px rgba(15, 36, 64, 0.08);
}

.ysb-gate-title {
	font-size: 26px;
	font-weight: 800;
	margin-bottom: 8px;
}

.ysb-gate-sub {
	font-size: 14px;
	color: var(--ysb-muted);
	margin-bottom: 18px;
}

.ysb-gate-card form {
	display: grid;
	gap: 10px;
}

.ysb-gate-card input {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--ysb-line);
	border-radius: 9px;
	font: inherit;
	font-size: 15px;
}

.ysb-gate-card input:focus {
	outline: none;
	border-color: var(--ysb-gold);
}

.ysb-gate-err {
	color: #dc2626;
	font-size: 13px;
}

/* ------------------------------------------------------- save-link banner */

.ysb-save-banner {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 9975;
	max-width: 360px;
	background: #fff;
	border: 1px solid var(--ysb-line, #e3e9f0);
	border-top: 3px solid var(--ysb-gold, #e8a33d);
	border-radius: 12px;
	padding: 16px 40px 14px 18px;
	box-shadow: 0 12px 40px rgba(15, 36, 64, 0.18);
	font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	animation: ysbSlideUp 0.35s ease-out;
}

/* Literal colors: the banner may be appended outside .ysb-wrap, where the
   --ysb-* variables are not defined. */
.ysb-save-banner .ysb-kicker {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #5b6b7c;
	margin: 0 0 6px;
}

.ysb-save-banner .ysb-kicker.gold {
	color: #e8a33d;
}

.ysb-save-banner-text {
	margin: 0 0 10px;
	font-size: 13.5px;
	line-height: 1.5;
	color: #1c2733;
}

.ysb-save-banner-actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ysb-save-banner-actions .ysb-btn-gold {
	display: inline-block;
	background: #e8a33d;
	color: #12233f;
	font-weight: 700;
	font-size: 13px;
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	cursor: pointer;
}

.ysb-save-banner-actions .ysb-linkbtn {
	background: none;
	border: none;
	color: #c98a25;
	text-decoration: underline;
	font-size: 13px;
	padding: 0;
	cursor: pointer;
}

.ysb-save-banner-close {
	position: absolute;
	top: 8px;
	right: 10px;
	background: none;
	border: none;
	font-size: 20px;
	line-height: 1;
	color: #5b6b7c;
	cursor: pointer;
	padding: 4px;
}

@media (max-width: 1024px) {
	.ysb-save-banner {
		left: 12px;
		right: 12px;
		max-width: none;
		/* clear the fixed bottom nav + iPhone home indicator */
		bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}
}

/* --------------------------------------------------------------- standalone */

.ysb-standalone {
	max-width: 560px;
	padding-bottom: 30px;
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 1024px) {
	.ysb-layout {
		grid-template-columns: 1fr;
	}

	/* Lead CTA relocates above the lesson list on mobile, so hide the
	   sidebar's copy and show the one docked under the welcome subtitle. */
	.ysb-sidebar .ysb-shortcut {
		display: none;
	}

	.ysb-shortcut-mobile-slot {
		display: block;
	}

	/* App mode: nav docks to the bottom of the screen. The compound
	   selector outranks the plain .ysb-wrap padding shorthand in the
	   640px block below. */
	.ysb-wrap.ysb-app {
		padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
	}

	.ysb-nav {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9980;
		background: var(--ysb-navy);
		border-bottom: none;
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		margin: 0;
		padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
		gap: 0;
		box-shadow: 0 -6px 24px rgba(15, 36, 64, 0.25);
	}

	.ysb-nav button {
		flex: 1;
		flex-direction: column;
		gap: 3px;
		padding: 7px 4px;
		margin-bottom: 0;
		border-bottom: none;
		border-radius: 10px;
		color: #8fa2ba;
		font-size: 11px;
	}

	.ysb-nav button svg {
		width: 21px;
		height: 21px;
	}

	.ysb-nav button.is-active {
		color: var(--ysb-gold);
		border-bottom-color: transparent;
		background: rgba(255, 255, 255, 0.07);
	}

	.ysb-welcome {
		font-size: 22px;
	}

	.ysb-topbar {
		padding: 10px 14px;
		margin-bottom: 16px;
		gap: 10px;
	}

	.ysb-logo img {
		height: 26px;
	}

	.ysb-exam-chip {
		gap: 5px;
		padding: 8px 12px;
	}

	.ysb-exam-chip-num {
		font-size: 16px;
	}

	.ysb-exam-chip-label {
		font-size: 10.5px;
	}

	/* Exam sheet slides up from the bottom, app style. */
	.ysb-sheet {
		align-items: flex-end;
		padding: 0;
	}

	.ysb-sheet-card {
		max-width: none;
		background: #fff;
		border-radius: 16px 16px 0 0;
		padding: 14px 14px calc(14px + env(safe-area-inset-bottom, 0px));
	}

	.ysb-sheet-card .ysb-card {
		border: none;
		padding: 8px 6px;
	}
}

@media (max-width: 640px) {
	.ysb-wrap {
		padding: 18px 14px 60px;
	}

	.ysb-row-head {
		flex-wrap: wrap;
		gap: 8px;
		padding: 13px 14px;
	}

	.ysb-row-num {
		width: auto;
		order: 1;
	}

	.ysb-row-min {
		order: 2;
		margin-left: auto;
	}

	.ysb-pill {
		order: 3;
	}

	.ysb-row-tt {
		order: 4;
		flex-basis: 100%;
	}

	.ysb-row-peek {
		white-space: normal;
	}

	.ysb-row-body {
		padding: 4px 16px 22px;
	}

	.ysb-hero-card {
		padding: 18px;
	}

	.ysb-hero-btn {
		width: 100%;
	}

	.ysb-checkpoint {
		flex-wrap: wrap;
	}

	.ysb-lesson-content {
		font-size: 15.5px;
	}
}