/* Reconstitution calculator — questions on the left, live syringe result on the right (stacked on phones). */
.cv-calc {
	--cv-calc-accent: var(--wp--preset--color--accent-1);
	--cv-calc-line: var(--wp--preset--color--border-strong, var(--wp--preset--color--accent-6));
	display: grid; gap: var(--wp--preset--spacing--50);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}
@media (min-width: 960px) {
	/* break out of the narrow text column so the two panels have room */
	.cv-calc { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); width: min(1160px, calc(100vw - 4rem)); max-width: none !important; margin-left: calc(50% - min(580px, 50vw - 2rem)) !important; margin-right: 0 !important; }
	.cv-calc__panel { position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) + 7rem); }
}
.cv-calc__inputs, .cv-calc__panel {
	background: var(--wp--preset--color--surface);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--accent-6);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(1.25rem, 3vw, 2rem);
}
.cv-calc__inputs { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }

/* steps */
.cv-calc__group { border: 0; margin: 0; padding: 0; min-width: 0; }
.cv-calc__group legend { display: flex; align-items: center; gap: .75rem; padding: 0; margin-bottom: .85rem; font-family: var(--wp--preset--font-family--heading); font-weight: var(--wp--custom--font-weight--semibold, 600); font-size: var(--wp--preset--font-size--medium, 1.125rem); line-height: 1.3; }
.cv-calc__num { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; border: var(--wp--custom--border--hairline) solid var(--cv-calc-line); font-family: var(--wp--preset--font-family--mono); font-size: .8rem; transition: background .25s, border-color .25s, color .25s, transform .25s; }
.cv-calc__group.is-done .cv-calc__num { background: var(--cv-calc-accent); border-color: var(--cv-calc-accent); color: #fff; transform: scale(1.05); }
.cv-calc__group.is-done .cv-calc__num span { display: none; }
.cv-calc__group.is-done .cv-calc__num::after { content: ""; width: .5rem; height: .85rem; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

/* chips */
.cv-calc__chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cv-calc__chip { position: relative; }
.cv-calc__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cv-calc__chip span { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: var(--wp--custom--border--hairline) solid var(--cv-calc-line); border-radius: 999px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); background: transparent; transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s; cursor: pointer; user-select: none; }
.cv-calc__chip:hover span { border-color: var(--cv-calc-accent); }
.cv-calc__chip input:active + span { transform: scale(.96); }
.cv-calc__chip input:checked + span { background: var(--cv-calc-accent); border-color: var(--cv-calc-accent); color: #fff; box-shadow: 0 6px 18px -8px var(--cv-calc-accent); }
.cv-calc__chip input:focus-visible + span { outline: var(--wp--custom--border--focus, 2px) solid var(--wp--preset--color--focus, var(--cv-calc-accent)); outline-offset: 2px; }
.cv-calc__customwrap { display: inline-flex; align-items: center; border: var(--wp--custom--border--hairline) solid var(--cv-calc-accent); border-radius: 999px; padding: 0 1rem 0 .25rem; min-height: 2.75rem; animation: cv-calc-pop .2s ease-out; }
.cv-calc__customwrap[hidden] { display: none; }
.cv-calc__custom { width: 6.5rem; border: 0; background: transparent; color: inherit; font: inherit; font-family: var(--wp--preset--font-family--mono); padding: 0 .75rem; min-height: 2.5rem; outline: 0; }
.cv-calc__unit { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--small); opacity: .7; }
.cv-calc__reset { justify-self: start; background: none; border: 0; padding: 0; color: var(--wp--preset--color--accent-4); font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cv-calc__reset:hover { color: var(--cv-calc-accent); }

/* result panel */
.cv-calc__panel { display: grid; gap: 1rem; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.cv-calc__panel.is-ready { border-color: color-mix(in srgb, var(--cv-calc-accent) 45%, transparent); box-shadow: 0 20px 50px -30px var(--cv-calc-accent); }
.cv-calc__panel.is-over { border-color: var(--wp--preset--color--error, #c0392b); box-shadow: none; }
.cv-calc__eyebrow { margin: 0; display: flex; align-items: center; gap: .5rem; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); letter-spacing: .12em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); }
.cv-calc__eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cv-calc-accent); }
.cv-calc__answer { margin: 0; font-family: var(--wp--preset--font-family--heading); }
.cv-calc__hint { font-size: var(--wp--preset--font-size--large); font-weight: 600; opacity: .8; }
.cv-calc__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; font-size: var(--wp--preset--font-size--large); font-weight: 600; }
.cv-calc__big[hidden], .cv-calc__hint[hidden] { display: none; }
.cv-calc__units { font-size: clamp(2.75rem, 7vw, 4rem); line-height: 1; color: var(--cv-calc-accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.cv-calc__panel.is-over .cv-calc__units { color: var(--wp--preset--color--error, #c0392b); }
.cv-calc__sub { margin: 0; min-height: 1.4em; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--accent-4); }
.cv-calc__panel.is-over .cv-calc__sub { color: var(--wp--preset--color--error, #c0392b); font-weight: 600; }

/* syringe */
.cv-calc__syringe { margin: .25rem -.5rem 0; }
.cv-syr { display: block; width: 100%; height: auto; overflow: visible; }
.cv-syr__barrel { fill: color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent); stroke: var(--wp--preset--color--contrast); stroke-opacity: .55; stroke-width: 2.5; }
.cv-syr__flange, .cv-syr__thumb { fill: var(--wp--preset--color--contrast); opacity: .55; }
.cv-syr__rod { fill: var(--wp--preset--color--contrast); opacity: .22; }
.cv-syr__stopper { fill: var(--wp--preset--color--contrast); opacity: .75; }
.cv-syr__hub { fill: var(--wp--preset--color--contrast); opacity: .35; }
.cv-syr__needle { fill: var(--wp--preset--color--contrast); opacity: .45; }
.cv-syr__liquid { fill: var(--cv-calc-accent); opacity: .55; }
.cv-syr.is-over .cv-syr__liquid { fill: var(--wp--preset--color--error, #c0392b); }
.cv-syr__tick { stroke: var(--wp--preset--color--contrast); stroke-opacity: .45; stroke-width: 1.5; }
.cv-syr__tick--major { stroke-opacity: .8; stroke-width: 2; }
.cv-syr__label { font-family: var(--wp--preset--font-family--mono); font-size: 17px; fill: var(--wp--preset--color--contrast); opacity: .7; }
.cv-syr__markline { stroke: var(--cv-calc-accent); stroke-width: 3; stroke-dasharray: 5 4; }
.cv-syr__marktext { font-family: var(--wp--preset--font-family--mono); font-size: 20px; font-weight: 700; fill: var(--cv-calc-accent); }
.cv-syr.is-over .cv-syr__markline { stroke: var(--wp--preset--color--error, #c0392b); }
.cv-syr.is-over .cv-syr__marktext { fill: var(--wp--preset--color--error, #c0392b); }
.cv-syr__marker { transition: opacity .3s; }

/* stat tiles */
.cv-calc__stats { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cv-calc__stats > div { padding: .85rem 1rem; border-radius: var(--wp--custom--radius--input, 10px); background: color-mix(in srgb, var(--cv-calc-accent) 7%, transparent); border: var(--wp--custom--border--hairline) solid color-mix(in srgb, var(--cv-calc-accent) 18%, transparent); }
.cv-calc__stats dt { font-family: var(--wp--preset--font-family--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--accent-4); }
.cv-calc__stats dd { margin: .3rem 0 0; font-family: var(--wp--preset--font-family--heading); font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.cv-calc__stats dd[data-unit]::after { content: " " attr(data-unit); font-family: var(--wp--preset--font-family--mono); font-size: .72rem; font-weight: 400; opacity: .7; }
.cv-calc__note { margin: 0; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--x-small); color: var(--wp--preset--color--accent-4); }

/* phone: sticky result bar until the panel is on screen */
.cv-calc__dock { display: none; }
@media (max-width: 959px) {
	.cv-calc__dock:not([hidden]) { display: flex; align-items: baseline; gap: .4rem; position: fixed; left: 1rem; right: 5.25rem; bottom: 1rem; z-index: 40; padding: .85rem 1.1rem; border: 0; border-radius: 999px; background: var(--cv-calc-accent); color: #fff; font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 600; box-shadow: 0 12px 30px -10px rgba(0,0,0,.45); cursor: pointer; animation: cv-calc-pop .25s ease-out; transition: opacity .25s, transform .25s; }
	.cv-calc__dock strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
	.cv-calc__dock-go { margin-left: auto; }
	.cv-calc__dock.is-over { background: var(--wp--preset--color--error, #c0392b); }
	.cv-calc.panel-visible .cv-calc__dock { opacity: 0; transform: translateY(1rem); pointer-events: none; }
}
@keyframes cv-calc-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cv-calc *, .cv-calc *::before, .cv-calc *::after { animation: none !important; transition: none !important; } }