/* Beast Nutrition – Health Tools */
.bnht {
	--bnht-p: #007a5e;
	--bnht-p-soft: rgba(0, 122, 94, .06);
	--bnht-p-line: rgba(0, 122, 94, .18);
	--bnht-b: #e3e6ea;
	--bnht-t: #1b0820;
	--bnht-m: #667085;
	--bnht-good: #12a26b;
	--bnht-good2: #5cc290;
	--bnht-warn: #f0a92e;
	--bnht-bad: #e5484d;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 28px;
	align-items: start;
	margin: 4px 0 20px;
	color: var(--bnht-t);
	font-variant-numeric: tabular-nums;
}
@media (max-width: 849px) {
	.bnht { grid-template-columns: 1fr; gap: 18px; }
}
.bnht,
.bnht *,
.bnht *::before,
.bnht *::after { box-sizing: border-box; }
.bnht [hidden] { display: none !important; }

.bnht-intro { margin: 0 0 16px; color: var(--bnht-m); font-size: .92em; line-height: 1.5; }

/* Form */
.bnht-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 14px; }
@media (max-width: 420px) {
	.bnht-form { grid-template-columns: 1fr; }
}
.bnht-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.bnht-field.full { grid-column: 1 / -1; }
.bnht-label {
	display: block;
	margin: 0;
	font-size: .8em;
	font-weight: 600;
	letter-spacing: .01em;
	color: var(--bnht-m);
	text-transform: none;
}
.bnht-label em { font-style: normal; font-weight: 400; }

.bnht input[type="number"],
.bnht select {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	font-size: 16px; /* prevents iOS zoom */
	color: var(--bnht-t);
	background-color: #fff;
	border: 1px solid var(--bnht-b);
	border-radius: 9px;
	box-shadow: none;
	transition: border-color .15s, box-shadow .15s;
}
.bnht input[type="number"]:focus,
.bnht select:focus {
	border-color: var(--bnht-p);
	box-shadow: 0 0 0 3px var(--bnht-p-line);
	outline: none;
}
.bnht input[type="number"] { -moz-appearance: textfield; }
.bnht input[type="number"]::-webkit-outer-spin-button,
.bnht input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bnht-input { position: relative; }
.bnht-input input[type="number"] { padding-right: 46px; }
.bnht-input .bnht-u {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: .82em;
	color: var(--bnht-m);
	pointer-events: none;
}

.bnht-hgt { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; }
.bnht-ftin { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* Segmented control */
.bnht-seg {
	display: flex;
	height: 46px;
	margin: 0;
	padding: 0;
	border: 1px solid var(--bnht-b);
	border-radius: 9px;
	overflow: hidden;
	background: #fff;
}
.bnht-seg label { position: relative; flex: 1; margin: 0; cursor: pointer; }
.bnht-seg input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.bnht-seg span {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	padding: 0 6px;
	font-size: .88em;
	font-weight: 600;
	text-align: center;
	color: var(--bnht-m);
	transition: background-color .15s, color .15s;
}
.bnht-seg label + label span { border-left: 1px solid var(--bnht-b); }
.bnht-seg input:checked + span { background: var(--bnht-p); color: #fff; }
.bnht-seg input:focus-visible + span { box-shadow: inset 0 0 0 3px var(--bnht-p-line); }

.bnht-check {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 46px;
	margin: 0;
	font-size: .92em;
	font-weight: 500;
	cursor: pointer;
}
.bnht-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--bnht-p); }

/* Result card */
.bnht-result {
	min-height: 220px;
	padding: 24px;
	background: var(--bnht-p-soft);
	border: 1px solid var(--bnht-p-line);
	border-radius: 16px;
}
@media (min-width: 850px) {
	.bnht-result { position: sticky; top: 90px; }
}
.bnht-result.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: #fafbfc;
	border: 1px dashed var(--bnht-b);
}
.bnht-empty { margin: 0; max-width: 260px; color: var(--bnht-m); font-size: .92em; }

.bnht-hero { display: flex; flex-direction: column; margin-bottom: 16px; }
.bnht-hero-v { font-size: 2.6em; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; color: var(--bnht-p); }
.bnht-hero-l { margin-top: 6px; font-weight: 600; }
.bnht-under .bnht-hero-v,
.bnht-over .bnht-hero-v,
.bnht-ess .bnht-hero-v,
.bnht-avg .bnht-hero-v { color: #c2780b; }
.bnht-obese .bnht-hero-v,
.bnht-high .bnht-hero-v { color: #d0333a; }

/* Gauge */
.bnht-gauge { position: relative; display: flex; height: 10px; margin: 4px 0 6px; }
.bnht-gauge span { height: 100%; }
.bnht-gauge span:first-child { border-radius: 99px 0 0 99px; }
.bnht-gauge span:last-of-type { border-radius: 0 99px 99px 0; }
.bnht-gauge i {
	position: absolute;
	top: 50%;
	width: 18px;
	height: 18px;
	background: #fff;
	border: 3px solid var(--bnht-t);
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
	transform: translate(-50%, -50%);
	transition: left .25s ease;
}
.g-good { background: var(--bnht-good); }
.g-good2 { background: var(--bnht-good2); }
.g-warn { background: var(--bnht-warn); }
.g-bad { background: var(--bnht-bad); }
.bnht-scale { position: relative; height: 16px; margin-bottom: 14px; font-size: .7em; color: var(--bnht-m); }
.bnht-scale span { position: absolute; top: 0; transform: translateX(-50%); }
.bnht-scale span.first { transform: none; }
.bnht-scale span.last { transform: translateX(-100%); }

/* Stats */
.bnht-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 14px 0 0; }
.bnht-stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bnht-stat { position: relative; padding: 11px 13px; background: #fff; border: 1px solid var(--bnht-b); border-radius: 11px; }
.bnht-stat-l { display: block; font-size: .74em; line-height: 1.3; color: var(--bnht-m); }
.bnht-stat-v { display: block; margin-top: 3px; font-size: 1.25em; font-weight: 700; }
.bnht-stat-v small { font-size: .62em; font-weight: 600; color: var(--bnht-m); }
.bnht-dot { position: absolute; top: 13px; right: 12px; width: 9px; height: 9px; border-radius: 50%; }

.bnht-mbar { display: flex; height: 12px; margin: 2px 0 4px; border-radius: 99px; overflow: hidden; }
.m-p { background: var(--bnht-p); }
.m-c { background: var(--bnht-warn); }
.m-f { background: #6d6ae8; }

/* Table */
.bnht-table { width: 100%; margin: 14px 0 0; font-size: .88em; background: #fff; border: 1px solid var(--bnht-b); border-radius: 11px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.bnht .bnht-table th,
.bnht .bnht-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--bnht-b); }
.bnht-table tr:last-child td { border-bottom: 0; }
.bnht-table th { font-size: .76em; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--bnht-m); background: #fafbfc; }

.bnht-note { margin: 14px 0 0; font-size: .8em; line-height: 1.55; color: var(--bnht-m); }
.bnht-warn { margin: 14px 0 0; font-size: .88em; color: #b42318; }
.bnht-cta {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	margin-top: 16px;
	padding: 10px 16px;
	font-size: .9em;
	font-weight: 600;
	color: #fff !important;
	background: var(--bnht-p);
	border-radius: 9px;
	text-decoration: none !important;
	transition: filter .15s;
}
.bnht-cta:hover { filter: brightness(1.1); }

.bnht-disclaimer { margin: 8px 0 0; font-size: .78em; color: var(--bnht-m); }

@media (prefers-reduced-motion: reduce) {
	.bnht * { transition: none !important; }
}
