/**
 * CourseGlade Unified Dashboard Styles
 *
 * Combines profile sidebar layout with dashboard content.
 * Imports all shared component styles (stats, tables, cards, etc.).
 */


/* ==========================================================================
   Dashboard Layout
   ========================================================================== */
.courseglade-dashboard {
	margin: 0 auto;
	padding: 0;
}

.courseglade-dashboard a,
.courseglade-dashboard a:hover,
.courseglade-dashboard a:focus,
.courseglade-dashboard a:visited {
	text-decoration: none !important;
	box-shadow: none;
	outline: navajowhite;
}

.courseglade-dashboard-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 24px;
	/* The sidebar is shorter than the panel beside it; without this it would
	   stretch to match and the sticky offset would never engage. */
	align-items: start;
}

/* ==========================================================================
   Dashboard Sidebar
   ========================================================================== */
.courseglade-dashboard-sidebar {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 20px;
	height: fit-content;
	position: sticky;
	top: 20px;
}

.courseglade-dashboard-avatar {
	text-align: center;
	padding-bottom: 16px;
	margin-bottom: 12px;
	border-bottom: 1px solid var(--courseglade-surface-low);
}

/* 72px, not 100px: the sidebar is a way through the dashboard, not a profile
   page, and the portrait was taking a third of its height. */
.courseglade-dashboard-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin-bottom: 10px;
	border: 0;
	/* An uploaded photo is whatever shape the person cropped it to; without
	   this a portrait squashes into the circle. */
	object-fit: cover;
}

.courseglade-dashboard-name {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 2px;
	color: var(--courseglade-on-surface);
}

/* Id-scoped so the theme's paragraph margin loses on specificity rather than
   on !important — Astra puts a bottom margin on every <p>. */
#courseglade-dashboard .courseglade-dashboard-email {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
	margin: 0;
}

.courseglade-dashboard-nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.courseglade-dashboard-nav__item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--courseglade-radius);
	text-decoration: none;
	color: var(--courseglade-on-surface-secondary);
	font-weight: 500;
	transition: background 0.15s ease, color 0.15s ease;
	font-size: 0.875rem;
}

.courseglade-dashboard-nav__item:hover {
	background: var(--courseglade-surface);
	color: var(--courseglade-on-surface);
}

.courseglade-dashboard-nav__item.is-active {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
	font-weight: 600;
}

.courseglade-dashboard-nav__item svg {
	flex-shrink: 0;
}

/* A named group rather than a rule between items. */
.courseglade-dashboard-nav__group {
	padding: 12px 12px 4px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--courseglade-gray-400);
}

.courseglade-dashboard-nav__group:first-child {
	padding-top: 0;
}

.courseglade-dashboard-nav__divider {
	height: 1px;
	background: var(--courseglade-border);
	margin: 8px 0;
}

.courseglade-dashboard-nav__item--logout {
	color: var(--courseglade-gray-600);
}

.courseglade-dashboard-nav__item--logout:hover {
	background: var(--courseglade-danger-bg);
	color: var(--courseglade-danger);
}

/* ==========================================================================
   Dashboard Main Content
   ========================================================================== */
.courseglade-dashboard-main {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
}

/* Each block in the column carries its own surface. */
.courseglade-dashboard-main > * {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 24px;
}

/* Opt-outs: a modal is positioned over the page rather than sitting in the
   column, and a bare heading is a label for the card under it, not a card. */
.courseglade-dashboard-main > .courseglade-dashboard-main--bare,
.courseglade-dashboard-main > .courseglade-dashboard-overview,
.courseglade-dashboard-main > .courseglade-dashboard-my-courses,
.courseglade-dashboard-main > .courseglade-dashboard-wishlist,
.courseglade-dashboard-main > .courseglade-dashboard-reviews,
.courseglade-dashboard-main > .courseglade-dashboard-discussions,
.courseglade-dashboard-main > .courseglade-dashboard-activity,
.courseglade-dashboard-main > .courseglade-dashboard-my-teaching,
.courseglade-dashboard-main > .courseglade-dashboard-earnings,
.courseglade-dashboard-main > .courseglade-dashboard-withdrawals,
.courseglade-dashboard-main > .courseglade-dashboard-orders,
.courseglade-dashboard-main > .courseglade-dashboard-invoice,
.courseglade-dashboard-main > .courseglade-dashboard-settings,
/* A Pro panel, listed here because FREE owns the rule that paints one. */
.courseglade-dashboard-main > .courseglade-subscriptions,
.courseglade-dashboard-main > .courseglade-modal,
.courseglade-dashboard-main > .courseglade-confirm-modal,
.courseglade-dashboard-main > h1,
.courseglade-dashboard-main > h2,
.courseglade-dashboard-main > .courseglade-dashboard-loading {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Flash messages */
.courseglade-profile-message {
	padding: 12px 20px;
	border-radius: var(--courseglade-radius);
	margin-bottom: 24px;
	font-weight: 500;
}

.courseglade-profile-message--success {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success-dark);
}

.courseglade-profile-message--error {
	background: var(--courseglade-danger-bg);
	color: var(--courseglade-danger-hover);
}

/* Section titles */
.courseglade-profile-section__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--courseglade-gray-900);
}

.courseglade-profile-subsection__title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 32px 0 16px;
	color: var(--courseglade-gray-900);
}

/* ==========================================================================
   Settings Sub-tabs
   ========================================================================== */
/* Picture on the left, its controls beside it — a column of buttons under an
   avatar reads as a caption rather than as things to press. */
.courseglade-avatar-upload {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-avatar-upload__side {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.courseglade-avatar-upload__actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* A label styled as a button still has to behave like one. */
#courseglade-dashboard label.courseglade-btn {
	cursor: pointer;
}

#courseglade-dashboard .courseglade-avatar-hint {
	margin: 0;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

/* The heading belongs to the page; the tabs and whichever form they switch
   between are one object, so they share a surface. */
.courseglade-settings-card {
	padding: 4px 24px 24px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

/* Full bleed inside the card, so the rule under the tabs reads as the edge of
   the strip rather than a line drawn across the middle of a box. */
.courseglade-settings-card .courseglade-settings-tabs {
	margin: 0 -24px 24px;
	padding: 0 24px;
}

.courseglade-settings-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--courseglade-border);
	margin-bottom: 24px;
}

.courseglade-settings-tab {
	padding: 12px 20px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--courseglade-gray-600);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	transition: all 0.15s ease;
}

.courseglade-settings-tab:hover {
	color: var(--courseglade-gray-900);
}

.courseglade-settings-tab.is-active {
	color: var(--courseglade-primary);
	border-bottom-color: var(--courseglade-primary);
}

/* 20px of side padding per tab is most of a phone's width once there are
   three or four of them. */
@media (max-width: 520px) {
	.courseglade-settings-tab {
		padding: 12px 16px;
	}
}

/* ==========================================================================
   Forms (from profile.css)
   ========================================================================== */
/* Inside the settings card the form takes the card's width: a 600px column
   in a 900px box leaves a margin that looks like a mistake. Elsewhere the
   cap still applies. */
.courseglade-profile-form {
	max-width: 600px;
}

.courseglade-settings-card .courseglade-profile-form {
	max-width: none;
}

/* The submit sits below a rule, so it reads as the end of the form rather
   than as one more field. */
.courseglade-settings-card .courseglade-profile-form > .courseglade-btn[type="submit"] {
	margin: 0;
	padding-top: 0;
}

.courseglade-settings-card .courseglade-profile-form > .courseglade-form-group:last-of-type {
	padding-bottom: 24px;
	border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-profile-form .courseglade-form-group {
	margin-bottom: 20px;
}

.courseglade-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}


.courseglade-form-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}

.courseglade-form-label-row .courseglade-form-label {
	margin-bottom: 0;
}

.courseglade-char-counter {
	font-size: 0.75rem;
	color: var(--courseglade-gray-500);
}

/* Id-scoped for the margin: Astra puts a bottom margin on every paragraph,
   and losing to it on specificity is cheaper than an !important. */
#courseglade-dashboard .courseglade-form-hint {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-500);
	margin-top: 5px;
	margin-bottom: 0;
}

/* Avatar Upload */
/* Beside its buttons rather than above them, so the row reads as a control
   with a label and not as a portrait with a caption. Still clickable — the
   label wraps it — but the button next to it is what says so: an overlay is
   invisible until hovered and never appears on a touch screen. */
.courseglade-avatar-preview {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	flex-shrink: 0;
	display: block;
}

.courseglade-avatar-preview img,
.courseglade-avatar-preview .avatar {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}


.courseglade-avatar-hint {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-500);
	margin: 0;
}

/* Password input wrapper with show/hide toggle */
.courseglade-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
}

.courseglade-input-wrapper .courseglade-form-input {
	padding-right: 2.75rem;
	width: 100%;
}

.courseglade-password-toggle {
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--courseglade-gray-500);
	display: flex;
	align-items: center;
	line-height: 1;
	transition: color 0.15s ease;
}

.courseglade-password-toggle:hover {
	color: var(--courseglade-gray-700);
}

/* Password strength */
.courseglade-password-strength {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-top: 6px;
}


.courseglade-strength-bar {
	flex: 1;
	height: 4px;
	background: var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius-pill);
	overflow: hidden;
}

.courseglade-strength-fill {
	height: 100%;
	border-radius: var(--courseglade-radius-pill);
	transition: width 0.25s ease, background 0.25s ease;
	width: 0;
}

.courseglade-strength-fill.weak   { background: var(--courseglade-strength-weak); }
.courseglade-strength-fill.fair   { background: var(--courseglade-strength-fair); }
.courseglade-strength-fill.good   { background: var(--courseglade-strength-good); }
.courseglade-strength-fill.strong { background: var(--courseglade-success); }

.courseglade-strength-label {
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.courseglade-strength-label.weak   { color: var(--courseglade-strength-weak); }
.courseglade-strength-label.fair   { color: var(--courseglade-strength-fair); }
.courseglade-strength-label.good   { color: var(--courseglade-strength-good); }
.courseglade-strength-label.strong { color: var(--courseglade-success); }

/* Social input group with icon prefix */
.courseglade-input-group {
	display: flex;
	align-items: stretch;
}

.courseglade-input-prefix {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	background: var(--courseglade-gray-50);
	border: 1px solid var(--courseglade-gray-200);
	border-right: none;
	border-radius: var(--courseglade-radius) 0 0 var(--courseglade-radius);
	color: var(--courseglade-gray-500);
	flex-shrink: 0;
}

.courseglade-input-group .courseglade-form-input {
	border-radius: 0 var(--courseglade-radius) var(--courseglade-radius) 0;
	flex: 1;
}

/* ==========================================================================
   Loading State
   ========================================================================== */
.courseglade-dashboard-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4rem 2rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-dashboard-loading .courseglade-spinner {
	margin-bottom: 1rem;
}

/* The overview's wait sits in a card of its own, tall enough that the panel
   does not collapse to a strip before the data lands. */
.courseglade-dashboard-overview > .courseglade-dashboard-loading {
	min-height: 260px;
	gap: 14px;
}

#courseglade-dashboard .courseglade-dashboard-loading p {
	margin: 0;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-muted);
}

/* The ring alone reads as a wait; spelling it out as well is for anyone who
   cannot see it spin. */
@media (prefers-reduced-motion: reduce) {
	#courseglade-dashboard .courseglade-spinner {
		animation-duration: 2s;
	}
}

/* ==========================================================================
   Stats Grid (shared between dashboard overview and progress tab)
   ========================================================================== */
.courseglade-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-bottom: 32px;
}

.courseglade-stat-card {
	background: var(--courseglade-gray-50);
	border-radius: var(--courseglade-radius-md);
	padding: 20px;
	text-align: center;
}

.courseglade-stat-card__value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	line-height: 1;
	margin-bottom: 8px;
}

.courseglade-stat-card__label {
	font-size: 0.875rem;
	color: var(--courseglade-gray-600);
}

/* The page's own heading, above the cards rather than inside one. */
.courseglade-dashboard-head h1 {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
	margin: 0;
	line-height: 1.2;
}

#courseglade-dashboard .courseglade-dashboard-head p {
	margin: 4px 0 0;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-muted);
}

/* Dashboard overview layout: a column of cards, one per section. */
.courseglade-dashboard-overview {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.courseglade-dashboard-overview > * {
	margin-bottom: 0 !important;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 20px;
}

/* The tiles are cards in their own right, so the row holding them is not. */
.courseglade-dashboard-overview > .courseglade-stats-grid {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

/* Dashboard overview stat cards (with icons) */
/* Four tiles, so the column count is stated rather than fitted. auto-fit with
   a 180px floor needs 762px to place four, and the dashboard's main column is
   around 645px at a normal desktop width — so it placed three and left the
   fourth on a row by itself. An explicit count cannot orphan one. */
.courseglade-dashboard-overview .courseglade-stats-grid,
.courseglade-profile-section .courseglade-stats-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1200px) {
	/* Two by two rather than four across: at this width four tracks are about
	   150px each, and "In progress" starts wrapping under its own number. */
	.courseglade-dashboard-overview .courseglade-stats-grid,
	.courseglade-profile-section .courseglade-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 520px) {
	.courseglade-dashboard-overview .courseglade-stats-grid,
	.courseglade-profile-section .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* The tile, once, for every panel that shows one. It was written four times
   over — overview, quiz attempts, grades, achievements — each a copy of the
   last, and a new panel got the grey centred original by default because
   nobody remembered to add it to the list. */
#courseglade-dashboard .courseglade-stat-card {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	display: flex;
	align-items: center;
	gap: 12px;
	text-align: left;
	padding: 16px;
}

/* The number carries the tile; it does not need to be primary as well. */
#courseglade-dashboard .courseglade-stat-card__value {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
	margin-bottom: 0;
}

