/*
 * Bra Size Calculator — result layout and the fit-check tick cards.
 *
 * The units toggle, fields, choice cards, size-card grid, panels, notes and
 * print sheet all come from st-core.css. Only what is specific to this tool
 * belongs here.
 */

/* ---------------------------------------------------------- fit check -- */

.st-bra-fit {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--st-line);
}

.st-bra-fit__title {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
	font-size: 17px;
	font-weight: 700;
}

.st-bra-fit__lede {
	margin: 0 0 14px;
	color: var(--st-ink-soft);
	font-size: 15.5px;
	line-height: 1.5;
}

/*
 * The shared .st-choice draws a radio dot. These are checkboxes — more than
 * one symptom can be true at once — so square the control and use a tick.
 */
.st-choice--check::before {
	border-radius: 6px;
}

.st-choice--check.is-checked::before,
.st-choice--check:has(input:checked)::before {
	box-shadow: none;
	background: var(--st-wine);
	border-color: var(--st-wine);
}

.st-choice--check.is-checked::after,
.st-choice--check:has(input:checked)::after {
	content: "";
	position: absolute;
	left: 22px;
	width: 6px;
	height: 11px;
	border: solid #fff;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) translateY(-1px);
}

/* ------------------------------------------------------------ result -- */

.st-bra-result {
	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-bra .32s ease both;
}

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

.st-bra-hero__size {
	margin: 4px 0 0;
	color: var(--st-wine);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
}

.st-bra-hero__band {
	font-size: 52px;
}

.st-bra-hero__cup {
	font-size: 52px;
}

.st-bra-hero__alt {
	margin: 10px 0 0;
	color: var(--st-ink-soft);
	font-size: 15.5px;
	line-height: 1.5;
}

.st-bra-hero__note {
	margin: 14px 0 0;
	font-size: 16px;
	line-height: 1.55;
}

.st-bra-h3 {
	margin: 26px 0 4px;
	font-size: 19px;
	font-weight: 800;
	color: var(--st-ink);
}

.st-bra-lede {
	margin: 0 0 4px;
	color: var(--st-ink-soft);
	font-size: 15.5px;
	line-height: 1.55;
}

/* --------------------------------------------------------- the notes -- */

.st-bra-adjusted {
	background: var(--st-sage-tint);
	border-left-color: var(--st-sage);
	margin-top: 18px;
}

.st-bra-shape,
.st-bra-close {
	background: var(--st-cream);
	border-left-color: var(--st-tan);
	margin-top: 18px;
}

/* --------------------------------------------- modern vs +4 methods -- */

/*
 * The comparison that explains why every other calculator disagrees with this
 * one. Presented side by side rather than buried in prose, because it is the
 * first thing a sceptical reader wants to see.
 */

.st-bra-methods {
	margin-top: 26px;
	padding: 18px;
	background: var(--st-cream);
	border-radius: var(--st-radius);
}

.st-bra-methods__title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	color: var(--st-ink);
}

.st-bra-methods__grid {
	display: grid;
	gap: 10px;
}

.st-bra-method {
	display: grid;
	gap: 3px;
	padding: 14px 16px;
	background: var(--st-white);
	border: 1.5px solid var(--st-line);
	border-radius: var(--st-radius);
}

.st-bra-method.is-recommended {
	border-color: var(--st-wine);
	background: var(--st-wine-tint);
}

.st-bra-method__tag {
	color: var(--st-ink-soft);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}

.st-bra-method.is-recommended .st-bra-method__tag {
	color: var(--st-wine);
}

.st-bra-method__size {
	color: var(--st-ink);
	font-size: 27px;
	font-weight: 800;
	line-height: 1.1;
}

.st-bra-method.is-old .st-bra-method__size {
	color: var(--st-ink-soft);
	text-decoration: line-through;
	text-decoration-thickness: 2px;
}

.st-bra-method__name {
	color: var(--st-ink-soft);
	font-size: 14.5px;
	line-height: 1.4;
}

.st-bra-methods__body {
	margin: 14px 0 0;
	font-size: 15.5px;
	line-height: 1.6;
}

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

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

	.st-bra-hero__band,
	.st-bra-hero__cup {
		font-size: 68px;
	}

	.st-bra-methods {
		padding: 24px;
	}

	.st-bra-methods__grid {
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
}