/* =============================================================================
   Trans-Siber PAS — Sistem Desain
   =============================================================================
   Satu berkas, tanpa proses bangun, tanpa kerangka kerja. Seluruh warna hidup
   sebagai token pada :root, dan komponen hanya membaca token. Aturan ini yang
   membuat mode terang dan gelap tidak pernah saling merusak.

   Urutan berkas:
     1. Token         2. Dasar         3. Tata letak
     4. Komponen      5. Halaman       6. Bantuan & gerak
   ========================================================================== */

/* ------------------------------------------------------------------ 1. Token */

:root {
  /* ---------------------------------------------------------------- Permukaan
     Latar aplikasi memakai biru sangat pucat, bukan abu netral. Warna dinas
     Pemasyarakatan adalah biru tua, dan permukaan yang sedikit bernada sama
     membuat seluruh layar terbaca sebagai satu benda, bukan kumpulan kotak
     putih yang kebetulan bertumpuk. */
  --ground:      #E7ECF4;
  --surface:     #F4F7FB;
  --surface-2:   #FFFFFF;
  --surface-3:   #EBF0F7;
  --surface-tinggi: #FFFFFF;
  --overlay:     rgba(9, 16, 30, 0.46);
  --kaca:        rgba(255, 255, 255, 0.72);

  /* Tinta */
  --ink:         #0F1A2B;
  --ink-2:       #32405A;
  --ink-3:       #5B6B87;
  --ink-4:       #8593AC;

  /* Garis */
  --line:        #C9D5E6;
  --line-2:      #DCE4F0;
  --line-3:      #EAEFF7;

  /* Aksen kelembagaan — biru tua Ditjen PAS, dengan kuningan sebagai penekan */
  --accent:      #0F2C55;
  --accent-2:    #1D4E8F;
  --accent-3:    #3B76C4;
  --accent-in:   #FFFFFF;
  --accent-soft: #DBE6F6;
  --accent-tepi: #B9CCE8;
  --brass:       #A9791C;
  --brass-2:     #C89A34;
  --brass-soft:  #F6EDD8;

  /* Tingkat kerawanan — dipisahkan dari aksen supaya tidak saling menyamar */
  --kritis:      #9E1710;
  --kritis-bg:   #FAE0DD;
  --kritis-tepi: #EFBDB7;
  --tinggi:      #A2500F;
  --tinggi-bg:   #FBEBD9;
  --tinggi-tepi: #EFCFA9;
  --sedang:      #7A5C10;
  --sedang-bg:   #F8F0D6;
  --sedang-tepi: #E8D69B;
  --rendah:      #46536B;
  --rendah-bg:   #E6EBF3;
  --rendah-tepi: #CCD6E5;
  --positif:     #0E6A4E;
  --positif-bg:  #D9EFE4;
  --positif-tepi: #A9D8C3;
  --netral:      #55637C;
  --netral-bg:   #E8ECF4;
  --netral-tepi: #CFD8E6;

  /* Bayangan berlapis: satu lapis dekat untuk bentuk, satu lapis jauh untuk
     kedalaman. Satu bayangan tunggal selalu terlihat seperti stiker. */
  --bayang-1: 0 1px 2px rgba(15, 30, 60, 0.07), 0 1px 1px rgba(15, 30, 60, 0.05);
  --bayang-2: 0 2px 4px rgba(15, 30, 60, 0.06), 0 8px 20px rgba(15, 30, 60, 0.09);
  --bayang-3: 0 4px 10px rgba(15, 30, 60, 0.10), 0 20px 48px rgba(15, 30, 60, 0.16);
  --bayang-dalam: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /* Warna bayangan tepi tabel yang masih berlanjut ke samping. Di tampilan
     terang ia bayangan; di tampilan gelap bayangan hitam tidak terlihat di
     atas permukaan yang memang sudah hitam, jadi yang dipakai justru sisi
     terang. Keduanya menjawab pertanyaan yang sama: masih ada lagi di sana. */
  --tabel-tepi: rgba(15, 30, 60, 0.22);
  --cincin: 0 0 0 3px var(--accent-soft);

  /* Gradien kelembagaan */
  --gradien-tepi: linear-gradient(180deg, #12325F 0%, #0C2245 62%, #0A1B38 100%);
  --gradien-kop: linear-gradient(135deg, #12335F 0%, #1D4E8F 55%, #2A5FA8 100%);
  --gradien-halus: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0));

  /* Huruf — Plus Jakarta Sans dirancang di Jakarta untuk Pemprov DKI, dan
     dipakai di sini karena memang huruf Indonesia untuk lembaga Indonesia.
     Angka memakai huruf lebar tetap supaya kolom tabel tidak bergoyang. */
  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --disp: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Ukuran */
  --r-1: 5px;
  --r-2: 9px;
  --r-3: 14px;
  --r-4: 20px;
  --sidebar: 254px;
  --topbar: 60px;
  --isi-maks: 1520px;

  /* Jarak — skala rapat, sesuai sifat aplikasi yang padat data */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 40px; --s-8: 56px;

  /* Gerak */
  --cepat: 140ms cubic-bezier(0.32, 0.72, 0, 1);
  --sedang-durasi: 260ms cubic-bezier(0.32, 0.72, 0, 1);
  --pegas: 420ms cubic-bezier(0.34, 1.4, 0.64, 1);

  color-scheme: light dark;
}

/* Tema gelap ditulis sekali sebagai gugus, lalu dipakai dua kali: sekali untuk
   yang mengikuti pengaturan perangkat, sekali untuk yang memilih sendiri.
   Menulisnya dua kali secara terpisah adalah cara paling pasti membuat kedua
   tampilan itu perlahan berbeda tanpa ada yang menyadarinya. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) { --gelap: 1; }
}
:root[data-tema="gelap"] { --gelap: 1; }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    --ground:      #070C15;
    --surface:     #0D1420;
    --surface-2:   #131C2B;
    --surface-3:   #1A2537;
    --surface-tinggi: #16202F;
    --overlay:     rgba(2, 5, 11, 0.68);
    --kaca:        rgba(19, 28, 43, 0.76);

    --ink:         #E6ECF5;
    --ink-2:       #BAC6D8;
    --ink-3:       #8D9BB2;
    --ink-4:       #66748C;

    --line:        #26334A;
    --line-2:      #1D2839;
    --line-3:      #16202F;

    --accent:      #7FA9E8;
    --accent-2:    #9DC0F2;
    --accent-3:    #B7D3F8;
    --accent-in:   #060B14;
    --accent-soft: #16263D;
    --accent-tepi: #26405F;
    --brass:       #D4AE5E;
    --brass-2:     #E5C77E;
    --brass-soft:  #2A2314;

    --kritis:      #F5A199;
    --kritis-bg:   #3A1C18;
    --kritis-tepi: #5C2B24;
    --tinggi:      #EDB47C;
    --tinggi-bg:   #352415;
    --tinggi-tepi: #55371F;
    --sedang:      #DCBE6C;
    --sedang-bg:   #302913;
    --sedang-tepi: #4C3F1D;
    --rendah:      #9DAABF;
    --rendah-bg:   #1B2434;
    --rendah-tepi: #2C3A50;
    --positif:     #74C9A5;
    --positif-bg:  #12281F;
    --positif-tepi: #1F4535;
    --netral:      #8D9BB2;
    --netral-bg:   #1A2231;
    --netral-tepi: #2A3448;

    --bayang-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --bayang-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45);
    --bayang-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.6);
    --bayang-dalam: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tabel-tepi: rgba(150, 180, 220, 0.26);
    --cincin: 0 0 0 3px rgba(127, 169, 232, 0.28);

    --gradien-tepi: linear-gradient(180deg, #101B2C 0%, #0B1422 62%, #080F1A 100%);
    --gradien-kop: linear-gradient(135deg, #12233A 0%, #1B3459 55%, #24446F 100%);
    --gradien-halus: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));
  }
}

:root[data-tema="gelap"] {
    --ground:      #070C15;
    --surface:     #0D1420;
    --surface-2:   #131C2B;
    --surface-3:   #1A2537;
    --surface-tinggi: #16202F;
    --overlay:     rgba(2, 5, 11, 0.68);
    --kaca:        rgba(19, 28, 43, 0.76);

    --ink:         #E6ECF5;
    --ink-2:       #BAC6D8;
    --ink-3:       #8D9BB2;
    --ink-4:       #66748C;

    --line:        #26334A;
    --line-2:      #1D2839;
    --line-3:      #16202F;

    --accent:      #7FA9E8;
    --accent-2:    #9DC0F2;
    --accent-3:    #B7D3F8;
    --accent-in:   #060B14;
    --accent-soft: #16263D;
    --accent-tepi: #26405F;
    --brass:       #D4AE5E;
    --brass-2:     #E5C77E;
    --brass-soft:  #2A2314;

    --kritis:      #F5A199;
    --kritis-bg:   #3A1C18;
    --kritis-tepi: #5C2B24;
    --tinggi:      #EDB47C;
    --tinggi-bg:   #352415;
    --tinggi-tepi: #55371F;
    --sedang:      #DCBE6C;
    --sedang-bg:   #302913;
    --sedang-tepi: #4C3F1D;
    --rendah:      #9DAABF;
    --rendah-bg:   #1B2434;
    --rendah-tepi: #2C3A50;
    --positif:     #74C9A5;
    --positif-bg:  #12281F;
    --positif-tepi: #1F4535;
    --netral:      #8D9BB2;
    --netral-bg:   #1A2231;
    --netral-tepi: #2A3448;

    --bayang-1: 0 1px 2px rgba(0, 0, 0, 0.5);
    --bayang-2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.45);
    --bayang-3: 0 4px 10px rgba(0, 0, 0, 0.5), 0 20px 48px rgba(0, 0, 0, 0.6);
    --bayang-dalam: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --tabel-tepi: rgba(150, 180, 220, 0.26);
    --cincin: 0 0 0 3px rgba(127, 169, 232, 0.28);

    --gradien-tepi: linear-gradient(180deg, #101B2C 0%, #0B1422 62%, #080F1A 100%);
    --gradien-kop: linear-gradient(135deg, #12233A 0%, #1B3459 55%, #24446F 100%);
    --gradien-halus: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0));
}

/* ------------------------------------------------------------------ 2. Dasar */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

#akar { min-height: 100%; display: flex; flex-direction: column; }
#akar > * { flex: 1; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--disp);
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: 1.6rem; line-height: 1.15; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }

p { margin: 0; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

::selection { background: var(--accent-soft); color: var(--ink); }

code, .mono, .angka {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; border: 2px solid var(--ground); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }

/* ------------------------------------------------------------ 3. Tata letak */

.cangkang {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  min-height: 100vh;
}

.samping {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.merek {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-2);
  flex: none;
}

/*
   Lencana bundar, bukan ubin bersudut.

   Berkasnya persegi dengan lingkaran yang menyentuh keempat tepi, jadi
   `border-radius: 50%` memotong tepat pada tepi lencananya — tidak ada sudut
   yang tersisa, dan tidak perlu satu berkas terpisah per tempat.

   Tanpa `object-fit` gambar 256 piksel akan dipepatkan bila suatu saat ada
   yang menaruh lencana yang tidak persegi di sini; dengan `cover` ia dipotong,
   dan lencana yang terpotong sedikit masih terbaca sedangkan lencana yang
   lonjong tidak.
*/
.merek-lambang {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  /* Gambar yang belum terunduh menyisakan lubang seukurannya, bukan pergeseran
     tata letak — kop menu adalah hal pertama yang tergambar. */
  background: rgba(255, 255, 255, 0.06);
}

.merek-teks { min-width: 0; }
.merek-nama {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.merek-sub {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 8px 16px;
}

.nav-grup + .nav-grup { margin-top: 14px; }

.nav-judul {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 6px 10px 5px;
}

.nav-butir {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--r-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--cepat), color var(--cepat);
}
.nav-butir:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.nav-butir[aria-current="page"] {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.nav-butir svg { flex: none; width: 16px; height: 16px; opacity: 0.85; }
.nav-butir .lencana {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--kritis-bg);
  color: var(--kritis);
  font-weight: 600;
}

.kaki-samping {
  flex: none;
  border-top: 1px solid var(--line-2);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 50%;
  background: var(--brass-soft);
  color: var(--brass);
  display: grid; place-items: center;
  font-family: var(--disp); font-weight: 700; font-size: 11px;
}

.kaki-nama { font-size: 12.5px; font-weight: 600; line-height: 1.2; display: block; }
.kaki-peran { font-size: 10.5px; color: var(--ink-4); line-height: 1.3; display: block; }

.kaki-profil {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  flex: 1;
  border: 0;
  background: none;
  padding: 4px;
  margin: -4px;
  border-radius: var(--r-2);
  cursor: pointer;
  text-align: left;
  transition: background var(--cepat);
}
@media (hover: hover) { .kaki-profil:hover { background: rgba(255, 255, 255, 0.06); } }

.kolom-utama { display: flex; flex-direction: column; min-width: 0; }

.bilah {
  height: var(--topbar);
  flex: none;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: 20;
}

/* margin:0 karena ini sebuah <h1>: tanpa itu kop halaman melar dan turun. */
.bilah-judul { font-family: var(--disp); font-weight: 600; font-size: 15px; letter-spacing: -0.015em; margin: 0; }
.bilah-sub { font-size: 11.5px; color: var(--ink-4); }
/*
   Tombol di kanan bilah tidak boleh menyusut.

   Tanpa `flex: none`, ketiganya diperas ketika judul halaman panjang: pada
   layar 360px tombol selebar 30px menjadi 15px, isinya meluber keluar
   kotaknya sendiri, dan seluruh halaman ikut melebar enam piksel — persis
   gejala yang tools/potret.mjs berhenti dengan kode 3 karenanya. Yang boleh
   memendek adalah judulnya, dan judul memang sudah dipotong dengan elipsis.
*/
.bilah-kanan { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: none; }
.bilah-kanan > * { flex: none; }

.isi {
  padding: 20px 18px 56px;
  max-width: var(--isi-maks);
  width: 100%;
  margin: 0 auto;
  flex: 1;
}

.tumpuk { display: flex; flex-direction: column; gap: 18px; }
.baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dorong { margin-left: auto; }

/* --------------------------------------------------------------- 4. Komponen */

/* Kartu */
.kartu {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
}
.kartu-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line-3);
}
.kartu-kop h2, .kartu-kop h3 { font-size: 13.5px; font-weight: 600; }
.kartu-kop .ket { font-size: 11.5px; color: var(--ink-4); }
.kartu-isi { padding: 16px; }
.kartu-isi.rapat { padding: 0; }

/* Kisi ringkasan */
/* Kartu berhenti di tinggi isinya sendiri. Sebelum ini, kartu pendek ikut
   diregangkan setinggi tetangganya dan menyisakan bidang kosong yang lebar. */
/* Lebar terkecil sebuah kolom tidak boleh melebihi lebar wadahnya.
   Tanpa min(), sebuah kisi berminimum 320px yang diletakkan di dalam kolom
   selebar 339px tetap memaksakan 320px — dan pada layar 375px, dua kolom
   semacam itu menjadikan halaman selebar 630px. Itulah yang terjadi: seluruh
   dasbor menggeser ke samping di telepon, dengan angka dan judul terpotong di
   tepi kanan yang tidak bisa dijangkau. */
.kisi { display: grid; gap: 12px; align-items: start; }
/* Minimum kisi berisi ubin angka adalah 160px, bukan 190px.
   Bedanya hanya terasa di satu tempat, dan di tempat itu besar: pada telepon
   390px, isi halaman selebar 366px dan isi sebuah kartu di dalamnya 334px.
   Dengan minimum 190px, dua kolom menuntut 392px — lebih lebar daripada
   keduanya, sehingga ubinnya jatuh satu per baris dan empat angka pembuka
   dasbor memakan 920 piksel, hampir tiga layar penuh sebelum baris berikutnya
   terlihat. Dengan 160px dua kolom menuntut 332px, dan itu muat di kedua
   tempat — termasuk di dalam kartu, tempat empat ubin siklus intelijen
   tinggal. Di layar 320px kisinya tetap satu kolom, sebagaimana seharusnya. */
.kisi-4 { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); }
.kisi-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.kisi-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Dua panel berdampingan: yang kiri lebih lebar, yang kanan mendampingi.
   Runtuh menjadi satu kolom sebelum kolom kanannya menjadi terlalu sempit
   untuk dibaca, bukan ketika sudah terlanjur meluber. */
.kisi-utama-samping { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
.kisi-kartu { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
@media (max-width: 900px) {
  .kisi-utama-samping { grid-template-columns: 1fr; }
}

/* Ubin angka */
.ubin {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 13px 14px 14px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.ubin::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--nada, var(--line));
}
.ubin-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ubin-nilai {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 1.85rem;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--nada, var(--ink));
}
.ubin-kaki { font-size: 11.5px; color: var(--ink-3); display: flex; align-items: center; gap: 5px; }

.ubin[data-nada="kritis"]  { --nada: var(--kritis); }
.ubin[data-nada="tinggi"]  { --nada: var(--tinggi); }
.ubin[data-nada="sedang"]  { --nada: var(--sedang); }
.ubin[data-nada="positif"] { --nada: var(--positif); }
.ubin[data-nada="aksen"]   { --nada: var(--accent); }
.ubin[data-nada="netral"]  { --nada: var(--ink-3); }

.delta { font-family: var(--mono); font-size: 11px; font-weight: 600; }
.delta.naik  { color: var(--kritis); }
.delta.turun { color: var(--positif); }
.delta.diam  { color: var(--ink-4); }

/* Keping status */
.keping {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2.5px 7px;
  border-radius: var(--r-1);
  background: var(--netral-bg);
  color: var(--netral);
  white-space: nowrap;
  border: 1px solid transparent;
}
.keping::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.keping.polos::before { display: none; }
.keping[data-nada="kritis"]  { background: var(--kritis-bg);  color: var(--kritis); }
.keping[data-nada="tinggi"]  { background: var(--tinggi-bg);  color: var(--tinggi); }
.keping[data-nada="sedang"]  { background: var(--sedang-bg);  color: var(--sedang); }
.keping[data-nada="rendah"]  { background: var(--rendah-bg);  color: var(--rendah); }
.keping[data-nada="positif"] { background: var(--positif-bg); color: var(--positif); }
.keping[data-nada="aksen"]   { background: var(--accent-soft); color: var(--accent); }
.keping[data-nada="netral"]  { background: var(--netral-bg);  color: var(--netral); }

/* Tombol */
.tbl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--cepat), border-color var(--cepat), color var(--cepat);
}
.tbl:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); border-color: var(--ink-4); text-decoration: none; }
.tbl:disabled { opacity: 0.5; cursor: not-allowed; }
.tbl svg { width: 15px; height: 15px; flex: none; }

.tbl.utama { background: var(--accent); border-color: var(--accent); color: var(--accent-in); font-weight: 600; }
.tbl.utama:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); color: var(--accent-in); }
.tbl.bahaya { background: var(--kritis-bg); border-color: transparent; color: var(--kritis); font-weight: 600; }
.tbl.samar { border-color: transparent; background: transparent; }
.tbl.samar:hover:not(:disabled) { background: var(--surface-3); }
.tbl.kecil { height: 26px; padding: 0 9px; font-size: 12px; }
.tbl.ikon { width: 32px; padding: 0; }
.tbl.ikon.kecil { width: 26px; }

/* Kolom isian */
.isian { display: flex; flex-direction: column; gap: 5px; }
.isian > label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}
.isian > .ket { font-size: 11.5px; color: var(--ink-4); }

.masukan, .pilihan, .area {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-2);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 13.5px;
  transition: border-color var(--cepat), box-shadow var(--cepat);
}
.area { height: auto; min-height: 82px; padding: 8px 10px; resize: vertical; line-height: 1.55; }
.masukan::placeholder, .area::placeholder { color: var(--ink-4); }
.masukan:focus, .pilihan:focus, .area:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.masukan:disabled, .pilihan:disabled, .area:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--surface-3);
}
.pilihan {
  appearance: none;
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 15px, calc(100% - 10px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.cari { position: relative; flex: 1; min-width: 180px; max-width: 420px; }
.cari .masukan { padding-left: 31px; }
.cari svg {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  width: 15px; height: 15px;
  color: var(--ink-4);
  pointer-events: none;
}

/* Tabel */
/*
   Bayangan tepi: satu-satunya tanda bahwa tabelnya masih berlanjut ke kanan.

   Di telepon, "UPT paling banyak disorot" menampilkan kolom nama saja —
   TOTAL, NEGATIF, dan MENDESAK ada di luar layar, dan seluruh guna tabel itu
   justru ada di ketiga kolom itu. Tidak ada apa pun yang mengatakannya: bilah
   gulir menyamping baru muncul saat sedang digulung, dan di iOS tidak muncul
   sama sekali. Yang terbaca adalah tabel berisi tujuh nama tanpa angka.

   Bayangannya digambar dengan gradien berlatar `local`: lapisan yang ikut
   bergulir menutupi bayangan begitu ujungnya tercapai, sehingga tandanya
   hilang sendiri ketika memang tidak ada lagi yang bisa dilihat — tanpa satu
   baris JavaScript dan tanpa penyimak gulir.

   Warna penutupnya harus sama dengan latar kartu tempat tabel ini tinggal —
   `--surface-2`, bukan `--surface`; kartu memakai yang kedua di bagian 4 dan
   ditimpa menjadi yang pertama di bagian 5. Bila kelak ada tabel di atas
   permukaan lain, penutupnya akan terlihat sebagai pita samar di kedua tepi.
*/
.tabel-bungkus {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--surface-2) 30%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left,  var(--surface-2) 30%, transparent) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, var(--tabel-tepi), transparent) left / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, var(--tabel-tepi), transparent) right / 16px 100% no-repeat scroll;
}
table.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.tabel thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
table.tabel tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--line-3);
  vertical-align: top;
}
table.tabel tbody tr { transition: background var(--cepat); }
table.tabel tbody tr:hover { background: var(--surface-3); }
table.tabel tbody tr.dipilih { background: var(--accent-soft); }
table.tabel tbody tr:last-child td { border-bottom: none; }
table.tabel td.angka { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabel td.kecil { font-size: 12px; color: var(--ink-3); }
table.tabel .judul-sel {
  font-weight: 550;
  color: var(--ink);
  display: block;
  max-width: 52ch;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Bilah alat */
.bilah-alat {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-3);
  background: var(--surface);
}

/* Keadaan kosong */
.kosong {
  padding: 44px 20px;
  text-align: center;
  color: var(--ink-3);
}
.kosong svg { width: 30px; height: 30px; opacity: 0.4; margin-bottom: 10px; }
.kosong h3 { font-size: 14px; margin-bottom: 5px; color: var(--ink-2); }
.kosong p { font-size: 12.5px; max-width: 44ch; margin: 0 auto; }

/* Bilah kemajuan */
.bilah-progres {
  height: 5px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.bilah-progres > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--nada, var(--accent));
  transition: width var(--sedang-durasi);
}

