/* ==========================================================================
   TBB Lab Calculators — Common Shared Stylesheet
   Includes: CSS variables, base styling, forms, info sections
   Used by ALL calculators. Do NOT add calculator-specific styles here.
   ========================================================================== */

/* ── CSS Custom Properties ──────────────────────────────────────────────── */
:root {
	--tbb-primary:        #2563eb;
	--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-calculator {
	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;
}

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

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

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

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

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

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

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

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

.tbb-calc-textarea {
	display:       block;
	width:         100%;
	box-sizing:    border-box;
	padding:       .875rem 1.1rem;
	font-family:   var(--tbb-font-mono);
	font-size:     1.3rem;
	line-height:   1.7;
	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);
	resize:        vertical;
}

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

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

/* ── Alert / error ──────────────────────────────────────────────────────── */
.tbb-calc-alert {
	padding:       .75rem 1rem;
	border-radius: var(--tbb-radius-sm);
	font-size:     1.3rem;
	line-height:   1.5;
	margin-bottom: 1rem;
}

.tbb-calc-alert--error {
	background: var(--tbb-danger-light);
	border:     1px solid #fca5a5;
	color:      #991b1b;
}

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

.tbb-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);
}

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

.tbb-btn--primary {
	background:   var(--tbb-primary);
	color:        #fff;
	border-color: var(--tbb-primary);
}
.tbb-btn--primary:hover {
	background:   var(--tbb-primary-dark);
	border-color: var(--tbb-primary-dark);
	box-shadow:   0 2px 8px rgba(37,99,235,.3);
}

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

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

.tbb-btn--copy {
	background:   transparent;
	color:        var(--tbb-primary);
	border-color: #bfdbfe;
	padding:      .45rem 1rem;
	font-size:    1.3rem;
}
.tbb-btn--copy:hover  { background: var(--tbb-primary-light); }
.tbb-btn--copied      { background: var(--tbb-success-light); color: var(--tbb-success); border-color: #86efac; }

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

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

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

.tbb-result-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-result-card--highlight {
	background:   var(--tbb-primary-light);
	border-color: #bfdbfe;
}

/* Dynamic GC% colouring applied via JS */
.tbb-result-card--ok  { background: var(--tbb-success-light); border-color: #86efac; }
.tbb-result-card--warn { background: var(--tbb-warning-light); border-color: #fcd34d; }
.tbb-result-card--bad  { background: var(--tbb-danger-light);  border-color: #fca5a5; }

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

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

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

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

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

/* ── Information Section (Reusable in all calculators) ────────────────────── */
.tbb-calc-info {
	margin-top:    2.25rem;
	padding-top:   2rem;
	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;
}

/* Lists */
.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;
}

/* Formulas */
.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;
}

/* Interpretation */
.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);
}

/* Warnings */
.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;
}

/* FAQ */
.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:     slideDown 160ms ease-out;
}

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

/* Collapsible info sections */
.tbb-info-collapsible {
	cursor: default;
}

/*
 * The <summary> is a pure flex row wrapper.
 * It intentionally carries no text or heading styles — those live on
 * .tbb-info-collapsible-label (a real <span> child) so that whatever
 * text-align/display rules a theme applies to <summary> elements cannot
 * affect the heading text alignment.
 */
.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;
}

/* Arrow indicator — flex-shrink so it never pushes the label */
.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);
}

/*
 * Heading text lives here, not on <summary>.
 * As a real <span> flex item it is always left-aligned regardless of
 * what the theme does to the parent <summary> element.
 */
.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;
}

/* ── General Responsive ────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.tbb-calc-header  { padding: 1.75rem 1.5rem 1.5rem; }
	.tbb-calc-body    { padding: 1.5rem; }
	.tbb-calc-footer  { padding: .875rem 1.5rem; }
	.tbb-calc-title   { font-size: 1.25rem; }
	.tbb-calc-actions { flex-direction: column; }
	.tbb-btn          { width: 100%; justify-content: center; }
	.tbb-results-grid { grid-template-columns: repeat(2, 1fr); }
	.tbb-result-value { font-size: 1.3rem; }

	.tbb-info-section               { margin-bottom: 1.25rem; }
	.tbb-info-heading               { font-size: 1.3rem; }
	.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-results-grid { grid-template-columns: 1fr; }
}

/* ── Reduced-motion accessibility ───────────────────────────────────────── */
@media ( prefers-reduced-motion: reduce ) {
	/* Remove slide animation from FAQ answers */
	.tbb-info-faq-answer {
		animation: none;
	}

	/* Remove rotation transition from FAQ and collapsible arrows */
	.tbb-info-faq-question::after,
	.tbb-info-collapsible-toggle::after {
		transition: none;
	}

	/* Remove hover/focus transitions on interactive elements */
	.tbb-btn,
	.tbb-result-card,
	.tbb-calc-textarea,
	.tbb-info-faq-question,
	.tbb-info-collapsible-label {
		transition: none;
	}
}