/* ==========================================================================
   CourseOS — student-facing styles
   Everything is scoped under .cos so a theme cannot bleed in and CourseOS
   cannot bleed out. Tokens are overridable from CourseOS > Settings.
   ========================================================================== */

.cos {
	--cos-brand: #2098FC;
	--cos-brand-soft: rgba(32, 152, 252, .1);
	--cos-brand-ink: #FFFFFF;
	--cos-brand-deep: #1276C9;
	--cos-ink: #0B1220;
	--cos-muted: #5B6B7F;
	--cos-line: #E6EAF0;
	--cos-line-soft: #EFF2F6;
	--cos-mist: #F7F8FA;
	--cos-paper: #FFFFFF;
	--cos-signal: #F5A524;
	--cos-signal-ink: #8A5B00;
	--cos-danger: #B42318;
	--cos-danger-soft: #FEF3F2;
	--cos-danger-line: #FECDCA;
	--cos-danger-ink: #912018;
	--cos-info-soft: #EFF6FF;
	--cos-info-line: #DBEAFE;
	--cos-info-ink: #1E40AF;
	--cos-track: #E4E8EE;
	/* A permanently dark surface for avatars, dials and image placeholders.
	   Separate from --cos-ink, which is text and inverts in dark mode. */
	--cos-solid: #101B2D;
	--cos-solid-ink: #FFFFFF;
	--cos-radius: 16px;
	--cos-radius-sm: 10px;
	--cos-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	--cos-shadow-lift: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -14px rgba(16, 24, 40, .18);
	--cos-display: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--cos-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	font-family: var(--cos-body);
	color: var(--cos-ink);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
}

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

.cos h1, .cos h2, .cos h3 {
	font-family: var(--cos-display);
	font-weight: 650;
	letter-spacing: -.018em;
	line-height: 1.25;
	margin: 0 0 .4em;
	color: var(--cos-ink);
}
.cos h1 { font-size: clamp(21px, 2.4vw, 28px); }
.cos h2 { font-size: clamp(18px, 2vw, 21px); }
.cos h3 { font-size: 16px; }
.cos p { margin: 0 0 1em; }
.cos a { color: inherit; }
.cos img { max-width: 100%; height: auto; display: block; }

.cos-muted { color: var(--cos-muted); font-size: 13.5px; }

.cos-eyebrow {
	display: block;
	font-family: var(--cos-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cos-muted);
	margin-bottom: 6px;
}

.cos-section-title { margin: 32px 0 14px; }
.cos-i { width: 19px; height: 19px; flex: 0 0 auto; }

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

.cos .cos-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 18px;
	border: 1px solid transparent;
	border-radius: var(--cos-radius-sm);
	font-family: var(--cos-display);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .12s ease, background-color .16s ease, border-color .16s ease;
}
.cos .cos-btn:active { transform: translateY(1px); }
.cos .cos-btn-primary { background: var(--cos-brand); color: var(--cos-brand-ink); }
.cos .cos-btn-primary:hover { filter: brightness(.94); color: var(--cos-brand-ink); }
.cos .cos-btn-ghost { background: transparent; border-color: var(--cos-line); color: var(--cos-ink); }
.cos .cos-btn-ghost:hover { background: var(--cos-mist); }
.cos .cos-btn-done { background: var(--cos-brand-soft); color: var(--cos-brand); border-color: transparent; }
.cos .cos-btn-block { width: 100%; }
.cos .cos-btn-lg { padding: 15px 22px; font-size: 15.5px; }
.cos .cos-btn:focus-visible,
.cos a:focus-visible,
.cos button:focus-visible,
.cos input:focus-visible,
.cos textarea:focus-visible,
.cos summary:focus-visible {
	outline: 2px solid var(--cos-brand);
	outline-offset: 2px;
}

/* --- alerts ------------------------------------------------------------- */

.cos-alert {
	padding: 12px 15px;
	border-radius: var(--cos-radius-sm);
	font-size: 14px;
	margin-bottom: 18px;
	border: 1px solid var(--cos-line);
	background: var(--cos-mist);
}
.cos-alert-error { background: var(--cos-danger-soft); border-color: var(--cos-danger-line); color: var(--cos-danger-ink); }
.cos-alert-ok { background: var(--cos-brand-soft); border-color: transparent; }
.cos-alert-info { background: var(--cos-info-soft); border-color: var(--cos-info-line); color: var(--cos-info-ink); }

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

.cos-app {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	min-height: 100vh;
	background: var(--cos-mist);
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow-x: clip;
}

.cos-side {
	background: var(--cos-paper);
	border-right: 1px solid var(--cos-line);
	padding: 20px 16px 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
}

.cos-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 10px 20px;
	text-decoration: none;
	font-family: var(--cos-display);
	font-weight: 700;
	letter-spacing: -.02em;
}
.cos-brand img { max-height: 34px; width: auto; }
.cos-brand-mark {
	width: 32px; height: 32px;
	border-radius: 9px;
	background: var(--cos-solid);
	color: var(--cos-solid-ink);
	display: grid; place-items: center;
	font-size: 16px;
}
.cos-brand-name { font-size: 15px; }

.cos-nav { display: flex; flex-direction: column; gap: 2px; }
.cos-nav-item {
	display: flex;
	align-items: center;
	gap: 11px;
	position: relative;
	padding: 10px 12px;
	border-radius: var(--cos-radius-sm);
	text-decoration: none;
	color: var(--cos-muted);
	font-size: 14px;
	font-weight: 500;
	transition: background-color .14s ease, color .14s ease;
}
.cos-nav-item:hover { background: var(--cos-mist); color: var(--cos-ink); }
.cos-nav-item.is-active { background: var(--cos-brand-soft); color: var(--cos-ink); font-weight: 600; }
.cos-nav-item.is-active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 18px;
	border-radius: 0 3px 3px 0;
	background: var(--cos-brand);
}
.cos-nav-item.is-active .cos-i { color: var(--cos-brand); }
.cos-side-foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cos-line); }

.cos-main { min-width: 0; display: flex; flex-direction: column; }

