/* ==========================================================================
   Summary Statistics Calculator — Tool-specific styles
   Base styles come from biostatistics/common/tbb-biostats-common.css
   ========================================================================== */

/* ── Data-entry grid ─────────────────────────────────────────────────────── */
.tbb-ss-grid-wrap {
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	overflow:      hidden;
	margin-bottom: .75rem;
	max-height:    380px;
	overflow-y:    auto;
}

.tbb-ss-grid-header {
	display:               grid;
	grid-template-columns: 3rem 1fr 2.5rem;
	background:            var(--tbb-bg-subtle);
	border-bottom:         2px solid var(--tbb-border);
	position:              sticky;
	top:                   0;
	z-index:               1;
}

.tbb-ss-grid-col-label {
	padding:        .5rem .75rem;
	font-size:      1.1rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color:          var(--tbb-text-muted);
}

.tbb-ss-grid-col-label:first-child {
	border-right: 1px solid var(--tbb-border);
	text-align:   center;
}

.tbb-ss-grid-row {
	display:               grid;
	grid-template-columns: 3rem 1fr 2.5rem;
	border-bottom:         1px solid var(--tbb-border);
}

.tbb-ss-grid-row:last-child {
	border-bottom: none;
}

.tbb-ss-grid-row-num {
	display:         flex;
	align-items:     center;
	justify-content: center;
	min-height:      2.5rem;
	font-size:       1.1rem;
	color:           var(--tbb-text-muted);
	background:      var(--tbb-bg-subtle);
	border-right:    1px solid var(--tbb-border);
	user-select:     none;
}

.tbb-ss-grid-cell {
	display:     block;
	width:       100%;
	box-sizing:  border-box;
	padding:     .5rem .875rem;
	font-family: var(--tbb-font-mono);
	font-size:   1.3rem;
	color:       var(--tbb-text);
	background:  var(--tbb-bg);
	border:      none;
	outline:     none;
}

.tbb-ss-grid-cell:focus {
	background: var(--tbb-primary-light);
	box-shadow: inset 0 0 0 2px var(--tbb-primary);
}

/* ── Delete-row button ───────────────────────────────────────────────────── */
.tbb-ss-del-btn {
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           100%;
	min-height:      2.5rem;
	background:      none;
	border:          none;
	cursor:          pointer;
	color:           var(--tbb-text-muted);
	font-size:       1.5rem;
	line-height:     1;
	padding:         0;
	transition:      color .15s, background .15s;
}

.tbb-ss-del-btn:hover {
	color:      #dc3545;
	background: #fff0f0;
}

/* ── Grid footer (add-rows + hint) ───────────────────────────────────────── */
.tbb-ss-grid-footer {
	display:       flex;
	align-items:   center;
	gap:           1rem;
	margin-bottom: 1.25rem;
}

.tbb-ss-grid-footer .tbb-bs-btn {
	flex-shrink: 0;
	padding:     .45rem 1rem;
	font-size:   1.2rem;
}

.tbb-ss-grid-hint {
	font-size:  1.2rem;
	color:      var(--tbb-text-muted);
	font-style: italic;
}

/* ── Section labels inside the stats output grid ─────────────────────────── */
.tbb-ss-group-label {
	grid-column:    1 / -1;
	font-size:      1.1rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color:          var(--tbb-text-muted);
	padding-bottom: .375rem;
	border-bottom:  1px solid var(--tbb-border);
	margin-top:     .5rem;
}

.tbb-ss-group-label:first-child {
	margin-top: 0;
}

/* ── Mode value — smaller font when multi-modal ─────────────────────────── */
.tbb-bs-stat-card--multimode .tbb-bs-stat-value {
	font-size:   1.3rem;
	line-height: 1.4;
	word-break:  break-word;
}

/* ── N/A stat card ───────────────────────────────────────────────────────── */
.tbb-bs-stat-card--na .tbb-bs-stat-value {
	color:     var(--tbb-text-muted);
	font-size: 1.5rem;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-ss-grid-wrap { max-height: 300px; }
}