/* ===================================================================
   3D WEALTH DIGITAL TOOLBOX - SCORECARD STYLES
   Specific styles for the 3D Scorecard tool
   =================================================================== */

/* ===================================================================
   PRINCIPLE ROW & COLUMNS
   =================================================================== */
:root {
	/*--poor-color: #DC3545;*/
	--poor-rgb: 220, 53, 69;
	--fair-rgb: 253, 126, 20;
	--good-rgb: 255, 193, 7;
	--better-rgb: 23, 162, 184;
	--best-rgb: 40, 167, 69;
	--group-even-bg: rgba(var(--bs-primary-rgb), 0.07);
	--group-separator: 3px solid var(--bs-border-color);
	/* Group row border system */
	--group-outer-border: 3px solid var(--bs-border-color-translucent);
	--group-outer-border-even: 3.5px solid var(--bs-primary-border-subtle);
	--group-inner-border: 1px solid var(--bs-border-color);
	--group-score-separator: 1.5px solid var(--bs-border-color-translucent);
}

.principle-row {
	transition: background-color 0.2s ease;
}

.principle-header {
	min-width: 9em;
}

.principle-column {
	width: 15.25%;
}

.principle-column-score {
	width: 9%;
}

[data-key-principle] {
	font-size: 20px;
}

[data-objective] {
	font-size: 15px;
}

.bg-poor {
	background-color: rgb(var(--poor-rgb)) !important;
}

.bg-poor-10 {
	background-color: rgba(var(--poor-rgb),.1) !important;
}

.bg-fair {
	background-color: rgb(var(--fair-rgb)) !important;
}

.bg-fair-10 {
	background-color: rgba(var(--fair-rgb),.1) !important;
}

.bg-good {
	background-color: rgb(var(--good-rgb)) !important;
}

.bg-good-10 {
	background-color: rgba(var(--good-rgb),.1) !important;
}

.bg-better {
	background-color: rgb(var(--better-rgb)) !important;
}

.bg-better-10 {
	background-color: rgba(var(--better-rgb),.1) !important;
}

.bg-best {
	background-color: rgb(var(--best-rgb)) !important;
}

.bg-best-10 {
	background-color: rgba(var(--best-rgb),.1) !important;
}

.rounded-top-left-1-5 {
	border-top-left-radius: 1.5rem !important;
}

.rounded-top-right-1-5 {
	border-top-right-radius: 1.5rem !important;
}

/* ===================================================================
   SCORE DISPLAY
   =================================================================== */
.score-display {
	text-align: center;
	margin-top: 0.5rem;
}

	.score-display strong {
		display: block;
		font-size: 1.5rem;
		font-weight: 700;
		color: var(--bs-primary);
	}

.present-score,
.future-score {
	font-weight: 600;
	font-size: 1.1rem;
}

.present-score {
	color: var(--present-color);
}

.future-score {
	color: var(--future-color);
}

/* ===================================================================
   SLIDER LAYOUT
   =================================================================== */
.slider-row {
	padding-top: 0.25rem;
	padding-bottom: 0.25rem;
	line-height: 1;
	vertical-align: middle;
}

.slider-cell {
	padding: 0 !important;
	position: relative;
}

	.slider-cell:has(.present-slider) {
		padding-top: 1.25% !important;
		border: 2px solid var(--bs-border-color);
	}

	.slider-cell:has(.future-slider) {
		padding-bottom: 1.25% !important;
		border: 2px solid var(--bs-border-color);
	}

tr:first-child .slider-cell:has(.present-slider) {
	padding-top: 0 !important;
}

tr:last-child .slider-cell:has(.future-slider) {
	padding-bottom: 0 !important;
}

.slider-track {
	position: relative;
	width: 100%;
	height: 100%;
}

/* ===================================================================
   RANGE INPUT SLIDERS
   =================================================================== */
input[type="range"] {
	position: relative;
	width: 100%;
	height: 30px;
	background: rgba(0,0,0,.15);
	cursor: pointer;
	margin: 0;
	padding: 0;
}

/* accent-color controls the track fill on mobile browsers (Chrome Android,
   iOS Safari) that don't fully honour the webkit pseudo-element track styles.
   Must be on the element itself (not a pseudo-element). */
input[type="range"].present-slider {
	accent-color: var(--present-color, #4580AD);
}

input[type="range"].future-slider {
	accent-color: var(--future-color, #2d8659);
}

	/* Webkit (Chrome, Safari, Edge) Slider Track */
	input[type="range"]::-webkit-slider-runnable-track {
		height: 2px;
	}

	input[type="range"].present-slider::-webkit-slider-track {
		background: rgba(var(--present-rgb),.2);
	}

	input[type="range"].future-slider::-webkit-slider-track {
		background: rgb(var(--future-rgb),.2);
	}

	/* Webkit Slider Thumb - Present (Blue) */
	input[type="range"].present-slider::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--present-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].present-slider:active::-webkit-slider-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Webkit Slider Thumb - Future (Green) */
	input[type="range"].future-slider::-webkit-slider-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--future-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].future-slider:active::-webkit-slider-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Firefox Slider Track */
	input[type="range"]::-moz-range-track {
		height: 8px;
	}

	input[type="range"].present-slider::-moz-range-track {
		background: rgba(var(--present-rgb),.2);
	}

	input[type="range"].future-slider::-moz-range-track {
		background: rgb(var(--future-rgb),.2);
	}

	/* Firefox Slider Thumb - Present (Blue) */
	input[type="range"].present-slider::-moz-range-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--present-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].present-slider:active::-moz-range-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Firefox Slider Thumb - Future (Green) */
	input[type="range"].future-slider::-moz-range-thumb {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: var(--future-color);
		border: 3px solid white;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
		cursor: grab;
	}

	input[type="range"].future-slider:active::-moz-range-thumb {
		cursor: grabbing;
		transform: scale(1.2);
	}

	/* Focus styles */
	input[type="range"]:focus {
		outline: none;
	}

		input[type="range"]:focus::-webkit-slider-thumb {
			box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
		}

		input[type="range"]:focus::-moz-range-thumb {
			box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
		}

/* ===================================================================
   TOTAL SCORE DISPLAY
   =================================================================== */
#totalPresentScore,
#totalFutureScore {
	font-size: 2rem;
	font-weight: 700;
}

#totalPresentScore,
#finalPresentScore {
	color: var(--present-color);
}

#totalFutureScore,
#finalFutureScore {
	color: var(--future-color);
}

#finalPresentScore,
#finalFutureScore {
	font-weight: 700;
	margin: 1rem 0;
}

