/* ------------------------------------------------------------------
   Participant dashboard 2026  (pages/dashboard-2026.php)

   The sidebar, course switcher, course header and tile launcher, at the
   prototype's own measurements. The two brand colours alternate down the
   tile grid, which is what the creative does - a tile's colour carries no
   meaning, so nothing is lost by alternating.

   Tokens are declared locally rather than taken from the theme: the theme's
   --brand is still the old red (#E31E24), and this screen belongs to the
   2026 palette. They fall back to the prototype's values.
   ------------------------------------------------------------------ */

.dsh {
	--dsh-accent:       var(--gateway-magenta, #98014C);
	--dsh-accent-soft:  #FDF3F9;
	--dsh-accent-line:  #F2DCE8;
	--dsh-accent2:      var(--gateway-indigo, #0C2A8E);
	--dsh-accent2-soft: #F1F5FE;
	--dsh-accent2-line: #D8E2F8;
	--dsh-paper:        #FFFFFF;
	--dsh-ground:       #F7FAFF;
	--dsh-rule:         #E4E9F4;
	--dsh-rule-soft:    #EDF1F8;
	--dsh-head:         #001B89;
	--dsh-ink:          #1A2340;
	--dsh-muted:        #5A6684;
	--dsh-faint:        #8D96AC;

	display: grid;
	grid-template-columns: 238px 1fr;
	gap: 0;
	background: var(--dsh-paper);
	max-width: 1240px;
	margin: 0 auto;
	border: 1px solid var(--dsh-rule);
	color: var(--dsh-ink);
	font-family: var(--font-body, inherit);
}

.dsh h2,
.dsh h3,
.dsh .tx b,
.dsh .me b {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head);
}

/* ---------- sidebar ---------- */

.dnav {
	background: var(--dsh-ground);
	border-right: 1px solid var(--dsh-rule);
	padding: 26px 16px 30px;
}

.dnav .me { text-align: center; margin-bottom: 24px; }

.dnav .av {
	width: 62px; height: 62px;
	border-radius: 50%;
	margin: 0 auto 9px;
	background: var(--dsh-accent2);
	color: #fff;
	display: grid;
	place-items: center;
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-size: 21px;
}

.dnav .me b { display: block; font-size: 15px; }

.dnav a,
.dnav .on {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 13.5px;
	color: var(--dsh-ink);
	text-decoration: none;
	margin-bottom: 3px;
}

.dnav a svg,
.dnav .on svg {
	width: 18px; height: 18px;
	flex: 0 0 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	color: var(--dsh-accent2);
}

.dnav a:hover { background: var(--dsh-accent2-soft); }

.dnav .on {
	background: var(--dsh-accent);
	color: #fff;
	font-weight: 600;
}

.dnav .on svg { color: #fff; }

.dmain { padding: 22px 26px 34px; min-width: 0; }

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

.swit {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.swit > span {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dsh-faint);
	font-weight: 600;
	margin-right: 2px;
}

.swit a {
	font-size: 12.5px;
	font-weight: 600;
	border: 1px solid var(--dsh-rule);
	background: var(--dsh-paper);
	color: var(--dsh-muted);
	padding: 7px 13px;
	border-radius: 40px;
	text-decoration: none;
}

.swit a:hover { border-color: var(--dsh-accent-line); color: var(--dsh-accent); }

.swit a[aria-pressed="true"] {
	background: var(--dsh-accent2);
	border-color: var(--dsh-accent2);
	color: #fff;
}

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

.chead {
	border: 1px solid var(--dsh-rule);
	border-radius: 12px;
	padding: 24px 26px 22px;
	background: linear-gradient(180deg, #FBFCFF, #F4F7FD);
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 22px;
	align-items: start;
}

.chead h2 { font-size: 29px; line-height: 1.18; margin: 0; }

.chead .mode {
	display: inline-block;
	margin-top: 14px;
	background: var(--dsh-accent);
	color: #fff;
	padding: 8px 22px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
}

.chead .meta { display: grid; gap: 10px; min-width: 230px; }

.chead .meta div {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--dsh-ink);
}

.chead .meta svg {
	width: 19px; height: 19px;
	flex: 0 0 19px;
	fill: none;
	stroke: var(--dsh-accent2);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.chead .bar { grid-column: 1 / -1; margin-top: 4px; }

.chead .bar .trk {
	height: 7px;
	border-radius: 40px;
	background: var(--dsh-rule-soft);
	overflow: hidden;
}

.chead .bar .trk i {
	display: block;
	height: 100%;
	background: var(--dsh-accent2);
	border-radius: 40px;
}

.chead .bar p { font-size: 12px; color: var(--dsh-muted); margin: 7px 0 0; }

/* ---------- tiles ---------- */

.tiles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 15px; }

.tile {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 18px 18px 22px;
	border-radius: 11px;
	overflow: hidden;
	background: var(--dsh-accent2-soft);
	border: 1px solid var(--dsh-accent2-line);
	text-decoration: none;
	color: inherit;
}

.tile::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 7px;
	background: var(--dsh-accent2);
}

.tile.r { background: var(--dsh-accent-soft); border-color: var(--dsh-accent-line); }
.tile.r::before { background: var(--dsh-accent); }
.tile.wide { grid-column: 1 / -1; }
.tile:hover { box-shadow: 0 2px 14px rgba(12, 42, 142, .11); }

.tile .tic {
	flex: 0 0 58px;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: #E3ECFD;
	display: grid;
	place-items: center;
	color: var(--dsh-accent2);
}

.tile.r .tic { background: #FBE0ED; color: var(--dsh-accent); }

.tile .tic svg {
	width: 27px; height: 27px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tile .tx { flex: 1; min-width: 0; }

.tile .tx b { display: block; font-size: 17px; line-height: 1.25; }

.tile .tx span {
	display: block;
	font-size: 12.5px;
	color: var(--dsh-muted);
	margin-top: 3px;
	line-height: 1.4;
}

.tile .act {
	background: var(--dsh-accent);
	color: #fff;
	border-radius: 6px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.tile .chev { color: var(--dsh-accent2); font-size: 19px; line-height: 1; }
.tile.r .chev { color: var(--dsh-accent); }

/* ---------- the notification list the bell tile opens ---------- */

.dnote {
	margin-top: 24px;
	border: 1px solid var(--dsh-rule);
	border-radius: 12px;
	padding: 20px 22px;
	background: var(--dsh-paper);
}

.dnote h3 { font-size: 19px; margin: 0 0 12px; }
.dnote ul { list-style: none; margin: 0; padding: 0; }

.dnote li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 11px 0;
	border-top: 1px solid var(--dsh-rule-soft);
	font-size: 13.5px;
}

.dnote li:first-child { border-top: 0; }
.dnote li a { color: var(--dsh-accent2); text-decoration: none; }
.dnote li a:hover { text-decoration: underline; }
.dnote li span { color: var(--dsh-faint); font-size: 12px; white-space: nowrap; }

.dnote li.unread a,
.dnote li.unread strong { font-weight: 700; }

.dnote li.unread::before {
	content: "";
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--dsh-accent);
	flex: 0 0 7px;
	align-self: center;
}

/* ---------- empty and guest states ---------- */

.dash26-empty-state { padding: 40px 0; max-width: 520px; }
.dash26-empty-state h1 { font-family: var(--font-heading, 'Alice', Georgia, serif); font-weight: 400; color: var(--dsh-head); }
.dash26-empty,
.dash26-empty-state p { color: var(--dsh-muted); font-size: 14px; }

/* Signed out: one centred card, not a paragraph adrift in an empty page. */
.dash26-guest-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 64px 16px 80px;
	display: flex;
	justify-content: center;
}

.dash26-guest {
	max-width: 440px;
	width: 100%;
	text-align: center;
	border: 1px solid #E4E9F4;
	border-radius: 14px;
	background: #fff;
	padding: 38px 32px 34px;
	box-shadow: 0 2px 18px rgba(12, 42, 142, .06);
}

.dash26-guest-mark {
	width: 54px;
	height: 54px;
	border-radius: 50%;
	background: #F1F5FE;
	color: var(--gateway-indigo, #0C2A8E);
	display: grid;
	place-items: center;
	margin: 0 auto 16px;
}

.dash26-guest-mark svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.dash26-guest h1 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: #001B89;
	font-size: 26px;
	margin: 0 0 8px;
}

.dash26-guest p {
	color: #5A6684;
	font-size: 14.5px;
	margin: 0 0 6px;
}

.dash26-btn {
	display: inline-block;
	margin-top: 14px;
	background: var(--gateway-magenta, #98014C);
	color: #fff;
	padding: 11px 26px;
	border-radius: 7px;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.dash26-btn:hover { background: var(--gateway-magenta-deep, #7A0B3C); color: #fff; }

/* ---------- narrow screens ---------- */

@media (max-width: 980px) {
	.dsh { grid-template-columns: minmax(0, 1fr); border-left: 0; border-right: 0; }
	.dnav { border-right: 0; border-bottom: 1px solid var(--dsh-rule); }
	.dnav a, .dnav .on { display: inline-flex; margin: 0 4px 4px 0; }
	.dnav .me { text-align: left; display: flex; align-items: center; gap: 12px; }
	.dnav .av { margin: 0; }
	.tiles { grid-template-columns: minmax(0, 1fr); }
	.tile.wide { grid-column: auto; }
	.chead { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
	.chead h2 { font-size: 23px; }
	.dmain { padding: 18px 16px 28px; }
	.tile { flex-wrap: wrap; }
	.tile .act { margin-left: 74px; }
}

/* ------------------------------------------------------------------
   The same sidebar on the My Account pages.

   Those pages are a flex row - .myAccount-section .woocommerce is
   display:flex with a 50px column gap - and WooCommerce's own nav carried
   its width in the theme's rules. The sidebar replacing it has to declare
   its own, or it collapses to its content and the content panel wraps
   underneath.

   The tokens are redeclared here because .dnav is no longer inside .dsh
   on these pages, and that is where they were defined.
   ------------------------------------------------------------------ */

.myAccount-section .woocommerce > .dnav {
	--dsh-accent:       var(--gateway-magenta, #98014C);
	--dsh-accent2:      var(--gateway-indigo, #0C2A8E);
	--dsh-accent2-soft: #F1F5FE;
	--dsh-ground:       #F7FAFF;
	--dsh-rule:         #E4E9F4;
	--dsh-head:         #001B89;
	--dsh-ink:          #1A2340;

	flex: 0 0 238px;
	max-width: 238px;
	border: 1px solid var(--dsh-rule);
	border-radius: 12px;
	align-self: flex-start;
	font-family: var(--font-body, inherit);
	color: var(--dsh-ink);
}

.myAccount-section .woocommerce > .dnav .me b,
.myAccount-section .woocommerce > .dnav .av {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
}

.myAccount-section .woocommerce > .dnav .me b { color: var(--dsh-head); }

/* The content panel has to be allowed to shrink, or a wide table inside it
   pushes the sidebar off the row. */
.myAccount-section .woocommerce > .woocommerce-MyAccount-content {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
}

@media (max-width: 980px) {
	.myAccount-section .woocommerce > .dnav {
		flex: 1 1 100%;
		max-width: none;
	}
}

/* ------------------------------------------------------------------
   The older participant screens, wrapped in the same shell.

   Their markup is left exactly as it was and put in the right-hand column,
   so each one still carries its own <div class="container"> - a Bootstrap
   container with its own max-width and side padding. Inside a column that
   is already inset, that reads as a wide empty margin, so it is neutralised
   here rather than by editing those templates.
   ------------------------------------------------------------------ */

.dsh-wrap .dmain > section {
	padding-left: 0;
	padding-right: 0;
}

.dsh-wrap .dmain .container,
.dsh-wrap .dmain .container-fluid {
	width: 100%;
	max-width: none;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* The shell is the page's own width, so it needs the breathing room the
   theme's container would otherwise have given it. */
.dsh-wrap {
	margin-top: 28px;
	margin-bottom: 40px;
}

@media (max-width: 1280px) {
	.dsh-wrap { margin-left: 16px; margin-right: 16px; }
}

/* ------------------------------------------------------------------
   The notification centre.

   Grouped by course, because a participant with four enrolments wants to
   see which one has something new rather than one long list in date order.
   Unread carries a dot and a heavier title; read fades back rather than
   disappearing, so the history stays readable.
   ------------------------------------------------------------------ */

.ncentre-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 22px;
	flex-wrap: wrap;
}

.ncentre-head h1 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	font-size: 29px;
	margin: 0;
}

.ncentre-head p { margin: 4px 0 0; font-size: 13px; color: var(--dsh-muted, #5A6684); }

.ncentre-readall {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid var(--dsh-accent-line, #F2DCE8);
	background: var(--dsh-accent-soft, #FDF3F9);
	color: var(--dsh-accent, #98014C);
	padding: 9px 18px;
	border-radius: 7px;
}

.ncentre-readall:hover { background: var(--dsh-accent, #98014C); color: #fff; }

.ncentre-group { margin-bottom: 26px; }

.ncentre-group-head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
}

.ncentre-group-head h2 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	font-size: 18px;
	margin: 0;
	min-width: 0;
}

.ncentre-group-head h2 a { color: inherit; text-decoration: none; }
.ncentre-group-head h2 a:hover { text-decoration: underline; }

.ncentre-count {
	background: var(--dsh-accent, #98014C);
	color: #fff;
	border-radius: 40px;
	font-size: 11px;
	font-weight: 700;
	padding: 2px 9px;
	flex: 0 0 auto;
}

.ncentre-list {
	list-style: none;
	margin: 0;
	padding: 0;
	border: 1px solid var(--dsh-rule, #E4E9F4);
	border-radius: 12px;
	overflow: hidden;
}

.ncentre-list li {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	border-top: 1px solid var(--dsh-rule-soft, #EDF1F8);
	background: #fff;
}

.ncentre-list li:first-child { border-top: 0; }
.ncentre-list li.is-unread { background: var(--dsh-accent2-soft, #F1F5FE); }
.ncentre-list li.is-read .ncentre-item strong { font-weight: 500; }
.ncentre-list li.is-read { color: var(--dsh-muted, #5A6684); }

.ncentre-item { min-width: 0; }

.ncentre-item strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--dsh-head, #001B89);
	line-height: 1.35;
}

.ncentre-item strong a { color: inherit; text-decoration: none; }
.ncentre-item strong a:hover { text-decoration: underline; }
.ncentre-item p { margin: 4px 0 0; font-size: 13px; color: var(--dsh-muted, #5A6684); }

.ncentre-when {
	display: block;
	margin-top: 6px;
	font-size: 11.5px;
	color: var(--dsh-faint, #8D96AC);
}

.ncentre-read {
	font: inherit;
	font-size: 12px;
	cursor: pointer;
	border: 1px solid var(--dsh-rule, #E4E9F4);
	background: #fff;
	color: var(--dsh-muted, #5A6684);
	padding: 6px 12px;
	border-radius: 6px;
	white-space: nowrap;
	flex: 0 0 auto;
}

.ncentre-read:hover { border-color: var(--dsh-accent2, #0C2A8E); color: var(--dsh-accent2, #0C2A8E); }

.ncentre-empty {
	border: 1px solid var(--dsh-rule, #E4E9F4);
	border-radius: 12px;
	padding: 34px 22px;
	text-align: center;
	color: var(--dsh-muted, #5A6684);
	font-size: 14px;
}

@media (max-width: 620px) {
	.ncentre-list li { flex-direction: column; }
	.ncentre-read { align-self: flex-start; }
}

/* ------------------------------------------------------------------
   Course cards inside the shell.

   style.css gives .product-details .video-card a fixed height of 440px and
   .video-card overflow:hidden. At full page width four cards fit that; in
   the shell's narrower column the titles wrap onto more lines and the
   price, the description and the button fall outside the card and are
   clipped away - which is why the courses looked unclickable.

   Two per row here, and the card grows to its content instead.
   ------------------------------------------------------------------ */

.dsh-wrap .dmain .product-details .video-card {
	height: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.dsh-wrap .dmain .product-details .video-card .video-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* The button sits at the foot of every card, so a short description does
   not leave it floating halfway up. */
.dsh-wrap .dmain .product-details .video-card .video-content > a:last-child {
	margin-top: auto;
	align-self: flex-start;
}

.dsh-wrap .dmain .product-details .col-md-3 {
	flex: 0 0 50%;
	max-width: 50%;
}

@media (max-width: 900px) {
	.dsh-wrap .dmain .product-details .col-md-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}
}

/* ------------------------------------------------------------------
   The lesson view: curriculum on the left, one item open on the right.
   ------------------------------------------------------------------ */

.lesson-top {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 22px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}

.lesson-top .eyebrow {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dsh-faint, #8D96AC);
	font-weight: 600;
	margin: 0;
}

.lesson-top h1 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	font-size: 26px;
	line-height: 1.2;
	margin: 4px 0 0;
}

.lesson-prog { min-width: 220px; }
.lesson-prog .trk { height: 7px; border-radius: 40px; background: var(--dsh-rule-soft, #EDF1F8); overflow: hidden; }
.lesson-prog .trk i { display: block; height: 100%; background: var(--dsh-accent2, #0C2A8E); border-radius: 40px; }
.lesson-prog p { margin: 7px 0 0; font-size: 12px; color: var(--dsh-muted, #5A6684); }

.lesson-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 20px; align-items: start; }

/* ---- curriculum ---- */

.curric {
	border: 1px solid var(--dsh-rule, #E4E9F4);
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
}

.curric-mod { border-top: 1px solid var(--dsh-rule-soft, #EDF1F8); }
.curric-mod:first-child { border-top: 0; }

.curric-mod-hd {
	padding: 11px 14px;
	background: var(--dsh-ground, #F7FAFF);
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.curric-mod-hd strong {
	font-size: 13px;
	font-weight: 700;
	color: var(--dsh-head, #001B89);
	line-height: 1.3;
}

.curric-when { font-size: 11px; color: var(--dsh-accent, #98014C); font-weight: 600; }

.curric ul { list-style: none; margin: 0; padding: 0; }

.curric li { border-top: 1px solid var(--dsh-rule-soft, #EDF1F8); }

.curric li a,
.curric li span {
	display: block;
	padding: 10px 14px 10px 34px;
	font-size: 13px;
	color: var(--dsh-ink, #1A2340);
	text-decoration: none;
	position: relative;
	line-height: 1.35;
}

/* The tick, the dot and the padlock all live in the same place, so the
   list reads down a single column however mixed the states are. */
.curric li a::before,
.curric li span::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 13px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 1.5px solid var(--dsh-rule, #E4E9F4);
}

.curric li.is-done a::before {
	content: "\2713";
	border-color: var(--dsh-accent2, #0C2A8E);
	background: var(--dsh-accent2, #0C2A8E);
	color: #fff;
	font-size: 8px;
	line-height: 11px;
	text-align: center;
}

.curric li.is-locked span { color: var(--dsh-faint, #8D96AC); }
.curric li.is-locked span::before { content: "\1F512"; border: 0; font-size: 11px; top: 11px; }

.curric li.is-current a { background: var(--dsh-accent2-soft, #F1F5FE); font-weight: 700; color: var(--dsh-head, #001B89); }
.curric li a:hover { background: var(--dsh-accent2-soft, #F1F5FE); }

.curric-mod.is-locked .curric-mod-hd strong { color: var(--dsh-muted, #5A6684); }

/* ---- the open item ---- */

.lesson-panel {
	border: 1px solid var(--dsh-rule, #E4E9F4);
	border-radius: 12px;
	background: #fff;
	padding: 18px;
	margin-bottom: 18px;
}

.lesson-panel h2 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	font-size: 23px;
	margin: 6px 0 0;
	line-height: 1.25;
}

.lesson-panel h3 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	font-size: 17px;
	margin: 0 0 12px;
}

.lesson-panel .eyebrow {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dsh-faint, #8D96AC);
	font-weight: 600;
	margin: 0;
}

.lesson-video {
	position: relative;
	padding-top: 56.25%;
	border-radius: 9px;
	overflow: hidden;
	background: #0b1020;
}

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

.lesson-open { padding: 26px 0; text-align: center; }
.lesson-open p { color: var(--dsh-muted, #5A6684); margin: 0 0 4px; }

.lesson-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}

.lesson-bar .sp { flex: 1; }

.lesson-mark {
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	border: 1px solid var(--dsh-accent2-line, #D8E2F8);
	background: var(--dsh-accent2-soft, #F1F5FE);
	color: var(--dsh-accent2, #0C2A8E);
	padding: 9px 16px;
	border-radius: 7px;
}

.lesson-mark .box {
	width: 17px;
	height: 17px;
	border-radius: 4px;
	border: 1.5px solid var(--dsh-accent2, #0C2A8E);
	display: inline-grid;
	place-items: center;
	font-size: 11px;
	line-height: 1;
	color: transparent;
}

.lesson-mark.is-done { background: var(--dsh-accent2, #0C2A8E); border-color: var(--dsh-accent2, #0C2A8E); color: #fff; }
.lesson-mark.is-done .box { background: #fff; color: var(--dsh-accent2, #0C2A8E); border-color: #fff; }
.lesson-mark:hover { border-color: var(--dsh-accent2, #0C2A8E); }

.lesson-step {
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--dsh-rule, #E4E9F4);
	color: var(--dsh-muted, #5A6684);
	padding: 9px 15px;
	border-radius: 7px;
}

.lesson-step.is-next { background: var(--dsh-accent, #98014C); border-color: var(--dsh-accent, #98014C); color: #fff; }
.lesson-step:hover { border-color: var(--dsh-accent2, #0C2A8E); color: var(--dsh-accent2, #0C2A8E); }
.lesson-step.is-next:hover { background: var(--gateway-magenta-deep, #7A0B3C); color: #fff; }

.lesson-callout {
	margin-top: 16px;
	border-left: 4px solid var(--dsh-accent, #98014C);
	background: var(--dsh-accent-soft, #FDF3F9);
	padding: 12px 15px;
	border-radius: 0 8px 8px 0;
	font-size: 13px;
	color: var(--dsh-ink, #1A2340);
}

.lesson-rows { list-style: none; margin: 0; padding: 0; }

.lesson-rows li {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 11px 0;
	border-top: 1px solid var(--dsh-rule-soft, #EDF1F8);
}

.lesson-rows li:first-child { border-top: 0; }

.lesson-rows .tic {
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--dsh-accent2-soft, #F1F5FE);
	display: grid;
	place-items: center;
	color: var(--dsh-accent2, #0C2A8E);
}

.lesson-rows .tic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lesson-rows li.is-done .tic { background: var(--dsh-accent2, #0C2A8E); color: #fff; }
.lesson-rows .tx { flex: 1; min-width: 0; }
.lesson-rows .tx strong { display: block; font-size: 13.5px; color: var(--dsh-head, #001B89); line-height: 1.3; }
.lesson-rows .tx span { font-size: 12px; color: var(--dsh-muted, #5A6684); }
.lesson-rows li a { font-size: 13px; font-weight: 600; color: var(--dsh-accent2, #0C2A8E); text-decoration: none; white-space: nowrap; }

@media (max-width: 980px) {
	.lesson-split { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------------
   Study notes read in place, since they have no page of their own.

   Nearly every document is a list of references written as: a bold title,
   a sentence, then the address. In HTML those three run together on one
   line, and the address - often 90 characters - wraps mid-word and swamps
   the sentence. So each list item becomes a row with the title on its own
   line, and the address is shown as the site it points at.
   ------------------------------------------------------------------ */

.lesson-doc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--dsh-ink, #1A2340);
	overflow-wrap: break-word;
}

.lesson-doc > :first-child { margin-top: 0; }
.lesson-doc > :last-child { margin-bottom: 0; }

.lesson-doc h1, .lesson-doc h2, .lesson-doc h3, .lesson-doc h4 {
	font-family: var(--font-heading, 'Alice', Georgia, serif);
	font-weight: 400;
	color: var(--dsh-head, #001B89);
	line-height: 1.25;
	margin: 26px 0 10px;
}

.lesson-doc h1 { font-size: 22px; }
.lesson-doc h2 { font-size: 20px; }
.lesson-doc h3, .lesson-doc h4 { font-size: 17px; }

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

/* Reference lists: a row each, not a run of bullets. */
.lesson-doc ul, .lesson-doc ol {
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.lesson-doc ol { counter-reset: doc-step; }

.lesson-doc li {
	position: relative;
	padding: 13px 0 13px 18px;
	border-top: 1px solid var(--dsh-rule-soft, #EDF1F8);
}

.lesson-doc li:first-child { border-top: 0; }

.lesson-doc ul > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 23px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dsh-accent2, #0C2A8E);
}

.lesson-doc ol > li { padding-left: 30px; }

.lesson-doc ol > li::before {
	counter-increment: doc-step;
	content: counter(doc-step);
	position: absolute;
	left: 0;
	top: 13px;
	width: 21px;
	height: 21px;
	border-radius: 50%;
	background: var(--dsh-accent2-soft, #F1F5FE);
	color: var(--dsh-accent2, #0C2A8E);
	font-size: 11.5px;
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* The title of a reference sits on its own line. */
.lesson-doc li > strong:first-child {
	display: block;
	font-size: 15px;
	color: var(--dsh-head, #001B89);
	margin-bottom: 3px;
	line-height: 1.35;
}

.lesson-doc li p { margin: 0 0 6px; }

/* An address shown as the site it points at. */
.lesson-doc a { color: var(--dsh-accent2, #0C2A8E); overflow-wrap: anywhere; }

.lesson-doc a.doc-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 7px;
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--dsh-accent2-line, #D8E2F8);
	background: var(--dsh-accent2-soft, #F1F5FE);
	color: var(--dsh-accent2, #0C2A8E);
	padding: 5px 11px;
	border-radius: 40px;
	overflow-wrap: normal;
	white-space: nowrap;
	max-width: 100%;
}

.lesson-doc a.doc-link:hover {
	background: var(--dsh-accent2, #0C2A8E);
	border-color: var(--dsh-accent2, #0C2A8E);
	color: #fff;
}

.lesson-doc .doc-link-go { font-size: 11px; line-height: 1; }

.lesson-doc img { max-width: 100%; height: auto; border-radius: 8px; }

.lesson-doc table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 16px;
	font-size: 14px;
	display: block;
	overflow-x: auto;
}

.lesson-doc th, .lesson-doc td {
	border: 1px solid var(--dsh-rule, #E4E9F4);
	padding: 8px 10px;
	text-align: left;
}

.lesson-doc th { background: var(--dsh-ground, #F7FAFF); font-weight: 600; }

.lesson-doc blockquote {
	margin: 0 0 16px;
	padding: 11px 16px;
	border-left: 4px solid var(--dsh-accent2-line, #D8E2F8);
	background: var(--dsh-accent2-soft, #F1F5FE);
	border-radius: 0 8px 8px 0;
}