/* =========================================================
   SMARTSCORE DEMO
   Only additional styles.
   Main portfolio styles are loaded from ../../../style.css
========================================================= */


/* HEADER */

.demo-header {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}

.demo-topline {
	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 18px 0;

	border-bottom: 1px solid rgba(0, 0, 0, 0.12);

	font-size: 10px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.demo-back {
	color: inherit;
	text-decoration: none;

	font-weight: 600;
}

.demo-back:hover {
	opacity: 0.6;
}

.demo-hero {
	padding: 60px 0 45px;
}

.demo-kicker {
	margin-bottom: 14px;

	font-size: 10px;
	font-weight: 600;

	letter-spacing: 0.12em;
	text-transform: uppercase;

	opacity: 0.5;
}

.demo-hero h1 {
	margin: 0;

	font-size: clamp(56px, 9vw, 108px);

	line-height: 0.88;

	letter-spacing: -0.065em;
}

.demo-lead {
	max-width: 570px;

	margin: 22px 0 0;

	font-size: 14px;

	line-height: 1.6;

	opacity: 0.62;
}


/* MAIN */

.demo-main {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;
}


/* SECTION */

.demo-section {
	margin-top: 0;

	padding: 28px 0;

	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.demo-section-title {
	display: flex;
	align-items: center;

	gap: 12px;

	margin-bottom: 24px;

	font-size: 10px;

	letter-spacing: 0.12em;

	text-transform: uppercase;
}

.demo-section-title span {
	opacity: 0.35;
}

.demo-section-title strong {
	font-weight: 600;
}


/* BATCH */

.batch-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;

	gap: 30px;
}

.batch-header h2 {
	margin: 0;

	font-size: 27px;

	line-height: 1;

	letter-spacing: -0.035em;
}

.batch-header p {
	max-width: 560px;

	margin: 10px 0 0;

	font-size: 12px;

	line-height: 1.55;

	opacity: 0.58;
}


/* RUN BUTTON */

.demo-run-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 9px;

	min-width: 155px;

	padding: 13px 18px;

	border: 1px solid #111;

	background: #111;

	color: #fff;

	font-family: inherit;

	font-size: 10px;

	font-weight: 600;

	letter-spacing: 0.05em;

	cursor: pointer;

	transition:
		background 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.demo-run-button:hover {
	background: transparent;

	color: #111;

	transform: translateY(-2px);
}

.demo-run-button:disabled {
	opacity: 0.5;

	cursor: wait;

	transform: none;
}


/* PIPELINE */

.smart-pipeline {
	display: grid;

	grid-template-columns:
		minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr) 25px minmax(0, 1fr);

	align-items: stretch;
}

.smart-node {
	min-height: 126px;

	padding: 15px;

	border: 1px solid rgba(0, 0, 0, 0.15);

	background: transparent;

	transition:
		background 0.3s ease,
		border-color 0.3s ease,
		transform 0.3s ease;
}

.smart-node.active {
	background: #fff1a8;

	border-color: #111;

	transform: translateY(-4px);
}

.smart-node.completed {
	border-color: #111;

	background: rgba(255, 255, 255, 0.45);
}

.smart-node-model.active {
	background: #dce8ff;
}

.node-meta {
	display: flex;
	justify-content: space-between;

	margin-bottom: 29px;

	font-size: 9px;

	opacity: 0.45;
}

.node-status {
	font-weight: 600;

	letter-spacing: 0.08em;
}

.smart-node.active .node-status,
.smart-node.completed .node-status {
	opacity: 1;
}

.node-name {
	font-size: 14px;

	font-weight: 600;

	letter-spacing: -0.02em;
}

.node-description {
	margin-top: 5px;

	font-size: 10px;

	opacity: 0.5;
}

.smart-arrow {
	display: flex;

	align-items: center;
	justify-content: center;

	font-size: 13px;

	opacity: 0.3;
}


/* EXECUTION */

