/* ====================================================================
   MTP Transfer Mapper styles (v05.14.26.035)
   All rules scoped to .mtp-tm-wrap so the styles do not leak into
   surrounding theme content.
   ==================================================================== */

/* v05.26.26.008 BUGFIX: respect the HTML hidden attribute globally
   inside our widget wraps. Without this, theme rules like
   `.mtp-tw-light .mtp-tc-catalog-link { display: inline-flex }`
   outrank the user-agent's implicit `[hidden] { display: none }` and
   make hidden elements visible on initial render. The symptom that
   surfaced this bug: the right-side "Course Catalog" pill appeared
   before any school had been selected. Same root cause was at risk in
   10 other elements (direction-arrow, picker-logo, card-track,
   req-modal, tabs, verdict). The mtp-tc-is-hidden class is the
   JS-controlled equivalent for elements that have a display state set
   inline by JS and need to be re-hidden later. */
.mtp-tw-wrap [hidden],
.mtp-tm-wrap [hidden],
.mtp-tw-wrap .mtp-tc-is-hidden,
.mtp-tm-wrap .mtp-tc-is-hidden {
	display: none !important;
}

.mtp-tm-wrap {
	/* v05.21.26.003: bumped 1100 -> 1300 to match the Math Roadmap
	   embed wrap (`.mtp-ew` in embed.js line 310). The two widgets
	   are designed to live on the same page sometimes (e.g., the
	   maththought.com showcase); the user noticed the Compare
	   widget was visibly narrower. Same content rules apply at
	   smaller widths via the existing @media breakpoints. */
	max-width: 1300px;
	margin: 24px auto;
	font-family: 'Nunito', system-ui, sans-serif;
	color: #3d2e1a;
	line-height: 1.5;
}

.mtp-tm-heading {
	font-family: 'Caveat', cursive;
	font-size: 36px;
	line-height: 1.05;
	margin: 0 0 6px;
	color: #3d2e1a;
}

.mtp-tm-desc {
	margin: 0 0 18px;
	font-size: 13px;
	color: #5a4a36;
}

.mtp-tm-empty {
	max-width: 720px;
	margin: 24px auto;
	padding: 16px 20px;
	background: #faf7ee;
	border-left: 4px solid #c9a84c;
	border-radius: 6px;
	font-family: 'Nunito', system-ui, sans-serif;
	color: #3d2e1a;
	font-size: 14px;
	line-height: 1.5;
}

.mtp-tm-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid #d4cfbf;
	border-radius: 8px;
	overflow: hidden;
	font-size: 13.5px;
}

.mtp-tm-table thead th {
	background: #3d2e1a;
	color: #c9a84c;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 10px 14px;
	text-align: left;
}

.mtp-tm-table tbody td {
	padding: 12px 14px;
	border-top: 1px solid #ebe5d6;
	vertical-align: middle;
}

.mtp-tm-table tbody tr:hover {
	background: #faf6ee;
}

.mtp-tm-code {
	display: inline-block;
	font-family: 'Cascadia Code', 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 700;
	background: #f0eadd;
	color: #3d2e1a;
	padding: 2px 8px;
	border-radius: 4px;
	margin-right: 8px;
}

.mtp-tm-name {
	color: #3d2e1a;
}

.mtp-tm-score-col {
	width: 130px;
	text-align: center;
}

.mtp-tm-score-badge {
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-weight: 800;
	font-size: 12px;
	letter-spacing: 0.5px;
}
.mtp-tm-score-strong {
	background: #d4edd4;
	color: #1a4d1a;
}
.mtp-tm-score-partial {
	background: #fdf0d4;
	color: #6b4d00;
}
.mtp-tm-score-weak {
	background: #f3e0e0;
	color: #6b1818;
}

.mtp-tm-override-mark {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 6px;
	background: #0077C8;
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	border-radius: 3px;
}

.mtp-tm-disclaimer {
	margin: 14px 0 0;
	font-size: 11.5px;
	color: #8a7a64;
	font-style: italic;
}

@media (max-width: 540px) {
	.mtp-tm-heading { font-size: 28px; }
	.mtp-tm-table { font-size: 12px; }
	.mtp-tm-table thead th { padding: 8px 10px; font-size: 10px; }
	.mtp-tm-table tbody td { padding: 10px; }
	.mtp-tm-code { font-size: 11px; padding: 1px 6px; margin-right: 6px; }
	.mtp-tm-score-col { width: 90px; }
	.mtp-tm-score-badge { padding: 4px 8px; font-size: 11px; }
}

@media (max-width: 380px) {
	.mtp-tm-heading { font-size: 24px; }
	.mtp-tm-desc { font-size: 12px; }
	.mtp-tm-table { font-size: 11px; }
	.mtp-tm-table thead th { padding: 6px 8px; font-size: 9.5px; }
	.mtp-tm-table tbody td { padding: 8px; }
	.mtp-tm-code { display: block; margin-bottom: 3px; margin-right: 0; }
	.mtp-tm-name { display: block; font-size: 11.5px; }
}

/* High-contrast a11y mode honored */
body.mtp-a11y-hc .mtp-tm-table {
	border: 2px solid #000;
}
body.mtp-a11y-hc .mtp-tm-table thead th {
	background: #000;
	color: #ffeb3b;
}
body.mtp-a11y-hc .mtp-tm-table tbody td {
	border-top: 1px solid #000;
	color: #000;
}
body.mtp-a11y-hc .mtp-tm-score-badge {
	border: 2px solid #000;
}

/* ====================================================================
   v05.14.26.036: Interactive Compare widget styles
   ([mtp_transfer_compare] shortcode)
   ==================================================================== */

.mtp-tc-wrap {
	/* v05.21.26.003: bumped 1100 -> 1300 to match the Math Roadmap
	   embed wrap (.mtp-ew). See note on .mtp-tm-wrap above. */
	max-width: 1300px;
	margin: 24px auto;
	font-family: 'Nunito', system-ui, sans-serif;
	color: #f0e6cf;
	line-height: 1.5;
	background: transparent;
	border: 0;
	border-radius: 10px;
	padding: 8px 0 28px;
}

.mtp-tc-heading {
	font-family: 'Caveat', cursive;
	font-size: 42px;
	line-height: 1.05;
	margin: 0 0 6px;
	color: #f5ecd3;
}

.mtp-tc-desc {
	margin: 0 0 24px;
	font-size: 14.5px;
	color: #d8c9a0;
	line-height: 1.55;
}

/* v05.14.26.041: progressive side-by-side layout.
   Each side stacks vertically: school picker -> catalog link ->
   course picker -> course card with description + topics. */
.mtp-tc-side-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
	align-items: start;
	margin: 20px 0;
}

.mtp-tc-side {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.mtp-tc-school-block {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.mtp-tc-catalog-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	align-self: flex-start;
	margin-left: 4px;
	padding: 7px 16px 7px 12px;
	background: #c9a84c;
	border: 1px solid #c9a84c;
	color: #1a1c12;
	border-radius: 999px;
	font-family: 'Nunito', sans-serif;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: 0.5px;
	text-decoration: none;
	transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.mtp-tc-catalog-link:hover,
.mtp-tc-catalog-link:focus {
	background: #e2c170;
	color: #1a1c12;
	border-color: #e2c170;
	text-decoration: none;
	box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35);
}
.mtp-tc-catalog-link:visited {
	color: #1a1c12;
}
.mtp-tc-catalog-icon {
	font-size: 14px;
	line-height: 1;
}
.mtp-tc-catalog-label {
	line-height: 1;
}

.mtp-tc-course-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.mtp-tc-label {
	display: block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	color: #c9a84c;
	margin-bottom: 6px;
}

/* v05.21.26.008: directional labels. The role text ("CREDIT EARNED
   AT" / "TRANSFER CREDIT TO") gets a slightly stronger treatment so
   the from/to direction is at-a-glance obvious. The school name
   that follows stays in the same color but slightly lighter weight
   so the role reads as the primary information. */
.mtp-tc-label-role {
	font-weight: 800;
	color: #d4b768;
	letter-spacing: 1px;
}
.mtp-tc-label-school {
	font-weight: 600;
	color: #c9a84c;
	letter-spacing: 0.4px;
}

/* v05.21.26.008: directional arrow between the two school columns.
   The .mtp-tw-pickers grid has from / flip-col / to. The flip-col
   already contains the flip button + score; this arrow is a tiny
   addition above it that hints at the from -> to direction.
   Hidden by default so the chrome stays clean; revealed when both
   schools are picked (data-bind-visible="both-schools" hidden until
   the renderer toggles it). */
.mtp-tw-direction-arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: #c9a84c;
	font-weight: 700;
	line-height: 1;
	margin-bottom: 8px;
	letter-spacing: 0;
	opacity: 0.85;
}

.mtp-tc-picker {
	position: relative;
}

/* v05.14.26.042: shell now transparent. Previous design wrapped the
   logo + pill in a dark olive backdrop that made the whole control
   feel oversized. The pill alone carries the visual weight; the
   logo sits as a peer to its left in its own square card. */
.mtp-tc-picker-shell {
	display: flex;
	align-items: center;
	gap: 14px;
	background: transparent;
	padding: 0;
	min-height: 0;
}

/* Logo slot to the LEFT of the pill, peer not parent. Tidy square
   card with subtle dark fill so a white-on-dark institutional shield
   reads cleanly. Hidden until selectItem populates it. */
.mtp-tc-picker-logo {
	flex-shrink: 0;
	width: 54px;
	height: 54px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #1a1c12;
	border-radius: 8px;
	padding: 6px;
	box-sizing: border-box;
	overflow: hidden;
}

.mtp-tc-picker-logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mtp-tc-picker-logo-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #2e3020;
	color: #c9a84c;
	font-family: 'Caveat', cursive;
	font-size: 26px;
	font-weight: 700;
	border-radius: 5px;
	letter-spacing: 1px;
}

/* Pill input: v05.14.26.043 , removed the pill-shaped outline per
   feedback. Input area is now just the magnifier + text on a
   transparent background. A subtle bottom-line keeps the affordance
   for "this is a text input" without the heavy oval frame. */
.mtp-tc-picker-input-wrap {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(201, 168, 76, 0.3);
	border-radius: 0;
	padding: 8px 4px 8px 2px;
	transition: border-color 0.15s;
}

.mtp-tc-picker-input-wrap:focus-within {
	border-bottom-color: #c9a84c;
}

.mtp-tc-picker-icon {
	flex-shrink: 0;
	color: #c9a84c;
}

/* Course-picker shell is shorter and slimmer than school shell:
   no logo on left, smaller height, lighter padding. */
.mtp-tc-picker-shell-course .mtp-tc-picker-input-wrap {
	padding: 9px 16px;
}

.mtp-tc-picker-input {
	flex: 1 1 auto;
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: #c9a84c;
	text-transform: uppercase;
	min-width: 0;
	width: 100%;
	height: auto;
	min-height: 0;
	line-height: 1.4;
}

