/*
 * Matched to sharpelawfirm.org: Crimson Text headings, square corners, and solid color blocking
 * rather than grey cards. The serif and acumin-pro are loaded by the theme, so they are referenced
 * but never imported here. Off that site they fall back to Times and the theme's own body font.
 *
 * These deliberately do not inherit GeneratePress's --base/--contrast globals. Those are generic
 * slots whose meaning varies per site: stock GP puts light backgrounds in --base-2, while Sharpe's
 * site puts its primary blue there. Inheriting them renders the results near-white on a
 * conventionally themed site. Override --pic-* directly to retheme.
 */
.pic {
	--pic-navy: #1b3a69;
	--pic-heading: #225095;
	--pic-primary: #1c70b5;
	--pic-primary-hover: #3994de;
	--pic-accent: #3994de;
	--pic-text: #182129;
	--pic-on-dark: #9bbcda;
	--pic-field: #ffffff;
	--pic-border: #8fbadd;
	--pic-serif: "Crimson Text", "Times New Roman", serif;

	color: var(--pic-text);
	display: grid;
	gap: 1.75rem;
}

@media (min-width: 900px) {
	.pic {
		grid-template-columns: 3fr 2fr;
		align-items: start;
	}

	/*
	 * Kept to the form's column rather than spanning the grid, so it never runs underneath the
	 * pinned results panel.
	 */
	.pic__disclaimer {
		grid-column: 1;
	}

	.pic__results {
		position: sticky;
		top: 2rem;

		/* Without the cap a tall panel outgrows the viewport, stays pinned across the whole
		   right side, and nothing below it ever gets room to show. */
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
	}
}

.pic__form {
	background: var(--pic-field);
	border: 1px solid var(--pic-border);
	padding: 2rem;
}

.pic__title {
	font-family: var(--pic-serif);
	font-weight: 600;
	color: var(--pic-heading);
	margin: 0 0 1.75rem;
	padding-bottom: 1rem;
	position: relative;
}

/* The short blue rule under section headings is a motif across the site. */
.pic__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 74px;
	height: 3px;
	background: var(--pic-primary-hover);
}

.pic__field {
	margin-bottom: 1.5rem;
}

.pic__label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.2rem;
}

.pic__help {
	margin: 0 0 0.6rem;
	font-size: 0.85em;
	line-height: 1.5;
	color: #5a6b7d;
}

.pic__currency {
	display: flex;
	align-items: center;
	background: var(--pic-field);
	border: 1px solid var(--pic-border);
}

.pic__currency:focus-within {
	border-color: var(--pic-primary);
	box-shadow: 0 0 0 3px rgb(28 112 181 / 20%);
}

.pic__currency-symbol {
	padding: 0 0.3rem 0 0.85rem;
	color: var(--pic-primary);
	font-weight: 600;
}

.pic .pic__input {
	flex: 1;
	border: 0;
	background: none;
	padding: 0.75rem 0.85rem 0.75rem 0.25rem;
	font: inherit;
	color: inherit;
	min-width: 0;
}

.pic .pic__input:focus {
	outline: none;
}

.pic__multiplier {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.pic .pic__range {
	--pic-range-progress: 0%;

	flex: 1;
	appearance: none;
	height: 6px;
	background: linear-gradient(
		to right,
		var(--pic-primary) var(--pic-range-progress),
		#dbe7f2 var(--pic-range-progress)
	);
}

.pic .pic__range::-webkit-slider-thumb {
	appearance: none;
	width: 22px;
	height: 22px;
	background: var(--pic-primary);
	border: 3px solid var(--pic-field);
	box-shadow: 0 1px 5px rgb(24 33 41 / 35%);
	cursor: pointer;
}

.pic .pic__range::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 0;
	background: var(--pic-primary);
	border: 3px solid var(--pic-field);
	cursor: pointer;
}

.pic .pic__range:focus-visible {
	outline: 2px solid var(--pic-primary-hover);
	outline-offset: 4px;
}

.pic__range-value {
	font-weight: 700;
	font-size: 1.15em;
	color: var(--pic-primary);
	min-width: 2.5ch;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.pic__scale {
	display: flex;
	justify-content: space-between;
	font-size: 0.8em;
	color: #5a6b7d;
	margin-top: 0.4rem;
}

.pic .pic__reset {
	background: none;
	border: 1px solid var(--pic-primary);
	color: var(--pic-primary);
	padding: 0.6rem 1.4rem;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pic .pic__reset:hover,
.pic .pic__reset:focus-visible {
	background: var(--pic-primary);
	color: var(--pic-field);
}

/* Solid navy block, mirroring the color-blocked cards on the site. */
.pic__results {
	background: var(--pic-navy);
	padding: 2rem;
	color: var(--pic-field);
}

.pic__results-eyebrow {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--pic-accent);
	margin: 0 0 1.25rem;
}

.pic__result + .pic__result {
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	border-top: 1px solid rgb(143 186 221 / 30%);
}

.pic__result-label {
	font-family: var(--pic-serif);
	font-weight: 600;
	font-size: 1.25rem;
	color: var(--pic-field);
	margin: 0 0 0.2rem;
}

.pic__results .pic__help {
	color: var(--pic-on-dark);
}

.pic__result-value {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--pic-field);
	font-variant-numeric: tabular-nums;
	line-height: 1.25;
}

.pic__result--total .pic__result-value {
	font-size: 2rem;
	color: var(--pic-primary-hover);
}

.pic__disclaimer {
	font-size: 0.82em;
	line-height: 1.6;
	color: #5a6b7d;
	margin: 0;
	border-left: 3px solid var(--pic-border);
	padding-left: 1rem;
}

.pic-notice {
	padding: 1rem;
	border-left: 4px solid var(--pic-primary);
	background: #f4f8fb;
}