/**
 * Public-facing signup and dashboard styles.
 *
 * @package KLP_Secure_Memberships
 */

/* --- Design tokens (scoped) --- */
.klp-sm-wrap {
	--klp-sm-primary: #1e3a8a;
	--klp-sm-primary-dark: #172554;
	--klp-sm-accent: #2563eb;
	--klp-sm-accent-soft: rgba(37, 99, 235, 0.12);
	--klp-sm-surface: #ffffff;
	--klp-sm-page-bg: #f1f5f9;
	--klp-sm-page-bg2: #e8eef5;
	--klp-sm-border: #e2e8f0;
	--klp-sm-border-strong: #cbd5e1;
	--klp-sm-text: #0f172a;
	--klp-sm-muted: #64748b;
	--klp-sm-radius: 16px;
	--klp-sm-radius-sm: 10px;
	--klp-sm-shadow: 0 14px 42px rgba(15, 23, 42, 0.08);
	--klp-sm-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.06);
	--klp-sm-input-bg: #ffffff;
	--klp-sm-input-bg-rest: #ffffff;
	--klp-sm-dash-max: 1060px;
	--klp-sm-btn-brand: #683fa0;
	--klp-sm-btn-brand-hover: #5a3590;
	--klp-sm-transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
	--klp-sm-focus-ring: 0 0 0 3px rgba(104, 63, 160, 0.28);
	margin: 32px auto;
	padding: 32px 16px 48px;
	background: linear-gradient(165deg, var(--klp-sm-page-bg) 0%, var(--klp-sm-page-bg2) 55%, #dce6f2 100%);
	color: var(--klp-sm-text);
	font-size: 1rem;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	box-sizing: border-box;
	width: 100%;
	max-width: min(var(--klp-sm-dash-max), 100%);
	min-width: 0;
}

/* Native checkboxes: checked state matches purple CTA (accent-color). */
.klp-sm-wrap input[type="checkbox"] {
	accent-color: var(--klp-sm-btn-brand, #683fa0);
}

.klp-sm-wrap *,
.klp-sm-wrap *::before,
.klp-sm-wrap *::after {
	box-sizing: inherit;
}

.klp-sm-wrap img,
.klp-sm-wrap video {
	max-width: 100%;
	height: auto;
}

.klp-sm-wrap h2 {
	margin: 0 0 12px;
	font-size: clamp(1.28rem, 0.35rem + 2.5vw, 1.65rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--klp-sm-primary-dark);
	line-height: 1.2;
}

.klp-sm-wrap h3 {
	margin: 24px 0 12px;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--klp-sm-primary);
}

.klp-sm-section-title {
	padding-bottom: 8px;
	border-bottom: 2px solid var(--klp-sm-accent-soft);
	margin-top: 28px;
	margin-bottom: 14px;
}

.klp-sm-lead {
	font-size: 1.02rem;
	line-height: 1.6;
}

.klp-sm-card {
	background: var(--klp-sm-surface);
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius);
	padding: 32px 32px 36px;
	box-shadow: var(--klp-sm-shadow);
	position: relative;
	overflow: hidden;
}

.klp-sm-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #5a3590 0%, var(--klp-sm-btn-brand, #683fa0) 50%, #8f6bd4 100%);
}

.klp-sm-card-approval,
.klp-sm-card-login {
	padding-top: 32px;
}

/* Login card (wp_login_form): stronger accent + structured header */
.klp-sm-wrap .klp-sm-card.klp-sm-card-login::before {
	height: 6px;
}

/*
 * Login card: narrow card on wide viewports; one left-aligned column (header, form, footer)
 * centered in the card — matches form fields and reads like a single sign-in panel.
 */
.klp-sm-wrap .klp-sm-card.klp-sm-card-login {
	text-align: left;
	max-width: min(28rem, calc(100vw - 32px));
	margin-left: auto;
	margin-right: auto;
}

.klp-sm-login-card-header,
.klp-sm-wrap .klp-sm-card.klp-sm-card-login .klp-sm-login-wrap,
.klp-sm-login-card-footer {
	width: 100%;
	max-width: min(22rem, 100%);
	margin-left: auto;
	margin-right: auto;
}

.klp-sm-login-card-header {
	margin: 0 auto 10px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--klp-sm-border);
	text-align: left;
}

.klp-sm-login-card-eyebrow {
	margin: 0 0 10px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: #4d5d78;
}

.klp-sm-login-card-title {
	margin: 0 0 12px;
	font-size: clamp(1.35rem, 0.5rem + 2vw, 1.65rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--klp-sm-primary-dark);
}

/* Intro under title: slightly stronger than default .klp-sm-muted for readability */
.klp-sm-wrap .klp-sm-card.klp-sm-card-login .klp-sm-login-card-lead.klp-sm-muted {
	margin: 0;
	max-width: 42ch;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: #4b5c76;
}

.klp-sm-login-card-footer {
	margin-top: 6px;
	padding-top: 20px;
	border-top: 1px solid var(--klp-sm-border);
	text-align: left;
}

.klp-sm-login-card-footer-text {
	margin: 0;
	max-width: 42ch;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--klp-sm-text);
}

.klp-sm-login-card-footer-text.klp-sm-muted {
	color: #4b5c76;
	font-size: 0.9rem;
	line-height: 1.6;
	max-width: 42ch;
}

.klp-sm-login-card-inline-link {
	font-weight: 600;
	color: var(--klp-sm-accent);
	text-decoration: none;
	margin: 0 0.2em;
	white-space: nowrap;
}

.klp-sm-login-card-inline-link:hover {
	text-decoration: underline;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-login-card-inline-link:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--klp-sm-accent);
}

.klp-sm-card-approval .klp-sm-login-wrap--embedded {
	margin-top: 4px;
}

/* --- Forms --- */
.klp-sm-form {
	margin: 0;
	padding: 0;
	background: #fff;
}

.klp-sm-wrap .klp-sm-dash-form,
.klp-sm-wrap .klp-sm-modal-form,
.klp-sm-wrap .klp-sm-educator-profile-form {
	background: #fff;
}

.klp-sm-form .klp-sm-field {
	margin-bottom: 20px;
	margin-top: 20px;
}

.klp-sm-field label,
.klp-sm-field .klp-sm-field-label {
	display: block;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--klp-sm-primary-dark);
	margin-bottom: 8px;
	letter-spacing: 0.02em;
	line-height: 1.35;
}

.klp-sm-form input[type="text"],
.klp-sm-form input[type="email"],
.klp-sm-form input[type="password"],
.klp-sm-form input[type="number"],
.klp-sm-form input[type="tel"],
.klp-sm-form input[type="url"],
.klp-sm-form select,
.klp-sm-form textarea,
.klp-sm-student-flow .klp-sm-field select,
.klp-sm-student-flow .klp-sm-field input[type="email"],
.klp-sm-student-flow .klp-sm-field input[type="password"],
.klp-sm-student-flow .klp-sm-field input[type="text"],
.klp-sm-student-flow .klp-sm-field input[type="tel"] {
	width: 100%;
	max-width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--klp-sm-border-strong);
	border-radius: var(--klp-sm-radius-sm);
	background: var(--klp-sm-input-bg-rest);
	color: var(--klp-sm-text);
	font-size: 1rem;
	line-height: 1.45;
	transition:
		border-color var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition),
		background var(--klp-sm-transition);
	box-sizing: border-box;
	overflow-wrap: anywhere;
}

.klp-sm-form textarea {
	min-height: 100px;
	resize: vertical;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.klp-sm-form select {
	appearance: none;
	background-color: var(--klp-sm-input-bg-rest);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 2l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 42px;
}

.klp-sm-form input::placeholder,
.klp-sm-form textarea::placeholder {
	color: #94a3b8;
	opacity: 1;
}

.klp-sm-form input:hover,
.klp-sm-form textarea:hover,
.klp-sm-student-flow .klp-sm-field input:hover {
	border-color: #94a3b8;
	background: var(--klp-sm-input-bg);
}

.klp-sm-form select:hover,
.klp-sm-student-flow .klp-sm-field select:hover {
	border-color: #94a3b8;
	background-color: var(--klp-sm-input-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 2l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

.klp-sm-form input:focus,
.klp-sm-form textarea:focus,
.klp-sm-student-flow .klp-sm-field input:focus {
	outline: none;
	border-color: var(--klp-sm-accent);
	background: var(--klp-sm-input-bg);
	box-shadow: var(--klp-sm-focus-ring);
}

/* Password show/hide (wrapper injected by password-toggle.js) */
.klp-sm-password-field {
	display: block;
	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.klp-sm-password-field > input[type="password"],
.klp-sm-password-field > input[type="text"] {
	padding-right: 4.75rem;
}

.klp-sm-password-toggle {
	position: absolute;
	right: 2px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	width: 44px;
	min-width: 44px;
	height: 44px;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--klp-sm-radius-sm);
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	-webkit-appearance: none;
	appearance: none;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.klp-sm-password-toggle::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	opacity: 0.88;
	transition: opacity var(--klp-sm-transition, 0.15s ease);
	/* Eye: password hidden — click to reveal */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Eye with slash: password visible — click to conceal */
.klp-sm-password-toggle.is-revealed::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1 4.24 4.24'/%3E%3Cpath d='M1 1l22 22'/%3E%3C/svg%3E");
}

.klp-sm-password-toggle:hover::before,
.klp-sm-password-toggle:focus-visible::before {
	opacity: 1;
}

.klp-sm-password-toggle:hover {
	background: rgba(104, 63, 160, 0.1);
}

.klp-sm-password-toggle:focus {
	outline: none;
}

.klp-sm-password-toggle:focus-visible {
	background: rgba(104, 63, 160, 0.14);
	box-shadow: 0 0 0 2px rgba(104, 63, 160, 0.35);
}

.klp-sm-form select:focus,
.klp-sm-student-flow .klp-sm-field select:focus {
	outline: none;
	border-color: var(--klp-sm-accent);
	background-color: var(--klp-sm-input-bg);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 2l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	box-shadow: var(--klp-sm-focus-ring);
}

.klp-sm-form input[readonly] {
	background: #fff;
	color: var(--klp-sm-muted);
	cursor: default;
}

.klp-sm-form input[readonly]:focus {
	box-shadow: none;
	border-color: var(--klp-sm-border-strong);
}

.klp-sm-req {
	color: #b91c1c;
	font-weight: 700;
	text-decoration: none;
	border: none;
	cursor: help;
	font-size: 0.95em;
}

.klp-sm-optional {
	font-weight: 500;
	color: var(--klp-sm-muted);
	font-size: 0.82em;
}

.klp-sm-sublabel {
	font-weight: 600;
	font-size: 0.85rem;
	margin-bottom: 6px;
	display: block;
	color: var(--klp-sm-muted);
}

.klp-sm-field-hint {
	margin: -2px 0 10px;
	font-size: 0.875rem;
	line-height: 1.45;
	max-width: auto;
}

/* Student self-registration: grouped layout */
.klp-sm-student-self-layout {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.klp-sm-form-student-self .klp-sm-student-self-name-row,
.klp-sm-form-student-self .klp-sm-student-self-contact-row,
.klp-sm-form-student-self .klp-sm-student-self-password-row {
	margin-top: 6px;
}

.klp-sm-form-student-self .klp-sm-student-self-contact-row .klp-sm-field-hint,
.klp-sm-form-student-self .klp-sm-student-self-password-row .klp-sm-field-hint {
	max-width: none;
}

.klp-sm-form-student-self .klp-sm-form-actions-student {
	margin-top: 24px;
}

.klp-sm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 16px;
}

.klp-sm-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 20px;
}

/* Signup: role chooser — three tiles, stack on small viewports */
.klp-sm-role-chooser__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.klp-sm-role-chooser__list > li {
	margin: 0;
	padding: 0;
	min-width: 0;
	display: block;
}

.klp-sm-grid--role-chooser {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 2.5vw, 22px);
}

@media (max-width: 900px) {
	.klp-sm-grid--role-chooser {
		grid-template-columns: 1fr;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}
}

.klp-sm-role-chooser__header {
	text-align: center;
	margin-bottom: clamp(20px, 4vw, 32px);
}

.klp-sm-role-chooser__title {
	margin: 0 0 10px;
	font-size: clamp(1.35rem, 2.5vw + 0.5rem, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--klp-sm-primary-dark);
	line-height: 1.2;
}

.klp-sm-role-chooser__lead {
	margin: 0 auto;
	max-width: 36rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--klp-sm-muted);
}

.klp-sm-dob-row {
	align-items: end;
}

