/* ==========================================================================
   TBB Lab Calculators — Molality Calculator Stylesheet
   Calculator-specific styles only. Common styles in tbb-calculators-common.css
   ========================================================================== */

/* ── Mode toggle (radio buttons) ────────────────────────────────────────── */
.tbb-mol-mode-toggle {
	display:     flex;
	flex-wrap:   wrap;
	gap:         .5rem 1.5rem;
	align-items: center;
}

.tbb-mol-radio-label {
	display:     inline-flex;
	align-items: center;
	gap:         .45rem;
	font-size:   1.3rem;
	font-weight: 500;
	color:       var(--tbb-text);
	cursor:      pointer;
	user-select: none;
}

.tbb-mol-radio-label input[type="radio"] {
	width:         1.1rem;
	height:        1.1rem;
	accent-color:  var(--tbb-primary);
	cursor:        pointer;
	margin:        0;
	flex-shrink:   0;
}

/* ── Shared input + select field styles ─────────────────────────────────── */
.tbb-molality-calculator .tbb-mol-input,
.tbb-molality-calculator .tbb-mol-search-input,
.tbb-molality-calculator .tbb-mol-unit-select {
	display:     block;
	box-sizing:  border-box;
	padding:     .875rem 1.1rem;
	font-size:   1.3rem;
	line-height: 1.6;
	min-height:  52px;
	color:       var(--tbb-text);
	background:  var(--tbb-bg);
	border:      1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	transition:  border-color var(--tbb-transition), box-shadow var(--tbb-transition);
	font-family: var(--tbb-font);
	-webkit-appearance: none;
	-moz-appearance:    textfield;
}

.tbb-molality-calculator .tbb-mol-input,
.tbb-molality-calculator .tbb-mol-search-input {
	width:     100% !important;
	max-width: 100% !important;
	min-width: 0;
}

.tbb-molality-calculator .tbb-mol-input:focus,
.tbb-molality-calculator .tbb-mol-search-input:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Readonly auto-fill field */
.tbb-molality-calculator .tbb-mol-input--readonly {
	background: var(--tbb-bg-subtle);
	color:      var(--tbb-text-muted);
	cursor:     default;
}

/* ── Input + unit row ───────────────────────────────────────────────────── */
.tbb-mol-input-row {
	display: flex;
	gap:     .625rem;
	width:   100%;
}

.tbb-mol-input-row .tbb-mol-input {
	flex:      1 1 0;
	min-width: 0;
}

.tbb-molality-calculator .tbb-mol-unit-select {
	flex:        0 0 auto;
	width:       auto;
	min-width:   80px;
	padding-right: 2rem;
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right .75rem center;
	-webkit-appearance:  none;
	-moz-appearance:     none;
	appearance:          none;
	cursor:              pointer;
}

.tbb-molality-calculator .tbb-mol-unit-select:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Compound combobox ──────────────────────────────────────────────────── */
.tbb-mol-combobox {
	position: relative;
}

.tbb-mol-search-wrap {
	position: relative;
}

.tbb-molality-calculator .tbb-mol-search-input {
	padding-right: 2.5rem; /* space for the caret icon */
}

.tbb-mol-search-icon {
	position:   absolute;
	right:      1rem;
	top:        50%;
	transform:  translateY(-50%);
	color:      var(--tbb-text-muted);
	font-size:  .75rem;
	pointer-events: none;
}

/* ── Dropdown list ──────────────────────────────────────────────────────── */
.tbb-mol-dropdown {
	position:         absolute;
	top:              calc(100% + 3px);
	left:             0;
	right:            0;
	z-index:          9999;
	background:       var(--tbb-bg);
	border:           1.5px solid var(--tbb-primary);
	border-radius:    var(--tbb-radius-sm);
	box-shadow:       var(--tbb-shadow-lg);
	max-height:       260px;
	overflow-y:       auto;
	overscroll-behavior: contain;
}

.tbb-mol-dropdown-item {
	padding:     .65rem 1.1rem;
	font-size:   1.25rem;
	line-height: 1.5;
	color:       var(--tbb-text);
	cursor:      pointer;
	transition:  background var(--tbb-transition);
}

.tbb-mol-dropdown-item:hover,
.tbb-mol-dropdown-item--active {
	background: var(--tbb-primary-light);
	color:      var(--tbb-primary);
}

.tbb-mol-dropdown-empty {
	padding:    .75rem 1.1rem;
	font-size:  1.25rem;
	color:      var(--tbb-text-muted);
	text-align: center;
}

/* Search term highlight */
.tbb-mol-highlight {
	background:  transparent;
	color:       var(--tbb-primary);
	font-weight: 700;
}

/* ── Result card ────────────────────────────────────────────────────────── */
.tbb-mol-results {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.tbb-mol-result-card {
	background:    linear-gradient(135deg, var(--tbb-primary-light) 0%, #e0edff 100%);
	border:        1.5px solid #bfdbfe;
	border-radius: var(--tbb-radius);
	padding:       1.5rem 2rem;
	text-align:    center;
}

.tbb-mol-result-label {
	font-size:      1.2rem;
	font-weight:    600;
	color:          var(--tbb-primary);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom:  .5rem;
}

.tbb-mol-result-value-row {
	display:     inline-flex;
	align-items: baseline;
	gap:         .4rem;
}

.tbb-mol-result-value {
	font-size:   2.25rem;
	font-weight: 700;
	color:       var(--tbb-text);
	line-height: 1.2;
}

.tbb-mol-result-unit {
	font-size:   1.3rem;
	font-weight: 500;
	color:       var(--tbb-text-muted);
}

/* ── Step-by-step breakdown ─────────────────────────────────────────────── */
.tbb-mol-steps {
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       1.25rem 1.5rem;
	font-size:     1.3rem;
	line-height:   1.7;
	color:         var(--tbb-text);
}

.tbb-mol-steps p {
	margin: 0 0 .5rem;
}

.tbb-mol-steps p:last-child {
	margin-bottom: 0;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-mol-mode-toggle {
		flex-direction: column;
		gap:            .5rem;
	}

	.tbb-mol-result-value {
		font-size: 1.75rem;
	}

	.tbb-molality-calculator .tbb-mol-unit-select {
		min-width: 70px;
	}
}