/* ==========================================================================
   Leaf Doctor and the condition pages

   The checker sits on a light panel so the pictures and answers are easy to see,
   the way a medical symptom checker reads. Loaded after learn.css.
   ========================================================================== */

.bud-wizard {
	--leaf-paper: #f3f1e8;
	--leaf-card: #ffffff;
	--leaf-ink: #101510;
	--leaf-soft: #4c554d;
	--leaf-green: #1f6b33;
	--leaf-line: #d9d6c8;
	margin-bottom: clamp(2rem, 4vw, 3rem);
	padding: clamp(1.25rem, 3vw, 2.5rem);
	border-radius: 18px;
	background: var(--leaf-paper);
	color: var(--leaf-ink);
}

/* Where you are ------------------------------------------------------------- */

.bud-leaf-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.4rem;
	margin: 0 0 clamp(1.25rem, 3vw, 2rem);
	padding: 0;
	list-style: none;
}

.bud-leaf-steps li {
	padding-top: 0.5rem;
	border-top: 5px solid var(--leaf-line);
	font-size: 0.86rem;
	font-weight: 700;
	color: var(--leaf-soft);
}

.bud-leaf-steps li.is-done,
.bud-leaf-steps li.is-current {
	border-top-color: var(--leaf-green);
}

.bud-leaf-steps li.is-current {
	color: var(--leaf-ink);
}

.bud-wizard:not(.is-live) .bud-leaf-steps {
	display: none;
}

/* A question ---------------------------------------------------------------- */

.bud-step {
	margin-bottom: 1.25rem;
}

.bud-step h2 {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: var(--bud-face);
	font-size: clamp(2rem, 3.4vw, 3rem);
	font-weight: 400;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--leaf-ink);
}

.bud-step p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--leaf-ink);
}

.bud-step-check {
	display: grid;
	grid-template-columns: clamp(150px, 20vw, 260px) minmax(0, 1fr);
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: center;
}

.bud-step-picture {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 14px;
	background: var(--leaf-card);
}

.bud-step-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bud-step-picture .bud-leaf-art {
	position: absolute;
	inset: 5%;
	width: 90%;
	height: 90%;
	object-fit: contain;
}

.bud-step-body {
	max-width: 44rem;
}

/* Plain answers ------------------------------------------------------------- */

.bud-answers {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 0.625rem;
}

.bud-answers button,
.bud-verdict-next,
.bud-answers-more button {
	min-height: 56px;
	padding: 0.75rem 1.1rem;
	border: 2px solid var(--leaf-line);
	border-radius: 10px;
	background: var(--leaf-card);
	font-family: var(--bud-sans);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.25;
	text-align: left;
	color: var(--leaf-ink);
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bud-answers button:hover,
.bud-verdict-next:hover,
.bud-answers-more button:hover {
	border-color: var(--leaf-green);
	background: var(--leaf-green);
	color: #fff;
}

.bud-wizard button:focus-visible,
.bud-wizard a:focus-visible {
	outline: 3px solid var(--leaf-green);
	outline-offset: 2px;
}

.bud-answers .bud-answer-quiet,
.bud-answers-more .bud-answer-quiet {
	border-style: dashed;
	background: none;
	font-weight: 600;
	color: var(--leaf-soft);
}

.bud-answers-more {
	margin-top: 0.625rem !important;
}

.bud-answers-more button {
	min-height: 48px;
	font-size: 0.95rem;
}

/* Picture answers ----------------------------------------------------------- */

.bud-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr));
	gap: 0.75rem;
}

.bud-tile {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border: 2px solid var(--leaf-line);
	border-radius: 12px;
	background: var(--leaf-card);
	font-family: var(--bud-sans);
	text-align: left;
	color: var(--leaf-ink);
	cursor: pointer;
	transition: border-color 0.15s ease, transform 0.15s ease;
}

.bud-tile:hover {
	border-color: var(--leaf-green);
	transform: translateY(-2px);
}

.bud-tile-picture {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #fbfaf5;
}

.bud-tile-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bud-tile-picture .bud-leaf-art {
	position: absolute;
	inset: 5%;
	width: 90%;
	height: 90%;
	object-fit: contain;
}

.bud-tile-label {
	padding: 0.7rem 0.85rem;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.25;
}

/* The plant to point at ----------------------------------------------------- */

