/**
 * Medication Nutrient Map
 *
 * Mobile first. Built and checked at 320px, 360px and 375px before anything wider.
 * Colour and type inherit the theme through custom properties, with fallbacks
 * to the documented brand palette so the tool still reads correctly if a
 * token is renamed upstream.
 *
 * Version 1.5.0
 */

.mnm {
	/* Brand tokens.
	   Integration note, JAO v3.91.0: the outer var() names were --jao-forest and
	   friends. No --jao- custom property exists anywhere in this theme, so every
	   one of them fell through to its fallback silently and the tool rendered in
	   approximations rather than brand colours. The theme has no global token set
	   at all: each tool scopes its own :root, and the shared intro component
	   deliberately namespaces --ti- so it "never collides with a tool page's own
	   :root or CSS" (v3.33.0). This tool now follows that same pattern, with the
	   values taken from the theme's own literals rather than approximated:
	   #1b4332 is the dominant forest across the theme, #c9a84c the tool gold. */
	--mnm-forest: #022c22;
	--mnm-green: #1b4332;
	--mnm-gold: #c9a84c;
	--mnm-paper: #fbfaf6;
	--mnm-ink: #17221d;
	--mnm-muted: #5b6b63;
	--mnm-rule: #dcdfd6;

	/* Functional signal colours. These carry meaning, so they are not brand tokens. */
	--mnm-lane-low: #8a6410;
	--mnm-lane-low-bg: #fdf6e6;
	--mnm-lane-add: #8f3421;
	--mnm-lane-add-bg: #fbeeea;
	--mnm-flag: #7d1f1f;

	/* One duration token drives every animation in the tool, so nothing drifts. */
	--mnm-dur: 320ms;
	--mnm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* The original fallbacks named Crimson Pro and Source Sans 3. Neither is
	   loaded: assets/fonts/fonts.css vendors Fraunces, Plus Jakarta Sans, Outfit
	   and JetBrains Mono only, and the theme carries zero font-family
	   declarations for either of the two originally named. The tool would have
	   rendered in Georgia and system-ui, visibly unlike every other page, with no
	   error anywhere. These are the two families the theme actually loads and
	   uses, 68 and 120 declarations respectively. */
	--mnm-serif: "Fraunces", Georgia, "Times New Roman", serif;
	--mnm-sans: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

	font-family: var(--mnm-sans);
	color: var(--mnm-ink);
	max-width: 44rem;
	margin: 0 auto;
	padding: 1.25rem 1rem 3rem;
	line-height: 1.55;
}

.mnm *,
.mnm *::before,
.mnm *::after {
	box-sizing: border-box;
}

/* ---------- Intro ---------- */

.mnm__eyebrow {
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mnm-green);
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.mnm__title {
	font-family: var(--mnm-serif);
	font-size: 1.85rem;
	line-height: 1.15;
	color: var(--mnm-forest);
	margin: 0 0 0.75rem;
	font-weight: 600;
}

.mnm__standfirst {
	font-size: 1.0625rem;
	margin: 0 0 1rem;
}

.mnm__steady,
.mnm-steady {
	font-size: 0.9375rem;
	background: #f2f7f4;
	border: 1px solid #d7e5dc;
	border-radius: 0.5rem;
	padding: 0.875rem 1rem;
	color: var(--mnm-ink);
}

.mnm__steady {
	margin: 0 0 1.5rem;
}

.mnm-steady {
	margin: 1rem 0 0;
}

.mnm__pillar {
	font-family: var(--mnm-serif);
	font-size: 1rem;
	font-style: italic;
	color: var(--mnm-forest);
	border-left: 3px solid var(--mnm-gold);
	padding: 0.25rem 0 0.25rem 0.875rem;
	margin: 0 0 2rem;
}

/* ---------- Picker ---------- */

.mnm__fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.mnm__legend {
	font-family: var(--mnm-serif);
	font-size: 1.25rem;
	color: var(--mnm-forest);
	font-weight: 600;
	padding: 0;
	margin-bottom: 0.75rem;
}

.mnm__search-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mnm-muted);
	margin-bottom: 0.375rem;
}