.cos-top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 32px;
	background: var(--cos-paper);
	border-bottom: 1px solid var(--cos-line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.cos-top-title { flex: 1; min-width: 0; }
.cos-top-title h1 { margin: 0; font-size: 19px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cos-top-title .cos-eyebrow { margin-bottom: 2px; }
.cos-top-user { display: block; border-radius: 50%; overflow: hidden; }
.cos-top-user img, .cos .cos-avatar { border-radius: 50%; }

.cos-menu-toggle { display: none; background: none; border: 0; padding: 6px; cursor: pointer; flex-direction: column; gap: 4px; }
.cos-menu-toggle span { display: block; width: 20px; height: 2px; background: var(--cos-ink); border-radius: 2px; }

.cos-body { padding: 28px 32px 48px; flex: 1; max-width: 1240px; width: 100%; }
.cos-view-learn .cos-body { max-width: 1560px; padding-top: 22px; }

/* --- resume banner ------------------------------------------------------ */

.cos-resume {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	background: linear-gradient(135deg, #101B2D 0%, #0B1220 62%);
	color: #fff;
	border-radius: var(--cos-radius);
	padding: 30px 32px;
	margin-bottom: 22px;
	box-shadow: var(--cos-shadow-lift);
}
.cos-resume h2 { color: #fff; margin: 2px 0 6px; }
.cos-resume .cos-eyebrow, .cos-resume .cos-muted { color: rgba(255, 255, 255, .62); }
.cos-resume .cos-btn-primary { margin-top: 14px; }

.cos-dial {
	--p: 0;
	width: 96px; height: 96px;
	border-radius: 50%;
	display: grid; place-items: center;
	background: conic-gradient(var(--cos-brand) calc(var(--p) * 1%), rgba(255, 255, 255, .14) 0);
	flex: 0 0 auto;
}
.cos-dial strong {
	width: 74px; height: 74px;
	border-radius: 50%;
	background: var(--cos-solid);
	color: var(--cos-solid-ink);
	display: grid; place-items: center;
	font-family: var(--cos-display);
	font-size: 22px;
	font-variant-numeric: tabular-nums;
}
.cos-dial small { font-size: 11px; opacity: .6; }

/* --- stats -------------------------------------------------------------- */

.cos-stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cos-stat-card {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	padding: 18px 20px;
	box-shadow: var(--cos-shadow);
}
.cos-num {
	font-family: var(--cos-display);
	font-size: 27px;
	font-variant-numeric: tabular-nums;
	letter-spacing: -.02em;
	display: block;
}
.cos-num small { font-size: 15px; color: var(--cos-muted); font-weight: 500; }

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

.cos-course-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.cos-course-card {
	display: flex;
	flex-direction: column;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	overflow: hidden;
	box-shadow: var(--cos-shadow);
	transition: box-shadow .18s ease, transform .18s ease;
}
.cos-course-card:hover { box-shadow: var(--cos-shadow-lift); transform: translateY(-2px); }

.cos-course-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: linear-gradient(135deg, #16223A, #0B1220);
	overflow: hidden;
	text-decoration: none;
}
.cos-course-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cos-course-initial {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #fff;
	font-size: 40px;
	font-weight: 600;
	opacity: .32;
}
.cos-chip {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba(255, 255, 255, .94);
	backdrop-filter: blur(6px);
	color: #101B2D;
	font-size: 12px;
	font-weight: 600;
	padding: 5px 10px;
	border-radius: 99px;
	font-variant-numeric: tabular-nums;
	box-shadow: 0 1px 3px rgba(16, 24, 40, .16);
}
.cos-chip-done { background: var(--cos-brand); color: var(--cos-brand-ink); }

.cos-course-body { padding: 18px 20px 20px; flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cos-course-body h3 { margin: 0 0 8px; font-size: 16.5px; }
.cos-course-body h3 a { text-decoration: none; }
.cos-course-body h3 a:hover { color: var(--cos-brand); }
.cos-course-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0 0 16px;
	color: var(--cos-muted);
	font-size: 13px;
}
.cos-course-meta span { display: inline-flex; align-items: center; gap: 5px; }
.cos-course-progress { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.cos-course-progress .cos-ticks, .cos-course-progress .cos-bar { flex: 1; min-width: 0; }
.cos-course-card .cos-btn { margin-top: auto; }
.cos-count { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* The ledger: one tick per lesson. Signature element. */
.cos-ticks { display: flex; gap: 3px; align-items: flex-end; height: 16px; }
.cos-tick {
	flex: 1 1 0;
	min-width: 2px;
	height: 8px;
	border-radius: 2px;
	background: var(--cos-track);
	transition: height .2s ease, background-color .2s ease;
}
.cos-tick.is-done { background: var(--cos-brand); height: 12px; }
.cos-tick.is-next { background: var(--cos-signal); height: 16px; }

.cos-bar { height: 6px; border-radius: 99px; background: var(--cos-line); overflow: hidden; }
.cos-bar span { display: block; height: 100%; background: var(--cos-brand); border-radius: 99px; transition: width .3s ease; }

/* --- empty states ------------------------------------------------------- */

.cos-empty {
	background: var(--cos-paper);
	border: 1px dashed var(--cos-line);
	border-radius: var(--cos-radius);
	padding: 48px 28px;
	text-align: center;
}
.cos-empty h2 { margin-bottom: 6px; }
.cos-empty p { color: var(--cos-muted); max-width: 46ch; margin-inline: auto; }

/* --- the player --------------------------------------------------------- */

.cos-learn { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.cos-learn-stage { min-width: 0; }

.cos-player {
	background: #000;
	border-radius: var(--cos-radius);
	overflow: hidden;
	aspect-ratio: 16 / 9;
	box-shadow: var(--cos-shadow-lift);
}
.cos-player > *, .cos-player iframe, .cos-player video { width: 100%; height: 100%; display: block; border: 0; }
.cos-player style, .cos-player script, .cos-player link { display: none !important; }
.cos-player presto-player { width: 100%; height: 100%; display: block; }
.cos-player-empty { display: grid; place-items: center; height: 100%; color: rgba(255, 255, 255, .5); }
.cos-embed { width: 100%; height: 100%; }

.cos-lesson-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin: 22px 0 18px;
	flex-wrap: wrap;
}
.cos-lesson-heading { min-width: 0; flex: 1; }
.cos-lesson-head h2 { margin: 0 0 8px; font-size: clamp(19px, 2vw, 24px); }
.cos-lesson-facts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 16px;
	color: var(--cos-muted);
	font-size: 13px;
}
.cos-lesson-facts span { display: inline-flex; align-items: center; gap: 6px; }
.cos-lesson-facts .cos-i { width: 15px; height: 15px; }
.cos-pill {
	background: rgba(245, 165, 36, .14);
	color: var(--cos-signal-ink);
	border-radius: 99px;
	padding: 3px 10px;
	font-size: 11.5px;
	font-weight: 600;
}
#cos-complete { flex: 0 0 auto; }

.cos-tabs {
	display: flex;
	gap: 4px;
	background: var(--cos-mist);
	border: 1px solid var(--cos-line);
	border-radius: 99px;
	padding: 4px;
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
}
.cos-tab {
	background: none;
	border: 0;
	border-radius: 99px;
	padding: 9px 18px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cos-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.cos-tab:hover { color: var(--cos-ink); }
.cos-tab b { font-weight: 600; opacity: .55; margin-left: 3px; }
.cos-tab.is-active { background: var(--cos-paper); color: var(--cos-ink); box-shadow: var(--cos-shadow); }

.cos-tab-panel { display: none; padding: 22px 0 4px; }
.cos-tab-panel.is-active { display: block; }

.cos-note-form { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 16px; }
.cos-note-form textarea { flex: 1; }
.cos-note-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cos-note-list li {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius-sm);
	padding: 12px 40px 12px 14px;
	position: relative;
}
.cos-note-list li p { margin: 0; font-size: 14px; white-space: pre-wrap; }
.cos-note-meta { display: flex; flex-direction: column; margin-bottom: 6px; font-size: 13px; }
.cos-stamp {
	background: var(--cos-brand-soft);
	color: var(--cos-brand);
	border: 0;
	border-radius: 6px;
	padding: 2px 7px;
	font-family: var(--cos-display);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
	margin-bottom: 6px;
}
.cos-note-del {
	position: absolute; top: 8px; right: 10px;
	background: none; border: 0; cursor: pointer;
	font-size: 20px; line-height: 1; color: var(--cos-muted);
}
.cos-note-del:hover { color: var(--cos-danger); }

.cos-files { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cos-files a {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 15px;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius-sm);
	text-decoration: none;
	font-weight: 500;
	font-size: 14px;
}
.cos-files a:hover { border-color: var(--cos-brand); background: var(--cos-brand-soft); }
.cos-files .cos-i { color: var(--cos-brand); }

.cos-lesson-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-top: 30px;
	padding-top: 24px;
	border-top: 1px solid var(--cos-line);
}
.cos-navcard {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 18px;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	text-decoration: none;
	min-width: 0;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cos-navcard:hover { border-color: var(--cos-brand); box-shadow: var(--cos-shadow-lift); transform: translateY(-1px); }
.cos-navcard span { min-width: 0; }
.cos-navcard small { display: block; color: var(--cos-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 3px; }
.cos-navcard strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cos-navcard .cos-i { flex: 0 0 auto; color: var(--cos-muted); }
.cos-navcard-next { justify-content: flex-end; text-align: right; }
.cos-navcard-next:hover .cos-i { color: var(--cos-brand); }
@media (max-width: 640px) { .cos-lesson-nav { grid-template-columns: 1fr; } }

/* --- curriculum with the rail ------------------------------------------- */

.cos-curriculum {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	position: sticky;
	top: 88px;
	max-height: calc(100vh - 112px);
	box-shadow: var(--cos-shadow);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cos-curriculum-head { padding: 18px 20px; border-bottom: 1px solid var(--cos-line); }
.cos-curriculum-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.cos-curriculum-top .cos-eyebrow { margin: 0; }
.cos-curriculum-head strong { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cos-curriculum-sub { margin: 8px 0 0; font-size: 12px; color: var(--cos-muted); font-variant-numeric: tabular-nums; }
.cos-sections-list { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.cos-section { border-bottom: 1px solid var(--cos-line); }
.cos-section:last-child { border-bottom: 0; }
.cos-section > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 20px;
	cursor: pointer;
	list-style: none;
	font-size: 13.5px;
	font-weight: 600;
}
.cos-section-title { flex: 1; min-width: 0; }
.cos-caret {
	width: 8px; height: 8px;
	border-right: 1.8px solid var(--cos-muted);
	border-bottom: 1.8px solid var(--cos-muted);
	transform: rotate(45deg);
	transition: transform .18s ease;
	flex: 0 0 auto;
	margin-top: -3px;
}
.cos-section[open] > summary .cos-caret { transform: rotate(-135deg); margin-top: 2px; }
.cos-section.is-complete .cos-section-count { color: var(--cos-brand); }
.cos-section > summary::-webkit-details-marker { display: none; }
.cos-section > summary:hover { background: var(--cos-mist); }
.cos-section-count { color: var(--cos-muted); font-variant-numeric: tabular-nums; font-size: 12px; }

.cos-lesson-list { list-style: none; margin: 0; padding: 0 0 8px; }
.cos-lesson-item a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px;
	text-decoration: none;
	font-size: 13.5px;
	color: var(--cos-muted);
	position: relative;
	line-height: 1.4;
}
.cos-lesson-item a:hover { background: var(--cos-mist); color: var(--cos-ink); }
.cos-lesson-mark { flex: 0 0 16px; width: 16px; display: grid; place-items: center; }
.cos-lesson-mark .cos-i { width: 15px; height: 15px; }
.cos-lesson-item.is-done .cos-lesson-mark { color: var(--cos-brand); }
.cos-lesson-item.is-current .cos-lesson-mark { color: var(--cos-brand); }
.cos-lesson-name { flex: 1; min-width: 0; }
.cos-lesson-item.is-done .cos-lesson-name { color: var(--cos-muted); }
.cos-lesson-time { font-variant-numeric: tabular-nums; font-size: 12px; opacity: .75; flex: 0 0 auto; }

/* the vertical rail down the lesson list */
.cos-rail { position: relative; width: 12px; flex: 0 0 12px; align-self: stretch; display: flex; align-items: center; justify-content: center; }
.cos-rail::before {
	content: "";
	position: absolute;
	top: -9px; bottom: -9px; left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--cos-line);
}
.cos-rail i {
	position: relative;
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--cos-paper);
	box-shadow: 0 0 0 2px var(--cos-line);
}
.cos-lesson-item.is-done .cos-rail i { background: var(--cos-brand); box-shadow: 0 0 0 2px var(--cos-brand); }
.cos-lesson-item.is-done .cos-rail::before { background: var(--cos-brand); }
.cos-lesson-item.is-current a { color: var(--cos-ink); font-weight: 600; background: var(--cos-brand-soft); }
.cos-lesson-item.is-current { position: relative; }
.cos-lesson-item.is-current::after {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--cos-brand);
}
.cos-lesson-item.is-current .cos-rail i { background: var(--cos-brand); box-shadow: 0 0 0 3px var(--cos-brand-soft), 0 0 0 2px var(--cos-brand); }

/* --- forms -------------------------------------------------------------- */

.cos-form { max-width: 640px; }
.cos-form-narrow { max-width: 440px; margin-bottom: 34px; }
.cos-form label, .cos-auth label { display: block; margin-bottom: 15px; }
.cos-form label > span, .cos-auth label > span {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--cos-ink);
}
.cos input[type="text"], .cos input[type="email"], .cos input[type="tel"],
.cos input[type="password"], .cos input[type="url"], .cos textarea, .cos select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius-sm);
	background: var(--cos-paper);
	font: inherit;
	font-size: 15px;
	color: var(--cos-ink);
}
.cos textarea { resize: vertical; }
.cos input:focus, .cos textarea:focus { border-color: var(--cos-brand); }
.cos input[readonly] { background: var(--cos-mist); color: var(--cos-muted); }
.cos-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cos-check { display: flex; align-items: center; gap: 8px; font-size: 13.5px; }
.cos-check input { width: auto; }
.cos-hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.cos-profile { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; }
.cos-profile-card {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	padding: 26px 20px;
	text-align: center;
}
.cos-profile-card .cos-avatar { margin: 0 auto 12px; }
.cos-profile-card h2 { margin-bottom: 4px; }
.cos-profile-card p { margin: 0 0 3px; }

.cos-table-wrap { background: var(--cos-paper); border: 1px solid var(--cos-line); border-radius: var(--cos-radius); overflow-x: auto; }
.cos-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cos-table th { text-align: left; font-family: var(--cos-display); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--cos-muted); padding: 13px 16px; border-bottom: 1px solid var(--cos-line); }
.cos-table td { padding: 14px 16px; border-bottom: 1px solid var(--cos-line); }
.cos-table tr:last-child td { border-bottom: 0; }
.cos-table code { font-size: 12px; color: var(--cos-muted); }

