/*
 * Body Shape Calculator — layout specific to this tool's result panel, plus
 * the SVG figure styling. Print rules live in st-core.css so both tools share
 * one implementation.
 */

/* ------------------------------------------------------------- figures -- */

.st-figure {
	display: block;
	width: 100%;
	height: auto;
}

.st-figure__body {
	fill: var(--st-wine);
	fill-opacity: .12;
	stroke: var(--st-wine);
	stroke-width: 2.5;
	stroke-linejoin: round;
}

.st-figure__head,
.st-figure__neck {
	fill: var(--st-wine);
	fill-opacity: .12;
	stroke: var(--st-wine);
	stroke-width: 2.5;
}

.st-figure__band {
	stroke: var(--st-wine);
	stroke-width: 1.5;
	stroke-dasharray: 4 4;
	opacity: .55;
}

.st-figure--ghost .st-figure__body,
.st-figure--ghost .st-figure__head,
.st-figure--ghost .st-figure__neck {
	fill: var(--st-cream);
	fill-opacity: 1;
	stroke: #cfc5b8;
	stroke-width: 2;
}

.st-figure__tape {
	fill: none;
	stroke: var(--st-wine);
	stroke-width: 3.5;
}

.st-figure__pin {
	fill: var(--st-wine);
}

/* ------------------------------------------------------------ skeleton -- */

.st-skeleton {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 20px;
	align-items: center;
	min-height: 220px;
	margin-top: 24px;
	padding: 24px 18px;
	background: var(--st-cream);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-lg);
}

.st-skeleton__fig,
.st-skeleton__lines span {
	background: linear-gradient(90deg, #e7e0d7 25%, #f1ece5 50%, #e7e0d7 75%);
	background-size: 400% 100%;
	animation: st-shimmer 1.3s ease infinite;
	border-radius: 8px;
}

.st-skeleton__fig {
	height: 170px;
}

.st-skeleton__lines {
	display: grid;
	gap: 12px;
}

.st-skeleton__lines span {
	height: 15px;
}

.st-skeleton__lines span:nth-child(1) { width: 45%; height: 26px; }
.st-skeleton__lines span:nth-child(2) { width: 90%; }
.st-skeleton__lines span:nth-child(3) { width: 78%; }
.st-skeleton__lines span:nth-child(4) { width: 60%; }

@keyframes st-shimmer {
	0%   { background-position: 100% 0; }
	100% { background-position: 0 0; }
}

/* ------------------------------------------------------------- verdict -- */

.st-result:focus {
	outline: none;
}

.st-verdict {
	margin-top: 24px;
	padding: 24px 18px;
	background: var(--st-white);
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius-lg);
	box-shadow: var(--st-shadow);
	animation: st-rise .32s ease both;
}

@keyframes st-rise {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: none; }
}

.st-verdict__head {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 18px;
	align-items: start;
}

.st-verdict__fig {
	padding: 10px;
	background: var(--st-cream);
	border-radius: var(--st-radius);
}

.st-verdict__figcaption {
	margin: 8px 0 0;
	color: var(--st-ink-soft);
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.st-verdict__name {
	margin: 0;
	color: var(--st-wine);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
}

.st-verdict__aka {
	margin: 4px 0 0;
	color: var(--st-ink-soft);
	font-size: 15px;
	font-style: italic;
}

.st-verdict__tagline {
	margin: 8px 0 0;
	font-size: 17px;
	line-height: 1.5;
}

.st-note--approx {
	border-left-color: var(--st-sage);
	background: var(--st-sage-tint);
}

/* --------------------------------------------------------------- chips -- */

.st-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.st-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 7px 14px;
	background: var(--st-cream);
	border: 1px solid var(--st-line);
	border-radius: 999px;
	font-size: 15px;
}

.st-chip__label {
	color: var(--st-ink-soft);
}

.st-chip__value {
	font-weight: 700;
}

.st-verdict__summary {
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.62;
}

.st-verdict__recognize {
	margin: 14px 0 0;
	padding: 14px 16px;
	background: var(--st-cream);
	border-radius: var(--st-radius);
	font-size: 16.5px;
	line-height: 1.55;
}

.st-verdict__recognize-label {
	display: block;
	color: var(--st-wine);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* ----------------------------------------------------------------- whr -- */

.st-whr {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: center;
	margin-top: 20px;
	padding: 16px;
	border: 1px solid var(--st-line);
	border-radius: var(--st-radius);
	background: var(--st-cream);
}

.st-whr__figure {
	display: grid;
	place-items: center;
	min-width: 86px;
	padding: 10px 12px;
	background: var(--st-white);
	border-radius: var(--st-radius);
}

.st-whr__value {
	color: var(--st-wine);
	font-size: 27px;
	font-weight: 800;
	line-height: 1;
}

.st-whr__caption {
	margin-top: 5px;
	color: var(--st-ink-soft);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .05em;
	text-align: center;
	text-transform: uppercase;
}

.st-whr__text p {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

.st-whr__disclaimer {
	margin-top: 8px !important;
	color: var(--st-ink-soft);
	font-size: 14px !important;
	line-height: 1.5;
}

.st-whr--raised .st-whr__value { color: #a8302f; }

/* ------------------------------------------------------------- actions -- */

.st-result__actions {
	display: grid;
	gap: 10px;
	padding-top: 20px;
	border-top: 1px solid var(--st-line);
}

/* ------------------------------------------------------------- desktop -- */

@media (min-width: 768px) {
	.st-verdict {
		padding: 32px 30px;
	}

	.st-verdict__head {
		grid-template-columns: 150px 1fr;
		gap: 28px;
	}

	.st-verdict__name {
		font-size: 38px;
	}

	.st-skeleton {
		grid-template-columns: 150px 1fr;
		padding: 32px 30px;
	}

	.st-result__actions {
		grid-auto-flow: column;
		justify-content: start;
		align-items: center;
	}
}