/* Tambahan khusus Matematik.
   Dimuatkan selepas <style> dalam index.html, jadi peraturan di sini menang
   apabila kekhususan sama. Disimpan berasingan supaya index.html kekal
   sedekat mungkin dengan teras Jejak TP Sains. */

/* ---- Warna: amber untuk jawapan belum tepat, emas untuk bos ----
   Merah pada konteks pencapaian dikaitkan dengan keresahan dan prestasi yang
   lebih rendah, dan Matematik ialah subjek yang paling dikaitkan dengan
   kebimbangan. Jawapan salah ialah peluang belajar, bukan bahaya. */
body.zon-murid{--silap:#E9902A;--silap-lembut:#FFF0D9}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body.zon-murid{--silap:#F0A64B;--silap-lembut:#3B2A12}}
:root[data-theme="dark"] body.zon-murid{--silap:#F0A64B;--silap-lembut:#3B2A12}
#murid .opt[data-mark="no"]{border-color:var(--silap)}
#murid .opt[data-mark="no"] .key{background:var(--silap);color:#1C1B3A;border-color:var(--silap)}
/* Bar kemajuan: corak jalur (bukan warna sahaja) bagi jawapan yang belum tepat */
#murid .pip.no{background-color:var(--silap);background-image:repeating-linear-gradient(135deg,rgba(28,27,58,.5) 0 3px,transparent 3px 6px)}
#murid .fb.no{border-color:var(--silap)}
#murid .bospanel{box-shadow:0 5px 0 var(--garis),0 0 0 5px color-mix(in srgb,var(--emas) 55%,transparent)}
#murid .bostimer i{background:var(--emas)}
/* Ungu yang lebih cerah untuk teks dalam tema gelap */
#murid .eyebrow,#murid .pautan{color:var(--dunia-teks,var(--dunia))}
/* Bingkai pilihan jawapan yang lebih ringan, kekal rasa ditekan */
#murid .opt{border-width:1.5px;box-shadow:0 2px 0 var(--garis);min-height:54px}
#murid .opt:active:not(:disabled){transform:translateY(2px);box-shadow:0 0 0 var(--garis)}

/* ---- Cip di atas soalan (menggantikan beberapa nota kecil) ---- */
.qchips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px}
.qchips span{font:700 12px/1 "Figtree",system-ui,sans-serif;padding:7px 11px;border-radius:99px;background:var(--dunia-lembut,#ECE5FF);color:var(--tinta,#1C1B3A)}

/* ---- Panel bunyi ---- */
.bunyimenu{position:relative}
.bunyipanel{position:absolute;right:0;top:calc(100% + 8px);z-index:80;min-width:220px;padding:4px 14px;background:var(--kad,#fff);color:var(--tinta,#1C1B3A);border:2px solid var(--garis,#1C1B3A);border-radius:16px;box-shadow:0 5px 0 rgba(28,27,58,.2)}
.bunyipanel[hidden]{display:none}
.bunyipanel .suis{width:100%;font-size:15px;font-weight:600;color:inherit}

/* Murid tidak perlu nampak butang Cikgu; pautan halus di kaki */
body.zon-murid #segMod{display:none}
.untukcikgu{margin-left:14px;font-size:12px;color:var(--lembut,#6B6890);text-decoration:underline;text-underline-offset:3px}

/* ---- Penjelasan langkah demi langkah ---- */
.fb .langkah{margin:6px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:5px;font-size:15px}

/* ---- Rajah interaktif: gelongsor lebih besar, mod cabar ---- */
.jmi-baris input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;height:48px;accent-color:var(--dunia,#6D3BFF)}
.jmi-baris input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:99px;background:var(--dunia-lembut,#ECE5FF);border:2px solid var(--garis,#1C1B3A)}
.jmi-baris input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;border-radius:50%;background:var(--dunia,#6D3BFF);border:3px solid var(--garis,#1C1B3A);margin-top:-13px;box-shadow:0 3px 0 var(--garis,#1C1B3A)}
.jmi-baris input[type=range]::-moz-range-track{height:10px;border-radius:99px;background:var(--dunia-lembut,#ECE5FF);border:2px solid var(--garis,#1C1B3A)}
.jmi-baris input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:var(--dunia,#6D3BFF);border:3px solid var(--garis,#1C1B3A);box-shadow:0 3px 0 var(--garis,#1C1B3A)}
.jmi-petunjuk{animation:jmiDenyut 1.6s ease-in-out 2}
@keyframes jmiDenyut{50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.jmi-petunjuk{animation:none}}
figure.jmi.cabar:not(.tunjuk) .jmi-hasil{visibility:hidden}
.jmi-cabar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.jmi-cabar p{flex:1 1 100%;margin:0;font:600 12px/1.3 "Figtree",system-ui,sans-serif;color:var(--tinta,#1C1B3A);background:var(--dunia-lembut,#ECE5FF);border-radius:10px;padding:8px 10px}
.jmi-semak{flex:1 1 auto;min-height:44px;border:2px dashed var(--dunia,#6D3BFF);background:transparent;color:var(--tinta,#1C1B3A);border-radius:12px;font:700 14px "Baloo 2",system-ui,sans-serif;cursor:pointer;padding:0 14px}
.jmi-semak[aria-pressed="true"]{border-style:solid;background:var(--dunia-lembut,#ECE5FF)}

/* ---- Kertas conteng ---- */
#btnConteng{position:fixed;right:14px;bottom:92px;z-index:70;width:56px;height:56px;border-radius:50%;border:2px solid var(--garis,#1C1B3A);background:var(--emas,#FFC83D);color:#1C1B3A;font-size:24px;box-shadow:0 4px 0 var(--garis,#1C1B3A);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
#btnConteng:active{transform:translateY(3px);box-shadow:none}
#btnConteng[hidden],#conteng[hidden]{display:none}
#conteng{position:fixed;left:0;right:0;bottom:0;height:46vh;min-height:230px;z-index:75;background:var(--kad,#fff);border-top:3px solid var(--garis,#1C1B3A);display:flex;flex-direction:column;box-shadow:0 -8px 24px rgba(28,27,58,.25)}
#conteng .alat{display:flex;gap:6px;align-items:center;padding:6px 8px;background:var(--kad2,#EEEBFA);border-bottom:2px solid var(--garis,#1C1B3A)}
#conteng .alat b{flex:1;font:700 14px "Baloo 2",system-ui,sans-serif;color:var(--tinta,#1C1B3A);white-space:nowrap}
body.ada-conteng #murid{padding-bottom:104px}
#conteng button{min-width:44px;min-height:44px;border:2px solid var(--garis,#1C1B3A);background:var(--kad,#fff);border-radius:12px;font:700 14px "Figtree",system-ui,sans-serif;cursor:pointer;color:var(--tinta,#1C1B3A);padding:0 8px}
#conteng button[aria-pressed="true"]{background:var(--dunia-lembut,#ECE5FF);border-color:var(--dunia,#6D3BFF)}
#conteng canvas{flex:1;width:100%;min-height:0;touch-action:none;background-image:radial-gradient(circle,rgba(120,116,170,.45) 1px,transparent 1.5px);background-size:22px 22px;cursor:crosshair}
body.conteng-buka{padding-bottom:46vh}
@media (max-height:600px){#conteng{height:55vh}body.conteng-buka{padding-bottom:55vh}}

/* ---- Teks sahaja untuk pembaca skrin ---- */
.sr-sahaja{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Kontras (audit axe, WCAG AA 4.5:1) ----
   Teks kecil kelabu-biru dan hijau-teal dalam paparan guru dan kaki halaman
   jatuh di bawah 4.5:1. Nilai di bawah mengekalkan rupa tetapi menggelapkan
   teks (tema cerah) atau memutihkan teks (tema gelap). */
:root{--ink3:#4E6078}
:root[data-theme="dark"]{--ink3:#A7B4C7}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--ink3:#A7B4C7}}
.jenama-kaki>span,.untukcikgu{color:var(--ink2,#3F5068)}
.untukcikgu{color:var(--ink2,#3F5068)}
.tp-chip,.t.tp-chip{color:#0A6B61}
:root[data-theme="dark"] .tp-chip,:root[data-theme="dark"] .t.tp-chip{color:#7BE8D4}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tp-chip,:root:not([data-theme="light"]) .t.tp-chip{color:#7BE8D4}}
/* Butang merah dalam paparan guru, tema gelap: teks gelap di atas merah cerah */
:root[data-theme="dark"] body:not(.zon-murid) .btn:not(.ghost):not(.teal):not(.hijau){color:#1B0F10}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) body:not(.zon-murid) .btn:not(.ghost):not(.teal):not(.hijau){color:#1B0F10}}

.jmi-label b{color:var(--dunia-teks,var(--dunia,#6D3BFF))}