/* Garis waktu */
.linimasa { list-style: none; margin: 0; padding: 0; }
.linimasa li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 1px solid var(--line);
  margin-left: 5px;
}
.linimasa li:last-child { border-left-color: transparent; padding-bottom: 0; }
.linimasa li::before {
  content: '';
  position: absolute;
  left: -4.5px; top: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nada, var(--ink-4));
  border: 2px solid var(--surface);
}
.linimasa-waktu { font-family: var(--mono); font-size: 10.5px; color: var(--ink-4); }
.linimasa-judul { font-size: 13px; font-weight: 550; }
.linimasa-ket { font-size: 12px; color: var(--ink-3); }

/* Pesan sistem */
.pesan {
  display: flex;
  gap: 10px;
  padding: 11px 13px;
  border-radius: var(--r-2);
  border: 1px solid transparent;
  font-size: 13px;
  background: var(--netral-bg);
  color: var(--ink-2);
}
.pesan svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.pesan[data-nada="kritis"] { background: var(--kritis-bg); color: var(--kritis); }
.pesan[data-nada="sedang"] { background: var(--sedang-bg); color: var(--sedang); }
.pesan[data-nada="positif"] { background: var(--positif-bg); color: var(--positif); }
.pesan[data-nada="aksen"] { background: var(--accent-soft); color: var(--accent); }
.pesan b { font-weight: 650; }

/* Sembul */
.tirai {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  display: grid;
  place-items: center;
  padding: 20px;
  z-index: 60;
}
.sembul {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  box-shadow: var(--bayang-3);
  width: min(560px, 100%);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sembul-kop { padding: 15px 18px; border-bottom: 1px solid var(--line-2); display: flex; align-items: center; gap: 10px; }
.sembul-isi { padding: 18px; overflow-y: auto; }
.sembul-kaki { padding: 13px 18px; border-top: 1px solid var(--line-2); display: flex; gap: 8px; justify-content: flex-end; background: var(--surface-3); }

/* Panel geser */
.panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: var(--surface);
  border-left: 1px solid var(--line);
  box-shadow: var(--bayang-3);
  z-index: 61;
  display: flex;
  flex-direction: column;
  animation: geser var(--sedang-durasi);
}
@keyframes geser { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Roti panggang */
.roti-wadah { position: fixed; right: 16px; bottom: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.roti {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--nada, var(--accent));
  border-radius: var(--r-2);
  box-shadow: var(--bayang-2);
  padding: 10px 13px;
  font-size: 13px;
  min-width: 230px;
  max-width: 380px;
  animation: muncul var(--sedang-durasi);
}
@keyframes muncul { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* Rangka muat */
.rangka {
  background: linear-gradient(90deg, var(--line-3) 25%, var(--line-2) 37%, var(--line-3) 63%);
  background-size: 400% 100%;
  animation: kilau 1.3s ease-in-out infinite;
  border-radius: var(--r-1);
  height: 12px;
}
@keyframes kilau { from { background-position: 100% 50%; } to { background-position: 0 50%; } }

/*
   Bilah luring.

   Ditempel di bawah, bukan di atas: bagian atas layar dipakai kop halaman yang
   sedang dibaca, dan bilah yang menggesernya ke bawah akan memindahkan setiap
   tombol pada saat orang sedang mengarahkan tetikusnya ke sana. Bagian bawah
   kosong pada hampir setiap halaman.

   Warnanya nada peringatan, bukan nada kritis. Kehilangan jaringan bukan
   kerusakan sistem, dan mewarnainya merah membuat warna merah berhenti berarti
   apa-apa di layar yang penuh angka merah sungguhan.
*/
.bilah-luring {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(14px, env(safe-area-inset-bottom));
  z-index: 60;
  max-width: min(560px, calc(100vw - 28px));
  padding: 10px 15px;
  border-radius: var(--r-2);
  border: 1px solid var(--sedang-tepi);
  background: var(--sedang-bg);
  color: var(--ink-1);
  font-size: 13px;
  line-height: 1.5;
  box-shadow: var(--bayang-3);
}
.bilah-luring b { color: var(--sedang); }

/*
   Kerangka selama modul sebuah halaman diunduh.

   Bentuknya sengaja meniru susunan yang paling sering datang sesudahnya —
   judul, keterangan, sebaris ubin angka, lalu satu panel besar. Kerangka yang
   bentuknya jauh berbeda dari isinya membuat layar melompat begitu isinya
   tiba, dan lompatan itu lebih mengganggu daripada ruang kosong.
*/
.rangka-halaman { display: grid; gap: 14px; }
.rangka-ubin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-top: 4px;
}

/*
   Kilau dimatikan bagi yang meminta gerak dikurangi. Yang tersisa tetap sebuah
   blok abu-abu — pesannya "sedang dimuat" tersampaikan oleh bentuknya, bukan
   oleh geraknya.
*/
@media (prefers-reduced-motion: reduce) {
  .rangka { animation: none; }
}

/* --------------------------------------------------------------- 5. Halaman */

/* Masuk */
.masuk-latar {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr min(430px, 100%);
  background: var(--ground);
}
.masuk-kiri {
  background: var(--accent);
  color: var(--accent-in);
  padding: 44px 44px 36px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.masuk-kiri::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 18%, rgba(255,255,255,0.10), transparent 44%),
    radial-gradient(circle at 12% 88%, rgba(255,255,255,0.07), transparent 40%);
  pointer-events: none;
}
.masuk-kiri > * { position: relative; z-index: 1; }
.masuk-kiri h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.08; }
.masuk-kiri .sub { opacity: 0.85; max-width: 40ch; margin-top: 12px; font-size: 14px; }
.masuk-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.75;
}
.masuk-kanan {
  background: var(--surface);
  border-left: 1px solid var(--line);
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.masuk-statistik { display: flex; gap: 26px; flex-wrap: wrap; }
.masuk-statistik div { min-width: 78px; }
.masuk-statistik dt { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
.masuk-statistik dd { margin: 2px 0 0; font-family: var(--disp); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.03em; }

/* Peta */
.peta-bungkus { position: relative; height: 460px; border-radius: var(--r-3); overflow: hidden; background: var(--surface-3); }
.peta-legenda {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  padding: 9px 11px;
  font-size: 11.5px;
  box-shadow: var(--bayang-2);
  display: flex; flex-direction: column; gap: 4px;
  z-index: 5;
}
.peta-legenda span { display: flex; align-items: center; gap: 6px; }
.peta-legenda i { width: 9px; height: 9px; border-radius: 50%; display: block; flex: none; }

/* Bagan */
.bagan { width: 100%; display: block; overflow: visible; }
.bagan .sumbu { stroke: var(--line); stroke-width: 1; }
.bagan .kisi-garis { stroke: var(--line-3); stroke-width: 1; }
.bagan .label { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-4); }
.bagan .isi-area { opacity: 0.14; }
.bagan .garis { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bagan .titik-akhir { stroke: var(--surface); stroke-width: 2; }

/* ---------------------------------------------------- 6. Bantuan dan gerak */

.samar-teks { color: var(--ink-3); }
.kecil-teks { font-size: 12px; }
.mini-teks { font-size: 11px; }
.tebal { font-weight: 650; }
.rata-kanan { text-align: right; }
.potong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sembunyi { display: none !important; }
.penuh { width: 100%; }
.gap-6 { gap: 6px; }
.gap-12 { gap: 12px; }

.label-mono {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
}

@media (max-width: 1000px) {
  :root { --sidebar: 0px; }
  .cangkang { grid-template-columns: 1fr; }
  .samping {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 250px;
    z-index: 50;
    transform: translateX(-100%);
    transition: transform var(--sedang-durasi);
  }
  .samping.buka { transform: none; box-shadow: var(--bayang-3); }
  .masuk-latar { grid-template-columns: 1fr; }
  .masuk-kiri { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}



/* ------------------------------------------------------- 5b. Wajah baru */
/*
   Lapisan tampilan. Ditulis terpisah dari struktur supaya tampilan bisa
   dirombak tanpa menyentuh satu pun nama kelas yang dipakai halaman —
   dan supaya rombakan berikutnya juga tidak perlu.

   Yang membedakan wajah ini dari yang lama: kedalaman. Aplikasi lama datar,
   semuanya sebidang, dan mata tidak punya petunjuk mana yang di depan mana
   yang di belakang. Sekarang ada tiga lapis yang tegas — tepi kiri paling
   dalam, isi halaman di tengah, kartu terangkat di atasnya.
*/

body { font-size: 14.5px; letter-spacing: -0.005em; }

h1, h2, h3, h4 { font-family: var(--disp); font-weight: 700; letter-spacing: -0.022em; }

/* Angka memakai lebar tetap. Tanpa ini kolom tabel bergoyang setiap kali
   angkanya berubah, dan mata kehilangan jejak barisnya. */
.angka, .ubin-nilai, table.tabel td, .mini-teks {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Tepi kiri */

.samping {
  background: var(--gradien-tepi);
  border-right: none;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
  color: #DCE6F5;
}

.merek {
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  padding: 15px 16px;
}
/* Cincin kuningan tipis menggantikan ubin kuningan yang dulu ada di sini:
   lencananya sendiri sudah berwarna, dan latar penuh di belakangnya hanya
   menutupi tepinya. */
.merek-lambang {
  box-shadow: 0 0 0 1px rgba(201, 162, 77, 0.55), 0 3px 10px rgba(0, 0, 0, 0.3);
}
.merek-nama { color: #FFFFFF; font-weight: 700; letter-spacing: -0.02em; }
.merek-sub { color: rgba(213, 227, 245, 0.62); }

.nav-judul {
  color: rgba(190, 210, 236, 0.44);
  letter-spacing: 0.11em;
  font-size: 9.5px;
  font-weight: 700;
}

.nav-butir {
  color: rgba(214, 227, 244, 0.82);
  border-radius: var(--r-2);
  font-weight: 500;
}
.nav-butir:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}
.nav-butir[aria-current="page"] {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  color: #FFFFFF;
  font-weight: 650;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.nav-butir[aria-current="page"] svg { opacity: 1; }
.nav-butir .lencana {
  background: var(--brass-2);
  color: #1A1206;
  font-weight: 700;
}

.kaki-samping {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  background: rgba(0, 0, 0, 0.18);
}
.kaki-samping .kaki-nama { color: #FFFFFF; font-weight: 600; }
.kaki-samping .kaki-peran { color: rgba(200, 216, 236, 0.6); }
.kaki-samping .avatar {
  background: rgba(255, 255, 255, 0.13);
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}
.kaki-samping .tbl.ikon { color: rgba(214, 227, 244, 0.75); }
.kaki-samping .tbl.ikon:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

/* ------------------------------------------------------------ Bilah atas */

.bilah {
  background: var(--kaca);
  backdrop-filter: saturate(1.6) blur(14px);
  -webkit-backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid var(--line-2);
  position: sticky;
  top: 0;
  z-index: 30;
}
.bilah-judul { font-size: 16px; font-weight: 700; }
.bilah-sub { font-size: 11.5px; letter-spacing: 0.01em; }

/* ----------------------------------------------------------------- Kartu */

.kartu {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--bayang-1);
  overflow: hidden;
}
.kartu-kop {
  padding: 13px 16px 11px;
  border-bottom: 1px solid var(--line-3);
  background: var(--gradien-halus);
}
.kartu-kop h2, .kartu-kop h3 { font-size: 14px; font-weight: 700; letter-spacing: -0.02em; }
.kartu-kop .ket { font-size: 11.5px; margin-top: 1px; }

/* Kartu bernada: satu pita warna tipis di kepalanya, cukup untuk menandai
   sifat isinya tanpa mewarnai seluruh kartu. */
.kartu[data-nada] { border-color: var(--nada-tepi, var(--line-2)); }
.kartu[data-nada]::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--nada, var(--accent)), transparent 78%);
}
.kartu[data-nada="kritis"]  { --nada: var(--kritis);  --nada-tepi: var(--kritis-tepi); }
.kartu[data-nada="tinggi"]  { --nada: var(--tinggi);  --nada-tepi: var(--tinggi-tepi); }
.kartu[data-nada="positif"] { --nada: var(--positif); --nada-tepi: var(--positif-tepi); }
.kartu[data-nada="aksen"]   { --nada: var(--accent-2); --nada-tepi: var(--accent-tepi); }

/* ------------------------------------------------------------------ Ubin */

.ubin {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  box-shadow: var(--bayang-1);
  padding: 15px 16px 13px;
  position: relative;
  overflow: hidden;
}
.ubin::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--nada, var(--accent));
  border-radius: 0;
}
/* Semburat warna sangat tipis di sudut kanan atas. Cukup untuk membuat ubin
   terbaca sifatnya dari sudut mata, tidak cukup untuk mengganggu angkanya. */
.ubin::after {
  content: '';
  position: absolute;
  top: -46px; right: -46px;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: var(--nada, var(--accent));
  opacity: 0.07;
  pointer-events: none;
}
.ubin-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
}
.ubin-nilai {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 2.05rem;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: var(--nada, var(--ink));
}
.ubin-kaki { font-size: 11.5px; }

/* ---------------------------------------------------------------- Keping */

.keping {
  border-radius: 999px;
  font-weight: 650;
  font-size: 10.5px;
  letter-spacing: 0.02em;
  padding: 3px 9px 3px 8px;
  box-shadow: inset 0 0 0 1px var(--keping-tepi, transparent);
}
.keping[data-nada="kritis"]  { --keping-tepi: var(--kritis-tepi); }
.keping[data-nada="tinggi"]  { --keping-tepi: var(--tinggi-tepi); }
.keping[data-nada="sedang"]  { --keping-tepi: var(--sedang-tepi); }
.keping[data-nada="positif"] { --keping-tepi: var(--positif-tepi); }
.keping[data-nada="netral"]  { --keping-tepi: var(--netral-tepi); }
.keping[data-nada="rendah"]  { --keping-tepi: var(--rendah-tepi); }

/* ---------------------------------------------------------------- Tombol */

.tbl {
  border-radius: var(--r-2);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tbl.utama {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  border-color: var(--accent);
  color: var(--accent-in);
  box-shadow: var(--bayang-1), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.tbl.utama:hover { filter: brightness(1.09); }

/* ---------------------------------------------------------------- Tabel */

table.tabel thead th {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: 500;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line-2);
}
table.tabel tbody tr:hover { background: var(--accent-soft); }
table.tabel tbody td { border-bottom: 1px solid var(--line-3); }

/* -------------------------------------------------------- Kanal sentimen */
/*
   Dua kanal berdampingan: negatif di kiri, positif di kanan. Sengaja tidak
   dijadikan satu tumpukan angka. Pimpinan yang membuka dasbor pertama-tama
   ingin tahu satu hal — ada apa yang buruk hari ini — dan angka gabungan
   memaksa ia menghitung sendiri sebelum bisa menjawabnya.
*/
.kanal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-3);
  align-items: start;
}
.kanal-kotak {
  background: var(--surface-2);
  border: 1px solid var(--kanal-tepi, var(--line-2));
  border-radius: var(--r-3);
  box-shadow: var(--bayang-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.kanal-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  background: var(--kanal-bg, var(--surface-3));
  border-bottom: 1px solid var(--kanal-tepi, var(--line-2));
}
.kanal-tanda {
  width: 30px; height: 30px;
  border-radius: var(--r-2);
  display: grid;
  place-items: center;
  background: var(--kanal-warna);
  color: var(--surface-2);
  flex: none;
  box-shadow: var(--bayang-1);
}
.kanal-tanda svg { width: 16px; height: 16px; }
.kanal-nama { font-family: var(--disp); font-weight: 700; font-size: 14px; letter-spacing: -0.02em; }
.kanal-ket { font-size: 11.5px; color: var(--ink-3); }
.kanal-angka {
  margin-left: auto;
  font-family: var(--disp);
  font-weight: 800;
  font-size: 1.9rem;
  letter-spacing: -0.045em;
  color: var(--kanal-warna);
  line-height: 1;
}
.kanal-kotak[data-sisi="negatif"] {
  --kanal-warna: var(--kritis);
  --kanal-bg: var(--kritis-bg);
  --kanal-tepi: var(--kritis-tepi);
}
.kanal-kotak[data-sisi="positif"] {
  --kanal-warna: var(--positif);
  --kanal-bg: var(--positif-bg);
  --kanal-tepi: var(--positif-tepi);
}
.kanal-isi { padding: 0; }

/* Baris ringkas di dalam kanal */
.kanal-baris {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-3);
  transition: background var(--cepat);
}
.kanal-baris:last-child { border-bottom: none; }
.kanal-baris:hover { background: var(--surface-3); }
.kanal-hitung {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--kanal-warna);
  background: var(--kanal-bg);
  border: 1px solid var(--kanal-tepi);
  border-radius: var(--r-1);
  padding: 1px 6px;
  flex: none;
  margin-top: 1px;
}
.kanal-judul { font-size: 13px; font-weight: 600; line-height: 1.4; }
.kanal-sub { font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }

