.ucsd-tmpgfr-calculator {
	/*
	 * Brand tokens — source: UC San Diego Health Brand Guidelines
	 * (pulse.ucsd.edu/brand), Section 5 "Brand Elements" > Color palette.
	 * Kept in sync with theme/style.css's :root tokens; see theme/CLAUDE.md
	 * and calc/CLAUDE.md for the shared token table. Scoped locally (rather
	 * than relying on the theme defining these) so this plugin still looks
	 * correct on any theme, not just theme/.
	 */
	--ucsd-navy: #13294b; /* PMS 2767 */
	--ucsd-blue: #007dba; /* PMS 7461 */
	--ucsd-yellow: #ffcb00; /* PMS 116 */
	--ucsd-cool-gray-8: #8a8a8d; /* PMS Cool Gray 8 — brand-mandated secondary/muted text color */
	--ucsd-cool-gray-4: #bcbbba; /* PMS Cool Gray 4 — borders/dividers */

	 /*max-width: 640px;*/
	width: 100%;
	margin: 0 auto;
	font-family: inherit;
	color: var(--ucsd-navy);
}

/*
 * This plugin can be embedded in any theme, so it can't rely on a global
 * box-sizing reset existing. Without border-box, the padded/bordered
 * inputs below (stretched to 100% width by their flex column parent) add
 * their padding+border on top of that 100%, overflowing the viewport on
 * narrow phone screens.
 */
.ucsd-tmpgfr-calculator,
.ucsd-tmpgfr-calculator *,
.ucsd-tmpgfr-calculator *::before,
.ucsd-tmpgfr-calculator *::after {
	box-sizing: border-box;
}

.ucsd-tmpgfr-calculator__intro {
	margin-bottom: 1em;
}

.ucsd-tmpgfr-calculator__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
	margin-bottom: 1em;
}

@media (max-width: 480px) {
	.ucsd-tmpgfr-calculator__grid {
		grid-template-columns: 1fr;
	}
}

.ucsd-tmpgfr-calculator__field {
	display: flex;
	flex-direction: column;
}

.ucsd-tmpgfr-calculator__field label {
	margin-bottom: 0.35em;
	font-weight: 600;
}

.ucsd-tmpgfr-calculator__field input {
	width: 100%;
	padding: 0.5em;
	border: 1px solid var(--ucsd-cool-gray-4);
	border-radius: 4px;
	font-size: 1em;
}

.ucsd-tmpgfr-calculator__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75em;
	margin-bottom: 1em;
}

.ucsd-tmpgfr-calculator__calculate,
.ucsd-tmpgfr-calculator__reset {
	padding: 0.6em 1.2em;
	border-radius: 4px;
	font-size: 1em;
	cursor: pointer;
}

.ucsd-tmpgfr-calculator__calculate {
	background: var(--ucsd-blue);
	color: #fff;
	border: 1px solid var(--ucsd-blue);
}

.ucsd-tmpgfr-calculator__calculate:hover {
	background: var(--ucsd-navy);
	border-color: var(--ucsd-navy);
}

.ucsd-tmpgfr-calculator__reset {
	background: #fff;
	color: var(--ucsd-blue);
	border: 1px solid var(--ucsd-blue);
}

.ucsd-tmpgfr-calculator__error {
	/*
	 * #b00020 is not in the UC San Diego Health palette. The brand guide
	 * says not to introduce new colors, but none of its colors are an
	 * unambiguous validation-error red — for a clinical input-validation
	 * message, legibility/urgency takes priority over strict palette
	 * conformance. Deliberate, documented exception.
	 */
	color: #b00020;
	font-weight: 600;
}

.ucsd-tmpgfr-calculator__results {
	border-top: 1px solid var(--ucsd-cool-gray-4);
	padding-top: 1em;
	margin: 0 0 1em;
}

.ucsd-tmpgfr-calculator__result {
	display: flex;
	justify-content: space-between;
	padding: 0.4em 0;
}

.ucsd-tmpgfr-calculator__result dt {
	font-weight: 600;
}

.ucsd-tmpgfr-calculator__result--primary {
	font-size: 1.15em;
	font-weight: 700;
	border-top: 2px solid var(--ucsd-yellow);
	padding-top: 0.4em;
}

.ucsd-tmpgfr-calculator__disclaimer {
	font-size: 0.85em;
	color: var(--ucsd-cool-gray-8);
}

.ucsd-tmpgfr-calculator__references {
	margin: 1em 0 0;
	padding-left: 1.5em;
	font-size: 0.8em;
	color: var(--ucsd-cool-gray-8);
}

.ucsd-tmpgfr-calculator__references li {
	margin-bottom: 0.3em;
}