/**
 * SIMFONI - manual-peran.css
 *
 * Kerangka bersama SERI MANUAL PERAN: Panduan Admin, Panduan Auditor, dan
 * kelak Panduan PJ UK / PJ UP. Satu berkas untuk seluruh seri, bukan satu
 * salinan per peran — empat salinan yang menyimpang satu per satu adalah cara
 * paling pasti membuat keempat manual berhenti terlihat sebagai satu dokumen.
 *
 * Seluruh selector berakar pada `.pa-doc`, yaitu pembungkus yang hanya ada di
 * halaman-halaman manual. Berkas ini karena itu TIDAK perlu tahu satu pun nama
 * halaman yang memakainya, dan tidak dapat bocor ke modul lain.
 *
 * Yang TIDAK ada di sini, dan memang tidak boleh: aturan yang menyasar elemen
 * di luar `.pa-doc` (mis. `.wrapper` milik kerangka aplikasi). Aturan semacam
 * itu tetap butuh kelas scope <body> dan tinggal di berkas per-peran.
 *
 * Yang membedakan satu manual dari yang lain hanyalah blok token "aksen" pada
 * bagian 0. Berkas per-peran menimpanya dengan selector yang lebih spesifik:
 *
 *     .page--panduan-auditor .pa-doc { --pa-accent: …; --pa-navy: …; }
 *
 * Tidak ada pustaka bagan yang dimuat: seluruh diagram dibangun dari HTML,
 * CSS, dan SVG sebaris, karena rute manual bersifat PUBLIK dan harus tetap
 * utuh pada jaringan yang memblokir CDN.
 *
 * @filename    manual-peran.css
 * @description Kerangka bersama halaman manual peran: ToC, bab, infografik, diagram
 * @author      Syams
 * @created     August 31, 2026
 * @license     SIMFONI Dual License (GPL v3 / Commercial)
 * @version     1.0
 * @project     SIMFONI - Sistem Informasi Monitoring dan Evaluasi Kearsipan
 */

/* ═══ 0. Token lokal ═══════════════════════════════════════════════════════ */
/* ═══ 0. Token ════════════════════════════════════════════════════════════
   Dipasang pada .pa-doc — BUKAN pada kelas scope <body> — supaya berkas ini
   tidak perlu tahu satu pun nama halaman yang memakainya. Berkas per-peran
   cukup menimpa blok "aksen" di bawah dengan selector yang lebih spesifik. */
.pa-doc {
  --pa-ink:        #0f172a;
  --pa-ink-2:      #334155;
  --pa-ink-3:      #64748b;
  --pa-line:       #e2e8f0;
  --pa-line-2:     #cbd5e1;
  --pa-paper:      #ffffff;
  --pa-paper-2:    #f8fafc;
  --pa-uk:         #2563eb;
  --pa-up:         #16a34a;
  --pa-aud:        #d97706;
  --pa-adm:        #7c3aed;
  --pa-ok:         #15803d;
  --pa-warn:       #b45309;
  --pa-bad:        #b91c1c;
  --pa-radius:     10px;
  --pa-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* ── Aksen: SATU-SATUNYA yang berbeda antar manual peran ──────────────── */
  --pa-navy:       #0b2a4a;   /* kepala bab, kepala tabel, latar halaman judul */
  --pa-navy-2:     #123a63;
  --pa-navy-3:     #071d33;
  --pa-navy-fg:    #93c5fd;   /* teks di atas latar gelap */
  --pa-navy-fg-2:  #7dd3fc;
  --pa-accent:     #1d4ed8;   /* tautan, nomor sub-bab, garis kiri judul */
  --pa-accent-sf:  #eff6ff;   /* latar sangat muda */
  --pa-accent-bd:  #bfdbfe;   /* garis tepi muda */
  --pa-accent-hv:  #dbeafe;   /* latar tunjuk-tetikus */
  --pa-accent-st:  #93c5fd;   /* garis tepi tunjuk-tetikus */
  --pa-accent-sh:  rgba(29, 78, 216, .10);
  --pa-masthead-glow: rgba(59, 130, 246, .35);
  --pa-navy-rule:     rgba(147, 197, 253, .55);
}

/* ═══ 1. Kerangka dokumen ══════════════════════════════════════════════════ */
.pa-doc .pa-doc {
  max-width: 1400px;
  margin: 0 auto;
  padding: 1.25rem 0 4rem;
  color: var(--pa-ink);
  font-size: .945rem;
  line-height: 1.72;
}