/* --- auth + checkout ---------------------------------------------------- */

.cos-auth {
	display: grid;
	place-items: center;
	padding: 56px 20px;
	min-height: 78vh;
	background: var(--cos-mist);
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow-x: clip;
}
.cos-auth-card {
	width: 100%;
	max-width: 436px;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow-lift);
	padding: 38px 34px;
}
.cos-auth-card > form { margin-top: 22px; }
.cos-auth-brand { margin-bottom: 22px; }
.cos-auth-brand img { max-height: 38px; width: auto; }
.cos-auth h1 { margin-bottom: 6px; }
.cos-auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 18px; font-size: 13.5px; }
.cos-auth-alt { text-align: center; margin: 18px 0 0; font-size: 13.5px; }

.cos-checkout {
	padding: 48px 20px;
	background: var(--cos-mist);
	margin: 0 calc(50% - 50vw);
	width: 100vw;
	max-width: 100vw;
	overflow-x: clip;
}
.cos-checkout-inner {
	max-width: 980px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 0;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow-lift);
	overflow: hidden;
}
/* The summary card sits on white now. Its old light-on-dark rules used to live
   here and were still winning on colour, which made the text invisible. */
.cos-checkout-summary { min-width: 0; }
.cos-price { font-family: var(--cos-display); font-size: 32px; letter-spacing: -.03em; }
.cos-checkout-form { padding: 38px 34px; }
.cos-fineprint { font-size: 12.5px; color: var(--cos-muted); margin-top: 14px; }

