/* ==========================================================================
   TBB Sequence Tools — Shared Stylesheet
   Benchling-inspired UI for all tools/ bioinformatics tools.
   Completely separate from tbb-calculators-common.css.
   Depends on: tbb-calculators-common.css (for .tbb-info-* info section styles)
   ========================================================================== */

/* ── CSS variables ───────────────────────────────────────────────────────── */
:root {
	--tbb-seq-primary:        #0969da;
	--tbb-seq-primary-hover:  #0860ca;
	--tbb-seq-primary-light:  #ddf4ff;
	--tbb-seq-success:        #1a7f37;
	--tbb-seq-success-light:  #dafbe1;
	--tbb-seq-warning:        #9a6700;
	--tbb-seq-warning-light:  #fff8c5;
	--tbb-seq-danger:         #cf222e;
	--tbb-seq-danger-light:   #ffebe9;
	--tbb-seq-text:           #1f2328;
	--tbb-seq-text-muted:     #57606a;
	--tbb-seq-border:         #d0d7de;
	--tbb-seq-bg:             #ffffff;
	--tbb-seq-bg-subtle:      #f6f8fa;
	--tbb-seq-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif;
	--tbb-seq-font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--tbb-seq-radius:         8px;
	--tbb-seq-radius-sm:      6px;
	--tbb-seq-shadow:         0 1px 0 rgba(31,35,40,.04), 0 1px 3px rgba(31,35,40,.08);
	--tbb-seq-transition:     80ms ease;
}

/* ── Base container ─────────────────────────────────────────────────────── */
.tbb-seq-tool {
	font-family:    var(--tbb-seq-font);
	font-size:      14px;
	line-height:    1.5;
	color:          var(--tbb-seq-text);
	background:     var(--tbb-seq-bg);
	border:         1px solid var(--tbb-seq-border);
	border-radius:  var(--tbb-seq-radius);
	box-shadow:     var(--tbb-seq-shadow);
	max-width:      960px;
	margin:         2rem auto;
	overflow:       hidden;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.tbb-seq-toolbar {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	padding:         10px 16px;
	background:      var(--tbb-seq-bg-subtle);
	border-bottom:   1px solid var(--tbb-seq-border);
}

.tbb-seq-toolbar-left {
	display:     flex;
	align-items: center;
	gap:         8px;
	min-width:   0;
}

.tbb-seq-toolbar-icon {
	font-size:   16px;
	line-height: 1;
	flex-shrink: 0;
}

.tbb-seq-toolbar-title {
	font-size:   14px;
	font-weight: 600;
	color:       var(--tbb-seq-text);
	white-space: nowrap;
}

.tbb-seq-toolbar-badge {
	display:       inline-block;
	font-size:     11px;
	font-weight:   500;
	color:         var(--tbb-seq-text-muted);
	background:    var(--tbb-seq-bg);
	border:        1px solid var(--tbb-seq-border);
	border-radius: 20px;
	padding:       1px 8px;
	white-space:   nowrap;
}

.tbb-seq-toolbar-desc {
	font-size:     12px;
	color:         var(--tbb-seq-text-muted);
	white-space:   nowrap;
	overflow:      hidden;
	text-overflow: ellipsis;
}

/* ── Section ─────────────────────────────────────────────────────────────── */
.tbb-seq-section {
	padding:       16px 20px;
	border-bottom: 1px solid var(--tbb-seq-border);
}

.tbb-seq-section:last-child {
	border-bottom: none;
}

.tbb-seq-section-label {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--tbb-seq-text-muted);
	margin-bottom:  8px;
}

/* ── Textarea ────────────────────────────────────────────────────────────── */
.tbb-seq-textarea {
	display:     block;
	width:       100%;
	box-sizing:  border-box;
	font-family: var(--tbb-seq-font-mono);
	font-size:   13px;
	line-height: 1.65;
	color:       var(--tbb-seq-text);
	background:  var(--tbb-seq-bg-subtle);
	border:      1px solid var(--tbb-seq-border);
	border-radius: var(--tbb-seq-radius-sm);
	padding:     10px 12px;
	resize:      vertical;
	transition:  border-color var(--tbb-seq-transition), box-shadow var(--tbb-seq-transition);
}

.tbb-seq-textarea:focus {
	outline:      none;
	background:   var(--tbb-seq-bg);
	border-color: var(--tbb-seq-primary);
	box-shadow:   0 0 0 3px rgba(9,105,218,.12);
}

