/*
 * TN Payroll LMS — learner frontend design system.
 * Matched to the reference course-UI in F:\HR\Reference (see DESIGN_EXTRACTION.md):
 * white card system, right-hand syllabus rail, warm amber accent, green
 * completion, calm reading rhythm. Original implementation; scoped under .tnplms.
 */

/* ----------------------------------------------------------- Webfonts */
@font-face {
	font-family: "TNPLMS Inter";
	src: url("../fonts/inter-wght.woff2") format("woff2");
	font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
	font-family: "TNPLMS Mono";
	src: url("../fonts/jbmono-wght.woff2") format("woff2");
	font-weight: 100 800; font-style: normal; font-display: swap;
}

/* ============================================================ TOKENS */
.tnplms {
	/* Accent — warm amber by default, themeable via --tnplms-brand; all shades
	 * derive from it so re-theming stays coherent. */
	--tnplms-brand: #c2410c;
	--tnplms-on-brand: #fff;
	--tnplms-brand-bright: color-mix(in srgb, var(--tnplms-brand) 68%, #ffb066);
	--tnplms-brand-text: color-mix(in srgb, var(--tnplms-brand) 90%, #000);
	--tnplms-brand-strong: color-mix(in srgb, var(--tnplms-brand) 78%, #000);
	--tnplms-cream: color-mix(in srgb, var(--tnplms-brand) 7%, #fff);
	--tnplms-cream-line: color-mix(in srgb, var(--tnplms-brand) 26%, #fff);
	--tnplms-ring: color-mix(in srgb, var(--tnplms-brand) 38%, transparent);

	/* Neutrals */
	--tnplms-ink: #16202c;
	--tnplms-body: #44515f;
	--tnplms-muted: #6b7785;
	--tnplms-faint: #97a1ad;
	--tnplms-line: #e5e7eb;
	--tnplms-line-2: #d6dae0;
	--tnplms-bg: #f6f7f9;
	--tnplms-surface: #ffffff;

	/* Status */
	--tnplms-ok: #15a34a;
	--tnplms-ok-bg: #e7f7ed;
	--tnplms-ok-line: #a7e3bd;
	--tnplms-bad: #dc2626;
	--tnplms-bad-bg: #fdecec;
	--tnplms-bad-line: #f6c5c5;

	/* Spacing — 4/8 scale */
	--tnplms-s1: .25rem; --tnplms-s2: .5rem; --tnplms-s3: .75rem; --tnplms-s4: 1rem;
	--tnplms-s5: 1.5rem; --tnplms-s6: 2rem; --tnplms-s7: 3rem; --tnplms-s8: 4rem;

	/* Type scale */
	--tnplms-fs-caption: .8125rem;
	--tnplms-fs-small: .875rem;
	--tnplms-fs-body: 1rem;
	--tnplms-fs-lead: 1.125rem;
	--tnplms-fs-h4: 1.125rem;
	--tnplms-fs-h3: 1.375rem;
	--tnplms-fs-h2: 1.625rem;
	--tnplms-fs-display: 1.5rem;
	--tnplms-lh-tight: 1.2; --tnplms-lh-snug: 1.4; --tnplms-lh-body: 1.65;
	--tnplms-measure: 70ch;

	/* Radii / elevation / motion */
	--tnplms-r1: 8px; --tnplms-r2: 10px; --tnplms-r3: 14px; --tnplms-pill: 999px;
	--tnplms-sh1: 0 1px 2px rgba(16, 32, 44, .05);
	--tnplms-sh2: 0 6px 20px -8px rgba(16, 32, 44, .14);
	--tnplms-ease: cubic-bezier(.4, 0, .2, 1);

	color: var(--tnplms-body);
	font-family: "TNPLMS Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: var(--tnplms-fs-body);
	line-height: var(--tnplms-lh-body);
	-webkit-font-smoothing: antialiased;
}
.tnplms *, .tnplms *::before, .tnplms *::after { box-sizing: border-box; }
.tnplms img { max-width: 100%; height: auto; }
.tnplms-mono { font-family: "TNPLMS Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* ========================================================= PRIMITIVES */
.tnplms-btn { --b: var(--tnplms-brand); display: inline-flex; align-items: center; justify-content: center; gap: var(--tnplms-s2); background: var(--b); color: var(--tnplms-on-brand); border: 1px solid transparent; padding: .55rem 1.1rem; border-radius: var(--tnplms-r2); font-family: inherit; font-weight: 600; font-size: var(--tnplms-fs-small); line-height: 1.3; min-height: 42px; cursor: pointer; text-decoration: none; transition: background .15s var(--tnplms-ease), box-shadow .15s var(--tnplms-ease), transform .04s var(--tnplms-ease); }
.tnplms-btn:hover { background: var(--tnplms-brand-strong); color: var(--tnplms-on-brand); box-shadow: var(--tnplms-sh1); }
.tnplms-btn:active { transform: translateY(1px); }
.tnplms-btn[disabled], .tnplms-btn.is-disabled { opacity: .5; pointer-events: none; }
.tnplms-btn-secondary { background: var(--tnplms-surface); color: var(--tnplms-brand-text); border-color: var(--tnplms-line-2); }
.tnplms-btn-secondary:hover { background: var(--tnplms-cream); color: var(--tnplms-brand-text); border-color: var(--tnplms-cream-line); }
.tnplms-btn-lg { padding: .7rem 1.5rem; font-size: var(--tnplms-fs-body); min-height: 48px; }
.tnplms-btn-block { width: 100%; }
.tnplms :where(a, button, input, summary):focus-visible { outline: 3px solid var(--tnplms-ring); outline-offset: 2px; border-radius: var(--tnplms-r1); }

.tnplms-chip { display: inline-block; font-size: var(--tnplms-fs-caption); font-weight: 600; color: var(--tnplms-brand-text); background: var(--tnplms-cream); border: 1px solid var(--tnplms-cream-line); padding: .2rem .6rem; border-radius: var(--tnplms-pill); }
.tnplms-chip-quiz { color: var(--tnplms-brand-text); background: var(--tnplms-cream); border-color: var(--tnplms-cream-line); }
.tnplms-badge { display: inline-flex; align-items: center; gap: var(--tnplms-s1); font-size: var(--tnplms-fs-caption); font-weight: 600; padding: .25rem .6rem; border-radius: var(--tnplms-pill); background: var(--tnplms-bg); color: var(--tnplms-body); }
.tnplms-badge-done { background: var(--tnplms-ok-bg); color: var(--tnplms-ok); border: 1px solid var(--tnplms-ok-line); }
.tnplms-notice { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); padding: var(--tnplms-s4) var(--tnplms-s5); border-radius: var(--tnplms-r2); }
.tnplms-notice-warn { background: var(--tnplms-cream); border-color: var(--tnplms-cream-line); color: var(--tnplms-brand-strong); }
.tnplms-notice-ok { background: var(--tnplms-ok-bg); border-color: var(--tnplms-ok-line); color: var(--tnplms-ok); }

.tnplms-progress { background: var(--tnplms-line); border-radius: var(--tnplms-pill); height: 7px; overflow: hidden; }
.tnplms-progress-bar { height: 100%; border-radius: inherit; background: var(--tnplms-brand-bright); transition: width .6s var(--tnplms-ease); }
.tnplms-progress-label { display: inline-block; margin-top: var(--tnplms-s2); font-size: var(--tnplms-fs-caption); font-weight: 600; color: var(--tnplms-muted); }

.tnplms-eyebrow { margin: 0 0 var(--tnplms-s2); font-size: var(--tnplms-fs-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tnplms-brand-text); }
.tnplms-page-head { margin: 0 0 var(--tnplms-s6); }
.tnplms-page-title { margin: 0; font-size: var(--tnplms-fs-h2); line-height: var(--tnplms-lh-tight); letter-spacing: -.01em; font-weight: 800; color: var(--tnplms-ink); }
.tnplms-page-sub { margin: var(--tnplms-s3) 0 0; color: var(--tnplms-muted); max-width: 60ch; font-size: var(--tnplms-fs-lead); }
.tnplms-h3 { font-size: var(--tnplms-fs-h4); margin: 0; color: var(--tnplms-ink); font-weight: 700; }

/* ===================================================== CONTAINERS */
.tnplms-player-wrap,
.tnplms-catalog, .tnplms-dashboard, .tnplms-verify, .tnplms-enroll-prompt {
	width: 100vw; max-width: 100vw;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.tnplms-catalog, .tnplms-dashboard, .tnplms-verify, .tnplms-enroll-prompt {
	padding: var(--tnplms-s5) max(var(--tnplms-s5), calc((100vw - 1200px) / 2)) var(--tnplms-s8);
	overflow-x: clip; /* contain any sub-pixel full-bleed breakout (no sticky inside) */
}
.tnplms-page .wp-block-post-title, .tnplms-page .entry-title:not(.tnplms-page-title) { display: none; }
body.tnplms-page .inside-article { padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
body.tnplms-page #main.site-main, body.tnplms-page .site-main { margin-top: 0 !important; }
body.tnplms-page .entry-content { margin-top: 0; }
body.tnplms-page .entry-header, body.tnplms-page .generate-page-header { display: none; }

/* ====================================================== COURSE PLAYER */
.tnplms-player-wrap { background: var(--tnplms-bg); padding: 0 0 var(--tnplms-s8); }
.tnplms-player { max-width: 1320px; margin: 0 auto; padding: 0 var(--tnplms-s5); }

/* Sub-header: back · breadcrumb/title · Previous/Next pager */
.tnplms-subhead { display: flex; align-items: center; gap: var(--tnplms-s4); padding: var(--tnplms-s5) 0 var(--tnplms-s4); }
.tnplms-subhead-back { flex: 0 0 auto; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--tnplms-r2); color: var(--tnplms-brand-text); text-decoration: none; font-size: 1.2rem; border: 1px solid transparent; }
.tnplms-subhead-back:hover { background: var(--tnplms-cream); color: var(--tnplms-brand-text); }
.tnplms-subhead-titles { flex: 1 1 auto; min-width: 0; }
.tnplms-breadcrumb { display: inline-block; font-size: var(--tnplms-fs-caption); font-weight: 600; color: var(--tnplms-brand-text); text-decoration: none; margin-bottom: 2px; }
.tnplms-breadcrumb:hover { color: var(--tnplms-brand-strong); text-decoration: underline; }
.tnplms-subhead-title { margin: 0; font-size: var(--tnplms-fs-h3); font-weight: 800; color: var(--tnplms-ink); line-height: var(--tnplms-lh-tight); letter-spacing: -.01em; }
.tnplms-player-brand { flex: 0 0 auto; font-weight: 800; color: var(--tnplms-ink); letter-spacing: -.01em; }
.tnplms-pager { flex: 0 0 auto; display: flex; align-items: center; gap: var(--tnplms-s2); }
.tnplms-pager-link { display: inline-flex; align-items: center; gap: var(--tnplms-s1); font-size: var(--tnplms-fs-small); font-weight: 600; color: var(--tnplms-brand-text); text-decoration: none; padding: .4rem .7rem; border-radius: var(--tnplms-r2); white-space: nowrap; }
.tnplms-pager-link:hover { background: var(--tnplms-cream); color: var(--tnplms-brand-text); }
.tnplms-pager-link.is-disabled { color: var(--tnplms-faint); pointer-events: none; }

/* Two-pane body: main + rail on the RIGHT */
.tnplms-player-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--tnplms-s5); align-items: start; }
.tnplms-main { min-width: 0; display: flex; flex-direction: column; gap: var(--tnplms-s5); }

/* Card */
.tnplms-card-surface { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); box-shadow: var(--tnplms-sh1); }

/* Lesson reading card */
.tnplms-lesson { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); box-shadow: var(--tnplms-sh1); padding: var(--tnplms-s6) var(--tnplms-s7); }
.tnplms-lesson-head { margin-bottom: var(--tnplms-s4); }
.tnplms-lesson-title { margin: var(--tnplms-s1) 0 0; font-size: var(--tnplms-fs-h3); line-height: var(--tnplms-lh-tight); color: var(--tnplms-ink); font-weight: 800; letter-spacing: -.01em; }
.tnplms-lesson-actions { margin-top: var(--tnplms-s6); padding-top: var(--tnplms-s5); border-top: 1px solid var(--tnplms-line); display: flex; justify-content: flex-end; }

/* Prose */
.tnplms-prose { color: var(--tnplms-body); font-size: var(--tnplms-fs-body); line-height: var(--tnplms-lh-body); max-width: var(--tnplms-measure); }
.tnplms-prose > :first-child { margin-top: 0; }
.tnplms-prose h2 { font-size: var(--tnplms-fs-h3); margin: var(--tnplms-s6) 0 var(--tnplms-s3); color: var(--tnplms-ink); font-weight: 700; line-height: var(--tnplms-lh-snug); }
.tnplms-prose h3 { font-size: var(--tnplms-fs-h4); margin: var(--tnplms-s5) 0 var(--tnplms-s2); color: var(--tnplms-ink); font-weight: 700; }
.tnplms-prose p { margin: 0 0 var(--tnplms-s4); }
.tnplms-prose ul, .tnplms-prose ol { margin: 0 0 var(--tnplms-s4); padding-left: 1.4rem; }
.tnplms-prose li { margin: var(--tnplms-s1) 0; }
.tnplms-prose li::marker { color: var(--tnplms-brand-bright); }
.tnplms-prose a { color: var(--tnplms-brand-text); text-underline-offset: 2px; }
.tnplms-prose strong { color: var(--tnplms-ink); font-weight: 700; }
.tnplms-prose blockquote { margin: var(--tnplms-s5) 0; padding: var(--tnplms-s1) var(--tnplms-s5); border-left: 3px solid var(--tnplms-brand-bright); color: var(--tnplms-muted); }
.tnplms-prose code { font-family: "TNPLMS Mono", monospace; background: var(--tnplms-bg); padding: .1rem .35rem; border-radius: 5px; font-size: .9em; }
.tnplms-prose table, .tnplms-table { width: 100%; border-collapse: collapse; margin: var(--tnplms-s5) 0; font-size: var(--tnplms-fs-small); }
.tnplms-prose th, .tnplms-prose td, .tnplms-table th, .tnplms-table td { border: 1px solid var(--tnplms-line); padding: .6rem .8rem; text-align: left; }
.tnplms-prose th, .tnplms-table th { background: var(--tnplms-bg); color: var(--tnplms-ink); font-weight: 700; }
.tnplms-prose tbody tr:nth-child(even) { background: #fafbfc; }
.tnplms-disclaimer { background: var(--tnplms-cream); border: 1px solid var(--tnplms-cream-line); border-radius: var(--tnplms-r2); padding: var(--tnplms-s4) var(--tnplms-s5); font-size: var(--tnplms-fs-small); color: var(--tnplms-brand-strong); margin: var(--tnplms-s5) 0 0; }

/* ----- Right rail: "Learning" ----- */
.tnplms-rail { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); box-shadow: var(--tnplms-sh1); position: sticky; top: var(--tnplms-s4); max-height: calc(100vh - 2rem); display: flex; flex-direction: column; overflow: hidden; }
.tnplms-rail-head { padding: var(--tnplms-s4) var(--tnplms-s5); border-bottom: 1px solid var(--tnplms-line); display: flex; align-items: center; justify-content: space-between; gap: var(--tnplms-s3); cursor: default; list-style: none; }
.tnplms-rail-head::-webkit-details-marker { display: none; }
.tnplms-rail-title { font-size: var(--tnplms-fs-lead); font-weight: 700; color: var(--tnplms-ink); }
.tnplms-rail-count { font-size: var(--tnplms-fs-caption); font-weight: 700; color: var(--tnplms-brand-text); background: var(--tnplms-cream); border: 1px solid var(--tnplms-cream-line); padding: .15rem .55rem; border-radius: var(--tnplms-pill); }
.tnplms-rail-progress { padding: var(--tnplms-s3) var(--tnplms-s5); border-bottom: 1px solid var(--tnplms-line); }
.tnplms-rail-scroll { overflow-y: auto; padding: var(--tnplms-s3); }
.tnplms-rail-module { padding: 0 0 var(--tnplms-s2); }
.tnplms-rail-module + .tnplms-rail-module { margin-top: var(--tnplms-s3); }
.tnplms-rail-module-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tnplms-s2); padding: var(--tnplms-s2) var(--tnplms-s2) var(--tnplms-s2); font-size: var(--tnplms-fs-caption); font-weight: 700; color: var(--tnplms-muted); letter-spacing: .02em; }
.tnplms-rail-module-count { font-size: .72rem; font-weight: 700; color: var(--tnplms-faint); white-space: nowrap; }
.tnplms-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tnplms-s2); }
.tnplms-rail-item > a, .tnplms-rail-item > span { display: flex; align-items: center; gap: var(--tnplms-s3); padding: .6rem .7rem; border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r2); text-decoration: none; color: var(--tnplms-body); background: var(--tnplms-surface); min-height: 48px; transition: border-color .12s var(--tnplms-ease), background .12s var(--tnplms-ease); }
.tnplms-rail-item > a:hover { border-color: var(--tnplms-line-2); background: #fbfcfd; }
.tnplms-rail-item.is-current > a { background: var(--tnplms-cream); border-color: var(--tnplms-cream-line); }
.tnplms-rail-item.is-current .tnplms-rail-title-text { color: var(--tnplms-brand-text); font-weight: 600; }
.tnplms-rail-item.is-locked > span { color: var(--tnplms-faint); cursor: not-allowed; background: var(--tnplms-surface); }
.tnplms-rail-icon { flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--tnplms-muted); }
.tnplms-rail-item.is-current .tnplms-rail-icon { color: var(--tnplms-brand-text); }
.tnplms-rail-item.is-locked .tnplms-rail-icon { color: var(--tnplms-faint); }
.tnplms-rail-icon svg { width: 17px; height: 17px; display: block; }
.tnplms-rail-title-text { flex: 1 1 auto; min-width: 0; font-size: var(--tnplms-fs-small); line-height: var(--tnplms-lh-snug); }
.tnplms-rail-status { flex: 0 0 auto; width: 20px; height: 20px; }
.tnplms-rail-check { width: 20px; height: 20px; border-radius: 50%; background: var(--tnplms-ok); display: inline-flex; align-items: center; justify-content: center; }
.tnplms-rail-check svg { width: 12px; height: 12px; color: #fff; display: block; }
.tnplms-rail-lock { color: var(--tnplms-faint); display: inline-flex; }

/* ================================================ QUIZ (rollout-ready) */
.tnplms-quiz { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); box-shadow: var(--tnplms-sh1); padding: var(--tnplms-s6) var(--tnplms-s7); }
.tnplms-quiz-head { margin-bottom: var(--tnplms-s5); }
.tnplms-quiz-title { margin: var(--tnplms-s2) 0 var(--tnplms-s3); font-size: var(--tnplms-fs-h3); color: var(--tnplms-ink); font-weight: 800; }
.tnplms-quiz-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--tnplms-s2) var(--tnplms-s3); margin: 0; padding: 0; }
.tnplms-quiz-meta li { font-size: var(--tnplms-fs-caption); font-weight: 600; color: var(--tnplms-muted); background: var(--tnplms-bg); border: 1px solid var(--tnplms-line); padding: .2rem .6rem; border-radius: var(--tnplms-pill); }
.tnplms-question { border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r2); padding: var(--tnplms-s5); margin: 0 0 var(--tnplms-s4); }
.tnplms-question-title { display: flex; gap: var(--tnplms-s3); align-items: flex-start; font-weight: 700; color: var(--tnplms-ink); margin: 0; padding: 0; font-size: var(--tnplms-fs-body); line-height: var(--tnplms-lh-snug); }
.tnplms-question-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--tnplms-brand); color: #fff; font-size: var(--tnplms-fs-caption); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tnplms-question-hint { font-weight: 500; color: var(--tnplms-muted); font-size: var(--tnplms-fs-small); }
.tnplms-options { margin-top: var(--tnplms-s4); display: flex; flex-direction: column; gap: var(--tnplms-s2); }
.tnplms-option { position: relative; display: flex; gap: var(--tnplms-s3); align-items: center; padding: .65rem .8rem; border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r2); cursor: pointer; transition: border-color .12s var(--tnplms-ease), background .12s var(--tnplms-ease); }
.tnplms-option:hover { border-color: var(--tnplms-cream-line); background: var(--tnplms-cream); }
.tnplms-option input { position: absolute; width: 1px; height: 1px; opacity: 0; margin: 0; }
.tnplms-option-control { flex: 0 0 auto; width: 20px; height: 20px; border: 2px solid var(--tnplms-line-2); background: #fff; position: relative; }
.tnplms-option:has(input[type="radio"]) .tnplms-option-control { border-radius: 50%; }
.tnplms-option:has(input[type="checkbox"]) .tnplms-option-control { border-radius: 6px; }
.tnplms-option:has(input:checked) { border-color: var(--tnplms-brand); background: var(--tnplms-cream); }
.tnplms-option:has(input:checked) .tnplms-option-control { border-color: var(--tnplms-brand); background: var(--tnplms-brand); }
.tnplms-option:has(input[type="radio"]:checked) .tnplms-option-control::after { content: ""; position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.tnplms-option:has(input[type="checkbox"]:checked) .tnplms-option-control::after { content: "\2713"; position: absolute; inset: 0; text-align: center; line-height: 16px; color: #fff; font-size: 12px; font-weight: 700; }
.tnplms-option:has(input:focus-visible) { outline: 3px solid var(--tnplms-ring); outline-offset: 2px; }
.tnplms-option-text { font-size: var(--tnplms-fs-small); }
.tnplms-quiz-actions { margin-top: var(--tnplms-s5); display: flex; justify-content: flex-end; }
.tnplms-quiz-placeholder { background: var(--tnplms-bg); border: 1px dashed var(--tnplms-line-2); padding: var(--tnplms-s6); border-radius: var(--tnplms-r2); text-align: center; color: var(--tnplms-muted); }

/* Quiz result — green banner + field grid + review (GL match) */
.tnplms-result-banner { display: flex; align-items: center; gap: var(--tnplms-s3); background: var(--tnplms-ok); color: #fff; border-radius: var(--tnplms-r2); padding: var(--tnplms-s4) var(--tnplms-s5); font-weight: 700; margin-bottom: var(--tnplms-s5); }
.tnplms-result-banner.is-fail { background: var(--tnplms-bad); }
.tnplms-result-icon { width: 24px; height: 24px; flex: 0 0 auto; }
.tnplms-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tnplms-s4) var(--tnplms-s6); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); padding: var(--tnplms-s5); margin-bottom: var(--tnplms-s5); }
.tnplms-field dt { font-size: var(--tnplms-fs-caption); font-weight: 700; color: var(--tnplms-brand-text); margin: 0 0 2px; }
.tnplms-field dd { margin: 0; color: var(--tnplms-ink); font-weight: 600; }
.tnplms-review-heading { font-size: var(--tnplms-fs-h4); margin: 0 0 var(--tnplms-s4); color: var(--tnplms-ink); }
.tnplms-review { list-style: none; margin: 0; padding: 0; }
.tnplms-review-item { border: 1px solid var(--tnplms-line); border-left-width: 4px; border-radius: var(--tnplms-r2); padding: var(--tnplms-s4) var(--tnplms-s5); margin: 0 0 var(--tnplms-s4); }
.tnplms-review-item.is-right { border-left-color: var(--tnplms-ok); }
.tnplms-review-item.is-wrong { border-left-color: var(--tnplms-bad); }
.tnplms-review-q { display: flex; gap: var(--tnplms-s3); align-items: flex-start; font-weight: 700; color: var(--tnplms-ink); margin: 0 0 var(--tnplms-s3); }
.tnplms-review-mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; text-align: center; line-height: 22px; font-size: 13px; color: #fff; }
.is-right .tnplms-review-mark { background: var(--tnplms-ok); }
.is-wrong .tnplms-review-mark { background: var(--tnplms-bad); }
.tnplms-review-options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--tnplms-s1); }
.tnplms-review-options li { padding: .4rem .65rem; border-radius: var(--tnplms-r1); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--tnplms-s1) var(--tnplms-s4); align-items: center; }
.tnplms-review-options li > span { min-width: 0; overflow-wrap: anywhere; }
.tnplms-review-options .opt-correct { background: var(--tnplms-ok-bg); }
.tnplms-review-options .opt-wrong { background: var(--tnplms-bad-bg); }
.tnplms-review-options em { color: var(--tnplms-muted); font-size: .76rem; font-style: normal; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.tnplms-review-explain { background: var(--tnplms-bg); border-radius: var(--tnplms-r2); padding: var(--tnplms-s3) var(--tnplms-s4); margin: var(--tnplms-s3) 0 0; font-size: var(--tnplms-fs-small); color: var(--tnplms-body); }

/* ============================================== CATALOG / DASHBOARD */
.tnplms-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: var(--tnplms-s5); }
.tnplms-card { position: relative; display: flex; flex-direction: column; background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); overflow: hidden; box-shadow: var(--tnplms-sh1); cursor: pointer; transition: transform .18s var(--tnplms-ease), box-shadow .18s var(--tnplms-ease), border-color .18s var(--tnplms-ease); }
.tnplms-card:hover { transform: translateY(-3px); box-shadow: var(--tnplms-sh2); border-color: var(--tnplms-cream-line); }
.tnplms-card:has(.tnplms-card-cta:focus-visible) { outline: 3px solid var(--tnplms-ring); outline-offset: 2px; }
.tnplms-card-banner { height: 96px; background: linear-gradient(120deg, var(--tnplms-brand), var(--tnplms-brand-bright)); display: flex; align-items: center; justify-content: center; }
.tnplms-card-mono { font-size: 2.1rem; font-weight: 800; color: #fff; opacity: .92; letter-spacing: .05em; }
.tnplms-card-body { padding: var(--tnplms-s5) var(--tnplms-s5) 0; flex: 1; }
.tnplms-card-title { margin: var(--tnplms-s3) 0 var(--tnplms-s2); font-size: var(--tnplms-fs-h4); line-height: var(--tnplms-lh-snug); color: var(--tnplms-ink); font-weight: 700; }
.tnplms-card-excerpt { color: var(--tnplms-muted); font-size: var(--tnplms-fs-small); margin: 0 0 var(--tnplms-s4); }
.tnplms-card-meta { list-style: none; display: flex; flex-wrap: wrap; gap: var(--tnplms-s2) var(--tnplms-s5); margin: 0 0 var(--tnplms-s4); padding: var(--tnplms-s3) 0 0; border-top: 1px solid var(--tnplms-line); font-size: var(--tnplms-fs-caption); color: var(--tnplms-muted); }
.tnplms-card-meta strong { color: var(--tnplms-ink); font-weight: 700; }
.tnplms-card-actions { padding: 0 var(--tnplms-s5) var(--tnplms-s5); }
.tnplms-card-cta::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

.tnplms-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tnplms-s4); margin-bottom: var(--tnplms-s6); }
.tnplms-stat { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); padding: var(--tnplms-s5); box-shadow: var(--tnplms-sh1); }
.tnplms-stat-num { display: block; font-size: var(--tnplms-fs-h2); font-weight: 800; color: var(--tnplms-ink); line-height: 1.1; }
.tnplms-stat-label { color: var(--tnplms-muted); font-size: var(--tnplms-fs-small); font-weight: 600; }
.tnplms-enrollment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--tnplms-s5); }
.tnplms-enrollment { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); padding: var(--tnplms-s5); box-shadow: var(--tnplms-sh1); }
.tnplms-enrollment.is-complete { border-color: var(--tnplms-ok-line); }
.tnplms-enrollment-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--tnplms-s4); margin-bottom: var(--tnplms-s4); }
.tnplms-enrollment-foot { display: flex; align-items: center; gap: var(--tnplms-s3); margin-top: var(--tnplms-s4); flex-wrap: wrap; }
.tnplms-empty { text-align: center; background: var(--tnplms-surface); border: 1px dashed var(--tnplms-line-2); border-radius: var(--tnplms-r3); padding: var(--tnplms-s8) var(--tnplms-s5); }
.tnplms-empty-title { font-size: var(--tnplms-fs-lead); color: var(--tnplms-ink); margin: 0 0 var(--tnplms-s4); font-weight: 650; }

