/* ==========================================================================
   Restriction Summary — Tool-specific styles
   Shared Benchling-style framework: tools/common/tbb-sequence-tools.css
   ========================================================================== */

/* ── Input textarea ──────────────────────────────────────────────────────── */
.tbb-rest-summary .tbb-seq-textarea {
	min-height:  160px;
	font-family: var(--tbb-seq-font-mono);
	font-size:   12px;
}

/* ── Options row (topology) ──────────────────────────────────────────────── */
.tbb-rs-option-row {
	display:     flex;
	align-items: center;
	flex-wrap:   wrap;
	gap:         6px;
	font-size:   12px;
	color:       var(--tbb-seq-text);
}

.tbb-rs-option-row label,
.tbb-rs-option-row span {
	white-space: nowrap;
}

/* ── Selects ─────────────────────────────────────────────────────────────── */
.tbb-rs-select {
	height:        30px;
	padding:       0 6px;
	border:        1px solid var(--tbb-seq-border);
	border-radius: var(--tbb-seq-radius);
	background:    var(--tbb-seq-bg);
	color:         var(--tbb-seq-text);
	font-size:     12px;
	cursor:        pointer;
}

.tbb-rs-select--topology { width: 100px; }
.tbb-rs-select--filter   { width: 220px; }

/* ── Filter row (results area) ───────────────────────────────────────────── */
.tbb-rs-filter-row {
	display:       flex;
	align-items:   center;
	flex-wrap:     wrap;
	gap:           8px;
	margin-bottom: 12px;
	font-size:     12px;
	color:         var(--tbb-seq-text-muted);
}

/* ── Legend ──────────────────────────────────────────────────────────────── */
.tbb-rs-legend {
	display:       flex;
	flex-wrap:     wrap;
	gap:           14px;
	margin-bottom: 14px;
	font-size:     11px;
	color:         var(--tbb-seq-text-muted);
}

.tbb-rs-legend-item {
	display:     flex;
	align-items: center;
	gap:         5px;
}

.tbb-rs-legend-swatch {
	width:        12px;
	height:       12px;
	border-radius: 2px;
	flex-shrink:  0;
	border:       1px solid rgba(0,0,0,0.08);
}

.tbb-rs-swatch--zero  { background: rgba(128, 128, 128, 0.18); }
.tbb-rs-swatch--once  { background: rgba(34,  197,  94, 0.28); }
.tbb-rs-swatch--twice { background: rgba(59,  130, 246, 0.28); }
.tbb-rs-swatch--many  { background: rgba(249, 115,  22, 0.24); }

/* ── Per-sequence sections ───────────────────────────────────────────────── */
.tbb-rs-seq-section {
	margin-bottom: 28px;
}

.tbb-rs-seq-section:last-child {
	margin-bottom: 0;
}

.tbb-rs-seq-title {
	font-size:     13px;
	font-weight:   600;
	color:         var(--tbb-seq-text);
	margin-bottom: 8px;
	word-break:    break-all;
}

.tbb-rs-seq-len {
	font-weight: 400;
	color:       var(--tbb-seq-text-muted);
}

/* ── Results table ───────────────────────────────────────────────────────── */
.tbb-rs-table-wrap {
	overflow-x:                 auto;
	-webkit-overflow-scrolling: touch;
}

.tbb-rs-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       12px;
}

.tbb-rs-th {
	padding:        6px 12px;
	text-align:     left;
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color:          var(--tbb-seq-text-muted);
	border-bottom:  2px solid var(--tbb-seq-border);
	white-space:    nowrap;
}

.tbb-rs-th--num { text-align: right; }

.tbb-rs-td {
	padding:        3px 12px;
	border-bottom:  1px solid var(--tbb-seq-surface);
	color:          var(--tbb-seq-text);
	vertical-align: middle;
}

.tbb-rs-td--name {
	font-size:   12px;
	font-weight: 500;
	white-space: nowrap;
}

.tbb-rs-td--num {
	font-family: var(--tbb-seq-font-mono);
	text-align:  right;
	white-space: nowrap;
}

.tbb-rs-td--pos {
	font-family: var(--tbb-seq-font-mono);
	font-size:   11px;
	color:       var(--tbb-seq-text-muted);
	word-break:  break-word;
}

.tbb-rs-nocut {
	opacity: 0.4;
}

/* ── Cut-count colour coding ─────────────────────────────────────────────── */
.tbb-rs-row--zero  .tbb-rs-td { opacity: 0.45; }
.tbb-rs-row--once  .tbb-rs-td { background: rgba(34,  197,  94, 0.10); }
.tbb-rs-row--twice .tbb-rs-td { background: rgba(59,  130, 246, 0.10); }
.tbb-rs-row--many  .tbb-rs-td { background: rgba(249, 115,  22, 0.08); }

.tbb-rs-table tbody tr:last-child .tbb-rs-td { border-bottom: none; }

/* ── Output pre (copy block) ─────────────────────────────────────────────── */
@media ( min-width: 900px ) {
	.tbb-rest-summary .tbb-seq-output-pre {
		max-height: 520px;
	}
}