/* Progress Bars in Results */
#presentProgressBar,
#futureProgressBar {
	font-size: 0.9rem;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: width 1s ease-out;
}

/* ===================================================================
   RESPONSIVE DESIGN - TABLET (≤ 991px)
   =================================================================== */
@media (max-width: 991.98px) {
	thead tr th {
		font-size: 0.8rem;
		padding: 0.5rem 0.35rem;
	}

	[data-key-principle] { font-size: 17px; }
	[data-objective]     { font-size: 13px; }

	.slider-type-label { font-size: 1rem; }

	/* Bigger touch targets on tablets */
	input[type="range"] { height: 36px; }

	#totalPresentScore,
	#totalFutureScore {
		font-size: 1.5rem;
	}
}

/* ===================================================================
   RESPONSIVE DESIGN - MOBILE PHONE (≤ 767px)
   Card-per-principle layout:
     • description row  → principle name full-width (score columns hidden)
     • present row      → flex: label | slider | score
     • future row       → flex: label | slider | score
   =================================================================== */
@media (max-width: 767.98px) {

	/* ── Flatten table structure to block ──────────────────────────── */
	#scorecardTable .table,
	#scorecardTable .table > tbody,
	#scorecardTable .table > tfoot {
		display: block;
		width: 100%;
	}

	/* ── Score range header: scrollable strip at top of scoring table ── */
	#scorecardTable .table > thead {
		display: block !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#scorecardTable .table > thead::-webkit-scrollbar { display: none; }

	#scorecardTable .table > thead > tr {
		display: flex !important;
		flex-wrap: nowrap;
	}

	/* Remove sticky positioning on mobile – header scrolls with its own container */
	#scorecardTable .table > thead > tr > th {
		position: static !important;
		z-index: auto !important;
	}

	/* Hide Key Principle and Score columns from header strip */
	#scorecardTable .table > thead > tr > th:first-child,
	#scorecardTable .table > thead > tr > th:last-child {
		display: none !important;
	}

	/* Each score-range column: ~2 visible at a time */
	#scorecardTable .table > thead > tr > th.principle-column {
		flex: 0 0 calc(50% - 1px);
		min-width: 100px;
		font-size: 0.8rem;
		padding: 0.4rem 0.5rem;
		text-align: center;
	}

	/* Every row is a full-width block by default */
	#scorecardTable .table > tbody > tr,
	#scorecardTable .table > tfoot > tr {
		display: block;
		width: 100%;
	}

	/* Every cell defaults to full-width block */
	#scorecardTable .table > tbody > tr > td,
	#scorecardTable .table > tfoot > tr > td {
		display: block;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* ── Hide score description columns (Poor/Fair/Good/Better/Best) ── */
	/* Slider value still communicates the score; descriptions clutter  */
	/* small screens. Users can rotate to landscape for full table.     */
	td.score-cell,
	td.description-score-cell {
		display: none !important;
	}

	/* ── Principle name cell ────────────────────────────────────────── */
	.principle-name-cell {
		text-align: left !important;
		padding: 0.7rem 0.875rem !important;
		border-bottom: 1px solid var(--bs-border-color) !important;
	}

	[data-key-principle] { font-size: 16px; }
	[data-objective]     { font-size: 13px; }

	/* ── Mobile score description: hidden (descriptions now shown in scroll) ── */
	.mobile-score-desc { display: none !important; }

	/* ── Mobile description scroll: visible on phones ───────────────── */
	.mobile-desc-scroll-wrapper {
		display: block !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		margin-top: 0.5rem;
		/* Full-bleed to card edges */
		margin-left: -0.875rem;
		margin-right: -0.875rem;
	}
	.mobile-desc-scroll-wrapper::-webkit-scrollbar { display: none; }

	.mobile-desc-scroll-container {
		display: flex;
		flex-wrap: nowrap;
		gap: 0.25rem;
		padding: 0 0.5rem;
	}

	.mobile-desc-card {
		flex: 0 0 calc(50% - 0.375rem);
		min-width: calc(50% - 0.375rem);
		padding: 0.5rem 0.4rem;
		border-radius: 4px;
		font-size: 0.82rem;
		text-align: center;
		line-height: 1.4;
		font-weight: 600;
		color: var(--bs-body-color);
	}

	/* ── Review table mobile: 2-column layout (name+desc | score) ───── */
	#reviewScorecardTable .table,
	#reviewScorecardTable .table > tbody,
	#reviewScorecardTable .table > tfoot {
		display: block;
		width: 100%;
	}

	/* Thead: flex, keep only first + last columns */
	#reviewScorecardTable .table > thead > tr {
		display: flex !important;
	}
	#reviewScorecardTable .table > thead > tr > th {
		position: static !important;
		z-index: auto !important;
	}
	#reviewScorecardTable .table > thead > tr > th:not(:first-child):not(:last-child) {
		display: none !important;
	}
	#reviewScorecardTable .table > thead > tr > th:first-child {
		flex: 1;
	}
	#reviewScorecardTable .table > thead > tr > th:last-child {
		flex: 0 0 7rem;
		min-width: 7rem;
	}

	/* Tbody rows: flex with principle name (+ desc) on left, scores on right */
	#reviewScorecardTable .table > tbody > tr {
		display: flex !important;
		width: 100%;
		align-items: stretch;
		border-bottom: 1px solid var(--bs-border-color);
	}
	#reviewScorecardTable .table > tbody > tr > td.principle-name-cell {
		display: block !important;
		flex: 1;
		text-align: left !important;
		padding: 0.6rem 0.75rem !important;
		border: none !important;
	}
	#reviewScorecardTable .table > tbody > tr > td.principle-column-score {
		display: flex !important;
		flex: 0 0 7rem;
		min-width: 7rem;
		border: none !important;
		border-left: 1px solid var(--bs-border-color) !important;
	}

	/* Tfoot */
	#reviewScorecardTable .table > tfoot > tr {
		display: flex !important;
	}
	#reviewScorecardTable .table > tfoot > tr > td:first-child {
		display: flex !important;
		flex: 1;
		align-items: center;
		justify-content: flex-end;
		font-size: 1rem;
		border: none !important;
		padding-right: 0.75rem !important;
	}
	#reviewScorecardTable .table > tfoot > tr > td:last-child {
		display: block !important;
		flex: 0 0 7rem;
		min-width: 7rem;
		border: none !important;
	}

	/* Mobile review description cards (built by JS inside principle-name-cell) */
	.mobile-review-desc-wrapper {
		display: block !important;
		margin-top: 0.4rem;
	}

	.mobile-review-desc-card {
		padding: 0.4rem 0.5rem;
		border-radius: 4px;
		font-size: 0.78rem;
		line-height: 1.35;
		font-weight: 600;
		color: var(--bs-body-color);
		margin-top: 0.25rem;
	}

	.mobile-review-labels {
		margin-bottom: 0.2rem;
	}

	.mobile-review-type {
		font-size: 0.65rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.mobile-review-sep {
		font-size: 0.65rem;
		color: var(--bs-secondary);
		margin: 0 0.15rem;
	}

	/* ── Slider rows: single flex line (label | track | score) ──────── */
	/* flex-start so the description below the slider doesn't force the  */
	/* label/score to mis-center relative to a taller slider-cell.       */
	#scorecardTable tr.slider-row {
		display: flex !important;
		align-items: flex-start;
	}

	/* Shared reset for all td flex-items */
	#scorecardTable tr.slider-row > td {
		display: block !important;
		width: auto !important;
		padding: 0.35rem 0.4rem !important;
		border: none !important;
	}

	/* Label cell – uses a more-specific selector (b=2) to beat the td   */
	/* rule above (b=1) so the padding-top override actually takes effect */
	#scorecardTable tr.slider-row > .slider-label-cell {
		flex: 0 0 5rem;
		min-width: unset !important;
		padding-top: 0.9rem !important; /* pushes text down to align with thumb */
	}

	.slider-type-label { font-size: 0.85rem; }

	/* Slider track cell */
	#scorecardTable tr.slider-row > .slider-cell {
		flex: 1 1 auto !important;
	}

	/* Score display cell */
	#scorecardTable tr.slider-row > .score-total-cell {
		flex: 0 0 2.75rem;
		min-width: unset !important;
		text-align: center !important;
		padding-top: 0.85rem !important; /* aligns number with thumb center */
	}

	#scorecardTable .score-total-cell .present-score,
	#scorecardTable .score-total-cell .future-score {
		font-size: 1.25rem !important;
	}

	/* ── Per-group outer borders ─────────────────────────────────────── */

	/* Top border: set on the principle-name td (only visible cell in that row) */
	#scorecardTable tr.principle-group-top > td {
		border-top: var(--group-outer-border) !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: var(--group-inner-border) !important;
	}

	#scorecardTable tr.group-even.principle-group-top > td {
		border-top: var(--group-outer-border-even) !important;
	}

	/* Bottom border: set on the tr (flex container) so it spans the     */
	/* full row width instead of appearing on each individual td.        */
	#scorecardTable tr.principle-group-bottom {
		border-bottom: var(--group-outer-border);
		margin-bottom: 0.875rem;
	}

	#scorecardTable tr.group-even.principle-group-bottom {
		border-bottom: var(--group-outer-border-even);
	}

	/* No border-bottom on individual tds – the tr handles it */
	#scorecardTable tr.principle-group-bottom > td {
		border-top: none !important;
		border-left: none !important;
		border-right: none !important;
		border-bottom: none !important;
	}

	/* ── Totals footer ──────────────────────────────────────────────── */
	#scorecardTable .table > tfoot > tr {
		display: flex !important;
		align-items: center;
		padding: 0.5rem 0.75rem;
	}

	#scorecardTable .table > tfoot > tr > td:first-child {
		flex: 1 !important;
		text-align: right !important;
		font-size: 1rem;
		border: none !important;
		padding-right: 0.75rem !important;
	}

	#scorecardTable .table > tfoot > tr > td:last-child {
		flex: 0 0 auto !important;
		border: none !important;
		padding: 0 !important;
	}

	#totalPresentScore,
	#totalFutureScore {
		font-size: 1.5rem;
	}

	/* ── Touch targets ──────────────────────────────────────────────── */
	input[type="range"] { height: 40px; }

	input[type="range"].present-slider::-webkit-slider-thumb,
	input[type="range"].future-slider::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}

	input[type="range"].present-slider::-moz-range-thumb,
	input[type="range"].future-slider::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}

	/* Results cards stack */
	.card.border-primary,
	.card.border-success {
		margin-bottom: 1rem;
	}
}