/* Batang perbandingan negatif-positif */
.imbang {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--line-3);
  box-shadow: inset 0 1px 2px rgba(15, 30, 60, 0.1);
}
.imbang > span { display: block; transition: flex var(--sedang-durasi); }
.imbang .neg { background: linear-gradient(90deg, var(--kritis), color-mix(in srgb, var(--kritis) 72%, #fff)); }
.imbang .net { background: var(--netral); }
.imbang .pos { background: linear-gradient(90deg, color-mix(in srgb, var(--positif) 72%, #fff), var(--positif)); }

/* ------------------------------------------------------- Kartu peristiwa */
/*
   Satu peristiwa, bukan satu berita. Delapan publikasi tentang satu napi yang
   kabur adalah satu kejadian dengan eksposur besar — dan kartu ini menampilkan
   keduanya sekaligus supaya tidak ada lagi yang membacanya sebagai delapan
   kejadian.
*/
.peristiwa {
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--nada, var(--kritis));
  border-radius: var(--r-2);
  background: var(--surface-2);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: box-shadow var(--sedang-durasi), transform var(--sedang-durasi);
}
@media (hover: hover) { .peristiwa:hover { box-shadow: var(--bayang-2); } }
.peristiwa-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* Penandaan SIP di Laporan Berkala. Empat isian sejajar di layar lebar,
   bertumpuk di ponsel; pernyataan persetujuan di bawahnya selebar kartu. */
.sip-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.sip-kisi label { display: block; margin-bottom: 5px; }
.sip-kisi .masukan { width: 100%; }
.sip-kisi .mini-teks { margin-top: 4px; }
.sip-setuju {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  font-size: 13px;
  line-height: 1.5;
  cursor: pointer;
}
.sip-setuju input { margin-top: 3px; flex: none; }

/* Saran tindak lanjut pada kartu peristiwa. Pita di tepi kiri mengikuti
   tindakannya, sama seperti kartu peristiwa mengikuti urgensinya: yang
   memindai daftar membaca warna lebih dulu, tulisan sesudahnya. */
.saran-tindak {
  border-left: 3px solid var(--line-2);
  padding: 6px 0 6px 10px;
  display: grid;
  gap: 4px;
}
.saran-tindak[data-tindak="sidak"] { border-left-color: var(--kritis, #D64545); }
.saran-tindak[data-tindak="klarifikasi"] { border-left-color: var(--sedang, #D69E2E); }
.saran-tindak[data-tindak="verifikasi"] { border-left-color: var(--rendah, #4A7FC1); }
.saran-kop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.saran-tindak summary { cursor: pointer; font-size: 11.5px; color: var(--ink-3); }
.saran-alasan, .saran-langkah { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.saran-langkah { margin-bottom: 8px; }
.saran-ringkas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.peristiwa-judul { font-size: 13.5px; font-weight: 650; line-height: 1.4; }
.peristiwa-kaki {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--ink-3);
}
.peristiwa-kaki b { color: var(--ink); font-family: var(--mono); font-weight: 600; }

/* Ukuran eksposur: batang kecil yang panjangnya sebanding tekanan opini */
.eksposur {
  height: 4px;
  border-radius: 999px;
  background: var(--line-3);
  overflow: hidden;
}
.eksposur > i {
  display: block;
  height: 100%;
  background: var(--nada, var(--kritis));
  border-radius: 999px;
}

/* --------------------------------------------------------- Ukuran mutu */

.mutu {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  color: var(--ink-3);
}
.mutu-batang {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: var(--line-3);
  overflow: hidden;
  display: flex;
}
.mutu-batang > span { display: block; }
.mutu-batang .baik { background: var(--positif); }
.mutu-batang .lirik { background: var(--sedang); }
.mutu-batang .telaah { background: var(--tinggi); }

/* ------------------------------------------------------ Kendali bersegmen */

.segmen {
  display: inline-flex;
  /* Di ponsel deretan saring status (Tindak Lanjut: lima status) lebih lebar
     dari layar; tanpa bungkus tombol terakhirnya terdorong keluar dan seluruh
     halaman ikut bergeser ke samping. */
  flex-wrap: wrap;
  max-width: 100%;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 2px;
  gap: 2px;
}
.segmen button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: calc(var(--r-2) - 3px);
  cursor: pointer;
  transition: background var(--cepat), color var(--cepat);
}
.segmen button:hover { color: var(--ink); }
.segmen button[aria-pressed="true"],
.segmen button[aria-current="page"] {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: var(--bayang-1);
}

/* Bilah tab menu gabungan (ui/bingkai-tab.js). Tabnya tautan (aria-current),
   bukan sakelar (aria-pressed), tetapi rupanya sengaja sama
   dengan kendali bersegmen lain supaya tidak ada bentuk tab kedua yang harus
   dipelajari. Pada layar sempit ia bergulir ke samping, bukan membungkus. */
.bingkai-tab { align-self: flex-start; max-width: 100%; overflow-x: auto; }
.bingkai-tab button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: 12.5px;
  padding: 6px 14px;
}
.bingkai-tab svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ Halaman masuk */

/*
   Panel kiri sengaja gelap di kedua mode — gradien navy kelembagaan, bukan
   permukaan yang ikut berbalik terang/gelap seperti bagian lain aplikasi.
   Warnanya dulu memakai token --accent-in, yang artinya berbalik di mode
   gelap (dari putih menjadi nyaris hitam, sebab token itu dirancang untuk
   dipakai di atas --accent yang memang berbalik terang). Panel ini tidak
   berbalik, jadi mewarisi tulisan nyaris hitam di atas latar yang juga
   nyaris hitam — persis kasus yang ditemukan pada halaman Masuk.
   Warna tulisannya sekarang tetap terang, terlepas dari mode yang aktif.
*/
.masuk-kiri {
  background: var(--gradien-tepi);
  color: #EAF1FB;
}

/* ------------------------------------------------------------- 6b. Gerak */
/*
   Lapisan gerak. Ditaruh paling akhir supaya tidak ada aturan lain yang
   menimpanya secara tidak sengaja, dan supaya seluruh gerak aplikasi bisa
   dibaca di satu tempat.

   Prinsipnya satu: gerak menjelaskan perubahan. Apa pun yang bergerak di sini
   bergerak karena ada sesuatu yang baru saja berubah, bukan supaya terlihat
   mahal. Semuanya padam pada perangkat yang meminta gerak dikurangi.
*/

@keyframes naik-masuk {
  from { opacity: 0; transform: translateY(10px) scale(0.995); }
  to   { opacity: 1; transform: none; }
}
@keyframes redup-masuk { from { opacity: 0; } to { opacity: 1; } }
@keyframes mekar {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}
@keyframes denyut-sorot {
  0%   { background-color: color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { background-color: transparent; }
}
@keyframes tumbuh-pita {
  from { transform: scaleX(0); }
  to   { transform: none; }
}

.gerak-masuk {
  animation: naik-masuk 420ms cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: var(--tunda, 0ms);
}

.gerak-bidang {
  animation: redup-masuk 700ms ease-out both;
  animation-delay: 120ms;
}

.gerak-titik {
  animation: mekar 320ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: var(--tunda, 0ms);
}

/* Busur donat mekar dari pusatnya sendiri, bukan dari sudut kotak gambar. */
.gerak-busur {
  transform-box: fill-box;
  transform-origin: center;
  animation: mekar 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--tunda, 0ms);
}

.gerak-pita {
  transform-origin: left center;
  animation: tumbuh-pita 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--tunda, 0ms);
}

/* Nilai yang berubah sejak tampilan terakhir. Sorotannya sengaja pendek:
   cukup untuk menarik mata sekali, tidak cukup untuk mengganggu. */
.sorot-ubah {
  animation: denyut-sorot 900ms ease-out both;
  border-radius: var(--r-1);
}

/* Kartu terangkat sedikit saat disentuh penunjuk. Bayangannya yang berubah,
   bukan posisinya secara mencolok — ini aplikasi kerja, bukan etalase. */
.kartu {
  transition: box-shadow var(--sedang-durasi), border-color var(--sedang-durasi), transform var(--sedang-durasi);
}
@media (hover: hover) {
  .kartu:hover { box-shadow: var(--bayang-2); border-color: var(--line); }
  .ubin:hover { border-color: var(--line); }
}

.ubin {
  transition: box-shadow var(--sedang-durasi), border-color var(--sedang-durasi);
}

/* Butir navigasi: penanda halaman aktif tumbuh dari atas ke bawah, sehingga
   perpindahan halaman terasa sebagai satu penanda yang bergeser. */
.nav-butir { position: relative; transition: background var(--cepat), color var(--cepat); }
.nav-butir::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 0;
  background: var(--accent-in, #fff);
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
  transition: height var(--sedang-durasi);
}
.nav-butir[aria-current="page"]::before { height: 62%; }

/* Tombol menekan sedikit ketika benar-benar ditekan. Umpan balik sentuh
   yang paling murah dan paling jelas. */
.tbl { transition: background var(--cepat), border-color var(--cepat), color var(--cepat), transform 90ms ease; }
.tbl:active { transform: translateY(1px); }

/* Cincin fokus yang terlihat di kedua tampilan. Wajib: sebagian pengguna
   menjelajah aplikasi ini sepenuhnya dengan papan ketik. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Peralihan halaman. Dipakai hanya bila peramban mendukung View Transitions;
   selebihnya halaman berganti seperti biasa tanpa ada yang rusak. */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: redup-keluar 140ms ease-in both; }
  ::view-transition-new(root) { animation: naik-masuk 260ms cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes redup-keluar { to { opacity: 0; } }

/* Bilah judul ikut berganti, tetapi sebagai unsurnya sendiri supaya judul
   tidak ikut melompat bersama seluruh halaman. */
.bilah-judul { view-transition-name: bilah-judul; }
.samping { view-transition-name: samping; }

/* Baris tabel yang disorot penunjuk. */
table.tabel tbody tr { transition: background var(--cepat), box-shadow var(--cepat); }

@media (prefers-reduced-motion: reduce) {
  .gerak-masuk, .gerak-bidang, .gerak-titik, .gerak-busur, .gerak-pita, .sorot-ubah {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .bar-isi { transition: none !important; }
}

@media print {
  .samping, .bilah, .bilah-alat, .tbl { display: none !important; }
  body { background: #fff; color: #000; }
  .kartu { break-inside: avoid; border-color: #ccc; }
}

/* ------------------------------------------------- 7. Integrasi & distribusi */
/*
   Kelas di bawah lahir bersama halaman Integrasi. Ditulis sebagai bagian dari
   sistem desain, bukan sebagai gaya dalam halaman, karena daftar berlangkah dan
   baris-tujuan yang sama akan dipakai lagi oleh halaman Sinkronisasi dan
   Kesehatan Sistem. Gaya yang hidup di dalam satu halaman selalu berakhir
   disalin ke halaman berikutnya dengan satu nilai yang berbeda.
*/

/* Bantuan umum yang sebelumnya belum ada namanya */

.ket { font-size: 11.5px; color: var(--ink-4); line-height: 1.45; }
.nowrap { white-space: nowrap; }
.dorong-kanan { justify-content: flex-end; }
.kritis-teks { color: var(--kritis); }
.redup { opacity: 0.55; }

/* Dua baris lalu berhenti. Judul berita di dalam tabel sering panjang, dan
   memotongnya pada satu baris membuang terlalu banyak untuk bisa dikenali. */
.potong-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kisi 3:2 — panel utama di kiri, ringkasan pendamping di kanan. */
.kisi-integrasi { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
@media (max-width: 1100px) {
  .kisi-integrasi { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ Daftar langkah */
/*
   Penyiapan yang macet perlu menunjukkan dua hal sekaligus: sudah sampai mana,
   dan masih berapa lagi. Nomor yang sudah terpenuhi berganti jadi centang;
   satu langkah yang sedang berlaku diberi cincin supaya mata jatuh ke sana
   lebih dulu daripada ke mana pun di halaman ini.
*/

.langkah {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: langkah;
}

.langkah-butir {
  display: flex;
  gap: 12px;
  padding: 10px 10px 10px 8px;
  border-radius: var(--r-2);
  position: relative;
}

/* Garis penghubung antarlangkah. Berhenti sebelum butir terakhir supaya
   tidak menggantung di udara. */
.langkah-butir:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 36px;
  bottom: -2px;
  width: 1.5px;
  background: var(--line-2);
}

.langkah-butir.selesai:not(:last-child)::after { background: var(--positif-tepi); }

.langkah-nomor {
  flex: none;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--surface-3);
  color: var(--ink-4);
  border: 1.5px solid var(--line-2);
  position: relative;
  z-index: 1;
}

.langkah-nomor svg { width: 14px; height: 14px; }

.langkah-butir.selesai .langkah-nomor {
  background: var(--positif-bg);
  color: var(--positif);
  border-color: var(--positif-tepi);
}

.langkah-butir.berjalan {
  background: var(--accent-soft);
}
.langkah-butir.berjalan .langkah-nomor {
  background: var(--accent);
  color: var(--accent-in);
  border-color: var(--accent);
  box-shadow: var(--cincin);
}

.langkah-butir b { font-size: 13.5px; font-weight: 650; display: block; }
.langkah-butir p { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; line-height: 1.5; }
.langkah-butir.selesai b { color: var(--ink-3); font-weight: 550; }
.langkah-butir.selesai p { color: var(--ink-4); }

/* ---------------------------------------------------------- Baris grup */

.grup-daftar { display: flex; flex-direction: column; gap: 8px; }

.grup-baris {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  transition: border-color var(--cepat), box-shadow var(--cepat);
}
@media (hover: hover) {
  .grup-baris:hover { border-color: var(--accent-tepi); box-shadow: var(--bayang-1); }
}

.grup-tanda {
  flex: none;
  width: 32px; height: 32px;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}
.grup-tanda svg { width: 15px; height: 15px; }

.grup-nama { font-size: 13.5px; font-weight: 600; }
.grup-meta { font-size: 11.5px; color: var(--ink-4); margin-top: 1px; }

/* ------------------------------------------------------- Ringkasan nilai */
/*
   Daftar istilah-dan-nilai untuk keterangan yang pendek-pendek. Dipakai
   ketika sebuah tabel akan terlalu berat untuk lima baris.
*/

.ringkas-nilai { display: flex; flex-direction: column; gap: 1px; }

.ringkas-nilai > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line-3);
}
.ringkas-nilai > div:last-child { border-bottom: none; }

.ringkas-nilai dt { font-size: 12.5px; color: var(--ink-3); flex: none; }
.ringkas-nilai dd { font-size: 12.5px; font-weight: 550; text-align: right; min-width: 0; }

.temuan {
  list-style: none;
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.temuan li {
  font-size: 12px;
  line-height: 1.5;
  color: var(--kritis);
  background: var(--kritis-bg);
  border: 1px solid var(--kritis-tepi);
  border-radius: var(--r-1);
  padding: 7px 10px;
}

/* Baris penjelas di dalam pesan sistem. Ukurannya turun satu tingkat supaya
   kalimat pertama tetap yang terbaca lebih dulu. */
.pesan-rinci {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 5px;
  line-height: 1.55;
}

/* -------------------------------------------------------- 8. Distribusi */

.tumpuk-rapat { display: flex; flex-direction: column; gap: 10px; }

.kisi-distribusi { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
@media (max-width: 1000px) {
  .kisi-distribusi { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------ Gelembung pesan */
/*
   Pratinjau dibuat menyerupai gelembung pesan Telegram, dengan lebar yang
   dibatasi mendekati lebar layar telepon. Alasannya bukan gaya-gayaan: yang
   memutuskan mengirim melihat pesannya di layar kerja selebar 1440 piksel,
   sementara yang membacanya melihat di kolom selebar 360. Kalimat yang muat
   dalam satu baris di sini bisa menjadi lima baris di sana, dan panjang itu
   yang menentukan apakah pesannya masih terbaca sebagai ringkasan.
*/

.gelembung-wadah { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

.gelembung {
  max-width: 420px;
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 14px 14px 14px 4px;
  padding: 13px 15px;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink);
  box-shadow: var(--bayang-1);
  overflow-wrap: anywhere;
}

.gelembung b { font-weight: 700; }
.gelembung i { color: var(--ink-3); font-style: italic; }
.gelembung code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--surface-3);
  padding: 1px 5px;
  border-radius: var(--r-1);
}
.gelembung a { color: var(--accent-3); }

.gelembung-kaki {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-4);
  padding-left: 4px;
}

/* ------------------------------------------------------------- Penerima */

.penerima { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }

.penerima-keping {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-tepi);
  color: var(--accent);
  font-size: 12px;
}
.penerima-keping svg { width: 13px; height: 13px; }
.penerima-keping .ket { color: var(--accent); opacity: 0.75; }

/* -------------------------------------------------- Baris mendesak & jejak */

.mendesak-baris,
.jejak-baris {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
}

.mendesak-baris > .keping,
.jejak-baris > .keping { flex: none; margin-top: 1px; }

.mendesak-baris > .tbl { flex: none; align-self: center; }
.jejak-baris > .ket { flex: none; align-self: center; }

/* ------------------------------------------------------- Baris centang */

.centang-baris {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  cursor: pointer;
}
.centang-baris input { margin-top: 2px; flex: none; width: 15px; height: 15px; accent-color: var(--accent); }
.centang-baris b { display: block; font-size: 13px; font-weight: 650; }
.centang-baris .ket { display: block; margin-top: 3px; }

/* ------------------------------------------------ 9. Layar sempit & jangkauan */

/*
   Tautan lompat. Terlihat hanya ketika ia menerima fokus papan tik.
   Tanpa ini, seorang petugas yang bekerja dengan papan tik harus melewati dua
   puluh dua butir menu setiap kali berpindah halaman sebelum sampai ke isinya.
*/
.lompat {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 10px 16px;
  border-radius: var(--r-2);
  background: var(--accent);
  color: var(--accent-in);
  font-size: 13px;
  font-weight: 650;
  box-shadow: var(--bayang-3);
  transform: translateY(-160%);
  transition: transform var(--cepat);
}
.lompat:focus-visible {
  transform: none;
  outline: 2px solid var(--accent-in);
  outline-offset: -4px;
}

/* Tombol yang hanya ada ketika tepi kiri berubah menjadi laci. */
.hanya-sempit { display: none; }

/*
   Tirai di belakang laci. Dua gunanya: memberi tahu bahwa isi di belakangnya
   sedang tidak aktif, dan menyediakan sasaran tutup seluas layar — jauh lebih
   mudah dijangkau ibu jari daripada tombol kecil di pojok.
*/
.tirai-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  animation: masuk-pudar var(--cepat) both;
}

@keyframes masuk-pudar { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 1000px) {
  .hanya-sempit { display: inline-flex; }
  body.menu-terbuka .tirai-menu { display: block; }
  /* Isi di belakang laci berhenti bisa digulung, supaya menggeser tirai tidak
     diam-diam menggulung halaman yang sedang tertutup. */
  body.menu-terbuka { overflow: hidden; }
  .samping { z-index: 50; }
}

/*
   Bilah atas pada layar sempit. Judul halaman boleh memendek, tetapi tombol
   di kanannya tidak boleh ikut terdorong keluar layar.
*/
@media (max-width: 640px) {
  .isi { padding: 14px 12px 48px; }
  .bilah { padding: 0 12px; gap: 8px; }
  .bilah-judul { font-size: 14px; }
  .bilah > div { min-width: 0; }
  .bilah-judul, .bilah-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .bilah-kanan { gap: 4px; }
  /* Keping "Mode peragaan" memakan lebar yang dibutuhkan tombol. */
  .bilah-kanan .keping { display: none; }
  .kartu-kop { flex-wrap: wrap; gap: 8px; }
  .kartu-kop .dorong { margin-left: 0; }

  /*
     Label ubin boleh membungkus di sini, dan hanya di sini.

     Di layar lebar labelnya dipotong dengan elipsis karena satu barisnya
     selalu cukup. Pada dua kolom selebar 175px, aturan yang sama menjadikan
     "BERITA MASUK HARI INI" terbaca "BERITA MASUK HAR…": ubinnya muat di
     layar tetapi berhenti menyebutkan angka apa yang sedang ditunjukkannya.

     Tingginya dikunci dua baris supaya angka keempat ubin tetap sebaris —
     tanpa itu, ubin berlabel pendek menaikkan angkanya sendiri dan barisnya
     terbaca seperti empat kartu yang tidak sengaja bertetangga.
  */
  .ubin-label {
    white-space: normal;
    overflow: visible;
    line-height: 1.35;
    min-height: 2.7em;
  }
  .ubin-nilai { font-size: 1.6rem; }
}

/*
   Tabel padat data tidak bisa dipaksa muat di layar telepon tanpa menjadikan
   angkanya terlalu kecil untuk dibaca. Yang benar adalah membiarkannya
   digulung ke samping di dalam wadahnya sendiri — bukan menggeser seluruh
   halaman, dan bukan pula mengecilkan hurufnya di bawah batas keterbacaan.
*/
/* Di bawah lebar ini tabel berhenti diperas dan mulai digulung ke samping di
   dalam wadahnya sendiri. Memerasnya lebih jauh membuat kolom angka bertumpuk
   dua baris dan judul berita terpotong pada suku kata — yang berarti tabelnya
   tetap ada di layar tetapi berhenti bisa dibaca. */
@media (max-width: 720px) {
  .tabel-bungkus > table.tabel { min-width: 560px; }
}

/*
   Sasaran sentuh. Aturan 44×44 tidak menuntut tombolnya digambar sebesar itu;
   yang dituntut adalah daerah yang menerima sentuhan. Maka yang diperbesar
   adalah jangkauannya, bukan bentuknya — tampilan tetap padat sebagaimana
   layaknya aplikasi kerja, tetapi tidak lagi menuntut ketepatan sentuhan.
*/
@media (pointer: coarse) {
  .tbl.ikon,
  .tbl.kecil,
  .nav-butir {
    position: relative;
  }
  .tbl.ikon::after,
  .tbl.kecil::after {
    content: '';
    position: absolute;
    inset: 50% 50%;
    width: 44px;
    height: 44px;
    transform: translate(-50%, -50%);
  }
}

/* Cincin fokus tidak pernah dihilangkan, dan tidak pernah tertutup tepi
   wadahnya. Yang memakai papan tik berhak melihat di mana ia berada. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
.nav-butir:focus-visible { outline-color: var(--accent-3); outline-offset: -2px; }

/* ------------------------------------------------------ 10. Bauran urgensi */

.urgensi-pita {
  display: flex;
  gap: 2px;
  height: 10px;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}

.urgensi-daftar { display: flex; flex-direction: column; gap: 2px; }

.urgensi-baris {
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 5px 2px;
}

.urgensi-nama {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--ink-2);
  white-space: nowrap;
}
.urgensi-nama i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: none;
}

/* Batang latar memberi tahu seberapa jauh sebuah tingkat dari yang tertinggi.
   Tanpa latar itu, batang pendek terbaca sebagai "kosong" alih-alih "kecil". */
.urgensi-batang {
  height: 7px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
  display: block;
}
.urgensi-batang i {
  display: block;
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
  transition: width var(--sedang-durasi);
}

.urgensi-angka {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}
.urgensi-angka small {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-4);
  margin-left: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .urgensi-batang i { transition: none; }
}

/* ------------------------------------------------------- 11. Palet perintah */

/*
   Tombol pemicu di bilah atas. Ia menampilkan pintasannya sendiri, sebab
   pintasan yang tidak pernah ditulis di layar hanya diketahui orang yang
   membuatnya.
*/
.cari-pemicu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--ink-4);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: border-color var(--cepat), color var(--cepat), background var(--cepat);
}
.cari-pemicu:hover { border-color: var(--accent-tepi); color: var(--ink-2); }
.cari-pemicu svg { width: 15px; height: 15px; flex: none; }
.cari-pemicu span { min-width: 92px; text-align: left; }

kbd {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: var(--r-1);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  color: var(--ink-4);
  white-space: nowrap;
}

@media (max-width: 900px) {
  .cari-pemicu span, .cari-pemicu kbd { display: none; }
  .cari-pemicu { padding: 0; width: 34px; justify-content: center; }
}

/* ------------------------------------------------------------------ tirai */

.palet-tirai {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--overlay);
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  /* Tidak di tengah tegak. Kotak pencarian yang muncul di sepertiga atas layar
     lebih dekat ke tempat mata sudah berada, dan menyisakan ruang bagi daftar
     hasil untuk tumbuh ke bawah tanpa memindahkan kotaknya. */
  align-items: flex-start;
  padding: 12vh 16px 16px;
  animation: masuk-pudar var(--cepat) both;
}

.palet {
  width: 100%;
  max-width: 620px;
  background: var(--surface-tinggi);
  border: 1px solid var(--line);
  border-radius: var(--r-4);
  box-shadow: var(--bayang-3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: min(560px, 76vh);
  animation: palet-naik var(--pegas) both;
}

@keyframes palet-naik {
  from { transform: translateY(-8px) scale(0.985); opacity: 0 }
  to { transform: none; opacity: 1 }
}

.palet-kotak {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  border-bottom: 1px solid var(--line-2);
  flex: none;
}
.palet-kotak svg { width: 18px; height: 18px; color: var(--ink-4); flex: none; }
.palet-kotak input {
  flex: 1;
  border: 0;
  background: none;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}
.palet-kotak input:focus { outline: none; }
.palet-kotak input::placeholder { color: var(--ink-4); }

.palet-hasil { overflow-y: auto; padding: 6px; flex: 1; }

.palet-golongan {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 10px 10px 5px;
}

.palet-butir {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-2);
  cursor: pointer;
}
/* Penanda pilihan memakai latar penuh, bukan garis tepi. Pada daftar yang
   digulung dengan panah, latar penuh terbaca sekejap; garis tepi tidak. */
.palet-butir.terpilih { background: var(--accent-soft); }

.palet-ikon {
  width: 30px; height: 30px;
  flex: none;
  border-radius: var(--r-2);
  display: grid; place-items: center;
  background: var(--surface-3);
  color: var(--ink-3);
}
.palet-butir.terpilih .palet-ikon { background: var(--accent); color: var(--accent-in); }
.palet-ikon svg { width: 15px; height: 15px; }

.palet-teks { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.palet-judul {
  font-size: 13.5px;
  font-weight: 550;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palet-ket {
  font-size: 11.5px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.palet-kosong {
  padding: 30px 20px;
  text-align: center;
  color: var(--ink-4);
  font-size: 13px;
  line-height: 1.6;
}

.palet-kaki {
  flex: none;
  display: flex;
  gap: 16px;
  padding: 9px 16px;
  border-top: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 11px;
  color: var(--ink-4);
}
.palet-kaki span { display: inline-flex; align-items: center; gap: 5px; }

@media (max-width: 640px) {
  .palet-tirai { padding: 8vh 10px 10px; }
  .palet-kaki { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .palet, .palet-tirai { animation: none; }
}

/* ------------------------------------------------------- 12. Antrean telaah */

.telaah-kemajuan {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 13px 16px;
}

.telaah-kemajuan-bilah {
  height: 6px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.telaah-kemajuan-bilah i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-2), var(--positif));
  transition: width var(--sedang-durasi);
}

.telaah-kemajuan-teks {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  font-size: 12px;
  color: var(--ink-3);
}
.telaah-kemajuan-teks b { color: var(--ink); font-weight: 700; }

/* ------------------------------------------------------------ isi berita */

.telaah-berita h3 {
  font-size: 1.15rem;
  line-height: 1.35;
  /* Judul pendek tidak boleh menyisakan satu kata sendirian di baris kedua. */
  text-wrap: balance;
}

.telaah-meta {
  margin-top: 7px;
  font-size: 12.5px;
  color: var(--ink-4);
  line-height: 1.6;
}
.telaah-meta .pemisah { opacity: 0.5; margin: 0 2px; }

.telaah-ringkas {
  margin-top: 12px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ink-2);
  /* Panjang baris dijaga agar tetap terbaca, bukan selebar kartunya. */
  max-width: 72ch;
}

/* ---------------------------------------------------------- panel mesin */

.mesin-panel {
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 14px 16px;
}

.mesin-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

/* Angka keyakinan berubah nada, bukan hanya berubah angka: yang di bawah
   ambang harus terlihat berbeda sebelum angkanya sempat dibaca. */
.mesin-yakin {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--sedang-bg);
  color: var(--sedang);
  border: 1px solid var(--sedang-tepi);
}
.mesin-yakin[data-cukup="true"] {
  background: var(--positif-bg);
  color: var(--positif);
  border-color: var(--positif-tepi);
}

.mesin-nilai {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: 12px 16px;
}
.mesin-nilai dt {
  font-size: 11px;
  color: var(--ink-4);
  margin-bottom: 3px;
}
.mesin-nilai dd { font-size: 13px; font-weight: 550; line-height: 1.4; }

.mesin-kunci { margin-top: 14px; }
.mesin-kunci > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.kunci-keping {
  font-family: var(--mono);
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--r-1);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
}

.mesin-alasan {
  margin-top: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--ink-3);
  padding-top: 12px;
  border-top: 1px solid var(--line-2);
}

/* Jejak versi mesin. Sengaja paling redup di dalam panel: ia keterangan
   perawatan, bukan bagian dari penilaian yang sedang dibaca analis. */
.mesin-jejak {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-4);
}
.mesin-jejak b { font-weight: 600; color: var(--ink-3); }