.tbb-seq-hint {
	font-size:   12px;
	color:       var(--tbb-seq-text-muted);
	margin-top:  6px;
	line-height: 1.4;
}

/* ── Error ───────────────────────────────────────────────────────────────── */
.tbb-seq-error {
	font-size:     13px;
	color:         #82071e;
	background:    var(--tbb-seq-danger-light);
	border:        1px solid #ffb8b0;
	border-radius: var(--tbb-seq-radius-sm);
	padding:       8px 12px;
	margin-top:    10px;
	line-height:   1.4;
}

/* ── Action row ──────────────────────────────────────────────────────────── */
.tbb-seq-actions {
	display:     flex;
	align-items: center;
	gap:         8px;
	flex-wrap:   wrap;
	margin-top:  12px;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.tbb-seq-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             5px;
	padding:         5px 14px;
	font-family:     var(--tbb-seq-font);
	font-size:       13px;
	font-weight:     500;
	line-height:     20px;
	border-radius:   var(--tbb-seq-radius-sm);
	border:          1px solid transparent;
	cursor:          pointer;
	white-space:     nowrap;
	transition:      background var(--tbb-seq-transition),
	                 border-color var(--tbb-seq-transition),
	                 box-shadow var(--tbb-seq-transition),
	                 color var(--tbb-seq-transition);
}

.tbb-seq-btn:focus-visible {
	outline:        2px solid var(--tbb-seq-primary);
	outline-offset: 2px;
}

/* Primary */
.tbb-seq-btn--primary {
	background:   linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
	color:        #fff;
	border-color: #2563eb;
	box-shadow:   none;
}
.tbb-seq-btn--primary:hover {
	background:  linear-gradient(135deg, #162d4a 0%, #1d4ed8 100%);
	border-color: #1d4ed8;
	box-shadow:   0 2px 8px rgba(37,99,235,.3);
}

/* Secondary */
.tbb-seq-btn--secondary {
	background:   var(--tbb-seq-bg);
	color:        var(--tbb-seq-text);
	border-color: var(--tbb-seq-border);
	box-shadow:   0 1px 0 rgba(31,35,40,.04);
}
.tbb-seq-btn--secondary:hover {
	background: var(--tbb-seq-bg-subtle);
}

/* Ghost */
.tbb-seq-btn--ghost {
	background:   transparent;
	color:        var(--tbb-seq-text-muted);
	border-color: transparent;
}
.tbb-seq-btn--ghost:hover {
	background:   var(--tbb-seq-bg-subtle);
	color:        var(--tbb-seq-text);
	border-color: var(--tbb-seq-border);
}

/* Copy */
.tbb-seq-btn--copy {
	background:   var(--tbb-seq-bg);
	color:        var(--tbb-seq-primary);
	border-color: var(--tbb-seq-border);
	padding:      3px 12px;
	font-size:    12px;
	box-shadow:   0 1px 0 rgba(31,35,40,.04);
}
.tbb-seq-btn--copy:hover { background: var(--tbb-seq-primary-light); }
.tbb-seq-btn--copied {
	background:   var(--tbb-seq-success-light);
	color:        var(--tbb-seq-success);
	border-color: #aadcb5;
}

/* ── Stats grid ──────────────────────────────────────────────────────────── */
.tbb-seq-stats {
	display:       flex;
	border:        1px solid var(--tbb-seq-border);
	border-radius: var(--tbb-seq-radius);
	overflow:      hidden;
	margin-bottom: 12px;
}

.tbb-seq-stat {
	flex:        1;
	padding:     12px 16px;
	border-right: 1px solid var(--tbb-seq-border);
	background:  var(--tbb-seq-bg);
	min-width:   0;
}

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

.tbb-seq-stat-value {
	font-size:      20px;
	font-weight:    700;
	color:          var(--tbb-seq-text);
	line-height:    1.2;
	letter-spacing: -.02em;
	word-break:     break-all;
}

.tbb-seq-stat-label {
	font-size:      11px;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          var(--tbb-seq-text-muted);
	margin-top:     3px;
}

/* ── Meta row (shortest / longest / type) ────────────────────────────────── */
.tbb-seq-meta-row {
	display:     flex;
	align-items: center;
	gap:         16px;
	flex-wrap:   wrap;
}

.tbb-seq-meta-item {
	display:     flex;
	align-items: center;
	gap:         4px;
	font-size:   12px;
	color:       var(--tbb-seq-text-muted);
}

.tbb-seq-meta-item strong {
	color:       var(--tbb-seq-text);
	font-weight: 600;
}

/* ── Type detection badges ───────────────────────────────────────────────── */
.tbb-seq-type-badge {
	display:        inline-flex;
	align-items:    center;
	gap:            3px;
	padding:        2px 9px;
	border-radius:  20px;
	font-size:      11px;
	font-weight:    600;
	letter-spacing: .02em;
}

.tbb-seq-type-badge--dna {
	background: var(--tbb-seq-primary-light);
	color:      var(--tbb-seq-primary);
	border:     1px solid #b6e3ff;
}
.tbb-seq-type-badge--dna-iupac {
	background: #e6f4ff;
	color:      #005cc5;
	border:     1px solid #b6d8ff;
}
.tbb-seq-type-badge--protein {
	background: var(--tbb-seq-warning-light);
	color:      var(--tbb-seq-warning);
	border:     1px solid #eac54f;
}
.tbb-seq-type-badge--mixed {
	background: #fff0eb;
	color:      #bc4c00;
	border:     1px solid #ffa28b;
}
.tbb-seq-type-badge--unknown {
	background: var(--tbb-seq-bg-subtle);
	color:      var(--tbb-seq-text-muted);
	border:     1px solid var(--tbb-seq-border);
}

/* ── Output block ────────────────────────────────────────────────────────── */
.tbb-seq-output-block {
	border:        1px solid var(--tbb-seq-border);
	border-radius: var(--tbb-seq-radius-sm);
	overflow:      hidden;
}

.tbb-seq-output-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         5px 8px 5px 14px;
	background:      var(--tbb-seq-bg-subtle);
	border-bottom:   1px solid var(--tbb-seq-border);
}

