/* ==========================================================================
   PCR Primer Stats — Tool-specific styles
   Shared Benchling-style framework: tools/common/tbb-sequence-tools.css
   ========================================================================== */

/* ── Two-column primer inputs ────────────────────────────────────────────── */
.tbb-pps-inputs {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   14px;
}

@media ( max-width: 600px ) {
	.tbb-pps-inputs {
		grid-template-columns: 1fr;
	}
}

.tbb-pps-input-group {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.tbb-pps-input-label {
	display:     flex;
	align-items: center;
	gap:         7px;
	font-size:   12px;
	font-weight: 600;
	color:       var(--tbb-seq-text);
}

/* ── F / R badges ────────────────────────────────────────────────────────── */
.tbb-pps-badge {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           20px;
	height:          20px;
	border-radius:   4px;
	font-size:       11px;
	font-weight:     700;
	line-height:     1;
	flex-shrink:     0;
}

.tbb-pps-badge--fwd { background: #dbeafe; color: #1d4ed8; }
.tbb-pps-badge--rev { background: #fce7f3; color: #9d174d; }

/* ── Input textarea ──────────────────────────────────────────────────────── */
.tbb-pcr-primer-stats .tbb-seq-textarea {
	min-height:  100px;
	font-family: var(--tbb-seq-font-mono);
	font-size:   12px;
}

/* ── Per-primer result blocks ────────────────────────────────────────────── */
.tbb-pps-primers {
	display:        flex;
	flex-direction: column;
	gap:            20px;
}

.tbb-pps-primer-card {
	border:        1px solid var(--tbb-seq-border);
	border-radius: var(--tbb-seq-radius);
	overflow:      hidden;
}

.tbb-pps-primer-card--fwd { border-left: 3px solid #3b82f6; }
.tbb-pps-primer-card--rev { border-left: 3px solid #ec4899; }

.tbb-pps-primer-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         10px 14px;
	background:      var(--tbb-seq-surface);
	border-bottom:   1px solid var(--tbb-seq-border);
	gap:             10px;
	flex-wrap:       wrap;
}

.tbb-pps-primer-name {
	display:     flex;
	align-items: center;
	gap:         6px;
	font-weight: 600;
	font-size:   13px;
	color:       var(--tbb-seq-text);
}

.tbb-pps-primer-seq {
	font-family: var(--tbb-seq-font-mono);
	font-size:   12px;
	color:       var(--tbb-seq-text-muted);
	word-break:  break-all;
	flex:        1 1 auto;
}

/* ── Mini stats strip ────────────────────────────────────────────────────── */
.tbb-pps-mini-stats {
	display:       flex;
	flex-wrap:     wrap;
	gap:           1px;
	border-bottom: 1px solid var(--tbb-seq-border);
}

.tbb-pps-mini-stat {
	flex:         1 1 80px;
	padding:      8px 12px;
	background:   var(--tbb-seq-bg);
	border-right: 1px solid var(--tbb-seq-border);
	text-align:   center;
}

.tbb-pps-mini-stat:last-child { border-right: none; }

.tbb-pps-mini-stat-value {
	font-size:   14px;
	font-weight: 600;
	color:       var(--tbb-seq-text);
	line-height: 1.2;
}

.tbb-pps-mini-stat-label {
	font-size:  10px;
	color:      var(--tbb-seq-text-muted);
	margin-top: 2px;
}

/* ── Property table ──────────────────────────────────────────────────────── */
.tbb-pps-props {
	padding:       10px 14px;
	border-bottom: 1px solid var(--tbb-seq-border);
}

.tbb-pps-props-title {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--tbb-seq-text-muted);
	margin-bottom:  6px;
}

.tbb-pps-prop-row {
	display:       flex;
	gap:           8px;
	padding:       3px 0;
	font-size:     12px;
	border-bottom: 1px solid var(--tbb-seq-surface);
}

.tbb-pps-prop-row:last-child { border-bottom: none; }

.tbb-pps-prop-label {
	flex:       0 0 220px;
	color:      var(--tbb-seq-text-muted);
	text-align: right;
}

.tbb-pps-prop-value {
	flex:        1;
	font-family: var(--tbb-seq-font-mono);
	color:       var(--tbb-seq-text);
	word-break:  break-all;
}

@media ( max-width: 500px ) {
	.tbb-pps-prop-row   { flex-direction: column; }
	.tbb-pps-prop-label { flex: none; text-align: left; }
}

/* ── Suitability tests ───────────────────────────────────────────────────── */
.tbb-pps-tests {
	padding: 10px 14px;
}

.tbb-pps-tests-title {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color:          var(--tbb-seq-text-muted);
	margin-bottom:  6px;
}

.tbb-pps-test-row {
	display:       flex;
	align-items:   flex-start;
	gap:           8px;
	padding:       3px 0;
	font-size:     12px;
	border-bottom: 1px solid var(--tbb-seq-surface);
}

.tbb-pps-test-row:last-child { border-bottom: none; }

.tbb-pps-test-label {
	flex:       0 0 220px;
	color:      var(--tbb-seq-text-muted);
	text-align: right;
}

.tbb-pps-test-value {
	flex:        1;
	font-family: var(--tbb-seq-font-mono);
}

.tbb-pps-test-value--pass    { color: #1a7f37; }
.tbb-pps-test-value--warning { color: #9a6700; }

/* ── Alignment diagram (self-annealing / hairpin / heterodimer) ──────────── */
.tbb-pps-alignment {
	padding:    4px 0 4px 228px;
	font-family: var(--tbb-seq-font-mono);
	font-size:   11px;
	color:       var(--tbb-seq-text);
	white-space: pre;
	overflow-x:  auto;
	line-height: 1.5;
}

@media ( max-width: 500px ) {
	.tbb-pps-test-row   { flex-direction: column; }
	.tbb-pps-test-label { flex: none; text-align: left; }
	.tbb-pps-alignment  { padding-left: 0; }
}

/* ── Pair compatibility card ─────────────────────────────────────────────── */
.tbb-pps-pair-card {
	border:        1px solid var(--tbb-seq-border);
	border-left:   3px solid #8b5cf6;
	border-radius: var(--tbb-seq-radius);
	overflow:      hidden;
}

.tbb-pps-pair-header {
	display:       flex;
	align-items:   center;
	gap:           8px;
	padding:       10px 14px;
	background:    var(--tbb-seq-surface);
	border-bottom: 1px solid var(--tbb-seq-border);
	font-weight:   600;
	font-size:     13px;
	color:         var(--tbb-seq-text);
}

.tbb-pps-pair-icon { color: #8b5cf6; }

/* ── Output pre (copy block) ─────────────────────────────────────────────── */
@media ( min-width: 900px ) {
	.tbb-pcr-primer-stats .tbb-seq-output-pre {
		max-height: 600px;
	}
}