/* Isi Tugas (views/tugas.js) — gaya khusus halaman ini. Komponen bersama ada di app.css (.savebar, .f, .seg.yn/.spm, .code, .fq-ev, .shot).
   Semua pemilih diawali .tg-* / #tf karena berkas ini dimuat untuk semua halaman. */

/* Kepala: di HP pil status naik ke samping kotak ikon, judul selebar kartu di bawahnya. */
@media (max-width: 559.98px) {
  .tg-ph > .ph-ic { order: -2; }
  .tg-ph > .ph-act { order: -1; margin-left: auto; }
  .tg-ph > .ph-text { flex-basis: 100%; }
}

/* Bar kirim: baris kemajuan + skor audit (baris kedua, redup). */
#savebar .savebar-prog > span { display: block; overflow: hidden; text-overflow: ellipsis; }
#savebar .tg-score { margin-top: 1px; font-size: var(--fs-xs); font-weight: 650; color: var(--muted); }
/* Di HP "Ke yang belum" hanya ikon agar teks kemajuan tetap terbaca. */
@media (max-width: 559.98px) {
  #savebar .tg-jump-l { display: none; }
}

/* Butir wajib yang kurang: latar merah lembut dengan ruang 8/10 px di dalam cincin. Padding dibalas margin negatif,
   jadi isi tidak bergeser saat tanda dipasang/dilepas (atas: 6 + 1 + 8 = garis 1 + padding 14 milik .f + .f). */
#tf .f.is-missing { padding: 8px 10px; margin: -8px -10px; background: var(--red-soft); border-top-color: transparent; }
#tf .f + .f.is-missing { padding-top: 8px; margin-top: 6px; }
/* Butir yang dirender ulang saat masih kurang: tetap bertanda merah, tidak bergoyang lagi. */
#tf .f.is-missing.is-quiet { animation: none; }

/* Rasio sapa (audit seksi G) kosong sampai jumlah pengunjung diisi. */
.tg-ratio:empty { display: none; }

/* Mode PJ (hari tanpa Manager): judul banner di baris sendiri. */
.tg-pj > strong:first-child { display: block; margin-bottom: 2px; font-weight: 800; }

/* Butir 'person': daftar check-in di atas, kolom nama manual di bawahnya (muncul saat "Tidak ada di daftar"). */
#tf .tg-person { display: grid; gap: 8px; }

/* Petunjuk privasi kamera (photoHint): ikon di depan teks, rata atas. */
#tf .tg-cam { display: flex; align-items: flex-start; gap: 6px; }
#tf .tg-cam > .ico { flex: none; margin-top: 1px; }

/* Sudah dikirim: kartu ringkasan, cincin skor di kiri teks (juga di HP). */
.now.tg-done { flex-wrap: nowrap; justify-content: flex-start; }
.now.tg-done > div { flex: 1 1 0; }
.tg-done .chips { margin-top: 10px; }
@media (max-width: 379.98px) {
  .tg-done > .ring { width: 72px; height: 72px; }
}

/* Baca-saja: jawaban teks panjang di bawah label, rata kiri, baris baru dipertahankan. */
.tg-ro .f.stack > .val { justify-self: start; text-align: left; }
.tg-pre { white-space: pre-wrap; }
/* Nama manual (butir 'person'): pil "tanpa akun" di samping nama. */
.tg-ro .val > .pill { margin-left: 8px; vertical-align: 1px; }