/* Enrol / verify */
.tnplms-enroll-card { background: var(--tnplms-surface); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); box-shadow: var(--tnplms-sh2); padding: var(--tnplms-s7); max-width: 640px; margin: var(--tnplms-s5) auto; text-align: center; }
.tnplms-enroll-card .tnplms-page-title { margin-top: var(--tnplms-s3); }
.tnplms-enroll-card .tnplms-page-sub { margin-inline: auto; }
.tnplms-enroll-note { color: var(--tnplms-muted); margin: var(--tnplms-s4) 0 var(--tnplms-s5); }
.tnplms-verify-form { max-width: 560px; }
.tnplms-field-label { display: block; font-weight: 600; color: var(--tnplms-ink); margin-bottom: var(--tnplms-s2); }
.tnplms-verify-row { display: flex; gap: var(--tnplms-s3); }
.tnplms-verify-row input { flex: 1; padding: .65rem .9rem; border: 1px solid var(--tnplms-line-2); border-radius: var(--tnplms-r2); font-size: var(--tnplms-fs-body); min-height: 44px; font-family: inherit; }
.tnplms-verify-row input:focus-visible { outline: 3px solid var(--tnplms-ring); outline-offset: 1px; border-color: var(--tnplms-brand); }
.tnplms-verify-result { margin-top: var(--tnplms-s5); border: 1px solid var(--tnplms-line); border-radius: var(--tnplms-r3); padding: var(--tnplms-s5); max-width: 560px; }
.tnplms-verify-result.is-valid { border-color: var(--tnplms-ok-line); background: var(--tnplms-ok-bg); }
.tnplms-verify-result.is-invalid { border-color: var(--tnplms-bad-line); background: var(--tnplms-bad-bg); }
.tnplms-verify-result-head { display: flex; align-items: center; gap: var(--tnplms-s3); font-size: var(--tnplms-fs-lead); color: var(--tnplms-ink); margin-bottom: var(--tnplms-s3); }
.tnplms-verify-icon { width: 28px; height: 28px; border-radius: 50%; text-align: center; line-height: 28px; color: #fff; font-size: 15px; }
.is-valid .tnplms-verify-icon { background: var(--tnplms-ok); }
.is-invalid .tnplms-verify-icon { background: var(--tnplms-bad); }
.tnplms-verify-details { margin: 0; display: grid; gap: var(--tnplms-s2); }
.tnplms-verify-details > div { display: flex; gap: var(--tnplms-s3); }
.tnplms-verify-details dt { flex: 0 0 90px; color: var(--tnplms-muted); font-size: var(--tnplms-fs-small); margin: 0; }
.tnplms-verify-details dd { margin: 0; font-weight: 600; color: var(--tnplms-ink); }

/* ===================================================== RESPONSIVE */
@media (min-width: 1024px) {
	.tnplms-rail > .tnplms-rail-head[data-toggle] { cursor: default; }
}
@media (max-width: 1023px) {
	.tnplms-player-body { grid-template-columns: 1fr; }
	.tnplms-rail { position: static; max-height: none; }
	.tnplms-rail-head { cursor: pointer; }
	.tnplms-rail-head::after { content: ""; width: 10px; height: 10px; border-right: 2px solid var(--tnplms-muted); border-bottom: 2px solid var(--tnplms-muted); transform: rotate(45deg); transition: transform .2s var(--tnplms-ease); margin-left: auto; }
	.tnplms-rail[open] .tnplms-rail-head::after { transform: rotate(-135deg); }
	.tnplms-rail-scroll { max-height: 60vh; }
	.tnplms-lesson, .tnplms-quiz { padding: var(--tnplms-s5); }
	.tnplms-subhead { flex-wrap: wrap; }
	.tnplms-pager { width: 100%; justify-content: space-between; order: 3; }
}
@media (max-width: 640px) {
	.tnplms-stats { grid-template-columns: 1fr 1fr; }
	.tnplms-field-grid { grid-template-columns: 1fr; }
}

/* ===================================================== MOTION */
@media (prefers-reduced-motion: reduce) {
	.tnplms *, .tnplms *::before, .tnplms *::after { transition: none !important; animation: none !important; }
	.tnplms-card:hover { transform: none; }
}