#courseglade-dashboard .courseglade-stat-card__label {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
	margin-top: 3px;
}

.courseglade-stat-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--courseglade-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.courseglade-stat-icon svg {
	width: 18px;
	height: 18px;
}

.courseglade-stat-icon.enrolled {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
}

.courseglade-stat-icon.completed {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-stat-icon.in-progress {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

/* Something is waiting on the reader. Used only when the count is above zero;
   a red zero is a warning about nothing. */
.courseglade-stat-icon.danger {
	background: var(--courseglade-danger-bg);
	color: var(--courseglade-danger);
}

/* Time is a fact about learning, not a neutral one — the draft keeps it in the
   primary tint rather than letting it read as disabled. */
.courseglade-stat-icon.time {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
}

.courseglade-stat-icon.inst-courses {
	background: rgba(121, 80, 242, 0.1);
	color: var(--courseglade-accent-purple);
}

.courseglade-stat-icon.inst-students {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-accent-teal);
}

.courseglade-stat-icon.inst-earnings {
	background: var(--courseglade-danger-bg);
	color: var(--courseglade-accent-coral);
}

.courseglade-stat-icon.inst-rating {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-accent-orange);
}

.courseglade-stat-content {
	flex: 1;
	min-width: 0;
}

.courseglade-stat-value {
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1;
	color: var(--courseglade-on-surface);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-stat-label {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
	margin-top: 3px;
	line-height: 1.5;
}

/* ==========================================================================
   Progress List
   ========================================================================== */
.courseglade-progress-list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.courseglade-progress-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	background: var(--courseglade-gray-50);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
}

.courseglade-progress-item__thumb {
	width: 72px;
	border-radius: var(--courseglade-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	display: flex;
}

.courseglade-progress-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-progress-item__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.courseglade-progress-item__info {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	min-width: 0;
}

.courseglade-progress-item__meta {
	min-width: 0;
	flex: 1;
}

.courseglade-progress-item__title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	text-decoration: none;
	margin-bottom: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-progress-item__title:hover {
	color: var(--courseglade-primary);
}

.courseglade-progress-item__date {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-600);
}

.courseglade-progress-item__bar {
	width: 100%;
	height: 8px;
	background: var(--courseglade-gray-300);
	border-radius: 4px;
	overflow: hidden;
}

.courseglade-progress-item__bar-fill {
	height: 100%;
	background: var(--courseglade-primary);
	border-radius: 4px;
	transition: width 0.3s ease;
}

.courseglade-progress-item__percent {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	white-space: nowrap;
	flex-shrink: 0;
}

/* ==========================================================================
   Orders Table
   ========================================================================== */

.courseglade-orders-summary {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
	flex-wrap: wrap;
}

.courseglade-orders-summary-card {
	flex: 1;
	min-width: 140px;
	background: var(--courseglade-gray-50);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.courseglade-orders-summary-card__label {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--courseglade-gray-500);
}

.courseglade-orders-summary-card__value {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--courseglade-gray-900);
	line-height: 1.2;
}

.courseglade-orders-table-wrapper {
	overflow-x: auto;
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.courseglade-orders-table {
	width: 100%;
	border-collapse: collapse;
}

.courseglade-orders-table th,
.courseglade-orders-table td {
	padding: 16px 20px;
	text-align: left;
	border-bottom: 1px solid var(--courseglade-gray-100);
}

.courseglade-orders-table tbody tr:last-child td {
	border-bottom: none;
}

.courseglade-orders-table th {
	font-weight: 600;
	font-size: 0.75rem;
	color: var(--courseglade-gray-500);
	background: var(--courseglade-gray-50);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	border-bottom: 1px solid var(--courseglade-gray-200);
}

.courseglade-orders-table th:first-child {
	border-radius: var(--courseglade-radius) 0 0 0;
}

.courseglade-orders-table th:last-child {
	border-radius: 0 var(--courseglade-radius) 0 0;
}

.courseglade-orders-table tbody tr {
	transition: background 0.15s;
}

.courseglade-orders-table tbody tr.courseglade-order-row:hover {
	background: var(--courseglade-gray-100);
}

.courseglade-order-id {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.courseglade-order-id__icon {
	width: 34px;
	height: 34px;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.courseglade-order-id__details {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.courseglade-order-id__number {
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--courseglade-gray-900);
	line-height: 1.2;
}

.courseglade-order-id__courses {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-500);
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 260px;
}

.courseglade-order-date {
	color: var(--courseglade-gray-600);
	font-size: 0.9375rem;
	white-space: nowrap;
}

.courseglade-order-total {
	font-weight: 700;
	font-size: 1rem;
	color: var(--courseglade-gray-900);
}

.courseglade-order-row {
	cursor: pointer;
	user-select: none;
}


.courseglade-order-actions {
	text-align: right !important;
}

.courseglade-orders-table th.courseglade-order-actions {
	text-align: right !important;
}

.courseglade-order-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	border-radius: var(--courseglade-radius-sm);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.courseglade-order-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.8;
	flex-shrink: 0;
}

.courseglade-order-status--pending {
	background: var(--courseglade-status-warning-bg);
	color: var(--courseglade-warning-text);
}

.courseglade-order-status--processing {
	background: var(--courseglade-status-info-bg);
	color: var(--courseglade-status-info-text);
}

.courseglade-order-status--completed {
	background: var(--courseglade-status-success-bg);
	color: var(--courseglade-status-success-text);
}

.courseglade-order-status--failed,
.courseglade-order-status--cancelled {
	background: var(--courseglade-status-danger-bg);
	color: var(--courseglade-status-danger-text);
}

.courseglade-order-status--refunded {
	background: var(--courseglade-gray-100);
	color: var(--courseglade-gray-600);
}

/* ==========================================================================
   Certificates Grid
   ========================================================================== */
.courseglade-certificates-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

.courseglade-certificate-card {
	background: linear-gradient(135deg, var(--courseglade-gray-50) 0%, var(--courseglade-gray-200) 100%);
	border: 2px solid var(--courseglade-gray-300);
	border-radius: var(--courseglade-radius-md);
	padding: 24px;
	text-align: center;
}

.courseglade-certificate-card__icon {
	color: var(--courseglade-warning);
	margin-bottom: 12px;
}

.courseglade-certificate-card__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--courseglade-gray-900);
}

.courseglade-certificate-card__date {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-600);
	margin: 0 0 16px;
}

/* ==========================================================================
   Quiz Status Badges
   ========================================================================== */
.courseglade-quiz-status {
	display: inline-block;
	padding: 4px 10px;
	border-radius: var(--courseglade-radius-pill);
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
}

.courseglade-quiz-status--passed {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success-dark);
}

.courseglade-quiz-status--failed {
	background: var(--courseglade-danger-bg);
	color: var(--courseglade-danger-hover);
}

.courseglade-quiz-status--timed_out {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning-accent);
}

.courseglade-quiz-status--in_progress {
	background: var(--courseglade-gray-100);
	color: var(--courseglade-gray-600);
}

/* ==========================================================================
   Quiz Attempts Card List
   ========================================================================== */
.courseglade-quiz-attempts-list {
	display: flex;
	flex-direction: column;
	gap: 0;
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	overflow: hidden;
}

.courseglade-quiz-attempt-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--courseglade-surface-lowest);
	border-bottom: 1px solid var(--courseglade-gray-200);
}

.courseglade-quiz-attempt-card:last-child {
	border-bottom: none;
}

.courseglade-quiz-attempt-card:hover {
	background: var(--courseglade-gray-50);
}

.courseglade-quiz-attempt-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--courseglade-primary-bg);
	color: var(--courseglade-primary);
	flex-shrink: 0;
}

.courseglade-quiz-attempt-card__main {
	flex: 1;
	min-width: 0;
}

.courseglade-quiz-attempt-card__title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	text-decoration: none;
	margin-bottom: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-quiz-attempt-card__title:hover {
	color: var(--courseglade-primary);
}

.courseglade-quiz-attempt-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--courseglade-gray-600);
}

.courseglade-quiz-attempt-card__course {
	color: var(--courseglade-gray-700);
	text-decoration: none;
}

.courseglade-quiz-attempt-card__course:hover {
	color: var(--courseglade-primary);
}

.courseglade-quiz-attempt-card__sep {
	color: var(--courseglade-gray-500);
}

.courseglade-quiz-attempt-card__date {
	color: var(--courseglade-gray-600);
}

.courseglade-quiz-attempt-card__score {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	line-height: 1.3;
}

.courseglade-quiz-attempt-card__score-value {
	font-size: 0.9375rem;
	font-weight: 700;
}

.courseglade-quiz-attempt-card__score-pct {
	font-size: 0.75rem;
}

.courseglade-quiz-attempt-card__score--passed .courseglade-quiz-attempt-card__score-value,
.courseglade-quiz-attempt-card__score--passed .courseglade-quiz-attempt-card__score-pct { color: var(--courseglade-success); }

.courseglade-quiz-attempt-card__score--failed .courseglade-quiz-attempt-card__score-value,
.courseglade-quiz-attempt-card__score--failed .courseglade-quiz-attempt-card__score-pct { color: var(--courseglade-danger); }

.courseglade-quiz-attempt-card__score--default .courseglade-quiz-attempt-card__score-value,
.courseglade-quiz-attempt-card__score--default .courseglade-quiz-attempt-card__score-pct { color: var(--courseglade-gray-700); }

/* ==========================================================================
   Earnings
   ========================================================================== */
/* Two by two, stated. `repeat(4, 1fr)` overflowed — `1fr` is
   `minmax(auto, 1fr)` and will not shrink below its own content, so four
   tracks holding "$1,296.61" were wider than the ~650px column and the fourth
   tile hung off the card. auto-fit then fitted three and orphaned the fourth
   on a row of its own: with a fixed count of four tiles there is always a
   width where auto-fit leaves one stranded. An explicit count cannot. */
.courseglade-dashboard-earnings .courseglade-stats-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 20px;
}

@media (max-width: 520px) {
	.courseglade-dashboard-earnings .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* The one figure the page exists to answer, said once in words and once as a
   button, over the trend that produced it. */
.courseglade-payout {
	margin-bottom: 20px;
	padding: 20px 24px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-payout__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

#courseglade-dashboard .courseglade-payout__amount {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

#courseglade-dashboard .courseglade-payout__hint {
	margin: 2px 0 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* Below the minimum there is nothing to press, so the distance to it takes
   the button's place rather than a disabled control that explains nothing. */
.courseglade-payout__blocked {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-payout__chart {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 12px;
	align-items: end;
	height: 150px;
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-payout__bar {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	height: 100%;
}

.courseglade-payout__bar i {
	width: 100%;
	max-width: 60px;
	border-radius: var(--courseglade-radius-sm) var(--courseglade-radius-sm) 0 0;
	background: var(--courseglade-primary);
}

.courseglade-payout__bar-value {
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-payout__bar-label {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--courseglade-on-surface-muted);
}

/* The table, styled here rather than in earnings.css: this tab is server
   rendered and does not load that stylesheet, and without these rules the
   theme draws the table — Astra gives every cell a border and centres the
   headings, which turns a ledger into a spreadsheet. Id-scoped so it wins. */
#courseglade-dashboard .courseglade-earnings-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

#courseglade-dashboard .courseglade-earnings-table {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	font-size: 0.8125rem;
	/* Closes the table off when it is wider than its card: the last row's own
	   border stops where the row does, which on a scrolling table leaves the
	   bottom edge open past the visible width. */
	border-bottom: 1px solid var(--courseglade-border);
}

/* Orders / earnings table columns.
   Item is the widest thing in the row; without a floor it collapses to
   whatever is left after the other five and breaks the course title across
   two or three lines. Date gets nowrap on the cell, not just the text —
   nowrap on a span does not stop the table handing its column less width
   than the span needs. */
.courseglade-earnings-table td:first-child,
.courseglade-earnings-table th:first-child {
	min-width: 250px;
}

.courseglade-earnings-table td:nth-child(2),
.courseglade-earnings-table th:nth-child(2) {
	white-space: nowrap;
}

#courseglade-dashboard .courseglade-earnings-table th,
#courseglade-dashboard .courseglade-earnings-table td {
	border: 0;
	border-bottom: 1px solid var(--courseglade-border);
	padding: 11px 16px;
	text-align: left;
	vertical-align: middle;
}

#courseglade-dashboard .courseglade-earnings-table thead th {
	background: var(--courseglade-surface);
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--courseglade-on-surface-muted);
	white-space: nowrap;
}

