/* ==========================================================================
   Biohack Reconstitution Calculator — scoped entirely under .bhc-calculator
   so nothing here can collide with Blocksy or any other plugin's styles.
   Brand tokens are scoped to the container too, not :root, for the same
   reason. Fonts are referenced by name only (Belleza / Instrument Sans) —
   the theme is responsible for loading them; this file never enqueues fonts.
   ========================================================================== */

.bhc-calculator {
	--bhc-ink: #27323c;
	--bhc-teal: #3ed2c4;
	--bhc-teal-soft: #e9f8f6;
	--bhc-bg: #f5f9fa;
	--bhc-muted: #6b7a87;
	--bhc-line: #dde6e9;
	--bhc-warn: #c77d1e;
	--bhc-warn-bg: #fdf4e6;

	box-sizing: border-box;
	/* max-width is deliberately also capped to 100vw (not just 960px) —
	   100vw is measured against the true viewport, not a parent's box, so
	   this container stays correctly sized even if something upstream in
	   the page (outside this plugin's control) is itself overflowing and
	   has stretched the body wider than the visible viewport. */
	max-width: min(960px, 100vw);
	margin: 0 auto;
	padding: 48px 24px 64px;
	background: var(--bhc-bg);
	color: var(--bhc-ink);
	font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

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

/* Grid/flex children default to min-width:auto, which lets a <select>'s
   longest option text (or any input's intrinsic size) force the column
   wider than its track and overflow the viewport — this is what broke
   360px. Overriding to 0 lets width:100% actually take effect. */
.bhc-calculator .bhc-picker,
.bhc-calculator .bhc-columns,
.bhc-calculator .bhc-planning-grid,
.bhc-calculator .bhc-field,
.bhc-calculator .bhc-input-group,
.bhc-calculator .bhc-input-group > * {
	min-width: 0;
}

.bhc-calculator :focus-visible {
	outline: 2px solid var(--bhc-teal);
	outline-offset: 2px;
}

/* Descender safety net — letters like g/y/p/q/j were getting clipped in
   bordered controls (mg/mL suffix boxes, buttons). A line-height at or
   below 1 gives a glyph's descender nowhere to go inside a tightly-padded
   box; 1.45 is generous enough that no control here clips, and none of
   them declare a fixed height that could fight it (vertical padding is
   what sets their size instead). <select> is deliberately excluded —
   Chromium centers a select's displayed-option text using its own
   internal line-height math, and forcing a non-default line-height onto
   it fights that calculation badly enough to clip or fully hide the text
   (worse than the original bug). Selects get generous padding instead;
   see the line-height:normal override further down. */
.bhc-calculator input,
.bhc-calculator option,
.bhc-calculator button,
.bhc-calculator .bhc-unit {
	line-height: 1.45;
}

/* ==========================================================================
   Header
   ========================================================================== */
.bhc-eyebrow {
	margin: 0 0 10px;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bhc-teal);
}

.bhc-h1 {
	margin: 0 0 16px;
	font-family: 'Belleza', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(2rem, 4vw, 2.75rem);
	/* Belleza's descenders run long — a tight 1.2 line-height (intentional
	   for a display heading) would clip them at the box edge without this
	   padding-bottom to give the last line somewhere to breathe. */
	line-height: 1.2;
	padding-bottom: 0.1em;
	letter-spacing: 0.02em;
	color: var(--bhc-ink);
}

.bhc-intro {
	max-width: 62ch;
	margin: 0 0 32px;
	color: var(--bhc-muted);
	font-size: 1rem;
}

/* ==========================================================================
   Product picker
   ========================================================================== */
.bhc-picker {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 28px;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--bhc-line);
	border-radius: 10px;
}

/* ==========================================================================
   Size buttons — replaces a <select>: every size visible with its price,
   Amazon-style, same visual language as .bhc-tab's selected state below.
   ========================================================================== */
.bhc-size-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bhc-size-buttons-empty {
	font-size: 13px;
	color: var(--bhc-muted);
	margin: 0;
}