.mtp-tc-picker-input::placeholder {
	color: rgba(201, 168, 76, 0.5);
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mtp-tc-picker-input.is-selected {
	cursor: default;
	color: #c9a84c;
}

/* X clear button , gold ring on dark, hover toward white. */
.mtp-tc-clear-btn {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	border: 1px solid #c9a84c;
	border-radius: 50%;
	background: transparent;
	color: #c9a84c;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.15s, color 0.15s;
}
.mtp-tc-clear-btn:hover {
	border-color: #ffffff;
	color: #ffffff;
}

.mtp-tc-picker-results {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	background: #1a1c12;
	border: 1px solid #c9a84c;
	border-radius: 8px;
	z-index: 40;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
	padding: 4px;
}

.mtp-tc-picker-result {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 14px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	text-align: left;
	cursor: pointer;
	font-family: 'Nunito', sans-serif;
	color: #f0e6cf;
	transition: background 0.1s;
}
.mtp-tc-picker-result + .mtp-tc-picker-result { margin-top: 2px; }
.mtp-tc-picker-result:hover,
.mtp-tc-picker-result.is-kbd {
	background: #2e3020;
}

/* Logo thumbnail in dropdown row (schools only). */
.mtp-tc-pr-thumb {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border-radius: 4px;
	overflow: hidden;
}
.mtp-tc-pr-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mtp-tc-pr-thumb-initials {
	width: 100%;
	height: 100%;
	background: #2e3020;
	color: #c9a84c;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Caveat', cursive;
	font-size: 18px;
	font-weight: 700;
	border-radius: 4px;
}

.mtp-tc-pr-text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.mtp-tc-pr-primary {
	font-size: 13.5px;
	font-weight: 800;
	color: #c9a84c;
	letter-spacing: 0.4px;
	text-transform: uppercase;
}

.mtp-tc-pr-secondary {
	font-size: 11.5px;
	color: #a39879;
}

.mtp-tc-picker-loading,
.mtp-tc-picker-empty {
	padding: 14px 16px;
	font-size: 12px;
	color: #a39879;
	font-style: italic;
}

/* ==================== Compare panel ==================== */

.mtp-tc-score-card {
	text-align: center;
	background: rgba(201, 168, 76, 0.04);
	border: 1px solid rgba(201, 168, 76, 0.25);
	border-radius: 12px;
	padding: 22px 24px 24px;
	margin-bottom: 18px;
}

/* v05.14.26.051: direction header above the score badge.
   Renders as "HARDING --> ACU" with the school short names.
   Arrow mirrors when the score is flipped. */
.mtp-tc-score-direction {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 14px;
}
.mtp-tc-dir-school {
	display: inline-block;
}
.mtp-tc-dir-arrow {
	display: inline-block;
	font-size: 18px;
	color: #d4b768;
	transition: transform 0.25s ease;
}
.mtp-tc-dir-arrow.is-flipped {
	transform: scaleX(-1);
}

.mtp-tc-score-badge {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 999px;
	font-family: 'Caveat', cursive;
	font-size: 48px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: 1px;
}

.mtp-tc-score-badge.is-strong  { background: #d4edd4; color: #1a4d1a; }
.mtp-tc-score-badge.is-partial { background: #fdf0d4; color: #6b4d00; }
.mtp-tc-score-badge.is-weak    { background: #f3e0e0; color: #6b1818; }

.mtp-tc-score-pct {
	margin-top: 8px;
	font-size: 13px;
	color: #d8c9a0;
	font-weight: 700;
}

/* v05.14.26.051: small line below the verdict describing the
   reverse-direction score. */
.mtp-tc-score-reverse {
	margin-top: 10px;
	font-size: 12.5px;
	color: #b8a878;
	letter-spacing: 0.2px;
}
.mtp-tc-score-reverse strong {
	color: #d4b768;
	font-weight: 800;
}

/* v05.14.26.051: Flip direction button. Sits below the score
   block; clicking toggles which direction is "primary." */
.mtp-tc-flip-btn {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 16px;
	background: transparent;
	border: 1px solid rgba(201, 168, 76, 0.5);
	color: #c9a84c;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.mtp-tc-flip-btn:hover,
.mtp-tc-flip-btn:focus {
	background: #c9a84c;
	color: #1a1c12;
	border-color: #c9a84c;
}
.mtp-tc-flip-btn span {
	font-size: 16px;
	line-height: 1;
}

.mtp-tc-score-verdict {
	margin-top: 10px;
	font-size: 14.5px;
	font-weight: 700;
	color: #f0e6cf;
}

/* Breakdown bars. */
.mtp-tc-breakdown {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	background: #fffdf5;
	border: 1px solid #ebe5d6;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 18px;
}

.mtp-tc-brk-row {
	display: grid;
	grid-template-columns: 140px 1fr 50px;
	align-items: center;
	gap: 10px;
	font-size: 11.5px;
}
.mtp-tc-brk-label { color: #5a4a36; font-weight: 600; }
.mtp-tc-brk-bar {
	height: 6px;
	background: #ebe5d6;
	border-radius: 3px;
	overflow: hidden;
}
.mtp-tc-brk-fill {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, #c9a84c 0%, #e0c46a 100%);
	border-radius: 3px;
	transition: width 0.4s ease-out;
}
.mtp-tc-brk-val { text-align: right; font-weight: 700; color: #3d2e1a; font-variant-numeric: tabular-nums; }

/* Course card v05.14.26.045 redesign , transparent on dark, kicker
   line on top (CODE · CREDITS), big Caveat title in cream, gold
   outlined track pill, sectioned body for description + prereqs. */
.mtp-tc-course-card {
	background: transparent;
	border: 0;
	padding: 0;
	color: #f0e6cf;
	/* v05.21.26.003: card is now clickable to switch courses.
	   The cursor change is the only affordance , no hover lift,
	   no border on hover, no visual shouting. Hint level: same as
	   a normal link. */
	cursor: pointer;
}
.mtp-tc-course-card:hover .mtp-tc-card-title {
	color: #ffe9a8;
	transition: color 120ms ease;
}

.mtp-tc-card-kicker {
	font-family: 'Nunito', sans-serif;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: #d4b768;
	margin-bottom: 6px;
}
.mtp-tc-card-kicker-sep {
	margin: 0 6px;
	color: rgba(212, 183, 104, 0.65);
}

.mtp-tc-card-title {
	margin: 0 0 12px;
	font-family: 'Caveat', cursive;
	font-size: 40px;
	font-weight: 400;
	color: #faf2dd;
	line-height: 1.05;
	letter-spacing: 0.5px;
}

.mtp-tc-card-track {
	display: inline-block;
	padding: 5px 18px;
	margin-bottom: 18px;
	border: 1.5px solid #c9a84c;
	border-radius: 999px;
	background: transparent;
	color: #c9a84c;
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

.mtp-tc-card-section {
	padding: 16px 0;
	border-top: 1px solid rgba(201, 168, 76, 0.22);
}
.mtp-tc-card-section-head {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #c9a84c;
	margin-bottom: 12px;
}
.mtp-tc-card-section-body {
	font-size: 15.5px;
	color: #f0e6cf;
	line-height: 1.65;
	white-space: pre-wrap;
}
.mtp-tc-card-prereq-list {
	margin: 0;
	padding-left: 22px;
	color: #f0e6cf;
	font-size: 15.5px;
	line-height: 1.7;
}
.mtp-tc-card-prereq-list li {
	margin-bottom: 4px;
}

/* Topic chips inside the course card. v05.14.26.041. */
.mtp-tc-topics-wrap {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid rgba(201, 168, 76, 0.18);
}
.mtp-tc-topics-label {
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b5a44;
	margin-bottom: 6px;
}
.mtp-tc-topics-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.mtp-tc-topics-chips .mtp-tc-tm-chip {
	font-size: 11px;
}

/* v05.14.26.041: bigger Compare Panel container. Wraps score card,
   breakdown bars, and topic overlap as one logical unit, visually
   set off from the side-by-side selection area above. */
.mtp-tc-compare-panel {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 2px solid #ebe5d6;
}

/* Topic overlap visualization. Two columns, one per course.
   Each topic is a chip; chips that match the other side get a
   bright green check, chips that DON'T match get a muted dot. */
.mtp-tc-topic-map {
	margin: 18px 0 0;
	padding: 16px 18px;
	background: #fffdf5;
	border: 1px solid #ebe5d6;
	border-radius: 8px;
}
.mtp-tc-tm-heading {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: #6b5a44;
	margin-bottom: 12px;
}
.mtp-tc-tm-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.mtp-tc-tm-col-head {
	font-size: 12px;
	font-weight: 700;
	color: #3d2e1a;
	margin-bottom: 8px;
	padding-bottom: 6px;
	border-bottom: 1px dashed #d4cfbf;
}
.mtp-tc-tm-list {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.mtp-tc-tm-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 600;
	border: 1px solid transparent;
	line-height: 1.3;
}
.mtp-tc-tm-chip.is-match {
	background: #d4edd4;
	color: #1a4d1a;
	border-color: #a8d6a8;
}
.mtp-tc-tm-chip.is-only {
	background: #f0eadd;
	color: #6b5a44;
	border-color: #e0d8c4;
}
.mtp-tc-tm-chip-icon {
	font-size: 12px;
	line-height: 1;
}
.mtp-tc-tm-chip.is-match .mtp-tc-tm-chip-icon { color: #1a4d1a; }
.mtp-tc-tm-chip.is-only .mtp-tc-tm-chip-icon  { color: #b8a878; }
.mtp-tc-tm-empty {
	font-size: 12px;
	color: #8a7a64;
	font-style: italic;
}
.mtp-tc-tm-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed #d4cfbf;
	font-size: 11px;
	color: #6b5a44;
}
.mtp-tc-tm-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mtp-tc-tm-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
}
.mtp-tc-tm-dot.is-match { background: #1a4d1a; }
.mtp-tc-tm-dot.is-only  { background: #b8a878; }

.mtp-tc-disclaimer {
	margin: 18px 0 0;
	font-size: 11.5px;
	color: #8a7a64;
	font-style: italic;
	text-align: center;
}

.mtp-tc-actions {
	margin-top: 16px;
	text-align: center;
}

.mtp-tc-btn-reset {
	background: #fff;
	border: 1px solid #c9a84c;
	color: #3d2e1a;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s;
}
.mtp-tc-btn-reset:hover {
	background: #c9a84c;
	color: #fff;
}

/* v05.23.26.002: Download Report PDF button. Primary-style gold-
   filled (vs the Reset button which is outlined). Sits in the
   .mtp-tw-actions row beside Reset; both inherit the row's gap. */
.mtp-tc-btn-pdf {
	background: #c9a84c;
	border: 1px solid #c9a84c;
	color: #1a1c12;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 800;
	padding: 9px 18px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mtp-tc-btn-pdf:hover {
	background: #b8973f;
	border-color: #b8973f;
}
.mtp-tc-btn-pdf:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.mtp-tc-status {
	margin-top: 12px;
	min-height: 16px;
	font-size: 12px;
	color: #5a4a36;
}
.mtp-tc-status.is-error { color: #8b0000; }

/* Phone responsive. */
@media (max-width: 720px) {
	.mtp-tc-side-grid { grid-template-columns: 1fr; }
	.mtp-tc-tm-cols   { grid-template-columns: 1fr; }
}

@media (max-width: 540px) {
	.mtp-tc-wrap { padding: 18px 16px; }
	.mtp-tc-heading { font-size: 30px; }
	.mtp-tc-score-badge { font-size: 38px; padding: 12px 22px; }
	.mtp-tc-brk-row { grid-template-columns: 100px 1fr 40px; font-size: 11px; }
	.mtp-tc-picker-shell { gap: 10px; }
	.mtp-tc-picker-logo { width: 46px; height: 46px; padding: 5px; }
	.mtp-tc-picker-input-wrap { padding: 9px 14px; }
	.mtp-tc-picker-input { font-size: 12px; letter-spacing: 0.4px; }
	.mtp-tc-picker-input::placeholder { letter-spacing: 0.4px; }
}

@media (max-width: 380px) {
	.mtp-tc-heading { font-size: 26px; }
	.mtp-tc-score-badge { font-size: 32px; padding: 10px 18px; }
	.mtp-tc-brk-row { grid-template-columns: 90px 1fr 38px; }
	.mtp-tc-card-title { font-size: 30px; }
	.mtp-tc-card-section-body, .mtp-tc-card-prereq-list { font-size: 13px; }
	.mtp-tc-picker-shell { gap: 8px; }
	.mtp-tc-picker-logo { width: 40px; height: 40px; padding: 4px; }
	.mtp-tc-picker-input-wrap { padding: 7px 12px; }
	.mtp-tc-picker-input { font-size: 11px; letter-spacing: 0.3px; }
	.mtp-tc-picker-input::placeholder { letter-spacing: 0.3px; }
}

/* High-contrast a11y. */
body.mtp-a11y-hc .mtp-tc-wrap {
	background: #fff !important;
	border-color: #000 !important;
	border-width: 2px !important;
	color: #000 !important;
}
body.mtp-a11y-hc .mtp-tc-picker-logo {
	background: #000;
	border: 2px solid #ffeb3b;
}
body.mtp-a11y-hc .mtp-tc-picker-input-wrap {
	border: 2px solid #ffeb3b;
}
body.mtp-a11y-hc .mtp-tc-picker-icon,
body.mtp-a11y-hc .mtp-tc-picker-input,
body.mtp-a11y-hc .mtp-tc-clear-btn {
	color: #ffeb3b;
	border-color: #ffeb3b;
}
body.mtp-a11y-hc .mtp-tc-picker-results { background: #000; border: 2px solid #ffeb3b; }
body.mtp-a11y-hc .mtp-tc-picker-result:hover,
body.mtp-a11y-hc .mtp-tc-picker-result.is-kbd { background: #2a2a00; }
body.mtp-a11y-hc .mtp-tc-pr-primary { color: #ffeb3b; }
body.mtp-a11y-hc .mtp-tc-pr-secondary { color: #fff; }
body.mtp-a11y-hc .mtp-tc-score-badge { border: 2px solid #000; }
body.mtp-a11y-hc .mtp-tc-course-card { border: 2px solid #000; }
body.mtp-a11y-hc .mtp-tc-brk-fill { background: #000; }

/* ============================================================
 * v05.14.26.052 , Transfer Course Wizard layout
 *
 * Three-column header: school+course picker on each side,
 * compact flip-score column in the middle. Below: verdict strip,
 * three-tab content (Topic overlap / My knowledge / All courses).
 *
 * Each side is themed via CSS custom props set at runtime by JS:
 *   --side-primary, --side-secondary, --side-on-primary
 * Falls back to MTP gold (#c9a84c) / brown (#3d2e1a) when a
 * school has no brand colors stored.
 * ============================================================ */
.mtp-tw-wrap {
	color: #f0e6cf;
}

.mtp-tw-head {
	margin-bottom: 24px;
}
.mtp-tw-heading {
	font-family: 'Caveat', cursive;
	font-size: 42px;
	color: #f5ecd3;
	line-height: 1.05;
	margin: 0 0 6px;
}
.mtp-tw-desc {
	color: #c4b894;
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}

/* Three-column picker grid */
.mtp-tw-pickers {
	display: grid;
	grid-template-columns: 1fr 110px 1fr;
	gap: 18px;
	align-items: start;
	margin-bottom: 22px;
}

.mtp-tw-side {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
	/* Default theming , overridden per side by JS. */
	--side-primary:     #c9a84c;
	--side-secondary:   #3d2e1a;
	--side-on-primary:  #1a1c12;
}
.mtp-tw-side[data-side="to"] {
	--side-primary:     #5CB8E8;
	--side-secondary:   #0A3050;
	--side-on-primary:  #ffffff;
}

.mtp-tw-school-row {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding: 10px 14px;
	background: var(--side-secondary);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.08);
}
.mtp-tw-school-row .mtp-tc-picker {
	flex: 1;
	min-width: 0;
}
.mtp-tw-school-row .mtp-tc-picker-input,
.mtp-tw-school-row .mtp-tc-picker-icon {
	color: var(--side-on-primary, #fff);
}
.mtp-tw-school-row .mtp-tc-picker-input::placeholder {
	color: rgba(255, 255, 255, 0.55);
}
.mtp-tw-school-row .mtp-tc-picker-input-wrap {
	border-bottom-color: var(--side-primary);
}
.mtp-tw-school-row .mtp-tc-picker-logo {
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Center flip column */
.mtp-tw-flip-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 14px 6px;
	min-width: 0;
}
.mtp-tw-flip-score {
	font-family: 'Caveat', cursive;
	font-size: 42px;
	font-weight: 700;
	line-height: 1;
	color: #c9a84c;
}
.mtp-tw-flip-arrow {
	font-size: 22px;
	color: #c4b894;
	transition: transform 0.3s ease;
}
.mtp-tw-flip-arrow.is-flipped { transform: scaleX(-1); }
.mtp-tw-flip-label {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: #a89e7d;
	text-align: center;
}
.mtp-tw-flip-btn {
	margin-top: 4px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 14px;
	background: transparent;
	border: 1px solid rgba(201, 168, 76, 0.5);
	color: #c9a84c;
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.15s;
}
.mtp-tw-flip-btn:hover,
.mtp-tw-flip-btn:focus {
	background: #c9a84c;
	color: #1a1c12;
	border-color: #c9a84c;
}
.mtp-tw-flip-btn span {
	font-size: 14px;
}

/* Verdict strip */
.mtp-tw-verdict {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 18px;
	border: 1px solid transparent;
	/* v05.21.26.010: allow children to wrap on narrow widths so the
	   verdict body never gets crushed to one-word-per-line. Observed
	   on is-weak band with Reviewed+Why?+Find-a-closer-match cluster
	   on the right. */
	flex-wrap: wrap;
}
.mtp-tw-verdict-body {
	flex: 1 1 320px;
	min-width: 0;
}
.mtp-tw-verdict.is-strong  { background: rgba(99, 153, 34, 0.12); border-color: rgba(99, 153, 34, 0.4); }
.mtp-tw-verdict.is-partial { background: rgba(239, 159, 39, 0.12); border-color: rgba(239, 159, 39, 0.4); }
.mtp-tw-verdict.is-weak    { background: rgba(226, 75, 74, 0.12); border-color: rgba(226, 75, 74, 0.4); }
.mtp-tw-verdict-icon {
	font-size: 22px;
	flex-shrink: 0;
	line-height: 1.1;
}
.mtp-tw-verdict.is-strong  .mtp-tw-verdict-icon { color: #639922; }
.mtp-tw-verdict.is-partial .mtp-tw-verdict-icon { color: #ef9f27; }
.mtp-tw-verdict.is-weak    .mtp-tw-verdict-icon { color: #e24b4a; }
.mtp-tw-verdict-line {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
}
.mtp-tw-verdict-title {
	font-size: 15px;
	font-weight: 800;
}
.mtp-tw-verdict.is-strong  .mtp-tw-verdict-title { color: #aedc7c; }
.mtp-tw-verdict.is-partial .mtp-tw-verdict-title { color: #f5c373; }
.mtp-tw-verdict.is-weak    .mtp-tw-verdict-title { color: #f48a89; }
.mtp-tw-verdict-reverse {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.4px;
	color: rgba(255, 255, 255, 0.55);
}
.mtp-tw-verdict-sub {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.65);
	margin-top: 3px;
	line-height: 1.5;
}

/* v05.21.26.008: significant-gap interactivity.
   Entrance animation (one-shot pulse on first transition into the
   is-weak band), Why-toggle button, expand panel with missing-topic
   chips, and Find-closer-match action button. */
@keyframes mtp-tw-gap-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0.55); }
	40%  { box-shadow: 0 0 0 14px rgba(226, 75, 74, 0.10); }
	100% { box-shadow: 0 0 0 0 rgba(226, 75, 74, 0); }
}
.mtp-tw-verdict.is-weak.mtp-tw-gap-anim {
	animation: mtp-tw-gap-pulse 1.4s ease-out 1;
}

.mtp-tw-gap-decorations {
	flex-basis: 100%;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed rgba(226, 75, 74, 0.3);
}
.mtp-tw-gap-actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}
.mtp-tw-gap-why-toggle,
.mtp-tw-gap-find-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 18px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: background 120ms ease, transform 80ms ease;
	font-family: inherit;
}
.mtp-tw-gap-why-toggle {
	background: rgba(226, 75, 74, 0.18);
	border: 1px solid rgba(226, 75, 74, 0.4);
	color: #f48a89;
}
.mtp-tw-gap-why-toggle:hover {
	background: rgba(226, 75, 74, 0.28);
}
.mtp-tw-gap-why-toggle:active {
	transform: scale(0.96);
}
.mtp-tw-gap-why-icon {
	display: inline-block;
	transition: transform 180ms ease;
	font-size: 9px;
}
.mtp-tw-gap-why-toggle.is-open .mtp-tw-gap-why-icon {
	transform: rotate(180deg);
}
.mtp-tw-gap-find-btn {
	background: rgba(201, 168, 76, 0.18);
	border: 1px solid rgba(201, 168, 76, 0.5);
	color: #d4b768;
}
.mtp-tw-gap-find-btn:hover {
	background: rgba(201, 168, 76, 0.28);
}
.mtp-tw-gap-find-btn:active {
	transform: scale(0.96);
}

.mtp-tw-gap-why-panel {
	margin-top: 12px;
	padding: 12px 14px;
	background: rgba(0, 0, 0, 0.2);
	border-radius: 8px;
	border: 1px solid rgba(226, 75, 74, 0.2);
}
.mtp-tw-gap-why-head {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #f48a89;
	margin-bottom: 8px;
}
.mtp-tw-gap-why-intro {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	margin-bottom: 8px;
	line-height: 1.5;
}
.mtp-tw-gap-why-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mtp-tw-gap-why-chip {
	display: inline-block;
	padding: 4px 9px;
	border-radius: 12px;
	font-size: 11px;
	background: rgba(226, 75, 74, 0.18);
	color: #f5b0af;
	border: 1px solid rgba(226, 75, 74, 0.3);
}
.mtp-tw-gap-why-more {
	margin-top: 8px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.5);
	font-style: italic;
}
.mtp-tw-gap-why-empty {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
	line-height: 1.5;
	font-style: italic;
}

/* Tabs */
.mtp-tw-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid rgba(201, 168, 76, 0.18);
	margin-bottom: 20px;
}
.mtp-tw-tab {
	padding: 10px 18px;
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: #a89e7d;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	margin-bottom: -1px;
	transition: color 0.15s, border-color 0.15s;
}
.mtp-tw-tab:hover { color: #f0e6cf; }
.mtp-tw-tab.is-on {
	color: #c9a84c;
	border-bottom-color: #c9a84c;
}

.mtp-tw-tab-body { padding-top: 6px; }

/* v05.21.26.010: hide Topic overlap + My knowledge tabs (and their
   bodies) per user direction. Heatmap N x N is also intentionally
   not rendered. Markup remains in place so re-enabling is one CSS
   block delete. */
.mtp-tw-tab[data-tab="overlap"],
.mtp-tw-tab[data-tab="knowledge"],
.mtp-tw-tab-body[data-tab-body="overlap"],
.mtp-tw-tab-body[data-tab-body="knowledge"],
.mtp-tw-heatmap-block { display: none !important; }

/* v05.22.26.001: Topic chips on course cards. Matches the chip
   aesthetic used elsewhere in the widget , muted card background,
   thin gold border, prereq-list metric font. */
.mtp-tc-topic-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mtp-tc-topic-chip {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	background: rgba(201, 168, 76, 0.10);
	border: 1px solid rgba(201, 168, 76, 0.35);
	color: #d4b768;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.4;
}

.mtp-tw-section-head {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #c9a84c;
	margin: 14px 0 10px;
}
.mtp-tw-breakdown-wrap { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(201, 168, 76, 0.18); }

/* My Knowledge tab */
.mtp-tw-mk-intro {
	font-size: 13.5px;
	color: #c4b894;
	line-height: 1.6;
	margin: 0 0 16px;
}
.mtp-tw-mk-score {
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(201, 168, 76, 0.18);
	border-radius: 8px;
	padding: 14px 16px;
	margin-bottom: 18px;
}
.mtp-tw-mk-score-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 8px;
}
.mtp-tw-mk-score-label {
	font-size: 12px;
	font-weight: 700;
	color: #c4b894;
}
.mtp-tw-mk-score-pct {
	font-family: 'Caveat', cursive;
	font-size: 24px;
	font-weight: 700;
	color: #c9a84c;
}
.mtp-tw-mk-bar {
	height: 10px;
	background: rgba(255, 255, 255, 0.08);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
}
.mtp-tw-mk-bar-base  { height: 100%; background: #6b5a44; transition: width 0.3s; }
.mtp-tw-mk-bar-added { height: 100%; background: #639922; transition: width 0.3s; }
.mtp-tw-mk-verdict {
	font-size: 12px;
	color: #a89e7d;
	margin-top: 8px;
}
.mtp-tw-mk-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}
.mtp-tw-mk-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 8px;
	border-bottom: 1px solid rgba(201, 168, 76, 0.12);
	cursor: pointer;
	font-size: 13px;
}
.mtp-tw-mk-row:hover { background: rgba(255, 255, 255, 0.02); }
.mtp-tw-mk-row input { width: 16px; height: 16px; cursor: pointer; accent-color: #c9a84c; flex-shrink: 0; }
.mtp-tw-mk-name { flex: 1; color: #f0e6cf; }
.mtp-tw-mk-pts {
	font-size: 11px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(99, 153, 34, 0.18);
	color: #aedc7c;
}
.mtp-tw-mk-empty {
	font-size: 13px;
	color: #a89e7d;
	font-style: italic;
	padding: 10px 0;
}

/* Heat map tab */
.mtp-tw-hm-intro {
	font-size: 13px;
	color: #c4b894;
	line-height: 1.55;
	margin: 0 0 14px;
}
.mtp-tw-hm-intro strong { color: #f0e6cf; font-weight: 800; }
.mtp-tw-hm-loading { font-size: 12px; color: #a89e7d; margin: 10px 0; }
.mtp-tw-hm-scroll { overflow-x: auto; }
.mtp-tw-hm-grid {
	display: grid;
	gap: 4px;
	min-width: 320px;
}
.mtp-tw-hm-th {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #a89e7d;
	padding: 6px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mtp-tw-hm-corner { background: transparent; }
.mtp-tw-hm-col-h { text-align: center; }
.mtp-tw-hm-row-h { text-align: right; }
.mtp-tw-hm-cell {
	min-height: 34px;
	border: 0;
	border-radius: 5px;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 800;
	cursor: pointer;
	transition: transform 0.1s, box-shadow 0.15s;
	padding: 4px 6px;
}
.mtp-tw-hm-cell:hover {
	transform: scale(1.04);
	box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.55);
	position: relative;
	z-index: 1;
}
.mtp-tw-hm-cell:focus {
	outline: 2px solid #c9a84c;
	outline-offset: 1px;
}
.mtp-tw-hm-empty { font-size: 13px; color: #a89e7d; font-style: italic; padding: 12px 0; }
.mtp-tw-hm-legend {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 14px;
	font-size: 11px;
	color: #a89e7d;
}
.mtp-tw-hm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.mtp-tw-hm-swatch {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 3px;
	font-weight: 800;
	font-size: 10px;
}

.mtp-tw-disclaimer {
	margin-top: 20px;
	font-size: 11.5px;
	color: #8a7a64;
	font-style: italic;
	text-align: center;
}
.mtp-tw-actions {
	margin-top: 14px;
	text-align: center;
}

/* Phone layout: stack vertically with the flip column in the middle */
@media (max-width: 720px) {
	.mtp-tw-pickers {
		grid-template-columns: 1fr;
	}
	.mtp-tw-flip-col {
		flex-direction: row;
		justify-content: center;
		gap: 12px;
		padding: 10px;
	}
	.mtp-tw-flip-arrow { transform: rotate(90deg); }
	.mtp-tw-flip-arrow.is-flipped { transform: rotate(-90deg); }
}

/* ====================================================================
 * v05.14.26.053 , Transfer Wizard LIGHT THEME
 *
 * The .mtp-tw-light class on .mtp-tw-wrap overrides every dark-mode
 * rule from v051+v052. Mirrors the prototype HTML at
 * /mnt/user-data/uploads/mtp-course-comparison-prototype.html.
 *
 * Strategy: rather than rewriting the dark-mode rules in place,
 * .mtp-tw-light is a higher-specificity ancestor that resets colors,
 * backgrounds, typography and layout to the prototype's light palette.
 * Removing the .mtp-tw-light class restores the v052 dark look.
 *
 * Brand tokens (sync with prototype):
 *   --mtp-gold       #c9a84c
 *   --mtp-gold-light #f0c040
 *   --mtp-brown      #3d2e1a
 *   --mtp-cream      #f8f7f4
 *   --mtp-blue       #0077C8
 * ==================================================================== */

.mtp-tw-light {
	--tw-gold:       #c9a84c;
	--tw-brown:      #3d2e1a;
	--tw-cream:      #f8f7f4;
	--tw-blue:       #0077C8;
	--tw-text:       #1a1a1a;
	--tw-text-mid:   #555;
	--tw-text-dim:   #888;
	--tw-line:       rgba(0, 0, 0, 0.1);
	--tw-line-soft:  rgba(0, 0, 0, 0.07);
	--tw-strip:      #f7f6f3;
	--tw-tint:       #f3f2ef;

	/* v05.14.26.056: fill 100% of the container, don't cap. The
	   wizard now expands to whatever width the host page gives it. */
	width: 100%;
	max-width: none;
	margin: 24px 0;
	background: #fff;
	color: var(--tw-text);
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	padding: 24px;
	font-family: 'Nunito', system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	box-sizing: border-box;
}

/* Heading + intro */
.mtp-tw-light .mtp-tw-heading,
.mtp-tw-light .mtp-tc-heading {
	font-family: 'Caveat', cursive;
	font-size: 32px;
	color: var(--tw-brown);
	margin: 0 0 4px;
	line-height: 1.1;
}
.mtp-tw-light .mtp-tw-desc,
.mtp-tw-light .mtp-tc-desc {
	font-size: 13px;
	color: var(--tw-text-dim);
	margin: 0 0 20px;
}

/* Picker grid , prototype's 1fr 90px 1fr layout */
.mtp-tw-light .mtp-tw-pickers {
	display: grid;
	grid-template-columns: 1fr 90px 1fr;
	gap: 0;
	margin-bottom: 16px;
	align-items: start;
}

/* Each side stacks vertically: school strip, course picker, card. */
.mtp-tw-light .mtp-tw-side {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 6px;
	background: transparent !important;
}


/* ====================================================================
 * v06.12.26.001 , LIGHT THEME contrast fix.
 *
 * The alternatives, prereq compare, direction toggle, overlap scores,
 * and side labels were authored for the dark theme (white text at low
 * opacity, light cream) and the .mtp-tw-light override never reached
 * them, so they washed out on the cream page. Restate them in the
 * light palette so every panel is legible.
 * ==================================================================== */

/* Side labels: TRANSFER CREDIT TO / CREDIT EARNED AT, and the school name */
.mtp-tw-light .mtp-tc-label-role { color: var(--tw-gold); font-weight: 700; }
.mtp-tw-light .mtp-tc-label-school { color: var(--tw-brown); }
.mtp-tw-light .mtp-tc-brk-label { color: var(--tw-text-mid); }

/* Direction toggle */
.mtp-tw-light .mtp-tw-dir-btn { color: var(--tw-text-mid); }
.mtp-tw-light .mtp-tw-dir-btn:hover { color: var(--tw-text); background: rgba(0, 0, 0, 0.04); }
.mtp-tw-light .mtp-tw-dir-btn.is-on { background: var(--tw-gold); color: #2c1f0c; }

/* Prerequisite compare */
.mtp-tw-light .mtp-tw-prereq-head { color: var(--tw-brown); }
.mtp-tw-light .mtp-tw-prereq-col-head { color: #7a5c12; }
.mtp-tw-light .mtp-tw-prereq-item { color: var(--tw-text); }
.mtp-tw-light .mtp-tw-prereq-empty { color: var(--tw-text-dim); }
.mtp-tw-light .mtp-tw-prereq-tag-ok { color: #2f6a14; }
.mtp-tw-light .mtp-tw-prereq-tag-warn { color: #8a5a00; }

/* Top matches block */
.mtp-tw-light .mtp-tw-alt-block { background: #faf8f3; border: 1px solid rgba(201, 168, 76, 0.45); }
.mtp-tw-light .mtp-tw-alt-title { color: var(--tw-brown); }
.mtp-tw-light .mtp-tw-alt-title strong { color: var(--tw-gold); }
.mtp-tw-light .mtp-tw-alt-sub { color: var(--tw-text-mid); }
.mtp-tw-light .mtp-tw-alt-card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.12); }
.mtp-tw-light .mtp-tw-alt-card:hover { border-color: var(--tw-gold); }
.mtp-tw-light .mtp-tw-alt-card.is-current { border-color: var(--tw-gold); background: rgba(201, 168, 76, 0.10); }
.mtp-tw-light .mtp-tw-alt-rank { color: var(--tw-text-mid); }
.mtp-tw-light .mtp-tw-alt-rank.is-best { color: #2f7d31; }
.mtp-tw-light .mtp-tw-alt-code { color: #8a6d1f; }
.mtp-tw-light .mtp-tw-alt-name { color: var(--tw-brown); }
.mtp-tw-light .mtp-tw-alt-pct.is-good { color: #2f7d31; }
.mtp-tw-light .mtp-tw-alt-pct.is-mid  { color: #9a6b00; }
.mtp-tw-light .mtp-tw-alt-pct.is-weak { color: #c0392b; }
.mtp-tw-light .mtp-tw-alt-pct-lbl { color: var(--tw-text-dim); }
/* SCHOOL STRIP , small horizontal bar with logo + name */
.mtp-tw-light .mtp-tw-school-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: var(--tw-strip);
	border: 0;
	border-radius: 8px;
	margin: 0 0 6px;
	min-height: 44px;
}
/* Hide our existing internal picker chrome , the strip just shows
   logo + name, and clicking opens the dropdown like always. */
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker {
	flex: 1;
	min-width: 0;
	position: relative;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-shell {
	display: flex;
	align-items: center;
	gap: 8px;
	background: transparent;
	padding: 0;
	min-height: 0;
	border: 0;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo {
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	background: var(--tw-brown);
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px;
	border: 0;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo-img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: #fff;
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 50%;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 0;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-icon {
	color: var(--tw-text-dim);
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-input {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #333;
	min-width: 0;
	flex: 1;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-input::placeholder {
	color: var(--tw-text-dim);
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-clear-btn {
	color: var(--tw-text-dim);
	border-color: var(--tw-text-dim);
}

/* Picker results dropdown , small, white, bordered */
.mtp-tw-light .mtp-tc-picker-results {
	background: #fff;
	border: 1px solid var(--tw-line);
	border-radius: 8px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
	max-height: 280px;
	overflow-y: auto;
	z-index: 50;
}
.mtp-tw-light .mtp-tc-picker-result {
	color: var(--tw-text);
	border-bottom: 1px solid var(--tw-line-soft);
	padding: 8px 10px;
}
.mtp-tw-light .mtp-tc-picker-result:last-child { border-bottom: 0; }
.mtp-tw-light .mtp-tc-picker-result:hover,
.mtp-tw-light .mtp-tc-picker-result.is-kbd {
	background: var(--tw-strip);
}
.mtp-tw-light .mtp-tc-pr-primary  { color: var(--tw-text); font-weight: 700; }
.mtp-tw-light .mtp-tc-pr-secondary { color: var(--tw-text-dim); }
.mtp-tw-light .mtp-tc-pr-thumb {
	background: var(--tw-strip);
	border: 1px solid var(--tw-line-soft);
}
.mtp-tw-light .mtp-tc-pr-thumb-initials {
	color: var(--tw-text-mid);
	font-size: 10px;
}

/* Catalog link , small gold pill below the school strip */
.mtp-tw-light .mtp-tc-catalog-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--tw-gold);
	border: 0;
	color: var(--tw-brown);
	padding: 5px 12px;
	border-radius: 999px;
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0;
	text-decoration: none;
	margin: 0 0 6px;
}
.mtp-tw-light .mtp-tc-catalog-link:hover {
	background: #d4b768;
}
.mtp-tw-light .mtp-tc-catalog-icon { font-size: 12px; }

/* Course block label */
.mtp-tw-light .mtp-tc-label {
	display: block;
	font-size: 9px;
	font-weight: 700;
	color: var(--tw-text-dim);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin: 4px 0 4px;
}

/* Course picker , compact <select>-style strip */
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-picker-shell-course {
	width: 100%;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 7px;
	padding: 6px 10px;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-picker-input-wrap {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 0;
	padding: 0;
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-picker-icon {
	color: var(--tw-text-dim);
	width: 13px;
	height: 13px;
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-picker-input {
	background: transparent !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tw-text);
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-picker-input::placeholder {
	color: var(--tw-text-dim);
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-clear-btn {
	color: var(--tw-text-dim);
	border-color: var(--tw-text-dim);
	width: 18px;
	height: 18px;
	font-size: 13px;
}

/* Flip column , center */
.mtp-tw-light .mtp-tw-flip-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 4px 6px;
}
.mtp-tw-light .mtp-tw-flip-score {
	font-family: 'Nunito', sans-serif;
	font-size: 30px;
	font-weight: 800;
	line-height: 1;
	color: var(--tw-text);
}
.mtp-tw-light .mtp-tw-flip-arrow {
	font-size: 22px;
	color: var(--tw-text-dim);
}
.mtp-tw-light .mtp-tw-flip-label {
	font-size: 9px;
	color: var(--tw-text-dim);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
}
.mtp-tw-light .mtp-tw-flip-btn {
	font-size: 10px;
	padding: 4px 10px;
	background: transparent;
	border: 0.5px solid rgba(0, 0, 0, 0.2);
	border-radius: 6px;
	color: #555;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}
.mtp-tw-light .mtp-tw-flip-btn:hover,
.mtp-tw-light .mtp-tw-flip-btn:focus {
	background: #f0f0f0;
	color: #333;
	border-color: rgba(0, 0, 0, 0.3);
}

/* Course cards */
.mtp-tw-light .mtp-tc-course-card {
	background: #fff;
	border: 0.5px solid rgba(0, 0, 0, 0.1);
	border-radius: 10px;
	padding: 14px;
	margin: 0 0 10px;
	color: var(--tw-text);
}
.mtp-tw-light .mtp-tc-card-kicker {
	display: inline-block;
	background: #E6F1FB;
	color: #185FA5;
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 7px;
	border-radius: 4px;
	margin-bottom: 4px;
}
.mtp-tw-light .mtp-tc-card-kicker-sep { color: #185FA5; opacity: 0.6; margin: 0 3px; }
.mtp-tw-light .mtp-tc-card-title {
	font-family: 'Nunito', sans-serif;
	font-size: 16px;
	font-weight: 800;
	color: var(--tw-text);
	margin: 4px 0 6px;
	letter-spacing: 0;
}
.mtp-tw-light .mtp-tc-card-track {
	display: inline-block;
	background: var(--tw-strip);
	color: var(--tw-text-mid);
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 8px;
	border-radius: 999px;
	border: 0;
	margin-bottom: 8px;
}
.mtp-tw-light .mtp-tc-card-section {
	padding: 8px 0 0;
	border-top: 0;
}
.mtp-tw-light .mtp-tc-card-section-head {
	font-family: 'Nunito', sans-serif;
	font-size: 9px;
	font-weight: 700;
	color: var(--tw-text-dim);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.mtp-tw-light .mtp-tc-card-section-body {
	font-size: 11px;
	color: var(--tw-text-mid);
	line-height: 1.5;
}
.mtp-tw-light .mtp-tc-card-prereq-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mtp-tw-light .mtp-tc-card-prereq-list li {
	display: inline-block;
	font-size: 10px;
	background: var(--tw-strip);
	color: var(--tw-text-mid);
	padding: 2px 6px;
	border-radius: 3px;
	margin: 1px;
}

/* Verdict strip */
.mtp-tw-light .mtp-tw-verdict {
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 12px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 0.5px solid transparent;
}
.mtp-tw-light .mtp-tw-verdict.is-strong  { background: #EAF3DE; border-color: #639922; }
.mtp-tw-light .mtp-tw-verdict.is-partial { background: #FAEEDA; border-color: #EF9F27; }
.mtp-tw-light .mtp-tw-verdict.is-weak    { background: #FCEBEB; border-color: #E24B4A; }
.mtp-tw-light .mtp-tw-verdict-icon {
	font-size: 17px;
	flex-shrink: 0;
	margin-top: 1px;
}
.mtp-tw-light .mtp-tw-verdict.is-strong  .mtp-tw-verdict-icon { color: #27500A; }
.mtp-tw-light .mtp-tw-verdict.is-partial .mtp-tw-verdict-icon { color: #854F0B; }
.mtp-tw-light .mtp-tw-verdict.is-weak    .mtp-tw-verdict-icon { color: #A32D2D; }
.mtp-tw-light .mtp-tw-verdict-body { flex: 1; }
.mtp-tw-light .mtp-tw-verdict-title { font-size: 13px; font-weight: 700; }
.mtp-tw-light .mtp-tw-verdict.is-strong  .mtp-tw-verdict-title { color: #27500A; }
.mtp-tw-light .mtp-tw-verdict.is-partial .mtp-tw-verdict-title { color: #854F0B; }
.mtp-tw-light .mtp-tw-verdict.is-weak    .mtp-tw-verdict-title { color: #A32D2D; }
.mtp-tw-light .mtp-tw-verdict-reverse {
	font-size: 11px;
	opacity: 0.75;
	margin-left: 8px;
	letter-spacing: 0;
}
.mtp-tw-light .mtp-tw-verdict-sub { font-size: 11px; opacity: 0.8; margin-top: 2px; }
.mtp-tw-light .mtp-tw-verdict.is-strong  .mtp-tw-verdict-sub,
.mtp-tw-light .mtp-tw-verdict.is-strong  .mtp-tw-verdict-reverse { color: #27500A; }
.mtp-tw-light .mtp-tw-verdict.is-partial .mtp-tw-verdict-sub,
.mtp-tw-light .mtp-tw-verdict.is-partial .mtp-tw-verdict-reverse { color: #854F0B; }
.mtp-tw-light .mtp-tw-verdict.is-weak    .mtp-tw-verdict-sub,
.mtp-tw-light .mtp-tw-verdict.is-weak    .mtp-tw-verdict-reverse { color: #A32D2D; }

/* Tabs */
.mtp-tw-light .mtp-tw-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--tw-line);
	margin: 0 0 14px;
}
.mtp-tw-light .mtp-tw-tab {
	padding: 8px 16px;
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 500;
	color: var(--tw-text-dim);
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	cursor: pointer;
	margin-bottom: -1px;
	letter-spacing: 0;
	text-transform: none;
}
.mtp-tw-light .mtp-tw-tab:hover { color: #333; }
.mtp-tw-light .mtp-tw-tab.is-on {
	color: var(--tw-blue);
	border-bottom-color: var(--tw-blue);
	font-weight: 700;
}

/* Tab bodies */
.mtp-tw-light .mtp-tw-tab-body { padding-top: 14px; }
.mtp-tw-light .mtp-tw-section-head {
	font-size: 10px;
	font-weight: 700;
	color: var(--tw-text-dim);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

/* Topic overlap tab */
.mtp-tw-light .mtp-tc-topic-map {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
}
.mtp-tw-light .mtp-tc-tm-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 12px;
}
.mtp-tw-light .mtp-tc-tm-col-head {
	font-size: 10px;
	font-weight: 700;
	color: var(--tw-text-dim);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 8px;
	padding: 0;
	border: 0;
}
.mtp-tw-light .mtp-tc-tm-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
}
.mtp-tw-light .mtp-tc-tm-chip {
	display: inline-block;
	padding: 3px 9px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 400;
	margin: 2px;
	line-height: 1.5;
	border: 0;
}
.mtp-tw-light .mtp-tc-tm-chip.is-match {
	background: #EAF3DE;
	color: #27500A;
}
.mtp-tw-light .mtp-tc-tm-chip.is-only {
	background: var(--tw-tint);
	color: #666;
}
.mtp-tw-light .mtp-tc-tm-chip-icon { display: none; }
.mtp-tw-light .mtp-tc-tm-legend {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 11px;
	color: var(--tw-text-dim);
	border: 0;
	padding-top: 8px;
	margin-top: 4px;
}
.mtp-tw-light .mtp-tc-tm-dot {
	display: inline-block;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	margin-right: 4px;
}
.mtp-tw-light .mtp-tc-tm-dot.is-match { background: #EAF3DE; border: 1px solid #639922; }
.mtp-tw-light .mtp-tc-tm-dot.is-only  { background: var(--tw-tint); border: 1px solid #ccc; }

/* Breakdown bars (in light theme) */
.mtp-tw-light .mtp-tw-breakdown-wrap {
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--tw-line);
}
.mtp-tw-light .mtp-tc-breakdown { background: transparent; border: 0; padding: 0; }
.mtp-tw-light .mtp-tc-brk-row {
	display: grid;
	grid-template-columns: 130px 1fr 50px;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	padding: 4px 0;
}
.mtp-tw-light .mtp-tc-brk-label { color: var(--tw-text-mid); }
.mtp-tw-light .mtp-tc-brk-bar {
	height: 8px;
	background: #eee;
	border-radius: 4px;
	overflow: hidden;
}
.mtp-tw-light .mtp-tc-brk-fill { background: var(--tw-blue); height: 100%; }
.mtp-tw-light .mtp-tc-brk-val { color: var(--tw-text-mid); text-align: right; font-weight: 700; }

/* My Knowledge tab */
.mtp-tw-light .mtp-tw-mk-intro {
	font-size: 12px;
	color: var(--tw-text-mid);
	margin: 0 0 12px;
}
.mtp-tw-light .mtp-tw-mk-score {
	background: var(--tw-strip);
	border: 0;
	border-radius: 0;
	padding: 0;
	margin-bottom: 14px;
}
.mtp-tw-light .mtp-tw-mk-score-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-size: 11px;
	color: var(--tw-text-mid);
	margin-bottom: 5px;
	background: transparent;
}
.mtp-tw-light .mtp-tw-mk-score-pct {
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 700;
	color: var(--tw-text-mid);
}
.mtp-tw-light .mtp-tw-mk-bar {
	height: 10px;
	background: #eee;
	border-radius: 5px;
	overflow: hidden;
	display: flex;
}
.mtp-tw-light .mtp-tw-mk-bar-base  { background: #B4B2A9; }
.mtp-tw-light .mtp-tw-mk-bar-added { background: #3B6D11; }
.mtp-tw-light .mtp-tw-mk-verdict {
	font-size: 11px;
	color: var(--tw-text-dim);
	margin-top: 5px;
}
.mtp-tw-light .mtp-tw-mk-list { display: block; }
.mtp-tw-light .mtp-tw-mk-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 0;
	border-bottom: 0.5px solid var(--tw-line-soft);
	background: transparent;
	font-size: 12px;
}
.mtp-tw-light .mtp-tw-mk-row:hover { background: transparent; }
.mtp-tw-light .mtp-tw-mk-row input {
	width: 14px;
	height: 14px;
	accent-color: var(--tw-blue);
}
.mtp-tw-light .mtp-tw-mk-name { color: var(--tw-text); }
.mtp-tw-light .mtp-tw-mk-pts {
	font-size: 10px;
	font-weight: 700;
	background: #EAF3DE;
	color: #3B6D11;
	padding: 2px 7px;
	border-radius: 3px;
}

/* Heat map tab */
.mtp-tw-light .mtp-tw-hm-intro {
	font-size: 11px;
	color: var(--tw-text-mid);
	margin: 0 0 10px;
}
.mtp-tw-light .mtp-tw-hm-intro strong { color: var(--tw-text); }
.mtp-tw-light .mtp-tw-hm-grid {
	display: grid;
	gap: 3px;
}
.mtp-tw-light .mtp-tw-hm-th {
	font-size: 9px;
	font-weight: 700;
	color: var(--tw-text-dim);
	letter-spacing: 0.03em;
	text-transform: uppercase;
	padding: 4px 3px;
}
.mtp-tw-light .mtp-tw-hm-cell {
	min-height: 38px;
	border: 0;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	cursor: pointer;
	padding: 4px;
}
.mtp-tw-light .mtp-tw-hm-cell:hover {
	opacity: 0.82;
	transform: none;
	box-shadow: none;
}
.mtp-tw-light .mtp-tw-hm-legend {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 11px;
	color: var(--tw-text-dim);
	margin-top: 12px;
}

/* Disclaimer + reset */
.mtp-tw-light .mtp-tw-disclaimer,
.mtp-tw-light .mtp-tc-disclaimer {
	font-size: 10px;
	color: #aaa;
	text-align: center;
	margin-top: 16px;
	font-style: normal;
	font-weight: 400;
}
.mtp-tw-light .mtp-tw-actions { text-align: center; margin-top: 12px; }
.mtp-tw-light .mtp-tc-btn-reset {
	background: #fff;
	border: 0.5px solid rgba(0, 0, 0, 0.2);
	color: var(--tw-text-mid);
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 6px;
	cursor: pointer;
}
.mtp-tw-light .mtp-tc-btn-reset:hover {
	background: #f0f0f0;
	color: var(--tw-text);
}

/* Status line */
.mtp-tw-light .mtp-tc-status {
	font-size: 11px;
	color: var(--tw-text-dim);
	margin-top: 8px;
}

/* v05.17.26.093: previously this rule hid the entire compare panel
   in light theme. That was correct when the panel was unused, but
   we now ship the comparison panel HTML inside the loader shell and
   the renderer populates the compact flip-header + verdict strip +
   tabs which all live INSIDE this panel. So the panel itself must
   render; only the legacy score-card block (which the new compact
   header replaces) stays hidden via the rules just below.

   The .mtp-tc-is-hidden class still wins via !important when the
   renderer needs to hide the panel pre-selection, since setBlock-
   Visible('both-courses', false) toggles that class. */
.mtp-tw-light .mtp-tc-compare-panel:not(.mtp-tc-is-hidden) { display: block; }

/* Hide the legacy directional score block inside the compare
   panel (already display:none via parent, but explicit for safety). */
.mtp-tw-light .mtp-tc-score-card,
.mtp-tw-light .mtp-tc-score-direction,
.mtp-tw-light .mtp-tc-score-badge,
.mtp-tw-light .mtp-tc-score-pct,
.mtp-tw-light .mtp-tc-score-verdict,
.mtp-tw-light .mtp-tc-score-reverse,
.mtp-tw-light .mtp-tc-flip-btn { display: none; }

/* Mobile */
@media (max-width: 720px) {
	.mtp-tw-light .mtp-tw-pickers {
		grid-template-columns: 1fr;
	}
	.mtp-tw-light .mtp-tw-flip-col {
		flex-direction: row;
		justify-content: center;
		padding: 8px;
	}
}

/* ============================================================
 * v05.14.26.055 , Grouped dropdown with state headers
 *
 * Matches the user's reference image: small gold uppercase state
 * label, clean rows with dividers, bold school name, no thumbnails,
 * and a blue "+ Request Your School" action row pinned at the
 * bottom.
 * ============================================================ */
.mtp-tw-light .mtp-tc-picker-results {
	padding: 0;
	background: #1a1a1a;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
	overflow-y: auto;
	max-height: 360px;
	min-width: 260px;
}

.mtp-tw-light .mtp-tc-picker-group + .mtp-tc-picker-group {
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mtp-tw-light .mtp-tc-picker-group-head {
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tw-gold);
	background: rgba(255, 255, 255, 0.03);
	padding: 8px 14px 6px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mtp-tw-light .mtp-tc-picker-result {
	display: block;
	width: 100%;
	padding: 11px 14px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	text-align: left;
	cursor: pointer;
	font-family: 'Nunito', sans-serif;
	color: #f5f5f5;
}
.mtp-tw-light .mtp-tc-picker-result:hover,
.mtp-tw-light .mtp-tc-picker-result.is-kbd {
	background: rgba(255, 255, 255, 0.05);
}
.mtp-tw-light .mtp-tc-picker-group .mtp-tc-picker-result:last-child {
	border-bottom: 0;
}
.mtp-tw-light .mtp-tc-pr-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.mtp-tw-light .mtp-tc-pr-primary {
	font-size: 14px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 0.01em;
	text-transform: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mtp-tw-light .mtp-tc-pr-secondary {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0;
	text-transform: none;
}

/* Hide thumbnails in the light-theme dropdown , the reference is
   a pure text list. */
.mtp-tw-light .mtp-tc-pr-thumb { display: none; }

/* + Request Your School action row */
.mtp-tw-light .mtp-tc-picker-request {
	display: block;
	width: 100%;
	padding: 13px 14px;
	background: transparent;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	color: #6FB6F0;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	cursor: pointer;
}
.mtp-tw-light .mtp-tc-picker-request:hover,
.mtp-tw-light .mtp-tc-picker-request:focus {
	background: rgba(110, 182, 240, 0.08);
	color: #95cdff;
}
.mtp-tw-light .mtp-tc-picker-request span {
	color: var(--tw-blue);
	font-weight: 800;
	margin-right: 6px;
}

.mtp-tw-light .mtp-tc-picker-empty {
	padding: 14px;
	color: rgba(255, 255, 255, 0.55);
	font-size: 13px;
	text-align: center;
}

/* ============================================================
 * v05.14.26.056 , Request Your School modal
 * Matches the existing roadmap modal aesthetic: dark backdrop,
 * dark panel, Caveat heading, gold field labels, gold submit
 * button. Self-contained inside the wizard so it works even on
 * pages that don't load the coursewizard widget.
 * ============================================================ */
.mtp-tw-req-modal[hidden] { display: none !important; }
.mtp-tw-req-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	font-family: 'Nunito', system-ui, sans-serif;
}
.mtp-tw-req-ov {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
}
.mtp-tw-req-panel {
	position: relative;
	z-index: 1;
	background: #1a1a1a;
	border: 1px solid rgba(201, 168, 76, 0.18);
	border-radius: 12px;
	padding: 32px 32px 28px;
	width: 100%;
	max-width: 520px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	color: #f0e6cf;
}
.mtp-tw-req-close {
	position: absolute;
	top: 14px;
	right: 18px;
	background: transparent;
	border: 0;
	color: #c9a84c;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.15s;
}
.mtp-tw-req-close:hover,
.mtp-tw-req-close:focus { color: #f0c040; outline: none; }

.mtp-tw-req-heading {
	font-family: 'Caveat', cursive;
	font-size: 36px;
	color: #f5ecd3;
	margin: 0 0 8px;
	line-height: 1.1;
	font-weight: 700;
}
.mtp-tw-req-sub {
	font-size: 14px;
	color: #c4b894;
	line-height: 1.55;
	margin: 0 0 22px;
}

.mtp-tw-req-msg {
	font-size: 13px;
	padding: 0;
	margin: 0 0 8px;
	color: transparent;
	min-height: 0;
}
.mtp-tw-req-msg.is-error {
	color: #f48a89;
	background: rgba(226, 75, 74, 0.1);
	border: 1px solid rgba(226, 75, 74, 0.3);
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 14px;
	min-height: auto;
}
.mtp-tw-req-msg.is-ok {
	color: #aedc7c;
	background: rgba(99, 153, 34, 0.1);
	border: 1px solid rgba(99, 153, 34, 0.35);
	padding: 8px 12px;
	border-radius: 6px;
	margin-bottom: 14px;
	min-height: auto;
}

.mtp-tw-req-label {
	display: block;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #c9a84c;
	margin: 14px 0 6px;
}
.mtp-tw-req-label:first-of-type { margin-top: 0; }
.mtp-tw-req-required { color: #c9a84c; }

.mtp-tw-req-input,
.mtp-tw-req-textarea {
	width: 100%;
	background: transparent;
	border: 1px solid rgba(201, 168, 76, 0.3);
	border-radius: 6px;
	padding: 10px 14px;
	color: #f0e6cf;
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.mtp-tw-req-input:focus,
.mtp-tw-req-textarea:focus {
	outline: none;
	border-color: #c9a84c;
	background: rgba(255, 255, 255, 0.02);
}
.mtp-tw-req-input::placeholder,
.mtp-tw-req-textarea::placeholder {
	color: rgba(255, 255, 255, 0.35);
}
.mtp-tw-req-textarea {
	resize: vertical;
	min-height: 80px;
	font-family: 'Nunito', sans-serif;
}

.mtp-tw-req-hint {
	font-size: 12px;
	color: #c9a84c;
	margin-top: 5px;
	margin-bottom: 4px;
}

/* Honeypot , visually hide but accessible */
.mtp-tw-req-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
	pointer-events: none !important;
	tab-index: -1;
}

.mtp-tw-req-submit {
	width: 100%;
	margin-top: 24px;
	background: #c9a84c;
	border: 0;
	border-radius: 8px;
	padding: 14px 24px;
	color: #fff;
	font-family: 'Nunito', sans-serif;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
	transition: background 0.15s, opacity 0.15s;
}
.mtp-tw-req-submit:hover:not(:disabled),
.mtp-tw-req-submit:focus:not(:disabled) {
	background: #d4b768;
	outline: none;
}
.mtp-tw-req-submit:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* Prevent body scroll when modal is open */
body.mtp-tw-req-open {
	overflow: hidden;
}

@media (max-width: 540px) {
	.mtp-tw-req-panel {
		padding: 24px 20px 20px;
		max-height: 100vh;
		border-radius: 8px;
	}
	.mtp-tw-req-heading { font-size: 28px; }
}

/* ============================================================================
 * v05.17.26.076: Five template variants for Course Compare cross-origin
 * embeds. Each variant overrides the CSS custom properties defined in
 * .mtp-tw-light and adds a few targeted polish rules so the partner site
 * sees a visually distinct widget for each template choice.
 *
 * The wrap class structure when a template is active:
 *   <div class="mtp-tw-wrap mtp-tw-light mtp-tc-wrap mtp-tc-tpl-{key}" ...>
 *
 * Variants ship in this release: axiom | limit | vector | mtp_dark | mtp_light
 * Server allowlist in render_shell() is the source of truth for keys.
 *
 * Design philosophy: each variant is recognizable at a glance but the
 * widget functionality is identical. Pickers, course catalogs, score
 * displays, and self-assessment all keep their existing layout , the
 * variant only re-themes colors, typography, and surface treatments.
 * ========================================================================= */

/* ----- Axiom , Minimal sans, clean, editorial ----------------------------- */
.mtp-tc-tpl-axiom {
	--tw-gold:       #2c2c2c;
	--tw-brown:      #1a1a1a;
	--tw-cream:      #ffffff;
	--tw-blue:       #0066cc;
	--tw-text:       #1a1a1a;
	--tw-text-mid:   #4a4a4a;
	--tw-text-dim:   #7a7a7a;
	--tw-line:       rgba(0, 0, 0, 0.08);
	--tw-line-soft:  rgba(0, 0, 0, 0.04);
	--tw-strip:      #fafafa;
	--tw-tint:       #f5f5f5;
	background: #ffffff;
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}
.mtp-tc-tpl-axiom .mtp-tw-heading,
.mtp-tc-tpl-axiom .mtp-tc-heading {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 22px;
	font-weight: 700;
	color: #1a1a1a;
	letter-spacing: -0.01em;
}
.mtp-tc-tpl-axiom .mtp-tw-desc,
.mtp-tc-tpl-axiom .mtp-tc-desc {
	color: #4a4a4a;
	font-size: 13px;
}

/* ----- Limit , Glass + soft gradient backdrop ----------------------------- */
.mtp-tc-tpl-limit {
	--tw-gold:       #6b8cae;
	--tw-brown:      #2d3e54;
	--tw-cream:      rgba(255, 255, 255, 0.7);
	--tw-blue:       #4a6fa5;
	--tw-text:       #1f2937;
	--tw-text-mid:   #4a5568;
	--tw-text-dim:   #718096;
	--tw-line:       rgba(74, 111, 165, 0.18);
	--tw-line-soft:  rgba(74, 111, 165, 0.08);
	--tw-strip:      rgba(255, 255, 255, 0.6);
	--tw-tint:       rgba(255, 255, 255, 0.45);
	background:
		linear-gradient(135deg, rgba(238, 245, 252, 0.85) 0%, rgba(244, 240, 250, 0.85) 50%, rgba(252, 246, 240, 0.85) 100%),
		#fafbfd;
	border: 1px solid rgba(74, 111, 165, 0.2);
	border-radius: 16px;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 4px 20px rgba(74, 111, 165, 0.08);
}
.mtp-tc-tpl-limit .mtp-tw-heading,
.mtp-tc-tpl-limit .mtp-tc-heading {
	font-family: 'Caveat', cursive;
	font-size: 36px;
	color: #2d3e54;
}
.mtp-tc-tpl-limit .mtp-tw-desc,
.mtp-tc-tpl-limit .mtp-tc-desc {
	color: #4a5568;
}

/* ----- Vector , Action cards, 4-card save grid feel ----------------------- */
.mtp-tc-tpl-vector {
	--tw-gold:       #ea580c;
	--tw-brown:      #1c1917;
	--tw-cream:      #fafaf9;
	--tw-blue:       #2563eb;
	--tw-text:       #1c1917;
	--tw-text-mid:   #44403c;
	--tw-text-dim:   #78716c;
	--tw-line:       rgba(28, 25, 23, 0.12);
	--tw-line-soft:  rgba(28, 25, 23, 0.06);
	--tw-strip:      #f5f5f4;
	--tw-tint:       #e7e5e4;
	background: #fafaf9;
	border: 2px solid #1c1917;
	border-radius: 10px;
	box-shadow: 4px 4px 0 #1c1917;
}
.mtp-tc-tpl-vector .mtp-tw-heading,
.mtp-tc-tpl-vector .mtp-tc-heading {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-weight: 900;
	font-size: 28px;
	color: #1c1917;
	text-transform: uppercase;
	letter-spacing: -0.02em;
}
.mtp-tc-tpl-vector .mtp-tw-desc,
.mtp-tc-tpl-vector .mtp-tc-desc {
	color: #44403c;
	font-weight: 500;
}
.mtp-tc-tpl-vector .mtp-tc-picker-shell {
	border: 2px solid #1c1917;
	box-shadow: 2px 2px 0 #1c1917;
}

/* ----- MTP Official Dark , olive-black + gold ----------------------------- */
.mtp-tc-tpl-mtp_dark {
	--tw-gold:       #c9a84c;
	--tw-brown:      #c9a84c;
	--tw-cream:      #1a1c12;
	--tw-blue:       #5CB8E8;
	--tw-text:       #f8f4e6;
	--tw-text-mid:   #d4c8a8;
	--tw-text-dim:   #9a8860;
	--tw-line:       rgba(201, 168, 76, 0.25);
	--tw-line-soft:  rgba(201, 168, 76, 0.12);
	--tw-strip:      #232518;
	--tw-tint:       #2b2d1e;
	background: #1a1c12;
	color: #f8f4e6;
	border: 1px solid rgba(201, 168, 76, 0.35);
	border-radius: 12px;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}
.mtp-tc-tpl-mtp_dark .mtp-tw-heading,
.mtp-tc-tpl-mtp_dark .mtp-tc-heading {
	font-family: 'Caveat', cursive;
	font-size: 34px;
	color: #c9a84c;
	font-weight: 700;
}
.mtp-tc-tpl-mtp_dark .mtp-tw-desc,
.mtp-tc-tpl-mtp_dark .mtp-tc-desc {
	color: #d4c8a8;
}
.mtp-tc-tpl-mtp_dark .mtp-tc-picker-shell,
.mtp-tc-tpl-mtp_dark .mtp-tc-picker {
	background: #232518;
	border-color: rgba(201, 168, 76, 0.3);
}
.mtp-tc-tpl-mtp_dark input,
.mtp-tc-tpl-mtp_dark .mtp-tc-picker-input-wrap input {
	background: #2b2d1e;
	color: #f8f4e6;
	border-color: rgba(201, 168, 76, 0.3);
}
.mtp-tc-tpl-mtp_dark input::placeholder {
	color: #9a8860;
}

/* ----- MTP Official Light , cream + MTP Blue ------------------------------ */
.mtp-tc-tpl-mtp_light {
	--tw-gold:       #c9a84c;
	--tw-brown:      #3d2e1a;
	--tw-cream:      #f8f7f4;
	--tw-blue:       #0077C8;
	--tw-text:       #1a1a1a;
	--tw-text-mid:   #5a4a2a;
	--tw-text-dim:   #7a6032;
	--tw-line:       rgba(61, 46, 26, 0.14);
	--tw-line-soft:  rgba(61, 46, 26, 0.07);
	--tw-strip:      #f8f7f4;
	--tw-tint:       #f3f0e8;
	background: #f8f7f4;
	color: #1a1a1a;
	border: 1px solid rgba(61, 46, 26, 0.12);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(61, 46, 26, 0.06);
}
.mtp-tc-tpl-mtp_light .mtp-tw-heading,
.mtp-tc-tpl-mtp_light .mtp-tc-heading {
	font-family: 'Caveat', cursive;
	font-size: 34px;
	color: #3d2e1a;
	font-weight: 700;
}
.mtp-tc-tpl-mtp_light .mtp-tw-desc,
.mtp-tc-tpl-mtp_light .mtp-tc-desc {
	color: #5a4a2a;
}

/* Action buttons across all variants get the variant's blue accent when
   they appear as primary CTAs. Cheap polish that makes the variants
   feel actually different even on shared button markup. */
.mtp-tc-tpl-axiom .mtp-tw-req-submit,
.mtp-tc-tpl-mtp_light .mtp-tw-req-submit {
	background: var(--tw-blue);
	color: #ffffff;
	border-color: var(--tw-blue);
}
.mtp-tc-tpl-mtp_dark .mtp-tw-req-submit {
	background: var(--tw-blue);
	color: #1a1c12;
	border-color: var(--tw-blue);
}
.mtp-tc-tpl-vector .mtp-tw-req-submit {
	background: var(--tw-gold);
	color: #ffffff;
	border: 2px solid #1c1917;
	box-shadow: 2px 2px 0 #1c1917;
	font-weight: 700;
}
.mtp-tc-tpl-limit .mtp-tw-req-submit {
	background: var(--tw-blue);
	color: #ffffff;
	border-radius: 999px;
}

/* End of v076 template variants. */

/* ============================================================================
 * v05.17.26.092 , Visibility convention unification
 *
 * The widget had a long-running bug class: elements with both a `hidden`
 * attribute in markup AND an explicit CSS `display:` rule (flex,
 * inline-flex, block) were SHOWING when they should have been hidden,
 * because the CSS rule's specificity beat the `hidden` attribute's
 * default `display: none`. Affected elements: catalog-link,
 * course-block, course-card, picker-logo, card-track.
 *
 * Fix: a utility class with `!important` that wins on both specificity
 * and importance. Used in markup alongside the `hidden` attribute (for
 * accessibility / screen readers); CSS-side toggling happens via this
 * class. The renderer's setBlockVisible toggles BOTH the attribute
 * AND this class so the two systems stay in sync.
 * ========================================================================= */
.mtp-tc-is-hidden { display: none !important; }

/* ============================================================================
 * v05.17.26.090 , Bigger school logos, ghost autocomplete, paste rejection
 *
 * Changes vs v076:
 *   - School strip logo bumped from 28px to 56px
 *   - Dropdown thumb (was hidden in v055 light theme) re-shown at 36px
 *   - Ghost autocomplete suffix overlays the input with muted text
 *   - Paste/drop rejection flashes a red outline for 600ms
 * ========================================================================= */

/* --- Bigger logo in the selected-school strip --- */
.mtp-tw-light .mtp-tw-school-row {
	min-height: 64px;
	gap: 12px;
	padding: 8px 14px;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo {
	width: 56px;
	height: 56px;
	padding: 6px;
	background: var(--tw-cream, #f8f7f4);
	border: 1.5px solid var(--tw-line, rgba(0, 0, 0, 0.1));
	border-radius: 8px;
}
.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo-initials {
	background: var(--tw-brown);
	color: #fff;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0.5px;
	border-radius: 6px;
}

/* --- Show + size the school logo in the dropdown rows --- */
.mtp-tw-light .mtp-tc-pr-thumb {
	display: flex !important;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 5px;
	padding: 3px;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	margin-right: 10px;
}
.mtp-tw-light .mtp-tc-pr-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.mtp-tw-light .mtp-tc-pr-thumb-initials {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(201, 168, 76, 0.18);
	color: var(--tw-gold);
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 800;
	border-radius: 3px;
}
.mtp-tw-light .mtp-tc-picker-result-school {
	display: flex !important;
	align-items: center;
}

/* --- Ghost autocomplete overlay --- */
.mtp-tc-input-ghost-wrap {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	min-width: 0;
}
.mtp-tc-input-ghost-wrap input.mtp-tc-picker-input {
	position: relative;
	background: transparent !important;
	z-index: 2;
}
.mtp-tc-ghost {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	pointer-events: none;
	font: inherit;
	white-space: pre;
	overflow: hidden;
	z-index: 1;
}
.mtp-tc-ghost-spacer {
	/* mirrors the typed text; invisible so the suffix lines up
	   right after the user's caret. font + transform must match
	   the real input exactly. */
	color: transparent;
	font: inherit;
	visibility: visible;
	white-space: pre;
}
.mtp-tc-ghost-suffix {
	color: rgba(255, 255, 255, 0.32);
	font: inherit;
}
/* Light theme: muted dark suffix */
.mtp-tw-light .mtp-tc-ghost-suffix {
	color: rgba(0, 0, 0, 0.32);
}
.mtp-tc-tpl-mtp_dark .mtp-tc-ghost-suffix {
	color: rgba(255, 255, 255, 0.32);
}
/* School picker inputs are uppercase. Ghost must match so the
   spacer width is identical to the rendered input text. */
.mtp-tw-light .mtp-tw-school-row .mtp-tc-ghost-spacer,
.mtp-tw-light .mtp-tw-school-row .mtp-tc-ghost-suffix {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 11px;
	font-weight: 700;
}
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-ghost-spacer,
.mtp-tw-light .mtp-tc-picker-course .mtp-tc-ghost-suffix {
	font-size: 12px;
	font-weight: 600;
}

/* --- Paste rejection flash --- */
.mtp-tc-picker-input-wrap.mtp-tc-paste-rejected {
	box-shadow: 0 0 0 2px rgba(226, 75, 74, 0.55);
	border-radius: 6px;
	transition: box-shadow 0.15s ease-out;
}

/* --- Mobile: keep strip readable but not gigantic on phones --- */
@media (max-width: 540px) {
	.mtp-tw-light .mtp-tw-school-row {
		min-height: 56px;
	}
	.mtp-tw-light .mtp-tw-school-row .mtp-tc-picker-logo {
		width: 44px;
		height: 44px;
	}
	.mtp-tw-light .mtp-tc-pr-thumb {
		width: 30px;
		height: 30px;
	}
}

/* ============================================================================
 * v05.17.26.093 , Compare panel layout scaffolding
 *
 * The v088 loader shell rewrite dropped the compare panel entirely.
 * v093 puts it back. The existing stylesheet already had rules for
 * .mtp-tw-flip-btn, .mtp-tw-verdict, .mtp-tw-tab, and .mtp-tw-mk-bar.
 * The rules below cover the new scaffold class names (header rows,
 * topic columns, heatmap header area) so the panel actually has
 * structure when it renders.
 *
 * Light-theme appropriate: dark navy palette + gold accents,
 * matching the existing panel CSS.
 * ========================================================================= */
.mtp-tw-light .mtp-tc-compare-panel {
	margin-top: 18px;
	padding: 18px 20px 22px;
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
}
.mtp-tw-light .mtp-tw-flip-header {
	display: flex;
	align-items: center;
	gap: 14px;
	justify-content: space-between;
	padding: 6px 4px 14px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	margin-bottom: 14px;
}
.mtp-tw-light .mtp-tw-flip-from,
.mtp-tw-light .mtp-tw-flip-to {
	flex: 0 1 auto;
	color: var(--tw-text, #f0e6cf);
	font-family: 'Nunito', sans-serif;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	max-width: 38%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mtp-tw-light .mtp-tw-flip-to { text-align: right; }
.mtp-tw-light .mtp-tw-flip-center {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
}
.mtp-tw-light .mtp-tw-flip-score-num {
	font-family: 'Nunito', sans-serif;
	font-size: 22px;
	font-weight: 900;
	letter-spacing: 0;
}
.mtp-tw-light .mtp-tw-flip-arrow {
	display: inline-block;
	font-size: 18px;
	color: var(--tw-gold, #c9a84c);
	margin-right: 8px;
	transition: transform 0.2s ease-out;
}
.mtp-tw-light .mtp-tw-flip-arrow.is-flipped { transform: scaleX(-1); }
.mtp-tw-light .mtp-tw-flip-label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tw-text-dim, #B4B2A9);
	margin-left: 8px;
}

/* --- Topic overlap grid --- */
.mtp-tw-light .mtp-tw-tm-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	padding: 4px 0 10px;
}
.mtp-tw-light .mtp-tw-tm-col {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 12px 14px;
	min-width: 0;
}
.mtp-tw-light .mtp-tw-tm-head {
	font-family: 'Nunito', sans-serif;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tw-gold, #c9a84c);
	margin-bottom: 10px;
}
.mtp-tw-light .mtp-tw-tm-list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.mtp-tw-light .mtp-tw-tm-legend {
	display: flex;
	gap: 18px;
	padding-top: 8px;
	font-size: 11px;
	color: var(--tw-text-dim, #B4B2A9);
	flex-wrap: wrap;
}
.mtp-tw-light .mtp-tw-tm-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	margin-right: 4px;
	font-size: 11px;
	font-weight: 700;
}
.mtp-tw-light .mtp-tw-tm-swatch.is-match { background: rgba(99, 153, 34, 0.2); color: #aedc7c; }
.mtp-tw-light .mtp-tw-tm-swatch.is-only  { background: rgba(255, 255, 255, 0.06); color: var(--tw-text-dim, #B4B2A9); }

/* --- My knowledge tab --- */
.mtp-tw-light .mtp-tw-mk-head { margin-bottom: 10px; }
.mtp-tw-light .mtp-tw-mk-title {
	font-family: 'Nunito', sans-serif;
	font-size: 14px;
	font-weight: 800;
	color: var(--tw-text, #f0e6cf);
	margin-bottom: 4px;
}
.mtp-tw-light .mtp-tw-mk-sub {
	font-size: 12px;
	color: var(--tw-text-dim, #B4B2A9);
	line-height: 1.55;
}
.mtp-tw-light .mtp-tw-mk-pctline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 8px 0 12px;
	color: var(--tw-text, #f0e6cf);
	font-size: 12px;
}
.mtp-tw-light .mtp-tw-mk-pct {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--tw-gold, #c9a84c);
}
.mtp-tw-light .mtp-tw-mk-verdict {
	font-size: 12px;
	color: var(--tw-text-dim, #B4B2A9);
	font-style: italic;
}
.mtp-tw-light .mtp-tw-mk-list { display: block; }
.mtp-tw-light .mtp-tw-mk-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 6px;
	margin-bottom: 6px;
	cursor: pointer;
}
.mtp-tw-light .mtp-tw-mk-row:hover { background: rgba(255, 255, 255, 0.045); }
.mtp-tw-light .mtp-tw-mk-name {
	flex: 1;
	font-size: 12.5px;
	color: var(--tw-text, #f0e6cf);
}
.mtp-tw-light .mtp-tw-mk-pts {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 12px;
	color: #aedc7c;
}
.mtp-tw-light .mtp-tw-mk-empty {
	padding: 14px;
	background: rgba(99, 153, 34, 0.1);
	border: 1px solid rgba(99, 153, 34, 0.25);
	border-radius: 6px;
	color: #aedc7c;
	font-size: 12.5px;
}

/* --- Heat map --- */
.mtp-tw-light .mtp-tw-hm-head { margin-bottom: 10px; }
.mtp-tw-light .mtp-tw-hm-title {
	font-family: 'Nunito', sans-serif;
	font-size: 13px;
	font-weight: 800;
	color: var(--tw-text, #f0e6cf);
	margin-bottom: 4px;
}
.mtp-tw-light .mtp-tw-hm-sub {
	font-size: 11.5px;
	color: var(--tw-text-dim, #B4B2A9);
}
.mtp-tw-light .mtp-tw-hm-loading {
	padding: 14px;
	text-align: center;
	color: var(--tw-text-dim, #B4B2A9);
	font-size: 12px;
}
.mtp-tw-light .mtp-tw-hm-grid {
	display: grid;
	gap: 2px;
	margin-top: 8px;
	overflow-x: auto;
	max-width: 100%;
}
.mtp-tw-light .mtp-tw-hm-th {
	font-family: 'Nunito', sans-serif;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: var(--tw-text-dim, #B4B2A9);
	background: rgba(255, 255, 255, 0.025);
	padding: 5px 4px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	border-radius: 2px;
}
.mtp-tw-light .mtp-tw-hm-corner { background: transparent; }
.mtp-tw-light .mtp-tw-hm-row-h { text-align: right; padding-right: 8px; }
.mtp-tw-light .mtp-tw-hm-cell {
	font-family: 'Nunito', sans-serif;
	font-size: 10px;
	font-weight: 700;
	padding: 6px 2px;
	border: 0;
	cursor: pointer;
	border-radius: 2px;
	transition: transform 0.1s ease-out;
}
.mtp-tw-light .mtp-tw-hm-cell:hover { transform: scale(1.08); z-index: 2; position: relative; }
.mtp-tw-light .mtp-tw-hm-empty {
	padding: 18px;
	text-align: center;
	color: var(--tw-text-dim, #B4B2A9);
	font-size: 12.5px;
	font-style: italic;
}
.mtp-tw-light .mtp-tw-hm-legend {
	display: flex;
	gap: 14px;
	padding-top: 12px;
	font-size: 11px;
	color: var(--tw-text-dim, #B4B2A9);
	flex-wrap: wrap;
}
.mtp-tw-light .mtp-tw-hm-swatch {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	margin-right: 4px;
	vertical-align: middle;
}

/* --- Topic overlap chips (already partially styled, ensure visibility in light) --- */
.mtp-tw-light .mtp-tc-tm-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 11.5px;
	font-weight: 700;
	font-family: 'Nunito', sans-serif;
}
.mtp-tw-light .mtp-tc-tm-chip.is-match {
	background: rgba(99, 153, 34, 0.18);
	color: #aedc7c;
	border: 1px solid rgba(99, 153, 34, 0.35);
}
.mtp-tw-light .mtp-tc-tm-chip.is-only {
	background: rgba(255, 255, 255, 0.05);
	color: var(--tw-text-dim, #B4B2A9);
	border: 1px solid rgba(255, 255, 255, 0.1);
}
.mtp-tw-light .mtp-tc-tm-chip-icon { font-size: 11px; }
/* In light theme the original CSS at line 1921 hid .mtp-tc-tm-chip-icon
   with display:none; restore visibility since the icon helps distinguish
   match vs not-match. */
.mtp-tw-light .mtp-tc-tm-chip-icon { display: inline-block !important; }
.mtp-tw-light .mtp-tc-tm-empty {
	padding: 10px;
	color: var(--tw-text-dim, #B4B2A9);
	font-size: 12px;
	font-style: italic;
}

/* Mobile collapse: stack columns on narrow viewports */
@media (max-width: 720px) {
	.mtp-tw-light .mtp-tw-tm-grid { grid-template-columns: 1fr; }
	.mtp-tw-light .mtp-tw-flip-header { flex-wrap: wrap; gap: 8px; }
	.mtp-tw-light .mtp-tw-flip-from,
	.mtp-tw-light .mtp-tw-flip-to { max-width: 100%; }
}

/* ============================================================
 * v05.19.26.014 , Direction toggle, Prereq compare, Top-3 alts
 * Three new UI blocks built on top of the existing verdict +
 * heatmap layouts. CSS namespaced under .mtp-tw-* like the rest
 * of the widget so light-skin overrides above keep working.
 * ============================================================ */

/* Direction toggle inside the verdict strip , right-aligned. */
.mtp-tw-dir-toggle {
	display: flex;
	gap: 2px;
	align-items: center;
	background: rgba(0, 0, 0, 0.22);
	padding: 3px;
	border-radius: 8px;
	border: 1px solid rgba(255, 255, 255, 0.08);
	flex-shrink: 0;
	align-self: center;
}
.mtp-tw-dir-btn {
	background: transparent;
	border: 0;
	padding: 5px 11px;
	font-family: 'Nunito', sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	cursor: pointer;
	border-radius: 6px;
	transition: all 0.15s;
	letter-spacing: 0.2px;
}
.mtp-tw-dir-btn:hover { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.05); }
.mtp-tw-dir-btn.is-on {
	background: rgba(201, 168, 76, 0.92);
	color: #2c1f0c;
}
.mtp-tw-dir-btn.is-on:hover { background: rgba(201, 168, 76, 1); }

/* Prereq comparison block */
.mtp-tw-prereq-compare {
	background: rgba(255, 255, 255, 0.025);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 18px;
}
.mtp-tw-prereq-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	flex-wrap: wrap;
	gap: 8px;
}
.mtp-tw-prereq-title {
	font-family: 'Caveat', cursive;
	font-size: 22px;
	color: #e8dfc8;
	font-weight: 700;
	line-height: 1;
}
.mtp-tw-prereq-tag {
	font-size: 11px;
	font-weight: 800;
	padding: 3px 9px;
	border-radius: 12px;
	letter-spacing: 0.3px;
}
.mtp-tw-prereq-tag-ok {
	background: rgba(99, 153, 34, 0.18);
	color: #aedc7c;
	border: 1px solid rgba(99, 153, 34, 0.4);
}
.mtp-tw-prereq-tag-warn {
	background: rgba(239, 159, 39, 0.18);
	color: #f5c373;
	border: 1px solid rgba(239, 159, 39, 0.4);
}
.mtp-tw-prereq-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
@media (max-width: 600px) {
	.mtp-tw-prereq-cols { grid-template-columns: 1fr; }
}
.mtp-tw-prereq-col {
	background: rgba(0, 0, 0, 0.18);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 10px 12px;
}
.mtp-tw-prereq-col-head {
	font-size: 10.5px;
	font-weight: 800;
	color: rgba(201, 168, 76, 0.95);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	margin-bottom: 6px;
}
.mtp-tw-prereq-col-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.mtp-tw-prereq-item {
	font-size: 12.5px;
	padding: 4px 0;
	color: #e8dfc8;
	display: flex;
	align-items: center;
	gap: 7px;
}
.mtp-tw-prereq-icon {
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 800;
	font-size: 11px;
	border-radius: 50%;
	flex-shrink: 0;
}
.mtp-tw-prereq-item.is-shared .mtp-tw-prereq-icon {
	background: rgba(99, 153, 34, 0.25);
	color: #aedc7c;
}
.mtp-tw-prereq-item.is-only .mtp-tw-prereq-icon {
	background: rgba(255, 255, 255, 0.08);
	color: rgba(255, 255, 255, 0.5);
}
.mtp-tw-prereq-empty {
	font-size: 11.5px;
	color: rgba(255, 255, 255, 0.42);
	font-style: italic;
	padding: 4px 0;
}

/* Top-3 alternatives block, above the heatmap fold */
.mtp-tw-alt-block {
	background: linear-gradient(135deg, rgba(201, 168, 76, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
	border: 1px solid rgba(201, 168, 76, 0.22);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 16px;
}
.mtp-tw-alt-head { margin-bottom: 10px; }
.mtp-tw-alt-title {
	font-family: 'Caveat', cursive;
	font-size: 22px;
	color: #e8dfc8;
	font-weight: 700;
	line-height: 1;
	display: block;
	margin-bottom: 2px;
}
.mtp-tw-alt-title strong { color: #c9a84c; font-family: inherit; font-weight: 700; }
.mtp-tw-alt-sub {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
}
.mtp-tw-alt-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
@media (max-width: 720px) {
	.mtp-tw-alt-cards { grid-template-columns: 1fr; }
}
.mtp-tw-alt-card {
	background: rgba(0, 0, 0, 0.22);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 8px;
	padding: 10px 12px;
	cursor: pointer;
	transition: all 0.15s;
	text-align: left;
	font-family: 'Nunito', sans-serif;
	color: inherit;
}
.mtp-tw-alt-card:hover {
	border-color: rgba(201, 168, 76, 0.6);
	transform: translateY(-1px);
}
.mtp-tw-alt-card.is-current {
	border-color: rgba(201, 168, 76, 0.92);
	background: rgba(201, 168, 76, 0.08);
	cursor: default;
}
.mtp-tw-alt-card.is-current:hover { transform: none; }
.mtp-tw-alt-rank {
	font-size: 9.5px;
	color: rgba(255, 255, 255, 0.5);
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 800;
	margin-bottom: 3px;
}
.mtp-tw-alt-rank.is-best { color: #aedc7c; }
.mtp-tw-alt-code {
	font-size: 11.5px;
	color: #c9a84c;
	font-weight: 800;
	margin-bottom: 2px;
}
.mtp-tw-alt-name {
	font-size: 12.5px;
	color: #e8dfc8;
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 8px;
	min-height: 32px;
}
.mtp-tw-alt-score-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
}
.mtp-tw-alt-pct {
	font-family: 'Caveat', cursive;
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
}
.mtp-tw-alt-pct.is-good { color: #aedc7c; }
.mtp-tw-alt-pct.is-mid  { color: #f5c373; }
.mtp-tw-alt-pct.is-weak { color: #f48a89; }
.mtp-tw-alt-pct-lbl {
	font-size: 9.5px;
	color: rgba(255, 255, 255, 0.4);
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 700;
}
.mtp-tw-alt-empty {
	font-size: 12.5px;
	color: rgba(255, 255, 255, 0.55);
	font-style: italic;
	padding: 8px 0 0;
}

/* Heatmap fold, the full N x N grid is now collapsed by default */
.mtp-tw-hm-fold {
	background: rgba(255, 255, 255, 0.02);
	border: 1px solid rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 0;
}
.mtp-tw-hm-fold-summary {
	cursor: pointer;
	padding: 11px 16px;
	font-size: 12px;
	color: rgba(201, 168, 76, 0.85);
	font-weight: 700;
	letter-spacing: 0.3px;
	user-select: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 6px;
}
.mtp-tw-hm-fold-summary::-webkit-details-marker { display: none; }
.mtp-tw-hm-fold-summary::before {
	content: '\25B6';
	font-size: 9px;
	color: rgba(201, 168, 76, 0.7);
	transition: transform 0.15s;
}
.mtp-tw-hm-fold[open] > .mtp-tw-hm-fold-summary::before { transform: rotate(90deg); }
.mtp-tw-hm-fold-summary:hover { color: #c9a84c; background: rgba(201, 168, 76, 0.05); }
.mtp-tw-hm-fold > *:not(summary) { padding: 0 16px 16px; }
.mtp-tw-hm-fold .mtp-tw-hm-intro { padding-top: 8px; }

/* Make the verdict strip flex layout handle the new toggle */
.mtp-tw-verdict { align-items: center; }

/* ============================================================
 * v05.19.26.022 , Affirmation badge on the verdict strip.
 * Shows up when at least one delegated editor has stamped this
 * specific source-target pair. Visually a checkmark + "Reviewed
 * by <name>" line that sits at the bottom of the verdict strip.
 * Hover reveals tooltip with the editor's school + note.
 * ============================================================ */

.mtp-tw-affirm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid currentColor;
    border-radius: 14px;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    max-width: 100%;
}
.mtp-tw-affirm-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: currentColor;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}
.mtp-tw-verdict.is-strong  .mtp-tw-affirm-check { background: #4a7c1a; }
.mtp-tw-verdict.is-partial .mtp-tw-affirm-check { background: #b07020; }
.mtp-tw-verdict.is-weak    .mtp-tw-affirm-check { background: #993556; }
.mtp-tw-verdict.is-strong  .mtp-tw-affirm-badge { color: #4a7c1a; }
.mtp-tw-verdict.is-partial .mtp-tw-affirm-badge { color: #b07020; }
.mtp-tw-verdict.is-weak    .mtp-tw-affirm-badge { color: #993556; }
.mtp-tw-affirm-text { color: #3d2e1a; }