/* The last row closes on the card's own border. */
#courseglade-dashboard .courseglade-earnings-table tbody tr:last-child td {
	border-bottom: 0;
}

#courseglade-dashboard .courseglade-earnings-table tbody tr:hover td {
	background: var(--courseglade-surface);
}

/* The banner is not a row to point at — it explains the one above it. Left
   hoverable, the grey framed the notice instead of highlighting anything. */
#courseglade-dashboard .courseglade-earnings-table tbody tr.courseglade-withdraw__notice-row:hover,
#courseglade-dashboard .courseglade-earnings-table tbody tr.courseglade-withdraw__notice-row:hover td {
	background: transparent;
}

#courseglade-dashboard .courseglade-earnings-table__sale b {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

/* Money is compared down a column, so it is right-aligned and the reader's
   eye has one edge to run along. */
#courseglade-dashboard .courseglade-earnings-table__num {
	text-align: right;
	white-space: nowrap;
}

.courseglade-earnings-table__sale {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.courseglade-earnings-table__sale span {
	font-size: 0.6875rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-earnings-table__date,
.courseglade-earnings-table__fee {
	color: var(--courseglade-on-surface-muted);
}

/* The gross is what the student paid, not what the instructor keeps — struck
   through would overstate it, so it simply reads as secondary. */
.courseglade-earnings-table__gross {
	color: var(--courseglade-on-surface-muted);
}

.courseglade-earnings-state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.courseglade-earnings-state--available {
	color: var(--courseglade-success-text);
}

.courseglade-earnings-state--pending {
	color: var(--courseglade-warning-text);
}

/* A refund is not a warning, it is a line that no longer counts — it reads as
   struck from the ledger rather than as something to act on. */
.courseglade-earnings-state--voided {
	color: var(--courseglade-on-surface-muted);
}

.courseglade-earnings-state__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.courseglade-earnings-state--available .courseglade-earnings-state__dot {
	background: var(--courseglade-success);
}

.courseglade-earnings-state--pending .courseglade-earnings-state__dot {
	background: var(--courseglade-warning);
}

.courseglade-earnings-state--voided .courseglade-earnings-state__dot {
	background: var(--courseglade-surface-high);
}

/* A voided share is money that came back off the books, so it is shown as
   what it did to the balance rather than as an amount still owed. */
#courseglade-dashboard .courseglade-earnings-table__share--voided b {
	color: var(--courseglade-danger-text);
}

/* Inside the card, under the last row: the range describes the table above
   it, so it belongs to the same object. */
.courseglade-earnings-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 14px 16px;
}

.courseglade-earnings-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* earnings.css gives the pager a bottom margin for the standalone layout it
   was written for; inside this footer it is one of two things on a row. */
.courseglade-earnings-footer nav.courseglade-earnings-pagination {
	margin: 0;
}


/* ==========================================================================
   Orders
   ========================================================================== */
.courseglade-dashboard-orders .courseglade-stats-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}

.courseglade-order__item {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* A chip that says at a glance whether this was a course or a subscription,
   which is the difference the rest of the row does not show. */
.courseglade-order__icon {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	border-radius: var(--courseglade-radius-sm);
}

.courseglade-order__icon--course {
	background: var(--courseglade-info-bg);
	color: var(--courseglade-primary);
}

.courseglade-order__icon--subscription {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

/* What a coupon took off, under what was actually paid. */
.courseglade-order__discount {
	display: block;
	margin-top: 2px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-success-text);
}

@media (max-width: 768px) {
	.courseglade-dashboard-orders .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Invoice
   ========================================================================== */
.courseglade-invoice__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 16px;
}

#courseglade-dashboard .courseglade-invoice__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-invoice__back:hover {
	color: var(--courseglade-primary-dark);
}

.courseglade-invoice {
	padding: 32px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-invoice__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--courseglade-border);
}

#courseglade-dashboard .courseglade-invoice__title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

#courseglade-dashboard .courseglade-invoice__number {
	margin: 2px 0 0;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-invoice__issuer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: right;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-invoice__issuer b {
	font-size: 0.9375rem;
	color: var(--courseglade-on-surface);
}

.courseglade-invoice__meta {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	padding: 24px 0;
}

.courseglade-invoice__meta > div {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-invoice__meta b {
	font-size: 0.875rem;
	color: var(--courseglade-on-surface);
	word-break: break-word;
}

.courseglade-invoice__label {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--courseglade-on-surface-muted);
}

#courseglade-dashboard .courseglade-invoice__status--completed,
#courseglade-dashboard .courseglade-invoice__status--processing {
	color: var(--courseglade-success-text);
}

#courseglade-dashboard .courseglade-invoice__status--refunded,
#courseglade-dashboard .courseglade-invoice__status--failed,
#courseglade-dashboard .courseglade-invoice__status--cancelled {
	color: var(--courseglade-danger-text);
}

#courseglade-dashboard .courseglade-invoice__table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.875rem;
	/* Themes put a border on the table element itself; the cells draw their
	   own rules and a frame around them is one line too many. */
	border: 0;
}

#courseglade-dashboard .courseglade-invoice__table th,
#courseglade-dashboard .courseglade-invoice__table td {
	border: 0;
	border-bottom: 1px solid var(--courseglade-border);
	padding: 12px 0;
	text-align: left;
}

#courseglade-dashboard .courseglade-invoice__table thead th {
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--courseglade-on-surface-muted);
	border-top: 1px solid var(--courseglade-border);
}

#courseglade-dashboard .courseglade-invoice__num {
	text-align: right;
	white-space: nowrap;
}

.courseglade-invoice__totals {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: auto;
	margin-top: 20px;
	max-width: 280px;
}

.courseglade-invoice__totals > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface-secondary);
}

.courseglade-invoice__discount {
	color: var(--courseglade-success-text);
}

.courseglade-invoice__grand {
	padding-top: 10px;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-invoice__grand b {
	font-size: 1.125rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

#courseglade-dashboard .courseglade-invoice__note {
	margin: 20px 0 0;
	padding: 12px 14px;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-danger-bg);
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-secondary);
}

.courseglade-invoice__foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--courseglade-border);
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

#courseglade-dashboard .courseglade-order__invoice {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-order__invoice:hover {
	color: var(--courseglade-primary-dark);
}

@media (max-width: 768px) {
	.courseglade-invoice__meta {
		grid-template-columns: repeat(2, 1fr);
	}

	.courseglade-invoice {
		padding: 20px;
	}
}

/* Printing an invoice should produce the invoice, not a screenshot of a
   dashboard. Everything that is navigation goes; the document keeps its
   proportions and loses its frame. */
/* ── Dashboard, narrow screens ───────────────────────────────────────────────
   The base .courseglade-stats-grid is `repeat(auto-fit, minmax(150px, 1fr))`
   and reflows on its own. Several panels override it with a hard column count,
   and a scoped selector outranks the base one, so those panels keep three or
   four columns all the way down to a phone. Earnings, Orders and Withdrawals
   were already given 768px overrides one at a time; these are the ones that
   were missed, plus the grids that never had a fallback at all. */

@media (max-width: 900px) {
	.courseglade-instructor-overview .courseglade-stats-grid,
	.courseglade-gradebook-overview,
	.courseglade-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.courseglade-dashboard-discussions .courseglade-stats-grid,
	.courseglade-instructor-section .courseglade-stats-grid,
	.courseglade-instructor-overview .courseglade-stats-grid,
	.courseglade-quiz-attempts .courseglade-stats-grid,
	.courseglade-user-points__stats,
	.courseglade-gradebook-overview,
	.courseglade-courses-grid {
		grid-template-columns: 1fr;
	}

	/* A heading with a control beside it: the control drops under the heading
	   rather than squeezing it. */
	.courseglade-section-header,
	.courseglade-courses-filters,
	.courseglade-teaching-card__foot,
	.courseglade-review-row__actions,
	.courseglade-gradebook-row {
		flex-wrap: wrap;
	}

	/* These selects carry a min-width wide enough to push the row past the
	   screen on a phone. */
	.courseglade-wishlist-sort select.courseglade-form-input,
	.courseglade-teaching-sort select.courseglade-form-input {
		min-width: 0;
		width: 100%;
	}

	.courseglade-wishlist-sort,
	.courseglade-teaching-sort {
		width: 100%;
	}

	/* Same reason, on the blocks that sit beside them. */
	.courseglade-wishlist-tools .courseglade-section-header,
	#courseglade-dashboard .courseglade-review-prompt__text,
	.courseglade-continue-body {
		min-width: 0;
	}
}

@media print {
	body * {
		visibility: hidden;
	}

	.courseglade-dashboard-invoice,
	.courseglade-dashboard-invoice * {
		visibility: visible;
	}

	.courseglade-dashboard-invoice {
		position: absolute;
		inset: 0;
		width: 100%;
	}

	.courseglade-invoice__bar {
		display: none;
	}

	#courseglade-dashboard .courseglade-invoice {
		padding: 0;
		border: 0;
		box-shadow: none;
	}
}

/* ==========================================================================
   Withdrawals
   ========================================================================== */
.courseglade-dashboard-withdrawals .courseglade-stats-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}

.courseglade-withdraw {
	margin-bottom: 20px;
	padding: 20px 24px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

#courseglade-dashboard .courseglade-withdraw__title {
	margin: 0 0 16px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

/* Amount, destination, and the button on one line at desk width — the three
   things a request is, in the order they are decided. */
.courseglade-withdraw__form {
	display: grid;
	grid-template-columns: 1fr 1fr auto;
	align-items: start;
	gap: 16px;
}

.courseglade-withdraw__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* The column's gap does the spacing; the shared label's own bottom margin
   adds to it and pushes the control out of line with its neighbour. */
#courseglade-dashboard .courseglade-withdraw__field .courseglade-form-label {
	margin: 0;
}

.courseglade-withdraw__method {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-surface);
	font-size: 0.875rem;
	color: var(--courseglade-on-surface);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.courseglade-withdraw__hint {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

/* The button sits on the inputs' line, not the labels' — it belongs to the
   row of controls rather than to the row of names above them. */
.courseglade-withdraw__form .courseglade-btn {
	margin-top: 25px;
}

.courseglade-withdraw__note {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-withdraw__note-icon {
	flex-shrink: 0;
	color: var(--courseglade-on-surface-muted);
}

#courseglade-dashboard .courseglade-withdraw__note p {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--courseglade-on-surface-muted);
}

/* The reference that makes "paid" checkable, under the status it belongs to. */
.courseglade-withdraw__ref {
	display: block;
	margin-top: 3px;
	font-size: 0.6875rem;
	color: var(--courseglade-on-surface-muted);
}

/* A rejection, explained across the width of the table. It is the one row
   that has something to say and something to do about it, so it gets the
   room — and it reads as attached to the row above rather than as a row of
   its own. */
#courseglade-dashboard .courseglade-earnings-table .courseglade-withdraw__notice-row td {
	padding: 0 16px 14px;
	border-bottom: 1px solid var(--courseglade-border);
	/* The cell takes what the other rows leave rather than sizing itself to a
	   sentence — a colspan cell otherwise sets the table's width. */
	width: 100%;
	max-width: 0;
	white-space: normal;
}

/* The request and its explanation are one thing, so the line between them
   goes and the pair closes with a single border underneath. */
#courseglade-dashboard .courseglade-earnings-table tbody tr:has( + .courseglade-withdraw__notice-row ) td {
	border-bottom: 0;
}

.courseglade-withdraw__notice {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-danger-bg);
}

.courseglade-withdraw__notice-icon {
	flex-shrink: 0;
	display: flex;
	color: var(--courseglade-danger);
}

/* Only the icon is red. The surface already says something went wrong; red
   sentences on a red panel make the whole thing harder to read, and the
   explanation is the part that has to be read. */
#courseglade-dashboard .courseglade-withdraw__notice-text {
	flex: 1;
	/* Zero, not a floor: a flex item will not shrink below its content width
	   otherwise, and in a colspan cell that widens the whole table until the
	   sentence runs past the card. */
	min-width: 0;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--courseglade-on-surface-secondary);
}

#courseglade-dashboard .courseglade-withdraw__notice-text b {
	color: var(--courseglade-on-surface);
}

/* The action is an ordinary action — going to settings is not destructive,
   and dressing it in red would suggest it is. */
#courseglade-dashboard .courseglade-withdraw__notice-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-withdraw__notice-cta:hover {
	color: var(--courseglade-primary-dark);
	text-decoration: underline;
}

.courseglade-earnings-state--rejected {
	color: var(--courseglade-danger-text);
}

/* The action column: as narrow as its contents, and empty on every row that
   has nothing left to do. */
.courseglade-withdraw__action-col {
	width: 1%;
	white-space: nowrap;
	text-align: right;
}