.bhc-size-btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	border: 1px solid var(--bhc-line);
	background: #fff;
	color: var(--bhc-ink);
	font: inherit;
	text-align: left;
	padding: 8px 14px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bhc-size-btn:hover:not(:disabled) {
	border-color: var(--bhc-teal);
}

.bhc-size-btn.is-active {
	background: var(--bhc-teal-soft);
	border-color: var(--bhc-teal);
	color: var(--bhc-ink);
}

.bhc-size-btn:disabled {
	cursor: not-allowed;
	opacity: 0.55;
}

.bhc-size-btn-label {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
}

.bhc-size-btn-price {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.75;
}

/* ==========================================================================
   Tabs
   ========================================================================== */
.bhc-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
}

.bhc-tab {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	flex: 1 1 200px;
	border: 1px solid var(--bhc-line);
	background: #fff;
	color: var(--bhc-ink);
	font: inherit;
	text-align: left;
	padding: 10px 16px;
	border-radius: 10px;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.bhc-tab:hover {
	border-color: var(--bhc-teal);
}

.bhc-tab.is-active {
	background: var(--bhc-teal-soft);
	border-color: var(--bhc-teal);
	color: var(--bhc-ink);
}

.bhc-tab-title {
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.45;
}

.bhc-tab-desc {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.45;
	opacity: 0.7;
}

/* ==========================================================================
   Two-column layout — inputs / results. Collapses under 720px.
   ========================================================================== */
.bhc-columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: start;
	margin-bottom: 40px;
}

