/* ==========================================================================
   TBB Lab Calculators — Punnett Square Calculator Stylesheet
   ========================================================================== */

/* ── Parent input blocks ─────────────────────────────────────────────────── */
.tbb-punnett-inputs-grid {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1.25rem;
	margin-bottom:         1.25rem;
}

.tbb-punnett-parent-block {
	background:    var(--tbb-bg-subtle);
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       1.25rem;
}

.tbb-punnett-parent-label {
	font-size:     1.3rem;
	font-weight:   700;
	color:         var(--tbb-text);
	margin-bottom: .875rem;
	display:       flex;
	align-items:   center;
	gap:           .4rem;
}

.tbb-punnett-parent-icon {
	font-size: 1.4rem;
	color:     var(--tbb-primary);
}

/* ── Radio buttons ───────────────────────────────────────────────────────── */
.tbb-punnett-radios {
	display:     flex;
	gap:         .5rem;
	flex-wrap:   wrap;
}

.tbb-punnett-radio-label {
	display:       inline-flex;
	align-items:   center;
	gap:           .35rem;
	padding:       .45rem .9rem;
	border:        1.5px solid var(--tbb-border);
	border-radius: 6px;
	cursor:        pointer;
	font-size:     1.3rem;
	font-weight:   600;
	color:         var(--tbb-text);
	background:    var(--tbb-bg);
	transition:    border-color var(--tbb-transition), background var(--tbb-transition),
	               color var(--tbb-transition);
	user-select:   none;
}

.tbb-punnett-radio-label:hover {
	border-color: var(--tbb-primary);
	color:        var(--tbb-primary);
}

.tbb-punnett-radio-label input[type="radio"] {
	display: none;
}

.tbb-punnett-radio-label:has(input[type="radio"]:checked) {
	background:   var(--tbb-primary);
	border-color: var(--tbb-primary);
	color:        #fff;
}

/* ── Custom + allele text inputs ─────────────────────────────────────────── */
.tbb-punnett-calculator .tbb-punnett-custom-input,
.tbb-punnett-calculator .tbb-punnett-allele-input {
	display:       block;
	box-sizing:    border-box;
	width:         100% !important;
	max-width:     100% !important;
	padding:       .75rem 1rem;
	font-size:     1.3rem;
	font-weight:   600;
	line-height:   1.5;
	font-family:   var(--tbb-font-mono);
	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);
	-webkit-appearance: none;
}

.tbb-punnett-calculator .tbb-punnett-custom-input:focus,
.tbb-punnett-calculator .tbb-punnett-allele-input:focus {
	outline:      none;
	border-color: var(--tbb-primary);
	box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* ── Allele row ──────────────────────────────────────────────────────────── */
.tbb-punnett-alleles-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1.25rem;
	margin-bottom:         1.25rem;
}

.tbb-punnett-alleles-row .tbb-calc-field {
	margin-bottom: 0;
}

.tbb-punnett-calculator .tbb-punnett-allele-input {
	max-width: 120px !important;
	text-align: center;
}

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

.tbb-punnett-grid-section {
	margin-bottom: 2rem;
}

.tbb-punnett-section-title {
	font-size:     1.3rem;
	font-weight:   700;
	color:         var(--tbb-text);
	margin:        0 0 1rem;
	padding-bottom:.5rem;
	border-bottom: 1px solid var(--tbb-border);
}

/* ── Punnett square grid ─────────────────────────────────────────────────── */
.tbb-punnett-grid-wrap {
	display:         flex;
	justify-content: center;
}

.tbb-punnett-grid {
	border-collapse: separate;
	border-spacing:  4px;
	font-size:       1.5rem;
	font-weight:     700;
	font-family:     var(--tbb-font-mono);
}

.tbb-punnett-corner {
	background:    transparent;
	border:        none;
	width:         56px;
	height:        56px;
	text-align:    center;
	vertical-align: middle;
	font-size:     1.1rem;
	color:         var(--tbb-text-muted);
	padding:       0;
}