/* Role chooser tiles */
.klp-sm-choice {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 0;
	min-height: 0;
	padding: clamp(20px, 3vw, 28px) clamp(18px, 2.5vw, 24px) clamp(22px, 3vw, 28px);
	border: 1px solid rgba(148, 163, 184, 0.45);
	border-radius: calc(var(--klp-sm-radius) + 2px);
	text-decoration: none;
	color: inherit;
	background: linear-gradient(180deg, #fff 0%, #fafbfc 100%);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 12px 32px rgba(15, 23, 42, 0.06);
	transition:
		border-color var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition),
		transform var(--klp-sm-transition),
		background var(--klp-sm-transition);
}

.klp-sm-choice:hover {
	border-color: rgba(104, 63, 160, 0.45);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 16px 40px rgba(104, 63, 160, 0.14);
	transform: translateY(-3px);
	background: #fff;
}

.klp-sm-choice:focus {
	outline: none;
}

.klp-sm-choice:focus-visible {
	outline: none;
	border-color: var(--klp-sm-accent, #683fa0);
	box-shadow:
		0 0 0 3px rgba(104, 63, 160, 0.25),
		0 16px 40px rgba(104, 63, 160, 0.12);
}

.klp-sm-choice__icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	border-radius: 18px;
	background: linear-gradient(145deg, rgba(104, 63, 160, 0.14) 0%, rgba(104, 63, 160, 0.06) 100%);
	box-shadow: 0 0 0 1px rgba(104, 63, 160, 0.1) inset;
	flex-shrink: 0;
	transition: transform var(--klp-sm-transition), box-shadow var(--klp-sm-transition);
}

.klp-sm-choice:hover .klp-sm-choice__icon-wrap {
	transform: scale(1.04);
	box-shadow:
		0 0 0 1px rgba(104, 63, 160, 0.16) inset,
		0 8px 20px rgba(104, 63, 160, 0.15);
}

.klp-sm-choice__icon {
	display: block;
	width: 32px;
	height: 32px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
}

/* Parent / guardian — family / users */
.klp-sm-choice__icon--parent {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75'/%3E%3C/svg%3E");
}

/* Student — graduation cap */
.klp-sm-choice__icon--student {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2L2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E");
}

/* Educator — school / institution */
.klp-sm-choice__icon--school {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

.klp-sm-choice__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	width: 100%;
	min-width: 0;
}

.klp-sm-choice__title,
.klp-sm-choice strong {
	color: var(--klp-sm-primary-dark);
	font-size: 1.06rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.klp-sm-choice__desc,
.klp-sm-choice > span:not(.klp-sm-choice__icon-wrap):not(.klp-sm-choice__content) {
	color: var(--klp-sm-muted);
	font-size: 0.9rem;
	line-height: 1.5;
	font-weight: 500;
}

.klp-sm-choice__desc {
	display: block;
	max-width: 17rem;
	margin: 0 auto;
}

/* Buttons — brand pill (no border-radius shorthand per request: uniform 50px) */
.klp-sm-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 28px;
	border-style: none;
	border-radius: 50px;
	background: #683fa0;
	color: #fff;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.02em;
	min-height: 48px;
	box-shadow: 0 2px 10px rgba(104, 63, 160, 0.28);
	transition:
		background var(--klp-sm-transition),
		filter var(--klp-sm-transition),
		transform 0.12s ease,
		box-shadow var(--klp-sm-transition);
}

.klp-sm-button:hover {
	filter: brightness(1.05);
	box-shadow: 0 4px 14px rgba(104, 63, 160, 0.35);
}

.klp-sm-button:active {
	transform: translateY(1px);
}

.klp-sm-button:focus-visible {
	outline: none;
	box-shadow:
		0 2px 10px rgba(104, 63, 160, 0.28),
		0 0 0 3px #fff,
		0 0 0 5px rgba(104, 63, 160, 0.55);
}

.klp-sm-button-secondary {
	background: #683fa0;
	color: #fff;
	border-style: none;
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(104, 63, 160, 0.28);
}

.klp-sm-button-secondary:hover {
	background: #5a3590;
	color: #fff;
	filter: none;
}

.klp-sm-button-secondary:focus-visible {
	box-shadow:
		0 2px 10px rgba(104, 63, 160, 0.28),
		0 0 0 3px #fff,
		0 0 0 5px rgba(104, 63, 160, 0.55);
}

/* Neutral outline (e.g. copy actions in educator dashboard) */
.klp-sm-button-outline {
	background: #683fa0;
	color: #fff;
	border-style: none;
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(104, 63, 160, 0.22);
	font-weight: 600;
}

.klp-sm-button-outline:hover {
	background: #5a3590;
	color: #fff;
	filter: none;
}

.klp-sm-button-outline:focus-visible {
	outline: none;
	box-shadow:
		0 2px 10px rgba(104, 63, 160, 0.22),
		0 0 0 3px #fff,
		0 0 0 5px rgba(104, 63, 160, 0.55);
}

.klp-sm-button-outline:active {
	transform: translateY(1px);
}

.klp-sm-button-ghost {
	background: transparent;
	color: #b91c1c;
	border: 1px solid #fecaca;
	box-shadow: none;
	font-weight: 600;
}

.klp-sm-button-ghost:hover {
	background: #fef2f2;
	border-color: #f87171;
	color: #991b1b;
	filter: none;
}

.klp-sm-button-ghost:focus-visible {
	box-shadow:
		none,
		0 0 0 3px #fff,
		0 0 0 5px #f87171;
}

.klp-sm-button-danger {
	background: #683fa0;
	color: #fff;
	border-style: none;
	border-radius: 50px;
	box-shadow: 0 2px 10px rgba(104, 63, 160, 0.28);
}

.klp-sm-button-danger:hover {
	filter: brightness(1.05);
	box-shadow: 0 4px 14px rgba(104, 63, 160, 0.35);
}

.klp-sm-button-danger:focus-visible {
	outline: none;
	box-shadow:
		0 2px 10px rgba(104, 63, 160, 0.28),
		0 0 0 3px #fff,
		0 0 0 5px rgba(104, 63, 160, 0.55);
}

.klp-sm-button-compact {
	padding: 8px 14px;
	font-size: 0.875rem;
}

.klp-sm-actions-row,
.klp-sm-nav-row {
	margin: 0 0 16px;
}

.klp-sm-nav-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 20px;
}

.klp-sm-nav-link-inline {
	margin: 0;
}

.klp-sm-nav-link {
	display: inline-block;
	font-weight: 600;
	color: var(--klp-sm-accent);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.klp-sm-nav-link:hover {
	color: var(--klp-sm-primary-dark);
	border-bottom-color: var(--klp-sm-primary-dark);
}

/* Back navigation + signup step chrome */
.klp-sm-form-toolbar {
	margin: 0 0 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--klp-sm-border);
}

a.klp-sm-back-link,
button.klp-sm-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px 12px 10px 8px;
	min-height: 44px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--klp-sm-muted);
	text-decoration: none;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 8px;
	transition: color 0.15s ease, background 0.15s ease;
}

button.klp-sm-back-link {
	-webkit-appearance: none;
	appearance: none;
}

a.klp-sm-back-link:hover,
button.klp-sm-back-link:hover {
	color: var(--klp-sm-accent);
	background: var(--klp-sm-accent-soft);
}

a.klp-sm-back-link:focus-visible,
button.klp-sm-back-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--klp-sm-accent-soft);
	color: var(--klp-sm-primary-dark);
}

.klp-sm-back-link-icon {
	font-size: 1.05rem;
	line-height: 1;
	opacity: 0.9;
}

.klp-sm-form-head {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--klp-sm-border);
}

.klp-sm-form-head h2 {
	margin-bottom: 10px;
}

.klp-sm-form-head .klp-sm-muted {
	margin: 0;
	max-width: auto;
	line-height: 1.55;
}

.klp-sm-student-step-lead {
	margin: 0 0 18px;
	max-width: auto;
}