.cos-grid { display: grid; gap: 18px; }
.cos-grid-2 { grid-template-columns: repeat(2, 1fr); }
.cos-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cos-grid-card { background: var(--cos-paper); border: 1px solid var(--cos-line); border-radius: var(--cos-radius); overflow: hidden; }
.cos-grid-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cos-grid-body { padding: 18px; }
.cos-grid-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.cos-grid-foot strong { font-family: var(--cos-display); font-size: 18px; }

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

@media (max-width: 1080px) {
	.cos-learn { grid-template-columns: minmax(0, 1fr); gap: 18px; }

	/* Once the curriculum is in the normal flow it must NOT be its own scroll
	   container. Left as one, overscroll-behavior:contain swallows the touch
	   and the page cannot be scrolled from anywhere over the lesson list. */
	.cos-curriculum {
		position: static;
		max-height: none;
		order: 2;
		display: block;
		overflow: visible;
	}
	.cos-sections-list {
		overflow: visible;
		max-height: none;
		overscroll-behavior: auto;
	}

	/* The curriculum is a long list. Below the player it would bury the notes,
	   so it collapses to a single tappable summary row. */
	.cos-curriculum.is-collapsible .cos-curriculum-head {
		cursor: pointer;
		user-select: none;
		border-bottom: 0;
		padding-right: 48px;
		position: relative;
	}
	.cos-curriculum.is-collapsible.is-open .cos-curriculum-head { border-bottom: 1px solid var(--cos-line); }
	.cos-curriculum.is-collapsible .cos-curriculum-head::after {
		content: "";
		position: absolute;
		right: 22px;
		top: 26px;
		width: 9px; height: 9px;
		border-right: 2px solid var(--cos-muted);
		border-bottom: 2px solid var(--cos-muted);
		transform: rotate(45deg);
		transition: transform .18s ease;
	}
	.cos-curriculum.is-collapsible.is-open .cos-curriculum-head::after { transform: rotate(-135deg); top: 30px; }
	.cos-curriculum.is-collapsible .cos-sections-list { display: none; }
	.cos-curriculum.is-collapsible.is-open .cos-sections-list { display: block; }
}

@media (max-width: 900px) {
	.cos-app { grid-template-columns: minmax(0, 1fr); }
	.cos-side {
		position: fixed;
		inset: 0 auto 0 0;
		width: 250px;
		z-index: 60;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 40px rgba(11, 18, 32, .18);
	}
	.cos-app.cos-nav-open .cos-side { transform: none; }
	.cos-menu-toggle { display: flex; }
	.cos-body { padding: 18px 16px 40px; }
	.cos-view-learn .cos-body { padding: 0 0 40px; }
	.cos-top { padding: 13px 16px; }
	.cos-profile { grid-template-columns: minmax(0, 1fr); }
	.cos-stats-row { grid-template-columns: 1fr 1fr; gap: 10px; }
	.cos-checkout-inner { grid-template-columns: minmax(0, 1fr); }
	.cos-grid-2, .cos-grid-3 { grid-template-columns: 1fr; }
	.cos-resume { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 20px; }
	.cos-course-list { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

	/* Player page: the video runs edge to edge, everything else keeps a gutter. */
	.cos-view-learn .cos-learn { gap: 0; }
	.cos-player { border-radius: 0; box-shadow: none; }
	.cos-learn-stage > *:not(.cos-player) { margin-left: 16px; margin-right: 16px; }
	.cos-curriculum { margin: 18px 16px 0; }
	.cos-lesson-head { margin: 18px 0 16px; }
	.cos-lesson-head h2 { font-size: 19px; }
	.cos-tab-panel { padding: 18px 0 0; }
	.cos-lesson-nav { margin-top: 24px; padding-top: 20px; }
	.cos-navcard { padding: 13px 15px; }
	.cos-curriculum-head { padding: 16px 18px; }
	.cos-section > summary { padding: 14px 18px; }
	.cos-lesson-item a { padding: 11px 18px; }
	.cos-tabs { width: 100%; scrollbar-width: none; }
	.cos-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 640px) {
	.cos-form .cos-grid-2 { grid-template-columns: 1fr; }
	.cos-lesson-head { flex-direction: column; align-items: stretch; gap: 14px; }
	.cos-lesson-head #cos-complete { width: 100%; }
	.cos-note-form { flex-direction: column; }
	.cos-note-form .cos-btn { width: 100%; }
	.cos-checkout-summary, .cos-checkout-form { padding: 26px 20px; }
	.cos-auth-card { padding: 26px 20px; }
	.cos-course-list { grid-template-columns: 1fr; }
	.cos-stats-row { grid-template-columns: 1fr; }
	.cos-tab { padding: 9px 14px; font-size: 13px; }
	.cos-top-title h1 { font-size: 17px; }
	.cos-lesson-facts { gap: 6px 12px; font-size: 12.5px; }
	.cos-body { padding-bottom: 32px; }
}

@media (prefers-reduced-motion: reduce) {
	.cos *, .cos *::before, .cos *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}


/* --- password reveal ----------------------------------------------------- */

.cos-pw { position: relative; display: block; }
.cos-pw input { padding-right: 46px !important; }
.cos-pw-toggle {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--cos-muted);
	cursor: pointer;
	transition: color .14s ease, background-color .14s ease;
}
.cos-pw-toggle:hover { color: var(--cos-ink); background: var(--cos-mist); }
.cos-pw-toggle svg { width: 19px; height: 19px; }

/* --- post-payment waiting screen ---------------------------------------- */