/* ---------------------------------------------------------- tuntunan */

.telaah-tuntun {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-2);
  padding: 4px 2px;
}
.telaah-tuntun ul {
  list-style: none;
  margin: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.telaah-tuntun li { padding-left: 14px; position: relative; }
.telaah-tuntun li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--line);
}
.telaah-tuntun .ket { margin-top: 12px; line-height: 2; }

/* ------------------------------------------------------ formulir koreksi */

.koreksi-panel { display: flex; flex-direction: column; gap: 14px; }
.koreksi-panel .isian { display: flex; flex-direction: column; gap: 5px; }
.koreksi-panel label { font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.koreksi-panel .pilihan.penuh { width: 100%; min-width: 0; }
.koreksi-panel textarea.masukan { resize: vertical; min-height: 56px; }

/* ----------------------------------------------------------- baris aksi */

/*
   Baris keputusan menempel di bawah layar. Antrean ini digulung ke bawah untuk
   membaca ringkasan berita, dan tombol yang ikut hilang ke atas memaksa gulung
   balik sebelum setiap keputusan.
*/
.telaah-aksi {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  background: var(--kaca);
  backdrop-filter: blur(10px);
  box-shadow: var(--bayang-2);
}

.telaah-rekap { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------ berikutnya dalam antrean */

/*
   Empat kolom dengan lebar tetap untuk tiga di antaranya, supaya nomor,
   urgensi, dan unit berbaris tegak lurus ke bawah. Hanya judul yang melar —
   dan judul pula satu-satunya yang dipotong, sebab ia satu-satunya yang masih
   bisa dikenali dari separuh awalnya.
*/
.telaah-berikut {
  list-style: none;
  /* Lekukan bawaan <ol> masih ada meski butirnya tidak bernomor sendiri, dan
     lekukan itu mendorong seluruh daftar 40 piksel dari tepi kartu. */
  padding-inline-start: 0;
  display: flex;
  flex-direction: column;
}
.telaah-berikut-butir {
  display: grid;
  grid-template-columns: 26px 62px minmax(0, 1fr) minmax(0, 190px);
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-3);
  font-size: 13px;
}
.telaah-berikut-butir:last-child { border-bottom: none; }
/* Keping urgensi selebar isinya, bukan selebar kolomnya. Tanpa ini, di layar
   telepon kolomnya melar sampai tepi kartu dan kepingnya ikut — sebuah pita
   merah selebar layar untuk satu kata. */
.telaah-berikut-butir .keping { justify-self: start; }
.telaah-berikut-nomor {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  text-align: right;
}
.telaah-berikut-judul {
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.telaah-berikut-unit {
  font-size: 12px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  /* Empat kolom di layar telepon menyisakan sembilan huruf untuk judul.
     Yang dipertahankan adalah barisnya, bukan kolomnya: nomor dan urgensi
     tetap berdampingan, judul dan unit turun ke bawahnya. */
  .telaah-berikut-butir {
    grid-template-columns: 26px minmax(0, 1fr);
    row-gap: 3px;
    padding: 9px 0;
  }
  .telaah-berikut-judul,
  .telaah-berikut-unit {
    grid-column: 2;
    white-space: normal;
  }
  .telaah-berikut-judul { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

  .telaah-aksi { gap: 8px; }
  .telaah-aksi .dorong { display: none; }
  .telaah-aksi .tbl { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .telaah-kemajuan-bilah i { transition: none; }
}

/* ------------------------------------------------------------------ 13. Koridor */

/*
   Panel kiri butuh posisi relatif dan overflow tersembunyi supaya panggung
   3D-nya tidak menembus ke luar kartu. Isi tekstualnya diberi wadah sendiri
   supaya urutan lapisannya pasti: koridor di paling belakang, gradien
   penjaga-kontras di tengah, teks di paling depan.
*/
.masuk-kiri { position: relative; isolation: isolate; }

/*
   Kop halaman masuk: dua lencana di atas tiga baris nama lembaga.

   Lencananya diberi cincin dan bayangan tipis, bukan latar penuh. Keduanya
   berdiri di atas koridor 3D yang bergerak, dan lencana tanpa tepi akan
   sesekali kehilangan batasnya ketika sebuah kartu terang kebetulan lewat
   persis di belakangnya.
*/
.masuk-kop { display: grid; gap: 14px; }

.masuk-lencana { display: flex; align-items: center; gap: 12px; }

.masuk-lencana img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 6px 18px rgba(4, 8, 16, 0.5);
}

@media (max-width: 520px) {
  .masuk-lencana img { width: 46px; height: 46px; }
}

.masuk-kiri-isi {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.koridor-panggung {
  position: absolute;
  inset: 0;
  z-index: 0;
  container-type: inline-size;
  pointer-events: none;
}

.koridor-lapis {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/*
   Penjaga kontras. Sebuah kartu yang kebetulan melintas persis di belakang
   judul tidak boleh membuatnya sesaat tak terbaca — gradien ini menggelapkan
   sepertiga atas dan seluruh sisi bawah panel, tempat judul dan formulir
   statistik berdiri, tanpa menutupi bagian tengah tempat koridornya paling
   ingin dilihat.
*/
.masuk-kiri::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(7,12,21,0.66) 0%, rgba(7,12,21,0.18) 26%, rgba(7,12,21,0.18) 58%, rgba(7,12,21,0.78) 100%);
  pointer-events: none;
}

/*
   Kartu terbesar di koridor lewat persis di ketinggian judul — itu yang
   membesarkannya, geometrinya memang begitu. Gradien di atas cukup untuk
   pinggiran panel, tetapi judulnya sendiri butuh jaminan lebih pasti: sebuah
   pelat kaca yang berdiri sendiri, supaya keterbacaannya tidak bergantung
   pada kebetulan letak kartu saat itu.
*/
.masuk-judul-plate {
  position: relative;
  background: rgba(6, 11, 20, 0.5);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--brass);
  border-radius: var(--r-3);
  padding: 18px 22px;
  margin: 0 -4px;
}

.koridor-kartu {
  position: absolute;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  backface-visibility: hidden;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

/*
   Setiap kartu tercat gradien dari palet dinas yang sama, hanya sudutnya
   yang berputar per posisi — supaya dinding kartunya terasa satu keluarga
   warna, bukan tempelan warna-warni acak. nth-child ganjil/genap memberi
   dua nada yang berselang-seling di sepanjang jalur.
*/
.koridor-kartu {
  background: linear-gradient(155deg, #1D4E8F 0%, #12335F 55%, #0A1B38 100%);
}
.koridor-kartu:nth-child(3n+1) {
  background: linear-gradient(155deg, #2A5FA8 0%, #16386A 55%, #0C2245 100%);
}
.koridor-kartu:nth-child(3n+2) {
  background: linear-gradient(160deg, #A9791C 0%, #7A5813 55%, #12335F 100%);
}

.koridor-ikon {
  display: grid;
  place-items: center;
  width: 34%;
  color: rgba(255, 255, 255, 0.92);
}
.koridor-ikon svg { width: 100%; height: 100%; }

.koridor-label {
  font-family: var(--mono);
  font-size: 6.4cqw;
  letter-spacing: 0.02em;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.25;
  padding: 0 8%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Kartu yang masih kecil di kejauhan tidak perlu menampilkan label — pada
   ukuran itu hurufnya sudah pasti tidak terbaca, dan memaksanya tampil hanya
   membuat kabut teks di tengah koridor. */
.koridor-kartu { font-size: 0; }
@container (min-width: 1px) {
  .koridor-label { font-size: clamp(0px, 6.4cqw, 15px); }
}

@media (prefers-reduced-motion: reduce) {
  .koridor-kartu { animation-play-state: paused !important; }
}

/* Peramban yang belum mengenal container query units (cqw) hanya akan
   menumpuk kartu di tengah tanpa bergerak jauh — cukup elegan sebagai
   jatuhan, tidak pecah. Perspektif dimatikan agar tumpukannya rapi. */
@supports not (width: 1cqw) {
  .koridor-panggung { display: none; }
}

/* ------------------------------------------------------ 14. Pemetaan UPT */

.kandidat-daftar { display: flex; flex-direction: column; gap: 7px; }

.kandidat-baris {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
  transition: border-color var(--cepat), background var(--cepat);
}
@media (hover: hover) {
  .kandidat-baris:hover { border-color: var(--accent-tepi); background: var(--accent-soft); }
}

.kandidat-skor {
  flex: none;
  min-width: 42px;
  text-align: center;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 6px;
  border-radius: var(--r-1);
  background: var(--sedang-bg);
  color: var(--sedang);
  border: 1px solid var(--sedang-tepi);
}
.kandidat-skor[data-kuat="true"] {
  background: var(--positif-bg);
  color: var(--positif);
  border-color: var(--positif-tepi);
}

.kandidat-teks { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.kandidat-nama { font-size: 13px; font-weight: 600; }
.kandidat-ket {
  font-size: 11.5px;
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kandidat-panah { flex: none; color: var(--ink-4); opacity: 0; transition: opacity var(--cepat); }
.kandidat-panah svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .kandidat-baris:hover .kandidat-panah { opacity: 1; }
}
@media (hover: none) {
  .kandidat-panah { opacity: 0.6; }
}

/* ==========================================================================
   Pilihan sentimen berketerangan
   --------------------------------------------------------------------------
   Sebelum ini sentimen berupa daftar berisi empat kata tanpa penjelasan apa
   pun, dan dua analis yang membaca berita yang sama boleh memilih berbeda —
   sementara pilihan itulah yang menjadi angka di dasbor pimpinan. Definisinya
   sekarang berada di tempat keputusan diambil, bukan di dokumen terpisah yang
   tidak pernah dibuka saat sedang menelaah.
   ========================================================================== */

.pilih-sentimen {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pilih-sentimen > legend {
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2);
}

.pilih-deret { display: flex; flex-direction: column; gap: 7px; }

.pilih-kartu {
  --nada-pilih: var(--ink-4);
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color var(--cepat), background var(--cepat);
}

.pilih-kartu[data-nada="kritis"]  { --nada-pilih: var(--kritis); }
.pilih-kartu[data-nada="netral"]  { --nada-pilih: var(--netral); }
.pilih-kartu[data-nada="positif"] { --nada-pilih: var(--positif); }

@media (hover: hover) {
  .pilih-kartu:hover { border-color: var(--nada-pilih); }
}

.pilih-kartu input[type="radio"] {
  margin: 2px 0 0;
  accent-color: var(--nada-pilih);
  flex: none;
}

/* Terpilih ditandai tepi berwarna sekaligus latar, bukan warna saja: satu
   penanda yang hanya berupa rona akan hilang bagi sebagian pembaca. */
.pilih-kartu:has(input:checked) {
  border-color: var(--nada-pilih);
  box-shadow: inset 3px 0 0 var(--nada-pilih);
  background: var(--surface-3);
}

.pilih-kartu:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.pilih-isi { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.pilih-judul {
  font-size: 13px;
  font-weight: 650;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
}

.pilih-ringkas {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nada-pilih);
  font-weight: 600;
}

.pilih-ket { font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

.pilih-petunjuk {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-4);
  border-left: 2px solid var(--line-2);
  padding-left: 8px;
  margin-top: 2px;
}

/* ==========================================================================
   Baris rekonsiliasi dasbor
   --------------------------------------------------------------------------
   Penjumlahan ditulis apa adanya di layar supaya selisih berikutnya terbaca
   oleh pembacanya sendiri, bukan ditemukan berbulan-bulan kemudian ketika
   seseorang kebetulan membandingkan dua halaman.
   ========================================================================== */

.rekonsiliasi {
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: var(--surface-2);
  padding: 11px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rekon-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
}

.rekon-hitung {
  font-size: 12.5px;
  color: var(--ink-2);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px;
}

.rekon-hitung b { color: var(--ink); font-variant-numeric: tabular-nums; }
.rekon-sama, .rekon-tambah { color: var(--ink-4); font-family: var(--mono); }
.rekon-kaki { font-size: 11.5px; color: var(--ink-4); line-height: 1.5; }

/* Penanda kolom wajib pada borang input. */
.wajib {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kritis);
  background: var(--kritis-bg);
  border-radius: var(--r-1);
  padding: 1px 5px;
  margin-left: 5px;
  vertical-align: 1px;
}

/* Borang input memakai area teks yang lebih tinggi daripada bawaan kolom. */
#borang-input textarea.masukan {
  height: auto;
  min-height: 96px;
  padding: 8px 10px;
  line-height: 1.55;
  resize: vertical;
}

#borang-input .pilihan.penuh { width: 100%; min-width: 0; }

/* ==========================================================================
   Ruang kantor wilayah
   --------------------------------------------------------------------------
   Aplikasinya satu, ruangnya dua. Petugas wilayah tidak boleh mengira sedang
   membaca angka nasional, dan petugas pusat yang tidak sengaja masuk dengan
   akun wilayah harus menyadarinya sebelum sempat menyimpulkan apa pun.

   Pembedanya warna aksen — biru laut kelembagaan berganti menjadi hijau
   pemasyarakatan — bukan tata letak yang berbeda. Tata letak yang berbeda
   menuntut orang mempelajari dua aplikasi; warna yang berbeda cukup untuk
   menyatakan "ini ruang lain" tanpa menuntut apa pun.

   Yang menahan data tetap policy di basis data. Warna hanya memberi tahu.
   ========================================================================== */

.cangkang[data-ruang="wilayah"] {
  --accent:      #14584A;
  --accent-2:    #1C7A66;
  --accent-soft: #DCEDE7;
  --accent-tepi: #B4D6CB;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .cangkang[data-ruang="wilayah"] {
    --accent:      #63C4AC;
    --accent-2:    #85D6C1;
    --accent-soft: #10302A;
    --accent-tepi: #1F4A40;
  }
}

:root[data-tema="gelap"] .cangkang[data-ruang="wilayah"] {
  --accent:      #63C4AC;
  --accent-2:    #85D6C1;
  --accent-soft: #10302A;
  --accent-tepi: #1F4A40;
}

/* Lambang kelembagaan tidak diganggu — ia penanda instansi, bukan penanda
   ruang. Yang berbicara adalah keterangan di bawahnya dan sebilah pita tipis
   di kepala kolom utama, keduanya memakai aksen ruang ini. */
.cangkang[data-ruang="wilayah"] .merek-sub {
  color: var(--accent-2);
  font-weight: 600;
}

.cangkang[data-ruang="wilayah"] .kolom-utama { position: relative; }

.cangkang[data-ruang="wilayah"] .kolom-utama::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 5;
}

/* Satu baris tabel yang sedang disunting berubah menjadi panel, bukan kolom
   yang bisa diketik langsung. Menyunting peran dan wilayah adalah tindakan yang
   pantas diberi jeda — bukan sesuatu yang terjadi karena kursor tidak sengaja
   mendarat di sel yang salah. */
.baris-sunting > td { background: var(--surface-3); }

.sunting-pengguna {
  padding: 14px 4px 6px;
  display: flex;
  flex-direction: column;
}

.sunting-pengguna .pilihan.penuh,
.sunting-pengguna .masukan { width: 100%; min-width: 0; }

/* ==========================================================================
   Ruang unit pelaksana teknis
   --------------------------------------------------------------------------
   Ruang ketiga, sesudah ruang pusat dan ruang kantor wilayah. Diberi aksen
   sendiri dengan alasan yang sama seperti ruang wilayah: petugas yang membuka
   dua akun berbeda pada dua tab harus tahu tab mana yang mana sebelum membaca
   satu kata pun — dan yang paling mahal bukan salah baca, melainkan angka satu
   unit yang dikira angka satu wilayah.

   Rona ambar dipilih karena ia bukan tetangga hijau ruang wilayah maupun biru
   ruang pusat pada lingkaran warna. Tiga ruang yang ronanya berdekatan hanya
   bisa dibedakan bila ketiganya dilihat berdampingan, dan pembedaan yang
   menuntut perbandingan tidak menolong siapa pun.
   ========================================================================== */

.cangkang[data-ruang="unit"] {
  --accent:      #8A5512;
  --accent-2:    #A76C1B;
  --accent-soft: #F7EBD9;
  --accent-tepi: #E3CBA2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .cangkang[data-ruang="unit"] {
    --accent:      #E0A757;
    --accent-2:    #EFC183;
    --accent-soft: #33240C;
    --accent-tepi: #4D3714;
  }
}

:root[data-tema="gelap"] .cangkang[data-ruang="unit"] {
  --accent:      #E0A757;
  --accent-2:    #EFC183;
  --accent-soft: #33240C;
  --accent-tepi: #4D3714;
}

.cangkang[data-ruang="unit"] .merek-sub {
  color: var(--accent-2);
  font-weight: 600;
}

.cangkang[data-ruang="unit"] .kolom-utama { position: relative; }

.cangkang[data-ruang="unit"] .kolom-utama::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  z-index: 5;
}

/* ==========================================================================
   Kop ruang daerah
   --------------------------------------------------------------------------
   Menyebutkan cakupan halaman di kepala layar, dengan ukuran yang tidak bisa
   dilewatkan. Sebelumnya keterangan itu berupa satu bilah pesan di antara ubin
   — terbaca sekali pada hari pertama, lalu menjadi bagian dari perabot.

   Angka di sebelah kanan sengaja tiga, bukan enam. Kop bukan tempat menaruh
   seluruh angka; ia tempat menjawab "saya sedang melihat apa, dan sebesar apa".
   ========================================================================== */

.kop-wilayah {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 26px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 18px 20px;
  border-radius: var(--r-3);
  border: 1px solid var(--accent-tepi);
  background:
    linear-gradient(135deg, var(--accent-soft) 0%, transparent 62%),
    var(--surface);
}

.kop-wilayah-teks { min-width: 0; max-width: 62ch; }

.kop-wilayah-teks h2 {
  font-size: 1.32rem;
  line-height: 1.25;
  margin: 4px 0 6px;
  letter-spacing: -0.012em;
}

.kop-wilayah-teks p {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}

.kop-wilayah-angka {
  display: flex;
  gap: 22px;
  margin: 0;
  flex-wrap: wrap;
}

.kop-wilayah-angka dt {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  white-space: nowrap;
}

.kop-wilayah-angka dd {
  margin: 2px 0 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.kop-wilayah-angka dd[data-nada="kritis"] { color: var(--kritis); }

@media (max-width: 700px) {
  .kop-wilayah { padding: 15px 15px 16px; }
  .kop-wilayah-angka { gap: 16px; }
  .kop-wilayah-angka dd { font-size: 1.2rem; }
}

/* ==========================================================================
   Batang perbandingan di dalam tabel
   --------------------------------------------------------------------------
   Satu kolom berisi panjang, bukan angka kedua. Mata membandingkan panjang
   jauh lebih cepat daripada membandingkan sepuluh angka sekolom, dan angkanya
   tetap ada di kolom sebelahnya bagi yang memerlukan nilai pastinya.
   ========================================================================== */

.bar-lacak {
  height: 7px;
  border-radius: 3px;
  background: var(--line-3);
  overflow: hidden;
}

.bar-lacak .bar-isi {
  height: 100%;
  width: var(--lebar, 0%);
  border-radius: 3px;
  background: var(--accent);
}

.bar-lacak .bar-isi[data-nada="kritis"]  { background: var(--kritis); }
.bar-lacak .bar-isi[data-nada="sedang"]  { background: var(--tinggi); }
.bar-lacak .bar-isi[data-nada="positif"] { background: var(--positif); }
.bar-lacak .bar-isi[data-nada="netral"]  { background: var(--ink-4); }

/* ==========================================================================
   Sikap unit dan tanggapan tersimpan
   ========================================================================== */

.sikap-deret {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.sikap-baris { display: flex; flex-direction: column; gap: 5px; }

/* Tanggapan yang sudah pernah ditulis, ditampilkan di dalam kartu beritanya.
   Diberi tepi kiri, bukan kotak penuh: ia keterangan yang menempel pada berita
   di atasnya, bukan bagian yang berdiri sendiri. */
.tanggapan-tersimpan {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid var(--accent);
  background: var(--surface-3);
  border-radius: 0 var(--r-2) var(--r-2) 0;
}

.tanggapan-tersimpan p {
  margin: 6px 0 0;
  line-height: 1.55;
}

/* Status pusat di kaki panel mesin — keterangan, bukan kendali. */
.mesin-kaki {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}

.positif-teks { color: var(--positif); }


/* ==========================================================================
   Peta Sebaran
   --------------------------------------------------------------------------
   Petanya SVG biasa, digambar dari garis pantai yang tersimpan di dalam repo.
   Tidak ada ubin dari peladen luar, jadi tidak ada yang perlu ditunggu dan
   tidak ada yang bisa gagal dimuat.

   Ukuran titik tidak ditulis di dalam berkas ini melainkan diturunkan dari
   satu peubah, --jari, yang dipasang halaman petanya pada simpul <svg> setiap
   kali kotak pandang berubah. Satu penulisan peubah per bingkai gambar
   menggantikan lima ratus penulisan atribut, dan itulah yang membuat
   perbesaran tetap mulus di komputer kantor. Peramban yang belum mengenal
   properti CSS `r` mengabaikan aturan ini dan memakai atribut r bawaan
   titiknya — geraknya menjadi bertahap, bukan rusak.
   ========================================================================== */

.peta-tata {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 14px;
  align-items: start;
}

@media (max-width: 1080px) {
  .peta-tata { grid-template-columns: minmax(0, 1fr); }
}

/*
   Laut dan daratan diberi warnanya sendiri, bukan dipinjam dari token
   permukaan.

   Token permukaan disusun untuk kartu yang bertumpuk, dan selisih antartingkatnya
   memang dibuat halus. Dipakai untuk peta, selisih sehalus itu membuat kepulauan
   ini terbaca sebagai noda: daratannya nyaris tidak terpisah dari lautnya, dan
   titik unit yang berdiri di atasnya kehilangan acuan letak sama sekali.
*/
.peta-wadah {
  --peta-laut:   #DCE8F4;
  --peta-laut-2: #C7DAEC;
  --peta-darat:  #FBFCFE;
  --peta-tepi:   #93A6BD;
  --peta-halo:   #B9CFE4;
  --peta-jaring: #9FB4CA;
  --peta-denyut: #A81E0E;

  position: relative;
  background: var(--peta-laut);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
}

.peta-wadah:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/*
   Cahaya lembut di tengah kotak, bukan di tengah peta.

   Digambar sebagai lapisan di atas kotak dan bukan sebagai gradien di dalam
   SVG, supaya ia tidak ikut bergeser ketika petanya diseret. Cahaya yang ikut
   bergeser terbaca sebagai noda yang menempel di kepulauan; cahaya yang diam
   terbaca sebagai penerangan ruangan.
*/
.peta-wadah::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255, 255, 255, 0.5), transparent 62%),
    radial-gradient(140% 120% at 50% 118%, var(--peta-laut-2), transparent 55%);
  z-index: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .peta-wadah {
    --peta-laut:   #0A111C;
    --peta-laut-2: #101B2C;
    --peta-darat:  #24334C;
    --peta-tepi:   #4A5D80;
    --peta-halo:   #16233A;
    --peta-jaring: #2C3C57;
    --peta-denyut: #FF7B62;
  }

  :root:not([data-tema="terang"]) .peta-wadah::before {
    background:
      radial-gradient(120% 90% at 50% 6%, rgba(90, 130, 190, 0.14), transparent 60%),
      radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 55%);
  }
}