.tbb-punnett-corner-female { color: #db2777; }
.tbb-punnett-corner-slash  { color: var(--tbb-text-muted); margin: 0 1px; }
.tbb-punnett-corner-male   { color: var(--tbb-primary); }

.tbb-punnett-col-head,
.tbb-punnett-row-head {
	width:         72px;
	height:        56px;
	min-width:     72px;
	text-align:    center;
	vertical-align: middle;
	background:    var(--tbb-bg-subtle);
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	color:         var(--tbb-text);
	font-size:     1.5rem;
	font-weight:   700;
	padding:       0;
}

.tbb-punnett-cell {
	width:         88px;
	height:        72px;
	min-width:     88px;
	text-align:    center;
	vertical-align: middle;
	border:        1.5px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	font-size:     1.6rem;
	font-weight:   700;
	transition:    background var(--tbb-transition), border-color var(--tbb-transition);
	padding:       0;
}

/* Cell colour coding */
.tbb-punnett-cell--homodom {
	background:   #dbeafe;
	border-color: #93c5fd;
	color:        #1d4ed8;
}
.tbb-punnett-cell--hetero {
	background:   #f0fdf4;
	border-color: #86efac;
	color:        #15803d;
}
.tbb-punnett-cell--homorec {
	background:   #fef2f2;
	border-color: #fca5a5;
	color:        #dc2626;
}

/* ── Chances cards ───────────────────────────────────────────────────────── */
.tbb-punnett-chances {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap:                   .875rem;
}

.tbb-punnett-chance-item {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	text-align:     center;
	padding:        1.25rem 1rem;
	border-radius:  var(--tbb-radius-sm);
	border:         1.5px solid var(--tbb-border);
}

.tbb-punnett-chance-item.tbb-punnett-chance--homodom {
	background:   #dbeafe;
	border-color: #93c5fd;
}
.tbb-punnett-chance-item.tbb-punnett-chance--hetero {
	background:   #f0fdf4;
	border-color: #86efac;
}
.tbb-punnett-chance-item.tbb-punnett-chance--homorec {
	background:   #fef2f2;
	border-color: #fca5a5;
}

.tbb-punnett-chance-genotype {
	font-size:   1.6rem;
	font-weight: 700;
	font-family: var(--tbb-font-mono);
	color:       var(--tbb-text);
	line-height: 1.2;
}

.tbb-punnett-chance-percent {
	font-size:   2rem;
	font-weight: 800;
	color:       var(--tbb-primary);
	margin:      .3rem 0 .25rem;
	line-height: 1.1;
}

.tbb-punnett-chance-class {
	font-size:  1.1rem;
	color:      var(--tbb-text-muted);
	line-height: 1.3;
}

/* ── Ratios ──────────────────────────────────────────────────────────────── */
.tbb-punnett-ratios {
	display:        flex;
	flex-direction: column;
	gap:            .75rem;
}

.tbb-punnett-ratio-item {
	display:       flex;
	align-items:   center;
	gap:           .75rem;
	background:    var(--tbb-bg-subtle);
	border:        1px solid var(--tbb-border);
	border-radius: var(--tbb-radius-sm);
	padding:       .875rem 1.25rem;
}

.tbb-punnett-ratio-label {
	font-size:   1.3rem;
	font-weight: 600;
	color:       var(--tbb-text-muted);
	white-space: nowrap;
}

.tbb-punnett-ratio-value {
	font-size:   1.4rem;
	font-weight: 700;
	color:       var(--tbb-text);
	font-family: var(--tbb-font-mono);
}

/* ── Genotype → Phenotype table ──────────────────────────────────────────── */
.tbb-punnett-table-wrap {
	overflow-x: auto;
}

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

.tbb-punnett-gp-table th,
.tbb-punnett-gp-table td {
	padding:      .75rem 1rem;
	text-align:   left;
	border-bottom: 1px solid var(--tbb-border);
}

.tbb-punnett-gp-table th {
	background:  var(--tbb-bg-subtle);
	font-weight: 700;
	color:       var(--tbb-text-muted);
	font-size:   1.2rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.tbb-punnett-gp-table td:first-child {
	font-family: var(--tbb-font-mono);
	font-size:   1.4rem;
}

.tbb-punnett-gp-row--homodom td { color: #1d4ed8; }
.tbb-punnett-gp-row--hetero  td { color: #15803d; }
.tbb-punnett-gp-row--homorec td { color: #dc2626; }

/* ── Chart ───────────────────────────────────────────────────────────────── */
.tbb-punnett-chart-wrap {
	max-width:  320px;
	margin:     0 auto;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media ( max-width: 560px ) {
	.tbb-punnett-inputs-grid,
	.tbb-punnett-alleles-row {
		grid-template-columns: 1fr;
	}

	.tbb-punnett-cell    { width: 68px; height: 60px; font-size: 1.3rem; }
	.tbb-punnett-col-head,
	.tbb-punnett-row-head { width: 56px; height: 48px; font-size: 1.2rem; }

	.tbb-punnett-chance-percent { font-size: 1.6rem; }

	.tbb-punnett-calculator .tbb-punnett-allele-input {
		max-width: 100% !important;
	}
}