.mnm__search {
	width: 100%;
	/* 1rem minimum so iOS does not zoom the viewport on focus. */
	font-size: 1rem;
	font-family: inherit;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--mnm-rule);
	border-radius: 0.5rem;
	background: #fff;
	color: inherit;
}

.mnm__search:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 1px;
	border-color: var(--mnm-green);
}

.mnm__search-empty {
	font-size: 0.9375rem;
	color: var(--mnm-muted);
	margin: 0.625rem 0 0;
}

.mnm__options {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.mnm__option {
	position: relative;
}

.mnm__option[hidden] {
	display: none;
}

.mnm__checkbox {
	position: absolute;
	top: 1rem;
	left: 0.875rem;
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	appearance: none;
	-webkit-appearance: none;
	border: 2px solid var(--mnm-rule);
	border-radius: 0.25rem;
	background: #fff;
	cursor: pointer;
}

.mnm__checkbox:checked {
	background: var(--mnm-green);
	border-color: var(--mnm-green);
}

.mnm__checkbox:checked::after {
	content: "";
	position: absolute;
	left: 0.3125rem;
	top: 0.0625rem;
	width: 0.3125rem;
	height: 0.625rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.mnm__checkbox:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
}

.mnm__option-label {
	display: block;
	padding: 0.875rem 0.875rem 0.875rem 2.75rem;
	border: 1px solid var(--mnm-rule);
	border-radius: 0.5rem;
	background: #fff;
	cursor: pointer;
	transition: border-color var(--mnm-dur) var(--mnm-ease), background-color var(--mnm-dur) var(--mnm-ease);
}

.mnm__checkbox:checked + .mnm__option-label {
	border-color: var(--mnm-green);
	background: #f2f8f5;
}

.mnm__option-name {
	display: block;
	font-weight: 600;
	color: var(--mnm-forest);
}

.mnm__option-examples {
	display: block;
	font-size: 0.875rem;
	color: var(--mnm-muted);
	margin-top: 0.125rem;
}

.mnm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin-top: 1.25rem;
}

.mnm__button {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	padding: 0.8125rem 1.25rem;
	border-radius: 0.5rem;
	border: 1px solid transparent;
	cursor: pointer;
	min-height: 2.75rem;
	transition: background-color var(--mnm-dur) var(--mnm-ease);
}

.mnm__button--primary {
	background: var(--mnm-forest);
	color: #fff;
	flex: 1 1 12rem;
}

.mnm__button--primary:hover {
	background: var(--mnm-green);
}

.mnm__button--quiet {
	background: transparent;
	color: var(--mnm-muted);
	border-color: var(--mnm-rule);
}

.mnm__button:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
}

.mnm__count {
	font-size: 0.9375rem;
	color: var(--mnm-muted);
	margin: 0.75rem 0 0;
}

/* ---------- Results ---------- */

.mnm-reveal {
	animation: mnm-rise var(--mnm-dur) var(--mnm-ease) both;
	animation-delay: calc(var(--mnm-i, 0) * 60ms);
}

