.tesol-africa-training-root,
.tesol-africa-training-root * { box-sizing: border-box; }
.tesol-africa-training-root {
  --tat-navy: #071f45;
  --tat-blue: #0b3d73;
  --tat-gold: #d9a521;
  --tat-gold-soft: #fff5d6;
  --tat-ink: #152238;
  --tat-muted: #64748b;
  --tat-bg: #f5f7fb;
  --tat-card: #ffffff;
  --tat-line: #dfe6ef;
  --tat-success: #16734a;
  --tat-danger: #b42318;
  --tat-radius: 18px;
  color: var(--tat-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--tat-bg);
  border: 1px solid var(--tat-line);
  border-radius: 24px;
  overflow: hidden;
  line-height: 1.55;
}
.tesol-africa-training-root button,
.tesol-africa-training-root input,
.tesol-africa-training-root select,
.tesol-africa-training-root textarea { font: inherit; }
.tesol-africa-training-root button { cursor: pointer; }
.tesol-africa-training-root button:focus-visible,
.tesol-africa-training-root input:focus-visible,
.tesol-africa-training-root select:focus-visible,
.tesol-africa-training-root textarea:focus-visible { outline: 3px solid rgba(217,165,33,.38); outline-offset: 2px; }
.tat-hero {
  background: linear-gradient(135deg, #061a3a 0%, #0b3d73 72%, #154f8e 100%);
  color: #fff;
  padding: 24px clamp(18px, 4vw, 42px);
  position: relative;
  overflow: hidden;
}
.tat-hero::after { content:""; position:absolute; inset:auto -80px -110px auto; width:320px; height:320px; border-radius:50%; border:56px solid rgba(217,165,33,.12); }
.tat-brand-row { display:flex; align-items:center; justify-content:space-between; gap:18px; position:relative; z-index:1; }
.tat-brand-primary { display:flex; align-items:center; gap:18px; min-width:0; }
.tat-logo-tesol { width:104px; max-height:84px; object-fit:contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.24)); }
.tat-logo-wesco { width:230px; max-width:34vw; max-height:66px; object-fit:contain; background:#fff; border-radius:10px; padding:5px 8px; }
.tat-kicker { color:#ffe59c; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:0 0 4px; }
.tat-hero h1 { color:#fff; font-size:clamp(1.45rem,3vw,2.35rem); line-height:1.12; margin:0; }
.tat-hero p { margin:7px 0 0; color:#dbeafe; max-width:720px; }
.tat-hero-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; position:relative; z-index:1; }
.tat-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:7px 11px; font-size:.82rem; font-weight:700; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); color:#fff; }
.tat-course-progress { margin-top:18px; position:relative; z-index:1; }
.tat-progress-label { display:flex; justify-content:space-between; gap:12px; font-size:.82rem; color:#e2e8f0; margin-bottom:7px; }
.tat-progress-track { height:10px; border-radius:999px; background:rgba(255,255,255,.16); overflow:hidden; }
.tat-progress-fill { height:100%; width:0; background:linear-gradient(90deg,#f4c542,#ffd976); border-radius:inherit; transition:width .3s ease; }
.tat-mobile-menu { display:none; margin-top:16px; width:100%; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.1); color:#fff; padding:10px 14px; border-radius:12px; font-weight:800; }
.tat-layout { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:820px; }
.tat-sidebar { background:#fff; border-right:1px solid var(--tat-line); padding:18px 14px 28px; }
.tat-search { width:100%; border:1px solid var(--tat-line); border-radius:12px; padding:11px 12px; color:var(--tat-ink); background:#fff; }
.tat-section { margin-top:18px; }
.tat-section-title { display:flex; align-items:center; gap:9px; padding:7px 8px; color:var(--tat-navy); font-size:.85rem; font-weight:900; text-transform:uppercase; letter-spacing:.055em; }
.tat-section-letter { display:grid; place-items:center; width:26px; height:26px; border-radius:8px; color:#fff; background:var(--tat-navy); }
.tat-unit-list { display:grid; gap:5px; margin-top:5px; }
.tat-unit-btn { width:100%; text-align:left; border:0; background:transparent; color:#34435a; padding:9px 10px; border-radius:10px; display:grid; grid-template-columns:30px minmax(0,1fr) 18px; gap:7px; align-items:start; }
.tat-unit-btn:hover { background:#f1f5f9; }
.tat-unit-btn.is-active { background:#fff5d6; color:var(--tat-navy); font-weight:800; box-shadow:inset 3px 0 var(--tat-gold); }
.tat-unit-number { display:grid; place-items:center; min-width:28px; height:28px; border-radius:8px; background:#edf2f7; font-weight:800; font-size:.8rem; }
.tat-unit-btn.is-active .tat-unit-number { background:var(--tat-gold); color:#172033; }
.tat-unit-check { color:var(--tat-success); font-weight:900; }
.tat-main { min-width:0; padding:clamp(18px,3.8vw,44px); }
.tat-unit-header { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:start; }
.tat-overline { margin:0 0 5px; color:var(--tat-blue); font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.08em; }
.tat-unit-header h2 { margin:0; font-size:clamp(1.55rem,3vw,2.35rem); line-height:1.16; color:var(--tat-navy); }
.tat-unit-summary { margin:10px 0 0; max-width:850px; color:#53627a; }
.tat-time-badge { white-space:nowrap; padding:9px 12px; border-radius:999px; background:#eaf2ff; color:var(--tat-blue); font-weight:800; font-size:.84rem; }
.tat-outcomes { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; margin:22px 0; }
.tat-outcome { border:1px solid var(--tat-line); background:#fff; border-radius:14px; padding:12px; font-size:.84rem; color:#41516a; }
.tat-outcome strong { display:block; color:var(--tat-navy); margin-bottom:4px; }
.tat-tabs { display:flex; flex-wrap:wrap; gap:7px; border-bottom:1px solid var(--tat-line); padding-bottom:10px; margin-bottom:22px; }
.tat-tab { border:1px solid var(--tat-line); background:#fff; color:#44546d; padding:10px 14px; border-radius:11px; font-weight:800; }
.tat-tab.is-active { background:var(--tat-navy); border-color:var(--tat-navy); color:#fff; }
.tat-panel[hidden] { display:none !important; }
.tat-grid-2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.tat-card { background:#fff; border:1px solid var(--tat-line); border-radius:var(--tat-radius); padding:20px; }
.tat-card h3 { margin:0 0 10px; color:var(--tat-navy); font-size:1.08rem; }
.tat-card h4 { margin:0 0 7px; color:var(--tat-navy); }
.tat-card p:last-child { margin-bottom:0; }
.tat-callout { background:var(--tat-gold-soft); border:1px solid #f1d37d; border-left:5px solid var(--tat-gold); border-radius:14px; padding:16px; }
.tat-callout strong { color:var(--tat-navy); }
.tat-warmup-options { display:flex; flex-wrap:wrap; gap:9px; margin-top:12px; }
.tat-choice-btn { border:1px solid var(--tat-line); background:#fff; color:#34435a; padding:9px 12px; border-radius:11px; font-weight:700; }
.tat-choice-btn:hover,.tat-choice-btn.is-selected { border-color:var(--tat-gold); background:var(--tat-gold-soft); color:var(--tat-navy); }
.tat-concepts { display:grid; gap:11px; margin-top:16px; }
.tat-concept { border:1px solid var(--tat-line); border-radius:14px; background:#fff; overflow:hidden; }
.tat-concept button { width:100%; text-align:left; border:0; background:#fff; color:var(--tat-navy); padding:15px 16px; display:flex; justify-content:space-between; gap:12px; font-weight:850; }
.tat-concept-body { padding:0 16px 16px; color:#53627a; }
.tat-model-flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.tat-step { border:1px solid var(--tat-line); border-radius:13px; padding:13px; background:#f8fafc; }
.tat-step b { color:var(--tat-blue); display:block; margin-bottom:4px; }
.tat-feedback { margin-top:12px; min-height:24px; font-weight:750; }
.tat-feedback.good { color:var(--tat-success); }
.tat-feedback.bad { color:var(--tat-danger); }
.tat-primary,.tat-secondary,.tat-danger-btn { border-radius:11px; padding:10px 14px; font-weight:850; }
.tat-primary { border:1px solid var(--tat-navy); background:var(--tat-navy); color:#fff; }
.tat-primary:hover { background:#0d3567; }
.tat-secondary { border:1px solid var(--tat-line); background:#fff; color:#32435c; }
.tat-secondary:hover { background:#f8fafc; }
.tat-danger-btn { border:1px solid #f3c6c2; background:#fff4f2; color:var(--tat-danger); }
.tat-button-row { display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-top:14px; }
.tat-radio-list { display:grid; gap:9px; margin-top:12px; }
.tat-radio { display:flex; gap:9px; align-items:flex-start; border:1px solid var(--tat-line); background:#fff; border-radius:12px; padding:11px 12px; }
.tat-radio input { margin-top:4px; }
.tat-sequence { display:grid; gap:8px; margin-top:12px; }
.tat-sequence-row { display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center; border:1px solid var(--tat-line); border-radius:12px; background:#fff; padding:10px 11px; }
.tat-sequence-actions { display:flex; gap:5px; }
.tat-icon-btn { width:34px; height:34px; border:1px solid var(--tat-line); background:#fff; border-radius:9px; color:var(--tat-navy); font-weight:900; }
.tat-field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.tat-field label { display:block; font-weight:800; font-size:.88rem; color:#34435a; margin-bottom:5px; }
.tat-field input,.tat-field select,.tat-field textarea { width:100%; border:1px solid #cfd8e5; border-radius:11px; padding:10px 11px; background:#fff; color:#172033; }
.tat-field textarea { min-height:160px; resize:vertical; }
.tat-consent { display:flex; gap:9px; align-items:flex-start; margin-top:13px; }
.tat-consent input { margin-top:5px; }
.tat-quiz-shell { margin-top:16px; }
.tat-quiz-top { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.tat-quiz-progress { flex:1; height:9px; border-radius:999px; background:#e9eef5; overflow:hidden; }
.tat-quiz-progress span { display:block; height:100%; background:var(--tat-gold); transition:width .2s ease; }
.tat-question { background:#fff; border:1px solid var(--tat-line); border-radius:18px; padding:20px; }
.tat-question-number { color:var(--tat-blue); font-size:.82rem; font-weight:900; text-transform:uppercase; letter-spacing:.06em; }
.tat-question h3 { margin:6px 0 15px; color:var(--tat-navy); font-size:1.12rem; }
.tat-match-select { width:100%; border:1px solid #cfd8e5; border-radius:11px; padding:11px; background:#fff; }
.tat-review-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:7px; margin-top:16px; }
.tat-review-btn { border:1px solid var(--tat-line); border-radius:9px; background:#fff; padding:8px 4px; font-weight:800; color:#526176; }
.tat-review-btn.answered { background:#e9f7f0; border-color:#a9d9c3; color:#146c43; }
.tat-review-btn.current { outline:3px solid rgba(217,165,33,.35); }
.tat-result-hero { background:linear-gradient(135deg,#071f45,#0b3d73); color:#fff; border-radius:20px; padding:24px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center; }
.tat-score-ring { width:118px; height:118px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(var(--tat-gold) var(--score),rgba(255,255,255,.18) 0); position:relative; }
.tat-score-ring::after { content:""; position:absolute; inset:10px; border-radius:50%; background:#08234b; }
.tat-score-ring span { position:relative; z-index:1; font-size:1.55rem; font-weight:950; }
.tat-result-hero h3 { color:#fff; margin:0 0 5px; font-size:1.35rem; }
.tat-result-hero p { margin:0; color:#dbeafe; }
.tat-result-details { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:14px; }
.tat-metric { border:1px solid var(--tat-line); background:#fff; border-radius:13px; padding:12px; }
.tat-metric b { display:block; color:var(--tat-navy); font-size:1.2rem; }
.tat-review-item { border:1px solid var(--tat-line); background:#fff; border-radius:13px; padding:13px; margin-top:9px; }
.tat-review-item.is-correct { border-left:5px solid var(--tat-success); }
.tat-review-item.is-wrong { border-left:5px solid var(--tat-danger); }
.tat-status { margin-top:12px; padding:11px 12px; border-radius:11px; background:#f1f5f9; color:#41516a; }
.tat-status.success { background:#e9f7f0; color:#146c43; }
.tat-status.error { background:#fff0ee; color:#9f2f26; }
.tat-resource-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.tat-resource { border:1px solid var(--tat-line); background:#fff; border-radius:13px; padding:13px; }
.tat-resource b { color:var(--tat-navy); display:block; margin-bottom:4px; }
.tat-footer-note { margin-top:24px; padding-top:16px; border-top:1px solid var(--tat-line); color:#69778c; font-size:.82rem; }
.tat-toast { position:fixed; right:22px; bottom:22px; z-index:9999; max-width:340px; border-radius:13px; padding:12px 14px; background:#071f45; color:#fff; box-shadow:0 14px 35px rgba(2,18,42,.28); display:none; }
.tat-toast.show { display:block; }
@media (max-width:1100px){ .tat-outcomes{grid-template-columns:repeat(3,minmax(0,1fr));}.tat-resource-list{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:860px){
  .tat-brand-row{align-items:flex-start}.tat-logo-wesco{display:none}.tat-mobile-menu{display:block}.tat-layout{grid-template-columns:1fr}.tat-sidebar{display:none;border-right:0;border-bottom:1px solid var(--tat-line);max-height:560px;overflow:auto}.tat-sidebar.is-open{display:block}.tat-unit-header{grid-template-columns:1fr}.tat-time-badge{justify-self:start}.tat-grid-2,.tat-field-grid{grid-template-columns:1fr}.tat-model-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.tat-result-details{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tat-hero{padding:20px 16px}.tat-brand-primary{align-items:flex-start}.tat-logo-tesol{width:74px}.tat-main{padding:18px 14px}.tat-outcomes{grid-template-columns:1fr}.tat-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.tat-tab{padding:9px 8px}.tat-model-flow{grid-template-columns:1fr}.tat-review-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.tat-result-hero{grid-template-columns:1fr;text-align:center}.tat-score-ring{margin:auto}.tat-resource-list{grid-template-columns:1fr}.tat-logo-wesco{display:none}
}

.tesol-africa-training-root .tat-loading { padding: 28px; text-align: center; color: #071f45; font-weight: 700; background: #f5f7fb; }
.tesol-africa-training-root + .tat-noscript, .tat-noscript { padding: 14px; border: 1px solid #b42318; color: #b42318; background: #fff; }