.bud-map-layout {
	display: grid;
	grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
	gap: clamp(1.25rem, 4vw, 3rem);
	align-items: center;
}

.bud-plant-map {
	display: block;
	width: 100%;
	max-height: 460px;
}

.bud-zone {
	color: #c9cbbf;
	fill: currentColor;
}

.bud-zone.is-on {
	color: #4c8c3f;
	cursor: pointer;
	transition: color 0.15s ease;
}

.bud-zone.is-lit {
	color: #e0a81c;
}

.bud-step-map .bud-answers {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

/* A check's answer ---------------------------------------------------------- */

.bud-verdict strong {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 1.4rem;
	line-height: 1.2;
	color: var(--leaf-green);
}

.bud-verdict a {
	display: block;
	margin-top: 0.85rem;
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--leaf-ink);
}

.bud-verdict-next {
	display: block;
	margin-top: 1.25rem;
}

.bud-wizard.is-live .bud-verdict,
.bud-wizard.is-live .bud-step.is-verdict .bud-answers {
	display: none;
}

.bud-wizard.is-live .bud-step.is-verdict .bud-verdict {
	display: block;
}

.bud-wizard-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
}

.bud-wizard-nav button {
	padding: 0.35rem 0;
	border: 0;
	background: none;
	font-family: var(--bud-sans);
	font-size: 0.95rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--leaf-soft);
	cursor: pointer;
}

.bud-wizard-nav button:hover {
	color: var(--leaf-ink);
}

/* Without JavaScript the checks read as a list and every condition stays. */
.bud-wizard:not(.is-live) button,
.bud-wizard:not(.is-live) [data-step="axis"],
.bud-wizard:not(.is-live) [data-step="done"] {
	display: none;
}

/* Conditions ---------------------------------------------------------------- */

.bud-results h2 {
	display: inline-block;
	margin: 0 0.75rem 1rem 0;
}

.bud-match-count {
	display: inline-block;
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--bud-lime);
}

.bud-leaf-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bud-leaf-cards .bud-index-item {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.bud-leaf-cards .bud-index-item[hidden] {
	display: none;
}

.bud-leaf-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: 14px;
	background: var(--bud-surface);
	color: #fff;
	text-decoration: none;
	transition: background 0.15s ease;
}

.bud-leaf-card:hover {
	background: var(--bud-surface-elevated);
}

.bud-leaf-card-picture {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #f3f1e8;
}

.bud-leaf-card-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bud-leaf-card-picture .bud-leaf-art {
	position: absolute;
	inset: 5%;
	width: 90%;
	height: 90%;
	object-fit: contain;
}

.bud-leaf-card-text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	padding: 0.95rem 1.05rem 1.1rem;
}

.bud-leaf-card-cause {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--bud-lime);
}

.bud-leaf-card strong {
	font-size: 1.08rem;
	font-weight: 700;
	line-height: 1.25;
}

.bud-leaf-card:hover strong {
	color: var(--bud-lime);
}

.bud-leaf-card-summary {
	font-size: 0.92rem;
	line-height: 1.4;
	color: #c9d0ca;
}

.bud-leaf-card-signs {
	margin-top: 0.15rem;
	font-size: 0.82rem;
	line-height: 1.35;
	color: #9aa49c;
}

/* A condition's page -------------------------------------------------------- */

.bud-leaf-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	margin: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(1.5rem, 3vw, 2.25rem);
	overflow: hidden;
	border-radius: 18px;
	background: var(--bud-surface);
}

.bud-leaf-hero-text {
	align-self: center;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

.bud-leaf-hero-cause {
	margin: 0 0 0.5rem;
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--bud-lime);
}

.bud-leaf-hero .bud-title {
	margin-bottom: 0.75rem;
}

.bud-leaf-hero .bud-standfirst p {
	margin: 0;
}

.bud-leaf-hero-picture {
	display: grid;
	place-items: center;
	min-height: 320px;
	overflow: hidden;
	background: #f3f1e8;
}

.bud-leaf-hero-picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bud-leaf-hero-picture .bud-leaf-art {
	width: auto;
	height: 320px;
	object-fit: contain;
}

/* The rail's two panels: what the condition looks like, and what to rule out first. */
.bud-leaf-glance,
.bud-leaf-checklist {
	padding: 1.1rem 1.2rem 1.2rem;
	border-radius: 14px;
	background: var(--bud-surface);
}