.cos-processing { display: grid; place-items: center; min-height: 60vh; }
.cos-processing-card {
	width: 100%;
	max-width: 480px;
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow-lift);
	padding: 40px 34px;
	text-align: center;
}
.cos-processing-card h1 { font-size: 22px; margin: 0 0 10px; }
.cos-processing-card p { margin: 0 0 10px; }
.cos-processing-card .cos-fineprint { margin-top: 18px; }

.cos-spinner { display: grid; place-items: center; margin-bottom: 22px; }
.cos-spinner span {
	display: block;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 3px solid var(--cos-line);
	border-top-color: var(--cos-brand);
	animation: cos-spin .8s linear infinite;
}
@keyframes cos-spin { to { transform: rotate(360deg); } }

.cos-processing-late {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--cos-line);
	text-align: left;
}
.cos-processing-late code { font-size: 12px; word-break: break-all; }

@media (prefers-reduced-motion: reduce) {
	.cos-spinner span { animation-duration: 2.4s; }
}

@media (max-width: 640px) {
	.cos-processing-card { padding: 30px 22px; }
}


/* --- greeting ----------------------------------------------------------- */

.cos-greeting { margin: 0 0 24px; }
.cos-greeting h1 {
	margin: 0 0 6px;
	font-size: clamp(23px, 3.4vw, 32px);
	letter-spacing: -.02em;
}
.cos-greeting p { margin: 0; color: var(--cos-muted); font-size: 15px; }

.cos-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	margin-bottom: 14px;
}
.cos-section-head .cos-section-title { margin: 0; }
.cos-link { font-size: 13.5px; font-weight: 600; text-decoration: none; color: var(--cos-brand-deep); white-space: nowrap; }
.cos-link:hover { text-decoration: underline; }

.cos-page-head { margin-bottom: 22px; }
.cos-page-head h1 { margin: 0 0 6px; font-size: clamp(21px, 3vw, 27px); }
.cos-page-head p { margin: 0; }

/* --- momentum strip ----------------------------------------------------- */

.cos-momentum {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	margin: 0 0 30px;
}
.cos-momentum .cos-stat-card { display: flex; flex-direction: column; gap: 8px; }
.cos-momentum .cos-num { font-size: 27px; font-weight: 650; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cos-momentum .cos-num small { font-size: 13px; font-weight: 500; color: var(--cos-muted); margin-left: 4px; }
.cos-stat-note { margin: auto 0 0; font-size: 12px; color: var(--cos-muted); }
.cos-momentum .cos-bar { margin-top: auto; }

.cos-streak.is-hot { border-color: rgba(245, 165, 36, .45); background: linear-gradient(180deg, rgba(245, 165, 36, .07), transparent 60%); }
.cos-streak.is-hot .cos-num { color: var(--cos-signal-ink); }

.cos-week { display: flex; gap: 5px; margin-top: auto; }
.cos-week-day {
	flex: 1 1 0;
	display: grid;
	place-items: center;
	height: 24px;
	border-radius: 6px;
	background: var(--cos-mist);
	border: 1px solid var(--cos-line);
	font-size: 10.5px;
	font-weight: 600;
	color: var(--cos-muted);
	text-transform: uppercase;
}
.cos-week-day.is-active { background: var(--cos-brand); border-color: var(--cos-brand); color: var(--cos-brand-ink); }
.cos-week-day.is-today { outline: 2px solid var(--cos-ink); outline-offset: 1px; }

/* --- coming soon -------------------------------------------------------- */

.cos-soon {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow);
	padding: 44px 32px;
	text-align: center;
	margin-bottom: 22px;
}
.cos-soon-badge {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--cos-brand-soft);
	color: var(--cos-brand);
}
.cos-soon-badge .cos-i { width: 26px; height: 26px; }
.cos-soon h2 { margin: 0 0 8px; font-size: 20px; }
.cos-soon p { margin: 0 auto 10px; max-width: 460px; color: var(--cos-muted); }
.cos-soon-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }

.cos-soon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cos-soon-item {
	background: var(--cos-paper);
	border: 1px dashed var(--cos-line);
	border-radius: var(--cos-radius);
	padding: 20px;
}
.cos-soon-item h3 { margin: 0 0 6px; font-size: 14.5px; }
.cos-soon-item p { margin: 0; font-size: 13px; }

/* --- enrol page --------------------------------------------------------- */

.cos-checkout-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: 1080px;
	margin: 0 auto 24px;
	padding: 0 4px;
}
.cos-checkout-bar .cos-brand { text-decoration: none; padding: 0; }
.cos-secure {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--cos-muted);
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: 99px;
	padding: 7px 14px;
}
.cos-secure .cos-i { width: 15px; height: 15px; color: var(--cos-brand); }

.cos-checkout-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	gap: 24px;
	align-items: start;
	max-width: 1080px;
	margin: 0 auto;
	background: none;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}

.cos-checkout-form {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow-lift);
	padding: 34px 32px;
}
.cos-checkout-form h1 { margin: 0 0 6px; font-size: 23px; }
.cos-checkout-form > .cos-muted { margin: 0 0 22px; }

.cos-total-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 22px 0 16px;
	padding-top: 18px;
	border-top: 1px solid var(--cos-line);
}
.cos-total-row span { color: var(--cos-muted); font-size: 13.5px; }
.cos-total-row strong { font-size: 26px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cos-pay-methods { margin: 12px 0 0; text-align: center; font-size: 12px; color: var(--cos-muted); }

.cos-summary-card {
	background: var(--cos-paper);
	border: 1px solid var(--cos-line);
	border-radius: var(--cos-radius);
	box-shadow: var(--cos-shadow);
	overflow: hidden;
	position: sticky;
	top: 24px;
}
.cos-summary-thumb { aspect-ratio: 16 / 9; background: var(--cos-solid); }
.cos-summary-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cos-summary-body { padding: 22px 22px 24px; }
.cos-summary-body h2 { margin: 6px 0 8px; font-size: 18px; }
.cos-summary-body .cos-lead { margin: 0 0 16px; color: var(--cos-muted); font-size: 14px; }

.cos-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 10px; }
.cos-facts li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.cos-facts .cos-i { flex: 0 0 auto; width: 16px; height: 16px; color: var(--cos-brand); }