.execution-log {
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.execution-item {
	display: grid;

	grid-template-columns: 42px 1fr auto;

	align-items: center;

	min-height: 58px;

	border-bottom: 1px solid rgba(0, 0, 0, 0.08);

	transition: background 0.25s ease;
}

.execution-item:last-child {
	border-bottom: 0;
}

.execution-item.running {
	background: #fff1a8;
}

.execution-number {
	font-size: 9px;

	opacity: 0.35;
}

.execution-content strong {
	display: block;

	font-size: 11px;

	font-weight: 600;
}

.execution-content span {
	display: block;

	margin-top: 2px;

	font-size: 10px;

	opacity: 0.48;
}

.execution-state {
	font-size: 9px;

	font-weight: 600;

	letter-spacing: 0.08em;

	opacity: 0.35;
}

.execution-item.running .execution-state,
.execution-item.completed .execution-state {
	opacity: 1;
}


/* RESULT */

.result-section {
	display: none;

	padding-bottom: 0;

	background: #fff1a8;

	border-top-color: #111;
}

.result-section.visible {
	display: block;

	animation: resultAppear 0.5s ease forwards;
}

.result-content {
	display: flex;

	justify-content: space-between;

	gap: 30px;

	padding-bottom: 28px;
}

.result-label {
	margin-bottom: 8px;

	font-size: 9px;

	font-weight: 600;

	letter-spacing: 0.12em;
}

.result-content h2 {
	margin: 0;

	font-size: 30px;

	line-height: 1;

	letter-spacing: -0.04em;
}

.result-content p {
	max-width: 550px;

	margin: 10px 0 0;

	font-size: 12px;

	opacity: 0.58;
}

.result-mark {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	flex: 0 0 38px;

	border: 1px solid #111;

	font-size: 17px;
}

.prediction-grid {
	display: grid;

	grid-template-columns: repeat(3, 1fr);

	margin: 0 -0px;

	border-top: 1px solid #111;
}

.prediction-item {
	padding: 19px;

	border-right: 1px solid #111;
}

.prediction-item:last-child {
	border-right: 0;
}

.prediction-item span {
	display: block;

	margin-bottom: 7px;

	font-size: 9px;

	opacity: 0.58;
}

.prediction-item strong {
	font-size: 20px;

	letter-spacing: -0.025em;
}


/* MODEL */

.model-block {
	display: grid;

	grid-template-columns: 1.2fr 1fr;

	border: 1px solid rgba(0, 0, 0, 0.15);
}

.model-description {
	padding: 24px;

	border-right: 1px solid rgba(0, 0, 0, 0.15);
}

.model-label {
	font-size: 9px;

	font-weight: 600;

	letter-spacing: 0.1em;

	opacity: 0.45;
}

.model-description h2 {
	margin: 8px 0;

	font-size: 30px;

	line-height: 1;

	letter-spacing: -0.04em;
}

.model-description p {
	max-width: 500px;

	margin: 0;

	font-size: 12px;

	opacity: 0.58;
}

.model-metrics {
	display: grid;

	grid-template-columns: 1fr 1fr;
}

.model-metrics>div {
	padding: 18px;

	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.model-metrics>div:nth-child(odd) {
	border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.model-metrics>div:nth-last-child(-n + 2) {
	border-bottom: 0;
}

.model-metrics span {
	display: block;

	margin-bottom: 6px;

	font-size: 9px;

	opacity: 0.45;
}

.model-metrics strong {
	font-size: 19px;

	letter-spacing: -0.025em;
}


/* INPUT */

.input-grid {
	display: grid;

	grid-template-columns: repeat(4, 1fr);

	border-top: 1px solid rgba(0, 0, 0, 0.12);
	border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.input-grid>div {
	padding: 19px;

	border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.input-grid>div:last-child {
	border-right: 0;
}

.input-grid span {
	display: block;

	margin-bottom: 7px;

	font-size: 9px;

	opacity: 0.45;
}

.input-grid strong {
	font-size: 20px;

	letter-spacing: -0.03em;
}


/* NAVIGATION */

.demo-navigation {
	display: flex;

	justify-content: space-between;

	padding: 27px 0;

	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.demo-navigation a {
	font-size: 10px;

	font-weight: 600;

	text-decoration: none;
}

.demo-navigation a:hover {
	opacity: 0.55;
}


/* FOOTER */

.demo-footer {
	margin-top: 20px;

	border-top: 1px solid rgba(0, 0, 0, 0.12);
}

.demo-footer-inner {
	width: min(1180px, calc(100% - 48px));
	margin: 0 auto;

	display: flex;

	justify-content: space-between;

	padding: 24px 0;

	font-size: 10px;
}

.demo-footer-inner strong,
.demo-footer-inner span {
	display: block;
}

.demo-footer-inner span {
	opacity: 0.45;
}


/* ANIMATION */

@keyframes resultAppear {

	from {
		opacity: 0;
		transform: translateY(14px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}

}


/* MOBILE */

@media (max-width: 900px) {

	.smart-pipeline {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}

	.smart-arrow {
		display: none;
	}

	.model-block {
		grid-template-columns: 1fr;
	}

	.model-description {
		border-right: 0;
		border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	}

}


@media (max-width: 650px) {

	.demo-header,
	.demo-main,
	.demo-footer-inner {
		width: calc(100% - 32px);
	}

	.demo-hero {
		padding: 48px 0 38px;
	}

	.demo-hero h1 {
		font-size: 58px;
	}

	.batch-header {
		flex-direction: column;

		align-items: stretch;
	}

	.demo-run-button {
		width: 100%;
	}

	.smart-pipeline {
		grid-template-columns: 1fr;
	}

	.prediction-grid {
		grid-template-columns: 1fr;
	}

	.prediction-item {
		border-right: 0;

		border-bottom: 1px solid #111;
	}

	.prediction-item:last-child {
		border-bottom: 0;
	}

	.model-metrics {
		grid-template-columns: 1fr;
	}

	.model-metrics>div:nth-child(odd) {
		border-right: 0;
	}

	.model-metrics>div:nth-last-child(-n + 2) {
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}

	.model-metrics>div:last-child {
		border-bottom: 0;
	}

	.input-grid {
		grid-template-columns: 1fr 1fr;
	}

	.input-grid>div:nth-child(2) {
		border-right: 0;
	}

	.input-grid>div:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(0, 0, 0, 0.12);
	}

	.input-grid>div:nth-child(4) {
		border-right: 0;
	}

	.demo-footer-inner {
		flex-direction: column;

		gap: 12px;
	}

}