:root[data-tema="gelap"] .peta-wadah {
  --peta-laut:   #0A111C;
  --peta-laut-2: #101B2C;
  --peta-darat:  #24334C;
  --peta-tepi:   #4A5D80;
  --peta-halo:   #16233A;
  --peta-jaring: #2C3C57;
  --peta-denyut: #FF7B62;
}

:root[data-tema="gelap"] .peta-wadah::before {
  background:
    radial-gradient(120% 90% at 50% 6%, rgba(90, 130, 190, 0.14), transparent 60%),
    radial-gradient(140% 120% at 50% 120%, rgba(0, 0, 0, 0.45), transparent 55%);
}

.peta-svg {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  /* Kepulauan Indonesia jauh lebih lebar daripada tinggi; membiarkan tingginya
     mengikuti isi membuat peta setinggi satu layar penuh pada layar sempit. */
  max-height: min(62vh, 560px);
  cursor: grab;
  touch-action: none;
}

.peta-svg.menyeret { cursor: grabbing; }

/* ------------------------------------------------------------- daratan */

.peta-daratan path {
  fill: var(--peta-darat);
  stroke: var(--peta-tepi);
  stroke-linejoin: round;
  /* Tebal garis tidak ikut membesar saat peta diperbesar; tanpa ini, garis
     pantai pada perbesaran penuh setebal pulaunya sendiri. */
  vector-effect: non-scaling-stroke;
  stroke-width: 0.7;
}

/*
   Halo pantai: salinan garis pantai yang sama, digambar lebih dulu dengan
   goresan tebal dan pudar.

   Menggantikan drop-shadow. Bayangan tapis harus dihitung ulang oleh peramban
   setiap bingkai selama peta diseret, dan pada 103 pulau itu terasa tersendat
   di komputer kantor. Goresan biasa tidak dihitung ulang sama sekali.
*/
.peta-halo path {
  fill: none;
  stroke: var(--peta-halo);
  stroke-width: 4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Tetangga digambar samar: hadir secukupnya untuk menjelaskan mengapa
   Kalimantan dan Papua terpotong, tanpa ikut menarik perhatian. */
.peta-tetangga path {
  fill: var(--peta-darat);
  fill-opacity: 0.4;
  stroke: none;
}

/*
   Jaring lima derajat. Ia baru berguna pada perbesaran tinggi, dan justru di
   situlah ia paling terlihat: pada pandangan seluruh Indonesia garisnya jarang
   dan tipis, tetapi ketika layar hanya memuat satu kabupaten, satu garis yang
   melintas cukup untuk mengembalikan acuan letak.
*/
.peta-jaring line {
  stroke: var(--peta-jaring);
  stroke-opacity: 0.28;
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}

.peta-jaring line.khatulistiwa {
  stroke-opacity: 0.5;
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

@media (prefers-reduced-motion: no-preference) {
  /* Khatulistiwa merayap pelan sekali. Satu-satunya gerak yang tidak
     dipicu apa pun; ia menandai bahwa peta ini hidup, bukan gambar tempel. */
  .peta-jaring line.khatulistiwa { animation: peta-hanyut 24s linear infinite; }
}

@keyframes peta-hanyut { to { stroke-dashoffset: -100; } }

/* --------------------------------------------------------------- titik */

/*
   Kepekatan dan jari-jari dipisah dari kelas gerak.

   Titik "sepi" memang lebih pudar daripada yang lain, dan itu diurus
   fill-opacity. Animasi masuk memakai opacity elemen. Kalau keduanya memakai
   properti yang sama, titik sepi akan berkedip menjadi pekat penuh di ujung
   animasinya, lalu memudar lagi.
*/
.peta-titik circle {
  r: calc(var(--jari) * 1px);
  fill-opacity: var(--pekat, 0.92);
  stroke: var(--peta-darat);
  stroke-width: calc(var(--jari) * 0.28px);
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 200ms ease, fill-opacity 200ms ease;
}

.peta-titik circle.t-sepi { --pekat: 0.42; }

.peta-titik circle:hover,
.peta-titik circle.tunjuk,
.peta-titik circle:focus-visible {
  stroke: var(--ink);
  stroke-width: calc(var(--jari) * 0.42px);
  outline: none;
}

/* Titik yang tidak cocok dengan kata pencarian tetap digambar, hanya
   dipadamkan. Yang dicari terbaca sebagai letak di dalam kepulauan, bukan
   sebagai tiga titik yang mengambang tanpa acuan. */
.peta-titik circle.redup { opacity: 0.14; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  .peta-titik circle:hover,
  .peta-titik circle.tunjuk { transform: scale(1.55); }

  .peta-titik circle { transition: opacity 200ms ease, fill-opacity 200ms ease, transform 140ms ease; }

  /*
     Mekar dari barat ke timur, sekali saja saat data induk sampai.

     Tundanya berasal dari bujur unitnya, bukan dari urutannya di dalam larik:
     yang terbaca adalah sapuan geografis dari Sabang ke Merauke, bukan urutan
     baris di dalam basis data yang tidak berarti apa-apa bagi pembacanya.
  */
  .peta-titik.mekar circle {
    animation: peta-mekar 460ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards;
    animation-delay: var(--tunda, 0ms);
  }
}

@keyframes peta-mekar {
  from { opacity: 0; transform: scale(0.2); }
  to   { opacity: 1; transform: scale(1); }
}

/*
   Denyut hanya pada unit kritis.

   Cincinnya membesar dari titik itu sendiri lalu menghilang. Jari-jarinya
   mengikuti --jari seperti titiknya, sehingga denyutnya tetap sebanding pada
   perbesaran berapa pun.
*/
.peta-denyut circle {
  r: calc(var(--jari) * 1px);
  fill: none;
  stroke: var(--peta-denyut);
  stroke-width: calc(var(--jari) * 0.5px);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .peta-denyut circle { animation: peta-denyut 2600ms ease-out infinite; }
}

@keyframes peta-denyut {
  0%   { transform: scale(1); opacity: 0.6; }
  70%  { opacity: 0; }
  100% { transform: scale(4.4); opacity: 0; }
}

/* ------------------------------------------------------ cincin terpilih */

.peta-pilih circle {
  fill: none;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}

.peta-pilih .cincin-luar {
  r: calc(var(--jari) * 3.4px);
  stroke: var(--ink-2);
  stroke-width: calc(var(--jari) * 0.3px);
  stroke-dasharray: calc(var(--jari) * 1.1px) calc(var(--jari) * 0.8px);
  opacity: 0.75;
}

.peta-pilih .cincin-dalam {
  r: calc(var(--jari) * 2px);
  stroke: var(--ink);
  stroke-width: calc(var(--jari) * 0.22px);
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  /* Berputar pelan, bukan berkedip. Kedipan menarik mata terus-menerus;
     putaran menandai "ini yang sedang dibuka" lalu dilupakan. */
  .peta-pilih .cincin-luar { animation: peta-putar 9s linear infinite; }
  .peta-pilih .cincin-dalam { animation: peta-tarik 420ms cubic-bezier(0.2, 0.9, 0.25, 1); }
}

@keyframes peta-putar { to { transform: rotate(360deg); } }
@keyframes peta-tarik {
  from { transform: scale(2.2); opacity: 0; }
  to   { transform: scale(1); opacity: 0.55; }
}

/* ------------------------------------------------- kendali & penunjuk */

.peta-kendali {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-2);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  border: 1px solid var(--line-2);
  box-shadow: var(--bayang-1);
  backdrop-filter: blur(6px);
}

/*
   Batang skala dan angka perbesaran duduk di sudut yang sama.

   Keduanya menjawab pertanyaan yang sama — "sedekat apa saya sekarang?" —
   dan memisahkannya ke dua sudut memaksa mata membandingkan dua tempat.
*/
.peta-hud {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: none;
  font-size: 11px;
  color: var(--ink-2);
}

.peta-skala,
.peta-zum {
  padding: 4px 7px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line-3);
  backdrop-filter: blur(6px);
}

.peta-skala { display: flex; flex-direction: column; gap: 3px; }

.peta-skala-batang {
  display: block;
  height: 5px;
  min-width: 20px;
  border: 1px solid var(--ink-3);
  border-top: 0;
  transition: width 160ms ease;
}

.peta-skala-teks,
.peta-zum b { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }

/*
   Keterangan yang mengikuti kursor.

   Menggantikan <title> bawaan SVG. Tip bawaan peramban muncul sesudah jeda
   satu detik penuh dan hanya memuat satu baris teks tanpa warna — pada peta
   berisi lima ratus titik, jeda itu berarti setiap penelusuran cepat berakhir
   tanpa satu nama pun terbaca.
*/
.peta-tip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  max-width: 250px;
  padding: 7px 9px;
  border-radius: var(--r-1);
  background: var(--surface);
  border: 1px solid var(--line-2);
  box-shadow: var(--bayang-2);
  pointer-events: none;
  font-size: 11.5px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.peta-tip[hidden] { display: none; }
.peta-tip b { font-size: 12.5px; font-weight: 600; }
.peta-tip span { display: flex; align-items: center; gap: 5px; color: var(--ink-2); }
.peta-tip i { width: 8px; height: 8px; border-radius: 50%; flex: none; }

@media (prefers-reduced-motion: no-preference) {
  .peta-tip { animation: peta-tip-masuk 130ms ease-out; }
}

@keyframes peta-tip-masuk { from { opacity: 0; } to { opacity: 1; } }
/*
   Petunjuk sekejap ketika roda diputar tanpa penekan.

   Muncul di tengah peta lalu padam sendiri. Ia hanya tampil pada saat orang
   melakukan hal yang ingin dijelaskan, bukan berdiri terus-menerus sebagai
   keterangan yang lama-lama tidak dibaca siapa pun.
*/
.peta-petunjuk {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  margin: 0;
  transform: translate(-50%, -50%);
  padding: 8px 14px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  color: var(--surface);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
}

.peta-petunjuk.tampak { opacity: 1; }

.peta-petunjuk kbd {
  font: inherit;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--surface) 24%, transparent);
}


/* ------------------------------------------------------------- legenda */

/*
   Legenda peta ini duduk di bawah petanya, tidak melayang di atasnya seperti
   bawaan .peta-legenda.

   Kepulauan Indonesia membentang penuh dari tepi kiri sampai tepi kanan kotak
   pandang, sehingga tidak ada satu pun sudut yang benar-benar kosong: kotak
   yang melayang selalu menutupi unit seseorang. Yang tertutup itu justru tidak
   pernah disadari pembacanya — ia hanya melihat daerah yang kebetulan tidak
   berpenanda.
*/
.peta-tata .peta-legenda {
  position: static;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  padding: 9px 0 3px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px 8px;
  background: none;
  font-size: 12px;
}

/* Gaya .peta-legenda sendiri sudah ada di bagian sistem desain — kotak
   melayang di sudut peta. Yang ditambahkan di sini hanya isi butirnya. */
.peta-legenda-butir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 12px;
  color: var(--ink-2);
  padding: 4px 9px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, opacity 140ms ease;
}

.peta-legenda-butir:hover { background: var(--surface-3); border-color: var(--line-2); }

/* Tingkat yang sedang disembunyikan tetap terbaca angkanya. Butir yang hilang
   sama sekali membuat orang lupa bahwa ia pernah mematikannya. */
.peta-legenda-butir.padam { opacity: 0.42; text-decoration: line-through; }
.peta-legenda-butir.padam i { background: var(--line) !important; }

.peta-legenda-butir i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: block;
  flex: none;
  transition: background 140ms ease;
}

.peta-legenda-butir b { color: var(--ink); font-variant-numeric: tabular-nums; }

.peta-catatan {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px 4px 2px;
  max-width: 92ch;
}

.peta-catatan svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* -------------------------------------------------------- panel samping */

.peta-panel {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 14px 14px 16px;
  /* Menempel saat halaman digulir: daftar unit terpanas adalah alasan orang
     membuka halaman ini, dan menggulir peta tidak boleh membuatnya hilang. */
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

@media (prefers-reduced-motion: no-preference) {
  /* Panel berganti isi tanpa berganti tempat, jadi tanpa peralihan pergantian
     itu terbaca sebagai layar yang berkedip. */
  .peta-panel.masuk { animation: peta-panel-masuk 240ms ease-out; }
}

@keyframes peta-panel-masuk {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.peta-panel-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.peta-panel-judul {
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 2px 0 4px;
}

.peta-daftar,
.peta-berita { list-style: none; margin: 0; padding: 0; }

.peta-daftar button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 6px;
  background: none;
  border: 0;
  border-radius: var(--r-1);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 120ms ease, padding-left 120ms ease;
}

.peta-daftar button:hover { background: var(--surface-3); padding-left: 10px; }

.peta-daftar i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
}

.peta-daftar span { min-width: 0; flex: 1; display: block; }

.peta-daftar-nama {
  display: block;
  font-size: 12.5px;
  font-weight: 550;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.peta-angka {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

.peta-angka dt {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
}

.peta-angka dd {
  margin: 2px 0 0;
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.peta-berita li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line-3);
}

.peta-berita li:last-child { border-bottom: 0; }

.peta-berita-judul {
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  margin-bottom: 4px;
}
/* ==========================================================================
   Tabel yang barisnya bisa dipilih
   --------------------------------------------------------------------------
   Dipakai halaman Unit di Wilayah: menekan satu baris membuka rinciannya di
   panel sebelah. Barisnya diberi kursor dan sorotan supaya terbaca sebagai
   sesuatu yang bisa ditekan — tabel yang diam-diam bisa diklik hanya ditemukan
   orang yang kebetulan mencoba.
   ========================================================================== */

/* Kolom pertama menampung nama unit yang panjang — "Lapas Perempuan Kelas IIA
   Martapura" dan sejenisnya. Tanpa lebar minimum, tujuh kolom angka di
   sebelahnya memerasnya sampai nama unitnya patah menjadi tiga baris, dan
   tabel yang seharusnya bisa dipindai cepat berubah menjadi paragraf. Lebih
   baik tabelnya menggulir mendatar. */
.tabel-pilih { min-width: 720px; }
.tabel-pilih tbody td:first-child { min-width: 230px; }

.tabel-pilih tbody tr {
  cursor: pointer;
}

.tabel-pilih tbody tr:hover {
  background: var(--surface-3);
}

.tabel-pilih tbody tr[aria-selected="true"] {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Legenda keadaan unit di dalam panel samping. Berdiri di alirannya sendiri,
   bukan melayang seperti legenda peta. */
.unit-legenda {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding-top: 10px;
  border-top: 1px solid var(--line-2);
}

.unit-legenda .peta-legenda-butir i[data-nada="kritis"]  { background: var(--kritis); }
.unit-legenda .peta-legenda-butir i[data-nada="sedang"]  { background: var(--tinggi); }
.unit-legenda .peta-legenda-butir i[data-nada="rendah"]  { background: var(--ink-4); }
.unit-legenda .peta-legenda-butir i[data-nada="positif"] { background: var(--positif); }
.unit-legenda .peta-legenda-butir i[data-nada="netral"]  { background: var(--line); }

/* ==========================================================================
   Siklus intelijen — kerangka bersama lima halaman
   --------------------------------------------------------------------------
   Kasus Intelijen, Verifikasi Lapangan, Evaluasi, Keputusan Pimpinan, dan
   Tindak Lanjut memakai tata letak yang sama: antrean di kiri, rincian yang
   dipilih di kanan. Bentuknya sengaja seragam — petugas yang berpindah antar
   tahap tidak perlu belajar membaca daftar yang lain, dan tahu tanpa diberi
   tahu bahwa yang di kiri selalu bisa ditekan.
   ========================================================================== */

.siklus-tata {
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

@media (max-width: 1180px) {
  .siklus-tata { grid-template-columns: minmax(0, 1fr); }
}

.siklus-antrean {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  overflow: hidden;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 84px);
  display: flex;
  flex-direction: column;
}

@media (max-width: 1180px) {
  .siklus-antrean { position: static; max-height: none; }
}

.siklus-antrean-kop {
  padding: 11px 13px;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.siklus-antrean-saring {
  padding: 9px 11px;
  border-bottom: 1px solid var(--line-3);
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  flex: none;
}

.siklus-antrean ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; }

.siklus-rinci {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 16px;
  min-width: 0;
}

.siklus-kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 54px 20px;
  color: var(--ink-3);
}

.siklus-kosong svg { width: 26px; height: 26px; opacity: 0.35; margin-bottom: 10px; }
.siklus-kosong h3 { font-size: 14px; color: var(--ink-2); margin-bottom: 5px; }
.siklus-kosong p { font-size: 12.5px; max-width: 46ch; }

/* ------------------------------------------------------------ baris antrean */

.antrean-baris {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  width: 100%;
  padding: 9px 9px 9px 7px;
  background: none;
  border: 0;
  border-radius: var(--r-2);
  text-align: left;
  cursor: pointer;
  color: inherit;
  font: inherit;
  transition: background 120ms ease;
}

.antrean-baris:hover { background: var(--surface-3); }

/* Yang terpilih ditandai latar DAN garis kiri, bukan latar saja. Pada tema
   gelap, selisih latar sehalus itu hilang di layar proyektor ruang rapat. */
.antrean-baris.terpilih {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}

.antrean-tanda {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  margin-top: 6px;
  background: var(--ink-4);
}

.antrean-tanda[data-nada="kritis"]  { background: var(--kritis); }
.antrean-tanda[data-nada="tinggi"]  { background: var(--tinggi); }
.antrean-tanda[data-nada="sedang"]  { background: var(--sedang); }
.antrean-tanda[data-nada="rendah"]  { background: var(--rendah); }
.antrean-tanda[data-nada="positif"] { background: var(--positif); }
.antrean-tanda[data-nada="netral"]  { background: var(--netral); }

.antrean-isi { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.antrean-kop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.antrean-judul {
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.35;
  /* Dua baris, lalu dipotong. Judul berita Indonesia rutin melewati seratus
     karakter; satu baris memotong terlalu awal untuk bisa dikenali, dan tanpa
     batas sama sekali satu kasus bisa setinggi empat baris dan mengusir
     seluruh antrean di bawahnya dari layar. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.antrean-angka {
  flex: none;
  text-align: right;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.antrean-angka small {
  display: block;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
}

/* --------------------------------------------------------------- rel tahap */

/*
   Rel enam tahap. Bentuknya rel, bukan bilah persentase — bilah persentase
   menjawab "berapa persen selesai", dan pertanyaan itu tidak punya jawaban
   jujur di sini. Rel menjawab yang memang punya jawaban: sudah sampai mana.
*/
.rel-tahap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: flex-start;
  gap: 0;
  counter-reset: tahap;
}

.rel-tahap li {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  font-size: 10.5px;
  line-height: 1.25;
  text-align: center;
  color: var(--ink-4);
}

/* Garis penghubung digambar sebagai lapisan di belakang bulatan, bukan
   sebagai batas antar butir: batas antar butir menyisakan sela di ujung rel
   yang membuat tahap pertama dan terakhir terlihat menggantung. */
.rel-tahap li::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line-2);
}