/* ===================================================================
   RESPONSIVE DESIGN - SMALL PHONES (≤ 575px)
   =================================================================== */
@media (max-width: 575.98px) {
	#scorecardTable .slider-label-cell {
		flex: 0 0 4.25rem;
	}

	.slider-type-label { font-size: 0.75rem; }

	[data-key-principle] { font-size: 15px; }

	input[type="range"]::-webkit-slider-thumb {
		width: 28px;
		height: 28px;
	}

	input[type="range"]::-moz-range-thumb {
		width: 28px;
		height: 28px;
	}
}

/* ===================================================================
   MOBILE DESCRIPTION SCROLL
   Built by JS inside each principle-name-cell; hidden on desktop,
   shown via the mobile media query below.
   =================================================================== */
.mobile-desc-scroll-wrapper {
	display: none;
}

.mobile-review-desc-wrapper {
	display: none;
}

/* ===================================================================
   MOBILE SCORE DESCRIPTION
   Appears below each slider on phones, hidden on desktop.
   Updated dynamically by JS to show the description for the current score.
   =================================================================== */
.mobile-score-desc {
	display: none;
	font-size: 0.72rem;
	line-height: 1.4;
	padding: 0.2rem 0 0.05rem 0.5rem;
	border-left: 3px solid transparent;
	margin-top: 0.2rem;
	border-radius: 0 2px 2px 0;
	transition: border-color 0.2s ease;
}

.mobile-score-desc .desc-range-label {
	font-weight: 700;
	font-size: 0.65rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.mobile-score-desc .desc-text {
	color: var(--bs-body-color);
}

.mobile-score-desc.score-desc-poor   { border-left-color: rgb(var(--poor-rgb));   }
.mobile-score-desc.score-desc-fair   { border-left-color: rgb(var(--fair-rgb));   }
.mobile-score-desc.score-desc-good   { border-left-color: rgb(var(--good-rgb));   }
.mobile-score-desc.score-desc-better { border-left-color: rgb(var(--better-rgb)); }
.mobile-score-desc.score-desc-best   { border-left-color: rgb(var(--best-rgb));   }

.mobile-score-desc.score-desc-poor   .desc-range-label { color: rgb(var(--poor-rgb));   }
.mobile-score-desc.score-desc-fair   .desc-range-label { color: rgb(var(--fair-rgb));   }
.mobile-score-desc.score-desc-good   .desc-range-label { color: rgb(var(--good-rgb));   }
.mobile-score-desc.score-desc-better .desc-range-label { color: rgb(var(--better-rgb)); }
.mobile-score-desc.score-desc-best   .desc-range-label { color: rgb(var(--best-rgb));   }

/* ===================================================================
   PRINT STYLES
   =================================================================== */
@media print {
	.table thead {
		display: table-header-group;
	}

	/* Show only the description for the selected score */
	.principle-row {
		page-break-inside: avoid;
	}
}

/* ===================================================================
   ANIMATION FOR SCORE UPDATES
   =================================================================== */
@keyframes scoreUpdate {
	0%, 100% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.2);
	}
}