@keyframes mnm-rise {
	from {
		opacity: 0;
		transform: translateY(0.625rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------- Results as their own page ---------- */

.mnm__view[hidden] {
	display: none;
}

.mnm__results {
	margin-top: 0;
}

.mnm__results:focus-visible {
	outline: none;
}

.mnm-results__head {
	margin-bottom: 1.5rem;
}

.mnm-back {
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--mnm-green);
	background: none;
	border: 0;
	padding: 0.5rem 0.5rem 0.5rem 0;
	margin-bottom: 0.5rem;
	cursor: pointer;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
}

.mnm-back::before {
	content: "\2190";
	font-size: 1.125rem;
	line-height: 1;
}

.mnm-back:hover {
	text-decoration: underline;
}

.mnm-back:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.mnm-results__title {
	font-family: var(--mnm-serif);
	font-size: 2.125rem;
	line-height: 1.08;
	color: var(--mnm-forest);
	margin: 0 0 0.5rem;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.mnm-results__title:focus {
	outline: none;
}

.mnm-results__title:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 4px;
}

.mnm-results__sub {
	font-size: 0.9375rem;
	color: var(--mnm-muted);
	margin: 0;
}

/* Quiet footnote marker. Present for anyone who wants it, invisible to
   anyone who does not. */
.mnm-note-ref {
	font-size: 0.75rem;
	line-height: 1;
	vertical-align: super;
	margin-left: 0.125rem;
	color: var(--mnm-muted);
	text-decoration: none;
	padding: 0 0.125rem;
}

.mnm-note-ref:hover {
	color: var(--mnm-green);
	text-decoration: underline;
}

.mnm-note-ref:focus-visible {
	outline: 2px solid var(--mnm-gold);
	outline-offset: 2px;
	border-radius: 0.125rem;
}

.mnm-footnote {
	margin-top: 2rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mnm-rule);
}

.mnm-footnote__text {
	font-size: 0.875rem;
	color: var(--mnm-muted);
	margin: 0;
	line-height: 1.5;
}

.mnm-footnote__mark {
	color: var(--mnm-lane-add);
	font-weight: 700;
}

/* ---------- At a glance ---------- */

.mnm-glance {
	position: relative;
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(200, 153, 47, 0.16), transparent 60%),
		var(--mnm-forest);
	color: #fff;
	border-radius: 0.875rem;
	padding: 1.5rem 1.25rem 1.375rem;
	margin-bottom: 2rem;
	box-shadow: 0 0.75rem 2rem -0.75rem rgba(2, 44, 34, 0.45);
	overflow: hidden;
}

/* A dispensing label carries a rule under its heading. So does this. */
.mnm-glance::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mnm-gold) 0%, rgba(200, 153, 47, 0.25) 55%, transparent 100%);
}

.mnm-glance__label {
	font-size: 0.6875rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mnm-gold);
	margin: 0 0 1rem;
}

.mnm-glance__row {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 0.875rem 0 0;
	margin-top: 0.875rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.mnm-glance__row:first-of-type {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

.mnm-glance__key {
	font-size: 0.6875rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 700;
}

.mnm-glance__val {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}

/* Each finding reads as its own object, not an item in a sentence. */
.mnm-token {
	font-family: var(--mnm-sans);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 0.375rem;
	padding: 0.3125rem 0.625rem;
	white-space: nowrap;
}

/* ---------- Scannable depletion block ---------- */

.mnm-item__plain {
	margin: 0 0 0.5rem;
	font-size: 1rem;
	line-height: 1.5;
}

.mnm-chips {
	margin: 0.5rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3125rem;
	align-items: center;
}

.mnm-chips__label {
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--mnm-muted);
	margin-right: 0.125rem;
}

.mnm-chip {
	font-size: 0.8125rem;
	background: #eef2ee;
	border: 1px solid #dbe3dc;
	border-radius: 1rem;
	padding: 0.1875rem 0.625rem;
	color: var(--mnm-ink);
}

/* Detail sits one tap away rather than in the way. */
.mnm-more {
	margin-top: 0.75rem;
}

.mnm-more__summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mnm-green);
	padding: 0.5rem 0;
	min-height: 2.25rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3125rem;
}

.mnm-more__summary::-webkit-details-marker {
	display: none;
}

.mnm-more__summary::after {
	content: "\203A";
	font-size: 1.125rem;
	line-height: 1;
	transition: transform var(--mnm-dur) var(--mnm-ease);
}

.mnm-more[open] .mnm-more__summary::after {
	transform: rotate(90deg);
}

.mnm-more__summary:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

.mnm-more__body {
	padding-left: 0.875rem;
	border-left: 2px solid var(--mnm-rule);
	margin-top: 0.25rem;
}

.mnm-more__body > *:last-child {
	margin-bottom: 0;
}

.mnm__section-title {
	font-family: var(--mnm-serif);
	font-size: 1.5rem;
	color: var(--mnm-forest);
	margin: 2.75rem 0 0.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mnm-rule);
}

.mnm__section-title:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.mnm__section-note {
	font-size: 0.9375rem;
	color: var(--mnm-muted);
	margin: -0.5rem 0 1rem;
}

/* Combination warnings */