.bud-rail .bud-leaf-glance h2,
.bud-rail .bud-leaf-checklist h2 {
	margin-bottom: 0.75rem;
}

/* Label and value on one line each, quiet labels, plain values. */
.bud-leaf-glance dl {
	margin: 0;
}

.bud-leaf-glance div {
	display: grid;
	grid-template-columns: 4.75rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.55rem 0;
	border-top: 1px solid var(--bud-line);
}

.bud-leaf-glance dt {
	margin: 0;
	padding-top: 0.1rem;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8f998f;
}

.bud-leaf-glance dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.4;
	color: #e6ebe6;
}

.bud-leaf-checklist > p {
	margin: -0.35rem 0 0.75rem;
	font-size: 0.86rem;
	color: #9aa49c;
}

.bud-rail .bud-leaf-checklist li {
	border-top: 1px solid var(--bud-line);
}

.bud-leaf-checklist label {
	display: grid;
	grid-template-columns: 1.35rem minmax(0, 1fr);
	gap: 0.7rem;
	margin: 0;
	padding: 0.7rem 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: #cfd6cf;
	cursor: pointer;
}

.bud-leaf-checklist strong {
	display: block;
	margin-bottom: 0.1rem;
	font-weight: 600;
	color: #fff;
}

.bud-rail .bud-leaf-checklist li a {
	display: inline;
	padding: 0;
	font-size: inherit;
	color: var(--bud-lime);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* A drawn box, ticked in the brand green. */
.bud-leaf-checklist input {
	appearance: none;
	display: grid;
	place-items: center;
	width: 1.35rem;
	height: 1.35rem;
	margin: 0.05rem 0 0;
	border: 1.5px solid #6d786e;
	border-radius: 5px;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.bud-leaf-checklist input::after {
	content: "";
	width: 0.42rem;
	height: 0.75rem;
	margin-top: -0.15rem;
	border: solid #0d0f0e;
	border-width: 0 2.5px 2.5px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.15s ease;
}

.bud-leaf-checklist input:checked {
	border-color: var(--bud-lime);
	background: var(--bud-lime);
}

.bud-leaf-checklist input:checked::after {
	transform: rotate(45deg) scale(1);
}

.bud-leaf-checklist input:focus-visible {
	outline: 2px solid var(--bud-lime);
	outline-offset: 2px;
}

.bud-leaf-checklist label:has(input:checked) span {
	color: #8f998f;
}

.bud-leaf-checklist label:has(input:checked) strong {
	color: #aeb7af;
}

/* One column: the panels come before the article, the rest of the rail after it. */
@media (max-width: 980px) {
	.bud-diagnosis .bud-rail {
		display: contents;
	}

	.bud-diagnosis .bud-read-main {
		order: 1;
	}

	.bud-diagnosis .bud-rail > :not(.bud-leaf-glance, .bud-leaf-checklist) {
		order: 2;
	}

	.bud-diagnosis .bud-read-layout {
		gap: 1rem;
	}

	.bud-diagnosis .bud-read-main {
		margin-block: 1rem;
	}
}

.bud-leaf-related {
	margin-top: 2.5rem;
}

.bud-leaf-related h2 {
	margin: 0 0 0.3rem;
	font-size: 1.4rem;
	color: #fff;
}

.bud-leaf-related > p {
	margin: 0 0 1rem;
	font-size: 0.95rem;
	color: #aeb7af;
}

.bud-leaf-related .bud-leaf-cards {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
}

/* Phones -------------------------------------------------------------------- */

@media (max-width: 760px) {
	.bud-step-check {
		grid-template-columns: minmax(0, 1fr);
	}

	.bud-step-picture {
		aspect-ratio: 16 / 9;
	}

	.bud-leaf-steps li {
		font-size: 0.76rem;
		line-height: 1.2;
	}

	.bud-map-layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.bud-plant-map {
		max-height: 300px;
	}

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

	.bud-tile-label {
		font-size: 0.92rem;
	}

	/* Picture beside the words, so a list of conditions stays short. */
	.bud-leaf-card {
		display: grid;
		grid-template-columns: 112px minmax(0, 1fr);
	}

	.bud-leaf-card-picture {
		aspect-ratio: auto;
		min-height: 100%;
	}

	.bud-leaf-card-text {
		padding: 0.75rem 0.85rem;
	}

	.bud-leaf-card strong {
		font-size: 1rem;
	}

	.bud-leaf-card-summary {
		display: -webkit-box;
		overflow: hidden;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		font-size: 0.86rem;
	}

	.bud-leaf-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * The name and summary first, then the picture under them. Sized by its width, never
	 * a share of the box's height, which some phones read as the picture's full size and
	 * crop. A photo set as the featured image keeps a fixed shape and fills it.
	 */
	.bud-leaf-hero-picture {
		min-height: 0;
		padding: 1rem;
	}

	.bud-leaf-hero-picture .bud-leaf-art {
		width: min(78%, 300px);
		height: auto;
		aspect-ratio: 1;
	}

	.bud-leaf-hero-picture img:not(.bud-leaf-art) {
		height: auto;
		aspect-ratio: 4 / 3;
		border-radius: 10px;
	}

	.bud-leaf-hero-text {
		padding-bottom: 1.25rem;
	}
}

/* Photos of the condition, under the article (inc/leaf-gallery.php) */
.bud-leaf-photos {
	margin: 2.5rem 0;
}

.bud-leaf-photos-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin-bottom: 1rem;
}

.bud-leaf-photos-head h2 {
	margin: 0;
}

.bud-leaf-photos-head p {
	margin: 0;
	font-size: 0.9rem;
	color: #aeb7af;
}

.bud-leaf-photos-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bud-leaf-photos-grid.is-few {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
}

.bud-leaf-photos-grid li {
	margin: 0;
}

.bud-leaf-photos-grid figure {
	margin: 0;
}

.bud-leaf-photos-grid a {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 12px;
	background: var(--bud-surface);
}

.bud-leaf-photos-grid img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.25s ease;
}