.rel-tahap li:first-child::before { display: none; }

.rel-tahap li i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  position: relative;
  z-index: 1;
  flex: none;
}

.rel-tahap li.lewat::before { background: var(--accent); }
.rel-tahap li.lewat i { background: var(--accent); border-color: var(--accent); }
.rel-tahap li.lewat { color: var(--ink-3); }

.rel-tahap li.kini::before { background: var(--accent); }
.rel-tahap li.kini i {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.rel-tahap li.kini { color: var(--ink); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  /* Hanya tahap yang sedang berjalan yang berdenyut. Denyut pada seluruh rel
     akan terbaca sebagai animasi memuat, bukan sebagai penunjuk posisi. */
  .rel-tahap li.kini i { animation: tahap-denyut 2400ms ease-out infinite; }
}

@keyframes tahap-denyut {
  0%   { box-shadow: 0 0 0 0 var(--accent-soft); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.rel-tahap.ringkas li { gap: 0; }
.rel-tahap.ringkas li i { width: 9px; height: 9px; }

/* ------------------------------------------------------------ kepala kasus */

.kasus-kepala {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line-2);
  margin-bottom: 14px;
}

.kasus-kepala-teks { min-width: 0; flex: 1; }
.kasus-kepala-teks h3 { font-size: 1.06rem; line-height: 1.3; margin: 3px 0 0; }

/* ---------------------------------------------------------------- borang */

.bidang { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.bidang .label-mono { color: var(--ink-3); }

.borang-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 12px;
}

.borang-kisi .penuh { grid-column: 1 / -1; }

.daftar-baris { display: flex; flex-direction: column; gap: 6px; }

.daftar-butir { display: flex; gap: 6px; align-items: center; }
.daftar-butir .masukan { flex: 1; min-width: 0; }

/* --------------------------------------------------------------- kemajuan */

.maju-lacak {
  display: block;
  height: 6px;
  border-radius: 3px;
  background: var(--line-3);
  overflow: hidden;
  min-width: 60px;
}

.maju-lacak i {
  display: block;
  height: 100%;
  border-radius: 3px;
  width: var(--lebar, 0%);
  background: var(--accent);
}

.maju-lacak i[data-nada="kritis"]  { background: var(--kritis); }
.maju-lacak i[data-nada="tinggi"]  { background: var(--tinggi); }
.maju-lacak i[data-nada="positif"] { background: var(--positif); }
.maju-lacak i[data-nada="netral"]  { background: var(--netral); }

@media (prefers-reduced-motion: no-preference) {
  .maju-lacak i { transition: width 420ms cubic-bezier(0.2, 0.9, 0.25, 1); }
}

/* ------------------------------------------------------- bagian di rincian */

.siklus-bagian { padding: 14px 0; border-top: 1px solid var(--line-3); }
.siklus-bagian:first-of-type { border-top: 0; padding-top: 0; }

.siklus-bagian-kop {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.siklus-bagian-kop .label-mono { color: var(--ink-3); }

.siklus-daftar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.siklus-butir {
  border: 1px solid var(--line-3);
  border-radius: var(--r-2);
  padding: 10px 11px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.siklus-butir-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.siklus-butir p { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); margin: 0; }

/* Sandingan dua kolom: narasi media di kiri, fakta lapangan di kanan. */
.sanding {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
}

.sanding-kolom {
  border: 1px solid var(--line-3);
  border-radius: var(--r-2);
  padding: 11px 12px;
}

.sanding-kolom h4 {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 6px;
}

.sanding-kolom p { font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* ------------------------------------------------ UPT naik ke permukaan */

.upt-muncul { display: flex; flex-direction: column; gap: 7px; }

.upt-baris {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) minmax(70px, 2fr) 34px 42px;
  align-items: center;
  gap: 9px;
}

@media (max-width: 620px) {
  /* Pada layar sempit nama unit dan batangnya bertumpuk, bukan berhimpitan:
     "Lapas Perempuan Kelas IIA Martapura" pada satu kolom selebar sembilan
     karakter tidak lagi bisa dikenali siapa pun. */
  .upt-baris { grid-template-columns: 18px minmax(0, 1fr) 34px 42px; }
  .upt-lacak { grid-column: 2 / -1; }
}

.upt-no {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  text-align: right;
}

.upt-nama {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.upt-lacak {
  position: relative;
  height: 9px;
  border-radius: 4px;
  background: var(--line-3);
  overflow: hidden;
}

.upt-lacak i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }

/* Bayangan periode sebelumnya digambar sebagai garis bergaris, bukan sebagai
   blok pudar. Blok pudar pada tema gelap nyaris tak terbedakan dari lataran
   lacaknya sendiri, dan pembandingnya hilang justru di tema yang paling
   sering dipakai malam hari. */
.upt-bayang {
  background: repeating-linear-gradient(
    135deg, var(--ink-4) 0 2px, transparent 2px 5px);
  opacity: 0.55;
}

.upt-isi { z-index: 1; }

/* Bagian negatif digambar di atas batang utama, dari tepi kiri yang sama.
   Ditumpuk, bukan disambung: yang ditanyakan pembaca adalah "berapa bagian
   dari yang ini negatif", dan pertanyaan bagian selalu dijawab tumpukan. */
.upt-negatif { z-index: 2; border-radius: 4px 0 0 4px; }

.upt-angka { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.upt-delta {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

.upt-delta[data-arah="naik"]  { color: var(--kritis); }
.upt-delta[data-arah="turun"] { color: var(--positif); }

.upt-legenda {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 11px;
  padding-top: 9px;
  border-top: 1px solid var(--line-3);
  font-size: 11px;
  color: var(--ink-3);
}

.upt-legenda span { display: inline-flex; align-items: center; gap: 5px; }
.upt-legenda i { width: 10px; height: 8px; border-radius: 2px; flex: none; }

.upt-legenda i.contoh-bayang {
  background: repeating-linear-gradient(135deg, var(--ink-4) 0 2px, transparent 2px 5px);
  opacity: 0.55;
}

@media (prefers-reduced-motion: no-preference) {
  .upt-lacak i { animation: upt-tumbuh 520ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards; }
  .upt-baris:nth-child(2) i { animation-delay: 40ms; }
  .upt-baris:nth-child(3) i { animation-delay: 80ms; }
  .upt-baris:nth-child(4) i { animation-delay: 120ms; }
  .upt-baris:nth-child(5) i { animation-delay: 160ms; }
  .upt-baris:nth-child(n+6) i { animation-delay: 200ms; }
}

@keyframes upt-tumbuh { from { width: 0 !important; } }

/* ==========================================================================
   Tren Pemberitaan
   --------------------------------------------------------------------------
   Aturan halamannya: tidak ada satu pun angka yang berdiri tanpa
   pembandingnya. Gaya di bawah karena itu selalu berpasangan — batang periode
   ini dan bayangan periode sebelumnya, angka dan selisihnya.
   ========================================================================== */

.tren-delta {
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tren-delta[data-nada="kritis"]  { color: var(--kritis); }
.tren-delta[data-nada="positif"] { color: var(--positif); }
.tren-delta[data-nada="netral"]  { color: var(--ink-4); }

/* ---------------------------------------------------------- isu bergeser */

.geser-daftar { display: flex; flex-direction: column; gap: 8px; }

.geser-baris {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1fr) 30px 40px;
  align-items: center;
  gap: 9px;
}

.geser-nama {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.geser-lacak {
  position: relative;
  height: 9px;
  border-radius: 4px;
  background: var(--line-3);
  overflow: hidden;
}

.geser-lacak i { position: absolute; left: 0; top: 0; height: 100%; border-radius: 4px; }

/* Periode sebelumnya digambar sebagai garis bergaris di belakang, dengan
   alasan yang sama seperti pada bagan UPT: blok pudar tidak terbedakan dari
   lataran lacaknya sendiri pada tema gelap. */
.geser-lalu {
  background: repeating-linear-gradient(135deg, var(--ink-4) 0 2px, transparent 2px 5px);
  opacity: 0.55;
}

.geser-kini { background: var(--accent); z-index: 1; }

.geser-angka { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; }

.geser-delta {
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
}

.geser-delta[data-arah="naik"]  { color: var(--kritis); }
.geser-delta[data-arah="turun"] { color: var(--positif); }

@media (prefers-reduced-motion: no-preference) {
  .geser-kini { animation: upt-tumbuh 480ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards; }
}

/* ------------------------------------------------------------- irama pekan */

.irama {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  align-items: end;
  min-height: 132px;
}

.irama-hari {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.irama-batang {
  position: relative;
  width: 100%;
  max-width: 34px;
  height: 92px;
  border-radius: var(--r-1) var(--r-1) 3px 3px;
  background: var(--line-3);
  overflow: hidden;
  display: block;
}

/* Kedua batang bertumpu di dasar, bukan bertumpuk ke atas. Yang ditanyakan
   pembaca adalah "berapa bagian dari hari ini yang negatif" — pertanyaan
   bagian, dan pertanyaan bagian selalu dijawab tumpukan dari dasar yang sama. */
.irama-batang i {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: var(--r-1) var(--r-1) 0 0;
}

.irama-total { background: var(--accent); opacity: 0.72; }
.irama-negatif { background: var(--kritis); }

.irama-label { font-size: 10.5px; color: var(--ink-4); }

.irama-angka {
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: no-preference) {
  .irama-batang i { animation: irama-naik 520ms cubic-bezier(0.2, 0.9, 0.25, 1) backwards; }
  .irama-hari:nth-child(2) i { animation-delay: 40ms; }
  .irama-hari:nth-child(3) i { animation-delay: 80ms; }
  .irama-hari:nth-child(4) i { animation-delay: 120ms; }
  .irama-hari:nth-child(5) i { animation-delay: 160ms; }
  .irama-hari:nth-child(6) i { animation-delay: 200ms; }
  .irama-hari:nth-child(7) i { animation-delay: 240ms; }
}

@keyframes irama-naik { from { height: 0 !important; } }

/* Segmen kecil di kepala kartu, sejajar dengan tombol kecil di sebelahnya. */
.segmen.kecil button { padding: 4px 9px; font-size: 11.5px; }

/* -------------------------------------------------- daftar di dalam rincian */

.riwayat-ringkas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px 18px;
  margin: 0;
}

.riwayat-ringkas dt {
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 2px;
}

.riwayat-ringkas dd { margin: 0; font-size: 12.5px; color: var(--ink-2); }

.tanya-daftar {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

.tanya-daftar li::marker { color: var(--ink-4); font-variant-numeric: tabular-nums; }

.bukti-daftar { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.bukti-daftar li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-2);
}

.bukti-daftar svg { width: 16px; height: 16px; flex: none; color: var(--ink-4); }
.bukti-daftar .bukti-nama { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bukti-daftar .bukti-nama b { font-size: 12.5px; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------- matriks penyandingan */

/*
   Empat kolom pada layar lebar, bertumpuk pada layar sempit. Aspek, kata
   media, kata lapangan, dan putusan kesesuaiannya adalah satu pernyataan
   utuh — memecahnya menjadi empat baris terpisah pada layar sempit tetap
   lebih terbaca daripada empat kolom selebar sepuluh karakter.
*/
.matriks-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1.3fr) 150px;
  gap: 6px;
  margin-bottom: 6px;
}

@media (max-width: 860px) {
  .matriks-baris { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Keputusan Pimpinan
   ========================================================================== */

.centang { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.centang input { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; }

.siklus-butir.dapat-dipilih { border-color: var(--line-2); background: var(--surface-2); }

.putusan-borang {
  border-top: 1px solid var(--line-2);
  background: var(--surface-2);
  border-radius: var(--r-2);
  padding: 14px;
  margin-top: 6px;
}

/*
   Lima putusan sebagai kartu, bukan sebagai daftar pilihan.

   Tiap putusan membawa akibat yang berbeda — satu menerbitkan butir tindak
   lanjut, satu mengembalikan perkara ke analis, satu menutup kasus. Daftar
   pilihan hanya menampilkan namanya, dan nama saja tidak menyebutkan
   akibatnya. Kartu memuat kalimat akibat itu di bawah namanya.
*/
.putusan-pilihan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
  gap: 8px;
}

.putusan-kartu {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 11px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.putusan-kartu input { position: absolute; opacity: 0; pointer-events: none; }
.putusan-kartu b { font-size: 12.5px; font-weight: 600; }
.putusan-kartu span { font-size: 11px; color: var(--ink-3); line-height: 1.4; }

.putusan-kartu:hover { border-color: var(--line); }

.putusan-kartu.terpilih { border-color: var(--nada, var(--accent)); background: var(--surface-3); }
.putusan-kartu.terpilih b { color: var(--nada, var(--accent)); }

.putusan-kartu[data-nada="kritis"]  { --nada: var(--kritis); }
.putusan-kartu[data-nada="tinggi"]  { --nada: var(--tinggi); }
.putusan-kartu[data-nada="positif"] { --nada: var(--positif); }
.putusan-kartu[data-nada="netral"]  { --nada: var(--netral); }
.putusan-kartu[data-nada="rendah"]  { --nada: var(--rendah); }

.putusan-kartu:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }

/* ==========================================================================
   Tindak Lanjut
   ========================================================================== */

.tindak-daftar { list-style: none; margin: 0; padding: 0; }

.tindak-kartu {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-3);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tindak-kartu:last-child { border-bottom: 0; }

/* Garis kiri, bukan latar merah. Latar merah pada sepuluh baris beruntun
   membuat seluruh kartu terbaca sebagai peringatan tunggal; garis kiri tetap
   terbaca per baris. */
.tindak-kartu.terlambat { box-shadow: inset 3px 0 0 var(--kritis); }
.tindak-kartu.dibuka { background: var(--surface-2); }

.tindak-kop { display: flex; align-items: flex-start; gap: 9px; flex-wrap: wrap; }
.tindak-judul { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tindak-judul b { font-size: 13px; font-weight: 600; line-height: 1.35; }
.tindak-keping { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }

.tindak-maju { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tindak-maju .maju-lacak { flex: 1; min-width: 90px; max-width: 260px; }

.tindak-ket {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0;
  max-width: 92ch;
}

.tindak-ubah {
  border-top: 1px dashed var(--line-2);
  padding-top: 12px;
  margin-top: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .tindak-ubah { animation: tindak-buka 200ms ease-out; }
}

@keyframes tindak-buka {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   Koordinat UPT
   ========================================================================== */

.koordinat-peta {
  position: relative;
  margin-bottom: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
  background: var(--peta-laut, #DCE8F4);

  --peta-laut:  #DCE8F4;
  --peta-darat: #FBFCFE;
  --peta-tepi:  #93A6BD;
  --peta-halo:  #B9CFE4;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) .koordinat-peta {
    --peta-laut:  #0A111C;
    --peta-darat: #24334C;
    --peta-tepi:  #4A5D80;
    --peta-halo:  #16233A;
  }
}

:root[data-tema="gelap"] .koordinat-peta {
  --peta-laut:  #0A111C;
  --peta-darat: #24334C;
  --peta-tepi:  #4A5D80;
  --peta-halo:  #16233A;
}

.koordinat-peta svg { display: block; width: 100%; height: auto; max-height: 260px; }

/* Silang penunjuk, bukan sekadar titik. Sebuah titik di tengah pulau besar
   sulit dinilai letaknya; dua garis yang memotong seluruh bidang memberi
   acuan terhadap tepi pulau di kiri, kanan, atas, dan bawahnya sekaligus. */
.koordinat-silang line {
  stroke: var(--kritis);
  stroke-width: 1;
  stroke-dasharray: 4 3;
  vector-effect: non-scaling-stroke;
  opacity: 0.7;
}

.koordinat-silang circle { fill: var(--kritis); }

.koordinat-silang circle.denyut {
  fill: none;
  stroke: var(--kritis);
  stroke-width: 0.03;
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .koordinat-silang circle.denyut { animation: peta-denyut 2400ms ease-out infinite; }
}

.koordinat-skala {
  position: absolute;
  right: 8px;
  bottom: 8px;
  padding: 3px 7px;
  border-radius: var(--r-1);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--line-3);
  font-size: 10.5px;
  color: var(--ink-3);
}

.koordinat-tanda { flex: none; display: flex; align-items: center; color: var(--positif); }
.koordinat-tanda svg { width: 15px; height: 15px; }
.koordinat-tanda.bahaya { color: var(--kritis); }

/* ==========================================================================
   Jejak Audit
   ========================================================================== */

.audit-pelaku { display: flex; flex-direction: column; gap: 1px; }
.audit-pelaku b { font-size: 12.5px; font-weight: 600; }

/*
   Metadata dibiarkan sebagai JSON mentah dan dipotong dengan ellipsis.

   Isinya berbeda menurut jenis tindakannya, dan penerjemah yang menebak
   bentuknya akan menampilkan "undefined" pada bentuk yang belum dikenalnya.
   Yang membaca halaman ini administrator; JSON adalah bahasa yang ia pahami.
*/
.audit-meta {
  display: block;
  max-width: 46ch;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: help;
}

.audit-meta:hover {
  white-space: normal;
  overflow: visible;
  word-break: break-all;
}

/* ==========================================================================
   Kesehatan Sistem
   ========================================================================== */

.sehat-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

.sehat-kartu {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Garis atas berwarna, bukan seluruh kartu. Tiga kartu berlatar merah
     berjajar terbaca sebagai satu peringatan besar, bukan sebagai tiga
     komponen yang keadaannya kebetulan sama. */
  border-top: 3px solid var(--nada, var(--line));
}

.sehat-kartu[data-nada="kritis"]  { --nada: var(--kritis); }
.sehat-kartu[data-nada="tinggi"]  { --nada: var(--tinggi); }
.sehat-kartu[data-nada="positif"] { --nada: var(--positif); }
.sehat-kartu[data-nada="sedang"]  { --nada: var(--sedang); }

.sehat-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sehat-kop b { font-size: 13px; font-weight: 600; }

.sehat-lampu {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--nada, var(--ink-4));
}

@media (prefers-reduced-motion: no-preference) {
  /* Hanya lampu yang bermasalah berdenyut. Lampu hijau yang ikut berdenyut
     melatih mata mengabaikan denyut sama sekali. */
  .sehat-kartu[data-nada="kritis"] .sehat-lampu,
  .sehat-kartu[data-nada="tinggi"] .sehat-lampu {
    animation: sehat-denyut 1900ms ease-out infinite;
  }
}

@keyframes sehat-denyut {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--nada) 55%, transparent); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.sehat-kartu p { margin: 0; line-height: 1.5; }
.sehat-ambang { padding-top: 6px; border-top: 1px solid var(--line-3); margin-top: 2px !important; }

.sehat-gangguan { list-style: none; margin: 0; padding: 0; }

.sehat-gangguan li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-3);
}

.sehat-gangguan li:last-child { border-bottom: 0; }
.sehat-gangguan li.tutup { opacity: 0.62; }
.sehat-gangguan-isi { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.sehat-gangguan-isi b { font-size: 12.5px; font-weight: 600; }
.sehat-gangguan-isi p { margin: 0; line-height: 1.5; }

/* -------------------------------------------------- ubin yang bisa ditekan */

/*
   Ubin siklus di dasbor adalah <button>, bukan <div> berpenyimak klik.

   Bedanya bukan gaya: <button> bisa dicapai papan tik, diumumkan pembaca layar
   sebagai tombol, dan menanggapi Enter maupun spasi tanpa satu baris kode
   tambahan. Sebuah <div> yang bisa diklik adalah tombol yang hanya bisa dipakai
   orang yang memegang tetikus.
*/
.ubin-tekan {
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
  transition: transform 140ms cubic-bezier(0.2, 0.9, 0.25, 1), box-shadow 140ms ease;
}

.ubin-tekan:hover { box-shadow: var(--bayang-2); }

@media (prefers-reduced-motion: no-preference) {
  .ubin-tekan:hover { transform: translateY(-2px); }
}

.ubin-tekan .ubin-kaki { justify-content: flex-start; }

.ubin-tekan .ubin-kaki svg {
  width: 13px;
  height: 13px;
  margin-left: auto;
  flex: none;
  opacity: 0.5;
  transition: transform 140ms ease;
}

@media (prefers-reduced-motion: no-preference) {
  .ubin-tekan:hover .ubin-kaki svg { transform: translateX(3px); }
}

/* ==========================================================================
   Halaman detail berita
   ==========================================================================
   Seluruh warna di bawah membaca token, tidak satu pun ditulis sebagai nilai
   tetap. Aturan itu yang membuat mode terang dan gelap tidak pernah saling
   merusak — dan halaman ini adalah halaman terpadat di seluruh aplikasi,
   sehingga satu warna tetap saja cukup untuk membuat satu tema tidak terbaca.
   ====================================================================== */

/* Judul di tabel berita menjadi tombol. Ia tetap harus terbaca sebagai judul,
   bukan sebagai tombol — yang berubah hanya saat disentuh penunjuk. */
table.tabel button.judul-buka {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
  border-radius: var(--r-1);
}
table.tabel button.judul-buka:hover { color: var(--accent); text-decoration: underline; }

.detail-kepala { display: flex; flex-direction: column; gap: 12px; padding: 4px 2px; }
.detail-lencana { display: flex; flex-wrap: wrap; gap: 6px; }

.detail-judul {
  font-family: var(--disp);
  font-size: 1.4rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0;
  max-width: 62ch;
  text-wrap: balance;
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12.5px;
  color: var(--ink-3);
}
.detail-meta span { display: inline-flex; align-items: center; gap: 5px; }
.detail-meta svg { width: 14px; height: 14px; opacity: 0.7; }

.detail-ringkasan {
  margin: 12px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  max-width: 68ch;
  color: var(--ink-2);
}
.detail-tautan { color: var(--accent); word-break: break-all; }

/* Daftar istilah-nilai. Dipakai tiga kartu di halaman ini. */
.rinci { margin: 0; display: flex; flex-direction: column; }
.rinci-baris {
  display: grid;
  grid-template-columns: 42% 1fr;
  gap: 12px;
  padding: 8px 2px;
  border-bottom: 1px solid var(--line-3);
  align-items: baseline;
}
.rinci-baris:last-child { border-bottom: 0; }
.rinci-baris dt { font-size: 11.5px; color: var(--ink-4); }
.rinci-baris dd {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ skor risiko */

.risiko-panel { display: flex; flex-direction: column; gap: 14px; }

.risiko-kepala {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: var(--r-3);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--nada, var(--line));
}
.risiko-kepala[data-nada="kritis"]  { --nada: var(--kritis); }
.risiko-kepala[data-nada="tinggi"]  { --nada: var(--tinggi); }
.risiko-kepala[data-nada="sedang"]  { --nada: var(--sedang); }
.risiko-kepala[data-nada="rendah"]  { --nada: var(--ink-4); }

.risiko-angka { display: flex; align-items: baseline; gap: 4px; }
.risiko-angka b {
  font-family: var(--disp);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--nada, var(--ink));
}
.risiko-angka span { font-size: 12px; color: var(--ink-4); }
.risiko-tingkat { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.risiko-tingkat p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

/* Rumusnya ditulis di layar, bukan hanya hasilnya. Pembaca yang melihat
   68 dikali 0,12 sama dengan 8 tidak perlu bertanya kenapa angkanya kecil. */
.risiko-rumus {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  font-size: 11.5px;
  color: var(--ink-3);
  padding: 9px 12px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
}
.risiko-rumus b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.risiko-rumus svg { width: 11px; height: 11px; opacity: 0.45; }
.risiko-sama { margin-left: auto; }
.risiko-sama b { color: var(--accent); }

.risiko-gerbang-ket {
  margin: -6px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.risiko-faktor { display: flex; flex-direction: column; gap: 12px; }
.risiko-faktor-kop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-2);
}
.risiko-faktor-kop .label-mono:last-child { color: var(--ink-4); }

.risiko-baris { display: flex; flex-direction: column; gap: 5px; }
.risiko-baris-kop {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
}
.risiko-baris-kop span { font-weight: 550; }
.risiko-baris-kop b {
  margin-left: auto;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.risiko-baris-kop i {
  font-style: normal;
  font-size: 10.5px;
  color: var(--ink-4);
  font-family: var(--mono);
}
.risiko-bilah {
  height: 5px;
  border-radius: 999px;
  background: var(--line-2);
  overflow: hidden;
}
.risiko-bilah i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.risiko-baris p { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-3); }

.risiko-catatan {
  padding: 11px 13px;
  border-radius: var(--r-2);
  background: var(--sedang-bg);
  border: 1px solid var(--sedang-tepi);
}
.risiko-catatan ul { margin: 7px 0 0; padding-left: 17px; display: flex; flex-direction: column; gap: 6px; }
.risiko-catatan li { font-size: 11.5px; line-height: 1.55; color: var(--ink-2); }

/* ------------------------------------------------------ liputan serumpun */

.serumpun { display: flex; flex-direction: column; gap: 14px; }

.serumpun-angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr));
  gap: 1px;
  background: var(--line-2);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  overflow: hidden;
}
.serumpun-angka > div {
  background: var(--surface);
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.serumpun-angka b {
  font-family: var(--disp);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.serumpun-angka span { font-size: 11px; color: var(--ink-4); }

.serumpun-daftar { list-style: none; margin: 0; padding: 0; }
.serumpun-daftar li { border-bottom: 1px solid var(--line-3); }
.serumpun-daftar li:last-child { border-bottom: 0; }

.serumpun-butir {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  width: 100%;
  padding: 10px 8px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-2);
  transition: background var(--cepat);
}
.serumpun-butir:hover { background: var(--surface-3); }
.serumpun-judul { font-size: 13px; font-weight: 550; line-height: 1.45; }
.serumpun-kaki { grid-column: 2; font-size: 11px; color: var(--ink-4); }

/* --------------------------------------------------------- mutu & pesaing */

.mutu-panel { display: flex; flex-direction: column; gap: 10px; }
.mutu-temuan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.mutu-temuan li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.mutu-temuan .mono {
  font-size: 10.5px;
  color: var(--ink-4);
  flex: none;
  padding: 2px 6px;
  border-radius: var(--r-1);
  background: var(--surface-3);
}

.mesin-pesaing { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.mesin-pesaing > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  color: var(--ink-3);
  padding: 4px 0;
  border-bottom: 1px dashed var(--line-2);
}
.mesin-pesaing > div:last-child { border-bottom: 0; }
.mesin-pesaing b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.mesin-pesaing-juara { color: var(--ink); font-weight: 600; }
.mesin-pesaing-juara b { color: var(--accent); }

/* Di layar sempit dua kolom menjadi satu, dan urutannya menjadi urutan gulir:
   ringkasan, dasar penilaian mesin, mutu, liputan serumpun, telaah, lalu skor
   risiko beserta klasifikasi dan sumbernya.

   Skor risiko sengaja TIDAK dinaikkan ke atas. Ia angka turunan — yang
   menjelaskan sebuah berita adalah ringkasan dan dasar penilaian mesin, dan
   pembaca yang mendapat angka 68 sebelum membaca dari mana angka itu berasal
   justru yang paling mungkin mengutipnya tanpa rinciannya. Di telepon, urutan
   gulir adalah satu-satunya hierarki yang tersisa; maka urutannya dipakai
   untuk memaksa dasar dibaca lebih dulu, bukan untuk mempercepat kesimpulan. */
@media (max-width: 900px) {
  .rinci-baris { grid-template-columns: 1fr; gap: 2px; }
  .detail-judul { font-size: 1.2rem; }
  .risiko-angka b { font-size: 2.2rem; }
}

/* --------------------------------------------------- pola peringatan laju */

.laju-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 12px;
  padding: 14px;
}

.laju-kartu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--nada, var(--line));
  border-radius: var(--r-2);
}
.laju-kartu[data-nada="kritis"] { --nada: var(--kritis); }
.laju-kartu[data-nada="tinggi"] { --nada: var(--tinggi); }
.laju-kartu[data-nada="sedang"] { --nada: var(--sedang); }
.laju-kartu[data-nada="rendah"] { --nada: var(--ink-4); }

.laju-kop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Nama aturan memakai huruf mono: ia penanda mesin, bukan kalimat manusia,
   dan pembacanya harus bisa membedakan keduanya sekilas. */
.laju-aturan {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  cursor: help;
}

.laju-judul {
  margin: 0;
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.laju-sebab { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-3); }

.laju-contoh {
  list-style: none;
  margin: 2px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.laju-contoh li { font-size: 11.5px; line-height: 1.45; }
.laju-contoh button {
  background: none;
  border: 0;
  padding: 2px 0;
  font: inherit;
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
  width: 100%;
  border-radius: var(--r-1);
}
.laju-contoh button:hover { color: var(--accent); text-decoration: underline; }

/* ========================================================= Executive Brief */

.brief-periode {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 2px;
}

/* Pernyataan tingkat risiko nasional. Satu-satunya tempat di seluruh aplikasi
   yang memakai huruf sebesar ini untuk sebuah KATA, bukan sebuah angka —
   sebab yang harus terbaca dalam tiga detik di sini memang kata itu. */
.brief-nasional {
  display: flex;
  flex-wrap: wrap;
  gap: 18px 28px;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-radius: var(--r-3);
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--nada, var(--line));
}
.brief-nasional[data-nada="kritis"]  { --nada: var(--kritis); }
.brief-nasional[data-nada="tinggi"]  { --nada: var(--tinggi); }
.brief-nasional[data-nada="sedang"]  { --nada: var(--sedang); }
.brief-nasional[data-nada="positif"] { --nada: var(--positif); }

.brief-nasional > div:first-child { min-width: 0; flex: 1 1 260px; }
.brief-nasional b {
  display: block;
  font-family: var(--disp);
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--nada, var(--ink));
  margin: 4px 0 5px;
}
.brief-nasional p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-3); max-width: 46ch; }

