/* ==========================================================================
   TBB Biostatistics Tools — Common Shared Stylesheet
   Fully independent from tbb-calculators-common.css and tbb-sequence-tools.css.
   Used by ALL biostats/ tools. Do NOT add tool-specific styles here.
   ========================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
	--tbb-primary:        #2664eb;
	--tbb-primary-dark:   #1d4ed8;
	--tbb-primary-light:  #eff6ff;
	--tbb-success:        #16a34a;
	--tbb-success-light:  #f0fdf4;
	--tbb-warning:        #d97706;
	--tbb-warning-light:  #fffbeb;
	--tbb-danger:         #dc2626;
	--tbb-danger-light:   #fef2f2;
	--tbb-text:           #1e293b;
	--tbb-text-muted:     #64748b;
	--tbb-border:         #e2e8f0;
	--tbb-bg:             #ffffff;
	--tbb-bg-subtle:      #f8fafc;
	--tbb-radius:         12px;
	--tbb-radius-sm:      8px;
	--tbb-shadow:         0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
	--tbb-shadow-lg:      0 4px 6px rgba(0,0,0,.07), 0 10px 32px rgba(0,0,0,.1);
	--tbb-font:           -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--tbb-font-mono:      "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
	--tbb-transition:     160ms ease;
}

/* ── Base container ─────────────────────────────────────────────────────── */
.tbb-biostats {
	font-family:   var(--tbb-font);
	color:         var(--tbb-text);
	background:    var(--tbb-bg);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius);
	box-shadow:    var(--tbb-shadow);
	max-width:     1200px;
	margin:        2rem auto;
	overflow:      hidden;
	text-align:    left;
}

/* ── Header ─────────────────────────────────────────────────────────────── */
.tbb-bs-header {
	background:    linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%);
	color:         #fff;
	padding:       2.5rem 3rem 2.25rem;
	text-align:    center;
}

.tbb-bs-header-icon {
	font-size:     2.5rem;
	line-height:   1;
	margin-bottom: .5rem;
}

.tbb-bs-title {
	font-size:   1.9rem;
	font-weight: 700;
	margin:      0 0 .6rem;
	color:       #fff;
}

.tbb-bs-subtitle {
	font-size:  1.3rem;
	opacity:    .88;
	margin:     0;
	line-height: 1.6;
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.tbb-bs-body {
	padding: 2.25rem 2.75rem;
}

/* ── Form ───────────────────────────────────────────────────────────────── */
.tbb-bs-form {
	margin-bottom: 0;
}

.tbb-bs-field {
	margin-bottom: 1.25rem;
}

.tbb-bs-label {
	display:        block;
	font-size:      1.3rem;
	font-weight:    600;
	color:          var(--tbb-text);
	margin-bottom:  .5rem;
	letter-spacing: .01em;
}

.tbb-bs-input,
.tbb-bs-select,
.tbb-bs-textarea {
	display:       block;
	width:         100%;
	box-sizing:    border-box;
	padding:       .75rem 1rem;
	font-family:   var(--tbb-font);
	font-size:     1.3rem;
	line-height:   1.6;
	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);
}

.tbb-bs-textarea {
	resize: vertical;
}

.tbb-bs-select {
	appearance:      none;
	-webkit-appearance: none;
	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 .875rem center;
	padding-right:   2.5rem;
	cursor:          pointer;
}

.tbb-bs-input:focus,
.tbb-bs-select:focus,
.tbb-bs-textarea:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37,99,235,.15);
}

.tbb-bs-hint {
	font-size:   1.3rem;
	color:       var(--tbb-text-muted);
	margin:      .35rem 0 0;
	line-height: 1.4;
}

/* ── Input row (label + input side by side) ─────────────────────────────── */
.tbb-bs-field-row {
	display:     flex;
	align-items: center;
	gap:         .75rem;
}

.tbb-bs-field-row .tbb-bs-label {
	margin-bottom: 0;
	white-space:   nowrap;
	min-width:     9rem;
}

.tbb-bs-field-row .tbb-bs-input,
.tbb-bs-field-row .tbb-bs-select {
	flex: 1;
}

/* ── Options grid ───────────────────────────────────────────────────────── */
.tbb-bs-options {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap:                   1rem;
	margin-bottom:         1.25rem;
}

/* ── Alert / error ──────────────────────────────────────────────────────── */
.tbb-bs-error {
	padding:       .75rem 1rem;
	border-radius: var(--tbb-radius-sm);
	font-size:     1.3rem;
	line-height:   1.5;
	margin-bottom: 1rem;
	background:    var(--tbb-danger-light);
	border:        1px solid #fca5a5;
	color:         #991b1b;
}