.klp-sm-panel-body {
	padding: 26px 26px 28px;
	margin-bottom: 4px;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.klp-sm-student-flow .klp-sm-panel-body {
	margin-top: 4px;
}

/* Parent / Guardian signup: grouped sections + full-width CTA */
.klp-sm-form-parent-register .klp-sm-parent-register-intro {
	margin: 0 0 18px;
	font-size: 0.94rem;
	line-height: 1.55;
	color: var(--klp-sm-muted);
	max-width: 46em;
}

.klp-sm-form-parent-register .klp-sm-parent-register-section {
	margin: 0 0 16px;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.klp-sm-form-parent-register .klp-sm-parent-register-section:last-of-type {
	margin-bottom: 0;
}

.klp-sm-form-parent-register .klp-sm-parent-register-heading {
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--klp-sm-primary);
	border: none;
}

.klp-sm-form-parent-register .klp-sm-parent-register-hint {
	margin: -4px 0 14px;
	color: var(--klp-sm-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

.klp-sm-form-parent-register .klp-sm-parent-register-section .klp-sm-field:last-child {
	margin-bottom: 0;
}

.klp-sm-form-parent-register .klp-sm-parent-register-section .klp-sm-grid-2:last-child .klp-sm-field {
	margin-bottom: 0;
}

.klp-sm-form-consent-block--parent {
	margin-top: 20px;
	border-left: 3px solid var(--klp-sm-accent);
	background: #fff;
}

.klp-sm-form-actions-parent {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--klp-sm-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.klp-sm-form-actions-parent .klp-sm-button {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	font-size: 1.05rem;
}

/* Educator signup */
.klp-sm-form-educator-register .klp-sm-register-section {
	margin: 0 0 16px;
	padding: 18px 20px 16px;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.klp-sm-form-educator-register .klp-sm-register-section:last-of-type {
	margin-bottom: 0;
}

.klp-sm-form-educator-register .klp-sm-register-heading {
	margin: 0 0 12px;
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--klp-sm-primary);
	border: none;
}

.klp-sm-form-educator-register .klp-sm-educator-register-hint {
	margin: -4px 0 14px;
	color: var(--klp-sm-muted);
	font-size: 0.875rem;
	font-weight: 500;
}

/* School address: inherits .klp-sm-form textarea; keep comfortable height */
.klp-sm-form-educator-register .klp-sm-textarea {
	min-height: 112px;
	line-height: 1.5;
}

.klp-sm-form-consent-block--educator {
	margin-top: 20px;
	border-left: 3px solid var(--klp-sm-primary);
	background: #fff;
}

.klp-sm-form-actions-educator {
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--klp-sm-border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.klp-sm-form-actions-educator .klp-sm-button {
	width: 100%;
	min-width: 0;
	min-height: 48px;
	font-size: 1.05rem;
}

.klp-sm-form-consent-block {
	margin-top: 10px;
	margin-bottom: 18px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	line-height: 1.55;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.klp-sm-form-consent-block + .klp-sm-form-consent-block {
	margin-top: 14px;
}

/* Optional AI opt-in: visually secondary, still tappable */
.klp-sm-form-consent-block--ai-optional {
	font-size: 0.95em;
}

.klp-sm-form-actions-student {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid var(--klp-sm-border);
}

.klp-sm-form-actions-student .klp-sm-button {
	min-width: 0;
	max-width: 100%;
}

/* Parent approval & similar long forms */
.klp-sm-form-approval .klp-sm-section-title {
	margin-top: 8px;
}

.klp-sm-form-approval .klp-sm-field.klp-sm-checkbox {
	margin-top: 24px;
	margin-bottom: 0;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
}

.klp-sm-form-approval > .klp-sm-button[type="submit"] {
	display: flex;
	width: fit-content;
	max-width: min(100%, 22rem);
	margin-top: 24px;
	padding-left: 32px;
	padding-right: 32px;
	min-height: 48px;
}

.klp-sm-muted {
	margin: 0;
	color: var(--klp-sm-muted);
	font-size: 0.95rem;
}

/* Checkboxes */
.klp-sm-checkbox label {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-weight: 400;
	color: var(--klp-sm-text);
	font-size: 0.9375rem;
	line-height: 1.55;
	cursor: pointer;
}

.klp-sm-checkbox input {
	margin-top: 4px;
	flex-shrink: 0;
	width: 1.125rem;
	height: 1.125rem;
	min-width: 1.125rem;
	min-height: 1.125rem;
	border-radius: 4px;
}

.klp-sm-form-consent-block:focus-within {
	border-color: #cbd5e1;
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.03),
		0 0 0 3px var(--klp-sm-accent-soft);
}

/* Summary list (approval) */
.klp-sm-summary-list {
	margin: 0 0 8px;
	padding: 16px 18px 16px 22px;
	background: #f8fafc;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	list-style: disc;
}

.klp-sm-list li {
	margin: 8px 0;
	color: var(--klp-sm-text);
}

.klp-sm-list strong {
	color: var(--klp-sm-primary);
	font-weight: 600;
}

/* Errors */
.klp-sm-errors {
	border: 1px solid #fecaca;
	border-left: 4px solid #dc2626;
	background: linear-gradient(180deg, #fef2f2 0%, #fffafa 100%);
	color: #991b1b;
	border-radius: var(--klp-sm-radius-sm);
	padding: 16px 18px;
	margin: 0 0 20px;
	box-shadow: 0 1px 2px rgba(220, 38, 38, 0.06);
}

.klp-sm-errors p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 500;
}

.klp-sm-errors p + p {
	margin-top: 8px;
}

.klp-sm-errors-server {
	margin-bottom: 20px;
}

.klp-sm-notice-success {
	border: 1px solid #86efac;
	border-left: 4px solid #16a34a;
	background: linear-gradient(180deg, #f0fdf4 0%, #f7fef9 100%);
	color: #166534;
	border-radius: var(--klp-sm-radius-sm);
	padding: 16px 18px;
	margin: 0 0 20px;
	box-shadow: 0 1px 2px rgba(22, 101, 52, 0.06);
}

.klp-sm-notice-success p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 500;
}

/* Parent email: decline confirmation (minor approval flow) */
.klp-sm-card-decline .klp-sm-decline-body p {
	margin: 0 0 1rem;
	line-height: 1.62;
}

.klp-sm-card-decline .klp-sm-decline-body p:last-child {
	margin-bottom: 0;
}

.klp-sm-decline-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 16px;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(148, 163, 184, 0.35);
}

.klp-sm-form-decline-confirm {
	display: inline-block;
	margin: 0;
}

.klp-sm-card-decline-result h2 {
	margin-top: 0;
}

.klp-sm-decline-result-next {
	margin: 1.25rem 0 0;
}

.klp-sm-notice-warn {
	border: 1px solid #fcd34d;
	border-left: 4px solid #ca8a04;
	background: linear-gradient(180deg, #fffbeb 0%, #fffdf5 100%);
	color: #854d0e;
	border-radius: var(--klp-sm-radius-sm);
	padding: 16px 18px;
	margin: 0 0 20px;
	box-shadow: 0 1px 2px rgba(133, 77, 14, 0.06);
}

.klp-sm-notice-warn p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 500;
}

.klp-sm-notice-info {
	border: 1px solid #bfdbfe;
	border-left: 4px solid #2563eb;
	background: linear-gradient(180deg, #eff6ff 0%, #f8fafc 100%);
	color: #1e3a8a;
	border-radius: var(--klp-sm-radius-sm);
	padding: 16px 18px;
	margin: 0 0 20px;
	box-shadow: 0 1px 2px rgba(30, 58, 138, 0.06);
}

.klp-sm-notice-info p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	font-weight: 500;
}

.klp-sm-parent-dash-subscription-alert p + p {
	margin-top: 10px;
}

/* Student flow panels */
.klp-sm-student-flow .klp-sm-hidden {
	display: none !important;
}

.klp-sm-wrap .klp-sm-hidden {
	display: none !important;
}

.klp-sm-student-panel {
	transition: opacity 0.2s ease;
}

.klp-sm-student-panel:not(.klp-sm-student-panel-active) {
	opacity: 0.96;
}

/* Tables */
.klp-sm-table {
	width: 100%;
	border-collapse: collapse;
	margin: 12px 0 20px;
	font-size: 0.95rem;
	border-radius: var(--klp-sm-radius-sm);
	overflow: auto;
	border: 1px solid var(--klp-sm-border);
	box-shadow: var(--klp-sm-shadow-soft);
}

.klp-sm-table th,
.klp-sm-table td {
	border: 1px solid var(--klp-sm-border);
	padding: 12px 14px;
	text-align: left;
}

.klp-sm-table th {
	background: linear-gradient(180deg, #f1f5f9 0%, #e8eef4 100%);
	color: var(--klp-sm-primary-dark);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.klp-sm-table tbody tr:nth-child(even) {
	background: #fafbfc;
}

/* Delete child modal */
.klp-sm-modal {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 100000;
	align-items: center;
	justify-content: center;
	padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
	box-sizing: border-box;
}

.klp-sm-modal.is-open {
	display: flex;
	overscroll-behavior: contain;
}

/* Viewport scroll locked while a modal is open (class toggled by modal-scroll-lock.js). */
html.klp-sm-modal-scroll-locked {
	overflow: hidden;
	height: 100%;
}

.klp-sm-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(15, 23, 42, 0.45);
	cursor: pointer;
}

.klp-sm-modal-dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: min(420px, calc(100vw - 32px));
	max-height: min(90dvh, calc(100vh - 48px));
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--klp-sm-surface);
	border-radius: var(--klp-sm-radius);
	border: 1px solid var(--klp-sm-border);
	box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2);
	padding: 24px 22px 22px;
}

.klp-sm-modal-title {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-modal-form {
	margin: 0;
}

.klp-sm-modal-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 16px;
}

.klp-sm-modal-error {
	margin: 10px 0 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: #b91c1c;
}

/* --- Parent dashboard --- */
.klp-sm-parent-dash {
	max-width: min(var(--klp-sm-dash-max), 100%);
	min-width: 0;
}

.klp-sm-wrap.klp-sm-parent-dash.klp-sm-educator-app {
	max-width: min(var(--klp-sm-dash-max), 100%);
	min-width: 0;
}

.klp-sm-parent-dash-main-inner > .klp-sm-dash-section {
	margin-top: 0;
}

.klp-sm-parent-dash-anchor {
	scroll-margin-top: 24px;
}

.klp-sm-parent-panel {
	min-width: 0;
	width: 100%;
}

/* Parent dashboard: full-width panels match overview card (surface, accent bar, header rhythm) */
.klp-sm-parent-app .klp-sm-parent-panel > .klp-sm-parent-panel-card.klp-sm-dash-section {
	margin-top: 0;
	position: relative;
	overflow: hidden;
	background: var(--klp-sm-surface);
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius);
	padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px) clamp(26px, 3.2vw, 36px);
	box-shadow: var(--klp-sm-shadow);
}