.score-display strong.updating {
	animation: scoreUpdate 0.3s ease;
}

/* ===================================================================
   ACCESSIBILITY - FOCUS STATES
   =================================================================== */
input[type="range"]:focus {
	outline: 2px solid var(--bs-primary);
	outline-offset: 2px;
}

.future-slider:focus {
	outline-color: var(--future-color);
}

/* ===================================================================
   SLIDER LABEL CELLS (New 3-row layout)
   =================================================================== */

/* Col 1 on slider rows � contains the Present/Future label + inline score */
.slider-label-cell {
	min-width: 9em;
	vertical-align: middle;
	padding: 0.4rem 0.6rem !important;
}

.present-label-cell {
	border-bottom: none !important;
}

.future-label-cell {
	border-top: none !important;
}

/* Label text (Present / Future) */
.slider-type-label {
	display: block;
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.present-label {
	color: var(--present-color, #4580AD);
}

.future-label {
	color: var(--future-color, #2d8659);
}

/* Inline score shown inside the label cell (small, muted) */
.slider-score-inline {
	font-size: 0.85rem;
	font-weight: 700;
	margin-left: 0.3rem;
}

/* ===================================================================
   SCORE CELLS (col 7, slider rows)
   =================================================================== */

.score-total-cell {
	vertical-align: middle;
	text-align: center;
	min-width: 3.5rem;
}

.present-score-cell {
	border-bottom: none !important;
}

.future-score-cell {
	border-top: none !important;
}

/* Description row � col 7 is empty, hide its borders for cleanliness.
   Background is intentionally NOT set here � let the group tint show through. */
.description-score-cell {
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* Principle name cell in the description row */
.principle-name-cell {
	vertical-align: middle;
	text-align: center;
}

/* ===================================================================
   REVIEW STEP - PER-ROW SCORE DISPLAY
   =================================================================== */

/* Ensure the split score columns fill the full cell height */
#reviewScorecardTable td.principle-column-score > .d-flex {
	min-height: 3rem;
	align-items: center;
}

/* Review table: sticky thead (mirrors scoring table) */
#reviewScorecardTable {
	overflow-x: auto;
	overflow-y: visible;
}

#reviewScorecardTable thead tr th {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===================================================================
   NEXT STEPS� TOP PRINT BUTTON
   =================================================================== */

/* Ensure the instructions box has enough top padding so the
   absolute-positioned button doesn't overlap the heading */
.next-steps-instructions {
	padding-top: 2.75rem !important;
}


/* ===================================================================
   PRINCIPLE GROUP ALTERNATING TINT
   .group-odd / .group-even set in Razor via i % 2 on all 3 rows.
   =================================================================== */

/* ODD groups � default white, no override needed except to reset
   any inherited tint when groups are adjacent */
/*tr.group-odd > td {
	background-color: #ffffff !important;
}*/

/* EVEN groups � blue tint on every cell in all 3 rows */
tr.group-even > td {
	background-color: var(--group-even-bg) !important;
}

/* Score cells on even group: nudge tints so they remain distinct
   on top of the group background */
tr.group-even td.bg-poor-10 {
	background-color: rgba(var(--poor-rgb), 0.15) !important;
}

tr.group-even td.bg-fair-10 {
	background-color: rgba(var(--fair-rgb), 0.15) !important;
}

tr.group-even td.bg-good-10 {
	background-color: rgba(var(--good-rgb), 0.15) !important;
}

tr.group-even td.bg-better-10 {
	background-color: rgba(var(--better-rgb), 0.15) !important;
}

tr.group-even td.bg-best-10 {
	background-color: rgba(var(--best-rgb), 0.15) !important;
}

/* Description score cell (col 7, empty) � inherit the group tint,
   just hide the borders */
/*tr.group-odd  > td.description-score-cell,
tr.group-even > td.description-score-cell {
	background-color: inherit !important;
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}*/

/* Group separator: thick top border on every Present (first) row */
/*tr.principle-group-top > td {
	border-top: var(--group-separator);
	border-left: var(--group-separator);
	border-right: var(--group-separator);*/
/*border-top: var(--group-separator) !important;*/
/*}*/

table thead tr th:first-child {
	border-left: var(--group-outer-border);
}

table thead tr th:last-child {
	border-right: var(--group-outer-border);
}

/* Outer left/right on all 3 rows in every group */
tr.principle-group-top > td,
tr.principle-group-middle > td,
tr.principle-row > td,
tr.principle-group-bottom > td {
	border-left: var(--group-outer-border) !important;
	border-right: var(--group-outer-border) !important;
}

/* Inner top + bottom for description (middle) row — set first so principle-group-top can override */
tr.principle-row > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Outer top + inner bottom for description (first/top) row — comes after principle-row so wins on conflict */
tr.principle-group-top > td {
	border-top: var(--group-outer-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Inner top + inner bottom for present (middle) slider row */
tr.principle-group-middle > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-inner-border) !important;
}

/* Inner top + outer bottom for future (last) row */
tr.principle-group-bottom > td {
	border-top: var(--group-inner-border) !important;
	border-bottom: var(--group-outer-border) !important;
}

/* First group: thin top border to connect cleanly to thead */
tr.principle-group-top:first-child > td {
	border-top: 1px solid var(--bs-border-color) !important;
}

/* Even groups: prominent primary-colored outer borders */
tr.group-even.principle-group-top > td,
tr.group-even.principle-group-middle > td,
tr.group-even.principle-row > td,
tr.group-even.principle-group-bottom > td {
	border-left: var(--group-outer-border-even) !important;
	border-right: var(--group-outer-border-even) !important;
}

tr.group-even.principle-group-top > td {
	border-top: var(--group-outer-border-even) !important;
}

tr.group-even.principle-group-bottom > td {
	border-bottom: var(--group-outer-border-even) !important;
}

/* Re-assert: empty score cell in description row keeps no left/top/bottom borders */
td.description-score-cell {
	border-left: none !important;
	border-top: none !important;
	border-bottom: none !important;
}

/* ===================================================================
   VERTICAL COLUMN SEPARATORS (within groups)
   =================================================================== */

/* Key Principle col (1): thin right border — blends into the score area */
tr.principle-group-top > td:first-child,
tr.principle-group-middle > td:first-child,
tr.principle-row > td:first-child,
tr.principle-group-bottom > td:first-child {
	border-right: var(--group-inner-border) !important;
}

/* Score display col (last): thin left border — blends from the score area */
tr.principle-group-top > td:last-child,
tr.principle-group-middle > td:last-child,
tr.principle-row > td:last-child,
tr.principle-group-bottom > td:last-child {
	border-left: var(--group-inner-border) !important;
}

/* Slider cell (colspan=5): inner borders both sides, matches column boundaries */
tr.principle-group-middle > td.slider-cell,
tr.principle-group-bottom > td.slider-cell {
	border-left: var(--group-inner-border) !important;
	border-right: var(--group-inner-border) !important;
}

/* First score col: thin left border (adjacent to Key Principle) */
tr.principle-row > td:nth-child(2) {
	border-left: var(--group-inner-border) !important;
}

/* Last score col: thin right border (adjacent to Score Display) */
tr.principle-row > td:nth-child(6) {
	border-right: var(--group-inner-border) !important;
}

/* Between score columns (Poor/Fair/Good/Better/Best): medium separator */
tr.principle-row > td:nth-child(n+2):nth-child(-n+5) {
	border-right: var(--group-score-separator) !important;
}

tr.principle-row > td:nth-child(n+3):nth-child(-n+6) {
	border-left: var(--group-score-separator) !important;
}

/* ===================================================================
   STICKY THEAD
   =================================================================== */

/* The table-responsive div must NOT clip the sticky header.
   Page scrolls naturally so position:sticky on thead tr works
   as long as no ancestor has overflow:hidden/auto above it.
   We keep overflow-x on the wrapper for horizontal scroll only. */
#scorecardTable {
	overflow-x: auto;
	overflow-y: visible; /* ensure sticky works */
}

thead tr th {
	position: sticky;
	top: 0;
	z-index: 10;
}

/* ===================================================================
   THUMB VALUE OVERLAY
   Custom thumb uses a CSS-painted label via a data attribute trick.
   We size the thumb up slightly (24px) to fit the number comfortably.
   =================================================================== */
input[type="range"].present-slider::-webkit-slider-thumb,
input[type="range"].future-slider::-webkit-slider-thumb {
	width: 24px;
	height: 24px;
}

input[type="range"].present-slider::-moz-range-thumb,
input[type="range"].future-slider::-moz-range-thumb {
	width: 24px;
	height: 24px;
}

/* The overlay number is rendered via a <span class="slider-thumb-label">
   positioned absolute over the thumb. Calculated in JS. */
.slider-thumb-label {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	color: white;
	pointer-events: none;
	z-index: 2;
	/* left is set by JS */
}

.present-slider ~ .slider-thumb-label {
	background: var(--present-color);
}

.future-slider ~ .slider-thumb-label {
	background: var(--future-color);
}

/* ===================================================================
   SLIDER TOOLTIP BUBBLE
   =================================================================== */
.slider-tooltip {
	position: absolute;
	top: -2rem;
	transform: translateX(-50%);
	background: rgba(0,0,0,0.75);
	color: white;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	white-space: nowrap;
	z-index: 20;
}

	.slider-tooltip::after {
		content: '';
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translateX(-50%);
		border: 4px solid transparent;
		border-top-color: rgba(0,0,0,0.75);
	}

.slider-track:hover .slider-tooltip,
.slider-track:has(input:focus) .slider-tooltip,
.slider-track.dragging .slider-tooltip {
	opacity: 1;
}
/* ===================================================================
   SCORE COLUMN SPLIT (Option B - flex sub-columns)
   =================================================================== */
.score-sub-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0.25rem 0;
}