.tbb-seq-output-title {
	font-size:      11px;
	font-weight:    600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--tbb-seq-text-muted);
}

.tbb-seq-output-pre {
	margin:      0;
	padding:     12px 14px;
	font-family: var(--tbb-seq-font-mono);
	font-size:   13px;
	line-height: 1.65;
	color:       var(--tbb-seq-text);
	background:  var(--tbb-seq-bg);
	white-space: pre;
	overflow-x:  auto;
	max-height:  360px;
	overflow-y:  auto;
}

/* ── Info section — override calculator padding to match tool sections ────── */
/*
 * TBB_Calculator_Info::render() outputs .tbb-calc-info with its own padding
 * and border-top. Inside a .tbb-seq-tool we reset those to match the tool's
 * section rhythm: 16px 20px padding, 1px border consistent with other sections.
 */
.tbb-seq-tool .tbb-calc-info {
	margin-top: 0;
	padding:    16px 20px 20px;
	border-top: 1px solid var(--tbb-seq-border);
}

@media ( max-width: 640px ) {
	.tbb-seq-tool .tbb-calc-info { padding: 14px 16px 18px; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.tbb-seq-footer {
	padding:    8px 20px;
	background: var(--tbb-seq-bg-subtle);
	border-top: 1px solid var(--tbb-seq-border);
	font-size:  12px;
	color:      var(--tbb-seq-text-muted);
	text-align: center;
	line-height: 1.5;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 640px ) {
	.tbb-seq-toolbar-desc { display: none; }

	.tbb-seq-stats {
		flex-wrap: wrap;
	}

	.tbb-seq-stat {
		flex:         1 0 calc(50% - 1px);
		border-bottom: 1px solid var(--tbb-seq-border);
	}

	/* Remove right border on every even stat (2nd column) */
	.tbb-seq-stat:nth-child(2n) { border-right: none; }

	/* Last row — remove bottom border */
	.tbb-seq-stat:nth-last-child(-n+2) { border-bottom: none; }

	.tbb-seq-actions {
		flex-direction: column;
	}

	.tbb-seq-btn {
		width:           100%;
		justify-content: center;
	}

	.tbb-seq-output-pre {
		font-size:  12px;
		max-height: 260px;
	}
}

@media ( max-width: 380px ) {
	.tbb-seq-stat { flex: 1 0 100%; border-right: none; }
}

/* ── Reduced motion ──────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.tbb-seq-btn,
	.tbb-seq-textarea { transition: none; }
}