/**
 * Teamdash ROI Calculator.
 *
 * Everything is scoped under .td-roi. The standalone version styled `body` and
 * bare `input[type=range]`, which is fine in a file that owns the whole page and
 * would repaint half a WordPress theme here.
 *
 * Brand colours come in as custom properties set on the container by the
 * shortcode, so they are editable in wp-admin and cannot leak past this element.
 * Every colour written literally below is a pure grey — a border, a slider track,
 * a muted label — deliberately neutral so the brand hues stay reserved for
 * accents. dev/lint.js fails the build on any non-grey hex that is not in the
 * configured palette.
 *
 * No font is loaded here. The theme already serves Noto Sans, and the calculator
 * inherits whatever the page uses; the optional display face is self-hosted in
 * td-roi-fonts.css. A Google Fonts stylesheet would hand every visitor's IP
 * address to Google for the sake of a heading.
 */

.td-roi {
	/* Fallbacks matter: a container rendered before the inline style lands, or one
	   copied into a context without it, still gets the right palette. */
	--td-roi-accent: #FFFE90;
	--td-roi-negative: #FF87AE;
	--td-roi-grad-from: #FFD033;
	--td-roi-grad-to: #FF46F7;
	--td-roi-module-active: #6B6E7B;
	--td-roi-ink: #000000;
	--td-roi-paper: #FFFFFF;
	/* The fill inside wage and fee inputs -- a field on a white card, not a page
	   background. It used to share a variable with the page background, which is
	   why the two are separate now: the page went transparent and the fields must
	   not follow it. */
	--td-roi-field-bg: #F7F7F7;
	--td-roi-max-width: 1180px;
	/* Horizontal inset for the calculator's rows. Zero by default: the calculator
	   is content inside the host page's own column, which already has padding, and
	   adding more just narrows the sliders. Raise it if you drop the shortcode into
	   a full-bleed section with no padding of its own. */
	--td-roi-gutter: 0px;

	max-width: var( --td-roi-max-width );
	margin: 0 auto;
	color: var( --td-roi-ink );
	/* Transparent on purpose: the calculator sits inside a page that already has a
	   background, and painting its own put a grey slab across it. The cards keep
	   their own --td-roi-paper fill, so the layout still reads against anything. */
	background: transparent;
}

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

.td-roi__page {
	background: transparent;
	color: var( --td-roi-ink );
}

/* --- Headings ----------------------------------------------------------- */

/* The only heading the calculator still owns: "Where the hours come from."
   The hero H1 went with the header band -- the page around it has its own. */
.td-roi__h2 {
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -0.01em;
	margin: 0 0 4px;
}

/* --- Inputs ------------------------------------------------------------- */

.td-roi input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	height: 6px;
	border-radius: 4px;
	background: #E0E0E0;
	outline: none;
}

.td-roi input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --td-roi-ink );
	border: 4px solid var( --td-roi-accent );
	cursor: pointer;
}

.td-roi input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var( --td-roi-ink );
	border: 4px solid var( --td-roi-accent );
	cursor: pointer;
}

.td-roi input[type="number"]:focus,
.td-roi input[type="range"]:focus {
	outline: none;
}

.td-roi button {
	font-family: inherit;
}

/* A metric whose figure is being recalculated on the server keeps its last value
   and dims. Blanking it flickers on every drag, and the previous number is very
   nearly the right one. */
.td-roi [aria-busy="true"] {
	transition: opacity 120ms ease;
}

/* --- Tooltips ----------------------------------------------------------- */

.td-roi .td-info {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #E0E0E0;
	color: #4D4D4D;
	font-size: 9px;
	font-weight: 800;
	font-style: italic;
	cursor: help;
	margin-left: 5px;
	flex-shrink: 0;
	vertical-align: middle;
	text-transform: none;
	letter-spacing: normal;
}

.td-roi .td-info .td-tip {
	text-transform: none;
	letter-spacing: normal;
	visibility: hidden;
	opacity: 0;
	position: absolute;
	bottom: 130%;
	left: 50%;
	transform: translateX( -50% );
	width: 210px;
	background: var( --td-roi-ink );
	color: #FFFFFF;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	padding: 8px 10px;
	border-radius: 8px;
	z-index: 20;
	transition: opacity 0.12s ease;
	pointer-events: none;
	text-align: left;
}

.td-roi .td-info-price .td-tip {
	left: auto;
	right: -6px;
	transform: none;
}

/* Result-card formulas run longer than the module hints and their circle sits
   near the left edge of the card, so open those tips rightward to stay onscreen. */
.td-roi .td-info-card .td-tip,
.td-roi .td-info-wage .td-tip,
.td-roi .td-info-field .td-tip {
	width: 260px;
	left: -6px;
	right: auto;
	transform: none;
}

.td-roi .td-info-card {
	background: #D6D6D6;
}

.td-roi .td-info-dark {
	background: #333333;
	color: #CCCCCC;
}

.td-roi .td-info:hover .td-tip,
.td-roi .td-info:focus .td-tip {
	visibility: visible;
	opacity: 1;
}

/* --- Module cards ------------------------------------------------------- */

/* A selected card wears the treatment teamdash.com's accordion items use on
   hover: a 40%-alpha yellow-to-pink wash fading in over white, border going grey.
   The wash is a ::before at inset 0, so the card's own children need lifting
   above it — hence the `> *` rule. Radius is 2px inside the card's, mirroring the
   site's 24px item / 20px overlay relationship. */
.td-roi .td-mod {
	position: relative;
}

.td-roi .td-mod::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
	background: linear-gradient( 86.04deg, var( --td-roi-grad-from ) 0%, var( --td-roi-grad-to ) 97.7% );
	opacity: 0;
	transition: opacity 300ms ease;
	pointer-events: none;
}

.td-roi .td-mod.is-active::before {
	opacity: 0.4;
}

.td-roi .td-mod > * {
	position: relative;
	z-index: 1;
}

/* --- Narrow screens ----------------------------------------------------- */

/* The standalone file assumed a desktop viewport it controlled. */
@media ( max-width: 782px ) {
	.td-roi__h2 {
		font-size: 19px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.td-roi *,
	.td-roi *::before {
		transition-duration: 0ms !important;
	}
}