.mnm-combo {
	border-radius: 0.625rem;
	padding: 1.125rem 1.25rem;
	margin-bottom: 0.875rem;
	border: 1px solid;
	border-left-width: 3px;
}

.mnm-combo--high {
	background: var(--mnm-lane-add-bg);
	border-color: #e0b6ab;
}

.mnm-combo--medium {
	background: var(--mnm-lane-low-bg);
	border-color: #e3d2a6;
}

.mnm-combo__label {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 800;
	margin: 0 0 0.5rem;
}

.mnm-combo--high .mnm-combo__label {
	color: var(--mnm-lane-add);
}

.mnm-combo--medium .mnm-combo__label {
	color: var(--mnm-lane-low);
}

.mnm-combo__title {
	font-family: var(--mnm-serif);
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--mnm-forest);
	line-height: 1.2;
	letter-spacing: -0.005em;
}

.mnm-combo__body {
	margin: 0;
	font-size: 0.9688rem;
}

/* Medicine card */

.mnm-card {
	border: 1px solid var(--mnm-rule);
	border-radius: 0.625rem;
	background: #fff;
	margin-bottom: 1.5rem;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(2, 44, 34, 0.04);
}

/* Name, then a rule, then the instruction. The order a dispensing label uses. */
.mnm-card__head {
	padding: 1.25rem 1.25rem 1rem;
	border-bottom: 1px solid var(--mnm-rule);
	background: linear-gradient(180deg, #fcfdfc 0%, #fff 100%);
}

.mnm-card__name {
	font-family: var(--mnm-serif);
	font-size: 1.4375rem;
	font-weight: 600;
	color: var(--mnm-forest);
	margin: 0 0 0.5rem;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.mnm-card__name::after {
	content: "";
	display: block;
	width: 2.25rem;
	height: 2px;
	background: var(--mnm-gold);
	margin-top: 0.625rem;
}

.mnm-card__context {
	font-size: 0.875rem;
	color: var(--mnm-muted);
	margin: 0;
	line-height: 1.45;
}

/* The two lanes. This is the point of the tool, so it gets the structure. */

.mnm-lane {
	padding: 1.125rem 1.25rem;
	border-left: 3px solid transparent;
}

.mnm-lane + .mnm-lane {
	border-top: 1px solid var(--mnm-rule);
}

.mnm-lane--low {
	border-left-color: var(--mnm-lane-low);
	background: linear-gradient(100deg, var(--mnm-lane-low-bg) 0%, #fff 45%);
}

.mnm-lane--add {
	border-left-color: var(--mnm-lane-add);
	background: linear-gradient(100deg, var(--mnm-lane-add-bg) 0%, #fff 45%);
}

.mnm-lane__label {
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 700;
	margin: 0 0 1rem;
}

.mnm-lane--low .mnm-lane__label {
	color: var(--mnm-lane-low);
}

.mnm-lane--add .mnm-lane__label {
	color: var(--mnm-lane-add);
}

.mnm-item {
	margin: 0 0 1.5rem;
}

.mnm-item:last-child {
	margin-bottom: 0;
}

.mnm-item__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.mnm-item__name {
	font-weight: 700;
	color: var(--mnm-forest);
	font-size: 1.0625rem;
	letter-spacing: -0.005em;
}

.mnm-item__text {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
}

.mnm-item__figures {
	margin: 0 0 0.5rem;
	font-size: 0.9375rem;
	color: var(--mnm-muted);
}

.mnm-item__claim {
	font-size: 0.875rem;
	color: var(--mnm-muted);
	margin: 0.5rem 0 0;
	padding-top: 0.5rem;
	border-top: 1px dotted var(--mnm-rule);
}

/* Quiet inline label. Reads as part of the sentence, not as a stamp. */
.mnm-item__claim-label {
	font-weight: 700;
	color: var(--mnm-forest);
}

/* Tier badge */

.mnm-tier {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.1875rem 0.5rem;
	border-radius: 0.25rem;
	white-space: nowrap;
	border: 1px solid;
}

.mnm-tier--established {
	background: var(--mnm-forest);
	color: #fff;
	border-color: var(--mnm-forest);
}

/* ---------- Signature: the cautionary label ----------
   Medicine boxes carry small amber warning labels. The cautions that matter
   most here are exactly that, so they are set as one. Everything else on the
   page stays quiet so this is the thing you remember. */

.mnm-lane--add .mnm-item--high {
	background: #fdf7ec;
	border: 1px solid #e6d3a8;
	border-left: 3px solid var(--mnm-lane-low);
	border-radius: 0.375rem;
	padding: 0.875rem 1rem 1rem;
	margin-bottom: 1rem;
}

.mnm-caution__tag {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--mnm-lane-low);
	margin: 0 0 0.5rem;
}

.mnm-lane--add .mnm-item--high .mnm-item__name {
	font-size: 1.0625rem;
	line-height: 1.3;
}

.mnm-lane--add .mnm-item--high .mnm-item__text {
	margin-bottom: 0;
}

/* Red flags */

.mnm-flags {
	background: #fdf4f2;
	border-top: 1px solid #ecccc3;
	padding: 1.125rem 1.25rem;
}

.mnm-flags__label {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--mnm-flag);
	margin: 0 0 0.75rem;
}

.mnm-flags__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.mnm-flags__item {
	margin-bottom: 0.625rem;
	font-size: 0.9375rem;
}

.mnm-flags__item:last-child {
	margin-bottom: 0;
}

.mnm-flags__sign {
	display: block;
	font-weight: 700;
	color: var(--mnm-flag);
}

/* Routing footer on each card */

.mnm-card__routing {
	padding: 0.875rem 1.125rem;
	background: #f5f7f4;
	border-top: 1px solid var(--mnm-rule);
	font-size: 0.9375rem;
	margin: 0;
}

/* Drawers */

.mnm-drawer {
	border: 1px solid var(--mnm-rule);
	border-radius: 0.625rem;
	background: #fff;
	margin-bottom: 0.75rem;
	overflow: hidden;
}

.mnm-drawer__summary {
	cursor: pointer;
	padding: 0.875rem 1.125rem;
	font-weight: 600;
	color: var(--mnm-forest);
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.9688rem;
}

.mnm-drawer__summary::-webkit-details-marker {
	display: none;
}

.mnm-drawer__summary::after {
	content: "+";
	font-size: 1.25rem;
	line-height: 1;
	color: var(--mnm-green);
	flex-shrink: 0;
}

.mnm-drawer[open] .mnm-drawer__summary::after {
	content: "\2212";
}

.mnm-drawer__summary:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: -3px;
}

.mnm-drawer__body {
	padding: 0 1.125rem 1.125rem;
	font-size: 0.9375rem;
}

.mnm-drawer__body > *:first-child {
	margin-top: 0;
}

.mnm-rejected {
	margin: 0 0 1rem;
	padding-left: 0.875rem;
	border-left: 2px solid var(--mnm-rule);
}

.mnm-rejected:last-child {
	margin-bottom: 0;
}

.mnm-rejected__claim {
	font-weight: 700;
	color: var(--mnm-ink);
	margin: 0 0 0.25rem;
}

.mnm-rejected__verdict {
	margin: 0;
	color: var(--mnm-muted);
}

.mnm-sources {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
}

.mnm-sources__item {
	margin-bottom: 0.625rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px dotted var(--mnm-rule);
	word-break: break-word;
}

.mnm-sources__item:last-child {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}

.mnm-sources__link {
	color: var(--mnm-green);
	text-decoration: underline;
}

.mnm-sources__accessed {
	display: block;
	color: var(--mnm-muted);
	font-size: 0.8125rem;
}

.mnm__noscript {
	background: var(--mnm-lane-low-bg);
	border: 1px solid #e3d2a6;
	border-radius: 0.5rem;
	padding: 1rem;
	margin-top: 1.5rem;
}

/* ---------- Wider screens ---------- */

@media (min-width: 40rem) {
	.mnm {
		padding: 2rem 1.5rem 4rem;
	}

	.mnm__title {
		font-size: 2.375rem;
	}

	.mnm__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mnm__button--primary {
		flex: 0 0 auto;
	}
}


/* ---------- Takeaway gate ---------- */

.mnm-takeaway {
	margin-top: 2.5rem;
}

.mnm-gate {
	background: linear-gradient(180deg, #f4f8f5 0%, #fff 100%);
	border: 1px solid #d7e5dc;
	border-left: 3px solid var(--mnm-green);
	border-radius: 0.625rem;
	padding: 1.375rem 1.25rem;
}

.mnm-gate__eyebrow {
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--mnm-green);
	margin: 0 0 0.5rem;
}

.mnm-gate__title {
	font-family: var(--mnm-serif);
	font-size: 1.375rem;
	font-weight: 600;
	color: var(--mnm-forest);
	margin: 0 0 0.625rem;
	line-height: 1.2;
}

.mnm-gate__body {
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

.mnm-gate__label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--mnm-muted);
	margin-bottom: 0.375rem;
}