.pa-doc .pa-grid {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  gap: 2rem;
  align-items: start;
}

@media (max-width: 991.98px) {
  .pa-doc .pa-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

.pa-doc .pa-main { min-width: 0; }

/* ═══ 2. Masthead / halaman judul ══════════════════════════════════════════ */
.pa-doc .pa-masthead {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 88% -10%, var(--pa-masthead-glow) 0%, transparent 58%),
    linear-gradient(135deg, var(--pa-navy) 0%, var(--pa-navy-3) 55%, var(--pa-navy-2) 100%);
  color: #fff;
  padding: 2.4rem 2.2rem 1.9rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(7,29,51,.28);
}

.pa-doc .pa-masthead::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 34px 34px;
  pointer-events: none;
  mask-image: linear-gradient(to bottom right, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(to bottom right, #000, transparent 72%);
}

.pa-doc .pa-masthead > * { position: relative; z-index: 1; }

.pa-doc .pa-kop {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--pa-navy-fg);
  font-weight: 600;
  margin-bottom: .9rem;
}
.pa-doc .pa-kop::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--pa-navy-rule), transparent);
}

.pa-doc .pa-judul {
  font-size: clamp(1.6rem, 3.1vw, 2.25rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 0 0 .5rem;
}

.pa-doc .pa-subjudul {
  color: #cbd5e1;
  max-width: 62ch;
  margin: 0 0 1.35rem;
  font-size: .95rem;
}

.pa-doc .pa-idkartu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: .1rem;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--pa-radius);
  overflow: hidden;
  background: rgba(255,255,255,.05);
}
.pa-doc .pa-idsel {
  padding: .6rem .85rem;
  border-right: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.pa-doc .pa-idsel dt {
  font-size: .66rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pa-navy-fg-2);
  font-weight: 600;
  margin-bottom: .12rem;
}
.pa-doc .pa-idsel dd {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: #f1f5f9;
}

/* ═══ 3. Panel angka (infografik ringkas) ══════════════════════════════════ */
.pa-doc .pa-angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .75rem;
  margin: 1.5rem 0;
}
.pa-doc .pa-angka-sel {
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-top: 3px solid var(--pa-accent);
  border-radius: var(--pa-radius);
  padding: .85rem .9rem;
  text-align: center;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.pa-doc .pa-angka-sel .n {
  display: block;
  font-size: 1.65rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--pa-navy);
  font-variant-numeric: tabular-nums;
}
.pa-doc .pa-angka-sel .l {
  display: block;
  font-size: .74rem;
  color: var(--pa-ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  margin-top: .2rem;
}
.pa-doc .pa-angka-sel.uk  { border-top-color: var(--pa-uk); }
.pa-doc .pa-angka-sel.up  { border-top-color: var(--pa-up); }
.pa-doc .pa-angka-sel.aud { border-top-color: var(--pa-aud); }
.pa-doc .pa-angka-sel.adm { border-top-color: var(--pa-adm); }

/* ═══ 4. Daftar isi ════════════════════════════════════════════════════════ */
/* Yang menempel adalah GRID ITEM-nya, bukan kotak di dalamnya. Sticky dibatasi
   oleh blok penampungnya: bila dipasang pada .pa-toc, penampungnya adalah
   <aside> setinggi isinya sendiri (~545px), sehingga daftar isi ikut tergulir
   habis begitu 545px pertama terlewati. Dipasang pada grid item, penampungnya
   menjadi area grid yang setinggi seluruh dokumen — dan ia menempel sepanjang
   halaman sebagaimana dimaksud. */
.pa-doc .pa-toc-panel {
  position: sticky;
  /* Kerangka atas aplikasi kini menempel di puncak layar; daftar isi harus
     berhenti DI BAWAHNYA, bukan di baliknya. Tingginya diukur app.js. */
  top: calc(var(--simfoni-header-h, 0px) + 1rem);
  align-self: start;
}

/* Pada satu kolom, daftar isi yang menempel justru menutupi isi yang dibacanya.
   Ditulis SESUDAH aturan sticky di atas agar benar-benar menimpanya. */
@media (max-width: 991.98px) {
  .pa-doc .pa-toc-panel { position: static; }
  .pa-doc .pa-toc { max-height: 320px; }
}

.pa-doc .pa-toc {
  max-height: calc(100vh - var(--simfoni-header-h, 0px) - 2rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-radius: var(--pa-radius);
  padding: 1rem .85rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.05);
  scrollbar-width: thin;
}
.pa-doc .pa-toc::-webkit-scrollbar { width: 6px; }
.pa-doc .pa-toc::-webkit-scrollbar-thumb {
  background: var(--pa-line-2); border-radius: 3px;
}

.pa-doc .pa-toc-kop {
  font-size: .68rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-ink-3);
  font-weight: 700;
  padding: 0 .35rem .55rem;
  border-bottom: 1px solid var(--pa-line);
  margin-bottom: .55rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}