@media (max-width: 720px) {
	.bhc-columns {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.bhc-picker {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Fields (shared: inputs column + planning grid)
   ========================================================================== */
.bhc-field {
	margin-bottom: 18px;
}

.bhc-field:last-child {
	margin-bottom: 0;
}

/* Small utility labels everywhere — large, dark type is reserved for
   VALUES (.bhc-primary-value, .bhc-metrics dd), never for what a field
   or metric is called. Shared by input-panel labels, results-panel dt's,
   and the primary readout's own label so all three match exactly. */
.bhc-field label,
.bhc-metrics dt,
.bhc-primary-label {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	font-weight: 600;
	color: var(--bhc-muted);
}

.bhc-field label {
	display: block;
	margin-bottom: 6px;
}

.bhc-field select,
.bhc-field input[type="number"],
.bhc-field input[type="text"] {
	width: 100%;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: var(--bhc-ink);
	background: #fff;
	border: 1px solid var(--bhc-line);
	border-radius: 8px;
	padding: 10px 12px;
}

/* See the note above the input/option/button line-height rule — selects
   need their line-height left at the browser default, not forced to
   1.45, or Chromium's own internal centering clips (or fully hides) the
   displayed-option text. Standard 10px padding is enough once that
   conflict is removed. */
.bhc-field select {
	line-height: normal;
}

/* Input + suffix/unit sit joined as one control, not gapped — corners are
   rounded on the OUTER edges only (first/last child), via border-radius on
   the children themselves rather than overflow:hidden on this wrapper.
   overflow:hidden would clip a descender that pokes below the box; giving
   each child its own correctly-placed radius avoids needing it at all. */
.bhc-input-group {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.bhc-input-group > * {
	position: relative;
	border-radius: 0;
}

.bhc-input-group > *:not(:first-child) {
	margin-left: -1px;
}

.bhc-input-group > *:first-child {
	border-radius: 6px 0 0 6px;
}

.bhc-input-group > *:last-child {
	border-radius: 0 6px 6px 0;
}

.bhc-input-group > *:only-child {
	border-radius: 6px;
}

/* Keeps the focused segment's ring/border from being partly hidden under
   its neighbor's 1px overlap. */
.bhc-input-group > *:focus,
.bhc-input-group > *:focus-within {
	z-index: 1;
}

.bhc-input-group input {
	flex: 1 1 auto;
	min-width: 0;
}

.bhc-input-group .bhc-unit-select {
	flex: 0 0 auto;
	width: auto;
}

.bhc-unit {
	display: flex;
	align-items: center;
	/* Vertical padding matters here, not just horizontal — a unit badge
	   with 0 vertical padding has no room for a "g"/"y" descender to sit
	   inside the box at all, independent of line-height. */
	padding: 10px 10px;
	font-size: 0.85rem;
	color: var(--bhc-muted);
	background: #fff;
	border: 1px solid var(--bhc-line);
	white-space: nowrap;
}

/* Guarded/invalid numeric input — negative or zero entered. */
.bhc-field input.bhc-invalid {
	border-color: var(--bhc-warn);
	box-shadow: 0 0 0 1px var(--bhc-warn);
}

/* Mode-dependent field visibility: exactly one of amount / diluent / units
   is the solved output in each mode, so it's hidden as an input there. */
.bhc-calculator[data-mode="draw"] .bhc-field--units,
.bhc-calculator[data-mode="diluent"] .bhc-field--diluent,
.bhc-calculator[data-mode="reverse"] .bhc-field--amount {
	display: none;
}

/* ==========================================================================
   Warnings (amber) — math-only, never medical.
   ========================================================================== */
.bhc-warnings:empty,
.bhc-snap:empty {
	display: none;
}

.bhc-warning {
	margin: 0 0 10px;
	padding: 10px 14px;
	background: var(--bhc-warn-bg);
	border: 1px solid var(--bhc-warn);
	border-radius: 8px;
	color: var(--bhc-warn);
	font-size: 0.85rem;
}

.bhc-warning:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Snap suggestion (teal)
   ========================================================================== */
.bhc-snap {
	margin-top: 4px;
	padding: 12px 14px;
	background: var(--bhc-teal-soft);
	border: 1px solid var(--bhc-teal);
	border-radius: 8px;
	color: var(--bhc-ink);
	font-size: 0.85rem;
}

.bhc-snap[hidden] {
	display: none;
}

.bhc-snap-apply {
	appearance: none;
	margin-left: 8px;
	padding: 4px 12px;
	font: inherit;
	font-weight: 600;
	font-size: 0.8rem;
	color: #fff;
	background: var(--bhc-teal);
	border: none;
	border-radius: 999px;
	cursor: pointer;
}

/* ==========================================================================
   Results panel
   ========================================================================== */
.bhc-results {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--bhc-line);
	border-radius: 10px;
}

.bhc-primary {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--bhc-line);
}

.bhc-primary-label {
	display: block;
	margin-bottom: 4px;
}

.bhc-primary-value {
	display: block;
	font-size: 2.25rem;
	font-weight: 700;
	color: var(--bhc-ink);
}

.bhc-primary-hint {
	display: block;
	margin-top: 4px;
	font-size: 0.82rem;
	color: var(--bhc-muted);
}

.bhc-primary-hint:empty {
	display: none;
}

.bhc-metrics {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 20px;
	margin: 0;
}

.bhc-metrics > div {
	display: flex;
	flex-direction: column;
}

.bhc-metrics dt {
	margin-bottom: 4px;
}

.bhc-metrics dd {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--bhc-ink);
}

@media (max-width: 420px) {
	.bhc-metrics {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Blend components breakdown
   ========================================================================== */
.bhc-components {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--bhc-line);
}

.bhc-components[hidden] {
	display: none;
}

.bhc-components-title {
	margin: 0 0 8px;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--bhc-muted);
}

.bhc-components ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bhc-components li {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed var(--bhc-line);
	font-size: 0.9rem;
}

.bhc-components li:last-child {
	border-bottom: none;
}

/* ==========================================================================
   Syringe SVG
   ========================================================================== */
.bhc-syringe-wrap {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--bhc-line);
}

.bhc-syringe-wrap svg {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Quantity planning
   ========================================================================== */
.bhc-planning {
	margin-bottom: 40px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--bhc-line);
	border-radius: 10px;
}

.bhc-planning h2 {
	margin: 0 0 20px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--bhc-ink);
}

.bhc-planning-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 20px;
}

@media (max-width: 560px) {
	.bhc-planning-grid {
		grid-template-columns: 1fr;
	}
}