/* The same action link as "Students" and "Open thread": it reads as the row's
   one available move, not as a hazard. The confirm step is what guards it. */
.courseglade-withdraw__cancel {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	transition: color var(--courseglade-transition);
}

.courseglade-withdraw__cancel:hover:not(:disabled),
.courseglade-withdraw__cancel:focus:not(:disabled) {
	background: none;
	color: var(--courseglade-primary-dark);
}

.courseglade-withdraw__cancel:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.courseglade-earnings-state--rejected .courseglade-earnings-state__dot {
	background: var(--courseglade-danger);
}

@media (max-width: 900px) {
	.courseglade-withdraw__form {
		grid-template-columns: 1fr;
	}

	.courseglade-withdraw__form .courseglade-btn {
		margin-top: 0;
	}
}

@media (max-width: 768px) {
	.courseglade-dashboard-withdrawals .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Activity
   ========================================================================== */
/* A card per day rather than one long list: the day is the thing a reader
   navigates by, and a heading floating over a continuous list gets lost in
   it. */
.courseglade-activity-day {
	margin-bottom: 16px;
	padding: 18px 22px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

#courseglade-dashboard .courseglade-activity-day__heading {
	margin: 0 0 4px;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-activity-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-activity-day__heading + .courseglade-activity-row {
	border-top: 0;
}

.courseglade-activity-row__icon {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
}

/* One colour per kind of event. A source the plugin has never heard of — an
   addon's own type — falls through to the neutral chip below rather than
   borrowing a meaning that belongs to something else. */
.courseglade-activity-row__icon {
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

.courseglade-activity-row__icon--lessons {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-activity-row__icon--quizzes {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

.courseglade-activity-row__icon--assignments {
	background: var(--courseglade-info-bg);
	color: var(--courseglade-primary);
}

.courseglade-activity-row__icon--achievements {
	background: var(--courseglade-accent-purple-bg);
	color: var(--courseglade-accent-purple);
}

.courseglade-activity-row__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	flex: 1;
	min-width: 0;
}

#courseglade-dashboard a.courseglade-activity-row__title {
	color: var(--courseglade-on-surface);
	text-decoration: none;
}

#courseglade-dashboard a.courseglade-activity-row__title:hover {
	color: var(--courseglade-primary);
}

.courseglade-activity-row__title {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-activity-row__subtitle {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

/* Fixed against the right edge so a column of times lines up, and never
   squeezed by a long title beside it. */
.courseglade-activity-row__when {
	flex-shrink: 0;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-activity-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.courseglade-activity-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* ==========================================================================
   Q&A discussions
   ========================================================================== */
.courseglade-dashboard-discussions .courseglade-stats-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}

.courseglade-thread-list {
	margin-bottom: 1rem;
	padding: 4px 20px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-thread {
	display: flex;
	gap: 16px;
	padding: 18px 0;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-thread:first-child {
	border-top: 0;
}

/* The reply count leads the row: on a list of your own questions, whether
   anyone has answered is the thing being scanned for. */
.courseglade-thread__count {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 68px;
	height: 68px;
	flex-shrink: 0;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
}

.courseglade-thread__count b {
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
}

.courseglade-thread__count span {
	font-size: 0.625rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

/* Nothing to celebrate at zero, and the blue tile made an unanswered question
   look like it had been dealt with. */
.courseglade-thread__count.is-zero {
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

.courseglade-thread__body {
	flex: 1;
	min-width: 0;
}

.courseglade-thread__crumb {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

#courseglade-dashboard .courseglade-thread__course {
	color: var(--courseglade-primary);
	font-weight: 600;
	text-decoration: none;
}

#courseglade-dashboard .courseglade-thread__course:hover {
	text-decoration: underline;
}

#courseglade-dashboard .courseglade-thread__question {
	margin: 6px 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

#courseglade-dashboard .courseglade-thread__excerpt {
	margin: 4px 0 0;
	font-size: 0.8125rem;
	line-height: 1.6;
	color: var(--courseglade-on-surface-secondary);
}

.courseglade-thread__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

/* The state sits in a row of facts about the thread — who replied, when — and
   reads as one of them. Only the dot carries the colour, so a list of mostly
   answered questions is not a wall of green. */
.courseglade-thread__state {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	color: var(--courseglade-on-surface-secondary);
}

.courseglade-thread__dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

.courseglade-thread__state--waiting .courseglade-thread__dot {
	background: var(--courseglade-warning);
}

.courseglade-thread__state--answered .courseglade-thread__dot,
.courseglade-thread__state--resolved .courseglade-thread__dot {
	background: var(--courseglade-success);
}

/* Pushed right so it lands in the same place on every row, whatever the row
   before it had to say. */
.courseglade-thread__open {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--courseglade-primary);
}

/* Restated on hover: this is a bare button, so a theme that fills a hovered
   button — Astra does — wins over the resting rule above it. */
.courseglade-thread__open:hover,
.courseglade-thread__open:focus {
	background: none;
	color: var(--courseglade-primary-dark);
	text-decoration: underline;
}

/* The thread body. The replies and the reply box are the same components the
   lesson player uses, styled in discussions.css — what is here is only where
   they sit inside the row. */
.courseglade-thread__detail {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--courseglade-border);
}

.courseglade-thread__loading {
	display: flex;
	justify-content: center;
	padding: 16px 0;
}

#courseglade-dashboard .courseglade-thread__no-replies {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-thread__open.is-open svg {
	transform: rotate(90deg);
}

.courseglade-thread__open svg {
	transition: transform var(--courseglade-transition);
}

.courseglade-thread-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.courseglade-thread-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

@media (max-width: 576px) {
	.courseglade-thread__count {
		width: 48px;
		height: 46px;
	}
}


/* ==========================================================================
   My reviews
   ========================================================================== */
/* A prompt, not a warning: nothing is wrong, there is just something worth
   doing. It borrows the info surface rather than the amber one. */
.courseglade-review-prompt {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	padding: 12px 14px;
	margin-bottom: 1.25rem;
	border: 1px solid var(--courseglade-info-bg);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-info-surface);
}

.courseglade-review-prompt__icon {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--courseglade-info-bg);
	color: var(--courseglade-primary);
}

#courseglade-dashboard .courseglade-review-prompt__text {
	flex: 1;
	min-width: 220px;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--courseglade-on-surface-muted);
}

#courseglade-dashboard .courseglade-review-prompt__text b {
	color: var(--courseglade-on-surface);
}

/* A link, not a button: the banner is already the call to action, and a
   filled control inside it competes with the one on every card below. */
#courseglade-dashboard .courseglade-review-prompt__cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-review-prompt__cta:hover {
	color: var(--courseglade-primary-dark);
}

.courseglade-review-prompt__dismiss {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: var(--courseglade-radius-sm);
	background: none;
	cursor: pointer;
	color: var(--courseglade-on-surface-muted);
	transition: color var(--courseglade-transition), background var(--courseglade-transition);
}

.courseglade-review-prompt__dismiss:hover {
	background: var(--courseglade-info-bg);
	color: var(--courseglade-on-surface);
}

.courseglade-review-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-bottom: 1.5rem;
}

@media (max-width: 900px) {
	.courseglade-review-list {
		grid-template-columns: 1fr;
	}
}

.courseglade-review-row {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-review-row__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

.courseglade-review-row__stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

/* Unfilled stars are drawn, not omitted: four of five only reads as four
   when the fifth is visible beside it. */
.courseglade-review-row__star {
	fill: var(--courseglade-surface-high);
}

.courseglade-review-row__star.is-on {
	fill: var(--courseglade-warning);
}

.courseglade-review-row__score {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-review-row__status {
	padding: 2px 8px;
	border-radius: var(--courseglade-radius-pill);
	background: var(--courseglade-warning-surface);
	border: 1px solid var(--courseglade-warning-border);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-warning-text);
}

#courseglade-dashboard .courseglade-review-row__title {
	margin: 12px 0 0;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

#courseglade-dashboard .courseglade-review-row__content {
	margin: 12px 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
	color: var(--courseglade-on-surface-secondary);
}

/* Pushed to the bottom so the course line and the buttons under it sit level
   across a row of cards whose reviews run to different lengths. */
.courseglade-review-row__course {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	padding-top: 14px;
	text-decoration: none;
}

.courseglade-review-row__thumb {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	overflow: hidden;
	border-radius: var(--courseglade-radius-sm);
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

.courseglade-review-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-review-row__course-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.courseglade-review-row__course-title {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-review-row__course:hover .courseglade-review-row__course-title {
	color: var(--courseglade-primary);
}

.courseglade-review-row__date {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-review-row__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--courseglade-border);
}

/* No rule above it: the cards already end on their own borders, and a second
   line under them reads as a third box. */
.courseglade-review-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.courseglade-review-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* ==========================================================================
   Wishlist
   ========================================================================== */
/* The tab draws the catalog's own card, so the grid and the cards are styled
   in course.css. What is left is the row above them and the row below. */
.courseglade-wishlist-tools {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 1.25rem;
}

.courseglade-wishlist-tools .courseglade-section-header {
	flex: 1;
	min-width: 240px;
	margin-bottom: 0;
}



.courseglade-wishlist-sort {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Only the width: a control in a toolbar sizes to its content, where a form
   field fills its row. Everything else — padding, border, type, focus ring —
   is the shared field, so this one does not drift from the rest. */
.courseglade-wishlist-sort select.courseglade-form-input {
	width: auto;
	min-width: 200px;
}

.courseglade-wishlist-grid {
	margin-bottom: 1rem;
}

/* The wishlist reuses the catalogue's card grid, which steps 4/3/2/1 against
   the window. Here it sits in the dashboard's main column, which is roughly
   660px whatever the window is doing, so those steps are measuring the wrong
   thing and leave a third slot standing empty. Two, stated.
   Compound selector so it wins over .courseglade-course-grid on specificity
   rather than on which stylesheet happens to load last. */
.courseglade-course-grid.courseglade-wishlist-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 767px) {
	.courseglade-course-grid.courseglade-wishlist-grid {
		grid-template-columns: 1fr;
	}
}

/* Pager above, count below, both centred — the grid has no left edge to
   line a footer up against the way a table does. */
.courseglade-wishlist-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 1.5rem;
}

.courseglade-wishlist-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* The pager is shared with the tabs that sit under a table, where it is
   centred on its own line. Here it shares a line with the range. */
.courseglade-wishlist-footer .courseglade-earnings-pagination {
	margin: 0;
}

/* ==========================================================================
   Empty State (base styles in base.css — dashboard overrides bg/icon color)
   ========================================================================== */
/* The shared empty state is a white card; this was repainting it grey and
   growing its icon, so the dashboard's version looked like a different
   component from the catalog's. */
.courseglade-dashboard .courseglade-empty-icon {
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

/* Where there is somewhere to go, the icon is tinted to the action, matching
   the catalog. */
.courseglade-dashboard .courseglade-empty-state--action .courseglade-empty-icon {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
}

/* ==========================================================================
   Login Prompt
   ========================================================================== */
.courseglade-login-prompt {
	max-width: 480px;
	margin: 60px auto;
	text-align: center;
	padding: 48px 40px;
	background: var(--courseglade-surface-lowest);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow);
	border: 1px solid var(--courseglade-gray-200);
}

.courseglade-login-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--courseglade-primary-surface) 0%, var(--courseglade-info-bg) 100%);
	color: var(--courseglade-primary);
	margin-bottom: 24px;
}

.courseglade-login-icon svg {
	width: 32px;
	height: 32px;
}

.courseglade-login-prompt h3 {
	font-size: 1.35rem;
	font-weight: 600;
	margin: 0 0 8px;
	color: var(--courseglade-gray-900);
}

.courseglade-login-prompt p {
	color: var(--courseglade-gray-600);
	margin: 0 0 24px;
	font-size: 0.95rem;
	line-height: 1.6;
}

/* ==========================================================================
   Instructor Section (overview inside dashboard tab)
   ========================================================================== */
.courseglade-instructor-section {
	background: linear-gradient(135deg, var(--courseglade-primary-surface) 0%, var(--courseglade-info-bg) 100%);
	border: 1px solid var(--courseglade-primary-border-light);
	border-radius: var(--courseglade-radius);
	padding: 1.5rem;
	margin-bottom: 2rem;
}

.courseglade-instructor-section .courseglade-section-header {
	margin-bottom: 1rem;
}

.courseglade-instructor-section .courseglade-section-title {
	color: var(--courseglade-primary-dark-text);
}

.courseglade-instructor-section .courseglade-stats-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 0;
}

/* The teaching panel's four tiles fall through to the base auto-fit grid and
   its 150px floor, which at the dashboard's ~650px main column fits four
   tracks of about 150px. "Earned all time" then has roughly 100px of usable
   width, and any currency value past "$999" hits the ellipsis on
   .courseglade-stat-value — a money figure truncated to "$1,1..." is worse
   than no figure at all.
   Two by two for the same reason as the earnings tiles: four is a fixed
   count, and auto-fit will orphan the fourth at whatever width fits three. */