.pa-doc .pa-toc ol { list-style: none; margin: 0; padding: 0; }
.pa-doc .pa-toc a {
  display: flex;
  gap: .5rem;
  align-items: baseline;
  padding: .3rem .45rem;
  border-radius: 6px;
  color: var(--pa-ink-2);
  text-decoration: none;
  font-size: .845rem;
  line-height: 1.4;
  border-left: 2px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}
.pa-doc .pa-toc a:hover { background: var(--pa-accent-sf); color: var(--pa-accent); }
.pa-doc .pa-toc a .no {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--pa-ink-3);
  min-width: 1.5rem;
  font-size: .78rem;
}
.pa-doc .pa-toc a.aktif {
  background: var(--pa-accent-sf);
  color: var(--pa-accent);
  font-weight: 600;
  border-left-color: var(--pa-accent);
}
.pa-doc .pa-toc a.aktif .no { color: var(--pa-accent); }
.pa-doc .pa-toc .sub a { padding-left: 1.9rem; font-size: .8rem; color: var(--pa-ink-3); }
.pa-doc .pa-toc .sub a::before {
  content: '';
  position: relative;
  top: -2px;
  width: 5px; height: 1px;
  background: var(--pa-line-2);
  flex: 0 0 5px;
}

/* Saat dicetak, daftar isi berhenti menempel dan menjadi blok biasa di
   halaman pertama — lihat blok @media print di bagian 18. */

/* ═══ 5. Bab dan judul ═════════════════════════════════════════════════════ */
.pa-doc .pa-bab {
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-radius: 12px;
  padding: 1.65rem 1.75rem 1.9rem;
  margin-bottom: 1.35rem;
  box-shadow: 0 1px 3px rgba(15,23,42,.045);
  scroll-margin-top: 1rem;
}

.pa-doc .pa-h2 {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  font-size: 1.32rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--pa-navy);
  margin: 0 0 .35rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--pa-line);
}
.pa-doc .pa-h2 .bab-no {
  flex: 0 0 auto;
  min-width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--pa-navy);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pa-doc .pa-h2 small {
  display: block;
  font-size: .78rem;
  font-weight: 500;
  color: var(--pa-ink-3);
  letter-spacing: 0;
  margin-top: .15rem;
}

.pa-doc .pa-h3 {
  font-size: 1.03rem;
  font-weight: 700;
  color: var(--pa-ink);
  margin: 1.7rem 0 .6rem;
  padding-left: .7rem;
  border-left: 3px solid var(--pa-accent);
  scroll-margin-top: 1rem;
}
.pa-doc .pa-h3 .no {
  color: var(--pa-accent);
  font-variant-numeric: tabular-nums;
  margin-right: .35rem;
}

.pa-doc .pa-h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--pa-ink-2);
  margin: 1.2rem 0 .45rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.pa-doc .pa-bab p { margin-bottom: .8rem; color: var(--pa-ink-2); }
.pa-doc .pa-bab ul,
.pa-doc .pa-bab ol { color: var(--pa-ink-2); padding-left: 1.15rem; margin-bottom: .9rem; }
.pa-doc .pa-bab li { margin-bottom: .3rem; }
.pa-doc .pa-bab strong { color: var(--pa-ink); font-weight: 700; }

.pa-doc .pa-lead {
  font-size: 1rem;
  color: var(--pa-ink-2);
  border-left: 3px solid var(--pa-line-2);
  padding-left: .9rem;
  margin: 1rem 0 1.3rem;
}

/* ═══ 6. Elemen inline ═════════════════════════════════════════════════════ */
.pa-doc .pa-kode {
  font-family: var(--pa-mono);
  font-size: .82em;
  background: #f1f5f9;
  border: 1px solid var(--pa-line);
  border-radius: 4px;
  padding: .08em .38em;
  color: #0f172a;
  white-space: nowrap;
}

.pa-doc .pa-jalur {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--pa-navy);
  background: var(--pa-accent-sf);
  border: 1px solid var(--pa-accent-bd);
  border-radius: 999px;
  padding: .12rem .6rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}