.mnm-gate__input {
	width: 100%;
	font-size: 1rem;
	font-family: inherit;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--mnm-rule);
	border-radius: 0.5rem;
	background: #fff;
	color: inherit;
	margin-bottom: 0.75rem;
}

.mnm-gate__input:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 1px;
	border-color: var(--mnm-green);
}

/* Off-screen rather than display none, because some bots skip hidden fields. */
.mnm-gate__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mnm-gate__button {
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	background: var(--mnm-forest);
	color: #fff;
	border: 0;
	border-radius: 0.5rem;
	padding: 0.8125rem 1.25rem;
	min-height: 2.75rem;
	cursor: pointer;
	width: 100%;
}

.mnm-gate__button:hover {
	background: var(--mnm-green);
}

.mnm-gate__button:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
}

.mnm-gate__button[disabled] {
	opacity: 0.6;
	cursor: default;
}

.mnm-gate__note {
	font-size: 0.8125rem;
	color: var(--mnm-muted);
	margin: 0.75rem 0 0;
}

.mnm-summary {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.8125rem;
	line-height: 1.5;
	background: #fff;
	border: 1px solid var(--mnm-rule);
	border-radius: 0.5rem;
	padding: 0.875rem;
	margin: 0 0 1rem;
	white-space: pre-wrap;
	word-break: break-word;
	max-height: 20rem;
	overflow-y: auto;
}