.score-sub-label {
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.85;
	line-height: 1;
	margin-bottom: 0.15rem;
}

.score-sub-value {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
}

.score-sub-footer {
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	text-align: center;
	opacity: 0.75;
	padding: 0.2rem 0;
	border-top: 1px solid rgba(255,255,255,0.2);
	letter-spacing: 0.04em;
}

/* Present/future score values in the split body cells */
.score-split-cell .score-sub-col {
	justify-content: center;
	min-height: 2rem;
}
.score-fraction-divider {
	width: 70%;
	height: 1px;
	background-color: currentColor;
	opacity: 0.3;
	margin: 0.2rem auto;
}

.score-sub-denom {
	font-size: 0.75rem;
	font-weight: 600;
	opacity: 0.5;
	line-height: 1;
}

/* ===================================================================
   OPTION B MOBILE SCORECARD CARDS
   Desktop keeps the table. Tablet/mobile presents each principle group
   as a card with side-by-side vertical Present/Future sliders.
   =================================================================== */
.mobile-principle-toggle,
.mobile-score-chips,
.mobile-accordion-indicator,
.label-col,
.mobile-score-desc-row {
	display: none;
}

.score-desc-poor   { --desc-rgb: var(--poor-rgb); }
.score-desc-fair   { --desc-rgb: var(--fair-rgb); }
.score-desc-good   { --desc-rgb: var(--good-rgb); }
.score-desc-better { --desc-rgb: var(--better-rgb); }
.score-desc-best   { --desc-rgb: var(--best-rgb); }