.courseglade-dashboard-my-teaching .courseglade-stats-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 520px) {
	.courseglade-dashboard-my-teaching .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

#courseglade-dashboard .courseglade-instructor-section .courseglade-stat-card {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(197, 210, 246, 0.5);
}

.courseglade-instructor-section .courseglade-activity-list {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(197, 210, 246, 0.5);
}

/* Instructor Overview Tab (full page, not the small bar) */
.courseglade-instructor-overview {
	/* Reset padding since the parent already has padding */
}

.courseglade-instructor-overview .courseglade-stats-grid {
	grid-template-columns: repeat(4, 1fr);
}

#courseglade-dashboard .courseglade-instructor-overview .courseglade-stat-card {
	background: linear-gradient(135deg, var(--courseglade-primary-surface) 0%, var(--courseglade-info-bg) 100%);
	border: 1px solid var(--courseglade-primary-border-light);
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	text-align: left;
	padding: 16px;
}

#courseglade-dashboard .courseglade-instructor-overview .courseglade-stat-icon {
	width: 40px;
	height: 40px;
}

.courseglade-instructor-overview .courseglade-stat-icon svg {
	width: 20px;
	height: 20px;
}

.courseglade-instructor-overview .courseglade-stat-value {
	font-size: 1.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-instructor-overview .courseglade-stat-label {
	font-size: 0.8125rem;
}

.courseglade-stat-subtext {
	font-size: 0.75rem;
	color: var(--courseglade-gray-500);
	margin-top: 2px;
}

/* Three sections arrived as one child of the overview, so they were carded
   together — top courses, enrolments and activity reading as one block. The
   wrapper is a layout now, and each section inside it is its own card. */
#courseglade-dashboard .courseglade-dashboard-overview > .courseglade-inst-bottom {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.courseglade-inst-bottom {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#courseglade-dashboard .courseglade-inst-top-course,
#courseglade-dashboard .courseglade-overview-enrollments,
#courseglade-dashboard .courseglade-overview-sidebar {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 20px;
}

.courseglade-inst-top-course {
	display: flex;
	flex-direction: column;
}

/* One column: side by side, two lists of different lengths left a column of
   dead space beside the shorter one, and each row had half the width for a
   course title that needs all of it. */
.courseglade-overview-bottom {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.courseglade-overview-enrollments,
.courseglade-overview-sidebar {
	display: flex;
	flex-direction: column;
}

.courseglade-section-title--sm {
	font-size: 1rem;
}

.courseglade-empty-state--sm {
	padding: 1.5rem;
	text-align: center;
}

.courseglade-empty-state--sm p {
	font-size: 0.875rem;
	color: var(--courseglade-gray-500);
	margin-bottom: 0;
}

/* A filter that matched nothing. Smaller than the shelf-is-empty state,
   because nothing is wrong — the shelf still has things on it, just not of
   this kind — and it carries the way back rather than leaving the reader to
   find the All tab again. */
#courseglade-dashboard .courseglade-empty-state--filter {
	padding: 2rem 1.5rem;
}

#courseglade-dashboard .courseglade-empty-state--filter .courseglade-empty-icon {
	width: 42px;
	height: 42px;
	margin-bottom: 0.75rem;
}

#courseglade-dashboard .courseglade-empty-state--filter h3 {
	font-size: 1rem;
}

#courseglade-dashboard .courseglade-empty-state--filter p {
	margin-bottom: 1rem;
	font-size: 0.8125rem;
}


.courseglade-top-course-card {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	overflow: hidden;
}

.courseglade-top-course-thumb {
	width: 48px;
	height: 48px;
	border-radius: var(--courseglade-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
}

.courseglade-top-course-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}



/* My courses (teaching) */
.courseglade-teaching-tools {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 20px;
}

.courseglade-teaching-tools .courseglade-courses-filters {
	margin-bottom: 0;
}

.courseglade-teaching-sort select.courseglade-form-input {
	width: auto;
	min-width: 190px;
}

.courseglade-teaching-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-bottom: 1.5rem;
}

.courseglade-teaching-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-lg);
	background: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-teaching-card__thumb {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 9;
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

.courseglade-teaching-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 16 / 9;
}

.courseglade-teaching-card__state {
	position: absolute;
	top: 10px;
	left: 10px;
	padding: 3px 9px;
	border-radius: var(--courseglade-radius-pill);
	font-size: 0.6875rem;
	font-weight: 700;
	background: var(--courseglade-surface-lowest);
}

.courseglade-teaching-card__state--publish {
	color: var(--courseglade-success-text);
}

.courseglade-teaching-card__state--draft {
	color: var(--courseglade-on-surface-muted);
}

.courseglade-teaching-card__state--pending {
	color: var(--courseglade-warning-text);
}

.courseglade-teaching-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 16px 18px 18px;
}

/* Grows to fill the card, so the stats block sits at the same height whether
   a title runs to one line or three. */
#courseglade-dashboard .courseglade-teaching-card__title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
	flex: 1;
}

#courseglade-dashboard .courseglade-teaching-card__title a {
	color: var(--courseglade-on-surface);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-teaching-card__title a:hover {
	color: var(--courseglade-primary);
}

/* Four figures in a block rather than a sentence: they are compared across
   cards, and a reader scanning a column wants them in the same place. */
.courseglade-teaching-card__stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px 12px;
	margin-top: 14px;
	padding: 14px 0;
	border-top: 1px solid var(--courseglade-border);
	border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-teaching-card__stats div {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.courseglade-teaching-card__stats span {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-teaching-card__stats b {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
}

.courseglade-teaching-card__stats i {
	font-style: normal;
	font-weight: 500;
	color: var(--courseglade-on-surface-muted);
}

/* The one line on the card that asks for something. It is a link because the
   answer is a click away, and coloured because nothing else here is urgent. */
.courseglade-teaching-card__unanswered {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--courseglade-danger-text);
	text-decoration: none;
}

.courseglade-teaching-card__unanswered:hover {
	text-decoration: underline;
}

.courseglade-teaching-card__updated {
	margin-top: 14px;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-teaching-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
}

#courseglade-dashboard .courseglade-teaching-card__students {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

#courseglade-dashboard .courseglade-teaching-card__students:hover {
	color: var(--courseglade-primary-dark);
}

.courseglade-teaching-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}

.courseglade-teaching-range {
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

/* ==========================================================================
   Section Headers (from student-dashboard.css)
   ========================================================================== */
.courseglade-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

/* Id-scoped so the theme's heading margin loses on specificity rather than on
   !important — Astra puts a bottom margin on every h2 and h3. */
/* The tab's title, one rule for every panel. Id-scoped so the theme's heading
   margin loses on specificity rather than on !important — Astra puts a bottom
   margin on every h2 and h3. */
#courseglade-dashboard .courseglade-section-title {
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
	margin: 0;
}

/* A label for a section inside a panel — Badges, Points history, Up next.
   Marked rather than matched by position: a panel that gains a wrapper one
   day should not silently restyle its own heading. */
#courseglade-dashboard .courseglade-section-title--sub {
	font-size: 1.125rem;
	font-weight: 700;
}

/* ==========================================================================
   Courses Grid (from student-dashboard.css)
   ========================================================================== */
.courseglade-courses-section,
.courseglade-activity-section,
.courseglade-gamification-section,
.courseglade-gradebook-section {
	margin-bottom: 2rem;
}

.courseglade-dashboard-main .courseglade-gamification-col {
	flex: 0 0 100%;
	max-width: 100%;
}

.courseglade-courses-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

/* Course Card */
.courseglade-course-card {
	background: var(--courseglade-surface-lowest);
	border-radius: var(--courseglade-radius);
	border: 1px solid var(--courseglade-gray-200);
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.courseglade-course-card:hover {
	box-shadow: var(--courseglade-shadow);
	transform: translateY(-2px);
}

.courseglade-course-thumbnail {
	display: block;
	position: relative;
	padding-top: 56.25%;
	background: var(--courseglade-gray-100);
	overflow: hidden;
}

.courseglade-course-thumbnail img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-course-status {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: var(--courseglade-radius-pill);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(4px);
}

.courseglade-course-status-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	flex-shrink: 0;
}

.courseglade-course-status.enrolled {
	color: var(--courseglade-primary);
}

.courseglade-course-status.enrolled .courseglade-course-status-dot {
	background: var(--courseglade-primary);
}

.courseglade-course-status.completed {
	color: var(--courseglade-success);
}

.courseglade-course-status.completed .courseglade-course-status-dot {
	background: var(--courseglade-success);
}

.courseglade-course-status.in-progress {
	color: var(--courseglade-warning);
}

.courseglade-course-status.in-progress .courseglade-course-status-dot {
	background: var(--courseglade-warning);
}

/* Access has ended. Muted rather than alarming: it is a state, not a failure. */
.courseglade-course-status.cancelled,
.courseglade-course-status.expired {
	color: var(--courseglade-on-surface-muted);
}

.courseglade-course-status.cancelled .courseglade-course-status-dot,
.courseglade-course-status.expired .courseglade-course-status-dot {
	background: var(--courseglade-on-surface-muted);
}

.courseglade-course-body {
	padding: 1rem;
}

.courseglade-course-title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	margin: 0 0 0.5rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.courseglade-course-title a {
	color: inherit;
	text-decoration: none;
}

.courseglade-course-title a:hover {
	color: var(--courseglade-primary);
}

.courseglade-course-meta {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	font-size: 0.8125rem;
	color: var(--courseglade-gray-500);
	margin-bottom: 0.875rem;
	flex-wrap: wrap;
}

.courseglade-course-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.courseglade-course-meta svg {
	flex-shrink: 0;
	opacity: 0.7;
}

/* Progress Bar */
.courseglade-progress-wrapper {
	margin-bottom: 1rem;
}

.courseglade-progress-inline {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

.courseglade-progress-value {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--courseglade-gray-700);
	white-space: nowrap;
	flex-shrink: 0;
}

.courseglade-progress-bar {
	flex: 1;
	height: 6px;
	background: var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius-pill);
	overflow: hidden;
}

.courseglade-progress-fill {
	height: 100%;
	background: var(--courseglade-primary);
	border-radius: var(--courseglade-radius-pill);
	transition: width 0.4s ease;
}

.courseglade-progress-fill.completed {
	background: var(--courseglade-success);
}

/* Course Actions */
.courseglade-course-actions {
	display: flex;
	gap: 0.5rem;
}

.courseglade-course-actions .courseglade-btn {
	flex: 1;
}

.courseglade-course-cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

/* ==========================================================================
   Recent Activity (from student-dashboard.css)
   ========================================================================== */
.courseglade-activity-list {
	background: none;
	border: 0;
	border-radius: 0;
}

.courseglade-activity-item {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	padding: 1rem;
	border-bottom: 1px solid var(--courseglade-gray-200);
}

.courseglade-activity-item:last-child {
	border-bottom: none;
}

.courseglade-activity-icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--courseglade-surface-low);
	color: var(--courseglade-on-surface-muted);
}

.courseglade-activity-icon svg {
	width: 14px;
	height: 14px;
}

.courseglade-activity-icon.lesson {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
}

.courseglade-activity-icon.quiz {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

.courseglade-activity-icon.completed {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-activity-content {
	flex: 1;
	min-width: 0;
}

.courseglade-activity-title {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--courseglade-gray-900);
	margin: 0 0 0.25rem;
	line-height: 1.4;
}

.courseglade-activity-title a {
	color: inherit;
	text-decoration: none;
}

.courseglade-activity-title a:hover {
	color: var(--courseglade-primary);
}

.courseglade-activity-details {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-overview-enrollments .courseglade-activity-details {
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
}

/* ==========================================================================
   Upcoming Content Section
   ========================================================================== */
.courseglade-upcoming-section {
	margin-bottom: 0;
}

.courseglade-upcoming-list {
	background: none;
	border: 0;
	border-radius: 0;
}

.courseglade-upcoming-item {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 0;
	border-top: 1px solid var(--courseglade-surface-low);
	text-decoration: none;
}

.courseglade-upcoming-item:first-child {
	border-top: 0;
	padding-top: 2px;
}

.courseglade-upcoming-item:last-child {
	border-bottom: none;
}

a.courseglade-upcoming-item:hover .courseglade-upcoming-item__title {
	color: var(--courseglade-primary);
}

.courseglade-upcoming-item__icon {
	width: 38px;
	height: 38px;
	border-radius: var(--courseglade-radius);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

a.courseglade-upcoming-item:hover .courseglade-upcoming-item__icon {
	transform: scale(1.05);
}

.courseglade-upcoming-item__icon.lesson {
	background: rgba(34, 139, 230, 0.08);
	color: var(--courseglade-primary);
}

.courseglade-upcoming-item__icon.quiz {
	background: color-mix(in srgb, var(--courseglade-warning) 8%, transparent);
	color: var(--courseglade-warning);
}

.courseglade-upcoming-item__body {
	flex: 1;
	min-width: 0;
}

.courseglade-upcoming-item__title {
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--courseglade-on-surface);
	margin: 0 0 2px;
	line-height: 1.4;
	transition: color 0.15s ease;
}

.courseglade-upcoming-item:hover .courseglade-upcoming-item__title {
	color: var(--courseglade-primary);
}

.courseglade-upcoming-item__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	flex-wrap: wrap;
	line-height: 1.5;
}


.courseglade-upcoming-item__course {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-500);
	font-weight: 500;
}

