/* AMA IELTS - the Exam Room (placement + mock): intro, preparation, live test, self-check, report screen */

.ex { display: grid; gap: 18px; color: var(--ie-text, #0f2044); }
.ex h3, .ex h4, .ex h5 { margin: 0; }
.ex-muted { color: var(--ie-dim, #5a6b82); margin: 0; }

/* ---------- Intro ---------- */
.ex-hero {
 display: flex; gap: 20px; align-items: flex-start; padding: 28px 26px; border-radius: 20px; color: #fff;
 background: radial-gradient(circle at 90% 12%, rgba(245, 200, 66, 0.22), transparent 45%), linear-gradient(135deg, #001a4d 0%, #002366 55%, #1f3f9f 100%);
 box-shadow: 0 16px 38px rgba(0, 35, 102, 0.22);
}
.ex-hero--soft { background: linear-gradient(135deg, #0b2a66, #1f3f9f); }
.ex-hero__badge { flex: 0 0 auto; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: linear-gradient(135deg, #f7d77a, #c9952a); color: #1a1206; font-size: 1.6rem; }
.ex-hero__eyebrow { margin: 0 0 6px; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: #f5c842; font-weight: 700; }
.ex-hero h3 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); line-height: 1.15; color: #fff; }
.ex-hero h3 em { font-style: normal; color: #f5c842; }
.ex-hero p:last-child { margin: 10px 0 0; color: rgba(255, 255, 255, 0.9); line-height: 1.55; max-width: 62ch; }
@media (max-width: 560px) { .ex-hero { flex-direction: column; padding: 20px; } }

.ex-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.ex-step { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: #fff; border: 1px solid var(--ie-border, #c5d4e8); }
.ex-step i { font-size: 1.25rem; color: #c9952a; margin-bottom: 2px; }
.ex-step strong { font-size: 1.05rem; color: #002366; }
.ex-step span { font-size: 0.92rem; }
.ex-step small { color: #16794a; font-weight: 600; font-size: 0.82rem; }

.ex-get, .ex-history, .ex-replay { padding: 18px; border-radius: 16px; background: #fff; border: 1px solid var(--ie-border, #c5d4e8); }
.ex-get h4, .ex-history h4, .ex-replay h4 { color: #002366; font-size: 1.05rem; margin-bottom: 10px; }
.ex-get h4 i, .ex-history h4 i, .ex-replay h4 i { color: #c9952a; margin-right: 4px; }
.ex-get ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; line-height: 1.5; }
.ex-get b { color: #002366; }
.ex-tips { display: grid; gap: 6px; padding: 12px 16px; border-radius: 14px; background: #f3f6fc; }
.ex-tips p { margin: 0; font-size: 0.92rem; color: #33445f; }
.ex-tips i { width: 20px; color: #1f4fa8; }
.ex-start { justify-self: start; }

.ex-history { display: grid; gap: 8px; }
.ex-history__row {
 display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
 padding: 10px 12px; border-radius: 12px; border: 1px solid #e3e8f2; background: #fafbfe; font: inherit; color: inherit;
}
.ex-history__row:hover { border-color: #c9952a; }
.ex-history__row > span:nth-child(2) { flex: 1; display: grid; }
.ex-history__row small { color: var(--ie-dim, #5a6b82); }
.ex-history__band { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: #002366; color: #f5c842; font-weight: 800; font-size: 1.05rem; }

/* ---------- Preparation / processing ---------- */
.ex-prep { display: grid; justify-items: center; gap: 14px; max-width: 560px; margin: 0 auto; padding: 30px 24px; border-radius: 22px; background: #fff; border: 1px solid var(--ie-border, #c5d4e8); text-align: center; box-shadow: 0 14px 36px rgba(0, 35, 102, 0.1); }
.ex-prep h3 { color: #002366; font-size: 1.4rem; }
.ex-prep__bar, .ex-mic__bar, .ex-live__bar { width: 100%; height: 8px; border-radius: 999px; background: #e9eef7; overflow: hidden; }
.ex-prep__bar i, .ex-mic__bar i, .ex-live__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f3f9f, #c9952a); border-radius: 999px; transition: width 0.3s ease; }
.ex-prep__n { margin: 0; font-variant-numeric: tabular-nums; color: var(--ie-dim, #5a6b82); font-size: 0.9rem; }
.ex-mic { width: 100%; display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #f6f8fc; text-align: left; }
.ex-mic h5 { color: #002366; font-size: 0.98rem; }
.ex-mic__bar i { background: linear-gradient(90deg, #16794a, #7cc79b); transition: width 0.08s linear; }
.ex-mic__msg { margin: 0; font-size: 0.9rem; min-height: 1.3em; color: #33445f; }
.ex-mic__msg .fa-circle-check { color: #16794a; }
.ex-work { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; text-align: left; }
.ex-work li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: #f6f8fc; color: #8592a6; transition: background 0.2s ease, color 0.2s ease; }
.ex-work li b { margin-left: auto; font-variant-numeric: tabular-nums; }
.ex-work li.is-on { background: #fff7e0; color: #5a4a1a; }
.ex-work li.is-on i { animation: ex-pulse 1.2s ease-in-out infinite; color: #c9952a; }
.ex-work li.is-done { background: #eaf6ef; color: #135f3b; }

/* ---------- Examiner avatar ---------- */
.ex-avatar { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, #002366, #1f3f9f); border: 3px solid #f5c842; color: #f5c842; box-shadow: 0 8px 20px rgba(0, 35, 102, 0.25); }
.ex-avatar span { font-size: 1.6rem; font-weight: 700; font-family: 'Times New Roman', Times, serif; }
.ex-avatar--lg { width: 92px; height: 92px; }
.ex-avatar--lg span { font-size: 2.3rem; }
.ex-avatar.is-writing { animation: ex-breathe 2s ease-in-out infinite; }
.ex-avatar__wave { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); display: none; gap: 2px; align-items: flex-end; height: 14px; padding: 2px 5px; border-radius: 999px; background: #c9952a; }
.ex-avatar__wave b { display: block; width: 3px; height: 4px; border-radius: 2px; background: #fff; animation: ex-wave 0.9s ease-in-out infinite; }
.ex-avatar__wave b:nth-child(2) { animation-delay: 0.15s; }
.ex-avatar__wave b:nth-child(3) { animation-delay: 0.3s; }
.ex-avatar__wave b:nth-child(4) { animation-delay: 0.45s; }
.ex-examiner.is-speaking .ex-avatar__wave { display: inline-flex; }
.ex-examiner.is-speaking .ex-avatar { box-shadow: 0 0 0 6px rgba(245, 200, 66, 0.25), 0 8px 20px rgba(0, 35, 102, 0.25); }
@keyframes ex-wave { 0%, 100% { height: 3px; } 50% { height: 10px; } }
@keyframes ex-breathe { 50% { transform: scale(1.05); } }
@keyframes ex-pulse { 50% { opacity: 0.35; } }

/* ---------- Live test ---------- */
.ex--live { max-width: 820px; margin: 0 auto; width: 100%; }
.ex-live__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ex-live__rec { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: #fdecec; color: #b3161d; font-weight: 800; font-size: 0.85rem; letter-spacing: 0.04em; }
.ex-live__rec i { font-size: 0.6rem; animation: ex-pulse 1.2s ease-in-out infinite; }
.ex-live__rec b { font-variant-numeric: tabular-nums; color: #0f2044; }
.ex-live__label { flex: 1; font-weight: 700; color: #002366; }
.ex-live__stage { display: grid; gap: 16px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--ie-border, #c5d4e8); box-shadow: 0 14px 36px rgba(0, 35, 102, 0.08); min-height: 260px; align-content: start; }
.ex-live__mic { display: flex; align-items: center; gap: 10px; color: var(--ie-dim, #5a6b82); font-size: 0.9rem; }
.ex-live__mic > span { flex: 0 1 200px; height: 6px; border-radius: 999px; background: #e9eef7; overflow: hidden; }
.ex-live__mic > span i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #16794a, #7cc79b); transition: width 0.08s linear; }

.ex-examiner { display: flex; align-items: flex-start; gap: 14px; }
.ex-bubble { position: relative; flex: 1; padding: 14px 18px; border-radius: 4px 18px 18px 18px; background: #f3f6fc; border: 1px solid #dfe6f3; }
.ex-bubble small { display: block; font-size: 0.76rem; font-weight: 700; color: #c9952a; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.ex-bubble p { margin: 0; font-size: 1.12rem; line-height: 1.5; color: #0f2044; }
.ex-bubble em { color: var(--ie-dim, #5a6b82); }

.ex-answer { display: grid; justify-items: center; gap: 6px; padding: 16px; border-radius: 16px; background: #fafbfe; border: 1px dashed #d3ddef; text-align: center; }
.ex-clock { font-size: 2.6rem; line-height: 1; font-variant-numeric: tabular-nums; color: #002366; font-weight: 700; transition: color 0.3s ease; }
.ex-clock.is-early { color: #b07d12; }
.ex-clock.is-zone { color: #16794a; }
.ex-clock.is-over { color: #c8262e; }
.ex-zone { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: #eaf6ef; color: #16794a; font-weight: 700; }
.ex-status { color: var(--ie-dim, #5a6b82); min-height: 1.2em; }
.ex-answer__btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

.ex-cue { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ex-cuecard { display: grid; gap: 6px; padding: 18px; border-radius: 14px; background: #fffdf6; border: 1px solid #e6d7ae; box-shadow: 0 6px 18px rgba(201, 149, 42, 0.12); }
.ex-cuecard strong { font-size: 1.1rem; color: #0f2044; line-height: 1.35; }
.ex-cuecard span { font-size: 0.88rem; color: var(--ie-dim, #5a6b82); }
.ex-cuecard ul { margin: 0; padding-left: 20px; display: grid; gap: 3px; }
.ex-prep2 { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 14px; border-radius: 14px; background: #f6f8fc; }
.ex-prep2 small { color: var(--ie-dim, #5a6b82); }
.ex-prep2 textarea { width: 100%; box-sizing: border-box; min-height: 110px; font: inherit; padding: 10px; border-radius: 10px; border: 1px solid #d3ddef; resize: vertical; }
.ex-bmprr { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.ex-bmprr .mt-tick { background: color-mix(in srgb, var(--k) 10%, #fff); color: var(--k); border-color: color-mix(in srgb, var(--k) 30%, transparent); }
.ex-notes-view { padding: 12px 14px; border-radius: 12px; background: #fff7e0; color: #5a4a1a; white-space: pre-wrap; font-size: 0.95rem; line-height: 1.5; }
.ex-notes-view i { color: #c9952a; margin-right: 4px; }
@media (max-width: 680px) { .ex-cue { grid-template-columns: 1fr; } .ex-live__stage { padding: 16px; } }

/* ---------- Self-check ---------- */
.ex-audio { width: 100%; }
.ex-self { padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--ie-border, #c5d4e8); }
.ex-self p { margin: 0 0 10px; font-weight: 600; }
.ex-self__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ex-self__opts button { font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 12px; border: 1px solid #d3ddef; background: #fafbfe; color: #23365a; }
.ex-self__opts button:hover { border-color: #c9952a; }
.ex-self__opts button.is-on { background: #002366; color: #fff; border-color: #002366; }
.ex-self__go { justify-self: start; }

/* ---------- Report screen ---------- */
body.ama-ielts-exam-session .view--ielts > .ielts-hero,
body.ama-ielts-exam-session .view--ielts .ielts-tabs {
 display: none;
}
body.ama-ielts-exam-session .view--ielts .ielts-wrap {
 padding-top: 8px;
}
.ex--report {
 scroll-margin-top: 72px;
 padding-bottom: 40px;
}
.ex--report #rp-view .rp-head {
 scroll-margin-top: 72px;
}
.ex-report__bar { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-weight: 600; color: #002366; }
.ex-name input { flex: 1 1 220px; max-width: 360px; font: inherit; padding: 8px 12px; border-radius: 10px; border: 1px solid #d3ddef; }
.ex-replay audio { width: 100%; margin-bottom: 8px; }

.ex-ears { width: 100%; display: grid; gap: 8px; padding: 14px; border-radius: 14px; background: #f3f6fd; border: 1px solid #dfe6f5; text-align: left; margin-top: 10px; }
.ex-ears h5 { color: #002366; font-size: 0.98rem; margin: 0; }
.ex-ears h5 i { color: #c9952a; margin-right: 4px; }
.ex-ears__msg { margin: 0; font-size: 0.9rem; min-height: 1.3em; color: #33445f; }
.ex-ears__msg .fa-circle-check { color: #16794a; }
.ex-ears__bar { width: 100%; height: 8px; border-radius: 999px; background: #e9eef7; overflow: hidden; }
.ex-ears__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #1f3f9f, #c9952a); border-radius: 999px; transition: width 0.3s ease; }