.bhc-planning-grid .bhc-input-group select {
	flex: 0 0 auto;
	width: auto;
}

.bhc-echo {
	margin: 8px 0 0;
	font-size: 0.85rem;
	color: var(--bhc-muted);
	font-variant-numeric: tabular-nums;
	min-height: 1.2em;
}

#bhc-planning-warnings:not(:empty) {
	margin-top: 20px;
}

/* ==========================================================================
   Decision bar — plain-language summary + add-to-cart, bottom of the
   Quantity planning card. The button reuses the site's own .btn/.btn--pill/
   .btn--bronze primary-action classes (see child theme base.css) rather
   than a bespoke style, so there's one primary-button look site-wide.
   ========================================================================== */
.bhc-decision {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--bhc-line);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}

.bhc-decision-summary {
	margin: 0;
	flex: 1 1 320px;
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--bhc-ink);
}

.bhc-decision-summary.is-muted {
	font-weight: 400;
	color: var(--bhc-muted);
}

/* Full-width lines within the wrapping flex row, rather than sitting inline
   beside the summary/action items. */
.bhc-decision-savings,
.bhc-decision-nudge {
	margin: 0;
	flex: 1 1 100%;
	font-size: 0.88rem;
}

.bhc-decision-savings {
	color: var(--bhc-teal);
	font-weight: 600;
}

.bhc-decision-savings[hidden],
.bhc-decision-nudge[hidden] {
	display: none;
}

.bhc-decision-nudge {
	color: var(--bhc-muted);
}

.bhc-decision-full-price {
	color: var(--bhc-muted);
	text-decoration: line-through;
	font-size: 0.9rem;
}

.bhc-decision-full-price[hidden] {
	display: none;
}

.bhc-decision-action {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
}

.bhc-decision-btn[hidden] {
	display: none;
}

.bhc-decision-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

.bhc-decision-status {
	margin: 0;
	font-size: 0.85rem;
	color: var(--bhc-muted);
	min-width: 0;
}

.bhc-decision-status:empty {
	display: none;
}

.bhc-decision-status a {
	margin-left: 4px;
	color: var(--bhc-teal);
	font-weight: 600;
	text-decoration: underline;
}

.bhc-decision-status.is-warn {
	color: var(--bhc-warn);
}

.bhc-decision-status.is-success {
	color: var(--bhc-ink);
	font-weight: 600;
}

@media (max-width: 600px) {
	.bhc-decision {
		flex-direction: column;
		align-items: stretch;
		/* The base rule's flex-wrap: wrap, combined with flex-direction:
		   column, stops align-items: stretch from forcing children to the
		   container's full width (each wrapped "line" sizes to its own
		   content instead) — nowrap here is what makes stretch apply. */
		flex-wrap: nowrap;
	}

	.bhc-decision-action {
		flex-direction: column;
		align-items: stretch;
	}

	.bhc-decision-btn {
		width: 100%;
	}
}

/* ==========================================================================
   Share
   ========================================================================== */
.bhc-share {
	margin-bottom: 32px;
}

.bhc-share label {
	display: block;
	margin-bottom: 6px;
	font-size: 0.85rem;
	font-weight: 600;
}

.bhc-share .bhc-input-group {
	flex-wrap: wrap;
}

.bhc-share input {
	flex: 1 1 240px;
	min-width: 0;
	font-size: 0.85rem;
	color: var(--bhc-muted);
}

.bhc-btn {
	appearance: none;
	flex: 0 0 auto;
	padding: 10px 20px;
	font: inherit;
	font-weight: 600;
	font-size: 0.85rem;
	color: #fff;
	background: var(--bhc-ink);
	border: 1px solid var(--bhc-ink);
	border-radius: 8px;
	cursor: pointer;
}

.bhc-btn:hover {
	background: #1b232a;
}

.bhc-btn.is-copied {
	background: var(--bhc-teal);
	border-color: var(--bhc-teal);
}

/* ==========================================================================
   Footer disclaimer
   ========================================================================== */
.bhc-disclaimer {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--bhc-line);
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--bhc-muted);
}