.brief-nasional-angka { display: flex; gap: 22px; flex-wrap: wrap; }
.brief-nasional-angka > div { display: flex; flex-direction: column; gap: 2px; }
.brief-nasional-angka b {
  font-size: 1.6rem;
  margin: 0;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.brief-nasional-angka span { font-size: 11px; color: var(--ink-4); }

.brief-kalimat {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: 1.7;
  max-width: 76ch;
  color: var(--ink-2);
}
.brief-kalimat b { color: var(--ink); font-weight: 650; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ temuan kunci */

.brief-temuan { list-style: none; margin: 0; padding: 0; }
.brief-temuan li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line-3);
}
.brief-temuan li:last-child { border-bottom: 0; }

.brief-nomor {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.brief-temuan-isi { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.brief-temuan-judul {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  border-radius: var(--r-1);
}
.brief-temuan-judul:hover { color: var(--accent); text-decoration: underline; }
.brief-temuan-meta { font-size: 11.5px; color: var(--ink-4); }

.brief-temuan-skor { display: flex; align-items: center; gap: 9px; }
.brief-temuan-skor b {
  font-family: var(--disp);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  min-width: 2.2ch;
  text-align: right;
}

/* ------------------------------------------------------------------- pola */

.brief-pola { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.brief-pola li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: start;
  padding: 10px 12px;
  border-radius: var(--r-2);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--nada, var(--line));
}
.brief-pola li[data-nada="kritis"] { --nada: var(--kritis); }
.brief-pola li[data-nada="tinggi"] { --nada: var(--tinggi); }
.brief-pola li[data-nada="sedang"] { --nada: var(--sedang); }
.brief-pola li[data-nada="rendah"] { --nada: var(--ink-4); }

.brief-pola > li > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brief-pola b { font-size: 12.5px; font-weight: 650; }
.brief-pola span { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; }
.brief-pola em { font-style: normal; font-size: 11.5px; color: var(--ink-4); line-height: 1.5; }

/* Kata risiko yang bisa ditekan. Panah kecil dan garis bawah saat disorot
   adalah satu-satunya tanda bahwa keping ini tombol — keping di tempat lain
   tidak pernah bisa ditekan, dan pembacanya berhak tahu bedanya. */
.brief-risiko {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  margin: -2px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  color: var(--ink-3);
  cursor: pointer;
}
.brief-risiko svg { width: 12px; height: 12px; }
.brief-risiko:hover .keping,
.brief-risiko:focus-visible .keping { text-decoration: underline; text-underline-offset: 2px; }
.brief-risiko:hover { color: var(--ink); }
.brief-risiko:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.sembul.sembul-lebar { width: min(920px, 100%); }

/* Peta sebaran yang tertanam di Dasbor Eksekutif. Peta membawa bilah alat dan
   kartunya sendiri, jadi yang ditambahkan di sini hanya kepala bagiannya. */
.dasbor-peta { display: flex; flex-direction: column; gap: 10px; }
.dasbor-peta-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.dasbor-peta-kop h2 { font-size: 14px; font-weight: 650; margin: 0; }
.sembul-lebar .sembul-kop h2 { font-size: 14px; }

/* --------------------------------------------------------------- dampak */

.brief-daftar { list-style: none; margin: 7px 0 0; padding: 0; }
.brief-daftar li {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: baseline;
  padding: 7px 2px;
  border-bottom: 1px solid var(--line-3);
  font-size: 12.5px;
}
.brief-daftar li:last-child { border-bottom: 0; }
.brief-daftar b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.brief-daftar i {
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}
.brief-daftar i.naik { color: var(--kritis); }

.brief-bagan { min-height: 180px; }

/* --------------------------------------------------------- rekomendasi */

.brief-rekomendasi { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.brief-rekomendasi li { font-size: 13px; line-height: 1.65; color: var(--ink-2); max-width: 72ch; }
.brief-rekomendasi b { color: var(--ink); font-weight: 650; }

.brief-catatan { display: flex; flex-direction: column; gap: 11px; }
.brief-catatan p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-3); }
.brief-catatan b { color: var(--ink-2); }

.brief-kaki {
  margin: 4px 2px 0;
  font-size: 11.5px;
  color: var(--ink-4);
  font-family: var(--mono);
  line-height: 1.6;
}

@media (max-width: 700px) {
  .brief-nasional b { font-size: 1.8rem; }
  .brief-temuan li { grid-template-columns: auto 1fr; }
  .brief-temuan-skor { grid-column: 2; }
}

/* ------------------------------------------------------ 12. Lembar infografis */
/*
   Lembar laporan harian dan mingguan. Ia satu gambar SVG, bukan susunan kotak
   HTML — jadi yang perlu diatur di sini hanya wadahnya: seberapa lebar ia
   boleh, dan apa yang terjadi ketika halaman dicetak.

   Warna lembarnya sengaja tidak memakai peubah tema. Alasannya ada di
   ui/infografis-tata.js: lembar ini dicetak dan dibagikan di luar aplikasi,
   dan lembar yang warnanya ikut setelan peramban penyusunnya adalah lembar
   yang tidak bisa dijamin bentuknya.
*/

.lembar-infografis {
  border: 1px solid var(--line-3);
  border-radius: var(--lengkung, 10px);
  overflow: hidden;
  background: #eef2f7;
  /* Bayangan halus supaya lembar terbaca sebagai sehelai kertas di atas
     halaman, bukan sebagai bagian dari halaman itu sendiri. */
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

.lembar-infografis svg {
  display: block;
  width: 100%;
  height: auto;
}

/*
   Mode cetak khusus lembar.

   Dinyalakan tombol Cetak, bukan berlaku selamanya, karena halaman ini juga
   memuat bilah alat yang wajar ikut tercetak ketika seseorang menekan Ctrl+P
   pada halaman lain. Yang disembunyikan di sini adalah SELURUH isi selain
   lembarnya, sehingga hasil cetaknya satu halaman penuh tanpa kop aplikasi.
*/
@media print {
  body.cetak-lembar .kartu:not(:has(.lembar-infografis)) { display: none !important; }
  body.cetak-lembar .lembar-infografis {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  body.cetak-lembar { background: #fff; }
}

/*
   Lembar dicetak melintang: rancangannya berbanding √2 lanskap, dan dicetak
   tegak ia menyusut menjadi setengah tinggi kertas dengan tulisan yang tidak
   terbaca.

   Dipakai HALAMAN BERNAMA, bukan `@page` polos. `@page { size: A4 landscape }`
   berlaku untuk seluruh aplikasi — termasuk tabel berita dan jejak audit, yang
   selama ini dicetak tegak dan memang lebih terbaca begitu. Aturan yang
   memperbaiki satu halaman dengan diam-diam mengubah semua halaman lain adalah
   aturan yang akan dicurigai orang lain sebagai kerusakan.
*/
@page lembar-melintang { size: A4 landscape; margin: 8mm; }
.lembar-infografis { page: lembar-melintang; }

/* ==========================================================================
   Lapisan analis — Pencarian Lanjutan, Ruang Analis, Aturan, Narasi,
   Analisis Kaitan, dan Pusat Komando.

   Seluruhnya membaca token yang sama dengan bagian lain berkas ini, sehingga
   mode gelap berlaku tanpa satu baris tambahan. Tidak ada satu pun warna
   harfiah di bawah, dan itu bukan kerapian melainkan syarat: satu warna
   harfiah akan tetap terang di layar gelap, dan hanya ketahuan oleh orang
   yang kebetulan memakai mode gelap.
   ========================================================================== */

/* ------------------------------------------------- Pencarian: kotak kueri */

.cari-lanjut { display: flex; flex-direction: column; gap: 10px; }

.cari.cari-besar { width: 100%; }
.cari.cari-besar .masukan {
  font-family: var(--mono);
  font-size: 13.5px;
}

.cari-baca {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  padding: 8px 11px;
  border-radius: var(--r-2);
  background: var(--surface-3);
  border: 1px solid var(--line-3);
}
.cari-baca-inti { color: var(--ink-2); }
.cari-baca-catatan { display: block; margin-top: 4px; color: var(--tinggi); }

.cari-contoh { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cari-contoh .keping { cursor: pointer; font-family: var(--mono); border: 0; }
.cari-contoh .keping:hover { filter: brightness(0.96); }

.cari-bantuan summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-3);
  padding: 4px 0;
}
.cari-bidang {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
  gap: 4px;
  margin-top: 6px;
}
.cari-bidang-butir {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 5px 8px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  background: var(--surface-2);
  font-size: 11.5px;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
}
.cari-bidang-butir:hover { border-color: var(--accent-tepi); background: var(--surface-3); }
.cari-bidang-butir code { font-family: var(--mono); color: var(--accent-2); }

/* ------------------------------------------------ Pencarian: hasil & aspek */

.cari-banner {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  font-size: 11.5px;
  line-height: 1.45;
  border-bottom: 1px solid var(--line-3);
  color: var(--ink-2);
  background: var(--surface-3);
}
.cari-banner svg { width: 14px; height: 14px; flex: none; color: var(--nada, var(--ink-3)); }
.cari-banner[data-nada="kritis"] { --nada: var(--kritis); background: var(--kritis-bg); color: var(--kritis); }
.cari-banner[data-nada="tinggi"] { --nada: var(--tinggi); background: var(--tinggi-bg); color: var(--tinggi); }
.cari-banner[data-nada="sedang"] { --nada: var(--sedang); background: var(--sedang-bg); color: var(--sedang); }
.cari-banner[data-nada="positif"] { --nada: var(--positif); background: var(--positif-bg); color: var(--positif); }

.cari-judul {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  font: inherit;
  font-weight: 550;
  color: var(--ink);
  cursor: pointer;
  line-height: 1.4;
}
.cari-judul:hover { color: var(--accent-2); text-decoration: underline; }
.cari-judul mark {
  background: var(--brass-soft);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 1px;
}

.cari-lagi, .cari-kaki {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-3);
  flex-wrap: wrap;
}
.cari-lagi { justify-content: center; }

.aspek-kisi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 14px;
}
.aspek-kolom h3 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 5px;
}
.aspek-butir {
  display: flex;
  width: 100%;
  gap: 8px;
  align-items: baseline;
  justify-content: space-between;
  padding: 4px 7px;
  border: 0;
  border-radius: var(--r-1);
  background: none;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
}
.aspek-butir:hover { background: var(--surface-3); color: var(--ink); }
.aspek-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aspek-angka {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-4);
  flex: none;
}

.cari-daftar { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.cari-daftar li { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cari-daftar button {
  border: 0;
  background: none;
  padding: 3px 0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--ink-2);
  cursor: pointer;
}
.cari-daftar button:hover { color: var(--accent-2); text-decoration: underline; }
.cari-daftar span {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-4);
  flex: none;
}

/* -------------------------------------------------------- Ruang: pantauan */

.pantau-daftar { display: flex; flex-direction: column; gap: 8px; }

