/* ============================================================================
   AIRPH Plus — tambah-jana.css
   Kelas BAHARU khusus untuk modul "Jana RPH" sahaja. Fail ini dimuat SELEPAS
   asas.css + sistem.css + mobil.css, jadi ia hanya menambah — tidak pernah
   menulis semula kelas sedia ada.

   Semua warna diambil daripada token peranan (--aksen, --sempadan, --hijau-t…)
   supaya mod gelap berfungsi sendiri tanpa peraturan tambahan. Metrik 50–60
   tahun dikekalkan: bulatan langkah 30px, kad jangka masa besar, teks tidak
   dikecilkan.
   ========================================================================= */

/* ------------------------------------------------- stepper 3 langkah (01/02)
   1 Muat naik jadual · 2 Templat sekolah · 3 Jana RPH. Bulatan bernombor,
   garis penyambung menjadi ungu bila langkah itu sudah dilepasi. */
.jstep{display:flex;align-items:center;flex-wrap:wrap;gap:10px 0}
.jstep__item{display:flex;align-items:center;gap:12px}
.jstep__bul{
  flex:none;width:30px;height:30px;border-radius:15px;
  border:2px solid var(--sempadan);background:var(--kad);
  display:grid;place-items:center;
  font-family:ui-monospace,Menlo,monospace;font-size:13px;font-weight:700;color:var(--teks2);
}
.jstep__bul--on,.jstep__bul--siap{
  border-color:var(--aksen);background:var(--aksen);color:var(--aksen-atas);
}
.jstep__teks{font-size:15px;font-weight:700;color:var(--teks2)}
.jstep__item--on .jstep__teks{color:var(--teks)}
.jstep__garis{flex:none;width:34px;height:2px;border-radius:1px;
  background:var(--sempadan);margin:0 14px}
.jstep__garis--siap{background:var(--aksen)}

/* ---------------------------------------------- kad jangka masa besar (aras ringkas)
   Empat kad besar boleh dipilih: Sehari / Seminggu / Sebulan / Setahun.
   Diletak dalam .grid.grid-4 sedia ada, jadi ia jatuh ke 2 lajur pada tablet
   dan telefon dengan sendiri. */
.jspan__kad{
  position:relative;text-align:left;cursor:pointer;
  background:var(--kad);border:1.8px solid var(--sempadan);border-radius:18px;
  padding:26px 24px;min-height:156px;
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .12s,background .12s;
}
.jspan__kad:hover{border-color:var(--aksen)}
/* Padding dikurangkan 2px bila dipilih supaya sempadan 2.8px tidak menganjak
   kad — sama teknik dengan .radio dalam asas.css. */
.jspan__kad[aria-pressed="true"]{
  border:2.8px solid var(--aksen);background:var(--aksen-l);padding:24px 22px;
}
.jspan__lencana{align-self:flex-start;margin-bottom:2px}
.jspan__nama{font-size:24px;font-weight:700;letter-spacing:-.02em}
.jspan__kad[aria-pressed="true"] .jspan__nama{color:var(--aksen-g)}
.jspan__sub{font-size:15px;color:var(--teks2)}
.jspan__tik{
  position:absolute;top:20px;right:20px;
  width:30px;height:30px;border-radius:15px;
  background:var(--aksen);color:var(--aksen-atas);display:grid;place-items:center;
}

/* ---------------------------------------------------- senarai kemajuan (06)
   Setiap waktu satu baris; bulatan kiri menunjukkan siap / sedang ditulis /
   menunggu. Baris "sedang ditulis" ditonjolkan dengan sempadan ungu. */
.jprog{display:flex;flex-direction:column;gap:12px}
.jprog__baris{
  display:flex;align-items:center;gap:16px;
  background:var(--kad);border:1.4px solid var(--sempadan);border-radius:12px;
  padding:14px 18px;
}
.jprog__baris--buat{border:2.2px solid var(--aksen);background:var(--aksen-l)}
.jprog__bulat{flex:none;width:30px;height:30px;border-radius:15px;display:grid;place-items:center}
.jprog__bulat--siap{background:var(--hijau-t);color:#fff}
.jprog__bulat--buat{border:3px solid var(--aksen);border-top-color:transparent;
  animation:jputar .8s linear infinite}
.jprog__bulat--tunggu{border:2px solid var(--teks3)}
.jprog__badan{min-width:0}
.jprog__tajuk{font-size:16px;font-weight:700;letter-spacing:-.01em}
.jprog__meta{font-size:14.5px;color:var(--teks2);margin-top:2px}
@keyframes jputar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.jprog__bulat--buat{animation:none}}