.bud-leaf-photos-grid a:hover img,
.bud-leaf-photos-grid a:focus-visible img {
	transform: scale(1.04);
}

.bud-leaf-photos-grid a:focus-visible {
	outline: 2px solid var(--bud-lime);
	outline-offset: 3px;
}

.bud-leaf-photos-grid figcaption {
	margin-top: 0.4rem;
	font-size: 0.82rem;
	line-height: 1.4;
	color: #aeb7af;
}

/* One photo, full size over the page (assets/leaf-gallery.js) */
.bud-leaf-viewer {
	width: 100vw;
	max-width: 100vw;
	height: 100vh;
	max-height: 100vh;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
}

.bud-leaf-viewer::backdrop {
	background: rgba(5, 7, 6, 0.92);
}

.bud-leaf-viewer[open] {
	display: grid;
	place-items: center;
}

.bud-leaf-viewer figure {
	display: grid;
	justify-items: center;
	gap: 0.75rem;
	max-width: min(92vw, 1400px);
	margin: 0;
}

.bud-leaf-viewer img {
	display: block;
	max-width: 100%;
	max-height: 80vh;
	border-radius: 10px;
	object-fit: contain;
}

.bud-leaf-viewer figcaption {
	max-width: 60ch;
	font-size: 0.92rem;
	text-align: center;
	color: #dfe4df;
}

.bud-leaf-viewer button {
	position: fixed;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	font-size: 2rem;
	line-height: 1;
	color: #fff;
	cursor: pointer;
}

.bud-leaf-viewer button:hover,
.bud-leaf-viewer button:focus-visible {
	background: rgba(255, 255, 255, 0.24);
	outline: none;
}

.bud-leaf-viewer button[hidden] {
	display: none;
}

.bud-leaf-viewer-close {
	top: 1rem;
	right: 1rem;
}

.bud-leaf-viewer-step {
	top: 50%;
	transform: translateY(-50%);
}

.bud-leaf-viewer-step.is-prev {
	left: 1rem;
}

.bud-leaf-viewer-step.is-next {
	right: 1rem;
}

.bud-leaf-viewer-count {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	margin: 0;
	font-size: 0.85rem;
	color: #aeb7af;
	transform: translateX(-50%);
}

@media (max-width: 600px) {
	.bud-leaf-photos-grid,
	.bud-leaf-photos-grid.is-few {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.5rem;
	}

	.bud-leaf-viewer-step {
		top: auto;
		bottom: 0.75rem;
		transform: none;
	}
}