/**
 * Interactive Test engine (Phase 1) — single-scroll student tests.
 * Same brand family as the rest of the site (navy/green/gold), plus
 * violet for Reading — already the established "Reading" accent from
 * the Smart English Worksheets color system — and gold-deep for
 * Writing, so a student learns to associate colors with skills.
 * Loaded only on template-interactive-test.php.
 *
 * @package MyTeacher_Child
 */

.mt-test-page{
	--t-navy:#213A47; --t-navy-deep:#152A34;
	--t-green:#0E9A6E; --t-green-deep:#0A7A56; --t-green-tint:#E4F3EC;
	--t-gold:#E0A93F; --t-gold-deep:#C8902A; --t-gold-tint:#FBF1DA;
	--t-violet:#7A5A96; --t-violet-tint:#F1ECF6;
	--t-red:#C24E4E; --t-red-tint:#FBEAEA;
	--t-paper:#FCFBF7; --t-line:#E4E1D6; --t-ink:#2B3A40; --t-ink-soft:#5E6E73;
	font-family:'Nunito',sans-serif; background:var(--t-paper); color:var(--t-ink);
}
.mt-test-page h1,.mt-test-page h2,.mt-test-page h3,.mt-test-page h4{
	font-family:'Poppins',sans-serif; font-weight:700; margin:0; color:var(--t-navy);
}
.mt-test-wrap{ max-width:640px; margin:0 auto; padding:0 0 60px; }

