/* ==========================================================================
   Range Extractor Protein — Tool-specific styles
   Shared Benchling-style framework: tools/common/tbb-sequence-tools.css
   ========================================================================== */

/* ── Textarea ────────────────────────────────────────────────────────────── */
.tbb-range-extractor-protein .tbb-seq-textarea {
	min-height: 180px;
}

/* ── Range input row ─────────────────────────────────────────────────────── */
.tbb-rep-range-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 4px;
}

.tbb-rep-range-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tbb-label, #374151);
	white-space: nowrap;
	min-width: 60px;
}

.tbb-rep-range-input {
	flex: 1;
	padding: 6px 10px;
	font-size: 0.875rem;
	font-family: 'Courier New', Courier, monospace;
	border: 1px solid var(--tbb-border, #d1d5db);
	border-radius: 6px;
	background: var(--tbb-input-bg, #fff);
	color: var(--tbb-text, #111827);
	outline: none;
	transition: border-color 0.15s;
}

.tbb-rep-range-input:focus {
	border-color: var(--tbb-accent, #2563eb);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* ── Controls (output mode) ──────────────────────────────────────────────── */
.tbb-rep-controls {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 12px;
	margin-bottom: 4px;
}

.tbb-rep-control-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tbb-rep-control-label {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--tbb-label, #374151);
	white-space: nowrap;
	min-width: 82px;
}

.tbb-rep-select {
	flex: 1;
	padding: 6px 10px;
	font-size: 0.875rem;
	border: 1px solid var(--tbb-border, #d1d5db);
	border-radius: 6px;
	background: var(--tbb-input-bg, #fff);
	color: var(--tbb-text, #111827);
	outline: none;
	cursor: pointer;
	transition: border-color 0.15s;
	max-width: 480px;
}

.tbb-rep-select:focus {
	border-color: var(--tbb-accent, #2563eb);
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.12);
}

/* ── Warnings panel ──────────────────────────────────────────────────────── */
.tbb-rep-warnings {
	background: #fffbeb;
	border: 1px solid #fcd34d;
	border-radius: 8px;
	padding: 12px 16px;
}

.tbb-rep-warn-heading {
	font-size: 0.8rem;
	font-weight: 700;
	color: #92400e;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

.tbb-rep-warn-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.tbb-rep-warn-item {
	font-size: 0.825rem;
	color: #78350f;
	line-height: 1.4;
	padding-left: 16px;
	position: relative;
}

.tbb-rep-warn-item::before {
	content: '⚠';
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.75rem;
}

/* ── Output max-height ───────────────────────────────────────────────────── */
@media ( min-width: 900px ) {
	.tbb-range-extractor-protein .tbb-seq-output-pre {
		max-height: 480px;
	}
}

/* ── Responsive: stack controls on narrow screens ────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-rep-range-row,
	.tbb-rep-control-row {
		flex-direction: column;
		align-items: flex-start;
	}

	.tbb-rep-range-label,
	.tbb-rep-control-label {
		min-width: unset;
	}

	.tbb-rep-range-input,
	.tbb-rep-select {
		width: 100%;
		max-width: 100%;
	}
}