.pantau-baris {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.pantau-baris.menyala { border-left-color: var(--tinggi); background: var(--tinggi-bg); }
.pantau-ikon { color: var(--ink-4); padding-top: 2px; }
.pantau-ikon svg { width: 16px; height: 16px; }

.pantau-teks { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pantau-nama {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.pantau-nama:hover { color: var(--accent-2); text-decoration: underline; }
.pantau-kueri {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pantau-catatan { font-size: 11px; color: var(--tinggi); }

.pantau-contoh { list-style: none; display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.pantau-contoh button {
  border: 0;
  background: none;
  padding: 1px 0;
  font: inherit;
  font-size: 11.5px;
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
}
.pantau-contoh button:hover { color: var(--accent-2); text-decoration: underline; }

.pantau-angka { text-align: right; min-width: 96px; }
.pantau-utama {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}
.pantau-aksi { display: flex; gap: 4px; align-items: center; flex: none; }

@media (max-width: 720px) {
  .pantau-baris { grid-template-columns: auto minmax(0, 1fr); }
  .pantau-angka { grid-column: 2; text-align: left; }
  .pantau-aksi { grid-column: 2; }
}

/* ------------------------------------------------------- Ruang: temuan */

.temuan-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 10px;
}
.temuan-kartu {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 13px;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--nada, var(--line));
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.temuan-kartu[data-nada="kritis"] { --nada: var(--kritis); }
.temuan-kartu[data-nada="tinggi"] { --nada: var(--tinggi); }
.temuan-kartu[data-nada="sedang"] { --nada: var(--sedang); }
.temuan-kartu[data-nada="rendah"] { --nada: var(--rendah); }

.temuan-kop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.temuan-aturan {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.temuan-judul { font-size: 13px; font-weight: 600; line-height: 1.4; }
.temuan-meta { line-height: 1.45; }
.temuan-dasar {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 11.5px;
  color: var(--ink-2);
}
.temuan-dasar li { padding-left: 13px; position: relative; }
.temuan-dasar li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nada, var(--ink-4));
}

/* ------------------------------------------------------------- Aturan */

.aturan-daftar { display: flex; flex-direction: column; gap: 8px; }

.aturan-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.aturan-baris.mati { opacity: 0.58; }
.aturan-utama { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aturan-kalimat { font-size: 12px; color: var(--ink-2); line-height: 1.45; }

.aturan-angka { text-align: center; min-width: 62px; }
.aturan-jumlah {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-4);
}
.aturan-jumlah.menyala { color: var(--tinggi); }
.aturan-aksi { display: flex; gap: 4px; align-items: center; flex: none; }

.aturan-borang { display: flex; flex-direction: column; gap: 14px; }
.aturan-syarat { display: flex; flex-direction: column; gap: 8px; }

.syarat-baris {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px 10px;
  border: 1px solid var(--line-3);
  border-radius: var(--r-1);
  background: var(--surface-3);
}
.syarat-baris .pilihan, .syarat-baris .masukan { min-width: 0; }

.aturan-jangkauan {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 13px;
  border-radius: var(--r-2);
  border: 1px solid var(--line-2);
  background: var(--surface-3);
  line-height: 1.5;
}
.aturan-jangkauan svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--nada, var(--ink-3)); }
.aturan-jangkauan[data-nada="kritis"] { --nada: var(--kritis); background: var(--kritis-bg); border-color: var(--kritis-tepi); }
.aturan-jangkauan[data-nada="sedang"] { --nada: var(--sedang); background: var(--sedang-bg); border-color: var(--sedang-tepi); }
.aturan-jangkauan[data-nada="positif"] { --nada: var(--positif); background: var(--positif-bg); border-color: var(--positif-tepi); }

@media (max-width: 720px) {
  .aturan-baris { grid-template-columns: minmax(0, 1fr) auto; }
  .aturan-aksi { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- Narasi */

.narasi-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 12px;
}
.narasi-kartu {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--nada, var(--line));
  border-radius: var(--r-2);
  background: var(--surface-2);
  color: var(--nada, var(--ink-3));
}
.narasi-kartu[data-nada="kritis"] { --nada: var(--kritis); }
.narasi-kartu[data-nada="tinggi"] { --nada: var(--tinggi); }
.narasi-kartu[data-nada="sedang"] { --nada: var(--sedang); }
.narasi-kartu[data-nada="positif"] { --nada: var(--positif); }
.narasi-kartu[data-nada="netral"] { --nada: var(--netral); }

.narasi-kop { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.narasi-judul { font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.narasi-tema { font-size: 11.5px; color: var(--ink-3); }

.narasi-percikan { width: 100%; height: 34px; display: block; color: var(--nada, var(--accent-3)); }

.narasi-angka {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.narasi-angka div { display: flex; flex-direction: column; gap: 1px; }
.narasi-angka dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.narasi-angka dd {
  margin: 0;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.narasi-rinci { display: flex; flex-direction: column; gap: 3px; color: var(--ink-2); line-height: 1.45; }

.narasi-kamus { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.narasi-kamus li { display: flex; gap: 10px; align-items: baseline; font-size: 12px; color: var(--ink-2); }
.narasi-kamus li .keping { flex: none; }

/* -------------------------------------------------------- Analisis Kaitan */

.jaring-bungkus { padding: 6px; overflow-x: auto; }
.jaring-svg { width: 100%; height: auto; display: block; min-width: 520px; }

.jaring-garis { stroke: var(--ink-4); }
.jaring-garis.negatif { stroke: var(--kritis); }

.jaring-simpul { cursor: pointer; }
.jaring-simpul circle {
  stroke: var(--surface-2);
  stroke-width: 1.4;
  fill: var(--nada-isi, var(--netral));
  transition: r var(--cepat, 140ms);
}
.jaring-simpul circle[data-nada="aksen"] { --nada-isi: var(--accent-3); }
.jaring-simpul circle[data-nada="netral"] { --nada-isi: var(--netral); }
.jaring-simpul circle[data-nada="sedang"] { --nada-isi: var(--sedang); }
.jaring-simpul circle[data-nada="rendah"] { --nada-isi: var(--rendah); }
.jaring-simpul:hover circle, .jaring-simpul:focus-visible circle { stroke: var(--accent); stroke-width: 2.4; }
.jaring-simpul.pusat circle { stroke: var(--brass); stroke-width: 2.6; }
.jaring-simpul:focus-visible { outline: none; }

.jaring-label {
  font-family: var(--sans);
  font-size: 9.5px;
  fill: var(--ink-3);
  pointer-events: none;
}

.jaring-daftar { list-style: none; display: flex; flex-direction: column; gap: 3px; }
.jaring-daftar li { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.jaring-daftar button {
  display: flex;
  gap: 7px;
  align-items: baseline;
  border: 0;
  background: none;
  padding: 3px 0;
  font: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  color: var(--ink-2);
  min-width: 0;
}
.jaring-daftar button:hover .jaring-nama { color: var(--accent-2); text-decoration: underline; }
.jaring-jenis {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-4);
  flex: none;
}
.jaring-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jaring-angka { font-family: var(--mono); font-size: 11px; color: var(--ink-4); flex: none; }

.jaring-legenda { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.jaring-legenda li { display: flex; gap: 6px; align-items: center; font-size: 11.5px; color: var(--ink-2); }
.jaring-bulat { width: 10px; height: 10px; border-radius: 50%; background: var(--netral); flex: none; }
.jaring-bulat[data-nada="aksen"] { background: var(--accent-3); }
.jaring-bulat[data-nada="sedang"] { background: var(--sedang); }
.jaring-bulat[data-nada="rendah"] { background: var(--rendah); }

/* --------------------------------------------------------- Pusat Komando */

.komando { display: flex; flex-direction: column; gap: 14px; }

.komando-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 16px;
  border-radius: var(--r-2);
  background: var(--gradien-kop);
  color: #fff;
}
.komando-nama { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.komando-tanggal { font-size: 12px; opacity: 0.82; }
.komando-kop-kanan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.komando-status {
  display: flex;
  gap: 7px;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
}
.komando-status svg { width: 15px; height: 15px; }
.komando-status[data-nada="kritis"] { background: var(--kritis); }
.komando-status[data-nada="positif"] { background: rgba(255, 255, 255, 0.16); }
.komando-segar { font-family: var(--mono); font-size: 11px; opacity: 0.78; }

.komando-angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 10px;
}
.komando-ubin {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 15px;
  border: 1px solid var(--line-2);
  border-bottom: 3px solid var(--nada, var(--line));
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.komando-ubin[data-nada="kritis"] { --nada: var(--kritis); }
.komando-ubin[data-nada="tinggi"] { --nada: var(--tinggi); }
.komando-ubin[data-nada="sedang"] { --nada: var(--sedang); }
.komando-ubin[data-nada="positif"] { --nada: var(--positif); }
.komando-ubin[data-nada="aksen"] { --nada: var(--accent); }
.komando-ubin[data-nada="netral"] { --nada: var(--netral); }
.komando-ubin-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.komando-ubin-nilai {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 34px;
  font-weight: 600;
  line-height: 1.05;
  color: var(--ink);
}
.komando-ubin-kaki { font-size: 11px; color: var(--ink-3); }

.komando-tata {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.komando-peta-kotak, .komando-sisi, .komando-bawah > div {
  padding: 14px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
}
.komando-peta-kotak h2, .komando-sisi h2, .komando-bawah h2 {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 9px;
}
.komando-sisi h2:not(:first-child) { margin-top: 16px; }

.komando-peta-svg { width: 100%; height: auto; display: block; }
.komando-daratan { fill: var(--surface-3); stroke: var(--line); stroke-width: 0.6; }
.komando-titik-sepi circle { fill: var(--ink-4); opacity: 0.32; }
.komando-titik circle {
  fill: var(--nada-isi, var(--rendah));
  fill-opacity: 0.78;
  stroke: var(--surface-2);
  stroke-width: 0.8;
}
.komando-titik circle[data-nada="kritis"] { --nada-isi: var(--kritis); }
.komando-titik circle[data-nada="tinggi"] { --nada-isi: var(--tinggi); }
.komando-titik circle[data-nada="sedang"] { --nada-isi: var(--sedang); }
.komando-titik circle[data-nada="positif"] { --nada-isi: var(--positif); }
.komando-titik circle[data-nada="rendah"] { --nada-isi: var(--rendah); }
.komando-peta-gagal {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 28px 14px;
  color: var(--ink-3);
  font-size: 12.5px;
}

.komando-tiker { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.komando-tiker li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 9px;
  padding: 7px 10px;
  border-left: 3px solid var(--nada, var(--line));
  border-radius: var(--r-1);
  background: var(--surface-3);
}
.komando-tiker li[data-nada="kritis"] { --nada: var(--kritis); }
.komando-tiker li[data-nada="tinggi"] { --nada: var(--tinggi); }
.komando-tiker li[data-nada="sedang"] { --nada: var(--sedang); }
.komando-tiker li[data-nada="rendah"] { --nada: var(--rendah); }
.komando-tiker-tingkat {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nada, var(--ink-3));
  font-weight: 600;
  padding-top: 2px;
}
.komando-tiker-judul { font-size: 12.5px; font-weight: 550; line-height: 1.35; color: var(--ink); }
.komando-tiker-meta { grid-column: 2; font-size: 10.5px; color: var(--ink-4); }

.komando-tenang {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 14px;
  border-radius: var(--r-1);
  background: var(--positif-bg);
  color: var(--positif);
  font-size: 12.5px;
}
.komando-tenang svg { width: 17px; height: 17px; flex: none; }

.komando-narasi { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.komando-narasi li { display: flex; gap: 8px; align-items: center; }
.komando-narasi-teks {
  flex: 1;
  min-width: 0;
  font-size: 12px;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.komando-narasi-angka {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-3);
}

.komando-bawah {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.komando-unit { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.komando-unit li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(70px, 130px) auto;
  gap: 10px;
  align-items: center;
  font-size: 12px;
}
.komando-unit-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.komando-unit-batang {
  height: 8px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}
.komando-unit-batang span { display: block; height: 100%; background: var(--nada-isi, var(--rendah)); }
.komando-unit-batang span[data-nada="kritis"] { --nada-isi: var(--kritis); }
.komando-unit-batang span[data-nada="tinggi"] { --nada-isi: var(--tinggi); }
.komando-unit-batang span[data-nada="sedang"] { --nada-isi: var(--sedang); }
.komando-unit-batang span[data-nada="positif"] { --nada-isi: var(--positif); }
.komando-unit-batang span[data-nada="rendah"] { --nada-isi: var(--rendah); }
.komando-unit-angka {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.komando-denyut {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 74px;
  margin-bottom: 6px;
}
.komando-denyut-batang {
  flex: 1;
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: var(--surface-3);
  border-radius: 2px;
  overflow: hidden;
}
.komando-denyut-batang > span {
  display: block;
  width: 100%;
  background: var(--accent-3);
  border-radius: 2px;
}

@media (max-width: 1100px) {
  .komando-tata, .komando-bawah { grid-template-columns: minmax(0, 1fr); }
}

/*
   Daftar pilihan di dalam bilah alat menyusut ke lebarnya sendiri.

   Komponen `pilihan()` menempelkannya sebagai gaya sebaris, dan itu bekerja
   selama seluruh daftar pilihan lahir dari komponen itu. Begitu sebuah halaman
   menulis <select class="pilihan"> langsung — yang wajar ketika pilihannya
   perlu disusun sendiri — ia melebar memenuhi baris dan menumpuk ke bawah,
   satu pilihan per baris. Aturan ini menjadikan perilakunya milik kelasnya,
   bukan milik pemanggilnya.
*/
.bilah-alat .pilihan { width: auto; min-width: 120px; }

/*
   Satu syarat, satu baris.

   Ketiga bagiannya — sinyal, pembanding, nilai — dibaca sebagai satu kalimat,
   dan kalimat yang terpotong menjadi tiga baris berhenti terbaca sebagai
   kalimat. Sinyal diberi porsi terbesar sebab namanya paling panjang.
*/
.syarat-baris .pilihan { width: auto; flex: 1 1 150px; min-width: 120px; }
.syarat-baris .pilihan[data-syarat="sinyal"] { flex: 2 1 190px; }
.syarat-baris .masukan { flex: 0 1 130px; min-width: 90px; }

/* ------------------------------------------------------------- 12. Panduan */
/*
   Panduan adalah satu-satunya halaman yang isinya seluruhnya teks panjang.
   Aturan di bawah menjawab tiga hal yang tidak dijawab kelas mana pun di atas:
   bagaimana tiga puluh keterangan tetap terbaca tanpa menjadi dinding kata,
   bagaimana ruang yang bukan milik pembacanya tetap ada tanpa menyita
   perhatian, dan bagaimana halaman ini tercetak menjadi buku manual yang utuh.
*/

.panduan-alat {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.panduan-alat .cari { flex: 1 1 260px; max-width: 420px; }

/* Dua kolom pada layar lebar. Keterangan fitur panjangnya seragam — tiga
   sampai lima baris — sehingga dua kolom tidak menghasilkan tepi yang
   bergerigi, dan satu kolom memaksa menggulir empat layar penuh. */
.panduan-daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.panduan-fitur {
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  padding: 12px 13px;
  break-inside: avoid;
}

.panduan-fitur-kop {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.panduan-fitur-kop h3 {
  font-size: 13.5px;
  font-weight: 650;
  margin: 0;
  line-height: 1.3;
}

.panduan-ikon {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-1);
  display: grid;
  place-items: center;
  background: var(--surface-3);
  color: var(--ink-4);
  border: 1px solid var(--line-2);
}
.panduan-ikon svg { width: 15px; height: 15px; }

/*
   Label dan isinya sebagai dua kolom, bukan sebagai dua baris.

   "Isinya" dan "Untuk apa" adalah pertanyaan yang sama pada tiap fitur, dan
   pembaca yang membandingkan dua fitur menyapu matanya ke bawah pada kolom
   yang sama. Label yang berpindah-pindah letak menghapus kemampuan itu.
*/
.panduan-isi { margin: 10px 0 0; display: flex; flex-direction: column; gap: 7px; }
.panduan-isi > div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
.panduan-isi dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding-top: 2px;
}
.panduan-isi dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-2); }

/* Batas yang mudah disalahpahami diberi tepi, bukan hanya warna huruf. Yang
   membaca cepat melewati perbedaan warna; tepi menahan matanya sebentar. */
.panduan-catat {
  border-left: 2px solid var(--sedang-tepi, var(--line-1));
  padding-left: 9px;
  margin-left: -2px;
}
.panduan-catat dd { color: var(--ink-3); }

/* Ruang yang bukan milik pembacanya: ada, terbuka sekali tekan, dan tidak
   menyita perhatian selama tidak dibutuhkan. */
.panduan-lain {
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-1);
}
.panduan-lain > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  list-style: none;
}
.panduan-lain > summary::-webkit-details-marker { display: none; }
.panduan-lain > summary svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--ink-4);
  transition: transform var(--cepat);
}
.panduan-lain[open] > summary svg { transform: rotate(90deg); }
.panduan-lain > summary .ket { font-weight: 450; }
.panduan-lain-isi { padding: 0 10px 10px; }

/* Tiga angka jendela pelaporan, berdampingan. */
.panduan-jendela {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.panduan-jendela > div {
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  background: var(--surface-2);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.panduan-jendela b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .panduan-daftar { grid-template-columns: 1fr; }
  .panduan-isi > div { grid-template-columns: 1fr; gap: 2px; }
}

/*
   Tercetak sebagai buku manual yang utuh.

   Yang membuka ruang terlipat sebelum mencetak adalah penangan tombol di
   pages/panduan.js, bukan aturan di sini: peramban menyembunyikan isi
   <details> lewat mekanismenya sendiri, dan menimpanya dari CSS hanya bekerja
   di sebagian peramban. Yang tersisa untuk aturan cetak adalah membuang
   perkakas layar dan melepas bingkai yang tidak berguna di atas kertas.
*/
@media print {
  .panduan-alat { display: none !important; }
  .panduan-lain { border: 0; }
  .panduan-lain > summary { padding-left: 0; }
  .panduan-lain > summary svg { display: none; }
  .panduan-lain-isi { padding: 0; }
  .panduan-daftar { grid-template-columns: 1fr; }
  .panduan-fitur { border-color: #ccc; }
}

/* Pemilih bulan di puncak Dasbor Eksekutif. Keterangannya boleh turun ke baris
   berikutnya pada layar sempit; tombolnya tidak. */
.dasbor-bulan { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dasbor-bulan .segmen button { white-space: nowrap; }


/* ------------------------------------------------------------ Situation Room */

.situation { background: var(--surface); }
.situation:fullscreen { padding: 22px 26px; overflow: auto; }
.situation:fullscreen .komando-ubin-nilai { font-size: clamp(40px, 5vw, 72px); }
.situation:fullscreen .komando-tiker-judul { font-size: 16px; }
.situation:fullscreen .komando-tiker-meta { font-size: 13px; }
.situation:fullscreen .komando-tiker-tingkat { font-size: 12px; }
.situation-tata {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: 14px;
  align-items: start;
}


/* ------------------------------------------------- Peringatan Dini: cetak */

.brief-rapat .tabel td, .brief-rapat .tabel th { padding-top: 7px; padding-bottom: 7px; }
@media print {
  .brief-alat, .brief-periode button[data-periode] { display: none !important; }
  .kartu { break-inside: avoid; box-shadow: none; }
  .brief-rapat table.tabel { font-size: 11px; }
}

/* Kartu rekomendasi di halaman detail berita. */
.saran-besar { padding: 8px 0 8px 12px; }
.saran-form { display: grid; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-3); }
.saran-isian { display: grid; gap: 4px; font-size: 12.5px; color: var(--ink-2); }
.saran-isian > span:first-child { font-weight: 600; }

/* Analisis Berita dan Tindak Lanjut berita (3 November 2026). Daftar di kiri,
   borang di kanan pada layar lebar; bertumpuk di layar sempit. */
.analisis-tata { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 16px; align-items: start; }
@media (max-width: 1100px) { .analisis-tata { grid-template-columns: 1fr; } }
.analisis-tata > div:last-child { position: sticky; top: 12px; }
@media (max-width: 1100px) { .analisis-tata > div:last-child { position: static; } }
.analisis-kelompok { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 8px 10px; margin-top: 8px; }
.analisis-kelompok > summary { cursor: pointer; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.analisis-daftar { display: grid; gap: 6px; margin-top: 8px; max-height: 520px; overflow: auto; }
.analisis-baris {
  display: grid; gap: 4px; text-align: left; width: 100%; padding: 8px 10px;
  border: 1px solid var(--line-3); border-radius: var(--r-2); background: transparent; color: inherit; cursor: pointer;
}
.analisis-baris:hover { background: var(--surface-3); }
.analisis-baris.aktif { border-color: var(--aksen, #3b82f6); box-shadow: inset 3px 0 0 var(--aksen, #3b82f6); }
.analisis-judul { font-size: 13px; font-weight: 600; line-height: 1.4; }
.analisis-ringkas { padding-bottom: 12px; border-bottom: 1px solid var(--line-3); margin-bottom: 12px; }
.analisis-borang { display: grid; gap: 10px; }
.analisis-borang .bidang { display: grid; gap: 4px; }
.analisis-tujuan { display: grid; gap: 8px; margin-top: 6px; }
.tujuan-pilih { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: var(--r-2); cursor: pointer; }
.tujuan-pilih input { margin-top: 3px; flex: none; }
.tujuan-pilih.mati { opacity: .6; cursor: not-allowed; }
.analisis-sub { display: grid; gap: 8px; padding: 0 0 4px 30px; }
.analisis-upt { display: grid; gap: 6px; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--accent-tepi, var(--line-2)); border-radius: var(--r-2); background: var(--surface-3); }
.analisis-upt .cari { max-width: none; }
.penanganan-butir { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 12px 14px; display: grid; gap: 4px; }
.penanganan-butir.lewat { border-left: 3px solid var(--kritis, #D64545); }
.penanganan-aksi { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-2); display: grid; gap: 4px; }
.penanganan-masuk { margin-top: 8px; padding: 8px 10px; background: var(--surface-3); border-radius: var(--r-2); display: grid; gap: 4px; }
.penanganan-rinci > summary { cursor: pointer; font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.pra { white-space: pre-wrap; font-size: 12.5px; line-height: 1.5; margin: 2px 0 8px; }

/* Pengingat alur (ui/pengingat-alur.js) — pita langkah di puncak halaman yang
   menjadi bagian sebuah alur kerja. Terlipat: satu baris; terbuka: daftar
   langkah dengan langkah halaman ini ditandai. */
.pengingat-wadah { display: grid; gap: 8px; margin-bottom: 14px; }
.pengingat-alur { border: 1px solid var(--accent-tepi, var(--line-2)); background: var(--accent-soft, var(--surface-2)); border-radius: var(--r-2); padding: 0 13px; }
.pengingat-alur > summary { display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer; list-style: none; font-size: 13px; color: var(--ink-2); }
.pengingat-alur > summary::-webkit-details-marker { display: none; }
.pengingat-alur > summary svg { width: 17px; height: 17px; flex: none; color: var(--accent); }
.pengingat-alur > summary > span:nth-child(2) { flex: 1; min-width: 0; }
.pengingat-lipat { color: var(--accent); white-space: nowrap; }
.pengingat-langkah { list-style: none; margin: 0; padding: 4px 0 10px; display: grid; gap: 8px; border-top: 1px dashed var(--line-2); }
.pengingat-langkah li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-3); padding-top: 6px; }
.pengingat-langkah li[data-di-sini] { color: var(--ink); }
.pengingat-nomor { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; background: var(--surface-3); color: var(--ink-3); }
.pengingat-langkah li[data-di-sini] .pengingat-nomor { background: var(--accent); color: var(--accent-in, #fff); }
.pengingat-kaki { flex-wrap: wrap; padding-bottom: 12px; }
@media print { .pengingat-wadah { display: none; } }

/* Laporan klarifikasi berita (pages/penanganan.js, lib/laporan-klarifikasi.js):
   tiga lembar format resmi sebagai kelompok isian; bidang teks panjang
   selebar kisi supaya fakta dan draf tanggapan tidak terjepit sepertiga layar. */
.laporan-isi > summary { cursor: pointer; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-weight: 600; font-size: 13px; padding: 6px 0; }
.laporan-isi > summary svg { width: 15px; height: 15px; }
.laporan-lembar { border: 1px solid var(--line-2); border-radius: var(--r-2); padding: 10px 12px 12px; margin: 8px 0 0; min-width: 0; }
.laporan-lembar > legend { font-size: 12px; font-weight: 700; padding: 0 6px; color: var(--ink-2); }
.laporan-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 8px; }
.laporan-kisi .bidang.lebar { grid-column: 1 / -1; }
.laporan-kisi .masukan { width: 100%; }
.laporan-dl { display: grid; grid-template-columns: minmax(140px, 32%) 1fr; gap: 2px 12px; margin: 4px 0 0; font-size: 12.5px; }
.laporan-dl dt { color: var(--ink-3); }
.laporan-dl dd { margin: 0; }
@media (max-width: 560px) { .laporan-dl { grid-template-columns: 1fr; } .laporan-dl dd { margin-bottom: 6px; } }