/* Demo awam Ejen Mutawwif (D33). Arah: mataf tengah hari. Marmar putih sejuk, dakwat kiswah, hijau lampu saie untuk apa yang ejen
   buat, jingga terik untuk haba dan orang yang tiada. Jam ialah wira: angka Archivo sempit yang besar. Suara ejen (penaakulan, mesej)
   dalam serif; suara kita dalam grotesk. Tiada penapis, tiada bayang hiasan; bucu tajam kecuali gelembung mesej. */
@font-face{font-family:Archivo;src:url(fon/Archivo-normal.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(fon/SourceSerif4-normal.woff2) format("woff2");font-weight:400 700;font-display:swap}
:root{
  --marmar:#F3F5F2; --kertas:#FFFFFF; --dakwat:#15191A; --batu:#56605D; --garis:#D3D9D5;
  --saie:#0A6B4B; --saie-lembut:#E2EFE9; --terik:#C2410C; --terik-lembut:#FBE9DF; --emas:#7A5C12;
  --grotesk:Archivo,"Helvetica Neue",Arial,sans-serif; --serif:"Source Serif 4",Georgia,serif;
  --tepi:clamp(1.1rem,4.5vw,3rem); --lebar:74rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--marmar);color:var(--dakwat);font:400 1.0625rem/1.55 var(--grotesk);font-variant-numeric:tabular-nums}
h1,h2,h3,p,dl,dd,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em}
button,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--saie);outline-offset:3px}
.langkau{position:absolute;left:-999rem}
.langkau:focus{left:var(--tepi);top:.6rem;background:var(--kertas);padding:.4rem .7rem;z-index:5}
:root{--sisi:max(var(--tepi),calc((100vw - var(--lebar))/2))}
main>section{padding:clamp(2.2rem,6vw,4.5rem) var(--sisi)}

/* kepala */
.atas{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem;padding:1rem var(--sisi)}
.jenama{display:flex;align-items:center;gap:.6rem;font-weight:700;font-stretch:88%;font-size:1.1rem;text-decoration:none;white-space:nowrap}
.jenama .hilang{fill:var(--terik)}
.tanda-demo{font-size:.78rem;white-space:nowrap;color:var(--terik);border:1.5px solid currentColor;padding:.05rem .5rem;font-weight:600}
.tukar{margin-left:auto;font-size:.9rem;white-space:nowrap}