/* ── Action buttons ─────────────────────────────────────────────────────── */
.tbb-bs-actions {
	display:    flex;
	flex-wrap:  wrap;
	gap:        .625rem;
	margin-top: 1.25rem;
}

.tbb-bs-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             .35rem;
	padding:         .75rem 1.6rem;
	font-size:       1.3rem;
	font-weight:     600;
	border-radius:   var(--tbb-radius-sm);
	border:          1.5px solid transparent;
	cursor:          pointer;
	transition:      background var(--tbb-transition),
	                 border-color var(--tbb-transition),
	                 color var(--tbb-transition),
	                 box-shadow var(--tbb-transition);
	white-space:     nowrap;
	font-family:     var(--tbb-font);
	text-transform:  uppercase;
	letter-spacing:  .04em;
}

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

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

.tbb-bs-btn--secondary {
	background:   var(--tbb-primary-light);
	color:        var(--tbb-primary);
	border-color: #bfdbfe;
}
.tbb-bs-btn--secondary:hover { background: #dbeafe; }

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

/* ── Results section ────────────────────────────────────────────────────── */
.tbb-bs-results {
	margin-top:  1.75rem;
	padding-top: 1.75rem;
	border-top:  2px solid var(--tbb-border);
}

.tbb-bs-results-heading {
	font-size:   1.3rem;
	font-weight: 700;
	color:       var(--tbb-text);
	margin:      0 0 1.1rem;
}

/* ── Stats grid ─────────────────────────────────────────────────────────── */
.tbb-bs-stats-grid {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap:                   .875rem;
	margin-bottom:         1.25rem;
}

.tbb-bs-stat-card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        1rem .75rem .85rem;
	background:     var(--tbb-bg-subtle);
	border:         1.5px solid var(--tbb-border);
	border-radius:  var(--tbb-radius-sm);
	transition:     border-color var(--tbb-transition), background var(--tbb-transition);
}

.tbb-bs-stat-card--highlight {
	background:   var(--tbb-primary-light);
	border-color: #bfdbfe;
}

