/* AviationGrade — practise topic pages, Contrail skin.
   Loaded alongside /ag-study-v3.css (chrome + .ags-shell/.ags-tray/.ags-wrap
   + .btn + .ftr + responsive). This file only:
     - restyles the inline quiz engine's existing class names to Contrail
     - re-skins ag-result.js (.agr-*) and ag-mark.js (.agm-*) from dark to light
     - hides the old .top-nav (the left rail replaces it)
   Nothing here touches quiz logic. */

/* ---- pane container ---- */
.ags-wrap .container{max-width:none;margin:0;padding:0}
.ags-wrap .top-nav{display:none}
.ags-wrap .container > h1{
  font-family:'Outfit',-apple-system,'Segoe UI',sans-serif !important;
  font-weight:600 !important;font-size:26px !important;letter-spacing:-.02em !important;
  line-height:1.15 !important;color:var(--navy) !important;margin:0 0 4px !important}
.ags-pkick{font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:#8a97ab;margin-bottom:6px}

/* ---- progress ---- */
#progressArea,.progress-wrapper{margin:18px 0 24px}
.progress-text{margin-bottom:8px;font-size:.7rem;color:#8a97ab;font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.progress-bar{height:5px;background:var(--wash);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.progress-fill{height:100%;background:var(--orange);border-radius:999px;transition:width .3s ease}

/* ---- question card ---- */
.question-box,.result-box{background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:26px 26px 22px;box-shadow:0 18px 40px -30px rgba(3,20,52,.4)}
.question-box p:first-child{font-family:'Outfit',sans-serif;font-size:1.12rem;font-weight:600;
  line-height:1.45;color:var(--navy);margin:0 0 20px}
.question-box p:first-child strong{color:var(--orange);font-weight:700;margin-right:4px}

.option{margin:9px 0;padding:14px 16px;border:1px solid var(--line);border-radius:11px;background:#fff;
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;font-size:.95rem;line-height:1.5;color:var(--ink);
  transition:border-color .14s ease,background .14s ease}
.option:hover{border-color:var(--sky)}
.option input[type=radio]{accent-color:var(--sky);width:16px;height:16px;flex-shrink:0;margin-top:2px}
.option.opt-correct{border-color:var(--green);background:#ecf7f0;color:var(--ink)}
.option.opt-wrong{border-color:#d8463c;background:#fdeeec;color:var(--ink)}

#feedback{margin-top:16px}
#feedback .correct,#feedback .wrong{font-weight:700;font-size:.9rem;margin:0}
#feedback .correct{color:var(--green)}
#feedback .wrong{color:#d8463c}
.explanation{margin-top:10px;padding:14px 16px;border-left:3px solid var(--sky);background:#eef4fd;
  border-radius:0 10px 10px 0;color:#33455f;font-size:.86rem;line-height:1.6}

.nav-buttons{display:flex;justify-content:space-between;gap:10px;margin-top:22px}
.question-box button,.result-box button,.nav-buttons button{
  margin-top:0;padding:11px 22px;background:var(--orange);color:#fff;border:none;border-radius:2px;
  cursor:pointer;font-size:.82rem;font-weight:700;font-family:inherit;transition:background .16s ease}
.question-box button:hover,.result-box button:hover,.nav-buttons button:hover{background:#d8410c;opacity:1}
.nav-buttons button:first-child:not(:only-child){background:#fff;color:var(--muted);border:1px solid var(--line)}
.nav-buttons button:first-child:not(:only-child):hover{color:var(--navy);border-color:#c2ccdb;background:#fff}

/* ---- results (engine's own list; ag-result.js hides the h2 and forks) ---- */
.result-box h2{font-family:'Outfit',sans-serif;font-weight:600;color:var(--navy);margin:0 0 18px;font-size:1.5rem}
.result-question{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.6}
.result-question:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.result-question .correct{color:var(--green);font-weight:700}
.result-question .wrong{color:#d8463c;font-weight:700}

/* ================= ag-result.js (.agr-*) — dark to light ================= */
.agr-head{border-bottom-color:var(--line) !important}
.agr-ring .v b{color:var(--navy) !important}
.agr-ring .v span{color:#8a97ab !important}
.agr-ring svg circle:first-child{stroke:var(--line) !important}
.agr-ring svg circle:last-child{stroke:var(--orange) !important}
.agr-sum .t{color:var(--navy) !important}
.agr-sum .s{color:var(--muted) !important}
.agr-card{background:#fff !important;border-color:var(--line) !important;color:var(--ink) !important}
.agr-card:hover{border-color:var(--sky) !important}
.agr-card .k{color:var(--sky) !important}
.agr-card .n{color:var(--navy) !important}
.agr-card .d{color:var(--muted) !important}
.agr-card.pri{border-color:#f4b7a3 !important;
  background:linear-gradient(180deg,#fdeeec,#fff) !important}
.agr-card.pri .k{color:var(--orange) !important}
.agr-card.done{border-color:#bfe6cf !important;
  background:linear-gradient(180deg,#ecf7f0,#fff) !important}
.agr-card.done .k{color:var(--green) !important}
.agr-badge.best{color:var(--green) !important;background:#ecf7f0 !important;border-color:#bfe6cf !important}
.agr-badge.first{color:#8a97ab !important;background:var(--wash) !important;border-color:var(--line) !important}
.agr-rt .lbl{color:var(--orange) !important}
.agr-rt .ct{color:#8a97ab !important}
.agr-link{color:var(--sky) !important}
.agr-link:hover{color:#1f6fd0 !important}

/* ================= ag-mark.js (.agm-*) — dark to light ================= */
.agm-row{margin:0 0 16px !important}
.agm-btn{background:#fff !important;border-color:var(--line) !important;color:var(--muted) !important;
  padding:7px 13px 7px 11px !important;font-size:.72rem !important}
.agm-btn:hover{border-color:#c2ccdb !important;color:var(--navy) !important}
.agm-btn.on{background:#fdeeec !important;border-color:#f4b7a3 !important;color:var(--orange) !important}
.agm-btn.on svg{fill:var(--orange) !important;stroke:var(--orange) !important}

/* ---- header button (practise header markup uses .btn-primary, study css defines .pri) ---- */
.hdr .btn-primary{background:var(--orange);color:#fff;border-radius:2px}
.hdr .btn-primary:hover{background:#d8410c}
.mnav-foot .btn-primary{background:var(--orange);color:#fff;border-radius:2px}

/* ---- report-error.js floating button, dark to light ---- */
#agReportBtn,.ag-report-btn,[id^="report-err"]{
  background:#fff !important;border:1px solid var(--line) !important;color:#8a97ab !important}
#agReportBtn:hover,.ag-report-btn:hover{color:#d8463c !important;border-color:#f4b7a3 !important}

/* ---- rail extras ---- */
.ags-tray .ags-chap em{display:block;font-size:.66rem;color:#8a97ab;font-weight:400;margin-top:2px}
.ags-tray .ags-chap.now em{color:var(--orange)}

@media(max-width:900px){
  .question-box,.result-box{padding:20px 18px 18px}
}