.rsid-chart-scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--ai-border-subtle, #dee2e6);
	border-radius: var(--bs-border-radius, .375rem);
}

	.rsid-chart-scroll:focus {
		outline: 3px solid var(--bs-focus-ring-color, rgba(13, 110, 253, .25));
		outline-offset: 3px;
	}

.rsid-table {
	--rsid-project-col: 12rem;
	--rsid-stage-count: 11;
	--rsid-stage-width: 3.75rem;
	--rsid-progress-col: calc(var(--rsid-stage-count) * var(--rsid-stage-width));
	--rsid-current-col: 9rem;
	--rsid-table-width: calc( var(--rsid-project-col) + var(--rsid-progress-col) + var(--rsid-current-col) );
	--rsid-complete-green: var(--bs-green);
	--rsid-complete-green-alt: var(--ai-light-accent, #82BD60);
	width: var(--rsid-table-width);
	min-width: var(--rsid-table-width);
	max-width: none;
	margin-bottom: 0;
	table-layout: fixed;
}

	/*html > body.night-mode .rsid-table {
	--rsid-complete-green: #1f9d55;
	--rsid-complete-green-alt: #4ade80;
	--rsid-header-green: var(--ai-light-accent, #82BD60);
	--rsid-header-green-alt: #a3e635;
}
*/
	.rsid-table th,
	.table.rsid-table th,
	.rsid-table td,
	.table.rsid-table td {
		vertical-align: middle;
		padding: .5rem;
	}

	.rsid-table .rsid-project-col {
		width: var(--rsid-project-col);
		min-width: var(--rsid-project-col);
		max-width: var(--rsid-project-col);
		white-space: normal;
	}

	.rsid-table .rsid-progress-col {
		width: var(--rsid-progress-col);
		min-width: var(--rsid-progress-col);
		max-width: var(--rsid-progress-col);
		overflow: hidden;
	}

	.rsid-table .rsid-current-stage-col {
		width: var(--rsid-current-col);
		min-width: var(--rsid-current-col);
		max-width: var(--rsid-current-col);
		white-space: normal;
	}

.rsid-current-stage-col strong {
	color: var(--ai-secondary, #79af5a);
}

.rsid-stage-header,
.rsid-progress-list {
	display: grid;
	grid-template-columns: repeat(var(--rsid-stage-count), var(--rsid-stage-width));
	width: var(--rsid-progress-col);
	min-width: var(--rsid-progress-col);
	max-width: var(--rsid-progress-col);
	gap: 0;
	margin: 0;
}

/* Header stage labels */
.rsid-stage-header {
	align-items: end;
	min-height: 10rem;
	padding: 0;
	list-style: none;
}

	.rsid-stage-header li {
		position: relative;
		min-width: 4.5rem;
	}

	.rsid-stage-header span {
		display: inline-block;
		width: 9rem;
		transform: rotate(-68deg);
		transform-origin: center center;
		font-size: .95rem;
		font-weight: 700;
		line-height: 1.1;
		color: var(--rsid-complete-green);
		text-align: left;
		translate: 0 -4.5rem; /*  */
	}

	.rsid-stage-header .header-dash {
		width: 1rem;
		transform: rotate(-68deg);
		border-bottom: 2px solid var(--rsid-complete-green);
		translate: 180% 0;
	}

	/* Match alternating stage labels to the alternating completed-step rhythm */
	.rsid-stage-header li:nth-child(even) span {
		color: var(--rsid-complete-green-alt);
	}

	.rsid-stage-header li:nth-child(even) .header-dash {
		border-bottom: 2px solid var(--rsid-complete-green-alt);
	}


/* Body progress dots */
.rsid-progress-list {
	align-items: center;
	padding: 1.25rem 0;
	list-style: none;
}

.rsid-progress-step {
	position: relative;
	display: grid;
	justify-items: center;
	min-width: 4.5rem;
}

	.rsid-progress-step::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		right: 50%;
		height: .25rem;
		transform: translateY(-50%);
		background: var(--bs-info);
		z-index: 0;
	}

	.rsid-progress-step::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		right: 0;
		height: .25rem;
		transform: translateY(-50%);
		background: var(--bs-info);
		z-index: 0;
	}

	.rsid-progress-step:first-child::before {
		display: none;
	}

	.rsid-progress-step:last-child::after {
		display: none;
	}

.rsid-progress-marker {
	position: relative;
	z-index: 1;
	width: .95rem;
	height: .95rem;
	border: 1px solid var(--bs-info);
	border-radius: 50%;
	background: var(--bs-body-bg, #fff);
}

.rsid-progress-step.is-complete::before,
.rsid-progress-step.is-complete::after,
.rsid-progress-step.is-current::before {
	background: var(--bs-green);
}

.rsid-progress-step.is-complete .rsid-progress-marker {
	border-color: var(--bs-green);
	background: var(--bs-green);
}

/* Alternate completed markers so adjacent completed steps are easier to distinguish */
.rsid-progress-step.is-complete:nth-child(even) .rsid-progress-marker {
	border-color: var(--rsid-complete-green-alt);
	background: var(--rsid-complete-green-alt);
}

.rsid-progress-step.is-current .rsid-progress-marker {
	border-color: #f59e0b;
	background: #f59e0b;
}


/* Subtle pulse for the current RSID stage marker */
.rsid-progress-step.is-current .rsid-progress-marker {
	position: relative;
	isolation: isolate;
	box-shadow: 0 0 0 .22rem rgba(245, 158, 11, .22);
}

	.rsid-progress-step.is-current .rsid-progress-marker::after {
		content: "";
		position: absolute;
		inset: -.38rem;
		border: 2px solid rgba(245, 158, 11, .65);
		border-radius: 50%;
		opacity: .75;
		transform: scale(1);
		animation: rsid-current-pulse 2.2s ease-in-out infinite;
		z-index: -1;
	}

@keyframes rsid-current-pulse {
	0%, 100% {
		opacity: .45;
		transform: scale(.92);
	}

	50% {
		opacity: .85;
		transform: scale(1.08);
	}
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
	.rsid-progress-step.is-current .rsid-progress-marker::after {
		animation: none;
		opacity: .6;
		transform: scale(1);
	}
}

.rsid-table tbody tr {
	cursor: pointer;
}

	.rsid-table tbody tr:nth-child(odd) {
		background-color: rgba(0, 0, 0, .025);
	}

	.rsid-table tbody tr:hover {
		background-color: var(--bs-table-hover-bg, rgba(0, 0, 0, .075));
	}

.proj-photo {
	max-width: 100%;
}

html > body.night-mode .rsid-chart-scroll {
	border-color: var(--ai-border-subtle, #3a4a50);
}

html > body.night-mode .rsid-progress-marker {
	background: var(--ai-surface-1, #081216);
}

/*html > body.night-mode .rsid-stage-header span {
	color: var(--ai-light-accent, #82BD60);
}*/

html > body.night-mode .rsid-table tbody tr:nth-child(odd) {
	background-color: rgba(255, 255, 255, .035);
}