@media (max-width: 991.98px) {
	#scorecardTable {
		overflow-x: hidden;
		overflow-y: visible;
		padding: 0.5rem;
		border-radius: 10px !important;
		background: #f7f9fc;
	}

	#scorecardTable .table {
		display: block;
		width: 100%;
		margin-bottom: 0;
		border: 0;
		border-collapse: separate;
		background: transparent;
	}

	#scorecardTable .table > thead {
		display: none !important;
	}

	#scorecardTable .table > tbody.principle-block {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		margin: 0 0 0.75rem;
		overflow: hidden;
		border: 1px solid #dfe7ee;
		border-radius: 8px;
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
	}

	#scorecardTable .table > tbody.principle-block.group-even {
		background: #ffffff !important;
	}

	#scorecardTable .table > tbody.principle-block > tr {
		width: 100%;
		margin: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}

	#scorecardTable .table > tbody.principle-block > tr > td {
		display: block !important;
		border: 0 !important;
		background: transparent !important;
	}

	#scorecardTable .table > tbody.principle-block .score-cell,
	#scorecardTable .table > tbody.principle-block .description-score-cell {
		display: none !important;
	}

	#scorecardTable .table > tbody.principle-block > tr.principle-row {
		display: block !important;
		grid-column: 1 / -1;
		order: 1;
	}

	#scorecardTable .principle-name-cell {
		padding: 0 !important;
		text-align: left !important;
	}

	.desktop-principle-heading {
		display: none;
	}

	.mobile-principle-toggle {
		display: flex;
		flex-direction: column;
		gap: 0.55rem;
		width: 100%;
		border: 0;
		padding: 0.65rem 0.75rem;
		background: #3f759f;
		color: #ffffff;
		font: inherit;
		text-align: left;
	}

	.mobile-principle-toggle:focus-visible {
		outline: 3px solid rgba(255, 255, 255, 0.9);
		outline-offset: -5px;
	}

	.mobile-principle-title-row {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 0.65rem;
		width: 100%;
	}

	.mobile-principle-title {
		display: block;
		min-width: 0;
	}

	.mobile-principle-toggle [data-key-principle] {
		display: block;
		color: #ffffff;
		font-size: 0.84rem;
		line-height: 1.2;
	}

	.mobile-principle-toggle [data-objective] {
		display: block;
		color: rgba(255, 255, 255, 0.78) !important;
		font-size: 0.68rem;
		line-height: 1.25;
	}

	.mobile-score-chips {
		display: flex;
		width: 100%;
		gap: 0.45rem;
	}

	.mobile-score-chip {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: space-between;
		min-width: 0;
		border-radius: 6px;
		padding: 0.35rem 0.5rem;
		color: #ffffff;
		font-size: 0.72rem;
		font-weight: 700;
		line-height: 1.1;
		text-align: left;
	}

	.mobile-score-chip-label {
		text-transform: uppercase;
		letter-spacing: 0.04em;
		opacity: 0.86;
	}

	.mobile-score-chip .present-score,
	.mobile-score-chip .future-score {
		color: #ffffff;
		font-size: 1.05rem;
		font-weight: 800;
		line-height: 1;
	}

	.mobile-score-chip.present {
		background: rgba(var(--present-rgb), 0.82);
	}

	.mobile-score-chip.future {
		background: rgba(var(--future-rgb), 0.82);
	}

	.mobile-accordion-indicator {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 1.4rem;
		width: 1.4rem;
		height: 1.4rem;
		border: 1px solid rgba(255, 255, 255, 0.55);
		border-radius: 50%;
		color: #ffffff;
		font-size: 1rem;
		font-weight: 800;
		line-height: 1;
	}

	.mobile-accordion-indicator::before {
		content: "+";
		transform: translateY(-1px);
	}

	#scorecardTable .table > tbody.principle-block:not(.mobile-collapsed) .mobile-accordion-indicator::before {
		content: "-";
		transform: translateY(-2px);
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row {
		display: flex !important;
		flex-direction: column;
		align-items: center;
		min-width: 0;
		padding: 0.7rem 0.45rem 0.65rem;
	}

	#scorecardTable .table > tbody.principle-block > tr.principle-group-middle {
		grid-column: 1;
	}

	#scorecardTable .table > tbody.principle-block > tr.principle-group-bottom {
		grid-column: 2;
		border-left: 1px solid #e2e8f0 !important;
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row {
		order: 2;
	}

	#scorecardTable .table > tbody.principle-block > tr.mobile-score-desc-row {
		order: 3;
	}

	#scorecardTable .table > tbody.principle-block.mobile-collapsed > tr.slider-row,
	#scorecardTable .table > tbody.principle-block.mobile-collapsed > tr.mobile-score-desc-row {
		display: none !important;
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row > td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row > .slider-label-cell {
		flex: 0 0 auto;
		margin-bottom: 0.35rem;
		text-align: center !important;
	}

	#scorecardTable .table > tbody.principle-block .slider-type-label {
		font-size: 0.62rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		line-height: 1;
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row > .slider-cell {
		flex: 0 0 auto !important;
	}

	.mobile-slider-shell {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		gap: 0.45rem;
		width: 100%;
	}

	.label-col {
		display: flex !important;
		flex: 0 0 3.15rem;
		flex-direction: column;
	}

	.label-col-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 1.35rem;
		border-left: 3px solid currentColor;
		padding-left: 0.28rem;
		font-size: 0.55rem;
		font-weight: 700;
		line-height: 1.05;
		text-align: left;
	}

	.label-col-item small {
		font-size: 0.48rem;
		font-weight: 600;
		opacity: 0.72;
	}

	.label-col-item.best   { color: rgb(var(--best-rgb)); }
	.label-col-item.better { color: rgb(var(--better-rgb)); }
	.label-col-item.good   { color: #8a7200; }
	.label-col-item.fair   { color: rgb(var(--fair-rgb)); }
	.label-col-item.poor   { color: rgb(var(--poor-rgb)); }

	#scorecardTable .table > tbody.principle-block .slider-track {
		position: relative;
		flex: 0 0 2.4rem;
		width: 2.4rem !important;
		height: 6.75rem;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"] {
		width: 6.75rem !important;
		height: 2.4rem;
		transform: rotate(-90deg);
		transform-origin: center;
		background: transparent;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"]::-webkit-slider-runnable-track {
		height: 6px;
		border-radius: 999px;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"]::-moz-range-track {
		height: 6px;
		border-radius: 999px;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"].present-slider::-webkit-slider-runnable-track {
		background: rgba(var(--present-rgb), 0.22);
	}

	#scorecardTable .table > tbody.principle-block input[type="range"].future-slider::-webkit-slider-runnable-track {
		background: rgba(var(--future-rgb), 0.22);
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row > .score-total-cell {
		display: none !important;
	}

	#scorecardTable .table > tbody.principle-block .slider-thumb-label {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	#scorecardTable .table > tbody.principle-block .slider-tooltip {
		top: 50%;
		left: calc(100% + 0.3rem);
		transform: translateY(-50%);
	}

	#scorecardTable .table > tbody.principle-block .slider-tooltip::after {
		top: 50%;
		left: -8px;
		transform: translateY(-50%);
		border-top-color: transparent;
		border-right-color: rgba(0,0,0,0.75);
	}

	#scorecardTable .table > tbody.principle-block > tr.mobile-score-desc-row {
		display: block !important;
		grid-column: 1 / -1;
	}

	#scorecardTable .table > tbody.principle-block > tr.mobile-score-desc-row > td {
		display: block !important;
		width: 100% !important;
		padding: 0 !important;
		border: 0 !important;
	}

	.score-desc-panel {
		display: flex;
		flex-direction: column;
		gap: 0.45rem;
		padding: 0.65rem 0.75rem 0.75rem;
		border-top: 1px solid #e2e8f0;
		background: #ffffff;
	}

	.desc-row {
		border-left: 4px solid rgb(var(--desc-rgb));
		border-radius: 6px;
		padding: 0.5rem 0.58rem;
		background: rgba(var(--desc-rgb), 0.08);
		text-align: left;
	}

	.desc-row-heading {
		display: flex;
		align-items: center;
		gap: 0.35rem;
		margin-bottom: 0.28rem;
		flex-wrap: wrap;
	}

	.desc-type {
		font-size: 0.64rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	.desc-row .desc-range-label {
		color: rgb(var(--desc-rgb));
		font-size: 0.66rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.03em;
	}

	.desc-row .desc-text {
		color: #24313d;
		font-size: 0.74rem;
		font-weight: 600;
		line-height: 1.35;
	}

	.mobile-desc-scroll-wrapper,
	.mobile-score-desc {
		display: none !important;
	}

	#scorecardTable .table > tfoot {
		display: block;
		margin-top: 0.15rem;
		border-radius: 8px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
	}

	#scorecardTable .table > tfoot > tr {
		display: grid !important;
		grid-template-columns: minmax(7rem, 0.72fr) minmax(0, 1.28fr);
		align-items: stretch;
		width: 100%;
		padding: 0;
	}

	#scorecardTable .table > tfoot > tr > td:first-child {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-width: 0;
		padding: 0.75rem 0.65rem !important;
		border: 0 !important;
		background: #d8e8f4;
		font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
		line-height: 1.1;
		text-align: center !important;
		white-space: normal;
	}

	#scorecardTable .table > tfoot > tr > td:last-child {
		display: block !important;
		width: 100% !important;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden;
	}

	#scorecardTable .table > tfoot > tr > td:last-child > .d-flex {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		height: 100%;
	}

	#scorecardTable .table > tfoot .score-sub-col {
		min-width: 0;
		padding: 0.55rem 0.5rem;
	}

	#scorecardTable .table > tfoot .score-sub-label {
		font-size: 0.68rem;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	#scorecardTable .table > tfoot .score-sub-value {
		font-size: clamp(1.35rem, 6vw, 1.85rem);
		line-height: 1;
	}

	#scorecardTable .table > tfoot .score-sub-denom {
		font-size: 0.72rem;
	}

	#reviewScorecardTable {
		overflow-x: hidden;
		overflow-y: visible;
		padding: 0.5rem;
	}

	#reviewScorecardTable .table,
	#reviewScorecardTable .table > tbody,
	#reviewScorecardTable .table > tfoot {
		display: block;
		width: 100%;
	}

	#reviewScorecardTable .table {
		margin-bottom: 0;
		border: 0;
	}

	#reviewScorecardTable .table > thead {
		display: none !important;
	}

	#reviewScorecardTable .table > tbody {
		display: grid;
		gap: 0.75rem;
	}

	#reviewScorecardTable .table > tbody > tr.principle-row {
		display: block !important;
		width: 100%;
		border: 0 !important;
		border-radius: 8px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.12);
	}

	#reviewScorecardTable .table > tbody > tr > td {
		border: 0 !important;
		box-sizing: border-box;
	}

	#reviewScorecardTable .table > tbody > tr > td.score-cell {
		display: none !important;
	}

	#reviewScorecardTable .table > tbody > tr > td.principle-name-cell {
		display: block !important;
		width: 100% !important;
		padding: 0.7rem 0.75rem 0.35rem !important;
		background: #3f759f !important;
		color: #ffffff;
		text-align: left !important;
	}

	#reviewScorecardTable .principle-name-cell [data-key-principle] {
		color: #ffffff;
		font-size: 0.84rem;
		line-height: 1.2;
	}

	#reviewScorecardTable .principle-name-cell [data-objective] {
		color: rgba(255, 255, 255, 0.78) !important;
		font-size: 0.68rem;
		line-height: 1.25;
	}

	#reviewScorecardTable .table > tbody > tr > td.principle-column-score {
		display: block !important;
		width: 100% !important;
		min-width: 0 !important;
		padding: 0 !important;
		background: #ffffff !important;
	}

	#reviewScorecardTable .table > tbody > tr > td.principle-column-score > .d-flex {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 0.45rem;
		width: 100%;
		min-height: 0;
		padding: 0.2rem 0.75rem 0.75rem;
		background: #3f759f;
	}

	#reviewScorecardTable .table > tbody .principle-column-score .score-sub-col {
		flex-direction: row;
		justify-content: space-between;
		min-width: 0;
		border: 0 !important;
		border-radius: 6px;
		padding: 0.35rem 0.5rem;
		color: #ffffff;
	}

	#reviewScorecardTable .table > tbody .principle-column-score .score-sub-col:first-child {
		background: var(--present-color);
	}

	#reviewScorecardTable .table > tbody .principle-column-score .score-sub-col:last-child {
		background: var(--future-color);
	}

	#reviewScorecardTable .table > tbody .principle-column-score .score-sub-label {
		margin-bottom: 0;
		font-size: 0.72rem;
		opacity: 0.86;
	}

	#reviewScorecardTable .table > tbody .principle-column-score .score-sub-value {
		color: #ffffff;
		font-size: 1.05rem;
		font-weight: 800;
	}

	#reviewScorecardTable .mobile-review-desc-wrapper {
		display: block !important;
		margin: 0;
		padding: 0.75rem;
		background: #ffffff;
		border-top: 1px solid #e2e8f0;
	}

	#reviewScorecardTable .mobile-review-desc-card {
		--review-desc-rgb: var(--bs-primary-rgb);
		margin: 0;
		padding: 0.6rem 0.7rem;
		border-left: 4px solid rgb(var(--review-desc-rgb));
		border-radius: 6px;
		background: rgba(var(--review-desc-rgb), 0.08) !important;
		color: #24313d;
		font-size: 0.78rem;
		font-weight: 600;
		line-height: 1.35;
		text-align: left;
	}

	#reviewScorecardTable .mobile-review-desc-card + .mobile-review-desc-card {
		margin-top: 0.55rem;
	}

	#reviewScorecardTable .mobile-review-desc-card.bg-poor-10   { --review-desc-rgb: var(--poor-rgb); }
	#reviewScorecardTable .mobile-review-desc-card.bg-fair-10   { --review-desc-rgb: var(--fair-rgb); }
	#reviewScorecardTable .mobile-review-desc-card.bg-good-10   { --review-desc-rgb: var(--good-rgb); }
	#reviewScorecardTable .mobile-review-desc-card.bg-better-10 { --review-desc-rgb: var(--better-rgb); }
	#reviewScorecardTable .mobile-review-desc-card.bg-best-10   { --review-desc-rgb: var(--best-rgb); }

	#reviewScorecardTable .mobile-review-labels {
		display: flex;
		align-items: center;
		gap: 0.25rem;
		margin-bottom: 0.25rem;
	}

	#reviewScorecardTable .mobile-review-type {
		font-size: 0.64rem;
		font-weight: 800;
		letter-spacing: 0.05em;
		text-transform: uppercase;
	}

	#reviewScorecardTable .mobile-review-sep {
		color: #64748b;
		font-size: 0.64rem;
	}

	#reviewScorecardTable .table > tfoot {
		display: block;
		margin-top: 0.9rem;
		border-radius: 8px;
		overflow: hidden;
		background: #ffffff;
		box-shadow: 0 1px 4px rgba(15, 23, 42, 0.08);
	}

	#reviewScorecardTable .table > tfoot > tr {
		display: grid !important;
		grid-template-columns: minmax(7rem, 0.72fr) minmax(0, 1.28fr);
		align-items: stretch;
		width: 100%;
		padding: 0;
	}

	#reviewScorecardTable .table > tfoot > tr > td:first-child {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 100% !important;
		min-width: 0;
		padding: 0.75rem 0.65rem !important;
		border: 0 !important;
		background: #d8e8f4;
		font-size: clamp(1.2rem, 5vw, 1.65rem) !important;
		line-height: 1.1;
		text-align: center !important;
		white-space: normal;
	}

	#reviewScorecardTable .table > tfoot > tr > td:last-child {
		display: block !important;
		width: 100% !important;
		min-width: 0;
		padding: 0 !important;
		border: 0 !important;
		overflow: hidden;
	}

	#reviewScorecardTable .table > tfoot > tr > td:last-child > .d-flex {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		width: 100%;
		height: 100%;
	}

	#reviewScorecardTable .table > tfoot .score-sub-col {
		min-width: 0;
		padding: 0.55rem 0.5rem;
	}

	#reviewScorecardTable .table > tfoot .score-sub-label {
		font-size: 0.68rem;
		letter-spacing: 0.04em;
		white-space: nowrap;
	}

	#reviewScorecardTable .table > tfoot .score-sub-value {
		font-size: clamp(1.35rem, 6vw, 1.85rem);
		line-height: 1;
	}

	#reviewScorecardTable .table > tfoot .score-sub-denom {
		font-size: 0.72rem;
	}

}