/* ---------- Where to go next ---------- */

.mnm-next {
	display: grid;
	gap: 0.75rem;
}

.mnm-next__card {
	display: block;
	border: 1px solid var(--mnm-rule);
	border-radius: 0.625rem;
	padding: 1.125rem 1.25rem;
	background: #fff;
	text-decoration: none;
	color: inherit;
	transition: border-color var(--mnm-dur) var(--mnm-ease), background-color var(--mnm-dur) var(--mnm-ease);
}

.mnm-next__card:hover {
	border-color: var(--mnm-green);
	background: #f7fbf9;
}

.mnm-next__card:focus-visible {
	outline: 3px solid var(--mnm-gold);
	outline-offset: 2px;
}

.mnm-next__card--primary {
	border-left: 3px solid var(--mnm-gold);
}

.mnm-next__label {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 800;
	color: var(--mnm-green);
	margin-bottom: 0.375rem;
}

.mnm-next__name {
	display: block;
	font-family: var(--mnm-serif);
	font-size: 1.1875rem;
	font-weight: 600;
	color: var(--mnm-forest);
	margin-bottom: 0.25rem;
}

.mnm-next__body {
	display: block;
	font-size: 0.9375rem;
	color: var(--mnm-muted);
	line-height: 1.45;
}

.mnm-next__quiet {
	font-size: 0.875rem;
	color: var(--mnm-muted);
	margin: 0.875rem 0 0;
}

.mnm-next__quiet a {
	color: var(--mnm-green);
	text-decoration: underline;
}

@media (min-width: 40rem) {
	.mnm-next {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.mnm-reveal {
		animation: none;
		animation-delay: 0ms;
		opacity: 1;
		transform: none;
	}

	.mnm__option-label,
	.mnm__button,
	.mnm-more__summary::after,
	.mnm-next__card {
		transition: none;
	}

	.mnm *,
	.mnm *::before,
	.mnm *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}