:root{
  /* --muted #6b7686 -> #5f6a79 (23 Sep 2026): yang lama hanya 4,11-4,44:1 pada
     latar abu-abu tabel dan kartu (audit v2, 648 unsur). Yang baru >= 4,9:1
     pada kelima latar terang - diukur UI-31, bukan diperkirakan. */
  --bg:#f5f6f8; --card:#fff; --ink:#1c2430; --muted:#5f6a79; --line:#e2e6ec;
  --accent:#12518f; --accent-ink:#fff; --ok:#1a7f4b; --warn:#9a6700; --err:#b3261e;
  --radius:12px;
  /* Skala desain terbatas (CTRL-188/189/190), dijaga uji_token_hantu.py:
     radius hanya --radius-s/-m/(-) + --radius-pil (bentuk pil) + 50% (lingkaran);
     z-index hanya lewat lapisan bernama di bawah, dari yang paling rendah;
     titik henti @media hanya 640px (ponsel) dan 900px (menu melipat) - nilai
     yang sama dibaca app.js dari --titik-sempit, tidak disalin. */
  --radius-s:4px; --radius-m:8px; --radius-pil:999px;   /* --radius (12px) di atas: kartu */
  --z-judul-tabel:2; --z-bilah-aksi:3; --z-mengambang:50; --z-laci-tirai:54; --z-laci:55;
  --z-lapisan:60; --z-lewati:100;
  --titik-ponsel:640px; --titik-sempit:900px;

  /* Permukaan bertingkat. Dipisahkan dari warna pekat supaya tema gelap cukup
     mengganti token, bukan memburu warna satu per satu di 400 baris. */
  --sur-2:#fafbfc;        /* baris berselang, kotak acuan */
  --sur-3:#f0f2f5;        /* tajuk tabel */
  --sur-sorot:#f1f5fb;    /* baris yang disentuh tetikus */
  /* Isian bilah capaian. Terpisah dari token teks: warna teks dipilih untuk
     kontras di atas latar, sedangkan ini dilihat sebagai bidang penuh. */
  --bar-penuh:#2f8f57;--bar-sedang:#b58a12;--bar-awal:#c2681f;
  --sisi-bg:#fff;         /* menu samping */
  --sisi-sorot:#f4f7fb;
  --sisi-on:#eef4fb;
  /* Keterangan butir menu yang SEDANG AKTIF. Wajib token, bukan hex:
     tidak ada satu nilai pun yang lulus kontras 4.5:1 pada latar
     terang #eef4fb DAN latar gelap #1d2c3f sekaligus. Nilai lamanya
     #4a7ab5 gagal pada KEDUANYA - 4.00 dan 3.19. */
  --sisi-ket-on:#4171ac;
  --isian-bg:#fff;        /* kotak isian */
  --isian-line:#ccd3dc;
  --line-2:#e2e8f0;       /* garis pada naskah panjang */
  --ink-2:#2b3442;
  --ink-3:#445061;
  --ink-4:#5a6472;
  --kode-bg:#eef0f3;
  --jalur:#eceff3;        /* alur batang persentase */
  --chip-bg:#22303f;
  --tautan:#12518f;       /* warna teks tautan; di tema gelap dipisah dari --accent */

  /* Warna tingkat risiko menurut Lampiran Perbup h.12. Dijadikan token supaya
     satu set aturan melayani tema terang dan gelap sekaligus - kalau ditulis
     dua kali, cepat atau lambat keduanya berbeda diam-diam. Nilai di bawah ini
     SAMA PERSIS dengan yang sudah dipakai sebelumnya, jadi tampilan terang
     tidak berubah sedikit pun. Akhiran `blok` dipakai untuk sel matriks yang
     terisi penuh warna, yang memang lebih pekat daripada lencana. */
  --m-bg:#fbe3e1; --m-ink:#8f1e18; --m-line:#f0b6b1; --m-blok:#f3b4ae; --m-blok-ink:#6d1712;
  --o-bg:#fdece0; --o-ink:#9a4a06; --o-line:#f5c9a8; --o-blok:#f8cfae; --o-blok-ink:#7a3a05;
  --k-bg:#fdf6d5; --k-ink:#7a5c00; --k-line:#eedc94; --k-blok:#fbeead; --k-blok-ink:#6b5000;
  --h-bg:#e2f2e8; --h-ink:#12603a; --h-line:#b3ddc4; --h-blok:#c6e6d3; --h-blok-ink:#0e4c2e;
  --b-bg:#e0ecfa; --b-ink:#12518f; --b-line:#b6d0ec; --b-blok:#c3d9f2; --b-blok-ink:#0e4176;
  --a-bg:#eef1f4; --a-ink:#5a6472; --a-line:#dde2e8;
  /* Ungu: dipakai .tag.mitra, satu-satunya tag yang terlewat dari
     pemindahan ke token. Disusun seperti keluarga --b-*. */
  --u-bg:#e8e4f7; --u-ink:#4a3a8f;
  /* Teks kendali yang dimatikan. Sengaja pucat - itu maksudnya. */
  --ink-mati:#b6bcc6;
  /* Lencana dan tag memakai abu yang SEDIKIT berbeda dari pill.abu.
     Dibiarkan berbeda dengan sengaja: menyatukannya akan mengubah
     tampilan terang yang sudah dipakai, dan itu bukan perbaikan. */
  --a2-bg:#e8eaee; --a2-ink:#445061;

  /* Bayangan disusun bertingkat supaya kedalaman terbaca konsisten. */
  --bayang-1:0 1px 2px rgba(16,24,40,.04);
  --bayang-2:0 4px 12px rgba(16,24,40,.08);
  --bayang-3:0 12px 32px rgba(16,24,40,.16);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.55 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1{font-size:20px;margin:0 0 4px}
h2{font-size:16px;margin:0 0 12px}
.small{font-size:14px;color:var(--muted)}

/* ---- kerangka ---- */
.top{background:var(--accent);color:var(--accent-ink);padding:0 20px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:0 1px 4px rgba(0,0,0,.15)}
.top .brand{font-weight:700;letter-spacing:.2px;padding:13px 0;font-size:16px}
.top nav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.top nav a{color:#e5f1ff;padding:13px 12px;border-bottom:3px solid transparent}
.top nav a:hover{color:#fff;text-decoration:none;background:rgba(255,255,255,.08)}
.top nav a.on{color:#fff;border-bottom-color:#ffc857;font-weight:600}
.top .me{font-size:13px;color:#e5f1ff;display:flex;align-items:center;gap:10px}
.top .me a{color:#fff;text-decoration:underline}
.wrap{max-width:1140px;margin:22px auto;padding:0 20px}

/* ---- kartu & tabel ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;margin-bottom:18px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.g5{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}

/* Panduan: naskah panjang perlu lebar baca yang terbatas. Baris sepanjang
   layar lebar membuat mata kehilangan barisnya saat kembali ke kiri. */
.naskah{max-width:78ch;line-height:1.65}
.naskah h2{margin:1.4em 0 .5em;font-size:19px}
.naskah h3{margin:1.2em 0 .4em;font-size:16px}
.naskah h4{margin:1em 0 .3em;font-size:14px}
.naskah p{margin:.7em 0}
.naskah ul,.naskah ol{margin:.7em 0 .7em 1.3em;padding:0}
.naskah li{margin:.3em 0}
.naskah blockquote{margin:.9em 0;padding:.5em .9em;border-left:3px solid var(--line);
  background:#f8fafc;color:#475569}
.naskah hr{margin:1.6em 0;border:0;border-top:1px solid var(--line-2)}
.naskah pre.kode{background:#0f172a;color:#e2e8f0;padding:12px 14px;border-radius:var(--radius-m);
  overflow-x:auto;font-size:12.5px;line-height:1.5}
.naskah table{font-size:13px}
.naskah .tablewrap{max-width:100%;margin:.9em 0}

.faq{border:1px solid var(--line-2);border-radius:var(--radius-m);margin:8px 0;background:var(--card)}
.faq summary{cursor:pointer;padding:10px 14px;font-weight:600;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"\25B8 ";color:#64748b}
.faq[open] summary::before{content:"\25BE ";color:#64748b}
.faq-isi{padding:0 14px 12px;border-top:1px solid var(--line)}

/* Penanda halaman. Sasaran sentuh dibuat cukup besar (36px) - daftar risiko
   dibuka juga dari telepon, dan tautan sekecil teks biasa sulit ditekan tepat. */
.halaman{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:12px 0 0}
.hal-btn{display:inline-flex;align-items:center;justify-content:center;
  min-width:36px;height:36px;padding:0 10px;border:1px solid var(--line);
  border-radius:var(--radius-m);background:var(--card);color:var(--accent);font-size:13px;font-weight:600}
.hal-btn:hover{background:var(--sur-sorot);text-decoration:none}
.hal-btn.kini{background:var(--accent);border-color:var(--accent);color:#fff}
.hal-btn.mati{color:var(--muted);background:var(--sur-2);border-style:dashed;cursor:default}
.hal-elipsis{padding:0 4px;color:var(--muted)}
@media print{ .halaman{display:none} }

/* Tajuk tabel yang tetap terlihat saat menggulir.
   Register risiko berisi ratusan baris. Begitu tajuknya lewat ke atas layar,
   pembaca tidak lagi tahu kolom mana yang sedang dibacanya - dan kolom-kolom
   di sini berisi angka yang mirip satu sama lain (kemungkinan, dampak,
   besaran, besaran sesudah penanganan). Salah membaca kolom pada tabel risiko
   bukan kesalahan kecil. */
table thead th,table tr:first-child th{position:sticky;top:0;z-index:var(--z-judul-tabel);
  background:var(--sur-3);box-shadow:inset 0 -1px 0 var(--line)}
@media print{ table thead th,table tr:first-child th{position:static;box-shadow:none} }

/* Kartu diberi bayangan yang sangat tipis supaya batasnya terbaca tanpa garis
   yang berat - layar kantor sering diatur terang, dan garis tipis saja hilang. */
.card{box-shadow:var(--bayang-1)}

/* Baris tabel berselang-seling: mata mudah melompat baris pada tabel lebar. */
table tbody tr:nth-child(even){background:var(--sur-2)}
table tbody tr:hover{background:var(--sur-sorot)}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;box-shadow:var(--bayang-1)}
.stat b{display:block;font-size:30px;line-height:1.15;font-weight:700}
.stat span{color:var(--muted);font-size:13px}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
th{background:var(--sur-3);font-weight:600;font-size:14px;color:var(--ink-3)}
/* Sel judul BARIS yang tampil seperti sel biasa: hubungannya untuk pembaca
   layar, bukan untuk mata (CTRL-278). */
table tr th.th-baris{background:none;font-weight:inherit;font-size:inherit;color:inherit;position:static}
/* Tombol Salin di sel kode: sasaran sentuh sekurang-kurangnya 24 px (WCAG 2.5.8,
   CTRL-273). Sebelumnya 23 px karena bantalan 2 px dan huruf 11,5 px. */
.btn.btn-salin{margin-left:6px;padding:3px 8px;font-size:12px;min-height:26px;line-height:1.2}
/* Kode panjang (sidik SHA, kode risiko) dipatahkan di layar sempit alih-alih
   mendorong seluruh halaman ke samping (CTRL-281, SAPU-01). */
p code,.small code,td code{overflow-wrap:anywhere;word-break:break-all}
/* Kotak centang dan pilihan radio 20 px (bawaan peramban 13 px), dan label
   pembungkusnya memberi jarak ke sasaran lain - WCAG 2.5.8, CTRL-273/292. */
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}
label.pilih{display:inline-flex;align-items:center;gap:8px;min-height:32px;margin:6px 0}
tr:last-child td{border-bottom:0}
/* Tabel panjang menggulir DI DALAM kotaknya sendiri, sehingga tajuknya yang
   melekat benar-benar bertahan di layar. Tabel pendek tidak pernah mencapai
   batas ini, jadi tampilannya tidak berubah. */
.tablewrap{overflow:auto;max-height:72vh}

/* ---- kendali ---- */
label{display:block;font-size:14px;font-weight:600;margin:0 0 5px;color:var(--ink-3)}
/* input:not([type]) = isian teks tanpa atribut type (r7, temuan axe target-size): sebelumnya
   sepuluh isian seperti itu tampil tanpa gaya, tinggi 21 px. */
input:not([type]),input[type=text],input[type=password],input[type=number],input[type=date],select,textarea{
  width:100%;padding:9px 10px;border:1px solid var(--isian-line);border-radius:var(--radius-m);
  font:inherit;background:var(--isian-bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid #a9c6e8;outline-offset:0;border-color:var(--accent)}

/* Cincin fokus untuk tautan dan tombol.
   Sebelumnya hanya kotak isian yang punya penanda fokus, sehingga siapa pun
   yang menelusuri halaman dengan papan ketik tidak dapat melihat di mana
   dirinya berada - dan menu samping berisi 18 butir. :focus-visible dipakai
   supaya cincinnya muncul untuk papan ketik, tidak untuk klik tetikus. */
a:focus-visible,button:focus-visible,summary:focus-visible,.btn:focus-visible,
details:focus-visible{outline:3px solid #ffc857;outline-offset:2px;border-radius:var(--radius-s)}

/* Tautan lewati: tersembunyi sampai difokuskan papan ketik.
   Tanpa ini, setiap perpindahan halaman memaksa pengguna papan ketik menelusuri
   seluruh menu lebih dulu sebelum sampai ke isi yang dicarinya. */
.lewati{position:absolute;left:-9999px;top:0;z-index:var(--z-lewati);background:var(--accent);
  color:#fff;padding:10px 16px;border-radius:0 0 var(--radius) 0;font-weight:600}
.lewati:focus{left:0;text-decoration:none}
.isi:focus{outline:none}
textarea{min-height:78px;resize:vertical}
.field{margin-bottom:14px}
.btn{display:inline-block;padding:9px 16px;border:1px solid var(--accent);border-radius:var(--radius-m);
  background:var(--accent);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{background:#0e4176;text-decoration:none}
.btn.sec{background:var(--card);color:var(--accent)}
.btn.sec:hover{background:#eef3f9}
.btn.danger{background:var(--err);border-color:var(--err)}
.btn.danger:hover{background:#8f1e18}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.right{margin-left:auto}

/* ---- status ---- */
.badge{display:inline-block;padding:2px 9px;border-radius:var(--radius-pil);font-size:12px;font-weight:600;
  background:#e8eaee;color:#445061}
.badge.b{background:#dce9f7;color:#12518f}
.badge.y{background:#fdf0d5;color:#9a6700}
.badge.r{background:#fbe3e1;color:#b3261e}
.badge.gr{background:#dcf0e4;color:#1a7f4b}

.flash{padding:11px 14px;border-radius:var(--radius-m);margin-bottom:16px;border:1px solid;font-size:14px}
.flash.ok{background:#e8f6ee;border-color:#a8d8bd;color:#12603a}
.flash.err{background:#fdecea;border-color:#f2b8b3;color:#8f1e18}
.flash.warn{background:#fff6e5;border-color:#f0d9a8;color:#7a5410}
.empty{padding:34px;text-align:center;color:var(--muted)}

/* ---- login ---- */
.login{max-width:380px;margin:9vh auto;padding:0 20px}
.login .card{padding:26px}
.login h1{text-align:center;margin-bottom:2px}
.login .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:20px}

/* ---- riwayat ---- */
.hist{font-size:14px;border-left:2px solid var(--line);padding-left:14px;margin:0}
.hist li{margin-bottom:9px;list-style:none;position:relative}
.hist li:before{content:"";position:absolute;left:-19px;top:6px;width:8px;height:8px;
  border-radius:50%;background:var(--accent)}
code{background:var(--kode-bg);padding:1px 5px;border-radius:var(--radius-s);font-size:12.5px}
.mono{font-family:Consolas,"Courier New",monospace;font-size:12.5px}
@media (max-width:640px){.top{gap:8px}.top .brand{padding:11px 0}.wrap{margin:14px auto}}

/* ---- level risiko (warna sesuai Lampiran Perbup h.12) ---- */
.pill{display:inline-block;padding:2px 10px;border-radius:var(--radius-pil);font-size:12px;font-weight:600;
  border:1px solid transparent}
.pill.merah {background:#fbe3e1;color:#8f1e18;border-color:#f0b6b1}
.pill.oranye{background:#fdece0;color:#9a4a06;border-color:#f5c9a8}
.pill.kuning{background:#fdf6d5;color:#7a5c00;border-color:#eedc94}
.pill.biru  {background:#e0ecfa;color:#12518f;border-color:#b6d0ec}
.pill.hijau {background:#e2f2e8;color:#12603a;border-color:#b3ddc4}

.tag{display:inline-block;padding:1px 7px;border-radius:var(--radius-s);font-size:11px;font-weight:600;
  background:#e8eaee;color:#445061;margin-left:4px}
.tag.fraud{background:#fbe3e1;color:#8f1e18}
.tag.mitra{background:var(--u-bg);color:var(--u-ink)}

/* ---- matriks analisis risiko ---- */
table.matrix td.cell{text-align:center;font-weight:700;font-size:15px;width:15%;
  border:1px solid var(--card)}
table.matrix td.cell.merah {background:#f3b4ae;color:#6d1712}
table.matrix td.cell.oranye{background:#f8cfae;color:#7a3a05}
table.matrix td.cell.kuning{background:#fbeead;color:#6b5000}
table.matrix td.cell.biru  {background:#c3d9f2;color:#0e4176}
table.matrix td.cell.hijau {background:#c6e6d3;color:#0e4c2e}
table.matrix th{background:#f0f2f5;text-align:center}

.nilai-box{display:flex;align-items:center;gap:14px;background:#f0f3f7;border:1px solid var(--line);
  border-radius:var(--radius-m);padding:12px 14px;margin-top:6px}
.nilai-box .angka{font-size:34px;font-weight:700;line-height:1;color:var(--accent)}

/* ---------- dashboard: pengukur, ubin, batang ---------- */
.gauge{text-align:center}
.gauge svg{max-width:280px;margin:4px auto 0;display:block;height:auto}
.gauge-ket{margin:2px 0 0;font-size:13px;color:var(--muted)}

/* Ubin jenis risiko. Satu baris pada layar lebar, membungkus pada layar sempit,
   sehingga tetap terbaca di ponsel tanpa aturan media tersendiri. */
.ubin{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.ubin-item{display:block;padding:12px 12px 10px;border-radius:var(--radius);border:1px solid;
  text-align:center;color:var(--ink-2);transition:transform .08s ease}
.ubin-item:hover{transform:translateY(-2px);text-decoration:none}
.ubin-item b{display:block;font-size:26px;line-height:1.15;font-weight:700}
/* Tanpa opacity: pemudaran menurunkan kontras teks sampai 1,7:1 (UI-31).
   Hierarki cukup dari ukuran dan ketebalan huruf. */
.ubin-kode{display:block;font-size:11px;font-weight:700;letter-spacing:.06em}
.ubin-nama{display:block;font-size:11px;line-height:1.3;margin-top:3px}
.ubin-item.merah {background:#fbe3e1;border-color:#f0b6b1;color:#8f1e18}
.ubin-item.oranye{background:#fdece0;border-color:#f5c9a8;color:#9a4a06}
.ubin-item.kuning{background:#fdf6d5;border-color:#eedc94;color:#7a5c00}
.ubin-item.hijau {background:#dcf0e4;border-color:#a8d8bd;color:#12603a}
.ubin-item.biru  {background:#dce9f7;border-color:#a9c6e8;color:#12518f}

/* Batang persentase pada tabel rincian. */
.bar{height:9px;border-radius:var(--radius-s);background:var(--jalur);overflow:hidden}
.bar span{display:block;height:100%;border-radius:var(--radius-s)}
table.rinci{width:100%}
table.rinci td{border:0;padding:7px 8px;vertical-align:middle}
table.rinci tr+tr td{border-top:1px solid var(--line)}
.muted{color:var(--muted)}

/* ---------- baris saringan dan pencarian ---------- */
.saring{padding-bottom:14px}
.saring-baris{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.saring-baris input[type=search]{flex:1 1 260px;min-width:180px}
.saring-baris select{flex:0 1 190px}
/* Pemilih Beranda (OPD, tahun) selebar isinya: 190px memotong "Seluruh tahun register (2)".
   Dibatasi lebar layar supaya nama OPD yang panjang tidak menggulir halaman di ponsel. */
.saring-beranda select{flex:0 1 auto;width:auto;max-width:100%}

/* ---------- cetak ---------- */
/* Halaman daftar sering dicetak untuk rapat. Yang dicetak hanya isinya:
   menu, tombol, dan kotak saringan tidak ikut supaya kertas tidak terbuang. */
@media print{
  .top,.saring,.btn,.tabs,nav{display:none !important}
  .card{border:0;box-shadow:none;padding:0;margin:0 0 10px}
  body{background:#fff}
  table{font-size:11px}
  a{color:#000;text-decoration:none}
  /* Saat dicetak, batas tinggi HARUS dilepas - kalau tidak, tabel terpotong
     pada kertas dan yang tercetak bukan seluruh isinya. */
  .tablewrap{overflow:visible;max-height:none}
}

/* ---------- acuan kriteria skala ---------- */
.acuan{margin:10px 0 4px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--sur-2)}
.acuan summary{padding:9px 12px;cursor:pointer;font-size:13px;font-weight:600;color:var(--accent)}
.acuan[open] summary{border-bottom:1px solid var(--line)}
.acuan-tabel{width:100%;font-size:12px}
.acuan-tabel td,.acuan-tabel th{padding:6px 10px;vertical-align:top}
.acuan p{padding:0 12px 10px;margin:6px 0 0}

/* ---------- tata letak menyamping: menu di kiri, isi melebar ---------- */
/* Dengan sebelas butir menu, satu baris mendatar menjadi sempit dan terpotong.
   Menu di samping membuat area isi melebar, sehingga tabel lebar (kode, K, D,
   nilai, level, RTP, realisasi) terbaca tanpa digulung ke samping. */
.tata{display:flex;align-items:flex-start;gap:0;min-height:calc(100vh - 56px)}
.sisi{flex:0 0 232px;background:var(--sisi-bg);border-right:1px solid var(--line);
  padding:14px 0 20px;position:sticky;top:0;align-self:stretch}
.sisi-judul{padding:14px 18px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.sisi-butir{display:flex;gap:10px;align-items:flex-start;padding:9px 18px;
  color:var(--ink-2);border-left:3px solid transparent}
.sisi-butir:hover{background:var(--sisi-sorot);text-decoration:none}
.sisi-butir.on{background:var(--sisi-on);border-left-color:var(--accent);color:var(--accent)}
.sisi-teks{display:block;min-width:0}
.sisi-l{display:block;font-size:14px;font-weight:600;line-height:1.3}
.sisi-ket{display:block;font-size:11px;color:var(--muted);line-height:1.35;margin-top:1px}
.sisi-butir.on .sisi-ket{color:var(--sisi-ket-on)}
.sisi-kaki{margin:16px 18px 0;font-size:11px;line-height:1.45;color:var(--muted)}
.isi{flex:1 1 auto;min-width:0;padding:22px 24px 0}
.kaki{margin:26px 0 30px;font-size:12px;color:var(--muted)}

/* Pada layar sempit, menu kembali menumpuk di atas isi. */
@media (max-width:900px){
  .tata{flex-direction:column}
  /* Menu dibatasi tingginya dan menggulir sendiri. Tanpa batas ini, 18 butir
     menu menjadi dinding setinggi layar DI ATAS isi halaman - dan pemakai
     telepon harus menggulir melewati seluruhnya pada setiap halaman. */
  .sisi{flex:none;width:100%;border-right:0;border-bottom:1px solid var(--line);position:static;
    max-height:44vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .sisi-butir{border-left:0;border-bottom:3px solid transparent}
  .sisi-butir.on{border-left:0;border-bottom-color:var(--accent)}
  .isi{padding:16px 16px 0;width:100%}
}
@media print{ .sisi{display:none !important} .isi{padding:0} .kaki{display:none} }
/* Menu samping lengket dan menggulir SENDIRI pada layar lebar (CTRL-003/177):
   sebelumnya ia terbentang setinggi isinya, sehingga panjang menu - bukan
   panjang isi - menentukan tinggi halaman, dan butir bawahnya hilang begitu
   isi digulir. Latar kolom menu di bawahnya dilukis pada .tata. */
@media (min-width:901px){
  .sisi{align-self:flex-start;max-height:100vh;overflow-y:auto;overscroll-behavior:contain}
  .tata{background:linear-gradient(to right,var(--sisi-bg) 0,var(--sisi-bg) 231px,
        var(--line) 231px,var(--line) 232px,transparent 232px)}
}
@media print{ .tata{background:none} .remah{display:none} }
/* Remah halaman tingkat dua (CTRL-175). */
.remah{margin:0 0 10px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.remah a{color:var(--tautan)}
.yang-baru[hidden]{display:none !important}
/* Ditampilkan skrip SESUDAH halaman dilukis (tanda tutupnya ada di peramban).
   Karena itu melayang, bukan menyisip di atas isi: menyisip menggeser seluruh
   halaman ~250 px dan menjadi pergeseran tata letak terbesar di aplikasi (SAPU-11). */
.flash.yang-baru{position:fixed;right:16px;bottom:16px;max-width:440px;z-index:var(--z-lapisan);margin:0}
@media (max-width:640px){ .flash.yang-baru{left:12px;right:12px;max-width:none} }
/* Urut kolom dan cip saringan (CTRL-243/244). */
.urut-tautan{color:inherit;text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.urut-tautan:hover{text-decoration:underline}
.urut-tombol{background:none;border:0;padding:2px 0;font:inherit;color:inherit;cursor:pointer;min-height:24px;text-align:inherit}
.urut-tombol:hover{text-decoration:underline}
th[aria-sort="ascending"] .urut-panah,th[aria-sort="descending"] .urut-panah{color:var(--accent)}
.saring-aktif{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0}
.cip-saring{display:inline-flex;align-items:center;gap:4px;min-height:26px;padding:2px 10px;border-radius:var(--radius-pil);
  background:var(--sur-3);color:var(--ink-2);text-decoration:none;font-size:13px}
.cip-saring:hover{background:var(--sisi-sorot);text-decoration:none}
.kaki-panduan{margin:10px 0 0}
.minta-bantuan{margin-top:10px}
.minta-bantuan textarea{width:100%;max-width:560px;font:12px/1.4 ui-monospace,monospace}
.flash .mengapa{margin-left:8px;color:inherit;text-decoration:underline}
.hasil-cari{list-style:none;margin:8px 0 0;padding:0}
.hasil-cari li{padding:8px 0;border-top:1px solid var(--line)}
@media print{ .minta-bantuan,.yang-baru,.cari-panduan,.cetak{display:none !important} }

/* ---------- sel triwulan pada Realisasi Penanganan ---------- */
.sel-tw{display:inline-block;min-width:52px;padding:5px 8px;border-radius:var(--radius-s);
  border:1px dashed var(--line);background:#fafbfc;color:var(--muted);
  font-size:12px;font-weight:600}
.sel-tw:hover{text-decoration:none;border-color:var(--accent);color:var(--accent)}
.sel-tw.terisi{border-style:solid;background:#dcf0e4;border-color:#a8d8bd;color:#12603a}

/* ---------- kartu progres per tahapan ---------- */
.tahap{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin-bottom:18px}
.tahap-kartu{display:block;padding:14px 16px;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--card);color:var(--ink-2)}
.tahap-kartu:hover{text-decoration:none;border-color:var(--accent)}
.tahap-atas{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.tahap-nama{font-size:13px;font-weight:700}
.tahap-form{font-size:11px;color:var(--muted);white-space:nowrap}
.tahap-angka{margin:6px 0 8px;display:flex;align-items:baseline;gap:6px}
.tahap-angka b{font-size:26px;font-weight:700;line-height:1}
.tahap-persen{margin-left:auto;font-size:12px;font-weight:700;color:var(--muted)}
.tahap-ket{display:block;margin-top:7px;font-size:11px;color:var(--muted);line-height:1.4}
.tahap-kartu.biru   .bar span{background:#4a90d9}
.tahap-kartu.kuning .bar span{background:#e9c245}
.tahap-kartu.oranye .bar span{background:#ef9a4a}
.tahap-kartu.hijau  .bar span{background:#4aa96c}

/* ---------- pemetaan risiko pada matriks ---------- */
.peta-matriks{border-collapse:separate;border-spacing:3px;width:auto}
.peta-matriks td{width:82px;height:62px;text-align:center;vertical-align:middle;
  border-radius:var(--radius-s);border:0;position:relative;padding:4px}
.peta-matriks .sel-nilai{display:block;font-size:15px;font-weight:700}
/* Sel sudut kosong di bawah sumbu (td, bukan th: sel judul kosong dibacakan
   pembaca layar sebagai judul tanpa nama - CTRL-278). */
.peta-matriks td.sudut{width:auto;height:auto;border:0;background:none;padding:0}
.peta-matriks .sel-merah {background:#fbe3e1;color:#8f1e18}
.peta-matriks .sel-oranye{background:#fdece0;color:#9a4a06}
.peta-matriks .sel-kuning{background:#fdf6d5;color:#7a5c00}
.peta-matriks .sel-hijau {background:#dcf0e4;color:#12603a}
.peta-matriks .sel-biru  {background:#dce9f7;color:#12518f}
.sel-titik{display:flex;gap:4px;justify-content:center;margin-top:2px}
.titik{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;
  padding:0 5px;border-radius:var(--radius);font-size:11px;font-weight:700;color:#fff}
.titik.I{background:#12518f}
.titik.R{background:#12603a}
.peta-matriks .sumbu-lab{font-size:12px;color:var(--muted);border:0;background:none;
  text-align:center;font-weight:600}
.peta-matriks .sumbu-x{font-size:12px;color:var(--muted);border:0;background:none;
  text-align:center;padding-top:2px}
.peta-matriks .sumbu-y{border:0;background:none;vertical-align:middle;width:26px}
.peta-matriks .sumbu-y span{writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:12px;color:var(--muted)}

/* ---------- pemantauan aktivitas pada Jejak Audit ---------- */
.saring{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.saring label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted)}
.saring input,.saring select{padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-m);
  font:inherit;min-width:150px}
.dua-kolom{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* ---------- bukti dukung ---------- */
tr.pudar td{opacity:.62}
tr.pudar b{font-weight:600;text-decoration:line-through}

/* ---------- Monitoring Aktivitas ---------- */
/* Penanda tahap: centang bila tahapnya sudah ada datanya, titik bila belum.
   Sengaja bukan hanya warna - pembaca yang sulit membedakan warna tetap dapat
   membaca bentuknya. */
.jejak-titik{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;
  border:1px solid var(--line);background:#f4f6f8;color:#9aa3ad}
.jejak-titik.ada{background:#e2f2e8;border-color:#b3ddc4;color:#12603a}
.jejak-titik.kosong{background:var(--card);border-style:dashed}

/* Skor sebagai tiga kotak: kemungkinan, dampak, dan hasilnya. Bentuk ini
   dipakai aplikasi pembanding dan memang terbaca cepat. */
.skor{display:inline-flex;gap:3px;align-items:center}
.skor i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;
  border-radius:var(--radius-s);background:#eef1f4;color:#5a6472;font-style:normal;font-size:11.5px;
  font-weight:600}
.skor b.pill{min-width:26px;text-align:center;border-radius:var(--radius-s);padding:2px 6px}

table.aktivitas th.tegak{writing-mode:vertical-rl;transform:rotate(180deg);
  white-space:nowrap;padding:8px 2px;font-weight:600;font-size:11.5px;color:var(--muted)}
table.aktivitas td{vertical-align:top}
table.aktivitas tr.keadaan-belum td:first-child{box-shadow:inset 3px 0 0 #e0a800}
table.aktivitas tr.keadaan-tuntas td:first-child{box-shadow:inset 3px 0 0 #2f9e63}

/* Kartu angka yang dapat diklik untuk menyaring. */
a.stat{text-decoration:none;color:inherit;display:block}
a.stat:hover{border-color:var(--accent)}
a.stat.terpilih{border-color:var(--accent);box-shadow:0 0 0 2px rgba(31,109,189,.14)}

/* Chip pada judul halaman: kode risiko dan ringkasan peristiwanya. */
.chip{display:inline-block;padding:2px 9px;border-radius:var(--radius-s);font-size:12px;font-weight:600;
  background:#22303f;color:#fff;vertical-align:middle;margin-left:6px}
.chip.mono{font-family:Consolas,"Courier New",monospace}

.pill.abu{background:#eef1f4;color:#5a6472;border-color:#dde2e8}

/* ---------- Strategi penanganan risiko (acuan SIMENTARI) ---------- */
.strategi{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.strategi-kartu{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;
  background:var(--card)}
.strategi-kartu b{display:block;font-size:28px;line-height:1.15}
.strategi-kartu .nama{font-weight:600;margin-bottom:4px}
.strategi-kartu .arti{color:var(--muted);font-size:12.5px}
.strategi-kartu.accept   {border-left:4px solid var(--h-ink)}
.strategi-kartu.treatment{border-left:4px solid var(--b-ink)}
.strategi-kartu.transfer {border-left:4px solid var(--o-ink)}
.strategi-kartu.avoid    {border-left:4px solid var(--m-ink)}

@media print{
  .sisi,.top,.saring,.btn{display:none!important}
  .wrap{margin:0}
  table.aktivitas th.tegak{writing-mode:horizontal-tb;transform:none}
}

/* Sel peta risiko yang berisi risiko dapat diklik untuk membuka daftarnya. */
.sel-tautan{text-decoration:none;color:inherit;display:inline-block}
.sel-tautan:hover .sel-nilai{text-decoration:underline}

/* =======================================================================
   LAPISAN KENYAMANAN
   Ditambahkan sebagai lapisan, bukan tulis ulang: seluruh aturan di atas
   tetap berlaku apa adanya, sehingga tampilan terang yang sudah dipakai dan
   diuji tidak berubah perilakunya. Aturan di bawah ini menimpa yang di atas
   karena urutannya, bukan karena kekhususan selektor yang dinaikkan - dengan
   begitu satu pun aturan lama tidak perlu dibongkar.
   ======================================================================= */

/* ---------- 1. Gerak yang dapat dimatikan ---------- */
/* Sebagian orang pusing oleh gerak di layar, dan sistemnya sudah menyatakan
   itu. Menghormati pernyataan yang sudah ada lebih tepat daripada menambah
   satu saklar lagi yang harus dicari sendiri. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* Kelompok menu adalah daftar bernama (<ul aria-labelledby>, r7): pembaca layar
   menyebut nama kelompok dan jumlah butirnya. Tampilannya tetap tanpa butir. */
.sisi-daftar{list-style:none;margin:0;padding:0}
.sisi-daftar li{margin:0}
.ikon-garis{width:16px;height:16px;flex:0 0 auto;display:block}

/* ---------- 2. Laci menu untuk layar sempit (r7) ---------- */
/* Sampai S21 menu terlipat di bawah kepala halaman dan dibuka tombol "Menu"
   selebar layar. Kini menu menjadi LACI yang dibuka tombol di kepala halaman
   dan menutupi isi dari kiri - isi tidak lagi terdorong turun. Laci hanya
   dipakai bila skrip awal berjalan (kelas .ada-js dipasang tema.js sebelum
   halaman dilukis, jadi tidak ada lompatan tata letak). Tanpa skrip, menu
   tetap menumpuk di atas isi seperti sebelumnya - tidak ada yang hilang.
   Bila app.js gagal dimuat, tombolnya (tautan ke #menu-utama) tetap membuka
   laci lewat :target. */
.laci-tombol,.laci-kepala{display:none}
@media (min-width:901px){.sisi-saring{display:none}}
@media (max-width:900px){
  .laci-tombol{display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;
    justify-content:center;padding:0 10px;margin-left:-6px;border-radius:var(--radius-m);
    color:#fff;font-weight:600;font-size:14px}
  .laci-tombol:hover{background:rgba(255,255,255,.12);text-decoration:none}
  .laci-tombol .garis{display:inline-flex;flex-direction:column;gap:3px;width:18px}
  .laci-tombol .garis i{display:block;height:2px;background:currentColor;border-radius:var(--radius-s)}
  .ada-js .sisi{position:fixed;top:0;bottom:0;left:0;width:min(340px,88vw);max-height:none;
    z-index:var(--z-laci);border-right:1px solid var(--line);border-bottom:0;padding:0 0 24px;
    overflow-y:auto;overscroll-behavior:contain;transform:translateX(-105%);visibility:hidden;
    transition:transform .2s ease,visibility .2s}
  .ada-js.laci-buka .sisi,.ada-js .sisi:target{transform:none;visibility:visible;box-shadow:var(--bayang-3)}
  .ada-js.laci-buka{overflow:hidden}
  .ada-js .laci-kepala{display:flex;align-items:center;justify-content:space-between;gap:8px;
    position:sticky;top:0;z-index:var(--z-judul-tabel);background:var(--sisi-bg);
    border-bottom:1px solid var(--line);padding:6px 8px 6px 18px}
  .laci-judul{font-weight:700;font-size:15px}
  .laci-tutup{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;
    border-radius:var(--radius-m);font-weight:600;color:var(--tautan)}
  .sisi-saring{padding:12px 14px 4px}
  .sisi-saring input{width:100%;min-height:44px}
  .sisi-saring-kosong{margin:8px 2px 0}
  .sisi-saring-kosong:empty{display:none}
  .ada-js .sisi-butir{border-left:3px solid transparent;border-bottom:0}
  .ada-js .sisi-butir.on{border-left-color:var(--accent);border-bottom:0}
  .laci-tirai{position:fixed;inset:0;background:rgba(10,16,24,.45);z-index:var(--z-laci-tirai)}
}

/* ---------- 3. Lompat cepat antar menu ---------- */
/* Dengan 19 butir menu, mencari satu halaman berarti membaca seluruh daftar.
   Ctrl+K membuka kotak ketik yang menyaring menu sambil diketik. Ini tambahan,
   bukan pengganti: menu samping tetap ada dan tetap dapat diklik. */
.lompat-tirai{position:fixed;inset:0;background:rgba(10,16,24,.45);z-index:var(--z-lapisan);
  display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.lompat-kotak{width:100%;max-width:560px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--bayang-3);overflow:hidden}
.lompat-kotak input{width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;
  padding:15px 18px;font-size:15px;background:var(--card);color:var(--ink)}
.lompat-kotak input:focus{outline:none}
.lompat-daftar{list-style:none;margin:0;padding:6px;max-height:52vh;overflow-y:auto}
.lompat-daftar li{margin:0}
.lompat-daftar a{display:flex;align-items:baseline;gap:10px;padding:10px 12px;
  border-radius:var(--radius-m);color:var(--ink)}
.lompat-daftar a:hover,.lompat-daftar a.sorot{background:var(--sisi-on);text-decoration:none}
.lompat-daftar .l{font-weight:600;font-size:14px}
.lompat-daftar .k{font-size:11.5px;color:var(--muted);margin-left:auto;white-space:nowrap}
.lompat-kosong{padding:18px;text-align:center;color:var(--muted);font-size:13px}
.lompat-kaki{padding:9px 14px;border-top:1px solid var(--line);font-size:11.5px;
  color:var(--muted);display:flex;gap:14px;flex-wrap:wrap;background:var(--sur-2)}
kbd{display:inline-block;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;
  border-radius:var(--radius-s);background:var(--card);font-family:inherit;font-size:11px;font-weight:600}

/* ---------- 4. Saklar tema ---------- */
.tema-tombol{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:var(--radius-pil);
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.10);
  color:inherit;font:inherit;font-size:12px;cursor:pointer;line-height:1.4}
.tema-tombol:hover{background:rgba(255,255,255,.2)}
.tema-tombol{min-width:34px;justify-content:center}
.tema-tombol[data-belum-siap]{visibility:hidden}

/* ---------- 5. Tanda bahwa tabel berlanjut ke samping ---------- */
/* Tabel register lebih lebar daripada layar telepon. Tanpa penanda, kolom di
   sebelah kanan tidak diketahui ada - pengguna menyimpulkan datanya tidak ada,
   padahal hanya belum tergulir. Tepi meredup hanya ke arah yang masih
   menyembunyikan isi, dan pulih begitu sampai ujung. */
.tablewrap{position:relative}
.tablewrap.geser-kanan{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)}
.tablewrap.geser-dua{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
  mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.tablewrap.geser-kiri{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px);
  mask-image:linear-gradient(to right,transparent,#000 34px)}
@media print{
  .tablewrap.geser-kanan,.tablewrap.geser-kiri,.tablewrap.geser-dua{
    -webkit-mask-image:none;mask-image:none}
}

/* ---------- 6. Pesan hasil tindakan ---------- */
.flash{position:relative;padding-right:42px;box-shadow:var(--bayang-1)}
.flash-tutup{position:absolute;top:6px;right:8px;width:28px;height:28px;border:0;
  border-radius:var(--radius-s);background:transparent;color:inherit;font-size:17px;line-height:1;
  cursor:pointer;opacity:.6}
.flash-tutup:hover{opacity:1;background:rgba(0,0,0,.06)}

/* ---------- 7. Tombol yang sedang mengirim ---------- */
/* Menekan Simpan dua kali karena halaman terasa diam adalah kejadian biasa.
   Pengiriman kedua memang sudah ditolak di sisi server, tetapi pengguna tidak
   melihat penolakan itu - yang dilihatnya hanya layar yang tidak menjawab.
   Karena itu tombolnya sendiri yang menyatakan sedang bekerja. */
.btn.sibuk{opacity:.75;cursor:progress;pointer-events:none}
.btn.sibuk::after{content:"";display:inline-block;width:11px;height:11px;margin-left:8px;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  vertical-align:-1px;animation:putar .7s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}

/* ---------- 8. Sasaran sentuh pada layar sempit ---------- */
@media (max-width:640px){
  .btn{padding:11px 18px}
  .sisi-butir{padding:12px 18px}
  .saring-baris input[type=search],.saring-baris select{min-height:42px}
}

/* ---------- 9. Baris yang baru saja dituju ---------- */
:target{scroll-margin-top:14px}
tr:target td{background:var(--sisi-on);box-shadow:inset 3px 0 0 var(--accent)}

/* ---------- 10. Kedalaman yang konsisten ---------- */
.tahap-kartu,.strategi-kartu,.ubin-item{box-shadow:var(--bayang-1)}
.tahap-kartu:hover,a.stat:hover{box-shadow:var(--bayang-2)}
.card{border-radius:var(--radius)}

/* =======================================================================
   TEMA GELAP
   Dinyalakan oleh setelan sistem, dan dapat ditimpa sendiri lewat saklar di
   kepala halaman. Warna status TIDAK dibalik melainkan disesuaikan: artinya
   harus tetap sama, sebab warna-warna itu mengikuti Lampiran Perbup h.12 -
   merah tetap berarti paling berbahaya, hijau tetap paling ringan. Yang
   berubah hanya terangnya, supaya tetap terbaca di atas latar pekat.
   ======================================================================= */
@media (max-width: 0px){
  :root:not([data-tema="terang"]){
    --bg:#111720; --card:#19202a; --ink:#e6ecf4; --muted:#8fa0b4; --line:#2b3644;
    --accent:#2f6fb5; --tautan:#7ab5f5;
    --sur-2:#1e2631; --sur-3:#222b37; --sur-sorot:#273241;
    --bar-penuh:#4aa96c; --bar-sedang:#e9c245; --bar-awal:#ef9a4a;
    --sisi-bg:#161d26; --sisi-sorot:#1f2836; --sisi-on:#1d2c3f;
    --sisi-ket-on:#6595d0;
    --isian-bg:#131a23; --isian-line:#3a4757; --line-2:#2b3644;
    --ink-2:#dae2ec; --ink-3:#aebbca; --ink-4:#9aa8b8;
    --kode-bg:#232c38; --jalur:#26303d; --chip-bg:#33414f;
    --bayang-1:0 1px 2px rgba(0,0,0,.4);
    --bayang-2:0 4px 12px rgba(0,0,0,.5);
    --bayang-3:0 12px 32px rgba(0,0,0,.6);
    --m-bg:#3a1e1c; --m-ink:#ffb3aa; --m-line:#5b2b27; --m-blok:#7d2e27; --m-blok-ink:#ffece7;
    --o-bg:#3a2718; --o-ink:#ffc79a; --o-line:#5c3e23; --o-blok:#8a4d18; --o-blok-ink:#ffe3c9;
    --k-bg:#38331a; --k-ink:#f0dc8e; --k-line:#574f27; --k-blok:#7a6a1c; --k-blok-ink:#fdf3c8;
    --h-bg:#17301f; --h-ink:#8ed7a9; --h-line:#234a31; --h-blok:#1f6b41; --h-blok-ink:#cdeeda;
    --b-bg:#17293d; --b-ink:#9ac8fb; --b-line:#24405e; --b-blok:#1f5490; --b-blok-ink:#d4e6fb;
    --a-bg:#242d38; --a-ink:#aebbca; --a-line:#333e4b;
    --u-bg:#241f3d; --u-ink:#c0b3f5;
    --ink-mati:#4a5666;
    --a2-bg:#2a3441; --a2-ink:#c2ccd9;
  }
}
:root[data-tema="disabled-dark-mode"]{
  --bg:#111720; --card:#19202a; --ink:#e6ecf4; --muted:#8fa0b4; --line:#2b3644;
  --accent:#2f6fb5; --tautan:#7ab5f5;
  --sur-2:#1e2631; --sur-3:#222b37; --sur-sorot:#273241;
  --sisi-bg:#161d26; --sisi-sorot:#1f2836; --sisi-on:#1d2c3f;
  --isian-bg:#131a23; --isian-line:#3a4757; --line-2:#2b3644;
  --ink-2:#dae2ec; --ink-3:#aebbca; --ink-4:#9aa8b8;
  --kode-bg:#232c38; --jalur:#26303d; --chip-bg:#33414f;
  --bayang-1:0 1px 2px rgba(0,0,0,.4);
  --bayang-2:0 4px 12px rgba(0,0,0,.5);
  --bayang-3:0 12px 32px rgba(0,0,0,.6);
  --m-bg:#3a1e1c; --m-ink:#ffb3aa; --m-line:#5b2b27; --m-blok:#7d2e27; --m-blok-ink:#ffece7;
  --o-bg:#3a2718; --o-ink:#ffc79a; --o-line:#5c3e23; --o-blok:#8a4d18; --o-blok-ink:#ffe3c9;
  --k-bg:#38331a; --k-ink:#f0dc8e; --k-line:#574f27; --k-blok:#7a6a1c; --k-blok-ink:#fdf3c8;
  --h-bg:#17301f; --h-ink:#8ed7a9; --h-line:#234a31; --h-blok:#1f6b41; --h-blok-ink:#cdeeda;
  --b-bg:#17293d; --b-ink:#9ac8fb; --b-line:#24405e; --b-blok:#1f5490; --b-blok-ink:#d4e6fb;
  --a-bg:#242d38; --a-ink:#aebbca; --a-line:#333e4b;
  --u-bg:#241f3d; --u-ink:#c0b3f5;
  --ink-mati:#4a5666;
  --a2-bg:#2a3441; --a2-ink:#c2ccd9;
}

/* ---------- Warna status dipasang lewat token ---------- */
/* Satu set aturan melayani kedua tema. Tanpa ini, setiap warna harus ditulis
   dua kali dan cepat atau lambat keduanya berbeda diam-diam. */
.pill.merah {background:var(--m-bg);color:var(--m-ink);border-color:var(--m-line)}
.pill.oranye{background:var(--o-bg);color:var(--o-ink);border-color:var(--o-line)}
.pill.kuning{background:var(--k-bg);color:var(--k-ink);border-color:var(--k-line)}
.pill.hijau {background:var(--h-bg);color:var(--h-ink);border-color:var(--h-line)}
.pill.biru  {background:var(--b-bg);color:var(--b-ink);border-color:var(--b-line)}
.pill.abu   {background:var(--a-bg);color:var(--a-ink);border-color:var(--a-line)}

.badge   {background:var(--a2-bg);color:var(--a2-ink)}
.badge.b {background:var(--b-bg);color:var(--b-ink)}
.badge.y {background:var(--k-bg);color:var(--k-ink)}
.badge.r {background:var(--m-bg);color:var(--m-ink)}
.badge.gr{background:var(--h-bg);color:var(--h-ink)}

.tag      {background:var(--a2-bg);color:var(--a2-ink)}
.tag.fraud{background:var(--m-bg);color:var(--m-ink)}

.ubin-item.merah {background:var(--m-bg);border-color:var(--m-line);color:var(--m-ink)}
.ubin-item.oranye{background:var(--o-bg);border-color:var(--o-line);color:var(--o-ink)}
.ubin-item.kuning{background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}
.ubin-item.hijau {background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.ubin-item.biru  {background:var(--b-bg);border-color:var(--b-line);color:var(--b-ink)}
/* Jenis yang belum berisi risiko dibedakan dengan latar netral, BUKAN dengan
   opacity .5 - ubin yang dipudarkan tidak terbaca (kontras 1,7:1). Diletakkan
   sesudah aturan warna supaya menang pada kedua tema. */
.ubin-item.kosong{background:var(--sur-2);border-color:var(--line);color:var(--muted);box-shadow:none}

table.matrix td.cell.merah {background:var(--m-blok);color:var(--m-blok-ink)}
table.matrix td.cell.oranye{background:var(--o-blok);color:var(--o-blok-ink)}
table.matrix td.cell.kuning{background:var(--k-blok);color:var(--k-blok-ink)}
table.matrix td.cell.hijau {background:var(--h-blok);color:var(--h-blok-ink)}
table.matrix td.cell.biru  {background:var(--b-blok);color:var(--b-blok-ink)}
table.matrix th{background:var(--sur-3)}

.peta-matriks .sel-merah {background:var(--m-bg);color:var(--m-ink)}
.peta-matriks .sel-oranye{background:var(--o-bg);color:var(--o-ink)}
.peta-matriks .sel-kuning{background:var(--k-bg);color:var(--k-ink)}
.peta-matriks .sel-hijau {background:var(--h-bg);color:var(--h-ink)}
.peta-matriks .sel-biru  {background:var(--b-bg);color:var(--b-ink)}

.flash.ok  {background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.flash.err {background:var(--m-bg);border-color:var(--m-line);color:var(--m-ink)}
.flash.warn{background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}

/* Catatan di awal formulir yang isiannya dikembalikan server sesudah ditolak
   (Isian::pembuka). Bukan flash kedua: ia menunjuk FORMULIR mana yang harus
   diperbaiki bila satu halaman memuat banyak formulir. */
.isian-kembali{margin:0 0 12px;padding:9px 12px;border:1px solid var(--k-line);border-radius:var(--radius-m);
  background:var(--k-bg);color:var(--k-ink);font-size:14px}

.jejak-titik{background:var(--sur-2);border-color:var(--line);color:var(--muted)}
.jejak-titik.ada{background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.sel-tw{background:var(--sur-2);border-color:var(--line);color:var(--muted)}
.sel-tw.terisi{background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink)}
.skor i{background:var(--sur-3);color:var(--ink-4)}
.nilai-box{background:var(--sur-2);border-color:var(--line)}
.chip{background:var(--chip-bg,#22303f)}

.naskah blockquote{background:var(--sur-2);border-left-color:var(--line-2);color:var(--ink-3)}
.naskah hr{border-top-color:var(--line-2)}
.faq-isi{border-top-color:var(--line-2)}
.faq summary::before,.faq[open] summary::before{color:var(--muted)}

/* ---------- Warna tautan ---------- */
/* Di tema terang, warna tautan sama dengan warna lembaga. Di tema gelap, warna
   itu terlalu pekat untuk dibaca di atas latar gelap, sehingga dipisahkan
   menjadi token tersendiri - biru yang lebih terang untuk teks, biru pekat
   tetap dipakai sebagai LATAR tombol supaya tulisan putih di atasnya tetap
   berkontras cukup. Nilai terangnya ditetapkan bersama token lain di :root. */
a{color:var(--tautan)}
.hal-btn{color:var(--tautan)}
.btn.sec{color:var(--tautan)}
.acuan summary{color:var(--tautan)}
.sisi-butir.on{color:var(--tautan)}
.sisi-butir.on .sisi-ket{color:var(--tautan);opacity:.8}
.nilai-box .angka{color:var(--tautan)}
tr.pudar td{opacity:.62}

/* ---------- Cetak selalu terang ---------- */
/* Kertas tidak punya tema gelap. Tanpa pengembalian ini, mencetak dari tema
   gelap menghasilkan halaman dengan tulisan pucat di atas putih. */
@media print{
  :root,:root[data-tema="disabled-dark-mode"]{
    --bg:#fff; --card:#fff; --ink:#111; --muted:#555; --line:#bbb;
    --sur-2:#fff; --sur-3:#f2f2f2; --sur-sorot:#fff; --sisi-bg:#fff;
    --isian-bg:#fff; --line-2:#ccc; --ink-2:#111; --ink-3:#333; --ink-4:#444;
    --kode-bg:#f2f2f2; --jalur:#eee; --tautan:#000;
    --m-bg:#fbe3e1; --m-ink:#8f1e18; --o-bg:#fdece0; --o-ink:#9a4a06;
    --k-bg:#fdf6d5; --k-ink:#7a5c00; --h-bg:#e2f2e8; --h-ink:#12603a;
    --b-bg:#e0ecfa; --b-ink:#12518f; --a-bg:#eef1f4; --a-ink:#5a6472;
    --u-bg:#e8e4f7; --u-ink:#4a3a8f; --ink-mati:#999;
    --bayang-1:none; --bayang-2:none; --bayang-3:none;
  }
  .laci-tombol,.laci-tirai,.profil,.lompat-tirai,.tema-tombol,.flash-tutup{display:none !important}
}

/* =======================================================================
   PENGHALUS VISUAL
   Ditambahkan sesudah lapisan kenyamanan, jadi ia menimpa yang perlu saja.
   Tidak ada markup yang berubah - seluruhnya gaya. Arahnya tetap aplikasi
   kerja pemerintahan: tenang, padat informasi, dan tidak menarik perhatian
   ke dirinya sendiri. Yang dinaikkan adalah hal-hal yang benar-benar dibaca
   orang setiap hari - angka, tajuk, dan jarak antar-bagian.
   ======================================================================= */

/* ---------- Angka yang berbaris rapi ---------- */
/* Aplikasi ini penuh angka yang dibandingkan menurun: skor, jumlah baris,
   persentase. Dengan angka proporsional, "11" lebih sempit daripada "88"
   sehingga kolom bergoyang dan mata kehilangan barisnya. Angka bertabulasi
   membuat setiap digit selebar sama, sehingga kolom benar-benar lurus. */
table,.stat b,.tahap-angka b,.ubin-item b,.nilai-box .angka,.skor,.mono,
.strategi-kartu b,.hal-btn{font-variant-numeric:tabular-nums}

/* ---------- Tajuk halaman ---------- */
/* Sebelumnya h1 hanya sedikit lebih besar daripada teks biasa, sehingga awal
   halaman tidak punya titik masuk yang jelas. Ukurannya dinaikkan dan
   spasinya dirapatkan - itulah yang membuat tajuk terbaca sebagai tajuk,
   bukan sekadar baris tebal. */
h1{font-size:23px;letter-spacing:-.015em;font-weight:700;line-height:1.25}
h2{font-size:15.5px;letter-spacing:-.005em;color:var(--ink);font-weight:700}
.isi > h1:first-child,.isi > .flash + h1{margin-top:2px}
.isi > h1 + .small,.isi > h1 + p.small{margin-top:0;margin-bottom:16px}

/* ---------- Kepala halaman ---------- */
/* Warna rata dibuat sedikit bergradasi ke bawah supaya batas antara kepala
   dan isi terbaca tanpa garis tambahan, dan nama aplikasi diberi ruang. */
.top{background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 88%,#000));
  box-shadow:0 1px 3px rgba(16,24,40,.22)}
.top .brand{font-size:15.5px;letter-spacing:.01em}
.top .me{gap:12px}

/* ---------- Kartu angka ---------- */
/* Angka besar diberi warna lembaga: pada halaman penuh teks abu, angka itulah
   yang dicari lebih dulu. Kartunya diberi tanda di tepi kiri supaya deretnya
   terbaca sebagai satu kelompok. */
.stat{position:relative;overflow:hidden}
.stat b{color:var(--tautan);letter-spacing:-.02em}
.stat span{display:block;margin-top:2px}
a.stat{transition:box-shadow .12s ease,border-color .12s ease}

/* ---------- Tombol ---------- */
/* Keadaan ditekan diberi umpan balik. Tanpa itu, pada sambungan lambat
   pengguna tidak yakin tekanannya masuk - dan tekanan kedua adalah persoalan
   yang justru sedang kita hindari. */
.btn{transition:background .12s ease,box-shadow .12s ease,transform .06s ease;
  box-shadow:0 1px 1px rgba(16,24,40,.06)}
.btn:active{transform:translateY(1px);box-shadow:none}
.btn.sec:hover{border-color:var(--accent)}

/* ---------- Tabel ---------- */
/* Tajuk dibuat lebih tenang: huruf kecil dengan jarak antarhuruf sedikit
   dilebarkan terbaca sebagai label kolom, bukan sebagai isi. */
th{letter-spacing:.03em;text-transform:none;font-size:14px;
  padding-top:10px;padding-bottom:10px}
td{padding-top:10px;padding-bottom:10px}
table tbody tr{transition:background .1s ease}

/* ---------- Menu samping ---------- */
.sisi-butir{transition:background .1s ease,border-color .1s ease}
.sisi-butir.on{font-weight:600}
.sisi-judul{margin-top:4px}

/* ---------- Keadaan kosong ---------- */
/* Halaman kosong adalah tempat pengguna paling sering tersesat. Ruangnya
   dilonggarkan supaya kalimat penjelasnya terbaca sebagai penjelasan, bukan
   sebagai galat. */
.empty{padding:44px 24px;font-size:14px;line-height:1.6}
.empty .aksi-kosong{margin:14px 0 0}
/* Varian ukuran tombol (CTRL-191). Tombol ikon-saja memakai kelasnya sendiri
   (.flash-tutup, .tema-tombol, .kembali-atas), masing-masing bernama aksesibel. */
.btn.kecil{padding:6px 10px}
.btn.mini{padding:4px 9px;font-size:12px}
.jarak-kiri{margin-left:8px}

/* ---------- Lencana dan pil ---------- */
.pill,.badge{letter-spacing:.01em;line-height:1.6;white-space:nowrap}

/* ---------- Jarak antar-bagian ---------- */
.card{padding:20px}
.card + .card{margin-top:0}
.isi{padding-top:20px}
@media (max-width:640px){ .card{padding:16px} }

/* ---------- Naskah panjang ---------- */
.naskah{font-size:15px}
.naskah h2{letter-spacing:-.01em}

/* ---------- Cetak tidak ikut dihias ---------- */
@media print{
  .top{background:none !important;box-shadow:none !important}
  .btn{box-shadow:none !important}
  .card{padding:0}
}

/* ---------- Pengukur mengikuti tema ---------- */
/* Jarum dan angka pengukur dulu diberi warna langsung di markup. Di atas
   kartu gelap, #2b3442 nyaris lenyap - angka rata-rata risiko, yaitu satu
   hal yang paling dicari orang di halaman Beranda, menjadi hampir tak
   terbaca. Atributnya dibiarkan sebagai cadangan bila berkas gaya gagal
   dimuat; aturan di sini yang menang selama gaya ada. */
.gauge svg .nilai,.gauge svg .poros{fill:var(--ink-2)}
.gauge svg .jarum{stroke:var(--ink-2)}
.gauge svg .kosong,.gauge svg .sumbu{fill:var(--muted)}

/* =======================================================================
   PENINGKATAN VISUAL & KENYAMANAN PENGGUNA (UX)
   ======================================================================= */

/* Header atas yang lebih modern */
.top{justify-content:space-between;min-height:56px;padding:0 24px}
.top .brand{display:inline-flex;align-items:center;gap:8px;font-size:17px;letter-spacing:-.01em}
.top .brand .brand-ikon{width:20px;height:20px}
.top .brand-teks{font-weight:700}

/* Tombol pemicu pencarian Ctrl+K di kepala halaman */
.cari-pemicu{display:inline-flex;align-items:center;gap:10px;padding:6px 14px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius-pil);
  color:#fff;font:inherit;font-size:12.5px;cursor:pointer;transition:all .15s ease}
.cari-pemicu:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4)}
.cari-pemicu .cari-pemicu-ikon{opacity:.9;width:15px;height:15px}
.cari-pemicu .cari-pemicu-teks{opacity:.95;font-size:12px}
.cari-pemicu kbd{background:rgba(0,0,0,.25);border:0;color:#fff;font-size:10px;padding:2px 5px;border-radius:var(--radius-s)}
@media (max-width:900px){
  .cari-pemicu .cari-pemicu-teks{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .cari-pemicu{min-width:44px;min-height:40px;justify-content:center;padding:0 12px}
}
@media (max-width:640px){.cari-pemicu kbd{display:none}.cari-pemicu{padding:0;min-width:44px}}

/* Menu profil (r7): nama, peran, lingkup OPD, lalu Profil saya, Ganti OPD,
   Ganti sandi, Faktor kedua, Keluar. Pemicunya tanpa latar tembus-pandang: teks
   putih di atas latar semu-putih turun di bawah 4,5:1 pada tema gelap. Lencana
   peran memakai latar GELAP (seperti kbd pencarian) karena alasan yang sama. */
.top .brand{color:inherit;min-width:0}
.top .brand:hover{text-decoration:none}
.top .brand-teks{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profil{position:relative}
.profil>summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:3px 12px 3px 4px;border-radius:var(--radius-pil);border:1px solid rgba(255,255,255,.35);
  color:#fff;font-size:12.5px;cursor:pointer}
.profil>summary::-webkit-details-marker{display:none}
.profil>summary::after{content:"";border:4px solid transparent;border-top-color:currentColor;
  border-bottom-width:0;margin-left:2px}
.profil>summary:hover,.profil[open]>summary{background:rgba(0,0,0,.18)}
.profil-inisial{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--accent);
  font-weight:700;font-size:12px;display:inline-flex;align-items:center;justify-content:center}
.profil-nama{font-weight:600;white-space:nowrap}
.profil-peran{font-size:10.5px;padding:1px 6px;border-radius:var(--radius);background:rgba(0,0,0,.28);
  font-weight:700;letter-spacing:.04em;white-space:nowrap}
.profil-panel{position:absolute;right:0;top:calc(100% + 8px);width:290px;max-width:calc(100vw - 24px);
  background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:var(--bayang-3);z-index:var(--z-mengambang);padding:6px}
.profil-kepala{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px;
  border-bottom:1px solid var(--line);margin-bottom:4px;overflow-wrap:anywhere}
.profil-kepala span{font-size:13px;color:var(--muted)}
.profil-daftar{list-style:none;margin:0;padding:0}
/* Tiga kelas: .top .me a (putih, bergaris bawah) berlaku untuk tautan di kepala
   halaman, dan panel ini berada di dalamnya - tanpa ini tautannya putih di atas
   putih (terlihat pada foto 25 Sep 2026). */
.top .me .profil-daftar a{display:flex;align-items:center;min-height:44px;padding:8px 12px;
  border-radius:var(--radius-s);color:var(--ink);font-size:14px;text-decoration:none}
.top .me .profil-daftar a:hover{background:var(--sisi-sorot);text-decoration:none}
.profil-daftar .profil-pisah{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
@media (max-width:900px){
  .top{flex-wrap:nowrap;gap:8px;padding:0 10px}
  .top .brand{margin-right:auto;font-size:15px;gap:6px}
  .top .me{gap:6px}
}
@media (max-width:640px){
  .laci-tombol-teks,.profil-nama,.profil-peran{position:absolute;width:1px;height:1px;padding:0;
    margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .laci-tombol{padding:0}
  .profil>summary{padding:4px 8px 4px 4px;min-height:44px}
}

/* Panduan awal saat register risiko masih kosong */
.card-panduan-awal{border-left:4px solid var(--accent);background:var(--card);box-shadow:var(--bayang-2)}
.panduan-awal-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.panduan-awal-ikon{font-size:26px;line-height:1}
.panduan-langkah-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));margin-top:12px}
.langkah-item{display:flex;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--sur-2)}
.langkah-no{flex:0 0 24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.langkah-isi{flex:1 1 auto}
.langkah-isi b{display:block;font-size:13.5px;margin-bottom:4px;color:var(--ink-2)}
.langkah-isi p{margin:0 0 10px;line-height:1.45}

/* Keadaan medan (CTRL-192). Medan yang ditolak tampak ditolak - bukan hanya
   diumumkan pembaca layar; yang tidak dapat diubah tampak tidak dapat diubah. */
input[aria-invalid="true"],select[aria-invalid="true"],textarea[aria-invalid="true"]{
  border-color:var(--err);box-shadow:0 0 0 2px rgba(179,38,30,.22)}
.galat-medan{margin:5px 0 0;color:var(--err);font-weight:600}
.flash .galat-daftar{margin:8px 0 0;padding-left:20px}
.flash .galat-daftar a{color:inherit;text-decoration:underline}
input[readonly],textarea[readonly]{background:var(--sur-2);border-style:dashed}
input:disabled,select:disabled,textarea:disabled{background:var(--sur-3);cursor:not-allowed}
/* Penanda wajib (CTRL-017): tanda * pada label medan wajib, dijelaskan sekali
   per formulir oleh legenda yang dipasang app.js. */
.field:has(> input[required], > select[required], > textarea[required]) > label::after{
  content:" *";color:var(--err);font-weight:700}
.tanda-wajib{color:var(--err);font-weight:700}
/* Legendanya sekali per formulir kiriman yang punya medan wajib, dilukis bersama
   halaman sehingga tidak menggeser apa pun. Formulir masuk dikecualikan. */
form[method="post"]:not([action*="r=login"]):has(.field > input[required], .field > select[required], .field > textarea[required])::before{
  content:"Isian bertanda * wajib diisi.";display:block;margin:0 0 10px;font-size:13px;color:var(--muted)}

/* Teks untuk pembaca layar saja: memberi nama akses yang lengkap pada tombol
   berulang ("Ubah" OPD INSP) tanpa menambah teks yang terlihat. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Tombol kembali ke atas mengambang */
.kembali-atas{position:fixed;bottom:24px;right:24px;z-index:var(--z-mengambang);width:38px;height:38px;
  border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--accent);
  box-shadow:var(--bayang-2);display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:16px;font-weight:700;opacity:0;pointer-events:none;
  /* visibility, bukan opacity saja: tombol yang hanya transparan tetap
     menerima fokus Tab dan tetap diumumkan pembaca layar (UI-29). */
  visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
.kembali-atas.tampil{opacity:1;pointer-events:auto;visibility:visible}
.kembali-atas:hover{transform:translateY(-3px);background:var(--accent);color:var(--accent-ink)}

/* Keadaan gelap untuk komponen baru */
@media (max-width: 0px){
  :root:not([data-tema="terang"]) .cari-pemicu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
  :root:not([data-tema="terang"]) .cari-pemicu:hover{background:rgba(255,255,255,.15)}
  :root:not([data-tema="terang"]) .langkah-item{background:var(--sur-2);border-color:var(--line)}
  :root:not([data-tema="terang"]) .kembali-atas{background:var(--card);border-color:var(--line);color:var(--tautan)}
  :root:not([data-tema="terang"]) .kembali-atas:hover{background:var(--accent);color:var(--accent-ink)}
}
:root[data-tema="disabled-dark-mode"] .cari-pemicu{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
:root[data-tema="disabled-dark-mode"] .cari-pemicu:hover{background:rgba(255,255,255,.15)}
:root[data-tema="disabled-dark-mode"] .langkah-item{background:var(--sur-2);border-color:var(--line)}
:root[data-tema="disabled-dark-mode"] .kembali-atas{background:var(--card);border-color:var(--line);color:var(--tautan)}
:root[data-tema="disabled-dark-mode"] .kembali-atas:hover{background:var(--accent);color:var(--accent-ink)}

/* Kotak seret-lepas unggahan. Dirender server (data-jatuhkan) supaya tidak
   menggeser halaman saat muncul; app.js memasang perilaku seret-lepasnya. */
.jatuhkan{border:2px dashed var(--line);border-radius:var(--radius);
  padding:14px;background:var(--sur-2);
  transition:border-color .12s ease,background .12s ease}
.jatuhkan.ada{border-color:var(--accent);background:var(--b-bg)}
.jatuhkan-ket{margin:8px 0 0;font-size:13px;color:var(--muted)}
.jatuhkan-nama{margin:9px 0 0;font-size:14px;font-weight:600;color:var(--ink-3)}
.jatuhkan-nama:empty{display:none}
.jatuhkan-awas{color:var(--o-ink)}
@media (prefers-reduced-motion: reduce){ .jatuhkan{transition:none} }
@media print{ .jatuhkan{border:0;padding:0;background:none} }

/* Pemilih berkas berbahasa Indonesia (r7, Ui::pilihBerkas). Input berkas asli
   tetap ada dan dapat difokus; ia dibentangkan TEPAT di atas tombol
   "Pilih berkas" dengan kelegapan nol, sehingga klik dan papan ketik tetap
   mengenai input sungguhan - hanya rupa "Choose File" yang tidak tampil. */
.pilih-berkas .pb-baris{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:6px}
.pb-pemicu{position:relative;display:inline-flex}
.pb-masukan{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:0}
.pb-pemicu:focus-within .pb-tombol{outline:3px solid var(--accent);outline-offset:2px}
.pilih-berkas .pb-nama{margin:0;overflow-wrap:anywhere}
.pilih-berkas .pb-nama:empty{display:block;font-weight:400;color:var(--muted)}
.pilih-berkas .pb-nama:empty::before{content:"Belum ada berkas dipilih"}
.pilih-berkas.lentur-lebar{flex:1 1 320px;margin:0}

/* Kemajuan dan keadaan unggahan (komponen unggah bukti). */
.unggah-kemajuan{margin:10px 0 0}
.unggah-kemajuan progress{width:100%;height:10px}
.unggah-status{margin:8px 0 10px;font-size:14px;min-height:1.4em}
.unggah-status:empty{min-height:0;margin:0}
.unggah-status.berhasil{color:var(--h-ink);font-weight:600}
.unggah-status.antre{color:var(--k-ink)}
.unggah-status.galat{color:var(--m-ink);font-weight:600}

/* Pemberitahuan draf dipulihkan. Memakai .flash yang sudah ada, ditambah
   penataan agar tombol Buang berdampingan dengan keterangannya. */
.flash.draf-pulih{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}
.flash.draf-pulih .draf-buang{margin-left:auto;flex:0 0 auto}
@media (max-width:640px){
  .flash.draf-pulih .draf-buang{margin-left:0;width:100%}
}


/* ---------------------------------------------------------------- *
 * ANTI-KEHILANGAN-DATA: penanda simpan, spanduk jaringan, kotak sesi.
 * ---------------------------------------------------------------- */

/* Penanda keadaan simpan, menempel pada judul halaman. Sengaja kecil dan
   tidak berwarna kuat: ia kabar baik yang tidak boleh merebut perhatian
   dari isi halaman. */
.simpan-status {
  display: inline-block;
  margin-left: 12px;
  padding: 2px 8px;
  border-radius:var(--radius-pil);
  font-size: 12px;
  font-weight: 500;
  vertical-align: middle;
  background: var(--sur-2);
  color: var(--ink-3);
  border: 1px solid var(--line-2);
}
.simpan-status.gagal {
  background: var(--k-bg);
  color: var(--k-ink);
  border-color: var(--k-line);
}

/* Spanduk jaringan: satu baris tipis di paling atas, tidak menutupi apa pun. */
.jaringan {
  padding: 8px 16px;
  font-size: 14px;
  text-align: center;
  border-bottom: 1px solid var(--line-2);
}
.jaringan.putus   { background: var(--k-bg); color: var(--k-ink); }
.jaringan.sambung { background: var(--h-bg); color: var(--h-ink); }
.jaringan[hidden] { display: none; }

/* Kotak sesi: sudut kanan bawah, bukan modal yang mengunci layar - pengguna
   harus tetap dapat menekan Simpan pada formulirnya. */
.sesi-akhir {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index:var(--z-lapisan);
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--sur-2);
  box-shadow: var(--bayang-2);
}
.sesi-akhir span { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.sesi-akhir[hidden] { display: none; }

@media (max-width:640px) {
  .sesi-akhir { right: 12px; left: 12px; max-width: none; }
  .simpan-status { display: block; margin: 6px 0 0; }
}

/* Tanpa gerak bagi yang memintanya. */
@media (prefers-reduced-motion: reduce) {
  .jaringan, .sesi-akhir { transition: none !important; }
}

/* --------------------------------------------------------------------------
   BILAH AKSI LENGKET (2d).

   Formulir risiko panjang dan tombol simpannya di ujung bawah. Pada layar
   pendek, orang yang sudah mengisi separuh formulir tidak melihat tombolnya -
   lalu menutup tab, dan isian yang belum tersimpan hilang.

   `position:sticky` sudah dipakai berkas ini untuk tajuk tabel dan menu
   samping; yang belum ada justru pemakaian yang paling berguna.

   DIMATIKAN pada layar pendek (<=460px tinggi): bilah lengket di sana memakan
   sepertiga layar dan justru menyembunyikan isian yang sedang diketik.
   -------------------------------------------------------------------------- */
.aksi-lengket{position:sticky;bottom:0;z-index:var(--z-bilah-aksi);
  background:var(--card);border-top:1px solid var(--line);
  margin:0 -16px -16px;padding:12px 16px;
  box-shadow:0 -6px 16px rgba(0,0,0,.06)}
@media (max-height:460px){
  .aksi-lengket{position:static;box-shadow:none;margin:0;padding:0;border-top:0}
}
@media print{
  .aksi-lengket{position:static;box-shadow:none;border-top:0}
}

/* --------------------------------------------------------------------------
   KERAPATAN TABEL (2g).

   Register nyata berisi 205 risiko. Dengan lekuk 9px dan kotak setinggi 72vh,
   yang terlihat sekali layar hanya belasan baris - sehingga membandingkan dua
   OPD atau menelusuri satu kolom menuntut gulir berulang, dan orang kehilangan
   tempatnya di tengah pekerjaan.

   Ringkas memuat hampir dua kali lipat baris TANPA mengubah satu pun angkanya.

   Bawaannya tetap lega: lekuk 9px dipilih supaya tabel nyaman dibaca pada
   layar kantor biasa, dan mengubahnya diam-diam untuk semua orang demi
   kenyamanan sebagian bukan keputusan yang boleh diambil di sini.
   -------------------------------------------------------------------------- */
:root[data-rapat="1"] table{font-size:13px}
:root[data-rapat="1"] th,
:root[data-rapat="1"] td{padding:4px 8px}
:root[data-rapat="1"] .tablewrap{max-height:80vh}

/* Kepala halaman pada layar sempit: area akun MELIPAT, bukan mendorong halaman
   ke samping. Tautan "Faktor kedua" (23 Sep 2026) membuat area ini melampaui
   390 px untuk nama akun yang panjang (SAPU-01). */
@media (max-width:640px){
  .top{flex-wrap:wrap;row-gap:4px;padding:0 12px}
  .top .me{flex-wrap:wrap;gap:4px 8px;justify-content:flex-end;min-width:0;max-width:100%}
}

/* Ruang bilah gulir dipesan sejak awal (SAPU-11): tanpa ini bilah gulir muncul
   di tengah pemuatan halaman panjang, lebar isi menyempit, teks melipat ulang,
   dan seluruh isi bergeser - CLS 0,18 terukur pada Register Dokumen Terbit. */
html{scrollbar-gutter:stable}

/* ---------- r7: formulir bertahap ---------- */
/* Label "Langkah X dari Y" dicetak server di atas judul kartu. Pada layar sempit
   app.js memasang .bertahap: hanya kartu .langkah-kini yang tampil. Tanpa skrip,
   kelas itu tidak pernah ada dan seluruh formulir tampil seperti sebelumnya. */
.langkah-label{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.langkah-label:empty{display:none}
@media (max-width:900px){
  form.bertahap [data-langkah]:not(.langkah-kini){display:none}
  form.bertahap [data-langkah] h2:focus{outline:none}
}

/* ---------- r7: daftar sebagai kartu pada ponsel ---------- */
/* Tabel register sepuluh kolom tidak terbaca pada 360-640 px tanpa digulir ke
   samping. Di sini setiap baris menjadi kartu: label kolom dari data-label
   (dicetak server), nilai di kanannya. Kepala tabel menyisakan tautan urut saja. */
@media (max-width:640px){
  table.kartu-ponsel,table.kartu-ponsel tbody,table.kartu-ponsel tr,table.kartu-ponsel td{display:block;width:100%}
  table.kartu-ponsel{border:0}
  table.kartu-ponsel thead tr{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 10px;font-size:13px}
  table.kartu-ponsel thead th{display:block;position:static;border:0;padding:0;background:none}
  /* Kelas biasa, bukan :has(): selektor yang tidak dikenal peramban lama menggugurkan aturannya. */
  table.kartu-ponsel thead th.tanpa-urut{display:none}
  table.kartu-ponsel tbody tr{border:1px solid var(--line);border-radius:var(--radius-m);padding:8px 12px;
    margin:0 0 10px;background:var(--card)}
  table.kartu-ponsel tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    border:0;padding:4px 0;text-align:right !important}
  table.kartu-ponsel tbody td::before{content:attr(data-label);flex:0 0 auto;text-align:left;
    font:600 13px/1.4 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;color:var(--muted)}
  table.kartu-ponsel tbody td[data-label=""]{justify-content:flex-end}
  table.kartu-ponsel tbody td[data-label=""]::before{content:none}
  table.kartu-ponsel tbody td.kartu-judul{font-size:15px}
}

/* ---------- r7: aksesibilitas (temuan axe-core 4.13.0, WCAG 2.2 AA) ---------- */
/* 1.4.1: tautan di dalam kalimat tidak boleh dibedakan dengan warna saja. Tautan
   yang berdiri sendiri (menu, tombol, sel tabel berisi tautan saja) tidak disentuh. */
p a:not(.btn),.flash a:not(.btn),.kaki a,.sisi-kaki a,.small a:not(.btn),.muted a:not(.btn),
.empty a:not(.btn),.remah a{text-decoration:underline;text-underline-offset:2px}
/* 2.1.1: wilayah tabel yang dijadikan terfokus oleh app.js harus tampak saat difokus. */
.tablewrap:focus-visible{outline:3px solid #ffc857;outline-offset:2px}
/* 2.5.8: tautan aksi pendek dalam sel tabel (mis. "Ubah") - bidang sentuh 24x24. */
.tautan-aksi{display:inline-flex;align-items:center;min-height:24px;min-width:24px;padding:2px 6px}

/* ---------- r7-portal: kepala halaman (desain Antigravity) ---------- */
/* Lambang Kabupaten Natuna menggantikan ikon perisai. */
.top .brand .brand-logo{width:28px;height:28px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
/* Tombol cepat: hanya layar lebar. Di layar lebih sempit keduanya tetap ada di menu
   dan di Beranda, dan kepala halaman tidak boleh berbaris dua. */
.aksi-cepat{display:flex;gap:8px;align-items:center}
/* Aturan lama `.top nav` / `.top nav a` (menu atas masa lalu) tidak berlaku di sini. */
.top .aksi-cepat{flex:0 0 auto;flex-wrap:nowrap}
.top .aksi-cepat .aksi-cepat-btn{padding:6px 12px;border-bottom-width:1px}
.aksi-cepat-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;min-height:36px;
  font-size:13px;white-space:nowrap}
.aksi-cepat-btn .ikon-garis{width:16px;height:16px;flex:0 0 auto}
.top .aksi-cepat .btn{background:#fff;border-color:#fff;color:var(--accent)}
.top .aksi-cepat .btn.sec{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);color:#fff}
.top .aksi-cepat .btn:hover{text-decoration:none;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
/* .top .aksi-cepat, bukan .aksi-cepat: aturan lama `.top nav{display:flex}` lebih kuat. Titik henti
   hanya 640/900 (skala desain, uji_token_hantu.py); di 901-1180 px teks pencarian yang mengalah. */
@media (max-width:900px){.top .aksi-cepat{display:none}}
/* Satu baris di >= 901 px: pencarian mengecil lebih dulu (teksnya terpotong), baru nama profil. */
@media (min-width:901px){.top{flex-wrap:nowrap}.top .brand{flex:0 0 auto}
  .top .profil-nama{max-width:18ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}
.top .cari-pemicu{min-width:0;flex:0 1 auto}
.top .cari-pemicu .cari-pemicu-teks{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Penunjuk langkah alur: enam langkah dari Alur::LANGKAH; langkah halaman ini menyala.
   Di ponsel hanya langkah yang sedang dikerjakan yang tampil. */
.langkah-alur{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 14px;padding:10px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-m)}
.langkah-alur-judul{font-size:13px;font-weight:700;color:var(--ink-2)}
.langkah-alur-posisi{font-weight:400;color:var(--muted)}
.langkah-alur-daftar{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none;flex:1 1 auto}
.langkah-alur-daftar a{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:4px 12px 4px 6px;
  border:1px solid var(--line);border-radius:var(--radius-pil);background:var(--bg);color:var(--ink-2);
  font-size:13px;text-decoration:none}
.langkah-alur-daftar a:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.langkah-alur-no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--ink-2);font-size:11.5px;font-weight:700}
.langkah-alur-daftar .kini a{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.langkah-alur-daftar .kini .langkah-alur-no{background:#fff;color:var(--accent)}
.langkah-alur-semua{font-size:13px;color:var(--tautan);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){
  .langkah-alur{padding:8px 12px}
  .langkah-alur-daftar li:not(.kini){display:none}
  .langkah-alur-daftar a{min-height:40px}
}
@media print{.langkah-alur,.aksi-cepat{display:none}}
/* ---- akhir: r7-portal: kepala halaman (desain Antigravity) ---- */

/* ---------- r7-portal: halaman masuk bergaya beranda publik (desain Antigravity) ---------- */
/* Pita kepala biru tua bergaris emas, lambang Natuna dan logo Inspektorat. Formulir masuk
   tampil langsung; di layar sempit ia yang pertama. Warna kepala tetap pada kedua tema. */
body.halaman-publik{background:var(--bg)}
.publik-bungkus{min-height:100vh;display:flex;flex-direction:column}
.publik-kepala{background:linear-gradient(135deg,#0a1e38 0%,#12305a 100%);color:#fff;
  border-bottom:3px solid #d4971c}
.publik-kepala-isi{max-width:1120px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:12px}
.publik-kepala img{width:44px;height:44px;object-fit:contain;flex:0 0 auto}
.publik-logo-insp{border-radius:var(--radius-m)}
.publik-nama{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.publik-nama b{font-size:19px;letter-spacing:-.01em}
.publik-nama span{font-size:12px;color:#cbd5e1;text-transform:uppercase;letter-spacing:.05em}
.flash.publik-pesan{order:-1;max-width:1080px;width:calc(100% - 32px);margin:12px auto 0;box-sizing:border-box}
.publik-isi{flex:1 0 auto;width:100%;max-width:1120px;margin:0 auto;padding:28px 20px 36px;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:28px;align-items:start}
.publik-masuk{order:2;padding:26px;margin:0}
.publik-pengantar{order:1;min-width:0}
.publik-masuk h1{font-size:22px;margin:0 0 4px}
.publik-masuk-sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}
.publik-masuk-tombol{width:100%;min-height:44px;font-size:15px;margin-top:4px}
.publik-bantuan{text-align:center;margin:14px 0 0}
.publik-pengantar h2{font-size:24px;margin:4px 0 8px;color:var(--ink);letter-spacing:-.01em}
.publik-pengantar > p{color:var(--ink-3);font-size:15px;line-height:1.55;max-width:58ch}
.publik-pengantar h3{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  margin:22px 0 10px}
.publik-alur{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.publik-alur li{display:flex;gap:10px;align-items:flex-start;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-m);padding:10px 12px}
.publik-alur-no{flex:0 0 26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-weight:700;font-size:13px}
.publik-alur b{display:block;font-size:14px;color:var(--ink)}
.publik-alur small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.publik-acuan{margin-top:18px;color:var(--muted)}
.publik-kaki{text-align:center;color:var(--muted);font-size:12.5px;padding:16px 20px 24px;
  border-top:1px solid var(--line)}
@media (max-width:900px){
  .publik-isi{grid-template-columns:minmax(0,1fr);padding:18px 16px 28px;gap:20px}
  .publik-masuk{order:1}
  .publik-pengantar{order:2}
}
@media (max-width:640px){
  .publik-alur{grid-template-columns:minmax(0,1fr)}
  .publik-kepala-isi{padding:12px 16px;gap:10px}
  .publik-kepala img{width:38px;height:38px}
  .publik-nama b{font-size:17px}
  .publik-nama span{font-size:11px}
  .publik-masuk{padding:20px}
  .publik-pengantar h2{font-size:20px}
}
/* ---- akhir: r7-portal: halaman masuk bergaya beranda publik (desain Antigravity) ---- */

/* ---------- r7-portal: Beranda - spanduk sambutan dan angka utama (desain Antigravity) ---------- */
.sambut{background:linear-gradient(135deg,#0a1e38 0%,#12305a 100%);color:#fff;border-radius:var(--radius);
  padding:18px 22px;margin:0 0 16px;box-shadow:0 4px 16px rgba(10,25,47,.15)}
.sambut .sambut-kepala{margin:0;align-items:flex-start;gap:12px}
.sambut-atas{margin:0 0 2px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#7dd3fc}
.sambut h1{color:#fff;margin:0 0 2px}
.sambut-salam{margin:0 0 4px;color:#e2e8f0;font-size:14px}
.sambut .periode-beranda{color:#cbd5e1}
.sambut .periode-beranda b{color:#fff}
.sambut .periode-beranda a{color:#bae6fd}
.sambut .btn{background:#fff;border-color:#fff;color:#12305a}
.sambut .btn:hover{text-decoration:none;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.sambut .btn.sec{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.5);color:#fff}
.sambut-aksi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:14px;padding-top:12px;
  border-top:1px solid rgba(255,255,255,.18)}
.sambut-aksi-judul{font-weight:700;font-size:13px}
.sambut-aksi-ket{font-size:12px;color:#cbd5e1}
.sambut-aksi-daftar{display:flex;flex-wrap:wrap;gap:8px;flex-basis:100%}
.sambut-aksi-daftar .btn{min-height:40px;display:inline-flex;align-items:center}
/* Empat angka utama: penanda warna di tepi kiri dan keterangan di bawah labelnya. */
.kpi-utama{margin:0 0 18px}
.kpi-utama .stat{border-left:4px solid var(--accent)}
.kpi-utama .stat:nth-child(2){border-left-color:#dc2626}
.kpi-utama .stat:nth-child(3){border-left-color:#0d9488}
.kpi-utama .stat:nth-child(4){border-left-color:#d97706}
.stat .stat-ket{display:block;margin-top:4px;font-size:12px;line-height:1.35;color:var(--muted);font-weight:400}
@media (max-width:640px){
  .sambut{padding:14px 16px}
  .sambut .sambut-kepala{flex-wrap:wrap}
  /* 2 x 2 di ponsel: empat kartu bertumpuk membuat angka utama memakan satu layar penuh. */
  .kpi-utama{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi-utama .stat{padding:12px}
}
@media print{
  .sambut{background:none;color:#000;box-shadow:none;padding:0;border-radius:0}
  .sambut h1,.sambut .periode-beranda,.sambut .periode-beranda b,.sambut-salam{color:#000}
  .sambut-aksi,.sambut-atas{display:none}
}
/* ---- akhir: r7-portal: Beranda - spanduk sambutan dan angka utama (desain Antigravity) ---- */

/* ---------- r7-portal: formulir risiko - pratinjau besaran dan bantuan merumuskan ---------- */
.pratinjau-besaran{display:flex;gap:14px;align-items:flex-start;margin:12px 0 4px;padding:12px 14px;
  border:1px solid var(--line);border-left:5px solid var(--line);border-radius:var(--radius-m);background:var(--card)}
.pratinjau-besaran[hidden]{display:none}
.pratinjau-angka{flex:0 0 auto;min-width:46px;font-size:30px;font-weight:800;line-height:1.1;text-align:center;
  color:var(--ink)}
.pratinjau-isi{min-width:0}
.pratinjau-isi b{display:block;font-size:15px}
.pratinjau-isi p{margin:4px 0 0}
.pratinjau-catatan{font-size:12px}
.pratinjau-besaran.pita-merah {border-color:var(--m-line);border-left-color:var(--m-ink);background:var(--m-bg)}
.pratinjau-besaran.pita-oranye{border-color:var(--o-line);border-left-color:var(--o-ink);background:var(--o-bg)}
.pratinjau-besaran.pita-kuning{border-color:var(--k-line);border-left-color:var(--k-ink);background:var(--k-bg)}
.pratinjau-besaran.pita-hijau {border-color:var(--h-line);border-left-color:var(--h-ink);background:var(--h-bg)}
.pratinjau-besaran.pita-biru  {border-color:var(--b-line);border-left-color:var(--b-ink);background:var(--b-bg)}
.pratinjau-besaran.pita-merah .pratinjau-angka{color:var(--m-ink)}
.pratinjau-besaran.pita-oranye .pratinjau-angka{color:var(--o-ink)}
.pratinjau-besaran.pita-kuning .pratinjau-angka{color:var(--k-ink)}
.pratinjau-besaran.pita-hijau .pratinjau-angka{color:var(--h-ink)}
.pratinjau-besaran.pita-biru .pratinjau-angka{color:var(--b-ink)}
.bantuan-rumus{margin:-4px 0 12px;padding:8px 12px;border-radius:var(--radius-m);background:var(--b-bg);
  color:var(--ink-2)}
@media print{.pratinjau-besaran,.bantuan-rumus{display:none}}
/* ---- akhir: r7-portal: formulir risiko - pratinjau besaran dan bantuan merumuskan ---- */

/* ---------- r7-portal: isi cepat (tenggat triwulan, persentase, hari ini) ---------- */
.isi-cepat{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 0}
.isi-cepat[hidden]{display:none}
.isi-cepat-ket{font-size:12.5px;color:var(--muted)}
.isi-cepat button{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 12px;
  border:1px solid var(--line);border-radius:var(--radius-pil);background:var(--card);color:var(--ink-2);
  font:inherit;font-size:13px;cursor:pointer}
.isi-cepat button:hover{border-color:var(--accent);color:var(--accent)}
.isi-cepat button:focus-visible{outline:3px solid #ffc857;outline-offset:1px}
.isi-cepat-rinci{font-size:11.5px;color:var(--muted)}
@media (max-width:640px){.isi-cepat button{min-height:40px}}
@media print{.isi-cepat{display:none}}
/* ---- akhir: r7-portal: isi cepat (tenggat triwulan, persentase, hari ini) ---- */

/* ---------- r7-portal: saring cepat bercip (desain Antigravity; dijalankan server) ---------- */
/* Berbeda dari .cip-saring (saringan aktif yang dapat dilepas): ini PILIHAN saringan. Tautan
   biasa - bekerja tanpa JavaScript, dapat disimpan sebagai markah, dan terbaca pembaca layar;
   pilihan yang sedang berlaku bertanda aria-current. */
.saring-cip{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 0 14px}
.saring-cip-ket{font-size:13px;color:var(--muted);margin-right:2px}
.saring-cip .cip{display:inline-flex;align-items:center;min-height:34px;padding:4px 12px;border:1px solid var(--line);
  border-radius:var(--radius-pil);background:var(--card);color:var(--ink-2);font-size:13px;text-decoration:none}
.saring-cip .cip:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.saring-cip .cip.aktif{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.saring-cip.dalam-kartu{margin:12px 0 0}
/* Tepi kiri berwarna level (disertai nama level - tidak mengandalkan warna saja). */
.saring-cip .cip-merah:not(.aktif){border-left:4px solid var(--m-ink)}
.saring-cip .cip-oranye:not(.aktif){border-left:4px solid var(--o-ink)}
.saring-cip .cip-kuning:not(.aktif){border-left:4px solid var(--k-ink)}
.saring-cip .cip-hijau:not(.aktif){border-left:4px solid var(--h-ink)}
.saring-cip .cip-biru:not(.aktif){border-left:4px solid var(--b-ink)}
.stat b.stat-uang{font-size:clamp(18px,2.2vw,24px)}
@media (max-width:640px){.saring-cip .cip{min-height:40px}}
@media print{.saring-cip{display:none}}
/* ---- akhir: r7-portal: saring cepat bercip (desain Antigravity; dijalankan server) ---- */

/* ---------- r7-portal: daftar realisasi - sel berwarna dan cari cepat (desain Antigravity) ---------- */
/* Warna selalu disertai teks (angka persen atau tanda +): tidak mengandalkan warna saja. */
.sel-tw.terisi.capai-penuh {background:var(--h-bg);border-color:var(--h-line);color:var(--h-ink);font-weight:700}
.sel-tw.terisi.capai-sedang{background:var(--b-bg);border-color:var(--b-line);color:var(--b-ink)}
.sel-tw.terisi.capai-awal  {background:var(--k-bg);border-color:var(--k-line);color:var(--k-ink)}
.cari-tabel{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 12px}
.cari-tabel[hidden]{display:none}
.cari-tabel label{font-size:13px;color:var(--muted);margin:0}
.cari-tabel input{flex:1 1 260px;max-width:420px}
.cari-tabel-hasil{flex-basis:100%;margin:0;min-height:1em}
@media print{.cari-tabel{display:none}}
/* ---- akhir: r7-portal: daftar realisasi - sel berwarna dan cari cepat (desain Antigravity) ---- */

/* ---------- r7-portal: naskah laporan - kop dan cetak A4 (desain Antigravity) ---------- */
.kop-naskah{display:flex;align-items:center;gap:16px;padding:6px 0 10px;margin:0 0 4px;
  border-bottom:3px double var(--ink)}
.kop-naskah img{width:72px;height:72px;object-fit:contain;flex:0 0 auto}
.kop-naskah-teks{flex:1;text-align:center;line-height:1.3}
.kop-naskah-pemda{font:700 15px/1.3 Arial,"Helvetica Neue",sans-serif;letter-spacing:.04em}
.kop-naskah-opd{font:800 18px/1.3 Arial,"Helvetica Neue",sans-serif;letter-spacing:.02em}
.judul-naskah{text-align:center;margin:14px 0 18px}
.judul-naskah-utama{font:700 16px/1.4 Arial,"Helvetica Neue",sans-serif;letter-spacing:.03em;text-decoration:underline}
.ttd-ruang{height:72px;display:flex;align-items:center;justify-content:center}
.ttd-nama{font-weight:600}
@media (max-width:640px){
  .kop-naskah{gap:10px}
  .kop-naskah img{width:52px;height:52px}
  .kop-naskah-opd{font-size:15px}
}
@media print{
  @page{size:A4;margin:18mm 16mm 18mm 22mm}
  .kop-naskah{border-bottom-color:#000}
  .kop-naskah,.judul-naskah{color:#000}
  .tidak-dicetak{display:none !important}
}
/* ---- akhir: r7-portal: naskah laporan - kop dan cetak A4 (desain Antigravity) ---- */

/* ---------- r7-portal: panduan langkah bernomor (halaman Laporan) ---------- */
.panduan-langkah{list-style:none;counter-reset:langkah;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;margin:0 0 16px;padding:0}
.panduan-langkah li{counter-increment:langkah;position:relative;padding:10px 12px 10px 44px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius-m)}
.panduan-langkah li::before{content:counter(langkah);position:absolute;left:12px;top:10px;width:24px;height:24px;
  border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px}
.panduan-langkah b{display:block;font-size:14px}
.panduan-langkah span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
@media (max-width:900px){.panduan-langkah{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.panduan-langkah{grid-template-columns:minmax(0,1fr)}}
@media print{.panduan-langkah{display:none}}
/* ---- akhir: r7-portal: panduan langkah bernomor (halaman Laporan) ---- */