/* ==========================================================================
   ThermometerGuru — tools.css
   Engagement micro-app styles (quiz, calculators, etc.)
   ========================================================================== */

.tmg-tool { padding: 28px; margin-bottom: 24px; }
.tmg-tool-head { display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: center; margin-bottom: 18px; }
.tmg-tool-glyph {
	display: inline-grid; place-items: center;
	width: 56px; height: 56px; border-radius: 14px;
	background: linear-gradient(135deg, var(--tmg-primary), var(--tmg-accent));
	color: #fff; grid-row: span 2;
}
.tmg-tool-name { margin: 0; font-size: 1.4rem; }
.tmg-tool-desc { color: var(--tmg-muted); margin: 0; }

.tmg-tool-body { display: grid; gap: 16px; }
.tmg-tool-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ----- Quiz ----- */
.tmg-quiz-step { display: grid; gap: 16px; }
.tmg-quiz-q { font-size: 1.1rem; font-weight: 600; }
.tmg-quiz-options { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tmg-quiz-option {
	display: flex; align-items: center; gap: 10px;
	padding: 14px; background: var(--tmg-surface-2);
	border-radius: 12px; border: 2px solid transparent;
	cursor: pointer; text-align: left;
	transition: border-color .2s ease, transform .15s ease, background .2s ease;
	color: var(--tmg-text);
}
.tmg-quiz-option:hover { transform: translateY(-2px); border-color: var(--tmg-primary); }
.tmg-quiz-option.is-on { border-color: var(--tmg-cta); background: rgba(249,115,22,.08); }
.tmg-quiz-progress { display: flex; gap: 4px; }
.tmg-quiz-progress span { flex: 1; height: 4px; background: var(--tmg-surface-2); border-radius: 999px; }
.tmg-quiz-progress span.is-done { background: linear-gradient(90deg, var(--tmg-primary), var(--tmg-cta)); }
.tmg-quiz-result {
	background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(20,184,166,.06));
	padding: 20px; border-radius: 12px;
}
.tmg-quiz-result h4 { margin: 0 0 8px; font-size: 1.1rem; color: var(--tmg-cta); }
.tmg-quiz-result-meta { color: var(--tmg-muted); margin-bottom: 10px; font-size: .9rem; }

/* ----- Calculator inputs ----- */
.tmg-tool-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tmg-tool-field { display: grid; gap: 4px; font-size: .82rem; color: var(--tmg-muted); text-transform: uppercase; letter-spacing: .1em; }
.tmg-tool-field input, .tmg-tool-field select {
	padding: 10px 12px; border: 1px solid var(--tmg-line); background: var(--tmg-surface);
	color: var(--tmg-text); border-radius: 10px; outline: none; font: inherit;
	text-transform: none; letter-spacing: 0;
}
.tmg-tool-field input:focus, .tmg-tool-field select:focus { border-color: var(--tmg-primary); box-shadow: 0 0 0 4px rgba(14,165,233,.15); }

/* ----- Output / number ticker ----- */
.tmg-tool-output {
	background: var(--tmg-surface-2); padding: 18px; border-radius: 12px;
	display: grid; gap: 8px;
}
.tmg-tool-output-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tmg-tool-output-key { font-size: .82rem; color: var(--tmg-muted); text-transform: uppercase; letter-spacing: .1em; }
.tmg-tool-output-val { font-family: var(--tmg-h-font); font-size: 2.4rem; font-weight: 700; color: var(--tmg-cta); line-height: 1; }
.tmg-tool-output-foot { color: var(--tmg-muted); font-size: .9rem; }
.tmg-tool-output-row { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px dashed var(--tmg-line); }

/* ----- Checklist ----- */
.tmg-tool-checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.tmg-tool-checklist li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--tmg-surface-2); border-radius: 8px; }
.tmg-tool-checklist input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--tmg-cta); }
.tmg-tool-checklist label { flex: 1; cursor: pointer; }
.tmg-tool-checklist .is-checked label { text-decoration: line-through; color: var(--tmg-muted); }

/* ----- Compatibility / signal table ----- */
.tmg-tool-table { width: 100%; border-collapse: collapse; }
.tmg-tool-table th, .tmg-tool-table td { padding: 8px 10px; border-bottom: 1px solid var(--tmg-line); text-align: left; font-size: .92rem; }
.tmg-tool-tag { padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.tmg-tool-tag.ok { background: rgba(34,197,94,.12); color: #16a34a; }
.tmg-tool-tag.no { background: rgba(239,68,68,.12); color: #dc2626; }

/* ----- Cooking guide cards ----- */
.tmg-cook-cards { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.tmg-cook-card {
	background: linear-gradient(135deg, rgba(14,165,233,.08), rgba(249,115,22,.06));
	padding: 12px; border-radius: 10px;
	display: grid; gap: 4px; text-align: center;
}
.tmg-cook-card strong { font-size: 1.1rem; color: var(--tmg-cta); }
.tmg-cook-card span { color: var(--tmg-muted); font-size: .82rem; }

/* ----- Range slider ----- */
.tmg-tool-range { width: 100%; accent-color: var(--tmg-cta); }
.tmg-tool-range-label { display: flex; justify-content: space-between; font-size: .85rem; color: var(--tmg-muted); }

/* ----- Print mode ----- */
@media print {
	.tmg-header, .tmg-footer, .tmg-quicktools, .tmg-quicktools-dock, .tmg-mobile-cta, .tmg-disclosure { display: none !important; }
	.tmg-section-cinematic { background: #fff !important; color: #000 !important; }
}