/* ---------------- INTRO ---------------- */
.mt-test-topbar{
	padding:22px 20px 4px; display:flex; align-items:center; justify-content:space-between;
}
.mt-test-title strong{ display:block; font-family:'Poppins',sans-serif; font-weight:800; font-size:1.15rem; color:var(--t-navy); }
.mt-test-title span{ display:block; font-size:.72rem; font-weight:700; color:var(--t-ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }
.mt-test-title small{ display:block; font-size:.76rem; color:var(--t-ink-soft); margin-top:2px; }
.mt-test-intro{ padding:10px 20px 4px; }
.mt-test-intro p{ font-size:.87rem; color:var(--t-ink-soft); line-height:1.6; margin:0; }

/* ---------------- SECTION DIVIDERS ---------------- */
.mt-test-zone-divider{ display:flex; align-items:center; gap:10px; margin:28px 20px 14px; }
.mt-test-zone-badge{
	display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:800;
	padding:7px 14px; border-radius:999px; white-space:nowrap;
}
.mt-test-zone-reading{ background:var(--t-violet-tint); color:var(--t-violet); }
.mt-test-zone-language{ background:var(--t-green-tint); color:var(--t-green-deep); }
.mt-test-zone-writing{ background:var(--t-gold-tint); color:var(--t-gold-deep); }
.mt-test-zone-line{ flex:1; height:1px; background:var(--t-line); }

/* ---------------- QUESTION CARDS ---------------- */
.mt-test-qlist{ padding:0 20px; display:flex; flex-direction:column; gap:14px; }
.mt-test-q{ background:#fff; border:1px solid var(--t-line); border-radius:14px; padding:18px 17px; }
.mt-test-qnum{ font-size:.68rem; font-weight:800; color:var(--t-ink-soft); text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.mt-test-qprompt{ font-size:.96rem; font-weight:700; color:var(--t-navy); line-height:1.5; margin:0 0 14px; }
.mt-test-qchoices{ display:flex; flex-direction:column; gap:9px; }
.mt-test-choice{
	text-align:left; background:var(--t-paper); border:1.5px solid var(--t-line); border-radius:10px;
	padding:11px 13px; font-family:'Nunito',sans-serif; font-size:.88rem; font-weight:700; color:var(--t-ink);
	cursor:pointer; transition:all .12s ease;
}
.mt-test-choice:hover{ border-color:var(--t-green); }
.mt-test-choice.is-correct{ background:var(--t-green-tint); border-color:var(--t-green); color:var(--t-green-deep); }
.mt-test-choice.is-wrong{ background:var(--t-red-tint); border-color:var(--t-red); color:var(--t-red); }
.mt-test-choice[disabled]{ cursor:default; }

.mt-test-fb{ display:none; margin-top:12px; border-radius:9px; padding:11px 13px; font-size:.82rem; line-height:1.5; }
.mt-test-fb.show{ display:block; }
.mt-test-fb.is-correct{ background:var(--t-green-tint); color:var(--t-green-deep); }
.mt-test-fb.is-wrong{ background:var(--t-red-tint); color:var(--t-red); }
.mt-test-verdict{ font-weight:800; margin-bottom:3px; }

/* ---------------- READING PASSAGE ---------------- */
.mt-test-passage{
	background:var(--t-navy-deep); color:rgba(255,255,255,.92); border-radius:14px;
	padding:20px 19px; margin:0 20px 16px;
}
.mt-test-passage-eyebrow{ font-size:.68rem; font-weight:800; color:var(--t-gold); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; }
.mt-test-passage-title{ color:#fff; font-size:1.02rem; margin-bottom:10px; }
.mt-test-passage-text{ font-size:.87rem; line-height:1.75; color:rgba(255,255,255,.82); }
.mt-test-passage-text p{ margin:0 0 12px; }
.mt-test-passage-text p:last-child{ margin-bottom:0; }

/* ---------------- WRITING ---------------- */
.mt-test-writing{ padding:0 20px; }
.mt-test-writing-prompt{
	background:var(--t-gold-tint); border:1px solid #EBD8A9; border-radius:14px;
	padding:16px 17px; margin-bottom:14px;
}
.mt-test-writing-eyebrow{ font-size:.7rem; font-weight:800; color:var(--t-gold-deep); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.mt-test-writing-text{ font-size:.9rem; font-weight:700; color:var(--t-navy); line-height:1.5; }
.mt-test-writing-box{
	width:100%; min-height:150px; border:1.5px solid var(--t-line); border-radius:12px; padding:14px;
	font-family:'Nunito',sans-serif; font-size:.88rem; line-height:1.6; color:var(--t-ink); resize:vertical;
}
.mt-test-writing-box:focus{ outline:none; border-color:var(--t-green); }
.mt-test-writing-meta{ display:flex; justify-content:space-between; font-size:.74rem; color:var(--t-ink-soft); margin:8px 0 16px; }

.mt-test-model-panel{ display:none; margin-top:14px; }
.mt-test-model-panel.show{ display:block; }
.mt-test-model-card{ background:#fff; border:1.5px dashed var(--t-green); border-radius:14px; padding:16px 17px; margin-bottom:14px; }
.mt-test-model-card h4{ font-size:.83rem; color:var(--t-green-deep); margin-bottom:8px; }
.mt-test-model-card div{ font-size:.85rem; line-height:1.65; color:var(--t-ink); }
.mt-test-model-card p{ margin:0 0 10px; }
.mt-test-model-card p:last-child{ margin-bottom:0; }

.mt-test-checklist{ display:flex; flex-direction:column; gap:8px; margin-bottom:6px; }
.mt-test-checklist-item{ display:flex; align-items:flex-start; gap:10px; background:#fff; border:1px solid var(--t-line); border-radius:10px; padding:10px 12px; }
.mt-test-checklist-item input{ margin-top:3px; width:16px; height:16px; accent-color:var(--t-green); flex-shrink:0; }
.mt-test-checklist-item label{ font-size:.83rem; line-height:1.45; color:var(--t-ink); }
.mt-test-writing-note{ font-size:.73rem; color:var(--t-ink-soft); font-style:italic; margin-top:10px; line-height:1.5; }

/* ---------------- SCORE BAR ---------------- */
.mt-test-scorebar{ padding:26px 20px 6px; }
.mt-test-unanswered-hint{ text-align:center; font-size:.74rem; color:var(--t-gold-deep); font-weight:700; margin-bottom:10px; display:none; }
.mt-test-unanswered-hint.show{ display:block; }

.mt-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%;
	background:var(--t-green); color:#fff; border:none; border-radius:12px; padding:15px 20px;
	font-family:'Nunito',sans-serif; font-weight:800; font-size:.96rem; cursor:pointer;
	transition:transform .15s ease, background .15s ease;
}
.mt-btn:hover{ background:var(--t-green-deep); transform:translateY(-1px); }
.mt-btn-outline{ background:transparent; border:2px solid var(--t-line); color:var(--t-navy); }
.mt-btn-outline:hover{ background:var(--t-green-tint); border-color:var(--t-green); transform:none; }

/* ---------------- RESULTS ---------------- */
.mt-test-results{ display:none; padding:30px 22px 10px; text-align:center; }
.mt-test-results.show{ display:block; }
.mt-test-results-ring{ width:140px; height:140px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; }
.mt-test-results-ring-inner{ width:112px; height:112px; border-radius:50%; background:var(--t-paper); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mt-test-results-ring-inner b{ font-size:1.4rem; color:var(--t-navy); font-family:'Poppins',sans-serif; }
.mt-test-results-ring-inner small{ font-size:.62rem; color:var(--t-ink-soft); font-weight:700; letter-spacing:.05em; }
.mt-test-results-title{ font-size:1.2rem; margin-bottom:6px; }
.mt-test-results-sub{ color:var(--t-ink-soft); font-size:.85rem; margin-bottom:22px; }
.mt-test-results-breakdown{ display:flex; flex-direction:column; gap:9px; margin-bottom:22px; text-align:left; }
.mt-test-rb-row{ display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--t-line); border-radius:12px; padding:12px 14px; }
.mt-test-rb-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; }
.mt-test-rb-label{ flex:1; font-weight:700; font-size:.84rem; color:var(--t-navy); }
.mt-test-rb-label small{ display:block; font-weight:600; color:var(--t-ink-soft); font-size:.7rem; margin-top:1px; }
.mt-test-rb-score{ font-family:'Poppins',sans-serif; font-weight:700; font-size:.9rem; color:var(--t-navy); }
.mt-test-rb-score.pending{ color:var(--t-gold-deep); font-size:.75rem; font-weight:800; }

/* Once results are shown, hide the score button (retry button takes over). */
.mt-test-wrap.is-finished .mt-test-scorebar{ display:none; }

/* ---------------- RELATED TESTS ---------------- */
.mt-test-related{ background:var(--t-paper); padding:28px 20px 40px; margin-top:10px; border-top:1px solid var(--t-line); }
.mt-test-related-title{ font-size:1rem; margin:0 0 14px; color:var(--t-navy); }
.mt-test-related-list{ display:flex; flex-direction:column; gap:10px; }
.mt-test-related-item{
	display:flex; align-items:center; justify-content:space-between; gap:10px;
	background:#fff; border:1px solid var(--t-line); border-radius:12px; padding:13px 15px;
	text-decoration:none; color:var(--t-navy); font-weight:700; font-size:.9rem;
	transition:border-color .15s ease;
}
.mt-test-related-item:hover{ border-color:var(--t-green); }
.mt-test-related-item-arrow{ color:var(--t-green); flex-shrink:0; }

/* ---------------- MOBILE ---------------- */
@media (max-width: 420px){
	.mt-test-q{ padding:15px 14px; }
	.mt-test-passage{ padding:17px 15px; }
}