.courseglade-upcoming-item__sep {
	color: var(--courseglade-gray-300);
	font-size: 0.8125rem;
	user-select: none;
}

.courseglade-upcoming-item__badge {
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.1875rem 0.625rem;
	border-radius: var(--courseglade-radius-pill);
	background: var(--courseglade-surface-low);
	color: var(--courseglade-gray-400);
	display: inline-flex;
	align-items: center;
	transition: background-color 0.2s ease, color 0.2s ease;
	margin: 0;
}

/* ==========================================================================
   Gradebook Section (from student-dashboard.css)
   ========================================================================== */
.courseglade-gradebook-section h2 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	margin: 0;
}

.courseglade-gradebook-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin-bottom: 1.5rem;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	padding: 1.25rem;
}

.courseglade-gradebook-overview__stat {
	text-align: center;
	padding: 0.75rem;
	position: relative;
}

.courseglade-gradebook-overview__stat:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 60%;
	width: 1px;
	background: var(--courseglade-gray-200);
}

.courseglade-gradebook-overview__value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--courseglade-primary);
	line-height: 1.2;
}

.courseglade-gradebook-overview__label {
	font-size: 0.75rem;
	color: var(--courseglade-gray-500);
	margin-top: 0.25rem;
}

.courseglade-gradebook-courses {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	overflow: hidden;
}

.courseglade-gradebook-row {
	display: flex;
	align-items: center;
	padding: 0.5rem 0.875rem;
	border-bottom: 1px solid var(--courseglade-gray-100);
	gap: 0.75rem;
	font-size: 0.8125rem;
}

.courseglade-gradebook-row:last-child {
	border-bottom: none;
}

.courseglade-gradebook-row--header {
	background: var(--courseglade-gray-50);
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-gray-500);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 0.375rem 0.875rem;
}

.courseglade-gradebook-row__title {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-gradebook-row__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.courseglade-gradebook-row__title a:hover {
	color: var(--courseglade-primary);
}

.courseglade-gradebook-row__stat {
	width: 90px;
	text-align: center;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.courseglade-gradebook-row__stat-label {
	display: none;
}

.courseglade-gradebook-row__stat-value {
	font-weight: 700;
	color: var(--courseglade-gray-900);
}

.courseglade-gradebook-row__stat-sub {
	color: var(--courseglade-gray-500);
	font-size: 0.75rem;
}

.courseglade-gradebook-row__grade {
	width: 60px;
	text-align: center;
	flex-shrink: 0;
	font-weight: 700;
	font-size: 0.8125rem;
	border-radius: 4px;
	padding: 0.125rem 0;
}

.courseglade-gradebook-row:not(.courseglade-gradebook-row--header) .courseglade-gradebook-row__grade.grade-high {
	background: color-mix(in srgb, var(--courseglade-success) 10%, transparent);
	color: var(--courseglade-success-dark);
}

.courseglade-gradebook-row:not(.courseglade-gradebook-row--header) .courseglade-gradebook-row__grade.grade-mid {
	background: color-mix(in srgb, var(--courseglade-warning) 10%, transparent);
	color: var(--courseglade-warning-accent);
}

.courseglade-gradebook-row:not(.courseglade-gradebook-row--header) .courseglade-gradebook-row__grade.grade-low {
	background: color-mix(in srgb, var(--courseglade-danger) 10%, transparent);
	color: var(--courseglade-danger-text);
}

.courseglade-gradebook-row:not(.courseglade-gradebook-row--header) .courseglade-gradebook-row__grade.grade-none {
	color: var(--courseglade-gray-500);
}

/* Error State */
.courseglade-error {
	padding: 2rem;
	text-align: center;
	background: color-mix(in srgb, var(--courseglade-danger) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--courseglade-danger) 20%, transparent);
	border-radius: var(--courseglade-radius);
	color: var(--courseglade-danger);
}

.courseglade-error p {
	margin: 0;
}

/* My Courses Tab Filters */
/* Underlined tabs rather than a segmented pill: four filters in a grey
   capsule read as a control panel; these read as a way through the list. */
.courseglade-courses-filters {
	display: flex;
	gap: 4px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--courseglade-border);
}

.courseglade-courses-filter {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 14px;
	margin-bottom: -1px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: color 0.15s ease, border-color 0.15s ease;
	line-height: 1.5;
}

.courseglade-courses-filter:hover {
	color: var(--courseglade-on-surface);
	background: none;
}

.courseglade-courses-filter.active {
	color: var(--courseglade-primary);
	border-bottom-color: var(--courseglade-primary);
	background: none;
	box-shadow: none;
}

.courseglade-courses-filter__count {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--courseglade-gray-400);
}

.courseglade-courses-filter.active .courseglade-courses-filter__count {
	color: var(--courseglade-primary);
}

/* Section count badge */
.courseglade-courses-load-more {
	display: block;
	margin: 24px auto 0;
}

.courseglade-section-count {
	margin-left: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--courseglade-gray-400);
}

/* ==========================================================================
   Continue Learning
   ========================================================================== */
.courseglade-continue-learning {
	margin-bottom: 0;
}

.courseglade-continue-list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.courseglade-continue-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-gray-200);
	border-radius: var(--courseglade-radius);
	transition: box-shadow 0.15s ease;
}

.courseglade-continue-item:hover {
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-continue-item__thumb {
	width: 60px;
	height: 60px;
	border-radius: var(--courseglade-radius-sm);
	overflow: hidden;
	flex-shrink: 0;
	background: var(--courseglade-gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--courseglade-gray-500);
}

.courseglade-continue-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.courseglade-continue-item__body {
	flex: 1;
	min-width: 0;
}

.courseglade-continue-item__title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--courseglade-gray-900);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	margin-bottom: 0.25rem;
}

.courseglade-continue-item__title:hover {
	color: var(--courseglade-primary);
}

.courseglade-continue-item__meta {
	font-size: 0.8125rem;
	color: var(--courseglade-gray-600);
	margin-bottom: 0.375rem;
}

.courseglade-continue-item__bar {
	height: 6px;
	margin: 0;
}

.courseglade-continue-item__btn {
	flex-shrink: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1200px) {
	.courseglade-teaching-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.courseglade-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 992px) {
	.courseglade-dashboard-layout {
		display: flex;
		flex-direction: column;
		grid-template-columns: 1fr;
	}

	/* The layout is a flex column here, and a flex item defaults to
	   `min-width: auto` — it will not shrink below its own content. The nav
	   below is `nowrap`, so without this the sidebar grows to the full width of
	   its tab strip and takes the page with it: the card ends up wider than the
	   window, and everything centred inside it — the avatar, the name — is
	   centred off the right-hand edge. */
	.courseglade-dashboard-sidebar,
	.courseglade-dashboard-main {
		min-width: 0;
		/* min-width alone is not enough in a column flex container: the cross
		   axis stretches to the widest item, so the nav's tab strip still sets
		   the width. This caps it at the container instead. */
		max-width: 100%;
		width: 100%;
	}

	.courseglade-dashboard-sidebar {
		position: static;
	}

	.courseglade-dashboard-nav {
		flex-direction: row;
		flex-wrap: nowrap;
		min-width: 0;
		overflow-x: auto;
		gap: 4px;
		-webkit-overflow-scrolling: touch;
		/* Thin rather than hidden. The strip scrolls, and with no bar the only
		   sign of that was the last tab being sliced mid-word — which reads as
		   a layout fault rather than as "there is more this way". */
		scrollbar-width: thin;
		scrollbar-color: var(--courseglade-border) transparent;
		padding-bottom: 3px;
		align-items: center;
	}

	.courseglade-dashboard-nav::-webkit-scrollbar {
		height: 4px;
	}

	.courseglade-dashboard-nav::-webkit-scrollbar-track {
		background: transparent;
	}

	.courseglade-dashboard-nav::-webkit-scrollbar-thumb {
		background: var(--courseglade-border);
		border-radius: 999px;
	}

	.courseglade-dashboard-nav:hover::-webkit-scrollbar-thumb {
		background: var(--courseglade-on-surface-muted);
	}

	.courseglade-dashboard-nav__item {
		white-space: nowrap;
		padding: 7px 10px;
		flex-shrink: 0;
	}

	/* The icons are 18px in the markup, which suits a vertical list where they
	   form a column down the left. In a horizontal strip they are decoration
	   beside a label, and every pixel they give up is a pixel of label that
	   fits before the strip starts scrolling. */
	.courseglade-dashboard-nav__item svg {
		width: 15px;
		height: 15px;
	}

	.courseglade-dashboard-nav__group {
		display: none;
	}

	.courseglade-dashboard-nav__item span {
		display: inline;
	}

	.courseglade-dashboard-nav__divider {
		width: 1px;
		height: 24px;
		margin: 0 4px;
		flex-shrink: 0;
	}

	.courseglade-dashboard-nav__item--logout {
		margin-top: 0;
	}

	.courseglade-dashboard-overview .courseglade-stats-grid,
	.courseglade-instructor-overview .courseglade-stats-grid,
	.courseglade-profile-section .courseglade-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.courseglade-courses-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.courseglade-instructor-section .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 768px) {
	.courseglade-teaching-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	.courseglade-courses-grid {
		grid-template-columns: repeat(1, 1fr);
	}

	.courseglade-continue-item__btn {
		display: none;
	}

	.courseglade-form-row {
		grid-template-columns: 1fr;
	}

	.courseglade-progress-item {
		flex-direction: column;
		align-items: flex-start;
	}

	.courseglade-progress-item__bar {
		width: 100%;
	}

	.courseglade-progress-item__percent {
		text-align: left;
	}

	.courseglade-gradebook-overview {
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
	}

	.courseglade-gradebook-overview__stat:not(:last-child)::after {
		display: none;
	}

	.courseglade-gradebook-overview__stat:nth-child(odd):not(:nth-last-child(1))::after {
		content: '';
		display: block;
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		height: 60%;
		width: 1px;
		background: var(--courseglade-gray-200);
	}

}

@media (max-width: 576px) {
	.courseglade-dashboard-overview .courseglade-stats-grid,
	.courseglade-instructor-overview .courseglade-stats-grid,
	.courseglade-profile-section .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}

	.courseglade-courses-grid {
		grid-template-columns: 1fr;
	}

	.courseglade-gradebook-row {
		font-size: 0.75rem;
		padding: 0.375rem 0.625rem;
		gap: 0.5rem;
	}

	.courseglade-gradebook-row__stat {
		width: 64px;
	}

	.courseglade-gradebook-row__stat-sub {
		display: none;
	}

	.courseglade-gradebook-row__grade {
		width: 36px;
	}

	.courseglade-courses-filters {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.courseglade-courses-filter {
		white-space: nowrap;
		flex-shrink: 0;
	}
}

/* ==========================================================================
   Modal (shared)
   ========================================================================== */
.courseglade-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.courseglade-modal[hidden] {
	display: none;
}

.courseglade-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	animation: courseglade-fade-in 0.15s ease;
}

.courseglade-modal__dialog {
	position: relative;
	background: var(--courseglade-surface-lowest);
	border-radius: var(--courseglade-radius-md);
	width: 100%;
	max-width: 480px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
	animation: courseglade-modal-in 0.18s ease;
	display: flex;
	flex-direction: column;
}

.courseglade-modal__dialog--sm {
	max-width: 380px;
}

.courseglade-modal__dialog--lg {
	max-width: 620px;
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.courseglade-confirm-modal__body {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.courseglade-confirm-modal__message {
	margin: 0;
	font-size: 14px;
	color: var(--courseglade-gray-700);
	line-height: 1.6;
}

@keyframes courseglade-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes courseglade-modal-in {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.courseglade-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px 0;
}

.courseglade-modal__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--courseglade-gray-900);
	margin: 0;
}

.courseglade-modal__close {
	background: none;
	border: none;
	padding: 4px;
	cursor: pointer;
	color: var(--courseglade-gray-600);
	display: flex;
	align-items: center;
	border-radius: var(--courseglade-radius-sm);
	transition: color 0.15s, background 0.15s;
}

.courseglade-modal__close:hover {
	color: var(--courseglade-gray-900);
	background: var(--courseglade-gray-100);
}

.courseglade-modal__body {
	padding: 20px 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.courseglade-modal__footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	padding: 0 24px 20px;
}

