/**
 * SIMFONI - panduan-pjup.css
 *
 * Berkas AKSEN untuk bantuan/panduanPJUP.php. Seluruh kerangka halamannya —
 * daftar isi, bab, tabel, kotak sorot, diagram, rantai titik nilai — berada di
 * pages/manual-peran.css, yang dimuat lebih dulu (lihat partials/page_assets.php).
 *
 * Aksennya HIJAU, mengikuti warna Unit Pengolah di seluruh aplikasi
 * (--pa-up: #16a34a) — satu-satunya manual peran yang aksennya dapat memakai
 * warna semantiknya sendiri tanpa berbenturan dengan manual lain.
 *
 * Seri warnanya: Admin biru tua · Auditor tembaga · PJ UK toska · PJ UP hijau.
 *
 * @filename    panduan-pjup.css
 * @description Aksen dan penyesuaian kerangka halaman Panduan PJ Unit Pengolah
 * @author      Syams
 * @created     August 31, 2026
 * @license     SIMFONI Dual License (GPL v3 / Commercial)
 * @version     3.0
 * @project     SIMFONI - Sistem Informasi Monitoring dan Evaluasi Kearsipan
 */

/* ── Aksen: hijau di atas hijau tua ───────────────────────────────────────
   --pa-accent dipakai untuk teks tautan berukuran kecil, jadi nilainya dipilih
   yang masih berkontras cukup di atas kertas putih (#15803d ≈ 4,9:1), bukan
   hijau terang #16a34a (≈ 3,4:1) yang hanya layak untuk lencana dan bidang. */
.page--panduan-pjup .pa-doc {
  --pa-navy:          #14532d;
  --pa-navy-2:        #166534;
  --pa-navy-3:        #0b3320;
  --pa-navy-fg:       #86efac;
  --pa-navy-fg-2:     #bbf7d0;
  --pa-navy-rule:     rgba(134, 239, 172, .5);
  --pa-masthead-glow: rgba(34, 197, 94, .30);
  --pa-accent:        #15803d;
  --pa-accent-sf:     #f0fdf4;
  --pa-accent-bd:     #bbf7d0;
  --pa-accent-hv:     #dcfce7;
  --pa-accent-st:     #86efac;
  --pa-accent-sh:     rgba(21, 128, 61, .12);
}

/* Kotak "Kiat" bawaannya hijau — dan di halaman ini aksennya juga hijau,
   sehingga keduanya melebur dan kiat berhenti terbaca sebagai sisipan.
   Hanya di sini ia digeser ke toska: warnanya masih ramah, tetapi tidak lagi
   sama dengan warna badan dokumen. Kotak "Hasil" tetap hijau — bentuknya
   bergaris putus-putus, jadi ia tetap terbedakan tanpa berganti warna. */
.page--panduan-pjup .pa-kotak.kiat {
  border-left-color: #0e7490;
  background: #ecfeff;
}
.page--panduan-pjup .pa-kotak.kiat > i,
.page--panduan-pjup .pa-kotak.kiat .t { color: #0e7490; }

/* ── Kerangka aplikasi ────────────────────────────────────────────────────
   .wrapper memasang `overflow: hidden` agar sudut membulatnya terpotong rapi.
   Efek sampingnya: ia MEMBUAT KONTEKS GULIR, dan `position: sticky` di dalamnya
   berhenti bekerja — daftar isi ikut tergulir habis. `clip` memberi pemotongan
   yang persis sama TANPA membuat konteks gulir, sehingga sticky hidup kembali. */
.page--panduan-pjup .wrapper { overflow: clip; }

@media print {
  .page--panduan-pjup .navbar,
  .page--panduan-pjup footer { display: none !important; }
}

/* ── Matriks Elektronik × Konvensional ────────────────────────────────────
   Khas manual ini: instrumen Unit Pengolah membelah setiap fungsi kearsipan
   menjadi jalur elektronik dan jalur konvensional, dan pembelahan itu tidak
   ada pada instrumen Unit Kearsipan. Sebuah tabel biasa memang bisa
   menampilkannya, tetapi yang perlu terbaca sekilas adalah SEBARAN bobotnya —
   di fungsi mana beban butir menumpuk. */
.page--panduan-pjup .pa-matriks {
  display: grid;
  grid-template-columns: minmax(96px, 150px) repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.page--panduan-pjup .pa-matriks-kop {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--pa-ink-3);
  padding: .1rem .2rem .3rem;
  align-self: end;
}
.page--panduan-pjup .pa-matriks-sisi {
  display: flex;
  align-items: center;
  font-size: .8rem;
  font-weight: 700;
  color: var(--pa-ink);
  padding-right: .3rem;
}
.page--panduan-pjup .pa-matriks-sel {
  border: 1px solid var(--pa-line);
  border-radius: 7px;
  background: var(--pa-paper);
  padding: .5rem .6rem;
  min-height: 3.6rem;
}
.page--panduan-pjup .pa-matriks-sel .n {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.page--panduan-pjup .pa-matriks-sel .kd {
  display: block;
  font-family: var(--pa-mono);
  font-size: .68rem;
  color: var(--pa-ink-3);
  margin-top: .12rem;
  word-break: break-word;
}
.page--panduan-pjup .pa-matriks-sel.elk { border-top: 3px solid #7c3aed; }
.page--panduan-pjup .pa-matriks-sel.elk .n { color: #7c3aed; }
.page--panduan-pjup .pa-matriks-sel.knv { border-top: 3px solid #15803d; }
.page--panduan-pjup .pa-matriks-sel.knv .n { color: #15803d; }
.page--panduan-pjup .pa-matriks-sel.kosong { background: var(--pa-paper-2); }
.page--panduan-pjup .pa-matriks-sel.kosong .n { color: var(--pa-line-2); }

@media (max-width: 575.98px) {
  .page--panduan-pjup .pa-matriks { grid-template-columns: minmax(78px, 1fr) repeat(2, minmax(0, 1fr)); gap: .3rem; }
  .page--panduan-pjup .pa-matriks-sisi { font-size: .72rem; }
  .page--panduan-pjup .pa-matriks-sel { padding: .4rem .45rem; }
}