.tbb-bs-stat-card--ok   { background: var(--tbb-success-light); border-color: #86efac; }
.tbb-bs-stat-card--warn { background: var(--tbb-warning-light); border-color: #fcd34d; }
.tbb-bs-stat-card--bad  { background: var(--tbb-danger-light);  border-color: #fca5a5; }

.tbb-bs-stat-label {
	font-size:      1.3rem;
	font-weight:    600;
	color:          var(--tbb-text-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom:  .4rem;
}

.tbb-bs-stat-value {
	font-size:   1.9rem;
	font-weight: 700;
	color:       var(--tbb-text);
	line-height: 1.1;
}

.tbb-bs-stat-unit {
	font-size:  1.3rem;
	color:      var(--tbb-text-muted);
	margin-top: .2rem;
}

/* ── Results table ──────────────────────────────────────────────────────── */
.tbb-bs-table-wrap {
	overflow-x:    auto;
	border-radius: var(--tbb-radius-sm);
	border:        1px solid var(--tbb-border);
	margin-bottom: 1.25rem;
}

.tbb-bs-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       1.3rem;
}

.tbb-bs-table th {
	background:     var(--tbb-bg-subtle);
	color:          var(--tbb-text);
	font-weight:    600;
	padding:        .65rem 1rem;
	text-align:     left;
	border-bottom:  2px solid var(--tbb-border);
	white-space:    nowrap;
}

.tbb-bs-table td {
	padding:       .6rem 1rem;
	border-bottom: 1px solid var(--tbb-border);
	color:         var(--tbb-text);
	line-height:   1.4;
}

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

.tbb-bs-table tr:hover td { background: var(--tbb-bg-subtle); }

.tbb-bs-table td--mono {
	font-family: var(--tbb-font-mono);
}

.tbb-bs-table td--sig {
	font-weight: 700;
	color:       var(--tbb-success);
}

/* ── Significance badge ─────────────────────────────────────────────────── */
.tbb-bs-badge {
	display:       inline-block;
	padding:       .2rem .6rem;
	border-radius: 999px;
	font-size:     1.1rem;
	font-weight:   600;
	line-height:   1.4;
}

.tbb-bs-badge--sig    { background: var(--tbb-success-light); color: var(--tbb-success); }
.tbb-bs-badge--ns     { background: var(--tbb-bg-subtle);     color: var(--tbb-text-muted); border: 1px solid var(--tbb-border); }
.tbb-bs-badge--warn   { background: var(--tbb-warning-light); color: var(--tbb-warning); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.tbb-bs-footer {
	background: var(--tbb-bg-subtle);
	border-top: 1px solid var(--tbb-border);
	padding:    .875rem 2rem;
}

.tbb-bs-footer p {
	font-size:   1.3rem;
	color:       var(--tbb-text-muted);
	margin:      0;
	text-align:  center;
	line-height: 1.5;
}

/* ── Information Section ────────────────────────────────────────────────── */
.tbb-bs-info {
	margin-top:  2.25rem;
	padding:     2rem 2.75rem 2.25rem;
	border-top:  2px solid var(--tbb-border);
}

.tbb-info-section {
	margin-bottom: 1.75rem;
}

.tbb-info-section--summary {
	background:    var(--tbb-primary-light);
	border:        1.5px solid #bfdbfe;
	border-radius: var(--tbb-radius-sm);
	padding:       1rem 1.25rem;
	margin-bottom: 2rem;
}

.tbb-info-section--summary .tbb-info-heading,
.tbb-info-section--summary .tbb-info-collapsible-label {
	color:      var(--tbb-primary);
	margin-top: 0;
}

.tbb-info-section--summary .tbb-info-text {
	margin: 0;
	color:  var(--tbb-text);
}

.tbb-info-section--warnings {
	background:    var(--tbb-warning-light);
	border:        1.5px solid #fde68a;
	border-radius: var(--tbb-radius-sm);
	padding:       1rem 1.25rem;
}

.tbb-info-section--warnings .tbb-info-heading,
.tbb-info-section--warnings .tbb-info-collapsible-label {
	color: #92400e;
}

.tbb-info-heading {
	font-size:      1.3rem;
	font-weight:    700;
	color:          var(--tbb-text);
	margin:         0 0 0.875rem;
	letter-spacing: -.01em;
}

.tbb-info-text {
	font-size:   1.3rem;
	line-height: 1.6;
	color:       var(--tbb-text);
	margin:      0;
}

.tbb-info-list {
	margin:      0.5rem 0 0 1.5rem;
	padding:     0;
	line-height: 1.8;
	color:       var(--tbb-text);
	font-size:   1.3rem;
}

.tbb-info-list li          { margin-bottom: 0.5rem; }
.tbb-info-list--bullets    { list-style-type: disc; }
.tbb-info-list--bullets li { margin-bottom: 0.4rem; }

.tbb-info-formulas {
	display:        flex;
	flex-direction: column;
	gap:            1rem;
}

.tbb-info-formula-item {
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       1rem;
}

.tbb-info-formula-item strong {
	display:       block;
	margin-bottom: 0.5rem;
	color:         var(--tbb-primary);
	font-size:     1.3rem;
}

.tbb-info-formula-text {
	font-family: var(--tbb-font-mono);
	font-size:   1.3rem;
	background:  var(--tbb-bg);
	padding:     0.75rem;
	border-radius: 6px;
	border:      1px solid var(--tbb-border);
	color:       var(--tbb-text);
	line-height: 1.5;
	overflow-x:  auto;
	word-break:  break-word;
}

.tbb-info-interpretation {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.tbb-info-interpretation-item {
	background:    var(--tbb-bg-subtle);
	border-left:   3px solid var(--tbb-primary);
	padding:       1rem;
	border-radius: 0 var(--tbb-radius-sm) var(--tbb-radius-sm) 0;
}

.tbb-info-interpretation-item strong {
	display:       block;
	margin-bottom: 0.5rem;
	color:         var(--tbb-text);
	font-size:     1.3rem;
}

.tbb-info-interpretation-item p {
	margin:      0;
	font-size:   1.3rem;
	line-height: 1.6;
	color:       var(--tbb-text-muted);
}

.tbb-info-warnings {
	display:        flex;
	flex-direction: column;
	gap:            0.75rem;
}

.tbb-info-warning-item {
	background:    rgba(217, 119, 6, 0.08);
	border:        1px solid #fcd34d;
	border-radius: var(--tbb-radius-sm);
	padding:       0.875rem 1rem;
}

.tbb-info-warning-item strong {
	display:       block;
	color:         #92400e;
	margin-bottom: 0.4rem;
	font-size:     1.3rem;
}

.tbb-info-warning-item p {
	margin:      0;
	font-size:   1.3rem;
	line-height: 1.5;
	color:       #a16207;
}

.tbb-info-faq {
	display:        flex;
	flex-direction: column;
	gap:            0.5rem;
}

.tbb-info-faq-item {
	background:    var(--tbb-bg);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	overflow:      hidden;
}

.tbb-info-faq-item[open]    { background: var(--tbb-bg-subtle); }

.tbb-info-faq-question {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	padding:         1rem;
	cursor:          pointer;
	font-weight:     600;
	color:           var(--tbb-text);
	user-select:     none;
	transition:      background var(--tbb-transition), color var(--tbb-transition);
	font-size:       1.3rem;
}

.tbb-info-faq-item:hover .tbb-info-faq-question {
	background: var(--tbb-bg-subtle);
	color:      var(--tbb-primary);
}

.tbb-info-faq-question::after {
	content:     '▶';
	display:     inline-block;
	margin-left: 0.75rem;
	transition:  transform var(--tbb-transition);
	font-size:   0.7rem;
	flex-shrink: 0;
}

.tbb-info-faq-item[open] .tbb-info-faq-question::after { transform: rotate(90deg); }

.tbb-info-faq-answer {
	padding:    0 1rem 1rem;
	line-height: 1.6;
	font-size:  1.3rem;
	color:      var(--tbb-text-muted);
	border-top: 1px solid var(--tbb-border);
	animation:  tbbBsFadeIn 160ms ease-out;
}

@keyframes tbbBsFadeIn {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: translateY(0); }
}

.tbb-info-collapsible { cursor: default; }

.tbb-info-collapsible-toggle {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	cursor:          pointer;
	list-style:      none;
	user-select:     none;
	margin:          0;
	padding:         0;
	width:           100%;
}

.tbb-info-collapsible-toggle::-webkit-details-marker { display: none; }

.tbb-info-collapsible-toggle::after {
	content:     '▶';
	display:     inline-block;
	margin-left: 0.75rem;
	transition:  transform var(--tbb-transition);
	font-size:   0.65rem;
	flex-shrink: 0;
	opacity:     0.55;
}

.tbb-info-collapsible[open] .tbb-info-collapsible-toggle::after { transform: rotate(90deg); }

.tbb-info-collapsible-label {
	flex:           1;
	min-width:      0;
	text-align:     left;
	font-size:      1.3rem;
	font-weight:    700;
	color:          var(--tbb-text);
	letter-spacing: -.01em;
	margin:         0;
	transition:     color var(--tbb-transition);
}

.tbb-info-collapsible:hover .tbb-info-collapsible-label { color: var(--tbb-primary); }

.tbb-info-collapsible-body { margin-top: 0.875rem; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-bs-header  { padding: 1.75rem 1.5rem 1.5rem; }
	.tbb-bs-body    { padding: 1.5rem; }
	.tbb-bs-info    { padding: 1.5rem; }
	.tbb-bs-footer  { padding: .875rem 1.5rem; }
	.tbb-bs-title   { font-size: 1.25rem; }
	.tbb-bs-actions { flex-direction: column; }
	.tbb-bs-btn     { width: 100%; justify-content: center; }

	.tbb-bs-stats-grid { grid-template-columns: repeat(2, 1fr); }
	.tbb-bs-stat-value { font-size: 1.3rem; }

	.tbb-bs-field-row            { flex-direction: column; align-items: stretch; }
	.tbb-bs-field-row .tbb-bs-label { min-width: unset; }
	.tbb-bs-options              { grid-template-columns: 1fr; }

	.tbb-info-section             { margin-bottom: 1.25rem; }
	.tbb-info-faq-question        { padding: 0.875rem; }
	.tbb-info-interpretation-item { padding: 0.875rem; }
	.tbb-info-warning-item        { padding: 0.75rem; }
	.tbb-info-formula-item        { padding: 0.875rem; }
}

@media ( max-width: 360px ) {
	.tbb-bs-stats-grid { grid-template-columns: 1fr; }
}

/* ── Reduced-motion ─────────────────────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	.tbb-info-faq-answer               { animation: none; }
	.tbb-info-faq-question::after,
	.tbb-info-collapsible-toggle::after { transition: none; }
	.tbb-bs-btn,
	.tbb-bs-stat-card,
	.tbb-bs-input,
	.tbb-bs-select,
	.tbb-bs-textarea,
	.tbb-info-faq-question,
	.tbb-info-collapsible-label         { transition: none; }
}