/* Discussion Modal */
.courseglade-discussion-modal__heading {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.courseglade-discussion-modal__breadcrumb {
	font-size: 12px;
	color: var(--courseglade-gray-600);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-discussion-modal__body {
	flex: 1;
	overflow-y: auto;
	padding: 0 24px 16px;
	min-height: 120px;
}

.courseglade-discussion-modal__reply-box {
	padding: 16px 24px 20px;
	border-top: 1px solid var(--courseglade-gray-100);
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-end;
}

.courseglade-discussion-modal__reply-box .courseglade-form-input {
	width: 100%;
}

/* Thread */
.courseglade-dthread__question {
	padding: 16px;
	background: var(--courseglade-gray-50);
	border-radius: var(--courseglade-radius);
	margin-bottom: 16px;
}

.courseglade-dthread__replies {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.courseglade-dthread__reply {
	padding: 14px 16px;
	border: 1px solid var(--courseglade-gray-100);
	border-radius: var(--courseglade-radius);
}

.courseglade-dthread__author {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}

.courseglade-dthread__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.courseglade-dthread__avatar--initials {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--courseglade-info-light);
	color: var(--courseglade-surface-lowest);
	font-size: 11px;
	font-weight: 700;
}

.courseglade-dthread__name {
	font-size: 13px;
	font-weight: 600;
	color: var(--courseglade-gray-900);
}

.courseglade-dthread__time {
	font-size: 12px;
	color: var(--courseglade-gray-600);
	margin-left: auto;
}

.courseglade-dthread__content {
	font-size: 14px;
	color: var(--courseglade-gray-700);
	margin: 0;
	line-height: 1.6;
}

.courseglade-dthread__no-replies {
	font-size: 13px;
	color: var(--courseglade-gray-500);
	text-align: center;
	padding: 16px 0 4px;
	margin: 0;
}

/* Star Picker */
.courseglade-star-picker {
	display: flex;
	align-items: center;
	gap: 4px;
}

.courseglade-star-picker__star {
	background: none;
	border: none;
	padding: 2px;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.1s;
}

.courseglade-star-picker__star:hover {
	transform: scale(1.15);
}

.courseglade-star-picker__star svg {
	display: block;
	transition: fill 0.1s;
}

/* ── Gamification Overview Widget ────────────────────── */
.courseglade-gamification-widget {
	background: var(--courseglade-surface-lowest);
	margin-bottom: 1.5rem;
}

.courseglade-gamification-widget__header {
	margin-bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}


.courseglade-gamification-widget__link {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-primary);
	text-decoration: none;
	white-space: nowrap;
}

.courseglade-gamification-widget__link:hover {
	text-decoration: underline;
}

.courseglade-gamification-widget__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.courseglade-gamification-widget__stat {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
}

.courseglade-gamification-widget__stat-icon {
	width: 38px;
	height: 38px;
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-primary-surface);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--courseglade-primary);
	flex-shrink: 0;
}

.courseglade-gamification-widget__stat-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.courseglade-gamification-widget__stat:nth-child(2) .courseglade-gamification-widget__stat-icon {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

.courseglade-gamification-widget__stat:nth-child(3) .courseglade-gamification-widget__stat-icon {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-gamification-widget__stat-value {
	font-size: 1.375rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
	line-height: 1;
}

.courseglade-gamification-widget__stat-label {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
	font-weight: 500;
}

@media (max-width: 600px) {
	.courseglade-gamification-widget__stats {
		grid-template-columns: 1fr;
	}
}

/* ── Gamification: Points Summary ────────────────────── */
.courseglade-user-points {
	margin-bottom: 2rem;
}

.courseglade-user-points__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0 0 1rem;
	color: var(--courseglade-on-surface);
}

.courseglade-user-points__stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0.75rem;
}

.courseglade-user-points__stat {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--courseglade-surface-low);
	border-radius: var(--courseglade-radius);
}

.courseglade-user-points__stat-icon {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: rgba(0, 75, 202, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--courseglade-primary);
	flex-shrink: 0;
}

.courseglade-user-points__stat-icon svg {
	width: 22px;
	height: 22px;
}

.courseglade-user-points__stat-body {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.courseglade-user-points__stat-value {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--courseglade-primary);
	line-height: 1.1;
}

.courseglade-user-points__stat-label {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
	font-weight: 500;
}

/* ── Gamification: Point History ──────────────────────── */
.courseglade-point-history .courseglade-section-header {
	margin-bottom: 0.875rem;
}

.courseglade-point-history__list {
	gap: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.courseglade-point-history__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-top: 1px solid var(--courseglade-surface-low);
	background: none;
}

.courseglade-point-history__item:first-child {
	border-top: 0;
	padding-top: 2px;
}

.courseglade-point-history__icon {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(0, 75, 202, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--courseglade-primary);
	flex-shrink: 0;
}

.courseglade-point-history__icon svg {
	width: 14px;
	height: 14px;
}

.courseglade-point-history__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.courseglade-point-history__head {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

.courseglade-point-history__action {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface);
	display: block;
}

.courseglade-point-history__description {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.courseglade-point-history__time {
	font-size: 0.6875rem;
	color: var(--courseglade-on-surface-muted);
	display: block;
	flex-shrink: 0;
}

/* The separator is drawn rather than written so it is never read aloud as
   part of the label. */
.courseglade-point-history__time::before {
	content: '';
	display: inline-block;
	width: 3px;
	height: 3px;
	margin-right: 6px;
	vertical-align: middle;
	border-radius: 50%;
	background: var(--courseglade-border);
}

.courseglade-point-history__points {
	font-size: 0.875rem;
	font-weight: 700;
	flex-shrink: 0;
}

.courseglade-point-history__points.positive { color: var(--courseglade-success-text); }
.courseglade-point-history__points.negative { color: var(--courseglade-danger-hover); }

/* The row sets display: flex, which beats the user agent's rule for the
   hidden attribute — without this the attribute is set and nothing moves. */
.courseglade-point-history__item[hidden] {
	display: none;
}

.courseglade-point-history__more {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	font-size: 0.8125rem;
}

/* ── Gamification: Badges ─────────────────────────────── */
.courseglade-user-badges__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}

.courseglade-user-badges__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	color: var(--courseglade-on-surface);
}

.courseglade-user-badges__count {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
	background: var(--courseglade-surface-low);
	padding: 2px 10px;
	border-radius: var(--courseglade-radius-pill);
}

/* Four across, as the draft has it. auto-fill was giving five at this width,
   which left the titles wrapping inside narrower cards. */
.courseglade-user-badges__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

/* Four badge cards in the dashboard's ~660px main column are about 156px
   each, which puts "Course Champion" on two lines and leaves the cards
   uneven. Three fits the title. */
@media (max-width: 1200px) {
	.courseglade-user-badges__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.courseglade-user-badges__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Two, not one. A badge card is an icon over a short title — at full width it
   is mostly empty space and the list turns into a very long scroll. */
@media (max-width: 520px) {
	.courseglade-user-badges__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}

/* ── Badge Card ───────────────────────────────────────── */
.courseglade-badge-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1.25rem 1rem;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	background: var(--courseglade-surface-lowest);
	gap: 0.75rem;
	position: relative;
}

.courseglade-badge-card--earned {
	border-color: var(--courseglade-success-border);
	background: var(--courseglade-success-surface);
}

.courseglade-badge-card--locked {
	background: var(--courseglade-surface);
}

.courseglade-badge-card--locked .courseglade-badge-card__image {
	filter: grayscale(1);
	opacity: 0.6;
}

.courseglade-badge-card__image {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(0, 75, 202, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: visible;
	flex-shrink: 0;
	position: relative;
}

.courseglade-badge-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.courseglade-badge-card__image--has-image {
	background: transparent;
}

.courseglade-badge-card__icon {
	display: flex;
	line-height: 1;
}

.courseglade-badge-card__icon svg {
	width: 32px;
	height: 32px;
}

.courseglade-badge-card__lock {
	position: absolute;
	bottom: -3px;
	right: -3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--courseglade-surface);
	border: 1.5px solid var(--courseglade-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-badge-card__info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	/* Stretched, and growing to fill the card: the grid makes every card in a
	   row the same height, and this is what lets the bar and the meta line up
	   across cards whose descriptions run to different lengths. */
	align-self: stretch;
	flex: 1;
}

.courseglade-badge-card__title {
	font-size: 0.8125rem;
	font-weight: 700;
	margin: 0;
	color: var(--courseglade-on-surface);
	line-height: 1.3;
}

.courseglade-badge-card__description,
.courseglade-badge-card__requirement {
	font-size: 0.6875rem;
	color: var(--courseglade-on-surface-muted);
	margin: 0;
	line-height: 1.4;
}

.courseglade-badge-card__earned-chip,
.courseglade-badge-card__earned-date {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin-top: 2px;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-success-dark);
	background: var(--courseglade-success-bg);
	padding: 2px 8px;
	border-radius: var(--courseglade-radius-pill);
}

/* How far off an unearned badge is. Drawn only when there is progress to
   show — see renderBadgeCard() for why a zero-width bar is left out. */
.courseglade-badge-card__track {
	align-self: stretch;
	height: 4px;
	margin-top: auto;
	padding-top: 0;
	border-radius: var(--courseglade-radius-pill);
	background: var(--courseglade-surface-high);
	overflow: hidden;
}

.courseglade-badge-card__fill {
	height: 100%;
	border-radius: inherit;
	background: var(--courseglade-primary);
}

.courseglade-badge-card__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	align-self: stretch;
	justify-content: center;
	/* No bar above it means nothing has pushed the row down, so it does its
	   own pushing and still lands level with the cards that have one. */
	margin-top: auto;
}

.courseglade-badge-card__track + .courseglade-badge-card__meta {
	margin-top: 6px;
}

/* The date is a fact, not an award — only the payout beside it is worth a
   chip, and two pills in one row read as two separate claims. */
.courseglade-badge-card__meta .courseglade-badge-card__earned-date {
	margin-top: 0;
	padding: 0;
	background: none;
	color: var(--courseglade-on-surface-muted);
	font-weight: 500;
}

.courseglade-badge-card__progress {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-badge-card__reward {
	display: inline-flex;
	align-items: center;
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-secondary);
	background: var(--courseglade-surface-low);
	padding: 2px 8px;
	border-radius: var(--courseglade-radius-pill);
}

/* On an earned card the payout has already been banked, so it reads in the
   same green as the date beside it rather than as a pending reward. */
.courseglade-badge-card--earned .courseglade-badge-card__reward {
	color: var(--courseglade-success-dark);
	background: var(--courseglade-success-bg);
}

/* ── Achievements Tab ─────────────────────────────────── */
.courseglade-achievements-header {
	margin-bottom: 1.5rem;
}

.courseglade-achievements-title {
	font-size: 1.375rem;
	font-weight: 700;
	margin: 0;
	color: var(--courseglade-on-surface);
}

/* My Grades tab — per-course grade table. */
.courseglade-dashboard-grades .courseglade-grades-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius);
}

.courseglade-dashboard-grades .courseglade-grades-table {
	width: 100%;
	border-collapse: collapse;
	margin: 0;
	font-size: 14px;
}

.courseglade-dashboard-grades .courseglade-grades-table thead th {
	padding: 12px 16px;
	background: var(--courseglade-gray-50);
	text-align: left;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--courseglade-on-surface-muted);
	border-bottom: 1px solid var(--courseglade-border);
	white-space: nowrap;
}

.courseglade-dashboard-grades .courseglade-grades-table tbody td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--courseglade-gray-100);
	color: var(--courseglade-on-surface);
	vertical-align: middle;
}

.courseglade-dashboard-grades .courseglade-grades-table tbody tr:last-child td {
	border-bottom: none;
}

.courseglade-dashboard-grades .courseglade-grades-table tbody tr:hover {
	background: var(--courseglade-gray-50);
}

.courseglade-dashboard-grades .courseglade-grades-table th:first-child,
.courseglade-dashboard-grades .courseglade-grades-table td:first-child {
	padding-left: 20px;
	width: 50%;
}

.courseglade-dashboard-grades .courseglade-grades-table th:last-child,
.courseglade-dashboard-grades .courseglade-grades-table td:last-child {
	padding-right: 20px;
}

/* My Grades — cross-course overview stat cards. */
.courseglade-dashboard-grades .courseglade-grades-overview {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

.courseglade-dashboard-grades .courseglade-grades-stat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px;
	background: var(--courseglade-gray-50);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius);
}

.courseglade-dashboard-grades .courseglade-grades-stat__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-dashboard-grades .courseglade-grades-stat__value {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--courseglade-on-surface);
}

.courseglade-dashboard-grades .courseglade-grades-pending {
	display: inline-block;
	margin-left: 6px;
	font-size: 11px;
	color: var(--courseglade-on-surface-muted);
}