.cos-summary-modules { border-top: 1px solid var(--cos-line); padding-top: 16px; }
.cos-summary-modules ul { list-style: none; margin: 8px 0 0; padding: 0; }
.cos-summary-modules li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid var(--cos-line-soft);
	font-size: 13px;
}
.cos-summary-modules li:last-child { border-bottom: 0; }
.cos-summary-modules small { color: var(--cos-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.cos-students { margin-top: 14px; }

/* --- responsive: greeting, momentum, support, enrol --------------------- */

@media (max-width: 1000px) {
	.cos-checkout-inner { grid-template-columns: minmax(0, 1fr); }
	.cos-summary-card { position: static; }
	/* On a phone the buyer wants the form, not the sales pitch, above the fold. */
	.cos-checkout-summary { order: 2; }
	.cos-checkout-form { order: 1; }
}

@media (max-width: 900px) {
	.cos-momentum { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.cos-soon-grid { grid-template-columns: 1fr; }
	.cos-soon { padding: 34px 22px; }
	.cos-checkout-bar { margin-bottom: 18px; }
	.cos-checkout-form { padding: 26px 20px; }
	.cos-summary-body { padding: 20px; }
}

@media (max-width: 560px) {
	.cos-greeting h1 { font-size: 22px; }
	.cos-greeting p { font-size: 14px; }
	.cos-momentum { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cos-momentum .cos-num { font-size: 22px; }
	.cos-week-day { height: 21px; font-size: 10px; }
	.cos-checkout-bar strong { font-size: 14px; }
	.cos-secure { padding: 6px 11px; font-size: 11.5px; }
	.cos-total-row strong { font-size: 22px; }
	.cos-checkout-form h1 { font-size: 20px; }
}

/* --- brand logo + light button on dark ---------------------------------- */

.cos-brand-logo { max-height: 32px; width: auto; display: block; }
.cos-checkout-bar .cos-brand-logo { max-height: 36px; }

.cos .cos-btn-light {
	background: #fff;
	border-color: #fff;
	color: var(--cos-ink);
}
.cos .cos-btn-light:hover { background: rgba(255, 255, 255, .9); border-color: rgba(255, 255, 255, .9); }
.cos .cos-btn-light .cos-i { color: var(--cos-brand); }

.cos-resume-course { margin: 0 0 18px; color: rgba(255, 255, 255, .72); font-size: 14px; }

/* --- enrol page: explicit colours so no stale rule can hide the text ----- */

.cos-summary-body,
.cos-summary-body h2,
.cos-facts li,
.cos-facts li span { color: var(--cos-ink); }
.cos-summary-body .cos-eyebrow { color: var(--cos-muted); }
.cos-summary-body .cos-lead,
.cos-students { color: var(--cos-muted); }

.cos-summary-card { display: flex; flex-direction: column; }
.cos-summary-body { display: flex; flex-direction: column; }
.cos-facts { margin-top: 4px; }
.cos-facts li:last-child { margin-bottom: 0; }
.cos-students {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--cos-line);
}

.cos-checkout-bar { flex-wrap: wrap; }
.cos-checkout-form .cos-form label > span { font-weight: 600; font-size: 13px; }

@media (max-width: 1000px) {
	/* Summary reads as a receipt under the form, so cap the artwork height. */
	.cos-summary-thumb { aspect-ratio: 21 / 9; }
}

@media (max-width: 560px) {
	.cos-checkout { padding: 26px 14px 40px; }
	.cos-checkout-bar { margin-bottom: 16px; padding: 0; gap: 10px; }
	.cos-brand-logo, .cos-checkout-bar .cos-brand-logo { max-height: 30px; }
	.cos-checkout-form { padding: 24px 18px; }
	.cos-summary-body { padding: 18px; }
	.cos-summary-body h2 { font-size: 17px; }
	.cos-summary-thumb { aspect-ratio: 16 / 9; }
	.cos-facts li { font-size: 13px; }
	.cos-checkout-inner { gap: 16px; }
}

/* --- Zara chat ---------------------------------------------------------- */

/* The chat owns the whole view. No card inside a card: the dashboard frame is
   the frame, and the composer sits on the bottom edge like a messaging app.
   The shell is a flex column, so the chat is sized by what is left rather than
   by a magic number that would drift if the top bar ever changes height. */
/* JS measures the real space left and sets an explicit height on .cos-zara.
   These are the pre-script fallback, so the layout is right before it runs. */
.cos-view-support .cos-main { height: 100vh; height: 100dvh; }
.cos-view-support .cos-body {
	padding: 0;
	max-width: none;
	display: flex;
	min-height: 0;
	overflow: hidden;
}

.cos-zara {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	min-height: 0;
	background: var(--cos-mist);
}

.cos-zara-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 22px;
	border-bottom: 1px solid var(--cos-line);
	background: var(--cos-paper);
	flex: 0 0 auto;
}
.cos-zara-avatar {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(140deg, var(--cos-brand), #0B6FC4);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
	flex: 0 0 auto;
}
.cos-zara-who { display: flex; flex-direction: column; line-height: 1.35; flex: 1; min-width: 0; }
.cos-zara-who strong { font-size: 15px; }
.cos-zara-status {
	font-size: 12px;
	color: var(--cos-brand-deep);
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.cos-zara-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.cos-zara-clear {
	background: none;
	border: 1px solid var(--cos-line);
	border-radius: 99px;
	padding: 7px 14px;
	font: inherit;
	font-size: 12.5px;
	color: var(--cos-muted);
	cursor: pointer;
	white-space: nowrap;
}
.cos-zara-clear:hover { color: var(--cos-ink); border-color: var(--cos-muted); }
.cos-zara-clear:focus-visible,
.cos-quick-btn:focus-visible,
.cos-zara-send:focus-visible { outline: 2px solid var(--cos-brand); outline-offset: 2px; }

.cos-zara-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding: 24px 22px 4px;
}

.cos-zara-log {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 820px;
	margin: 0 auto;
}

.cos-msg { display: flex; flex-direction: column; max-width: 100%; }
.cos-msg-bot { align-items: flex-start; }
.cos-msg-me { align-items: flex-end; }

.cos-bubble {
	position: relative;
	max-width: min(76%, 560px);
	padding: 12px 16px 8px;
	border-radius: 18px;
	font-size: 14.5px;
	line-height: 1.6;
	background: var(--cos-paper);
	color: var(--cos-ink);
	border-bottom-left-radius: 6px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .07);
	overflow-wrap: anywhere;
}
.cos-msg-me .cos-bubble {
	background: var(--cos-brand);
	color: var(--cos-brand-ink);
	border-bottom-left-radius: 18px;
	border-bottom-right-radius: 6px;
}
.cos-bubble p { margin: 0 0 9px; }
.cos-bubble ol, .cos-bubble ul { margin: 0 0 9px; padding-left: 20px; }
.cos-bubble li { margin-bottom: 5px; }
.cos-bubble li:last-child { margin-bottom: 0; }
.cos-bubble strong { font-weight: 650; }

.cos-time {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	line-height: 1.4;
	text-align: right;
	color: var(--cos-muted);
	font-variant-numeric: tabular-nums;
}
.cos-msg-me .cos-time { color: var(--cos-brand-ink); opacity: .72; }

.cos-handoff { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cos .cos-btn-sm { padding: 8px 15px; font-size: 13px; }

.cos-typing .cos-bubble { padding: 14px 18px; }
.cos-dots { display: inline-flex; gap: 4px; align-items: center; height: 8px; }
.cos-dots i {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--cos-muted);
	animation: cos-blink 1.3s infinite ease-in-out;
}
.cos-dots i:nth-child(2) { animation-delay: .18s; }
.cos-dots i:nth-child(3) { animation-delay: .36s; }
@keyframes cos-blink { 0%, 60%, 100% { opacity: .26; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }

.cos-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	max-width: 820px;
	margin: 14px auto 0;
	padding-bottom: 4px;
}
.cos-quick[hidden] { display: none; }
.cos-quick-btn {
	background: var(--cos-paper);
	border: 1px solid var(--cos-brand);
	color: var(--cos-brand-deep);
	border-radius: 99px;
	padding: 9px 15px;
	font: inherit;
	font-size: 13px;
	font-weight: 500;
	cursor: pointer;
	text-align: left;
	transition: background-color .14s ease, color .14s ease;
}
.cos-quick-btn:hover { background: var(--cos-brand); color: var(--cos-brand-ink); }

.cos-zara-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 14px 22px;
	padding-bottom: max(14px, env(safe-area-inset-bottom));
	border-top: 1px solid var(--cos-line);
	background: var(--cos-paper);
	flex: 0 0 auto;
}
.cos-zara-form textarea {
	flex: 1;
	min-width: 0;
	resize: none;
	border: 1px solid var(--cos-line);
	border-radius: 22px;
	padding: 12px 18px;
	/* 16px stops iOS Safari zooming the page when the field takes focus. */
	font: inherit;
	font-size: 16px;
	line-height: 1.5;
	max-height: 140px;
	background: var(--cos-mist);
	color: var(--cos-ink);
}
.cos-zara-form textarea:focus {
	outline: none;
	background: var(--cos-paper);
	border-color: var(--cos-brand);
	box-shadow: 0 0 0 3px var(--cos-brand-soft);
}
.cos-zara-send {
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: var(--cos-brand);
	color: #fff;
	cursor: pointer;
	transition: opacity .14s ease, transform .14s ease;
}
.cos-zara-send:hover { transform: scale(1.05); }
.cos-zara-send:disabled { opacity: .45; cursor: default; transform: none; }

@media (max-width: 900px) {
	.cos-zara-head { padding: 11px 14px; gap: 10px; }
	.cos-zara-who strong { font-size: 14.5px; }
	.cos-zara-scroll { padding: 18px 16px 4px; }
	.cos-zara-form { padding: 11px 16px; padding-bottom: max(11px, env(safe-area-inset-bottom)); }
	.cos-bubble { max-width: 86%; font-size: 14px; }
	.cos-quick { margin-top: 12px; }
}

@media (max-width: 560px) {
	.cos-zara-avatar { width: 36px; height: 36px; font-size: 15px; }
	.cos-zara-clear { padding: 6px 11px; font-size: 12px; }
	.cos-quick-btn { font-size: 12.5px; padding: 8px 13px; }
	.cos-zara-send { width: 44px; height: 44px; }
	.cos-bubble { max-width: 90%; padding: 11px 14px 7px; }
}

@media (prefers-reduced-motion: reduce) {
	.cos-dots i { animation: none; opacity: .6; }
	.cos-zara-send:hover { transform: none; }
}

/* Themes do not all ship this, and the chat label depends on it. */
.cos .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* --- dark mode ----------------------------------------------------------
   Set on <html> so it applies to the dashboard, the login screen and the
   enrol page alike. Every surface is a token, so this block is the whole
   theme: no component needs its own dark variant. */

html[data-cos-theme="dark"] .cos,
html[data-cos-theme="dark"] .cos-zara {
	--cos-brand: #4EA9FF;
	--cos-brand-soft: rgba(78, 169, 255, .16);
	--cos-brand-ink: #04121F;
	--cos-brand-deep: #7CC2FF;
	--cos-ink: #E8EDF5;
	--cos-muted: #93A3B8;
	--cos-line: #27323F;
	--cos-line-soft: #1E2733;
	--cos-mist: #0D131B;
	--cos-paper: #151D28;
	--cos-solid: #0A1017;
	--cos-solid-ink: #FFFFFF;
	--cos-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	--cos-shadow-lift: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 30px -14px rgba(0, 0, 0, .85);

	/* Status colours need restating: a pale tint that reads as "warning" on
	   white reads as a smudge on near black, and the dark text on it vanishes. */
	--cos-signal: #F5A524;
	--cos-signal-ink: #FFC978;
	--cos-danger: #FF9B92;
	--cos-danger-soft: rgba(217, 45, 32, .18);
	--cos-danger-line: rgba(217, 45, 32, .42);
	--cos-danger-ink: #FFB4AC;
	--cos-info-soft: rgba(59, 130, 246, .16);
	--cos-info-line: rgba(59, 130, 246, .38);
	--cos-info-ink: #A9C9FF;
	--cos-track: #2A3542;
}

html[data-cos-theme="dark"] .cos img:not([src*=".svg"]) { filter: brightness(.94); }
html[data-cos-theme="dark"] .cos-player { box-shadow: none; }
html[data-cos-theme="dark"] .cos-secure { background: var(--cos-paper); }

/* Bars that are already dark need a touch more separation from the page. */
html[data-cos-theme="dark"] .cos-resume,
html[data-cos-theme="dark"] .cos-checkout-summary .cos-summary-thumb {
	border: 1px solid var(--cos-line);
}

/* --- theme switch -------------------------------------------------------- */

.cos-theme {
	display: flex;
	gap: 2px;
	margin: 14px 0 4px;
	padding: 3px;
	background: var(--cos-mist);
	border: 1px solid var(--cos-line);
	border-radius: 99px;
}
.cos-theme-btn {
	flex: 1 1 0;
	display: grid;
	place-items: center;
	padding: 7px 0;
	border: 0;
	border-radius: 99px;
	background: none;
	color: var(--cos-muted);
	cursor: pointer;
	font: inherit;
	font-size: 11.5px;
	font-weight: 600;
	transition: background-color .14s ease, color .14s ease;
}
.cos-theme-btn:hover { color: var(--cos-ink); }
.cos-theme-btn[aria-pressed="true"] {
	background: var(--cos-paper);
	color: var(--cos-ink);
	box-shadow: var(--cos-shadow);
}
.cos-theme-btn:focus-visible { outline: 2px solid var(--cos-brand); outline-offset: 1px; }
.cos-theme-btn .cos-i { width: 15px; height: 15px; }

/* Compact single button for the top bar on small screens. */
.cos-theme-toggle {
	display: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--cos-line);
	border-radius: 50%;
	background: var(--cos-paper);
	color: var(--cos-muted);
	cursor: pointer;
	flex: 0 0 auto;
}
.cos-theme-toggle:hover { color: var(--cos-ink); }
.cos-theme-toggle:focus-visible { outline: 2px solid var(--cos-brand); outline-offset: 2px; }