/* wira */
.wira{padding-top:clamp(1.2rem,4vw,3rem)}
.wira h1{font-weight:800;font-stretch:68%;font-size:clamp(2.9rem,12.5vw,7.4rem);line-height:.92;letter-spacing:-.012em}
.wira h1 span{display:block}
.wira h1 span:last-child{color:var(--saie)}
.wira-isi{margin-top:clamp(1.2rem,3vw,2rem);max-width:38rem;font-size:clamp(1.08rem,2.2vw,1.3rem);line-height:1.5}
.wira-aksi{margin-top:1.6rem;display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem}
.utama{background:var(--saie);color:#fff;border:0;border-radius:3px;padding:.8rem 1.3rem;font-weight:700;font-size:1.05rem}
.utama:hover{background:#085a3f}
.utama:disabled{background:var(--batu);cursor:progress}

/* hari */
h2{font-weight:750;font-stretch:80%;font-size:clamp(1.55rem,4.6vw,2.5rem);line-height:1.08;letter-spacing:-.005em}
.hari{background:var(--kertas);border-block:1px solid var(--garis)}
.rel{margin-top:1.4rem}
.rel svg{display:block;width:100%;height:150px;overflow:visible}
.rel figcaption{font-size:.85rem;color:var(--batu);margin-top:.3rem}
.r-suhu{fill:none;stroke:var(--batu);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.r-suhu.panas{stroke:var(--terik);stroke-width:3.5}
.r-ambang{stroke:var(--terik);stroke-width:1;stroke-dasharray:4 5}
.r-label{font:600 12px var(--grotesk);fill:var(--terik)}
.r-paksi{stroke:var(--garis);stroke-width:1.5}
.r-jam{font:500 12px var(--grotesk);fill:var(--batu)}
.r-kini{stroke:var(--saie);stroke-width:1.5}
.r-titik{fill:var(--kertas);stroke:var(--dakwat);stroke-width:1.5;cursor:pointer}
.r-titik.lepas{fill:var(--dakwat)}
.r-titik.kini{fill:var(--saie);stroke:var(--saie)}
.kawal{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.9rem;padding-bottom:1.1rem;border-bottom:1px solid var(--garis)}
.kawal button{background:none;border:1.5px solid var(--dakwat);border-radius:3px;padding:.5rem .9rem;font-weight:600;min-height:44px}
.kawal button:disabled{border-color:var(--garis);color:var(--batu);cursor:default}
.kawal p{font-size:.95rem;color:var(--batu);text-align:center}

/* satu keputusan */
.saat{margin-top:1.4rem}
.saat-kepala{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem clamp(1.2rem,4vw,3rem)}
.jam{font-weight:800;font-stretch:62%;font-size:clamp(5.6rem,27vw,12.5rem);line-height:.78;letter-spacing:-.02em;margin-left:-.03em}
.ukur{display:flex;flex-wrap:wrap;gap:.5rem clamp(1.2rem,3vw,2.4rem);padding-bottom:.35rem}
.ukur dt{font-size:.85rem;color:var(--batu)}
.ukur dd{font-weight:700;font-stretch:85%;font-size:clamp(1.25rem,3.2vw,1.75rem);line-height:1.15}
.ukur .amaran,.ukur .bahaya{color:var(--terik)}
.notis-alih{background:var(--terik);color:#fff;font-weight:700;padding:.55rem .9rem;margin-bottom:1rem}
.saat-badan{display:grid;gap:1.6rem;margin-top:1.8rem}
.saat h3{font-weight:600;font-size:.92rem;color:var(--batu);margin:1.5rem 0 .4rem}
.saat h3:first-child{margin-top:0}
.nampak{font-size:1.08rem;max-width:44rem}
.putus{font-family:var(--serif);font-size:clamp(1.22rem,2.7vw,1.55rem);line-height:1.42;border-left:4px solid var(--saie);padding-left:clamp(.9rem,2vw,1.3rem);max-width:46rem}
.lencana{display:inline-block;font:700 .78rem/1.5 var(--grotesk);background:var(--terik);color:#fff;padding:0 .45rem;vertical-align:.15em;white-space:nowrap}
.tindak li{position:relative;padding:.38rem 0 .38rem 1.5rem}
.tindak li::before{content:"";position:absolute;left:0;top:.82rem;width:.72rem;height:.72rem;background:var(--saie)}
.tindak b{display:block;font-weight:650;line-height:1.35}
.tindak span{display:block;font-size:.92rem;color:var(--batu);line-height:1.4}
.tindak li.tahan::before{background:none;border:2px solid var(--terik)}
.tindak li.tahan b{color:var(--terik)}
.pilih-alih{margin-top:1.1rem}
.pautan{background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:.2em;color:var(--saie);font-weight:600;text-align:left}
.mesej{display:grid;gap:.6rem}
.gel{background:var(--marmar);border-radius:14px 14px 14px 3px;padding:.7rem .9rem .8rem;border-left:4px solid var(--garis);max-width:34rem}
.gel p{font-family:var(--serif);font-size:1.02rem;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.gel .siapa{display:block;font-size:.82rem;font-weight:650;color:var(--batu);margin-bottom:.15rem}
.gel.manasik{border-left-color:var(--emas)}
.gel.amaran,.gel.peringatan{border-left-color:var(--terik)}
.gel.rujukan{border-left-color:var(--saie)}
.kosong{color:var(--batu)}
.titik{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:5px;max-width:24rem}
.titik{align-items:start}
.titik i{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:#B4BDB8}
.titik i.emas{background:var(--kertas);border:3px solid #7C8783}
.titik i.tiada,.titik i.eskalasi{background:var(--terik);border:0;animation:denyut 1.2s ease-in-out infinite}
.titik i.dijumpai{background:var(--saie);border:0}
@keyframes denyut{50%{opacity:.35}}
.petunjuk{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.85rem;color:var(--batu);margin-top:.6rem}
.petunjuk i{display:inline-block;width:.8rem;height:.8rem;border-radius:50%;margin-right:.4rem;vertical-align:-.08em}
.petunjuk .emas{border:3px solid #7C8783}
.petunjuk .tiada{background:var(--terik)}
.eskalasi{margin-top:.8rem;font-weight:650;color:var(--terik);border-left:4px solid var(--terik);padding-left:.7rem}
.eskalasi.tutup{color:var(--saie);border-left-color:var(--saie)}
.saat.masuk .jam,.saat.masuk .putus{animation:masuk .38s ease-out both}
@keyframes masuk{from{opacity:0;transform:translateY(.4rem)}}

/* cuba */
.cuba .isi{margin-top:.9rem;max-width:40rem}
.notis{margin-top:1.2rem;border-left:4px solid var(--garis);padding-left:.9rem;color:var(--batu);max-width:40rem}
#borang{margin-top:1.5rem;max-width:44rem}
#borang[hidden],.saat[hidden],.status[hidden],.notis[hidden]{display:none}
#borang label{display:block;font-weight:650;margin-bottom:.35rem}
#borang textarea{display:block;width:100%;background:var(--kertas);border:1.5px solid var(--dakwat);border-radius:3px;padding:.7rem .8rem;font-family:var(--serif);font-size:1.08rem;line-height:1.45;resize:vertical}
.baris-hantar{display:flex;align-items:center;gap:1rem;margin-top:.7rem}
#baki{font-size:.85rem;color:var(--batu)}
.kecil{font-size:.9rem;color:var(--batu);margin-top:1.3rem}
.contoh,.kejadian{display:grid;gap:.45rem;margin-top:.45rem}
.contoh button,.kejadian button{width:100%;text-align:left;background:var(--kertas);border:1px solid var(--garis);border-radius:3px;padding:.6rem .8rem;line-height:1.4;min-height:44px}
.contoh button{font-family:var(--serif)}
.contoh button:hover,.kejadian button:hover{border-color:var(--dakwat)}
.contoh button:disabled,.kejadian button:disabled{color:var(--batu);cursor:progress}
.status{margin-top:1.4rem;font-weight:650;padding:.6rem .9rem;scroll-margin-top:1rem}
.status.tunggu{background:var(--saie-lembut);color:var(--saie)}
.status.siap{background:var(--saie);color:#fff}
.status.ralat{background:var(--terik-lembut);color:var(--terik)}
.saat.langsung{background:var(--kertas);border:1px solid var(--garis);padding:clamp(1rem,3vw,1.8rem);margin-top:0}
.saat.langsung .jam{font-size:clamp(4rem,17vw,7rem)}

/* jujur + uji */
.jujur{background:var(--dakwat);color:var(--marmar)}
.tiga{display:grid;gap:1.6rem;margin-top:1.6rem}
.tiga dt{font-weight:750;font-stretch:80%;font-size:1.35rem;padding-top:.7rem;border-top:3px solid var(--marmar)}
.tiga div:nth-child(2) dt{border-color:#8E9894}
.tiga div:nth-child(3) dt{border-color:#E8590C;color:#FF8A4C}
.tiga dd{margin-top:.4rem;color:#D8DEDA;max-width:26rem}
.lejar{margin-top:1.4rem;border-top:1.5px solid var(--dakwat)}
.lejar li{display:grid;gap:.1rem .9rem;padding:.9rem 0;border-bottom:1px solid var(--garis)}
.lejar b{white-space:nowrap;font-weight:800;font-stretch:66%;font-size:clamp(1.9rem,6vw,2.7rem);line-height:1;color:var(--saie)}
.lejar span{max-width:42rem}
.kaki{padding:2rem var(--sisi) 3rem;font-size:.9rem;color:var(--batu);display:grid;gap:.6rem}
.kaki p{max-width:52rem}

@media (min-width:56rem){
  .saat-badan{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2rem,4vw,4rem)}
  .tiga{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.5rem}
  .lejar li{grid-template-columns:17rem minmax(0,1fr);align-items:baseline}
  .contoh,.kejadian{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important}}