@media (max-width: 600px) {
	.courseglade-dashboard-grades .courseglade-grades-overview {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* My Grades — course-title link sizing. */
.courseglade-dashboard-grades .courseglade-grades-table tbody td:first-child a {
	min-width: 250px;
	display: inline-flex;
}

/* ==========================================================================
   Overview sections, to the draft
   ========================================================================== */

/* Continue learning is the one card a returning student is looking for, so it
   carries the feature gradient and everything else on the page stays white. */
#courseglade-dashboard .courseglade-dashboard-overview > .courseglade-continue-learning {
	background: linear-gradient(120deg, var(--courseglade-primary-deep), var(--courseglade-primary));
	border-color: transparent;
	color: var(--courseglade-on-primary);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-section-title,
#courseglade-dashboard .courseglade-continue-learning .courseglade-continue-item__title {
	color: var(--courseglade-on-primary);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-section-link {
	color: var(--courseglade-on-primary);
	opacity: 0.8;
}

/* One row: how far in, what is next, and the way back in. */
.courseglade-continue-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.courseglade-continue-ring {
	--courseglade-ring-pct: 0;
	width: 64px;
	height: 64px;
	flex: none;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: conic-gradient(
		var(--courseglade-on-primary) calc(var(--courseglade-ring-pct) * 1%),
		rgba(255, 255, 255, 0.2) 0
	);
}

/* The hole in the middle, so the ring reads as a ring. */
.courseglade-continue-ring span {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--courseglade-primary-deep);
	color: var(--courseglade-on-primary);
	font-size: 0.8125rem;
	font-weight: 800;
}

.courseglade-continue-body {
	flex: 1;
	min-width: 200px;
}

.courseglade-continue-kicker {
	display: block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
}

.courseglade-continue-title {
	display: block;
	margin: 2px 0 1px;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--courseglade-on-primary);
}

.courseglade-continue-meta {
	display: block;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.75);
}

#courseglade-dashboard .courseglade-continue-resume {
	background: var(--courseglade-on-primary);
	border-color: var(--courseglade-on-primary);
	color: var(--courseglade-primary);
}

#courseglade-dashboard .courseglade-continue-resume:hover {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary-dark);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-continue-item {
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.16);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-continue-item__meta {
	color: rgba(255, 255, 255, 0.75);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-progress-bar {
	background: rgba(255, 255, 255, 0.2);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-progress-fill {
	background: var(--courseglade-on-primary);
}

/* On the gradient a primary button disappears; the draft inverts it. */
#courseglade-dashboard .courseglade-continue-learning .courseglade-continue-item__btn {
	background: var(--courseglade-on-primary);
	border-color: var(--courseglade-on-primary);
	color: var(--courseglade-primary);
}

#courseglade-dashboard .courseglade-continue-learning .courseglade-continue-item__btn:hover {
	background: var(--courseglade-primary-surface);
	color: var(--courseglade-primary-dark);
}

/* A section heading and its "view all", on one line. */
.courseglade-section-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 16px;
}

/* A line explaining the heading above it. It takes the full width of the
   header so it lands under the title rather than beside the "view all",
   which is what a shared header row would otherwise do with it. */
.courseglade-section-header {
	flex-wrap: wrap;
}

/* Id-scoped for the margin: Astra sets a bottom margin on every paragraph,
   and losing to it on specificity is cheaper than an !important. */
#courseglade-dashboard .courseglade-section-desc {
	flex-basis: 100%;
	margin: -4px 0 0;
	font-size: 0.8125rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-section-link {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-primary);
	text-decoration: none;
}

.courseglade-section-link:hover {
	text-decoration: underline;
}

/* Activity: a tinted dot, the event, and when it happened. */
.courseglade-activity-item {
	gap: 12px;
	padding: 12px 0;
	border-bottom: 0;
	border-top: 1px solid var(--courseglade-surface-low);
	align-items: center;
}

.courseglade-activity-item:first-child {
	border-top: 0;
	padding-top: 2px;
}



.courseglade-activity-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--courseglade-on-surface);
}

.courseglade-activity-details {
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-activity-time {
	flex: none;
	margin-left: auto;
	padding-left: 12px;
	font-size: 0.75rem;
	color: var(--courseglade-gray-400);
	white-space: nowrap;
}

/* Up next: what to do, why it is not open yet, and the way in. */
.courseglade-upcoming-item {
	gap: 14px;
	padding: 14px 0;
	border-bottom: 0;
	border-top: 1px solid var(--courseglade-surface-low);
}
/* Rows past the fifth, until the toggle is pressed. They stay in the DOM, so
   the button reveals rather than re-renders. Declared after the row's own
   rule, which is defined twice in this file. */
.courseglade-upcoming-item.is-hidden {
	display: none;
}

.courseglade-upcoming-more {
	width: 100%;
	margin-top: 10px;
}


.courseglade-upcoming-item:first-child {
	border-top: 0;
}


/* Quiz and assignment carry their own tint, so the row says what it is
   before it is read. */
.courseglade-upcoming-item__icon.quiz {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

.courseglade-upcoming-item__icon.assignment {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}


/* Where the draft puts its button. A locked item has nothing to press, so
   this states the fact rather than offering a control that would refuse. */
.courseglade-upcoming-item__state {
	flex: none;
	padding: 6px 14px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius);
	background: var(--courseglade-surface);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-on-surface-muted);
}


.courseglade-dashboard-my-courses .courseglade-section-header {
	margin-bottom: 20px;
}

/* ==========================================================================
   Quiz attempts
   ========================================================================== */

/* The panel supplies its own sections, like the overview does. */
#courseglade-dashboard .courseglade-dashboard-main > .courseglade-quiz-attempts {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.courseglade-quiz-attempts .courseglade-stats-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 20px;
}

/* A table, not a stack of cards: every row carries the same four facts, and
   reading down a column is how a student compares attempts. */
.courseglade-attempts-table-wrap {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	overflow-x: auto;
}

.courseglade-attempts-table {
	width: 100%;
	/* The wrapper is `overflow-x: auto`, but a table at width:100% never
	   overflows it — it squeezes its columns instead, until a quiz title
	   breaks one word per line and the row is six lines tall. A floor gives
	   the wrapper something to scroll. */
	min-width: 560px;
	border-collapse: collapse;
	border: 0;
	margin: 0;
	font-size: 0.8125rem;
}

/* The quiz name is the column worth the space; the rest are short values. */
.courseglade-attempts-table td:first-child,
.courseglade-attempts-table th:first-child {
	min-width: 220px;
}

.courseglade-attempts-table th {
	padding: 12px 16px;
	text-align: left;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--courseglade-gray-400);
	background: var(--courseglade-surface);
	border: 0;
}

.courseglade-attempts-table td {
	padding: 12px 16px;
	vertical-align: middle;
	color: var(--courseglade-on-surface-muted);
	border: 0;
	border-top: 1px solid var(--courseglade-surface-low);
}

.courseglade-attempts-table tbody tr:hover {
	background: var(--courseglade-surface);
}

.courseglade-attempts-table td b {
	display: block;
	font-size: 0.875rem;
	color: var(--courseglade-on-surface);
}

.courseglade-attempts-table__sub {
	display: block;
	margin-top: 2px;
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-attempts-table__right {
	text-align: right;
}

/* Score reads twice: the figure for precision, the bar for comparison. */
.courseglade-attempts-table__score {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 110px;
}

.courseglade-attempts-table__score b,
.courseglade-attempts-table__score span b {
	display: inline;
	font-size: 0.8125rem;
	font-weight: 800;
	color: var(--courseglade-on-surface);
}

.courseglade-attempts-table__score > span {
	white-space: nowrap;
}

.courseglade-attempts-table__track {
	display: block;
	height: 5px;
	max-width: 120px;
	border-radius: var(--courseglade-radius-pill);
	background: var(--courseglade-surface-low);
	overflow: hidden;
}

.courseglade-attempts-table__track i {
	display: block;
	height: 100%;
	border-radius: var(--courseglade-radius-pill);
	background: var(--courseglade-amber);
}

.courseglade-attempt-result {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	white-space: nowrap;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-attempt-result__dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--courseglade-gray-300);
	flex: none;
}

.courseglade-attempt-result--passed {
	color: var(--courseglade-success-text);
}

.courseglade-attempt-result--passed .courseglade-attempt-result__dot {
	background: var(--courseglade-success);
}

.courseglade-attempt-result--pending {
	color: var(--courseglade-warning-text);
}

.courseglade-attempt-result--pending .courseglade-attempt-result__dot {
	background: var(--courseglade-warning);
}

.courseglade-attempt-review {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	white-space: nowrap;
	font-weight: 700;
	color: var(--courseglade-primary);
	text-decoration: none;
}

.courseglade-attempt-review:hover svg {
	transform: translateX(2px);
}

.courseglade-attempt-review svg {
	transition: transform 0.12s ease;
}

/* The date is the first thing to go when the table runs out of room. */
@media (max-width: 820px) {
	.courseglade-attempts-table__date,
	.courseglade-attempts-table th:nth-child(2) {
		display: none;
	}
}


.courseglade-attempts-table__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding: 11px 16px;
	border-top: 1px solid var(--courseglade-surface-low);
	background: var(--courseglade-surface);
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

.courseglade-attempts-table__foot .courseglade-pagination {
	margin: 0;
}

/* The pager markup was only ever styled in earnings.css, which the dashboard
   does not load, so every paginated tab rendered it raw. */
.courseglade-earnings-pagination {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

#courseglade-dashboard .courseglade-page-btn {
	display: inline-grid;
	place-items: center;
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-sm);
	background: var(--courseglade-surface-lowest);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	color: var(--courseglade-on-surface-secondary);
	text-decoration: none;
	transition: all var(--courseglade-transition);
}

/* The page you are already on does not respond: there is nowhere to go. */
#courseglade-dashboard a.courseglade-page-btn:not(.is-active):hover,
#courseglade-dashboard a.courseglade-page-btn:not(.is-active):focus {
	background: var(--courseglade-surface);
	border-color: var(--courseglade-primary);
	color: var(--courseglade-primary);
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: var(--courseglade-shadow-sm);
}

#courseglade-dashboard .courseglade-page-btn.is-active {
	background: var(--courseglade-primary);
	border-color: var(--courseglade-primary);
	color: var(--courseglade-surface-lowest);
	box-shadow: var(--courseglade-shadow-sm);
}

/* A dead end keeps the box, so the row of controls stays even — it just
   reads as unavailable rather than disappearing. */
#courseglade-dashboard span.courseglade-page-btn {
	background: var(--courseglade-surface);
	border-color: var(--courseglade-border);
	color: var(--courseglade-gray-300);
	cursor: default;
}

.courseglade-page-ellipsis {
	padding: 0 2px;
	color: var(--courseglade-gray-400);
	user-select: none;
}

/* ==========================================================================
   My grades
   ========================================================================== */

#courseglade-dashboard .courseglade-dashboard-main > .courseglade-grades {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
}

.courseglade-grades .courseglade-stats-grid {
	grid-template-columns: repeat(4, 1fr);
	margin-bottom: 20px;
}

/* What kind of thing was marked, before the row is read. */
.courseglade-grade-item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.courseglade-grade-item__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: var(--courseglade-radius);
}

.courseglade-grade-item__icon--quiz {
	background: var(--courseglade-warning-bg);
	color: var(--courseglade-warning);
}

.courseglade-grade-item__icon--assignment {
	background: var(--courseglade-success-bg);
	color: var(--courseglade-success);
}

.courseglade-grade-item b a {
	color: inherit;
	text-decoration: none;
}

.courseglade-grade-item b a:hover {
	color: var(--courseglade-primary);
}

.courseglade-attempts-table__pending {
	color: var(--courseglade-on-surface-muted);
}

.courseglade-attempt-result--awaiting {
	color: var(--courseglade-warning-text);
}

.courseglade-attempt-result--awaiting .courseglade-attempt-result__dot {
	background: var(--courseglade-warning);
}

@media (max-width: 900px) {
	.courseglade-grades .courseglade-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Achievements
   ========================================================================== */

/* The panel supplies its own cards. */
#courseglade-dashboard .courseglade-dashboard-main > .courseglade-dashboard-achievements {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

#courseglade-dashboard .courseglade-dashboard-achievements > .courseglade-section-header {
	margin-bottom: 0;
}

.courseglade-dashboard-achievements .courseglade-stats-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-bottom: 0;
}

/* Four tiles in the dashboard's ~660px main column are about 154px each, and
   "Badges earned" and "Rank of 69 · top 3%" both wrap under their own figure.
   Two by two gives each tile its line back. */
@media (max-width: 1200px) {
	.courseglade-dashboard-achievements .courseglade-stats-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* "4 / 11" — the total is context for the figure, not part of it. */
.courseglade-stat-of {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--courseglade-gray-400);
}

/* Badges and points history are cards in the column. */
#courseglade-dashboard .courseglade-user-badges,
#courseglade-dashboard .courseglade-point-history {
	background: var(--courseglade-surface-lowest);
	border: 1px solid var(--courseglade-border);
	border-radius: var(--courseglade-radius-md);
	box-shadow: var(--courseglade-shadow-sm);
	padding: 20px;
}

.courseglade-user-badges__count {
	margin-left: auto;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--courseglade-gray-400);
}

.courseglade-point-history__note {
	margin: 14px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--courseglade-surface-low);
	font-size: 0.75rem;
	color: var(--courseglade-on-surface-muted);
}

@media (max-width: 520px) {
	.courseglade-dashboard-achievements .courseglade-stats-grid {
		grid-template-columns: 1fr;
	}
}