.klp-sm-parent-app .klp-sm-parent-panel > .klp-sm-parent-panel-card.klp-sm-dash-section::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, #5a3590 0%, var(--klp-sm-btn-brand, #683fa0) 50%, #8f6bd4 100%);
	pointer-events: none;
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-section-head {
	margin-bottom: clamp(18px, 2.5vw, 22px);
	padding-bottom: clamp(16px, 2.2vw, 22px);
	border-bottom: 1px solid var(--klp-sm-border);
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-section-head .klp-sm-dash-eyebrow {
	margin-bottom: 8px;
}

.klp-sm-parent-app .klp-sm-parent-panel-title {
	margin: 0 0 10px;
	font-size: clamp(1.35rem, 0.55rem + 2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.2;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-section-head .klp-sm-dash-lead {
	margin-top: 0;
	margin-bottom: 0;
	max-width: 100%;
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-assign {
	margin-top: clamp(20px, 2.5vw, 28px);
	padding: clamp(18px, 2.2vw, 24px);
	border: 1px solid var(--klp-sm-border);
	border-radius: calc(var(--klp-sm-radius-sm) + 2px);
	background: linear-gradient(180deg, #f8fafc 0%, #ffffff 55%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-assign .klp-sm-dash-subheading {
	margin-top: 0;
}

.klp-sm-parent-app .klp-sm-parent-panel-card--accent.klp-sm-dash-section-accent {
	background: linear-gradient(168deg, #ffffff 0%, #f8fafc 42%, #eff6ff 100%);
	border-color: rgba(129, 140, 248, 0.38);
	box-shadow:
		var(--klp-sm-shadow),
		0 0 0 1px rgba(255, 255, 255, 0.75) inset;
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-empty {
	padding: clamp(20px, 3vw, 28px) clamp(16px, 2vw, 22px);
	border-radius: var(--klp-sm-radius-sm);
	border: 1px dashed var(--klp-sm-border-strong);
	background: rgba(248, 250, 252, 0.65);
}

.klp-sm-parent-app .klp-sm-parent-panel-card .klp-sm-dash-empty-muted {
	background: rgba(241, 245, 249, 0.75);
}

.klp-sm-dash-card {
	padding-bottom: 36px;
}

.klp-sm-dash-header {
	margin: 0 0 8px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--klp-sm-border);
}

.klp-sm-dash-eyebrow {
	margin: 0 0 6px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--klp-sm-accent);
}

.klp-sm-dash-header h2 {
	margin: 0 0 10px;
	font-size: 1.85rem;
}

.klp-sm-dash-lead {
	margin: 0 0 12px;
	max-width: auto;
}

/* --- Dashboard overview (parent, student, educator, school): hero + metric strip --- */
.klp-sm-dash-overview {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 2vw, 22px);
	width: 100%;
	min-width: 0;
}

.klp-sm-dash-overview-card {
	background: linear-gradient(168deg, #ffffff 0%, #f8fafc 52%, #f1f5f9 100%);
	border-color: rgba(148, 163, 184, 0.42);
	box-shadow:
		0 16px 40px rgba(15, 23, 42, 0.065),
		0 0 0 1px rgba(255, 255, 255, 0.78) inset;
}

.klp-sm-parent-app .klp-sm-dash-overview-card .klp-sm-dash-header,
.klp-sm-student-app .klp-sm-dash-overview-card .klp-sm-dash-header {
	margin-bottom: 0;
	padding-bottom: clamp(16px, 2vw, 22px);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.klp-sm-parent-app .klp-sm-dash-overview-card .klp-sm-dash-header h2,
.klp-sm-student-app .klp-sm-dash-overview-card .klp-sm-dash-header h2 {
	font-size: clamp(1.52rem, 1rem + 1.65vw, 1.95rem);
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.14;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-dash-overview__stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(152px, 1fr));
	gap: clamp(12px, 1.6vw, 16px);
	padding: clamp(4px, 0.8vw, 8px) 0 clamp(6px, 1vw, 10px);
	margin: 0;
}

.klp-sm-educator-app .klp-sm-dash-overview .klp-sm-dash-overview__stats {
	padding-top: clamp(6px, 1vw, 12px);
}

/* Educator + school home: three snapshot cards in one balanced row on wide viewports */
.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri,
.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Tablet only: two cards + one full-width row (mobile uses horizontal row below) */
@media (max-width: 1024px) and (min-width: 783px) {
	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: clamp(10px, 1.8vw, 14px);
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat:nth-child(3),
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat:nth-child(3) {
		grid-column: 1 / -1;
	}
}

.klp-sm-dash-overview__stat {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: 14px;
	min-width: 0;
	border-radius: calc(var(--klp-sm-radius-sm) + 2px);
	border: 1px solid rgba(148, 163, 184, 0.38);
	background: rgba(255, 255, 255, 0.88);
	padding: 14px 16px 14px 14px;
	min-height: 92px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.klp-sm-dash-overview__stat-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background-color: rgba(37, 99, 235, 0.08);
	background-repeat: no-repeat;
	background-position: center;
	background-size: 22px 22px;
	border: 1px solid rgba(37, 99, 235, 0.16);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	align-self: flex-start;
}

.klp-sm-dash-overview__stat-content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 2px;
}

.klp-sm-dash-overview__stat-label {
	margin: 0;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--klp-sm-muted);
	line-height: 1.25;
}

.klp-sm-dash-overview__stat-value {
	margin: 0;
	font-size: 1.32rem;
	font-weight: 800;
	color: var(--klp-sm-primary-dark);
	letter-spacing: -0.02em;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.klp-sm-dash-overview__stat-value--text {
	font-size: 1.02rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	word-break: break-word;
}

.klp-sm-dash-overview__stat-sub {
	margin: 6px 0 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--klp-sm-muted);
}

/* Overview stat icons (inline SVG, Heroicons-style stroke) */
.klp-sm-dash-overview__stat-icon--users {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--layers {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--briefcase {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M20.25 7.5l-.625 10.632a2.25 2.25 0 01-2.247 2.118H6.622a2.25 2.25 0 01-2.247-2.118L3.75 7.5M10 11.25h4M3.375 7.5h17.25c.621 0 1.125-.504 1.125-1.125v-1.5c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v1.5c0 .621.504 1.125 1.125 1.125z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--globe {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Ccircle cx='12' cy='12' r='10' stroke-linecap='round'/%3E%3Cpath stroke-linecap='round' d='M2 12h20'/%3E%3Cpath stroke-linecap='round' d='M12 2a15 15 0 010 20 15 15 0 010-20'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--pulse {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M13 10V3L4 14h7v7l9-11h-7z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--academic {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 14l9-5-9-5-9 5 9 5z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 14l6.16-3.422A12.025 12.025 0 0112 21.5c-2.685 0-5.23-.586-7.522-1.64L12 14z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--building {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--shield {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--mappin {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z'/%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M15 11a3 3 0 11-6 0 3 3 0 016 0z'/%3E%3C/svg%3E");
}

.klp-sm-dash-overview__stat-icon--table {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%231d4ed8' stroke-width='1.75'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4 6a2 2 0 012-2h12a2 2 0 012 2v12a2 2 0 01-2 2H6a2 2 0 01-2-2V6z'/%3E%3Cpath stroke-linecap='round' d='M4 12h16M12 4v16'/%3E%3C/svg%3E");
}

.klp-sm-dash-section-head--icon {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 14px 16px;
	margin-bottom: clamp(18px, 2.2vw, 22px);
	padding-bottom: clamp(16px, 2vw, 20px);
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.klp-sm-dash-section-head--icon .klp-sm-dash-overview__section-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background-size: 24px 24px;
}

.klp-sm-dash-section-head-text {
	flex: 1;
	min-width: 0;
}

.klp-sm-dash-section-head-text .klp-sm-dash-eyebrow {
	margin-bottom: 6px;
}

.klp-sm-dash-section-head-text .klp-sm-parent-panel-title {
	margin-top: 0;
}

.klp-sm-dash-section-head-text .klp-sm-dash-lead {
	margin-bottom: 0;
}

.klp-sm-dash-overview-card > .klp-sm-dash-section.klp-sm-dash-overview__section {
	margin-top: clamp(18px, 2.2vw, 26px);
	border-radius: calc(var(--klp-sm-radius-sm) + 3px);
	background: rgba(248, 250, 252, 0.92);
	border: 1px solid rgba(148, 163, 184, 0.32);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 0 rgba(255, 255, 255, 0.5);
}

.klp-sm-educator-panel .klp-sm-dash-overview__section.klp-sm-panel-body {
	margin-top: clamp(14px, 1.8vw, 20px);
	padding-top: clamp(16px, 2vw, 22px);
	border-top: 1px solid rgba(226, 232, 240, 0.95);
}

@media (max-width: 520px) {
	.klp-sm-dash-overview__stats {
		grid-template-columns: 1fr;
	}

	/* --tri row is flex from ≤782px; tighten gap on very narrow screens */
	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri {
		gap: 10px;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat {
		padding: 12px 12px;
		gap: 10px;
		min-height: 0;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat-icon,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat-icon {
		width: 38px;
		height: 38px;
		background-size: 19px 19px;
	}
}

.klp-sm-dash-meta {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 0.9rem;
}

.klp-sm-dash-meta-label {
	color: var(--klp-sm-muted);
	font-weight: 500;
}

.klp-sm-dash-meta-value {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--klp-sm-accent-soft);
	color: var(--klp-sm-primary-dark);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.06em;
}

.klp-sm-dash-meta-block {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.klp-sm-dash-meta-block .klp-sm-dash-meta-value {
	display: block;
	width: 100%;
	max-width: 48rem;
	border-radius: var(--klp-sm-radius-sm);
	font-weight: 500;
	letter-spacing: normal;
	white-space: pre-wrap;
}

.klp-sm-dash-notice {
	margin-top: 18px;
}

.klp-sm-dash-child-consent {
	margin-top: 16px;
}

.klp-sm-dash-section {
	padding: 22px 20px 24px;
	background: #fafbfc;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: var(--klp-sm-shadow-soft);
}

.klp-sm-dash-section-accent {
	background: linear-gradient(145deg, #f8fafc 0%, #eff6ff 55%, #f0f9ff 100%);
	border-color: #c7d2fe;
}

.klp-sm-dash-section-head {
	margin-bottom: 16px;
}

.klp-sm-dash-section-head h3 {
	margin: 0 0 6px;
	font-size: 1.12rem;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-dash-section-desc {
	margin: 0;
	font-size: 0.9rem;
	color: var(--klp-sm-muted);
	line-height: 1.5;
	max-width: 60ch;
}

.klp-sm-dash-subheading {
	margin: 22px 0 8px;
	font-size: 1rem;
	font-weight: 700;
	color: var(--klp-sm-primary);
}

.klp-sm-dash-assign {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--klp-sm-border-strong);
}

.klp-sm-dash-grid .klp-sm-field {
	margin-bottom: 0;
}

.klp-sm-parent-dash .klp-sm-dash-form .klp-sm-field:last-of-type {
	margin-bottom: 0;
}

.klp-sm-dash-form-actions {
	margin-top: 20px;
	padding-top: 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.klp-sm-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 4px;
	border-radius: var(--klp-sm-radius-sm);
	max-width: 100%;
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
}

/* Parent dashboard tables: same horizontal-scroll affordance as educator workspace */
.klp-sm-parent-dash .klp-sm-table-scroll {
	border: 1px solid var(--klp-sm-border);
	background: linear-gradient(180deg, #fafbfc 0%, #fff 12%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.klp-sm-dash-table {
	margin-top: 0;
	margin-bottom: 0;
	min-width: 520px;
}

.klp-sm-dash-table td {
	vertical-align: middle;
}

.klp-sm-dash-col-action {
	display: flex;
	align-items: center;
	justify-content:center;
	white-space: normal;
}

.klp-sm-dash-child-actions {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	vertical-align: middle;
}

.klp-sm-dash-child-action {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	color: var(--klp-sm-primary-dark, #1d4ed8);
	text-decoration: none;
	white-space: nowrap;
}

.klp-sm-dash-child-action--edit:hover,
.klp-sm-dash-child-action--edit:focus-visible {
	text-decoration: underline;
	color: var(--klp-sm-accent, #2563eb);
}

.klp-sm-dash-child-action--delete {
	color: #b91c1c;
}

.klp-sm-dash-child-action--delete:hover,
.klp-sm-dash-child-action--delete:focus-visible {
	text-decoration: underline;
	color: #991b1b;
}

.klp-sm-dash-child-action:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--klp-sm-accent, #2563eb);
	border-radius: 4px;
}

.klp-sm-dash-child-action--delete:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(185, 28, 28, 0.45);
}

.klp-sm-dash-child-action-ic {
	display: inline-block;
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	opacity: 0.88;
}

.klp-sm-dash-child-action-ic--edit {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%232563eb' stroke-width='2'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
}

.klp-sm-dash-child-action--delete .klp-sm-dash-child-action-ic--delete {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23b91c1c' stroke-width='2'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
}

/* Form-level notices next to the form that produced them (parent add child / plans). */
.klp-sm-parent-panel .klp-sm-dash-form-notice {
	margin: 0 0 1rem;
}

.klp-sm-parent-edit-child-lead {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

.klp-sm-parent-child-profile-slot + .klp-sm-parent-child-profile-slot {
	margin-top: 1.5rem;
}

.klp-sm-dash-cell-user {
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
	font-variant-numeric: tabular-nums;
}

.klp-sm-dash-grade {
	font-weight: 600;
	color: var(--klp-sm-text);
}

.klp-sm-dash-plan-code {
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-badge {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	white-space: nowrap;
}

.klp-sm-badge-success {
	background: #dcfce7;
	color: #166534;
}

.klp-sm-badge-warn {
	background: #fef9c3;
	color: #854d0e;
}

.klp-sm-badge-danger {
	background: #fee2e2;
	color: #991b1b;
}

.klp-sm-badge-neutral {
	background: #e2e8f0;
	color: #475569;
}

.klp-sm-dash-empty {
	text-align: center;
	padding: 28px 20px 26px;
	border: 1px dashed var(--klp-sm-border-strong);
	border-radius: var(--klp-sm-radius-sm);
	background: #fff;
}

.klp-sm-dash-empty-muted {
	background: #f8fafc;
}

.klp-sm-dash-empty-title {
	margin: 0 0 8px;
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-dash-empty-text {
	margin: 0;
	font-size: 0.92rem;
	color: var(--klp-sm-muted);
	line-height: 1.55;
	max-width: 42ch;
	margin-left: auto;
	margin-right: auto;
}

/* WordPress core login form inside plugin (stacked fields, full-width inputs, primary CTA) */
.klp-sm-wrap .klp-sm-login-wrap {
	width: 100%;
	max-width: 100%;
}

.klp-sm-card-login .klp-sm-login-wrap {
	padding: 22px 22px 24px;
	margin-top: 4px;
	text-align: left;
	background: #fff;
	border: 1px solid var(--klp-sm-border);
	border-radius: var(--klp-sm-radius-sm);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.klp-sm-wrap .klp-sm-login-wrap form {
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	border: none;
	box-shadow: none;
	background: transparent;
	width: 100%;
	max-width: 100%;
}

.klp-sm-wrap .klp-sm-login-wrap form p {
	margin: 0 0 20px;
}

.klp-sm-wrap .klp-sm-login-wrap form p:last-of-type {
	margin-bottom: 0;
}

/* Core markup: <p class="login-username|login-password"> — stack label above field (overrides wp-login inline layouts) */
.klp-sm-wrap .klp-sm-login-wrap form p.login-username,
.klp-sm-wrap .klp-sm-login-wrap form p.login-password {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}

.klp-sm-wrap .klp-sm-login-wrap form p.login-username br,
.klp-sm-wrap .klp-sm-login-wrap form p.login-password br {
	display: none;
}

.klp-sm-wrap .klp-sm-login-wrap form .user-pass-wrap {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: 100%;
}

.klp-sm-wrap .klp-sm-login-wrap form p.submit {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	margin: 18px 0 0;
}

.klp-sm-wrap .klp-sm-login-wrap form label {
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: var(--klp-sm-primary-dark);
	display: block;
	width: 100%;
	margin: 0 0 8px;
	line-height: 1.35;
	float: none;
	text-align: left;
}

.klp-sm-wrap .klp-sm-login-wrap form input[type="text"],
.klp-sm-wrap .klp-sm-login-wrap form input[type="password"],
.klp-sm-wrap .klp-sm-login-wrap form input[type="email"],
.klp-sm-wrap .klp-sm-login-wrap form input.input,
.klp-sm-wrap .klp-sm-login-wrap form input#user_login,
.klp-sm-wrap .klp-sm-login-wrap form input#user_pass {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 13px 15px;
	border: 1px solid var(--klp-sm-border-strong);
	border-radius: var(--klp-sm-radius-sm);
	background: var(--klp-sm-input-bg-rest);
	font-size: 1rem;
	line-height: 1.35;
	box-sizing: border-box;
	float: none;
	appearance: none;
	-webkit-appearance: none;
	color: var(--klp-sm-text);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.klp-sm-wrap .klp-sm-login-wrap form input[type="text"]:hover,
.klp-sm-wrap .klp-sm-login-wrap form input[type="password"]:hover,
.klp-sm-wrap .klp-sm-login-wrap form input.input:hover,
.klp-sm-wrap .klp-sm-login-wrap form input#user_login:hover,
.klp-sm-wrap .klp-sm-login-wrap form input#user_pass:hover {
	border-color: var(--klp-sm-accent);
	background: #fff;
}

.klp-sm-wrap .klp-sm-login-wrap form input[type="text"]:focus,
.klp-sm-wrap .klp-sm-login-wrap form input[type="password"]:focus,
.klp-sm-wrap .klp-sm-login-wrap form input.input:focus,
.klp-sm-wrap .klp-sm-login-wrap form input#user_login:focus,
.klp-sm-wrap .klp-sm-login-wrap form input#user_pass:focus {
	outline: none;
	border-color: var(--klp-sm-accent);
	box-shadow: var(--klp-sm-focus-ring);
	background: var(--klp-sm-input-bg);
}

.klp-sm-wrap .klp-sm-login-wrap form .forgetmenot {
	display: flex;
	justify-content: flex-start;
	font-weight: 400;
	font-size: 0.9rem;
	margin: 6px 0 0;
	padding: 16px 0 4px;
	clear: both;
	text-align: left;
}

.klp-sm-wrap .klp-sm-login-wrap form .forgetmenot label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
	color: var(--klp-sm-text);
	margin-bottom: 0;
	cursor: pointer;
	text-align: left;
}

.klp-sm-wrap .klp-sm-login-wrap form .forgetmenot input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
}

.klp-sm-wrap .klp-sm-login-wrap form input#wp-submit,
.klp-sm-wrap .klp-sm-login-wrap form input[type="submit"].button,
.klp-sm-wrap .klp-sm-login-wrap form input[type="submit"].button-primary,
.klp-sm-wrap .klp-sm-login-wrap form .button.button-primary {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 50px;
	margin-top: 6px;
	padding: 14px 22px;
	border-radius: 50px;
	border-style: none;
	background: #683fa0;
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.25;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(104, 63, 160, 0.28);
	appearance: none;
	-webkit-appearance: none;
	text-shadow: none;
	transition:
		filter 0.15s ease,
		box-shadow 0.15s ease,
		background-color 0.15s ease;
}

.klp-sm-wrap .klp-sm-login-wrap form input#wp-submit:hover,
.klp-sm-wrap .klp-sm-login-wrap form input[type="submit"].button:hover,
.klp-sm-wrap .klp-sm-login-wrap form .button.button-primary:hover {
	filter: brightness(1.05);
	box-shadow: 0 4px 14px rgba(104, 63, 160, 0.35);
}

.klp-sm-wrap .klp-sm-login-wrap form input#wp-submit:focus-visible,
.klp-sm-wrap .klp-sm-login-wrap form input[type="submit"].button:focus-visible,
.klp-sm-wrap .klp-sm-login-wrap form .button.button-primary:focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px rgba(104, 63, 160, 0.55),
		0 2px 10px rgba(104, 63, 160, 0.28);
}

.klp-sm-wrap .klp-sm-login-wrap form #nav {
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--klp-sm-border);
	font-size: 0.9rem;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	justify-content: flex-start;
}

.klp-sm-wrap .klp-sm-login-wrap form #backtoblog {
	margin: 10px 0 0;
	font-size: 0.9rem;
	text-align: left;
}

.klp-sm-wrap .klp-sm-login-wrap form #nav a,
.klp-sm-wrap .klp-sm-login-wrap form #backtoblog a {
	color: var(--klp-sm-accent);
	font-weight: 600;
	text-decoration: none;
}

.klp-sm-wrap .klp-sm-login-wrap form #nav a:hover,
.klp-sm-wrap .klp-sm-login-wrap form #backtoblog a:hover {
	text-decoration: underline;
	color: var(--klp-sm-primary-dark);
}

/* --- Responsive layout (mobile-first additions) --- */

@media (max-width: 960px) {
	.klp-sm-parent-dash {
		max-width: 100%;
	}

	.klp-sm-card {
		border-radius: 14px;
	}
}

@media (max-width: 782px) {
	.klp-sm-wrap {
		margin: 24px auto;
		padding: 24px max(14px, env(safe-area-inset-right)) 40px max(14px, env(safe-area-inset-left));
	}

	.klp-sm-card {
		padding: 26px 22px 30px;
	}

	.klp-sm-dash-section-head--icon {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.klp-sm-dash-section-head--icon .klp-sm-dash-overview__section-icon {
		align-self: flex-start;
	}

	.klp-sm-profile-tablist {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		padding-bottom: 6px;
		margin-right: -4px;
		margin-left: -4px;
		padding-left: 4px;
		padding-right: 4px;
		scrollbar-width: thin;
		gap: 6px;
	}

	.klp-sm-profile-tab-label {
		scroll-snap-align: start;
		flex-shrink: 0;
		margin-right: 0;
	}

	.klp-sm-edu-invite-dl > div {
		grid-template-columns: 1fr;
		gap: 4px 0;
	}

	.klp-sm-parent-dash-subscription-alert .klp-sm-button,
	.klp-sm-parent-dash-subscription-alert .klp-sm-button-outline {
		display: inline-flex;
		width: 100%;
		max-width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}

	/* iOS: avoid auto-zoom on field focus (common down to ~414px width) */
	.klp-sm-wrap .klp-sm-form input[type="text"],
	.klp-sm-wrap .klp-sm-form input[type="email"],
	.klp-sm-wrap .klp-sm-form input[type="password"],
	.klp-sm-wrap .klp-sm-form input[type="number"],
	.klp-sm-wrap .klp-sm-form input[type="tel"],
	.klp-sm-wrap .klp-sm-form input[type="url"],
	.klp-sm-wrap .klp-sm-form select,
	.klp-sm-wrap .klp-sm-form textarea,
	.klp-sm-student-flow .klp-sm-field select,
	.klp-sm-student-flow .klp-sm-field input[type="email"],
	.klp-sm-student-flow .klp-sm-field input[type="password"],
	.klp-sm-student-flow .klp-sm-field input[type="text"],
	.klp-sm-student-flow .klp-sm-field input[type="tel"] {
		font-size: 16px;
	}

	.klp-sm-wrap .klp-sm-login-wrap form input#user_login,
	.klp-sm-wrap .klp-sm-login-wrap form input#user_pass,
	.klp-sm-wrap .klp-sm-login-wrap form input[type="text"],
	.klp-sm-wrap .klp-sm-login-wrap form input[type="password"],
	.klp-sm-wrap .klp-sm-login-wrap form input[type="email"] {
		font-size: 16px;
	}

	.klp-sm-form-actions-student {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.klp-sm-grid,
	.klp-sm-grid-2 {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.klp-sm-form-head {
		margin-bottom: 20px;
		padding-bottom: 16px;
	}

	.klp-sm-panel-body {
		padding: 22px 20px 24px;
	}

	.klp-sm-dash-section {
		padding: 20px 18px 22px;
	}

	.klp-sm-dash-header h2 {
		font-size: clamp(1.35rem, 4vw + 0.5rem, 1.85rem);
	}

	.klp-sm-modal-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.klp-sm-modal-actions .klp-sm-button {
		width: 100%;
		justify-content: center;
	}

	.klp-sm-table th,
	.klp-sm-table td {
		padding: 10px 12px;
		font-size: 0.9rem;
		
	}

	.klp-sm-nav-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.klp-sm-form-actions-parent .klp-sm-button,
	.klp-sm-form-actions-educator .klp-sm-button {
		width: 100%;
	}

	.klp-sm-educator-nav-brand-title,
	.klp-sm-educator-nav-brand-sub {
		overflow-wrap: anywhere;
	}
}

@media (max-width: 640px) {
	.klp-sm-form-approval > .klp-sm-button[type="submit"] {
		width: 100%;
		max-width: 100%;
	}

	.klp-sm-dash-form-actions {
		flex-direction: column;
		align-items: stretch;
	}

	.klp-sm-dash-form-actions .klp-sm-button {
		width: 100%;
		justify-content: center;
	}

	.klp-sm-choice {
		min-height: 0;
		padding: 18px 18px 20px;
	}

	.klp-sm-table .klp-sm-button-secondary,
	.klp-sm-table-scroll .klp-sm-button-secondary {
		width: auto;
		min-width: 0;
	}

	.klp-sm-button-secondary {
		width: 100%;
		justify-content: center;
	}

	.klp-sm-badge {
		max-width: 100%;
		white-space: normal;
		text-align: center;
		justify-content: center;
	}

	.klp-sm-dash-child-action {
		white-space: normal;
	}

	.klp-sm-educator-invite-cell {
		min-width: 0;
		max-width: none;
	}
}

@media (max-width: 480px) {
	.klp-sm-card {
		padding: 22px 16px 24px;
		border-radius: 12px;
	}

	/* Full-width CTAs in forms and dashboard footers — not every chip inside wide tables */
	.klp-sm-form-actions .klp-sm-button,
	.klp-sm-form-actions-parent .klp-sm-button,
	.klp-sm-form-actions-educator .klp-sm-button,
	.klp-sm-form-actions-student .klp-sm-button,
	.klp-sm-dash-form-actions .klp-sm-button,
	.klp-sm-nav-actions .klp-sm-button,
	.klp-sm-modal-actions .klp-sm-button,
	.klp-sm-educator-footer-nav .klp-sm-inline-link,
	.klp-sm-educator-quick-nav .klp-sm-educator-quick-link,
	.klp-sm-parent-class-code-trigger-wrap .klp-sm-button {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.klp-sm-form-actions-student .klp-sm-button {
		min-width: 0;
	}

	.klp-sm-table .klp-sm-button,
	.klp-sm-table .klp-sm-button-outline,
	.klp-sm-table .klp-sm-button-compact,
	.klp-sm-table-scroll .klp-sm-button,
	.klp-sm-table-scroll .klp-sm-button-outline,
	.klp-sm-table-scroll .klp-sm-button-compact {
		width: auto;
		max-width: 100%;
		min-height: 40px;
	}

	.klp-sm-panel-body {
		padding: 18px 14px 20px;
	}

	.klp-sm-wrap {
		margin: 16px auto;
		padding: 16px max(12px, env(safe-area-inset-right)) 32px max(12px, env(safe-area-inset-left));
	}

	.klp-sm-wrap h3 {
		font-size: 1rem;
	}

	.klp-sm-section-title {
		margin-top: 22px;
	}

	.klp-sm-dash-table {
		font-size: 0.875rem;
	}

	.klp-sm-table th,
	.klp-sm-table td {
		padding: 8px 10px;
	}

	.klp-sm-modal-dialog {
		padding: 20px 16px 18px;
		border-radius: 14px;
	}

	.klp-sm-wrap .klp-sm-card.klp-sm-card-login {
		max-width: calc(100vw - 24px);
	}

	.klp-sm-card-login .klp-sm-login-wrap {
		padding: 18px 16px 20px;
	}

	.klp-sm-wrap .klp-sm-login-wrap form input#wp-submit,
	.klp-sm-wrap .klp-sm-login-wrap form .button.button-primary {
		width: 100%;
	}

	.klp-sm-errors,
	.klp-sm-notice-success {
		padding: 14px 14px;
	}

	.klp-sm-table-scroll {
		touch-action: pan-x pan-y;
	}

	.klp-sm-educator-copy-row--compact {
		flex-wrap: wrap;
	}
}

@media (max-width: 360px) {
	.klp-sm-wrap {
		padding: 12px max(10px, env(safe-area-inset-right)) 28px max(10px, env(safe-area-inset-left));
	}

	.klp-sm-card {
		padding: 18px 12px 20px;
	}

	.klp-sm-form input[type="text"],
	.klp-sm-form input[type="email"],
	.klp-sm-form input[type="password"],
	.klp-sm-form input[type="number"],
	.klp-sm-form input[type="tel"],
	.klp-sm-form input[type="url"],
	.klp-sm-form select,
	.klp-sm-form textarea,
	.klp-sm-student-flow .klp-sm-field select,
	.klp-sm-student-flow .klp-sm-field input[type="email"],
	.klp-sm-student-flow .klp-sm-field input[type="password"],
	.klp-sm-student-flow .klp-sm-field input[type="text"],
	.klp-sm-student-flow .klp-sm-field input[type="tel"] {
		padding: 12px 13px;
		font-size: 16px; /* Reduces unwanted zoom on iOS */
	}
}

@media (prefers-reduced-motion: reduce) {
	.klp-sm-wrap * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.klp-sm-choice:hover {
		transform: none;
	}

	.klp-sm-educator-quick-link:hover {
		transform: none;
	}

	.klp-sm-educator-nav-item:hover {
		transform: none;
	}
}

/* --- Educator dashboard app shell --- */
body.klp-sm-educator-dashboard-page,
body.klp-sm-school-dashboard-page,
body.klp-sm-parent-dashboard-page,
body.klp-sm-student-dashboard-page {
	background-color: #eef2f7;
	background-image:
		radial-gradient(ellipse 120% 80% at 50% -20%, rgba(37, 99, 235, 0.09), transparent 55%),
		linear-gradient(180deg, #f8fafc 0%, #eef2f7 45%, #e8edf4 100%);
}

.klp-sm-wrap.klp-sm-educator-app {
	--klp-sm-edu-top-bg: rgba(255, 255, 255, 0.92);
	--klp-sm-edu-top-border: rgba(148, 163, 184, 0.35);
	max-width: min(var(--klp-sm-dash-max), 100%);
	width: 100%;
	min-width: 0;
	padding-top: 24px;
	padding-bottom: 64px;
	padding-left: max(0px, env(safe-area-inset-left));
	padding-right: max(0px, env(safe-area-inset-right));
	background: transparent;
	box-shadow: none;
}

.klp-sm-educator-shell {
	margin: 0;
}

.klp-sm-educator-shell-inner {
	display: grid;
	grid-template-columns: minmax(232px, 278px) minmax(0, 1fr);
	gap: clamp(22px, 3.2vw, 36px);
	align-items: start;
}

.klp-sm-educator-main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 22px;
}

/* Workspace title bar */
.klp-sm-educator-main-top {
	background: var(--klp-sm-edu-top-bg);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid var(--klp-sm-edu-top-border);
	border-radius: calc(var(--klp-sm-radius) + 4px);
	box-shadow:
		0 1px 2px rgba(15, 23, 42, 0.04),
		0 18px 44px rgba(15, 23, 42, 0.07),
		0 0 0 1px rgba(255, 255, 255, 0.75) inset;
	padding: 18px 22px 20px;
}

.klp-sm-educator-main-top-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
}

.klp-sm-educator-main-top-titles {
	min-width: 0;
	flex: 1 1 200px;
}

.klp-sm-educator-main-kicker {
	margin: 0 0 6px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--klp-sm-muted);
}

.klp-sm-educator-main-title {
	margin: 0;
	font-size: clamp(1.35rem, 0.55rem + 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.15;
	color: var(--klp-sm-primary-dark);
	overflow-wrap: anywhere;
}

.klp-sm-educator-main-top-user {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 14px 6px 6px;
	border-radius: 999px;
	background: linear-gradient(180deg, #fff 0%, #f1f5f9 100%);
	border: 1px solid var(--klp-sm-border-strong);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
	max-width: min(100%, 280px);
	min-width: 0;
}

.klp-sm-educator-main-top-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(145deg, #5a3590 0%, var(--klp-sm-btn-brand, #683fa0) 55%, #7c52c4 100%);
	box-shadow: 0 4px 14px rgba(104, 63, 160, 0.38);
	flex-shrink: 0;
}

.klp-sm-educator-main-top-name {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

.klp-sm-educator-main-inner {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-width: 0;
}

.klp-sm-educator-main-inner.klp-sm-parent-dash-main-inner {
	gap: 22px;
}

.klp-sm-educator-route {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.klp-sm-educator-route--single {
	gap: 0;
}

.klp-sm-educator-nav {
	background: linear-gradient(168deg, #ffffff 0%, #f8fafc 55%, #f1f5f9 100%);
	border: 1px solid rgba(148, 163, 184, 0.4);
	border-radius: calc(var(--klp-sm-radius) + 4px);
	padding: 22px 18px 24px;
	box-shadow:
		0 20px 44px rgba(15, 23, 42, 0.07),
		0 0 0 1px rgba(255, 255, 255, 0.75) inset;
	position: sticky;
	top: 16px;
}

.klp-sm-educator-nav-brand {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 22px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(226, 232, 240, 0.95);
}

.klp-sm-educator-nav-brand-mark {
	position: relative;
	flex-shrink: 0;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: linear-gradient(145deg, #5a3590 0%, var(--klp-sm-btn-brand, #683fa0) 50%, #7c52c4 100%);
	box-shadow:
		0 8px 22px rgba(104, 63, 160, 0.36),
		0 0 0 1px rgba(255, 255, 255, 0.22) inset;
}

.klp-sm-educator-nav-brand-mark-text {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	color: #fff;
	line-height: 1;
	text-shadow: 0 1px 1px rgba(15, 23, 42, 0.18);
}

.klp-sm-educator-nav-brand-mark::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35) 0%, transparent 42%);
	pointer-events: none;
}

.klp-sm-educator-nav-brand-text {
	min-width: 0;
}

.klp-sm-educator-nav-brand-title {
	display: block;
	font-weight: 800;
	font-size: 1.08rem;
	color: var(--klp-sm-primary-dark);
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.klp-sm-educator-nav-brand-sub {
	display: block;
	margin-top: 5px;
	font-size: 0.8125rem;
	color: var(--klp-sm-muted);
	line-height: 1.45;
}

.klp-sm-educator-nav-items {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.klp-sm-educator-nav-item {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 0;
	width: 100%;
	padding: 12px 18px 12px 16px;
	border-radius: 50px;
	font-weight: 600;
	font-size: 0.9rem;
	color: #683fa0;
	text-decoration: none;
	border-style: none;
	background: rgba(104, 63, 160, 0.14);
	transition:
		background var(--klp-sm-transition),
		color var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition),
		transform var(--klp-sm-transition);
}

.klp-sm-educator-nav-item::before {
	content: "";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	opacity: 0.92;
	transition: opacity var(--klp-sm-transition);
}

.klp-sm-educator-nav-item--route-home::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-invites::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M12 4v16m8-8H4'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-classes::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-students::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item:hover {
	background: rgba(104, 63, 160, 0.22);
	color: #683fa0;
	transform: none;
}

.klp-sm-educator-nav-item:hover::before {
	opacity: 1;
}

.klp-sm-educator-nav-item.is-active {
	background: #683fa0;
	color: #fff;
	box-shadow: 0 2px 12px rgba(104, 63, 160, 0.35);
	transform: none;
}

.klp-sm-educator-nav-item.is-active::before {
	opacity: 1;
}

.klp-sm-educator-nav-item--route-home.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-invites.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M12 4v16m8-8H4'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-classes.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-students.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--parent-plans::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--parent-school::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--parent-plans.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--parent-school.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-profile::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-profile.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--logout {
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid rgba(226, 232, 240, 0.95);
	background: rgba(148, 163, 184, 0.1);
	color: #475569;
}

.klp-sm-educator-nav-item--logout:hover {
	background: rgba(148, 163, 184, 0.18);
	color: #334155;
}

.klp-sm-educator-nav-item--logout::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--logout:hover::before {
	opacity: 1;
}

.klp-sm-educator-nav-item--route-plans::before,
.klp-sm-educator-nav-item--student-plans::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.klp-sm-educator-nav-item--route-plans.is-active::before,
.klp-sm-educator-nav-item--student-plans.is-active::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.2'%3E%3Cpath d='M3 10h18M7 15h1m4 0h1m-7 4h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.klp-sm-profile-tabs {
	margin-top: 0.35rem;
}

.klp-sm-profile-tab-sr {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
	pointer-events: none;
}

.klp-sm-profile-tab-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 20px 10px 16px;
	margin: 0 8px 0 0;
	border-radius: 50px;
	font-weight: 700;
	font-size: 0.875rem;
	color: #683fa0;
	background: rgba(104, 63, 160, 0.14);
	border-style: none;
	cursor: pointer;
	transition:
		background var(--klp-sm-transition),
		color var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition);
}

.klp-sm-profile-tab-label:hover {
	color: #683fa0;
	background: rgba(104, 63, 160, 0.22);
}

.klp-sm-profile-tab-ic {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	opacity: 0.75;
}

.klp-sm-profile-tab-ic--user {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z'/%3E%3C/svg%3E");
}

.klp-sm-profile-tab-ic--lock {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23683fa0' stroke-width='2'%3E%3Cpath d='M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z'/%3E%3C/svg%3E");
}

.klp-sm-profile-tablist {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 0.35rem;
}

.klp-sm-profile-tab-label:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(104, 63, 160, 0.45);
	border-radius: 50px;
}

.klp-sm-profile-panels {
	margin-top: 0.35rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.klp-sm-profile-panel--password {
	display: none;
}

.klp-sm-profile-pass-lead {
	margin: 0 0 1rem;
}

.klp-sm-educator-nav-item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(104, 63, 160, 0.45);
}

.klp-sm-educator-nav-item.is-active:focus-visible {
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px rgba(104, 63, 160, 0.5),
		0 2px 12px rgba(104, 63, 160, 0.35);
}

.klp-sm-educator-nav-badge {
	flex-shrink: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(104, 63, 160, 0.12);
	color: #683fa0;
}

.klp-sm-educator-nav-item.is-active .klp-sm-educator-nav-badge {
	background: rgba(255, 255, 255, 0.22);
	color: #fff;
}

.klp-sm-educator-panel.klp-sm-dash-card {
	margin: 0;
	padding: clamp(26px, 3vw, 34px) clamp(22px, 3vw, 36px) clamp(30px, 3vw, 40px);
	border-radius: calc(var(--klp-sm-radius) + 4px);
	border-color: rgba(148, 163, 184, 0.45);
	box-shadow:
		0 22px 50px rgba(15, 23, 42, 0.08),
		0 0 0 1px rgba(255, 255, 255, 0.65) inset;
	overflow: hidden;
	position: relative;
	isolation: isolate;
}

/* Educator + school workspace cards: brand top accent (overrides .klp-sm-card::before). */
.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	z-index: 2;
	pointer-events: none;
	border-radius: calc(var(--klp-sm-radius) + 4px) calc(var(--klp-sm-radius) + 4px) 0 0;
	background: linear-gradient(
		90deg,
		#4a2d7a 0%,
		#5a3590 22%,
		var(--klp-sm-btn-brand, #683fa0) 52%,
		#8f6bd4 100%
	);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.26),
		0 4px 14px rgba(104, 63, 160, 0.32);
	opacity: 1;
}

/* Slight lift under the accent so headers and forms read as one surface. */
.klp-sm-educator-app .klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-dash-header {
	position: relative;
	z-index: 1;
}

.klp-sm-educator-app .klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-panel-body {
	position: relative;
	z-index: 1;
}

/* Class invite form: align with card chrome. */
.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite {
	position: relative;
	z-index: 1;
}

.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite .klp-sm-field label {
	color: #1e293b;
}

.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite .klp-sm-dash-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 4px;
	padding-top: 20px;
	border-top: 1px solid rgba(226, 232, 240, 0.95);
	background: #fff;
	border-radius: 0 0 var(--klp-sm-radius-sm) var(--klp-sm-radius-sm);
}

.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite .klp-sm-dash-form-actions .klp-sm-button {
	min-width: min(100%, 200px);
}

.klp-sm-educator-app .klp-sm-educator-panel .klp-sm-dash-header {
	padding: 4px 4px 22px;
	margin: 0 0 8px;
	border-bottom: 1px solid rgba(226, 232, 240, 0.95);
	background: linear-gradient(180deg, rgba(248, 250, 252, 0.9) 0%, rgba(255, 255, 255, 0) 88%);
	border-radius: 6px 6px 0 0;
}

.klp-sm-educator-app .klp-sm-educator-panel .klp-sm-dash-header h2 {
	font-size: clamp(1.2rem, 0.4rem + 2vw, 1.48rem);
	letter-spacing: -0.025em;
}

.klp-sm-educator-app .klp-sm-educator-panel .klp-sm-dash-lead {
	max-width: 58rem;
	line-height: 1.62;
	color: #475569;
}

.klp-sm-educator-app .klp-sm-educator-panel .klp-sm-panel-body {
	background: #fff;
	border-color: rgba(203, 213, 225, 0.85);
	box-shadow: 0 8px 28px rgba(15, 23, 42, 0.05);
	border-radius: calc(var(--klp-sm-radius-sm) + 2px);
}

.klp-sm-educator-profile-card {
	margin-top: 18px;
	padding: 16px 18px;
	border-radius: var(--klp-sm-radius-sm);
	border: 1px solid var(--klp-sm-border);
	background: #fff;
	box-shadow: var(--klp-sm-shadow-soft);
}

.klp-sm-educator-profile-card .klp-sm-dash-meta {
	margin: 0 0 10px;
}

.klp-sm-educator-profile-card .klp-sm-dash-meta:last-child {
	margin-bottom: 0;
}

.klp-sm-educator-created-card {
	border-radius: var(--klp-sm-radius-sm);
	border: 1px solid #bbf7d0;
	border-left-width: 4px;
	border-left-color: #22c55e;
	box-shadow: var(--klp-sm-shadow-soft);
}

.klp-sm-educator-empty.klp-sm-dash-empty {
	margin-top: 8px;
}

@media (min-width: 720px) {
	.klp-sm-educator-invite-form-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 22px;
		row-gap: 20px;
		align-items: start;
	}

	.klp-sm-educator-invite-form-grid .klp-sm-field {
		margin-bottom: 0;
		margin-top: 0;
	}
}

@media (max-width: 782px) {
	.klp-sm-educator-shell-inner {
		grid-template-columns: 1fr;
		min-width: 0;
	}

	/* Workspace strip (kicker + route title + user pill): hidden on small screens — sidebar + card header give context */
	.klp-sm-educator-app .klp-sm-educator-main-top {
		display: none;
	}

	/* Educator/school overview (--tri): single horizontal row; swipe to see all cards */
	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri {
		display: flex;
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 12px;
		width: 100%;
		min-width: 0;
		max-width: 100%;	
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		scroll-snap-type: x proximity;
		scroll-padding-inline: max(2px, env(safe-area-inset-left)) max(2px, env(safe-area-inset-right));
		padding: 4px 0 12px;
		margin-left: 0;
		margin-right: 0;
		scrollbar-width: thin;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri::-webkit-scrollbar,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri::-webkit-scrollbar {
		height: 5px;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri::-webkit-scrollbar-thumb,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.75);
		border-radius: 999px;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat {
		flex: 0 0 auto;
		width: min(260px, calc(100vw - 56px));
		min-width: min(240px, calc(100vw - 48px));
		max-width: min(280px, calc(100vw - 40px));
		scroll-snap-align: start;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat:nth-child(3),
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat:nth-child(3) {
		grid-column: unset;
	}

	/* Grid items default to min-width:auto; allow aside to shrink so inner nav can overflow-x scroll. */
	.klp-sm-educator-shell-inner > aside.klp-sm-educator-nav {
		min-width: 0;
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.klp-sm-educator-nav {
		position: static;
		top: auto;
		padding-bottom: 14px;
		min-width: 0;
		max-width: 100%;
	}

	.klp-sm-educator-nav-list {
		display: block;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
		touch-action: pan-x pan-y;
		scroll-snap-type: x proximity;
		scroll-padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right));
		margin: 0 -4px;
		padding: 2px 4px 10px;
		scrollbar-width: thin;
	}

	.klp-sm-educator-nav-list::-webkit-scrollbar {
		height: 6px;
	}

	.klp-sm-educator-nav-list::-webkit-scrollbar-track {
		background: rgba(241, 245, 249, 0.9);
		border-radius: 999px;
	}

	.klp-sm-educator-nav-list::-webkit-scrollbar-thumb {
		background: rgba(148, 163, 184, 0.85);
		border-radius: 999px;
	}

	.klp-sm-educator-nav-list::-webkit-scrollbar-thumb:hover {
		background: rgba(100, 116, 139, 0.95);
	}

	.klp-sm-educator-nav-items {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 10px;
		width: max-content;
		max-width: none;
		padding-bottom: 2px;
	}

	.klp-sm-educator-nav-items > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	.klp-sm-educator-nav-item {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		padding: 12px 20px;
		min-height: 44px;
		width: auto;
	}

	.klp-sm-educator-nav-item::before {
		display: none;
	}

	.klp-sm-educator-nav-item:hover {
		transform: none;
	}

	.klp-sm-educator-nav-item.is-active {
		background: #683fa0;
		color: #fff;
		box-shadow: 0 2px 12px rgba(104, 63, 160, 0.3);
	}

	.klp-sm-wrap.klp-sm-educator-app {
		padding-left: max(12px, env(safe-area-inset-left));
		padding-right: max(12px, env(safe-area-inset-right));
		padding-top: 16px;
		padding-bottom: 48px;
	}

	.klp-sm-educator-panel.klp-sm-dash-card {
		padding: clamp(18px, 4vw, 28px) clamp(14px, 4vw, 24px) clamp(22px, 4vw, 34px);
	}

	.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite .klp-sm-dash-form-actions {
		justify-content: stretch;
	}

	.klp-sm-card.klp-sm-dash-card.klp-sm-educator-panel .klp-sm-form-educator-invite .klp-sm-dash-form-actions .klp-sm-button {
		flex: 1 1 auto;
		min-width: 0;
		width: 100%;
	}
}

@media (max-width: 782px) and (prefers-reduced-motion: reduce) {
	.klp-sm-educator-nav-list {
		scroll-snap-type: none;
	}

	.klp-sm-educator-nav-items > li {
		scroll-snap-align: unset;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri {
		scroll-snap-type: none;
	}

	.klp-sm-dash-overview--educator .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat,
	.klp-sm-dash-overview--school .klp-sm-dash-overview__stats--tri .klp-sm-dash-overview__stat {
		scroll-snap-align: unset;
	}
}

@media (max-width: 640px) {
	.klp-sm-educator-actions-stack {
		flex-direction: column;
		align-items: center;
		max-width: none;
	}

	.klp-sm-educator-actions-stack > .klp-sm-educator-email-invite-open,
	.klp-sm-educator-actions-stack > .klp-sm-educator-action-form {
		flex: 0 1 auto;
		width: auto;
		max-width: 100%;
	}

	.klp-sm-educator-created-fields .klp-sm-educator-copy-row {
		flex-direction: column;
		align-items: stretch;
	}

	.klp-sm-educator-created-fields .klp-sm-educator-copy-row .klp-sm-button-outline {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 480px) {
	.klp-sm-educator-app .klp-sm-educator-panel .klp-sm-dash-lead {
		font-size: 0.92rem;
		line-height: 1.55;
	}

	.klp-sm-educator-main-title {
		font-size: 1.25rem;
	}
}

/* --- Educator class invites (Phase 3) --- */
.klp-sm-educator-invites-notice {
	margin-bottom: 20px;
}

.klp-sm-educator-profile-notice {
	margin: 0 0 20px;
	padding: 12px 16px;
	border-radius: var(--klp-sm-radius-sm);
	font-size: 0.92rem;
}

.klp-sm-educator-app .klp-sm-educator-profile-notice.klp-sm-notice-success {
	border: 1px solid #bbf7d0;
	background: linear-gradient(180deg, #f0fdf4 0%, #fff 100%);
}

.klp-sm-educator-app .klp-sm-educator-profile-notice.klp-sm-errors {
	border: 1px solid #fecaca;
	background: linear-gradient(180deg, #fef2f2 0%, #fff 100%);
}

.klp-sm-educator-app .klp-sm-dash-header .klp-sm-dash-eyebrow {
	color: var(--klp-sm-btn-brand, #683fa0);
	letter-spacing: 0.11em;
}

.klp-sm-educator-created-title {
	margin: 0 0 10px;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-educator-created-fields {
	margin-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.klp-sm-educator-copy-row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 10px;
}

.klp-sm-educator-copy-row--compact {
	flex-wrap: nowrap;
}

.klp-sm-input-readonly {
	flex: 1 1 220px;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--klp-sm-border-strong);
	border-radius: var(--klp-sm-radius-sm);
	background: #fff;
	color: var(--klp-sm-text);
	font-size: 0.9rem;
}

.klp-sm-educator-invite-form-wrap {
	padding-top: 8px;
}

.klp-sm-form-educator-invite .klp-sm-field {
	margin-bottom: 18px;
}

.klp-sm-educator-code {
	font-size: 0.9rem;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--klp-sm-input-bg-rest);
	border: 1px solid var(--klp-sm-border);
}

.klp-sm-educator-invite-cell {
	min-width: 0;
	max-width: none;
	vertical-align: middle;
	text-align: center;
}

.klp-sm-educator-invite-cell .klp-sm-button {
	display: inline-flex;
	width: auto;
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
	white-space: nowrap;
	justify-content: center;
	margin-inline: auto;
}

.klp-sm-educator-invites-table-card {
	margin-top: 24px;
}

.klp-sm-inline-link {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--klp-sm-accent);
}

.klp-sm-inline-link:hover {
	color: var(--klp-sm-primary-dark);
	text-decoration-thickness: 2px;
}

.klp-sm-inline-link:focus-visible {
	outline: none;
	border-radius: 4px;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--klp-sm-accent);
}

/* Educator: bottom-of-panel navigation */
.klp-sm-educator-footer-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--klp-sm-border);
}

.klp-sm-educator-footer-nav .klp-sm-inline-link {
	text-decoration: none;
	border-bottom: none;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
	background: rgba(255, 255, 255, 0.85);
	border: 1px solid var(--klp-sm-border-strong);
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition:
		color var(--klp-sm-transition),
		border-color var(--klp-sm-transition),
		background var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition);
}

.klp-sm-educator-footer-nav .klp-sm-inline-link:hover {
	border-color: var(--klp-sm-accent);
	color: var(--klp-sm-accent);
	background: #fff;
	box-shadow: var(--klp-sm-shadow-soft);
}

.klp-sm-educator-footer-nav .klp-sm-inline-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--klp-sm-accent);
}

.klp-sm-educator-invites-next {
	margin: 0;
	padding-top: 4px;
}

.klp-sm-educator-invites-next.klp-sm-educator-footer-nav {
	padding-top: 16px;
}

/* Overview quick links */
.klp-sm-educator-quick-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid rgba(226, 232, 240, 0.95);
}

.klp-sm-educator-quick-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 20px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.875rem;
	text-decoration: none;
	color: var(--klp-sm-primary-dark);
	background: #fff;
	border: 1px solid rgba(148, 163, 184, 0.45);
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
	transition:
		background var(--klp-sm-transition),
		border-color var(--klp-sm-transition),
		color var(--klp-sm-transition),
		box-shadow var(--klp-sm-transition),
		transform var(--klp-sm-transition);
}

.klp-sm-educator-quick-link:hover {
	background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
	border-color: var(--klp-sm-accent);
	color: var(--klp-sm-accent);
	box-shadow: 0 10px 28px rgba(37, 99, 235, 0.12);
	transform: translateY(-1px);
}

.klp-sm-educator-quick-link:focus-visible {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--klp-sm-accent);
}

/* Class invites table: clearer chrome + copy row */
.klp-sm-educator-app .klp-sm-table-scroll {
	border: 1px solid var(--klp-sm-border);
	background: linear-gradient(180deg, #fafbfc 0%, #fff 12%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
	overscroll-behavior-x: contain;
	scrollbar-gutter: stable;
}

/* Class invites: wrap + scroll region must shrink inside grid/flex (min-width:0) and clip overflow to the scroll bar. */
.klp-sm-educator-classes-table-wrap {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	padding-top: 8px;
	/* Fixed % columns must track *this* width (main column), not viewport — avoids squish beside the sidebar. */
	container-type: inline-size;
	container-name: klp-sm-class-invites;
}

.klp-sm-educator-classes-table-wrap .klp-sm-table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	/* Horizontal (and rare vertical) overflow so wide/tall rows stay inside the card. */
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: var(--klp-sm-radius-sm);
	scrollbar-gutter: stable;
}

/*
 * Intrinsic-width table: beats fixed % columns that were too narrow and let buttons overlap neighbors.
 * width: max-content grows with columns; min-width: 100% fills wide viewports; overflow-x on parent scrolls when needed.
 */
.klp-sm-educator-classes-table.klp-sm-dash-table {
	table-layout: auto;
	width: max-content;
	min-width: max(100%, 54rem);
	border-collapse: collapse;
}

.klp-sm-educator-classes-table th,
.klp-sm-educator-classes-table td {
	word-break: normal;
	overflow-wrap: break-word;
	line-height: 1.45;
	vertical-align: middle;
	padding: 10px 12px;
}

.klp-sm-educator-classes-table .klp-sm-educator-invite-cell,
.klp-sm-educator-classes-table .klp-sm-educator-actions-cell {
	overflow-wrap: normal;
	word-break: normal;
	overflow: visible;
}

/* Column floors: smaller than before so the table often fits the card; scroll only when still needed. */
.klp-sm-educator-classes-table th:nth-child(1),
.klp-sm-educator-classes-table td:nth-child(1) {
	min-width: 6.5rem;
	max-width: 16rem;
}

.klp-sm-educator-classes-table th:nth-child(2),
.klp-sm-educator-classes-table td:nth-child(2) {
	min-width: 3.25rem;
}

.klp-sm-educator-classes-table th:nth-child(3),
.klp-sm-educator-classes-table td:nth-child(3) {
	min-width: 8.5rem;
	max-width: 20rem;
}

.klp-sm-educator-classes-table th:nth-child(4),
.klp-sm-educator-classes-table td:nth-child(4) {
	min-width: 4.75rem;
}

.klp-sm-educator-classes-table th:nth-child(5),
.klp-sm-educator-classes-table td:nth-child(5) {
	min-width: 7.5rem;
}

.klp-sm-educator-classes-table td:nth-child(5) {
	white-space: nowrap;
}

.klp-sm-educator-classes-table td:nth-child(5) .klp-sm-educator-code {
	display: inline-block;
	word-break: normal;
	white-space: nowrap;
	max-width: none;
}

.klp-sm-educator-classes-table th:nth-child(6),
.klp-sm-educator-classes-table td:nth-child(6) {
	min-width: 7.75rem;
}

.klp-sm-educator-classes-table th:nth-child(7),
.klp-sm-educator-classes-table td:nth-child(7) {
	min-width: 5.25rem;
}

.klp-sm-educator-classes-table th:nth-child(8),
.klp-sm-educator-classes-table td:nth-child(8) {
	min-width: 15rem;
}

.klp-sm-educator-classes-table th {
	font-size: 0.72rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--klp-sm-muted);
	font-weight: 700;
	line-height: 1.3;
	hyphens: none;
	white-space: nowrap;
}

.klp-sm-educator-classes-table tbody tr:hover td {
	background: rgba(104, 63, 160, 0.05);
}

.klp-sm-educator-classes-table tbody td:first-child {
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
}

/*
 * Wide *content* area only: fixed layout + % columns. Viewport ≥1100px was wrong with the sidebar —
 * the main column stayed narrow and columns overlapped. Use container width on the wrap instead.
 */
@container klp-sm-class-invites (min-width: 1024px) {
	.klp-sm-educator-classes-table.klp-sm-dash-table {
		table-layout: fixed;
		width: 100%;
		min-width: 0;
	}

	.klp-sm-educator-classes-table th,
	.klp-sm-educator-classes-table td {
		min-width: 0;
	}

	/* Restore floors so Copy / action pills never collapse into neighbors (min-width:0 above). */
	.klp-sm-educator-classes-table th:nth-child(6),
	.klp-sm-educator-classes-table td:nth-child(6) {
		min-width: 8rem;
	}

	.klp-sm-educator-classes-table th:nth-child(8),
	.klp-sm-educator-classes-table td:nth-child(8) {
		min-width: 15rem;
	}

	/* Clip long text to the cell; keep invite/actions overflow visible for pill buttons. */
	.klp-sm-educator-classes-table td:not(.klp-sm-educator-invite-cell):not(.klp-sm-educator-actions-cell) {
		overflow: hidden;
	}

	.klp-sm-educator-classes-table th {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	/* Class name: single-line ellipsis. Course wraps inside the fixed column. */
	.klp-sm-educator-classes-table td:nth-child(1) {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.klp-sm-educator-classes-table td:nth-child(3) {
		overflow: hidden;
		overflow-wrap: break-word;
		word-break: break-word;
	}

	.klp-sm-educator-classes-table th:nth-child(1),
	.klp-sm-educator-classes-table td:nth-child(1) {
		width: 13%;
		max-width: none;
	}

	.klp-sm-educator-classes-table th:nth-child(2),
	.klp-sm-educator-classes-table td:nth-child(2) {
		width: 7%;
	}

	.klp-sm-educator-classes-table th:nth-child(3),
	.klp-sm-educator-classes-table td:nth-child(3) {
		width: 17%;
		max-width: none;
	}

	.klp-sm-educator-classes-table th:nth-child(4),
	.klp-sm-educator-classes-table td:nth-child(4) {
		width: 9%;
	}

	.klp-sm-educator-classes-table th:nth-child(5),
	.klp-sm-educator-classes-table td:nth-child(5) {
		width: 15%;
	}

	.klp-sm-educator-classes-table th:nth-child(6),
	.klp-sm-educator-classes-table td:nth-child(6) {
		width: 9%;
	}

	.klp-sm-educator-classes-table th:nth-child(7),
	.klp-sm-educator-classes-table td:nth-child(7) {
		width: 8%;
	}

	.klp-sm-educator-classes-table th:nth-child(8),
	.klp-sm-educator-classes-table td:nth-child(8) {
		width: 22%;
	}

	.klp-sm-educator-classes-table td:nth-child(5) .klp-sm-educator-code {
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

@media (max-width: 600px) {
	.klp-sm-educator-classes-table th,
	.klp-sm-educator-classes-table td {
		padding: 10px 10px;
	}

	.klp-sm-educator-classes-table th {
		font-size: 0.68rem;
		letter-spacing: 0.04em;
	}
}

.klp-sm-educator-students-table tbody td:first-child {
	font-weight: 600;
	color: var(--klp-sm-primary-dark);
}

.klp-sm-educator-copy-row .klp-sm-button-outline {
	flex-shrink: 0;
	white-space: nowrap;
	min-height: 40px;
}

.klp-sm-educator-app .klp-sm-button-compact {
	min-height: 40px;
}

/* Class invites table: compact pills (no default 14px×28px padding stretch). */
.klp-sm-educator-classes-table .klp-sm-button.klp-sm-button-compact {
	padding: 6px 12px;
	font-size: 0.8125rem;
	min-height: 34px;
	line-height: 1.2;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

.klp-sm-educator-students-table {
	min-width: 640px;
}

.klp-sm-educator-students-table th {
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--klp-sm-muted);
	font-weight: 700;
}

.klp-sm-educator-students-table tbody tr:hover td {
	background: rgba(37, 99, 235, 0.04);
}

/* Educator: overview school profile summary + modal */
.klp-sm-educator-profile-heading-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	margin: 0 0 8px;
}

.klp-sm-educator-profile-heading {
	margin: 0;
	flex: 1 1 auto;
	min-width: 0;
}

.klp-sm-educator-profile-summary {
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.klp-sm-educator-profile-summary-row {
	display: grid;
	grid-template-columns: minmax(100px, 140px) 1fr;
	gap: 8px 20px;
	align-items: start;
	padding: 12px 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.klp-sm-educator-profile-summary-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.klp-sm-educator-profile-summary dt {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--klp-sm-muted);
}

.klp-sm-educator-profile-summary dd {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.5;
	color: var(--klp-sm-primary-dark);
	word-break: break-word;
}

.klp-sm-modal--educator-profile .klp-sm-modal-dialog {
	max-width: min(520px, calc(100vw - 32px));
	border-top: 3px solid var(--klp-sm-btn-brand, #683fa0);
	max-height: min(90vh, 720px);
	overflow-y: auto;
}

.klp-sm-educator-profile-modal-lead {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.55;
}

@media (max-width: 520px) {
	.klp-sm-educator-profile-summary-row {
		grid-template-columns: 1fr;
		gap: 4px;
	}

	.klp-sm-educator-profile-heading-row {
		align-items: flex-start;
		flex-direction: column;
	}

	.klp-sm-educator-profile-heading-row .klp-sm-button {
		align-self: flex-end;
	}
}

/* Educator: email invite modal */
.klp-sm-modal--educator-email-invite .klp-sm-modal-dialog {
	max-width: min(480px, calc(100vw - 32px));
	border-top: 3px solid var(--klp-sm-btn-brand, #683fa0);
}

.klp-sm-educator-email-invite-lead {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.55;
}

.klp-sm-modal--educator-email-invite .klp-sm-textarea {
	min-height: 88px;
	resize: vertical;
}

.klp-sm-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.klp-sm-educator-classes-table-wrap .klp-sm-table {
	margin-left: 0;
	margin-right: 0;
}

.klp-sm-educator-actions-col {
	min-width: 0;
	white-space: normal;
}

.klp-sm-educator-actions-cell {
	vertical-align: middle;
	text-align: center;
}

/* Class invites: actions hug content width (no stretched flex lanes). */
.klp-sm-educator-actions-stack {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto;
	max-width: 100%;
	margin-inline: auto;
}

.klp-sm-educator-actions-stack > .klp-sm-educator-email-invite-open {
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	max-width: 100%;
	justify-content: center;
	white-space: nowrap;
}

.klp-sm-educator-actions-stack > .klp-sm-educator-action-form {
	flex: 0 1 auto;
	min-width: 0;
	width: auto;
	max-width: 100%;
	margin: 0;
	display: flex;
}

.klp-sm-educator-actions-stack > .klp-sm-educator-action-form .klp-sm-button {
	width: auto;
	min-width: 0;
	justify-content: center;
	white-space: nowrap;
}

.klp-sm-educator-extend-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.klp-sm-educator-extend-row select {
	min-width: 120px;
}

.klp-sm-input-readonly--narrow {
	max-width: 120px;
	flex: 0 1 auto;
}

.klp-sm-edu-parent-invite-banner {
	margin-bottom: 20px;
}

.klp-sm-edu-parent-invite-banner-title {
	margin: 0 0 10px;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--klp-sm-heading, inherit);
}

.klp-sm-edu-parent-invite-banner-lead {
	margin: 0 0 12px;
	max-width: 52rem;
	line-height: 1.55;
}

.klp-sm-edu-parent-invite-label {
	font-weight: 600;
	margin-right: 0.25em;
}

.klp-sm-edu-parent-invite-summary {
	margin: 12px 0 0;
	padding-left: 1.2rem;
}

.klp-sm-edu-parent-invite-summary li {
	margin-bottom: 6px;
}

/* Parent signup: class code opens in modal (trigger under form title) */
.klp-sm-parent-class-code-trigger-wrap {
	margin: 16px 0 0;
}

.klp-sm-parent-class-code-trigger-wrap .klp-sm-button {
	min-height: 42px;
}

.klp-sm-modal--parent-class-code .klp-sm-modal-dialog {
	max-width: min(440px, calc(100vw - 32px));
}

.klp-sm-edu-parent-code-modal-lead {
	margin: 0 0 18px;
	font-size: 0.92rem;
	line-height: 1.55;
}

.klp-sm-dash-section-edu-invite {
	border: 1px solid var(--klp-sm-border-strong);
	border-radius: var(--klp-sm-radius-sm);
	padding: 0 0 16px;
	margin-bottom: 28px;
	background: var(--klp-sm-surface-alt, #f8fafc);
}

.klp-sm-dash-section-edu-invite .klp-sm-dash-section-head {
	padding: 18px 18px 0;
}

.klp-sm-edu-invite-continue-card {
	padding: 0 18px 8px;
}

.klp-sm-edu-invite-dl {
	margin: 0 0 16px;
	display: grid;
	gap: 8px 16px;
}

.klp-sm-edu-invite-dl > div {
	display: grid;
	grid-template-columns: minmax(100px, 140px) 1fr;
	gap: 8px;
	align-items: baseline;
}

.klp-sm-edu-invite-dl dt {
	margin: 0;
	font-weight: 600;
	color: var(--klp-sm-muted-text, #64748b);
	font-size: 0.85rem;
}

.klp-sm-edu-invite-dl dd {
	margin: 0;
}

.klp-sm-edu-invite-skip {
	margin: 12px 18px 0;
}

/* LearnDash: child blocked when parent MemberPress plan is not active (wp_die body). */
.klp-sm-ld-plan-blocked {
	max-width: 42rem;
	margin: 2rem auto;
	padding: 0 max(1rem, env(safe-area-inset-left)) 2rem max(1rem, env(safe-area-inset-right));
	line-height: 1.55;
	color: #0f172a;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}

.klp-sm-ld-plan-blocked-title {
	font-size: clamp(1.15rem, 0.5rem + 2.5vw, 1.35rem);
	margin: 0 0 1rem;
	font-weight: 700;
	line-height: 1.25;
}

.klp-sm-ld-plan-blocked-lead {
	font-weight: 600;
	margin: 0 0 1rem;
}

.klp-sm-ld-plan-blocked p {
	margin: 0 0 0.85rem;
}

.klp-sm-ld-plan-blocked .klp-sm-ld-plan-blocked-actions {
	margin-top: 1.25rem;
}

.klp-sm-ld-plan-blocked .klp-sm-ld-plan-blocked-actions .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 22rem;
	min-height: 48px;
	padding: 0.65rem 1.25rem;
	box-sizing: border-box;
	font-size: 1rem;
	background: #683fa0;
	color: #fff;
	border-style: none;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
}

@media (min-width: 480px) {
	.klp-sm-ld-plan-blocked .klp-sm-ld-plan-blocked-actions .button {
		width: auto;
	}
}

/* MemberPress checkout: grade selector matches KLP field sizing (when public.css loads on checkout). */
.mp-form-row.klp-mepr-grade-field {
	width: 100%;
	max-width: 100%;
}

.mp-form-row.klp-mepr-grade-field select,
.mp-form-row.klp-mepr-grade-field #klp_grade_band {
	width: 100%;
	max-width: 100%;
	min-height: 48px;
	padding: 12px 42px 12px 14px;
	font-size: 16px;
	line-height: 1.35;
	border-radius: var(--klp-sm-radius-sm, 10px);
	box-sizing: border-box;
	background: #fff;
}

/* Client-side validation (form-validate.js): highlight invalid fields */
.klp-sm-wrap .klp-sm-field--error input:not([type="hidden"]),
.klp-sm-wrap .klp-sm-field--error select,
.klp-sm-wrap .klp-sm-field--error textarea,
.klp-sm-wrap input.klp-sm-input--error:not([type="hidden"]),
.klp-sm-wrap select.klp-sm-input--error,
.klp-sm-wrap textarea.klp-sm-input--error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
}

.klp-sm-wrap .klp-sm-field-error-msg {
	margin: 6px 0 0;
	font-size: 0.875rem;
	color: #b91c1c;
	font-weight: 600;
}

.klp-sm-wrap .klp-sm-input-readonly {
	background: #fff;
	color: var(--klp-sm-muted, #64748b);
	cursor: not-allowed;
}