@media (min-width: 768px) and (max-width: 991.98px) {
	#scorecardTable {
		padding: 0.85rem;
	}

	#reviewScorecardTable {
		padding: 0.85rem;
	}

	#reviewScorecardTable .table > tbody {
		gap: 0.85rem;
	}

	#reviewScorecardTable .table > tbody > tr > td.principle-name-cell {
		padding: 0.85rem 1rem 0.45rem !important;
	}

	#reviewScorecardTable .principle-name-cell [data-key-principle] {
		font-size: 0.95rem;
	}

	#reviewScorecardTable .principle-name-cell [data-objective] {
		font-size: 0.75rem;
	}

	#reviewScorecardTable .table > tbody > tr > td.principle-column-score > .d-flex {
		gap: 0.6rem;
		padding: 0.25rem 1rem 0.9rem;
	}

	#reviewScorecardTable .mobile-review-desc-wrapper {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.65rem;
		padding: 0.85rem 1rem 1rem;
	}

	#reviewScorecardTable .mobile-review-desc-card + .mobile-review-desc-card {
		margin-top: 0;
	}

	#scorecardTable .table > tbody.principle-block > tr.slider-row {
		min-height: 13rem;
		padding: 1rem 1rem 1.15rem;
	}

	#scorecardTable .table > tbody.principle-block .slider-type-label {
		display: block;
		margin-bottom: 0.65rem;
		font-size: 0.82rem;
		letter-spacing: 0.06em;
	}

	.mobile-slider-shell {
		width: auto;
		max-width: 16.5rem;
		gap: 1rem;
	}

	.label-col {
		flex-basis: 5.2rem;
	}

	.label-col-item {
		min-height: 2rem;
		border-left-width: 4px;
		padding-left: 0.45rem;
		font-size: 0.7rem;
	}

	.label-col-item small {
		font-size: 0.58rem;
	}

	#scorecardTable .table > tbody.principle-block .slider-track {
		--slider-tooltip-left: calc(100% + 0.55rem);
		flex: 0 0 3.25rem;
		width: 3.25rem !important;
		height: 10rem;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"] {
		width: 10rem !important;
		height: 3.25rem;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"]::-webkit-slider-runnable-track {
		height: 8px;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"]::-moz-range-track {
		height: 8px;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"].present-slider::-webkit-slider-thumb,
	#scorecardTable .table > tbody.principle-block input[type="range"].future-slider::-webkit-slider-thumb {
		width: 32px;
		height: 32px;
	}

	#scorecardTable .table > tbody.principle-block input[type="range"].present-slider::-moz-range-thumb,
	#scorecardTable .table > tbody.principle-block input[type="range"].future-slider::-moz-range-thumb {
		width: 32px;
		height: 32px;
	}

	#scorecardTable .table > tbody.principle-block .slider-thumb-label {
		width: 32px;
		height: 32px;
		font-size: 0.85rem;
	}

	#scorecardTable .table > tbody.principle-block .slider-tooltip {
		left: calc(100% + 0.55rem);
		font-size: 0.82rem;
	}

	.score-desc-panel {
		gap: 0.65rem;
		padding: 0.8rem 1rem 1rem;
	}

	.desc-row {
		padding: 0.65rem 0.75rem;
	}

	.desc-row .desc-text {
		font-size: 0.86rem;
	}

}

@media (max-width: 420px) {
	#scorecardTable .table > tfoot > tr,
	#reviewScorecardTable .table > tfoot > tr {
		grid-template-columns: 1fr;
	}

	#scorecardTable .table > tfoot > tr > td:first-child,
	#reviewScorecardTable .table > tfoot > tr > td:first-child {
		padding: 0.6rem 0.75rem !important;
	}
}