@media (max-width: 900px) {
	.cos-theme-toggle { display: grid; }
}

/* --- dark mode: surfaces the theme block cannot reach ------------------- */

/* The dashboard breaks out of the theme's container, but the page behind it
   still belongs to the theme. Paint it so there is no light band at the edges.
   Scoped to our own pages: the rest of the site is not ours to restyle. */
html[data-cos-theme="dark"] body.courseos-page { background: #0D131B; }

html[data-cos-theme="dark"] .cos-alert-ok {
	border-color: rgba(78, 169, 255, .38);
	color: var(--cos-ink);
}

/* The resume banner and the checkout summary are dark in both themes, so in
   dark mode they need an edge to separate them from the page behind. */
html[data-cos-theme="dark"] .cos-resume { background: linear-gradient(135deg, #17222F 0%, #101822 62%); }
html[data-cos-theme="dark"] .cos-course-thumb { background: linear-gradient(135deg, #1B2734, #0F1720); }

/* The white "Continue" button sits on that banner and stays light on purpose. */
html[data-cos-theme="dark"] .cos .cos-btn-light { background: #F2F6FA; border-color: #F2F6FA; color: #0B1220; }
html[data-cos-theme="dark"] .cos .cos-btn-light .cos-i { color: #0B6FC4; }

/* Ghost buttons and inputs need a visible edge against a dark card. */
html[data-cos-theme="dark"] .cos .cos-btn-ghost { border-color: #33404F; }
html[data-cos-theme="dark"] .cos input,
html[data-cos-theme="dark"] .cos textarea,
html[data-cos-theme="dark"] .cos select {
	background: #101822;
	border-color: #2C3846;
	color: var(--cos-ink);
}
html[data-cos-theme="dark"] .cos input::placeholder,
html[data-cos-theme="dark"] .cos textarea::placeholder { color: #6B7B8D; }
html[data-cos-theme="dark"] .cos-zara-form textarea { background: #101822; }
html[data-cos-theme="dark"] .cos-zara-form textarea:focus { background: #16202B; }

/* Tabs, chips and the week strip all sit on mist and need lifting. */
html[data-cos-theme="dark"] .cos-tabs { background: #101822; }
html[data-cos-theme="dark"] .cos-week-day { background: #101822; border-color: #2A3542; }
html[data-cos-theme="dark"] .cos-chip { background: rgba(16, 24, 34, .88); color: #E8EDF5; }

/* Player and thumbnails: dim slightly so a bright frame is not a torch. */
html[data-cos-theme="dark"] .cos-player { background: #05090D; }
html[data-cos-theme="dark"] .cos-summary-thumb img,
html[data-cos-theme="dark"] .cos-course-thumb img { opacity: .92; }

/* Scrollbars and form controls follow the theme rather than staying white. */
html[data-cos-theme="dark"] .cos { color-scheme: dark; }


/* --- chat: fitting a small screen --------------------------------------- */

/* Quick replies must wrap inside the width they are given, never widen it. */
.cos-quick { width: 100%; }
.cos-quick-btn {
	max-width: 100%;
	white-space: normal;
	line-height: 1.35;
}

/* Handoff buttons go full width once there is no room for two across. */
@media (max-width: 480px) {
	.cos-handoff { flex-direction: column; align-items: stretch; }
	.cos-handoff .cos-btn { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
	.cos-zara-scroll { padding: 14px 12px 4px; }
	.cos-zara-log { gap: 10px; }
	.cos-zara-form { padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); gap: 8px; }
	.cos-zara-form textarea { padding: 11px 15px; border-radius: 20px; }
	.cos-quick { margin-top: 10px; gap: 6px; }
	.cos-quick-btn { font-size: 12.5px; padding: 8px 12px; }
	.cos-bubble { max-width: 92%; border-radius: 16px; }
	.cos-msg-bot .cos-bubble { border-bottom-left-radius: 5px; }
	.cos-msg-me .cos-bubble { border-bottom-right-radius: 5px; }
}

/* Very narrow phones: reclaim the last of the horizontal space. */
@media (max-width: 380px) {
	.cos-zara-head { padding: 10px 12px; }
	.cos-zara-avatar { width: 32px; height: 32px; font-size: 13px; }
	.cos-zara-clear { padding: 5px 9px; font-size: 11.5px; }
	.cos-bubble { max-width: 95%; padding: 10px 13px 6px; font-size: 13.5px; }
	.cos-zara-send { width: 40px; height: 40px; }
}

/* --- dark mode logo ----------------------------------------------------- */

/* Both are in the markup; CSS chooses. No swap on load, so the wrong logo is
   never briefly visible against the wrong background. */
/* !important because these have to beat both the inline style on the dark
   image and any blanket img rule a theme happens to ship. */
html .cos img.cos-logo-dark { display: none !important; }
html[data-cos-theme="dark"] .cos img.cos-logo-light { display: none !important; }
html[data-cos-theme="dark"] .cos img.cos-logo-dark { display: block !important; filter: none; }

/* --- dark mode: standalone pages fill the screen ------------------------ */

/* Login, enrol and account setup are single cards on an otherwise empty page.
   The theme's own wrappers sit behind them and stay light, which in dark mode
   leaves a white band above and below. Paint through them on our pages only. */
html[data-cos-theme="dark"] body.courseos-page,
html[data-cos-theme="dark"] body.courseos-page #page,
html[data-cos-theme="dark"] body.courseos-page #content,
html[data-cos-theme="dark"] body.courseos-page .site,
html[data-cos-theme="dark"] body.courseos-page .site-content,
html[data-cos-theme="dark"] body.courseos-page .site-main,
html[data-cos-theme="dark"] body.courseos-page .content-area,
html[data-cos-theme="dark"] body.courseos-page main,
html[data-cos-theme="dark"] body.courseos-page article,
html[data-cos-theme="dark"] body.courseos-page .entry-content {
	background: #0D131B;
	background-color: #0D131B;
}

html[data-cos-theme="dark"] body.courseos-page { color: #E8EDF5; }

/* And make the card page tall enough that the dark surface reaches the fold. */
.cos-auth { min-height: 100vh; min-height: 100dvh; }
.cos-checkout { min-height: 100vh; min-height: 100dvh; }

/* --- appearance control: placements ------------------------------------- */

/* Top bar pill on small screens. Wide enough to name the current mode, so
   nobody has to tap it to find out which of the three they are on. */
.cos-theme-toggle {
	width: auto;
	min-height: 38px;
	gap: 7px;
	padding: 0 12px;
	border-radius: 99px;
	grid-auto-flow: column;
	align-items: center;
}
.cos-theme-toggle-label { font-size: 12px; font-weight: 600; }
.cos-theme-toggle .cos-i { width: 16px; height: 16px; }

/* Standalone pages: login, account setup, already logged in. */
.cos-theme-float {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	margin: 0;
	width: auto;
	background: var(--cos-paper);
	box-shadow: var(--cos-shadow);
}
.cos-auth { position: relative; }
.cos-theme-float .cos-theme-btn { flex: 0 0 auto; padding: 6px 12px; }

/* Enrol page: sits in the header bar beside the secure badge. */
.cos-theme-inline {
	margin: 0 0 0 auto;
	width: auto;
	background: var(--cos-paper);
}
.cos-theme-inline .cos-theme-btn { flex: 0 0 auto; padding: 6px 12px; }
.cos-checkout-bar .cos-secure { margin-left: 0; }

@media (max-width: 640px) {
	.cos-theme-float { top: 12px; right: 12px; }
	.cos-theme-float .cos-theme-btn,
	.cos-theme-inline .cos-theme-btn { padding: 6px 10px; font-size: 11px; }
	.cos-theme-inline { order: 3; margin-left: 0; }
	.cos-auth { padding-top: 72px; }
}