.pa-doc a.pa-jalur:hover { background: var(--pa-accent-hv); border-color: var(--pa-accent-st); }
.pa-doc .pa-jalur i { font-size: .82rem; }

.pa-doc .pa-ab {
  font-family: var(--pa-mono);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: #ede9fe;
  color: #5b21b6;
  border: 1px solid #ddd6fe;
  border-radius: 4px;
  padding: .06em .4em;
  white-space: nowrap;
}

.pa-doc .pa-peran {
  display: inline-block;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  border-radius: 4px;
  padding: .1rem .42rem;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pa-doc .pa-peran.adm { background: #f3e8ff; color: #6b21a8; border-color: #e9d5ff; }
.pa-doc .pa-peran.aud { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.pa-doc .pa-peran.uk  { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
.pa-doc .pa-peran.up  { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.pa-doc .pa-peran.pub { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }

/* ═══ 7. Kotak sorot (callout) ═════════════════════════════════════════════ */
.pa-doc .pa-kotak {
  display: flex;
  gap: .8rem;
  border: 1px solid var(--pa-line);
  border-left: 4px solid var(--pa-ink-3);
  background: var(--pa-paper-2);
  border-radius: 8px;
  padding: .85rem 1rem;
  margin: 1rem 0 1.15rem;
  font-size: .9rem;
}
.pa-doc .pa-kotak > i { font-size: 1.05rem; line-height: 1.5; flex: 0 0 auto; }
.pa-doc .pa-kotak .t {
  display: block;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: .15rem;
}
.pa-doc .pa-kotak p:last-child { margin-bottom: 0; }
.pa-doc .pa-kotak ul:last-child { margin-bottom: 0; }

.pa-doc .pa-kotak.catatan { border-left-color: var(--pa-accent); background: var(--pa-accent-sf); }
.pa-doc .pa-kotak.catatan > i, .pa-doc .pa-kotak.catatan .t { color: var(--pa-accent); }
.pa-doc .pa-kotak.kiat    { border-left-color: var(--pa-ok); background: #f0fdf4; }
.pa-doc .pa-kotak.kiat > i, .pa-doc .pa-kotak.kiat .t { color: var(--pa-ok); }
.pa-doc .pa-kotak.awas    { border-left-color: var(--pa-warn); background: #fffbeb; }
.pa-doc .pa-kotak.awas > i, .pa-doc .pa-kotak.awas .t { color: var(--pa-warn); }
.pa-doc .pa-kotak.bahaya  { border-left-color: var(--pa-bad); background: #fef2f2; }
.pa-doc .pa-kotak.bahaya > i, .pa-doc .pa-kotak.bahaya .t { color: var(--pa-bad); }
.pa-doc .pa-kotak.aturan  { border-left-color: var(--pa-adm); background: #faf5ff; }
.pa-doc .pa-kotak.aturan > i, .pa-doc .pa-kotak.aturan .t { color: var(--pa-adm); }

/* ═══ 8. Tabel ═════════════════════════════════════════════════════════════ */
.pa-doc .pa-tabel-bungkus {
  overflow-x: auto;
  border: 1px solid var(--pa-line);
  border-radius: 8px;
  margin: .9rem 0 1.2rem;
  background: var(--pa-paper);
}
.pa-doc table.pa-tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: .855rem;
  margin: 0;
  min-width: 520px;
}
.pa-doc table.pa-tabel thead th {
  background: var(--pa-navy);
  color: #fff;
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .6rem .7rem;
  text-align: left;
  vertical-align: bottom;
  border-right: 1px solid rgba(255,255,255,.12);
  white-space: nowrap;
}
.pa-doc table.pa-tabel thead th:last-child { border-right: 0; }
.pa-doc table.pa-tabel tbody td {
  padding: .55rem .7rem;
  border-top: 1px solid var(--pa-line);
  border-right: 1px solid var(--pa-line);
  vertical-align: top;
  color: var(--pa-ink-2);
}
.pa-doc table.pa-tabel tbody td:last-child { border-right: 0; }
.pa-doc table.pa-tabel tbody tr:nth-child(even) { background: var(--pa-paper-2); }
.pa-doc table.pa-tabel tbody tr:hover { background: var(--pa-accent-sf); }
.pa-doc table.pa-tabel td.tengah,
.pa-doc table.pa-tabel th.tengah { text-align: center; }
.pa-doc table.pa-tabel td.no {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--pa-ink-3);
  width: 2.6rem;
  text-align: center;
}
.pa-doc table.pa-tabel .ya  { color: var(--pa-ok);  font-weight: 700; }
.pa-doc table.pa-tabel .tdk { color: #cbd5e1; font-weight: 700; }
.pa-doc table.pa-tabel .seb { color: var(--pa-warn); font-weight: 700; }
.pa-doc table.pa-tabel tbody th {
  padding: .55rem .7rem;
  border-top: 1px solid var(--pa-line);
  border-right: 1px solid var(--pa-line);
  background: var(--pa-paper-2);
  font-weight: 700;
  font-size: .82rem;
  color: var(--pa-ink);
  text-align: left;
  white-space: nowrap;
}
.pa-doc .pa-tabel-judul {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa-ink-3);
  margin: 1.3rem 0 .1rem;
}

/* ═══ 9. Langkah tutorial ══════════════════════════════════════════════════ */
.pa-doc .pa-langkah {
  position: relative;
  padding-left: 3.1rem;
  padding-bottom: 1.5rem;
  margin-bottom: .3rem;
}
.pa-doc .pa-langkah::before {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 2.35rem;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--pa-line-2), var(--pa-line));
}
.pa-doc .pa-langkah:last-child::before { display: none; }

.pa-doc .pa-langkah-no {
  position: absolute;
  left: 0;
  top: .05rem;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--pa-accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--pa-line);
}

.pa-doc .pa-langkah-judul {
  font-size: .99rem;
  font-weight: 700;
  color: var(--pa-ink);
  margin: .18rem 0 .35rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.pa-doc .pa-langkah-isi > p:last-child,
.pa-doc .pa-langkah-isi > ul:last-child,
.pa-doc .pa-langkah-isi > ol:last-child { margin-bottom: 0; }

/* Tindakan berurut di dalam satu langkah */
.pa-doc ol.pa-tindakan {
  counter-reset: pa-t;
  list-style: none;
  padding-left: 0;
  margin: .55rem 0 .9rem;
}
.pa-doc ol.pa-tindakan > li {
  counter-increment: pa-t;
  position: relative;
  padding-left: 1.85rem;
  margin-bottom: .42rem;
  font-size: .89rem;
}
.pa-doc ol.pa-tindakan > li::before {
  content: counter(pa-t);
  position: absolute;
  left: 0;
  top: .12rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: #e2e8f0;
  color: var(--pa-ink-2);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* Hasil yang diharapkan */
.pa-doc .pa-hasil {
  display: flex;
  gap: .55rem;
  align-items: flex-start;
  background: #f0fdf4;
  border: 1px dashed #86efac;
  border-radius: 7px;
  padding: .5rem .75rem;
  font-size: .855rem;
  color: #14532d;
  margin: .55rem 0 0;
}
.pa-doc .pa-hasil i { color: var(--pa-ok); margin-top: .12rem; }

/* ═══ 10. Daftar periksa ═══════════════════════════════════════════════════ */
.pa-doc .pa-periksa {
  list-style: none;
  padding: 0;
  margin: .8rem 0 1.1rem;
  display: grid;
  gap: .4rem;
}
.pa-doc .pa-periksa li {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  background: var(--pa-paper-2);
  border: 1px solid var(--pa-line);
  border-radius: 7px;
  padding: .5rem .75rem;
  font-size: .875rem;
  color: var(--pa-ink-2);
}
.pa-doc .pa-periksa li::before {
  content: '\F26B';
  font-family: 'bootstrap-icons';
  color: var(--pa-line-2);
  font-size: 1rem;
  line-height: 1.35;
  flex: 0 0 auto;
}
.pa-doc .pa-periksa li b { color: var(--pa-ink); }

/* ═══ 11. Diagram: pipa tahapan ════════════════════════════════════════════ */
.pa-doc .pa-gambar {
  border: 1px solid var(--pa-line);
  border-radius: 10px;
  background: var(--pa-paper-2);
  padding: 1.15rem 1.15rem .9rem;
  margin: 1rem 0 1.3rem;
}
.pa-doc .pa-gambar-kop {
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pa-ink-3);
  margin-bottom: .85rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.pa-doc .pa-gambar-kop .tag {
  background: var(--pa-navy);
  color: #fff;
  border-radius: 4px;
  padding: .1rem .4rem;
  letter-spacing: .04em;
}
.pa-doc .pa-gambar-ket {
  font-size: .8rem;
  color: var(--pa-ink-3);
  margin: .75rem 0 0;
  padding-top: .6rem;
  border-top: 1px dashed var(--pa-line-2);
}

.pa-doc .pa-pipa {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: .55rem;
}
.pa-doc .pa-pipa-sel {
  position: relative;
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-top: 3px solid var(--pa-accent);
  border-radius: 8px;
  padding: .7rem .75rem;
}
.pa-doc .pa-pipa-sel .th {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}
.pa-doc .pa-pipa-sel .kd {
  font-family: var(--pa-mono);
  font-size: .72rem;
  font-weight: 700;
  color: #fff;
  background: var(--pa-accent);
  border-radius: 4px;
  padding: .05rem .35rem;
}
.pa-doc .pa-pipa-sel .jd {
  font-weight: 700;
  font-size: .855rem;
  color: var(--pa-ink);
  line-height: 1.3;
  margin-bottom: .2rem;
}
.pa-doc .pa-pipa-sel .ds { font-size: .77rem; color: var(--pa-ink-3); line-height: 1.45; }
.pa-doc .pa-pipa-sel.t1 { border-top-color: #0ea5e9; } .pa-doc .pa-pipa-sel.t1 .kd { background: #0ea5e9; }
.pa-doc .pa-pipa-sel.t2 { border-top-color: #2563eb; } .pa-doc .pa-pipa-sel.t2 .kd { background: #2563eb; }
.pa-doc .pa-pipa-sel.t3 { border-top-color: #d97706; } .pa-doc .pa-pipa-sel.t3 .kd { background: #d97706; }
.pa-doc .pa-pipa-sel.t4 { border-top-color: #64748b; } .pa-doc .pa-pipa-sel.t4 .kd { background: #64748b; }
.pa-doc .pa-pipa-sel.t5 { border-top-color: #16a34a; } .pa-doc .pa-pipa-sel.t5 .kd { background: #16a34a; }
.pa-doc .pa-pipa-sel.t6 { border-top-color: #0f172a; } .pa-doc .pa-pipa-sel.t6 .kd { background: #0f172a; }

/* ═══ 12. Diagram: lini masa (gantt) ═══════════════════════════════════════ */
.pa-doc .pa-gantt { font-size: .8rem; }
.pa-doc .pa-gantt-baris {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  align-items: center;
  gap: .65rem;
  margin-bottom: .38rem;
}
.pa-doc .pa-gantt-nm {
  font-weight: 600;
  color: var(--pa-ink-2);
  font-size: .8rem;
  display: flex;
  align-items: center;
  gap: .4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pa-doc .pa-gantt-nm .kd {
  font-family: var(--pa-mono);
  font-size: .68rem;
  font-weight: 700;
  background: #e2e8f0;
  color: var(--pa-ink-2);
  border-radius: 3px;
  padding: .02rem .28rem;
}
.pa-doc .pa-gantt-lajur {
  position: relative;
  height: 22px;
  background: repeating-linear-gradient(90deg, #fff 0 calc(100% / 8 - 1px), var(--pa-line) calc(100% / 8 - 1px) calc(100% / 8));
  border: 1px solid var(--pa-line);
  border-radius: 4px;
}
.pa-doc .pa-gantt-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  border-radius: 3px;
  background: var(--pa-accent);
  display: flex;
  align-items: center;
  padding: 0 .4rem;
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.18);
}
/* Rentang tanggal tahapan berjendela pendek dicetak di SEBELAH bar. */
.pa-doc .pa-gantt-luar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: .66rem;
  font-weight: 700;
  color: var(--pa-ink-2);
  white-space: nowrap;
  pointer-events: none;
}

/* Skala bulan: tanda ditempatkan pada posisi persen yang sama dengan bar. */
.pa-doc .pa-gantt-skala {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: .65rem;
  margin-top: .25rem;
}
.pa-doc .pa-gantt-bulan {
  position: relative;
  height: 1.15rem;
}
.pa-doc .pa-gantt-bulan span {
  position: absolute;
  top: 0;
  border-left: 1px solid var(--pa-line-2);
  padding-left: .28rem;
  font-size: .66rem;
  color: var(--pa-ink-3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .pa-doc .pa-gantt-baris,
  .pa-doc .pa-gantt-skala { grid-template-columns: 92px minmax(0, 1fr); gap: .4rem; }
  .pa-doc .pa-gantt-nm { font-size: .72rem; }
  .pa-doc .pa-gantt-luar { font-size: .6rem; }
}

/* ═══ 13. Diagram: pohon organisasi ════════════════════════════════════════ */
.pa-doc .pa-pohon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  text-align: center;
}
.pa-doc .pa-simpul {
  background: var(--pa-paper);
  border: 1px solid var(--pa-line-2);
  border-radius: 8px;
  padding: .5rem .9rem;
  font-size: .84rem;
  font-weight: 600;
  color: var(--pa-ink);
  box-shadow: 0 1px 2px rgba(15,23,42,.05);
  min-width: 190px;
}
.pa-doc .pa-simpul small { display: block; font-weight: 500; font-size: .74rem; color: var(--pa-ink-3); }
.pa-doc .pa-simpul.akar { background: var(--pa-navy); color: #fff; border-color: var(--pa-navy); }
.pa-doc .pa-simpul.akar small { color: var(--pa-navy-fg); }
.pa-doc .pa-simpul.opd  { border-color: var(--pa-adm); border-width: 2px; }
.pa-doc .pa-simpul.uk   { border-color: var(--pa-uk); border-width: 2px; }
.pa-doc .pa-simpul.up   { border-color: var(--pa-up); border-width: 2px; }
.pa-doc .pa-cabang { width: 2px; height: 18px; background: var(--pa-line-2); }
.pa-doc .pa-pohon-anak {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  padding-top: 18px;
}
.pa-doc .pa-pohon-anak::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  background: var(--pa-line-2);
}
.pa-doc .pa-pohon-anak > div { position: relative; padding-top: 18px; }
.pa-doc .pa-pohon-anak > div::before {
  content: '';
  position: absolute;
  top: -18px;
  left: 50%;
  width: 2px;
  height: 18px;
  background: var(--pa-line-2);
}
@media (max-width: 575.98px) {
  .pa-doc .pa-pohon-anak::before { display: none; }
  .pa-doc .pa-pohon-anak > div::before { display: none; }
  .pa-doc .pa-pohon-anak { gap: .6rem; padding-top: .6rem; }
}

/* ═══ 14. Diagram: keadaan periode (SVG) ═════════════════════════════════════ */
.pa-doc .pa-svg { width: 100%; height: auto; display: block; }
.pa-doc .pa-svg text { font-family: inherit; }

/* ═══ 15. Kartu modul (peta menu) ══════════════════════════════════════════ */
.pa-doc .pa-modul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: .6rem;
  margin: .9rem 0 1.2rem;
}
.pa-doc .pa-modul-sel {
  display: flex;
  gap: .65rem;
  align-items: flex-start;
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-radius: 8px;
  padding: .65rem .75rem;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.pa-doc a.pa-modul-sel:hover {
  border-color: var(--pa-accent-st);
  box-shadow: 0 4px 14px var(--pa-accent-sh);
  transform: translateY(-1px);
}
.pa-doc .pa-modul-ikon {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
  background: var(--pa-accent-sf);
  color: var(--pa-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.pa-doc .pa-modul-sel .nm { font-weight: 700; font-size: .87rem; color: var(--pa-ink); line-height: 1.25; }
.pa-doc .pa-modul-sel .ds { font-size: .765rem; color: var(--pa-ink-3); line-height: 1.4; margin-top: .1rem; }

/* ═══ 16. Dua kolom banding ════════════════════════════════════════════════ */
.pa-doc .pa-banding {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .8rem;
  margin: .9rem 0 1.2rem;
}
.pa-doc .pa-banding-sel {
  border: 1px solid var(--pa-line);
  border-radius: 9px;
  overflow: hidden;
  background: var(--pa-paper);
}
.pa-doc .pa-banding-kop {
  padding: .5rem .8rem;
  font-weight: 700;
  font-size: .84rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.pa-doc .pa-banding-sel.a .pa-banding-kop { background: var(--pa-uk); }
.pa-doc .pa-banding-sel.b .pa-banding-kop { background: var(--pa-aud); }
.pa-doc .pa-banding-sel.c .pa-banding-kop { background: var(--pa-up); }
.pa-doc .pa-banding-isi { padding: .7rem .85rem; font-size: .84rem; }
.pa-doc .pa-banding-isi dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem; }
.pa-doc .pa-banding-isi dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pa-ink-3); font-weight: 700; }
.pa-doc .pa-banding-isi dd { margin: 0; color: var(--pa-ink-2); }

/* ═══ 17. Navigasi bawah & tombol naik ═════════════════════════════════════ */
.pa-doc .pa-tautan-peran {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .6rem;
  margin-top: .8rem;
}
.pa-doc .pa-tautan-peran a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .8rem;
  border: 1px solid var(--pa-line);
  border-radius: 8px;
  background: var(--pa-paper);
  text-decoration: none;
  color: var(--pa-ink);
  font-weight: 600;
  font-size: .87rem;
  transition: border-color .15s, background .15s;
}
.pa-doc .pa-tautan-peran a:hover { border-color: var(--pa-accent-st); background: var(--pa-accent-sf); }
.pa-doc .pa-tautan-peran i { font-size: 1.05rem; color: var(--pa-accent); }

.pa-doc .pa-naik {
  position: fixed;
  right: 1.1rem;
  bottom: 1.4rem;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--pa-navy);
  color: #fff;
  border: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(11,42,74,.35);
  cursor: pointer;
  z-index: 1030;
}
.pa-doc .pa-naik.tampak { display: flex; }

.pa-doc .pa-kolofon {
  border-top: 1px solid var(--pa-line);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: .8rem;
  color: var(--pa-ink-3);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  justify-content: space-between;
}

/* ═══ 18. Cetak ════════════════════════════════════════════════════════════ */
@media print {
  .pa-doc .pa-naik { display: none !important; }
  .pa-doc .pa-grid { display: block; }
  /* Daftar isi tetap dicetak, tetapi sebagai blok biasa: sticky + overflow
     memotong isinya menjadi satu layar pada media cetak. */
  .pa-doc .pa-toc-panel { position: static; }
  .pa-doc .pa-toc {
    max-height: none;
    overflow: visible;
    margin-bottom: 1.2rem;
    break-after: page;
    page-break-after: always;
  }
  .pa-doc .pa-toc a { color: #000; }
  .pa-doc .pa-bab {
    break-inside: avoid-page;
    page-break-inside: avoid;
    border: 0;
    box-shadow: none;
    padding: 0 0 1rem;
    border-bottom: 1px solid #ccc;
  }
  .pa-doc .pa-masthead {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #999;
    box-shadow: none;
  }
  .pa-doc .pa-masthead .pa-judul,
  .pa-doc .pa-masthead .pa-subjudul,
  .pa-doc .pa-idsel dd { color: #000 !important; }
  .pa-doc .pa-kop, .pa-doc .pa-idsel dt { color: #333 !important; }
  .pa-doc table.pa-tabel thead th { background: #ddd !important; color: #000 !important; }
  .pa-doc a { text-decoration: none; color: #000; }
}

/* ═══ 19. Rantai empat titik nilai (N1→N2→N3→N4) ═══════════════════════════
   Dipakai manual Auditor dan manual PJ unit. Keduanya menampilkan rantai yang
   sama; yang berbeda hanya DUA KARTU MANA yang diberi kelas `.milik` — auditor
   memiliki N2 dan N4, unit memiliki N1 dan N3. Karena itu komponennya tinggal
   di berkas bersama dan pemakainya cukup memindahkan kelas itu. */
.pa-doc .pa-nilai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: .55rem;
}
.pa-doc .pa-nilai-sel {
  position: relative;
  background: var(--pa-paper);
  border: 1px solid var(--pa-line);
  border-radius: 8px;
  padding: .7rem .75rem .75rem;
  border-top: 3px solid var(--pa-line-2);
}
.pa-doc .pa-nilai-sel .tt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 1.5rem;
  border-radius: 5px;
  background: var(--pa-line);
  color: var(--pa-ink-2);
  font-family: var(--pa-mono);
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: .35rem;
}
.pa-doc .pa-nilai-sel .nm { font-weight: 700; font-size: .87rem; color: var(--pa-ink); line-height: 1.25; }
.pa-doc .pa-nilai-sel .ds { font-size: .765rem; color: var(--pa-ink-3); line-height: 1.45; margin-top: .18rem; }
.pa-doc .pa-nilai-sel .pk {
  display: inline-block;
  margin-top: .4rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--pa-ink-3);
}
/* Dua titik yang menjadi tanggung jawab auditor disorot; dua lainnya diredam. */
.pa-doc .pa-nilai-sel.milik {
  border-top-color: var(--pa-accent);
  background: var(--pa-accent-sf);
}
.pa-doc .pa-nilai-sel.milik .tt { background: var(--pa-accent); color: #fff; }
.pa-doc .pa-nilai-sel.milik .pk { color: var(--pa-accent); }