/* ==========================================================================
   Dashboard Import Daging
   ---------------------------------------------------------------------------
   Bahasa visual mengikuti rujukan desainui.png: rel gelap navy, kartu putih
   bersudut bulat dengan bayangan lembut, biru sebagai warna utama, dan warna
   status (hijau/oranye/merah) hanya untuk MENANDAI ARTI.

   Huruf: TANPA webfont sama sekali. Firewall kantor menyadap HTTPS, dan
   dashboard tidak boleh mati karena font gagal dimuat. Font sistem untuk
   struktur; monospace hanya untuk nomor BL, kontainer, dan angka di kolom
   tabel -- di sana monospace bukan gaya melainkan kegunaan, karena angka jadi
   sejajar dan bisa dibandingkan sekilas.
   ========================================================================== */

:root {
  --latar:      #f6f8fb;
  --kertas:     #ffffff;
  --rel-latar:  #0f172a;
  --rel-teks:   #94a3b8;

  --tinta:      #0f172a;
  --baja:       #64748b;
  --redup:      #94a3b8;
  --garis:      #e5e9f0;

  --biru:       #2563eb;
  --biru-muda:  #eff4ff;
  --hijau:      #16a34a;
  --hijau-muda: #eafaf0;
  --oranye:     #f59e0b;
  --oranye-muda:#fef6e7;
  --merah:      #dc2626;
  --merah-muda: #fdeded;
  /* Tingkat terakhir gradasi peringatan. Lebih gelap, bukan lebih
     terang: yang paling genting harus terbaca paling berat. */
  --merah-pekat: #7f1d1d;
  /* Dua warna tambahan khusus corong: tiap tahap perlu warnanya
     sendiri agar kartu, batang, dan lingkaran saling dirujuk. */
  --ungu:       #9333ea;
  --ungu-muda:  #f6eefe;
  --toska:      #0d9488;
  --toska-muda: #e6f6f4;

  --rel-lebar:  244px;
  --sudut:      12px;
  --bayang:     0 1px 2px rgba(15, 23, 42, .04),
                0 4px 12px rgba(15, 23, 42, .05);

  --huruf: "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono: Consolas, "Cascadia Mono", ui-monospace, "Courier New", monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--huruf);
  font-size: 14px;
  line-height: 1.5;
}

/* --- rel navigasi ------------------------------------------------------- */

.rel {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--rel-lebar);
  display: flex;
  flex-direction: column;
  padding: 22px 0 0;
  background: var(--rel-latar);
  color: var(--rel-teks);
  overflow-y: auto;
}

.merek { display: flex; align-items: center; gap: 11px; padding: 16px 20px 22px; }

.merek .tanda {
  width: 38px; height: 38px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px;
  background: linear-gradient(140deg, #2563eb, #0ea5e9);
  color: #fff;
}

.merek b {
  display: block; color: #fff; font-size: 16px; font-weight: 700;
  letter-spacing: .01em; line-height: 1.2;
}
.merek span { display: block; font-size: 11.5px; color: #64748b; }

.rel h2 {
  margin: 15px 0 5px; padding: 0 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: #475569;
}

.rel a {
  display: flex; align-items: center; gap: 11px;
  margin: 1px 12px; padding: 9px 12px;
  border-radius: 9px;
  color: #cbd5e1; text-decoration: none; font-size: 13.5px;
}

.rel a svg { flex: 0 0 auto; opacity: .8; }
.rel a:hover { background: #1e293b; color: #fff; }

.rel a[aria-current="page"] { background: var(--biru); color: #fff; font-weight: 600; }
.rel a[aria-current="page"] svg { opacity: 1; }

.rel .kaki { margin-top: auto; padding: 14px 12px 0; }

.kartu-pengguna {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 10px; background: #1e293b;
}
.kartu-pengguna .awal {
  width: 32px; height: 32px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--biru); color: #fff; font-weight: 700; font-size: 13px;
}
.kartu-pengguna b { display: block; color: #fff; font-size: 13px; }
.kartu-pengguna span { display: block; font-size: 11px; color: #64748b; }

.baris-versi {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 14px; font-size: 11px; color: #475569;
}
.titik-hidup {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--hijau); margin-right: 6px;
}

/* --- kerangka ----------------------------------------------------------- */

.lembar { margin-left: var(--rel-lebar); padding: 0 26px 40px; }

.kepala {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 22px 0 18px;
}
.kepala h1 { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -.02em; }

.meta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--baja);
}
.meta svg { color: var(--redup); }

.pil {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600;
}
.pil--sukses { background: var(--hijau-muda); color: var(--hijau); }
.pil--gagal { background: var(--merah-muda); color: var(--merah); }

.kepala .aksi { margin-left: auto; display: flex; gap: 8px; }

/* --- tombol ------------------------------------------------------------- */

button, .tombol {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: 13px; font-weight: 600;
  padding: 9px 15px; border-radius: 9px;
  border: 1px solid var(--garis); background: var(--kertas);
  color: var(--tinta); cursor: pointer; text-decoration: none;
}
button:hover, .tombol:hover { background: #f8fafc; border-color: #cbd5e1; }

.tombol--utama { background: var(--biru); border-color: var(--biru); color: #fff; }
.tombol--utama:hover { background: #1d4ed8; border-color: #1d4ed8; }

/* --- kartu KPI ---------------------------------------------------------- */

.deret {
  display: grid; gap: 16px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}

.ukur {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: var(--sudut);
  box-shadow: var(--bayang);
}

.ukur .lambang {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: 11px;
}
.ukur .isi { flex: 1 1 auto; min-width: 0; }

.ukur .label {
  display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--baja);
}
.ukur b {
  display: block; margin: 2px 0 3px;
  font-size: 32px; font-weight: 700; line-height: 1.1;
  letter-spacing: -.03em; font-variant-numeric: tabular-nums;
}
.ukur .kaki-label { display: block; font-size: 12px; color: var(--redup); }

/* Batang proporsi menggantikan sparkline pada rujukan. Sparkline menuntut
   riwayat harian yang belum terkumpul, dan garis yang digambar tanpa data
   adalah karangan. Batang ini benar-benar terukur: bagian dari total. */
.proporsi {
  height: 5px; margin-top: 10px; border-radius: 3px;
  background: #eef2f7; overflow: hidden;
}
.proporsi span { display: block; height: 100%; border-radius: 3px; }

/* --- spanduk ------------------------------------------------------------ */

.spanduk {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; margin-bottom: 14px;
  border-radius: var(--sudut); font-size: 13.5px;
}
.spanduk .lambang { flex: 0 0 auto; display: grid; place-items: center; }
.spanduk .tumbuh { flex: 1 1 auto; }
.spanduk b { font-variant-numeric: tabular-nums; }

.spanduk--bahaya { background: var(--merah-muda); color: #7f1d1d; }
.spanduk--bahaya .lambang { color: var(--merah); }
.spanduk--bahaya b { color: var(--merah); font-size: 16px; }

.spanduk--info { background: var(--biru-muda); color: #1e3a8a; }
.spanduk--info .lambang { color: var(--biru); }

/* --- tab ---------------------------------------------------------------- */
/* Panel disembunyikan HANYA bila JavaScript menyala. Tanpa JavaScript semua
   panel tampil bertumpuk: halamannya kehilangan kenyamanan, bukan isinya. */

.js [data-panel] { display: none; }
.js [data-panel].aktif { display: block; }

.tab-bar {
  display: flex; gap: 4px; margin: 4px 0 16px;
  border-bottom: 1px solid var(--garis);
}
.tab-bar button {
  padding: 11px 20px; border: 0; border-radius: 0; background: transparent;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--baja); font-size: 13px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.tab-bar button:hover { background: transparent; color: var(--tinta); }
.tab-bar button.aktif { color: var(--biru); border-bottom-color: var(--biru); }

.tab-bar .jumlah {
  margin-left: 9px; padding: 2px 9px; border-radius: 20px;
  background: #eef2f7; color: var(--baja);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0;
}
.tab-bar button.aktif .jumlah { background: var(--biru); color: #fff; }

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

.susun { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr) 336px; }
@media (max-width: 1240px) { .susun { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--sudut); box-shadow: var(--bayang); margin-bottom: 16px;
}
.kepala-panel {
  display: flex; align-items: center; gap: 10px;
  padding: 15px 18px; border-bottom: 1px solid var(--garis);
}
.kepala-panel h2 { margin: 0; font-size: 15.5px; font-weight: 650; }
.kepala-panel .aksi { margin-left: auto; }
.badan { padding: 18px; }
.badan--rapat { padding: 6px 0; }

.lambang--biru   { background: var(--biru-muda);   color: var(--biru); }
.lambang--hijau  { background: var(--hijau-muda);  color: var(--hijau); }
.lambang--oranye { background: var(--oranye-muda); color: var(--oranye); }
.lambang--merah  { background: var(--merah-muda);  color: var(--merah); }
.lambang--abu    { background: #f1f5f9;            color: var(--baja); }

/* --- baris statistik di dalam panel ------------------------------------- */

.mini {
  display: flex; flex-wrap: wrap; gap: 14px 30px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--garis);
}
.mini > div { display: flex; align-items: center; gap: 10px; }
.mini .lambang { width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; }
.mini b { display: block; font-size: 21px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.mini span { display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--baja); }

/* --- daftar aktivitas --------------------------------------------------- */

.aktivitas { list-style: none; margin: 0; padding: 0; }
.aktivitas li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 18px; border-bottom: 1px solid #f1f5f9;
}
.aktivitas li:last-child { border-bottom: 0; }
.aktivitas .lambang { width: 26px; height: 26px; border-radius: 50%;
  flex: 0 0 auto; display: grid; place-items: center; }
.aktivitas .tumbuh { flex: 1 1 auto; min-width: 0; }
.aktivitas b { display: block; font-family: var(--mono); font-size: 12.5px; }
.aktivitas span { display: block; font-size: 12px; color: var(--baja); }
.aktivitas time { flex: 0 0 auto; font-family: var(--mono); font-size: 11.5px;
  color: var(--redup); }

/* --- donat -------------------------------------------------------------- */

.donat-baris { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.donat { flex: 0 0 auto; }
/* Cincin ditipiskan dan ujungnya dibulatkan: cincin tebal berujung siku
   membuat juring kecil tampak seperti balok, dan mata membaca luas, bukan
   panjang busur. Yang dibandingkan di sini besarnya bagian. */
.donat circle { fill: none; stroke-width: 13; }
.donat .alur { stroke: #eef2f7; }
.donat .lengkung { stroke-linecap: round; cursor: help;
  transition: stroke-width .12s; }
.donat .lengkung:hover { stroke-width: 16; }
.donat-angka { font-family: var(--mono); font-size: 27px; font-weight: 700;
  fill: var(--tinta); text-anchor: middle; }
.donat-satuan { font-size: 8.5px; font-weight: 700; letter-spacing: .12em;
  fill: var(--redup); text-anchor: middle; }

.kunci { list-style: none; margin: 0; padding: 0; flex: 1 1 148px; font-size: 12.5px; }
.kunci li { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.kunci i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.kunci .nama { flex: 1 1 auto; color: var(--baja); }
.kunci b { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kunci .persen { color: var(--redup); font-size: 11.5px; }

/* --- teks --------------------------------------------------------------- */

h3 { margin: 20px 0 3px; font-size: 14px; font-weight: 650; }
h3:first-child { margin-top: 0; }
h4 { margin: 16px 0 4px; font-size: 12.5px; font-weight: 600; color: var(--baja); }

.catatan { max-width: 82ch; margin: 3px 0 12px; font-size: 12.5px; color: var(--baja); }
.catatan strong { color: var(--tinta); }

/* --- tabel -------------------------------------------------------------- */

.gulung { overflow-x: auto; margin-bottom: 18px; }

/* Tabel lebar digulung DI DALAM panelnya. Sebelumnya ia meluber ke luar
   panel dan terpotong tepi layar tanpa cara apa pun untuk melihat sisanya:
   halaman induknya tidak ikut melebar, jadi tidak ada bilah gulung yang
   bisa dipakai. Kolom paling kanan hilang begitu saja, dan yang membacanya
   tidak punya tanda bahwa ada yang hilang.

   Bukan dengan mengecilkan huruf atau menyembunyikan kolom: kolom yang
   disembunyikan di layar sempit adalah kolom yang berhenti dipakai. */
.gulir-tabel {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  /* Bayangan tepi: muncul di sisi yang isinya masih berlanjut, hilang
     sendiri begitu digulir sampai ujung. Tanpa penanda ini tabel yang
     tergulung tampak sama persis dengan tabel yang terpotong -- dan orang
     tidak menggulir sesuatu yang ia kira sudah habis.

     background-attachment: local membuat dua lapis pertama ikut bergulir
     bersama isi (jadi tepinya menutup bayangan di ujung), sedangkan dua
     lapis bayangannya tetap menempel di bingkai. */
  background:
    linear-gradient(to right, var(--kertas) 40%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to left, var(--kertas) 40%, rgba(255,255,255,0)) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.14), rgba(15,23,42,0)) 0 0,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.14), rgba(15,23,42,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 32px 100%, 32px 100%, 13px 100%, 13px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Sudut bawah panel dulu dibulatkan lewat "panel > table:last-child".
   Sesudah dibungkus, tabelnya bukan anak langsung lagi -- tanpa aturan ini
   sudut panel jadi siku sendiri. */
.panel > .gulir-tabel:last-child { border-radius: 0 0 13px 13px; }
.panel > .gulir-tabel:last-child table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 13px;
}
.panel > .gulir-tabel:last-child table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 13px;
}
/* Bilah gulungnya dibuat tipis dan sewarna panel: ia penanda bahwa masih
   ada isi di kanan, bukan hiasan. */
.gulir-tabel::-webkit-scrollbar { height: 9px; }
.gulir-tabel::-webkit-scrollbar-track { background: #f1f5f9; }
.gulir-tabel::-webkit-scrollbar-thumb {
  background: #cbd5e1; border-radius: 99px;
}
.gulir-tabel::-webkit-scrollbar-thumb:hover { background: var(--baja); }


table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  padding: 9px 12px; background: #f8fafc;
  border-bottom: 1px solid var(--garis); text-align: left;
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--baja); white-space: nowrap;
}
td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: #f8fafc; }

.no, td.no, .angka { font-family: var(--mono); font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.angka { text-align: right; }
.redup { color: var(--redup); }
.bahaya { color: var(--merah); font-weight: 600; }

/* --- grafik ------------------------------------------------------------- */

.grafik { display: block; margin: 2px 0 6px; width: 100%; overflow: visible; }
.grafik-alur { fill: #eef2f7; }
.grafik-label { font-family: var(--huruf); font-size: 12px; fill: var(--tinta); }
.grafik-nilai { font-family: var(--mono); font-size: 12px; font-weight: 600;
  fill: var(--tinta); }
.grafik-samar { fill: var(--redup); font-weight: 400; }
.grafik-sumbu { font-family: var(--mono); font-size: 10px; fill: var(--redup); }
.grafik-garis { stroke: var(--garis); stroke-width: 1; }

.grafik rect[data-tip] {
  cursor: help; transform-origin: left center;
  animation: tumbuh .45s cubic-bezier(.2, .8, .25, 1) both;
}
.grafik rect[data-tip]:hover { filter: brightness(1.08); }

@keyframes tumbuh { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px;
  color: var(--baja); margin-bottom: 10px; }
.legenda i { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; }

.pil-persen { padding: 2px 8px; border-radius: 20px; background: var(--hijau-muda);
  color: var(--hijau); font-family: var(--mono); font-size: 11px; font-weight: 600; }
.pil-persen--rendah { background: var(--oranye-muda); color: #b45309; }

/* --- meteran ------------------------------------------------------------ */

.meter {
  position: relative; display: inline-block; width: 84px; height: 7px;
  background: #eef2f7; border-radius: 4px; vertical-align: -1px; margin-left: 8px;
}
/* Warna meteran diberikan dari luar lewat --warna, mengikuti kelompok umur
   barisnya. Kelas meter--lewat / meter--jauh dipertahankan sebagai cadangan
   untuk pemakaian lain yang belum mengirim --warna. */
.meter::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--isi, 0%); background: var(--warna, var(--biru));
  border-radius: 4px;
}
.meter--lewat::before { background: var(--oranye); }
.meter--jauh::before { background: var(--merah); }

/* Angka hari diwarnai mengikuti kelompoknya, jadi ia perlu sedikit lebih
   tebal agar warnanya terbaca sebagai penanda, bukan teks yang pudar. */
.umur-nilai { font-weight: 600; }
.meter[style*="--ambang"]::after {
  content: ""; position: absolute; top: -3px; bottom: -3px;
  left: var(--ambang, 100%); width: 1px; background: var(--tinta); opacity: .35;
}
.umur { white-space: nowrap; }

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

.borang {
  padding: 16px 18px; margin-bottom: 18px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: var(--sudut);
  box-shadow: var(--bayang);
}
.borang label {
  display: inline-block; margin: 0 14px 10px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--baja);
}
.borang label input, .borang label select {
  display: block; margin-top: 5px; padding: 8px 10px;
  border: 1px solid var(--garis); border-radius: 8px; background: #fff;
  font-family: var(--mono); font-size: 13px; color: var(--tinta);
  text-transform: none; letter-spacing: 0;
}
td input { width: 64px; padding: 5px 8px; border: 1px solid var(--garis);
  border-radius: 7px; font-family: var(--mono); font-size: 13px; }

.saring { display: inline-flex; margin-bottom: 16px; border: 1px solid var(--garis);
  border-radius: 9px; overflow: hidden; background: var(--kertas); }
.saring a { padding: 8px 15px; border-left: 1px solid var(--garis);
  color: var(--baja); text-decoration: none; font-size: 12.5px; font-weight: 600; }
.saring a:first-child { border-left: 0; }
.saring a:hover { background: #f8fafc; color: var(--tinta); }
.saring a[aria-current="true"] { background: var(--biru); color: #fff; }

a { color: var(--biru); }

/* --- pesan dan kaki halaman --------------------------------------------- */

.pesan { margin: 0 0 14px; padding: 13px 16px; border-radius: var(--sudut);
  background: var(--oranye-muda); color: #7c4a03; font-size: 13px; }
.pesan ul { margin: 0; padding-left: 18px; }
.pesan li + li { margin-top: 3px; }

.kaki-lembar {
  display: flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 14px 18px;
  border-radius: var(--sudut); background: #eef4fb;
  font-size: 12.5px; color: #3b5a80;
}
.kaki-lembar svg { color: var(--biru); flex: 0 0 auto; }

/* --- tooltip ------------------------------------------------------------ */
/* Gelembung tunggal ditempel ke <body>, bukan ke elemen pemicunya: tooltip
   CSS murni terpotong di dalam tabel yang bisa digeser mendatar, dan justru
   tabel itu yang paling butuh rincian. */

.tip {
  /* Di atas rel navigasi dan tombolnya: gelembung yang muncul di dekat tepi
     kiri tidak boleh tertutup menu. */
  position: fixed; z-index: 70; max-width: 360px; padding: 11px 13px;
  background: var(--rel-latar); color: #e2e8f0; border-radius: 10px;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .3);
  font-size: 12px; line-height: 1.5;
  pointer-events: none; opacity: 0; visibility: hidden;
}
.tip--tampil { opacity: 1; visibility: visible; }

[data-tip] { cursor: help; }
td[data-tip] { text-decoration: underline dotted var(--garis);
  text-underline-offset: 3px; }

/* --- aksesibilitas dan layar sempit ------------------------------------- */

:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, .grafik rect[data-tip] { transition: none !important; animation: none !important; }
}

@media (max-width: 980px) {
  .rel { position: static; width: auto; flex-direction: row; flex-wrap: wrap;
         align-items: center; padding: 12px; }
  .merek { padding: 0 16px 0 4px; }
  .rel h2, .rel .kaki, .baris-versi { display: none; }
  .rel a { margin: 2px; padding: 7px 11px; }
  .lembar { margin-left: 0; padding: 0 14px 30px; }
}

/* --- panel hero --------------------------------------------------------- */

.hero {
  display: flex; align-items: center; gap: 24px;
  padding: 26px 28px; margin-bottom: 18px;
  background: var(--kertas); border: 1px solid var(--garis);
  border-radius: var(--sudut); box-shadow: var(--bayang);
  overflow: hidden;
}
.hero-teks { flex: 1 1 auto; min-width: 0; }
.hero-teks h2 { margin: 0 0 10px; font-size: 22px; font-weight: 700;
  letter-spacing: -.02em; }
.hero-teks p { margin: 0 0 5px; font-size: 13.5px; }
.hero-gambar { flex: 0 0 auto; }
.ilustrasi { display: block; }
@media (max-width: 1100px) { .hero-gambar { display: none; } }

/* --- penyaring bergaya segmen ------------------------------------------- */

.segmen {
  display: inline-flex; margin-top: 16px;
  border: 1px solid var(--garis); border-radius: 10px;
  overflow: hidden; background: var(--kertas);
}
.segmen-tombol {
  padding: 11px 22px; border-left: 1px solid var(--garis);
  color: var(--baja); text-decoration: none;
  font-size: 13.5px; font-weight: 600;
}
.segmen-tombol:first-child { border-left: 0; }
.segmen-tombol:hover { background: #f8fafc; color: var(--tinta); }
.segmen-tombol.aktif { background: var(--biru); color: #fff; }

/* --- susunan kolom sempit + lebar --------------------------------------- */

.susun--kiri-sempit { grid-template-columns: 336px minmax(0, 1fr); }
@media (max-width: 1240px) {
  .susun--kiri-sempit { grid-template-columns: minmax(0, 1fr); }
}

.label-kolom {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--baja);
}

.baris-bahaya td { color: var(--merah); font-weight: 600; }

/* --- kaki tabel: cakupan dan penomoran halaman -------------------------- */

.kaki-tabel {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; border-top: 1px solid var(--garis); font-size: 12.5px;
}
.kaki-tabel .pindah { display: inline-flex; align-items: center; gap: 5px; }
.kaki-tabel .pindah:nth-of-type(1) { margin-left: auto; }

.halaman-tombol {
  min-width: 32px; padding: 6px 9px; text-align: center;
  border: 1px solid var(--garis); border-radius: 8px;
  background: var(--kertas); color: var(--baja);
  text-decoration: none; font-size: 12.5px; font-weight: 600;
}
.halaman-tombol:hover { background: #f8fafc; color: var(--tinta); }
.halaman-tombol.aktif { background: var(--biru); border-color: var(--biru); color: #fff; }

/* --- kartu KPI tanpa label atas ----------------------------------------- */

.ukur .isi > b:first-child { margin-top: 0; }
.ukur .kaki-label em { font-style: italic; }

/* --- tautan ke baris Google Sheet --------------------------------------- */

.ke-sheet {
  display: inline-flex; margin-left: 7px; vertical-align: 1px;
  color: var(--redup); opacity: 0;
}
tr:hover .ke-sheet, .ke-sheet:focus-visible { opacity: 1; }
.ke-sheet:hover { color: var(--biru); }

/* --- sparkline pada kartu KPI ------------------------------------------- */

.ukur .tren { display: block; margin-top: 8px; cursor: help; }
.ukur .belum-tren {
  display: block; margin-top: 9px; font-size: 11px; color: var(--redup);
}

/* --- sel yang membawa rincian ------------------------------------------- */
/* Garis putus-putus tipis: penanda bahwa ada yang bisa dilihat, tanpa
   membuat tabel jadi berisik. */

td.rincian {
  text-decoration: underline dotted #cbd5e1;
  text-underline-offset: 4px;
  cursor: help;
}
td.rincian:hover { text-decoration-color: var(--biru); }

/* Rincian satu baris memuat belasan tanggal; gelembungnya perlu lebih lega
   daripada tooltip biasa. */
.tip { max-width: 400px; }

/* --- kepala tabel: pemilih jumlah baris --------------------------------- */
/* Ditaruh DI ATAS tabel, terpisah dari penomoran halaman di bawah. Keduanya
   berdampingan membuat orang salah klik: "10" sebagai jumlah baris dan "10"
   sebagai nomor halaman terlihat sama persis. */

.kepala-tabel {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--garis); font-size: 12.5px;
}
.kepala-tabel .pindah { margin-left: auto; display: inline-flex;
  align-items: center; gap: 5px; }

/* --- penyaring tahap yang bisa diklik ----------------------------------- */

.saring-tahap { color: inherit; text-decoration: none; display: block; }
.saring-tahap:hover { color: var(--biru); text-decoration: underline; }

tr.baris-terpilih td { background: var(--biru-muda); font-weight: 600; }
tr.baris-terpilih .saring-tahap { color: var(--biru); }

.hapus-saring { margin-left: 10px; font-size: 12px; }

/* Baris tahap yang sedang dipakai menyaring. Warna teksnya TIDAK diubah --
   baris "belum masuk Daily Report" berwarna merah karena artinya, dan warna
   itu tidak boleh hilang hanya karena barisnya sedang dipilih. Penandanya
   batang biru di tepi kiri, bukan pewarnaan ulang. */

tr.baris-terpilih td { background: var(--biru-muda); font-weight: 600; }
tr.baris-terpilih td:first-child { box-shadow: inset 3px 0 0 var(--biru); }
tr.baris-terpilih .saring-tahap { color: inherit; }

/* Tautan yang sudah pernah diklik tidak berubah ungu: di tabel penyaring,
   warna harus berarti STATUS DATA, bukan riwayat kunjungan. */
.saring-tahap:visited, .ke-sheet:visited { color: inherit; }

/* Keterangan grafik dalam bentuk daftar pendek: satu baris satu arti, lebih
   cepat dibaca daripada satu paragraf panjang. */
.keterangan { list-style: none; margin: 0 0 12px; padding: 0; font-size: 12.5px;
  color: var(--baja); }
.keterangan li { margin-bottom: 3px; }
.keterangan b { font-weight: 700; }

/* Tombol tahap yang sedang dipakai menyaring. Diberi tanda centang dan
   latar biru muda -- warna teksnya sengaja dibiarkan, karena baris merah
   berarti "belum masuk Daily Report" dan arti itu tidak boleh hilang hanya
   karena barisnya sedang dipilih. */

.saring-tahap { color: inherit; text-decoration: none; display: block;
  padding: 2px 0; border-radius: 6px; }
.saring-tahap:hover { color: var(--biru); text-decoration: underline; }

.saring-tahap.terpilih::before {
  content: "✓ "; color: var(--biru); font-weight: 700;
}
tr.baris-terpilih td { background: var(--biru-muda); font-weight: 600; }
tr.baris-terpilih td:first-child { box-shadow: inset 3px 0 0 var(--biru); }

/* Perubahan terhadap potret kemarin. Hanya muncul kalau pembandingnya nyata:
   persentase dari satu titik data adalah karangan. */
.delta {
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--baja); cursor: help;
}
.delta.naik { color: var(--hijau); }
.delta.turun { color: var(--merah); }
.delta .redup { font-family: var(--huruf); font-weight: 400; margin-left: 4px; }

/* --- dua grafik berdampingan -------------------------------------------- */
/* Corong diberi ruang lebih besar karena labelnya panjang; donat cukup
   sempit. Bertumpuk ke bawah pada layar sempit, bukan dipaksa memuai. */

.dua-grafik {
  display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  padding-bottom: 4px; margin-bottom: 18px;
  border-bottom: 1px solid var(--garis);
}
.dua-grafik > section { min-width: 0; }
.dua-grafik h3 { margin-top: 0; }

@media (max-width: 1400px) {
  .dua-grafik { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}

.catatan--kecil {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--garis);
  font-size: 11.5px; color: var(--redup);
}

/* --- isian borang di mana pun ia berada --------------------------------- */
/* Sebelumnya gaya isian hanya berlaku di dalam .borang, sehingga borang yang
   diletakkan langsung di dalam panel tampil tanpa gaya sama sekali. */

.borang label, .badan label {
  display: inline-block; margin: 0 14px 12px 0;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--baja);
}

.borang label input, .borang label select,
.badan label input, .badan label select {
  display: block; width: 100%; margin-top: 5px; padding: 8px 10px;
  border: 1px solid var(--garis); border-radius: 8px; background: #fff;
  font-family: var(--mono); font-size: 13px; color: var(--tinta);
  text-transform: none; letter-spacing: 0;
}

.badan label input:focus, .badan label select:focus,
.borang label input:focus, .borang label select:focus {
  border-color: var(--biru); outline: none;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

/* Borang dengan banyak isian: disusun kisi, bukan berderet mengalir.
   Delapan isian yang mengalir bebas berakhir tidak sejajar dan sulit dibaca. */
.kisi-isian {
  display: grid; gap: 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.kisi-isian label { margin-right: 0; }
.kisi-isian .rentang { grid-column: 1 / -1; }

.badan label input[type="checkbox"] { width: auto; display: inline; }

/* --- laci rincian ------------------------------------------------------- */
/* Tooltip hilang saat kursor bergeser; laci bertahan sampai ditutup, sehingga
   isinya bisa dibaca tuntas dan disalin. */

.laci-latar {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15, 23, 42, .35);
  opacity: 0; visibility: hidden; transition: opacity .15s;
}
.laci-latar.terbuka { opacity: 1; visibility: visible; }

.laci {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61;
  width: min(420px, 92vw);
  display: flex; flex-direction: column;
  background: var(--kertas);
  border-left: 1px solid var(--garis);
  box-shadow: -8px 0 28px rgba(15, 23, 42, .12);
  transform: translateX(100%);
  transition: transform .18s cubic-bezier(.2, .8, .25, 1);
}
.laci.terbuka { transform: translateX(0); }

.laci-kepala {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--garis);
}
.laci-kepala h2 { margin: 0; font-size: 15.5px; font-weight: 650;
  line-height: 1.3; }
.laci-tajuk { min-width: 0; }
.laci-hitung { display: inline-block; margin-top: 5px; padding: 2px 9px;
  border-radius: 99px; background: var(--biru-muda); color: var(--biru);
  font-size: 11px; font-weight: 700; font-family: var(--mono); }

.laci-tutup {
  margin-left: auto; padding: 5px 11px; font-size: 14px; line-height: 1;
  align-self: flex-start;
}

/* Isi laci TIDAK lagi satu blok teks polos: teksnya ditulis dengan susunan
   tetap (pembuka, butir, penutup) dan laci.js menguraikannya kembali jadi
   tabel. Karena itu font monospace dipakai hanya pada kolom kode, tempat ia
   memang berguna -- kalimat penjelasnya kembali ke huruf biasa. */
.laci-isi {
  /* min-height:0 wajib. Tanpa itu item flex tidak mau menyusut di bawah tinggi
     isinya, laci jadi meluber dan tidak bisa digulir sampai tombol di bawah. */
  flex: 1 1 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent;
  padding: 16px 18px 22px;
  font-size: 13px; line-height: 1.6; word-break: break-word;
}
.laci-pembuka { margin: 0 0 10px; color: var(--baja); }
.laci-pembuka:last-of-type { margin-bottom: 14px; }

.laci-tabel { width: 100%; border-collapse: collapse; }
.laci-tabel tr { border-bottom: 1px solid #f1f5f9; }
.laci-tabel tr:last-child { border-bottom: 0; }
.laci-tabel td { padding: 8px 0; vertical-align: baseline; }
.laci-tabel tr:hover td { background: #f8fafc; }

.laci-no { width: 30px; padding-right: 8px !important; text-align: right;
  font-family: var(--mono); font-size: 11px; color: var(--redup); }
.laci-utama { font-family: var(--mono); font-size: 12.5px; font-weight: 600;
  white-space: nowrap; padding-right: 12px !important; }
.laci-kedua { font-family: var(--mono); font-size: 12.5px; color: var(--baja);
  width: 100%; }
.laci-catatan { display: block; margin-top: 2px; font-family: var(--huruf);
  font-size: 11.5px; color: var(--redup); }

.laci-penutup { margin: 14px 0 0; padding-top: 12px;
  border-top: 1px dashed var(--garis); font-size: 12px; color: var(--redup); }

@media (prefers-reduced-motion: reduce) {
  .laci, .laci-latar { transition: none; }
}

/* Penanda bahwa sel bisa diklik untuk membuka laci. */
td.rincian, .grafik rect[data-tip], .donat .lengkung, .meter[data-tip] {
  cursor: pointer;
}

/* Gelembung tooltip tidak boleh melebihi tinggi layar. Kalau isinya lebih
   panjang, potongannya diakhiri ajakan mengklik untuk membuka laci. */
.tip { max-height: 60vh; overflow: hidden; }

/* --- tiga grafik satu baris --------------------------------------------- */
/* Corong diberi ruang paling besar (labelnya paling panjang), donat paling
   sempit. Menyusut jadi dua kolom lalu satu kolom pada layar yang lebih
   kecil, bukan dipaksa berdesakan. */

/* Corong memakai baris sendiri: ia yang paling panjang labelnya dan paling
   banyak barisnya, dan mengapitnya dengan grafik pendek membuat kolom di
   sebelahnya tampak kosong. Dua panel biaya berbagi baris di bawahnya --
   keduanya membaca angka yang sama dari sudut berbeda, jadi memang enak
   dibandingkan berdampingan. */
.tiga-grafik {
  display: grid; gap: 22px 26px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  padding-bottom: 6px; margin-bottom: 18px;
  border-bottom: 1px solid var(--garis);
}
.tiga-grafik > section:first-child { grid-column: 1 / -1; }
.tiga-grafik > section { min-width: 0; }
.tiga-grafik h3 { margin-top: 0; }
.tiga-grafik .donat-baris { gap: 14px; }
.tiga-grafik .kunci { font-size: 12px; }

@media (max-width: 1100px) {
  .tiga-grafik { grid-template-columns: minmax(0, 1fr); }
  .tiga-grafik > section:first-child { grid-column: auto; }
}

.legenda--rapat { gap: 12px; font-size: 11.5px; }

/* Daftar panjang: tampilkan seluruhnya, tapi batasi tingginya supaya satu
   jenis biaya tidak mendorong sisa halaman jauh ke bawah. Kepala tabel
   menempel agar nama kolom tetap terbaca saat digulung. */
.gulung--tinggi { max-height: 380px; overflow-y: auto; }
.gulung--tinggi th {
  position: sticky; top: 0; z-index: 1;
  background: var(--kertas); box-shadow: inset 0 -1px 0 var(--garis);
}

/* Tabel yang kolomnya sedikit dan pendek-pendek. Dilebarkan penuh, kolom
   pertamanya melar sendirian sampai angka-angkanya terlempar jauh ke tepi
   kanan dan tabelnya terbaca sebagai dua kelompok yang tak berhubungan.
   Di sini tabel menyusut seukuran isinya lalu ditengahkan.

   Angka tetap rata kanan di dalam kolomnya: itu yang membuat satuan dan
   ribuan berbaris lurus ke bawah, dan kolomnya kini cukup sempit sehingga
   angkanya tetap dekat dengan judulnya. */
.tabel--tengah { width: auto; min-width: min(100%, 640px); margin-inline: auto; }
.tabel--tengah th, .tabel--tengah td { padding-inline: 18px; }
.tabel--tengah th.angka, .tabel--tengah th:not(:first-child) { text-align: right; }

/* --- panel corong tahapan ------------------------------------------------
   Mengikuti rujukan corongtahapanui.png. Dibangun dari grid, bukan satu SVG
   besar: kolomnya melar mengikuti lebar layar dan nama tahap yang panjang
   boleh membungkus tanpa merusak apa pun. */

.corong-panel { display: block; }

.corong-kepala { display: flex; gap: 13px; align-items: flex-start;
  margin-bottom: 18px; }
.corong-kepala h3 { margin: 0 0 2px; }
.corong-kepala .catatan { margin: 0; }

/* Lima kartu tahap, sejajar. Menyusut mengikuti lebar, tidak pernah
   menggulung mendatar. */
.tahap-kartu {
  display: grid; gap: 12px; margin-bottom: 22px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.tahap-kartu__satu {
  padding: 13px 15px; border: 1px solid var(--garis);
  border-radius: var(--sudut); background: var(--kertas);
}
.tahap-kartu__judul { display: flex; gap: 8px; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--baja); line-height: 1.3; }
.tahap-kartu__ikon { display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 8px; background: var(--latar); }
.tahap-kartu__angka { margin: 10px 0 9px; display: flex; align-items: baseline;
  gap: 5px; }
.tahap-kartu__angka b { font-size: 23px; letter-spacing: -.02em; }
.tahap-kartu__angka span { font-size: 13px; color: var(--redup);
  font-family: var(--mono); }
.tahap-kartu__kaki { display: flex; align-items: center; gap: 10px; }
.tahap-kartu__kaki .alur { flex: 1; height: 6px; border-radius: 99px;
  background: var(--garis); overflow: hidden; }
.tahap-kartu__kaki .alur i { display: block; height: 100%; border-radius: 99px; }
.tahap-kartu__kaki em { font-style: normal; font-size: 12.5px; font-weight: 700;
  font-family: var(--mono); }

.corong-isi { display: grid; gap: 26px;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.corong-isi h4, .corong-samping h4 { margin: 0 0 8px; font-size: 13.5px; }

/* Tangga bernomor. Kolom batang memakai sisa ruang, jadi sumbu di bawahnya
   harus duduk di kolom yang sama -- itu sebabnya sumbu ikut jadi anak grid,
   bukan elemen terpisah. */
.tangga {
  display: grid; align-items: center; row-gap: 12px; column-gap: 12px;
  grid-template-columns: auto minmax(96px, 168px) minmax(0, 1fr) auto auto;
  margin-top: 14px;
}
.tangga__no span { display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 99px; color: #fff; font-size: 11.5px; font-weight: 700;
  font-family: var(--mono); }
.tangga__nama { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.tangga__alur { position: relative; height: 22px; border-radius: 7px;
  background: #eef1f6; overflow: hidden; }
.tangga__isi, .tangga__bolong { position: absolute; top: 0; height: 100%; }
.tangga__isi { left: 0; border-radius: 7px 0 0 7px; }
.tangga__bolong { background: var(--oranye); }
.tangga__angka { display: flex; align-items: baseline; gap: 5px;
  font-family: var(--mono); white-space: nowrap; }
.tangga__angka b { font-size: 14px; }
.tangga__angka span { font-size: 12px; color: var(--redup); }
.tangga__pil span { display: inline-block; padding: 3px 10px; border-radius: 99px;
  background: var(--latar); font-size: 12px; font-weight: 700;
  font-family: var(--mono); }
.tangga__sumbu { grid-column: 3; display: flex; justify-content: space-between;
  font-size: 10.5px; color: var(--redup); font-family: var(--mono); }

.corong-samping { display: grid; gap: 16px; align-content: start; }
.corong-samping .kotak { padding: 15px 17px; border: 1px solid var(--garis);
  border-radius: var(--sudut); background: var(--kertas); }
.kunci--rapat { margin-top: 8px; }

@media (max-width: 1300px) {
  .corong-isi { grid-template-columns: minmax(0, 1fr); }
  .tahap-kartu { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* --- laci rincian berstruktur --------------------------------------------
   Mengikuti rujukan rincianui.png. Satu penyimpangan disengaja: rujukan
   memuat daftar "penyebab umum belum diisi". Sebab itu tidak ada di data
   mana pun, jadi slotnya diisi daftar kontainer yang memang diketahui --
   yang justru bisa langsung dikerjakan. */

.laci-subjudul { margin: 3px 0 0; font-size: 13px; font-weight: 600; }

.laci-spanduk {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--biru-muda); color: #1e40af; font-size: 12.5px;
  line-height: 1.55;
}

.laci-ukur {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px; margin-bottom: 18px; padding: 14px 10px;
  border: 1px solid var(--garis); border-radius: 10px; text-align: center;
}
.laci-ukur > div { min-width: 0; }
.laci-ukur b { display: block; font-size: 19px; font-family: var(--mono);
  letter-spacing: -.02em; white-space: nowrap; }
.laci-ukur b.panjang { font-size: 14.5px; }
.laci-ukur b.sangat-panjang { font-size: 12.5px; letter-spacing: -.03em; }
.laci-ukur span { display: block; margin-top: 3px; font-size: 10.5px;
  color: var(--redup); line-height: 1.3; }

.laci-bagian { margin-bottom: 18px; }
.laci-bagian h3 { margin: 0 0 7px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; }
.laci-bagian > p { margin: 0 0 8px; font-size: 12.5px; color: var(--baja);
  line-height: 1.6; }

.laci-butir { margin: 0; padding: 12px 14px; list-style: none;
  border: 1px solid var(--garis); border-radius: 10px; background: #fbfcfe; }
.laci-butir li { position: relative; padding-left: 17px; font-size: 12.5px;
  color: var(--baja); line-height: 1.55; }
.laci-butir li + li { margin-top: 8px; }
.laci-butir li::before { content: ""; position: absolute; left: 3px; top: 7px;
  width: 6px; height: 6px; border-radius: 99px; background: var(--redup); }

.laci-meter { height: 9px; border-radius: 99px; background: var(--garis);
  overflow: hidden; margin-bottom: 12px; }
.laci-meter i { display: block; height: 100%; border-radius: 99px; }

/* Satu baris = tiga kolom: titik warna, nama, nilai. Keterangan tambahan
   turun ke baris keduanya sendiri, rata kanan.

   Sebelumnya keterangan diperas ke kolom selebar 48px, sehingga
   "14 hari x Rp 200.000" pecah jadi tiga baris dan justru lebih sulit dibaca
   daripada kalau diberi barisnya sendiri. */
.laci-baris { margin: 0; padding: 0; list-style: none; }
.laci-baris li {
  display: grid; grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 2px 9px; align-items: baseline; padding: 6px 0; font-size: 12.5px;
}
.laci-baris li + li { border-top: 1px solid #f5f7fa; }
.laci-baris .nama { color: var(--baja); }
.laci-baris b { text-align: right; font-family: var(--mono);
  white-space: nowrap; }
.laci-baris .persen {
  grid-column: 2 / 4; text-align: right; color: var(--redup);
  font-family: var(--mono); font-size: 11px; white-space: nowrap;
}
.laci-titik { width: 9px; height: 9px; border-radius: 99px; flex: none; }

.laci-total { display: flex; align-items: center; gap: 10px; margin-top: 8px;
  padding-top: 10px; border-top: 1px solid var(--garis); font-size: 12.5px; }
.laci-total span { color: var(--baja); }
.laci-total b { margin-left: auto; font-family: var(--mono); font-size: 14px; }

.laci-kaki { margin: 18px 0 0; padding-top: 13px;
  border-top: 1px dashed var(--garis); font-size: 11.5px; color: var(--redup);
  line-height: 1.55; }

/* --- isi rincian: dipakai bersama gelembung tooltip dan laci --------------
   Kelas yang sama digambar oleh rincian.js di dua tempat. Warnanya diwarisi
   dari wadahnya -- gelembung berlatar gelap, laci berlatar kertas -- jadi
   yang diatur di sini hanya bentuk dan jarak, bukan warna mutlak. */

.rinci-judul {
  margin: 0 0 7px; padding-bottom: 7px; font-size: 12.5px; font-weight: 700;
  border-bottom: 1px solid currentColor; opacity: .97;
}
.tip .rinci-judul { border-bottom-color: rgba(226, 232, 240, .22); }
.laci-isi .rinci-judul { border-bottom-color: var(--garis); font-size: 13px; }

.rinci-teks { margin: 0 0 7px; opacity: .82; }
.rinci-teks:last-child { margin-bottom: 0; }
.laci-isi .rinci-teks { opacity: 1; color: var(--baja); font-size: 12.5px; }

.rinci-pasangan {
  display: grid; grid-template-columns: auto 1fr; gap: 3px 12px;
  margin: 0 0 8px; font-size: 11.5px;
}
.rinci-pasangan dt { opacity: .62; }
.rinci-pasangan dd { margin: 0; font-family: var(--mono); text-align: right; }
.laci-isi .rinci-pasangan { font-size: 12.5px; }
.laci-isi .rinci-pasangan dt { opacity: 1; color: var(--baja); }

.rinci-tabel { width: 100%; border-collapse: collapse; margin-top: 2px; }
.rinci-tabel td { padding: 4px 0; vertical-align: baseline; }
.rinci-tabel tr + tr td { border-top: 1px solid rgba(226, 232, 240, .12); }
.laci-isi .rinci-tabel td { padding: 8px 0; }
.laci-isi .rinci-tabel tr + tr td { border-top-color: #f1f5f9; }
.laci-isi .rinci-tabel tr:hover td { background: #f8fafc; }

.rinci-no {
  padding-right: 8px !important; text-align: right;
  font-family: var(--mono); font-size: 10.5px; opacity: .5;
}
.rinci-utama {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  white-space: nowrap; padding-right: 11px !important;
}
.rinci-kedua {
  width: 100%; font-family: var(--mono); font-size: 11.5px; opacity: .74;
}
.rinci-catatan {
  display: block; margin-top: 1px; font-family: var(--huruf);
  font-size: 10.5px; opacity: .68;
}
.laci-isi .rinci-no { font-size: 11px; color: var(--redup); opacity: 1; }
.laci-isi .rinci-utama { font-size: 12.5px; }
.laci-isi .rinci-kedua { font-size: 12.5px; color: var(--baja); opacity: 1; }
.laci-isi .rinci-catatan { font-size: 11.5px; color: var(--redup); opacity: 1; }

.rinci-penutup {
  margin: 7px 0 0; padding-top: 6px; font-size: 11px; opacity: .62;
  border-top: 1px dashed rgba(226, 232, 240, .18);
}
.laci-isi .rinci-penutup {
  margin-top: 13px; padding-top: 11px; font-size: 12px;
  border-top-color: var(--garis); color: var(--redup); opacity: 1;
}

/* --- panel per jenis biaya ------------------------------------------------
   Tabel saja tidak menjawab "seberapa parah": 43 baris terlihat sama
   gawatnya dengan 43 baris yang lain. Angka ringkas dan sebaran umur di atas
   tabel menjawabnya sebelum orang perlu membaca satu baris pun. */

.panel--biaya { border-top: 3px solid var(--aksen); }
.panel--biaya .kepala-panel .lambang { display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 8px; background: var(--latar); }
.pil--aksen { color: var(--aksen); border-color: currentColor; }

.angka-jenis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px; margin-bottom: 14px; padding: 12px 8px;
  border: 1px solid var(--garis); border-radius: 10px;
  background: #fbfcfe; text-align: center;
}
.angka-jenis > div { min-width: 0; }
.angka-jenis b { display: block; font-size: 19px; font-family: var(--mono);
  letter-spacing: -.02em; }
.angka-jenis span { display: block; margin-top: 2px; font-size: 10.5px;
  color: var(--redup); line-height: 1.3; }

/* Satu batang utuh, dipecah menurut rentang umur. Panjang tiap potongan
   sebanding dengan jumlahnya, jadi "menumpuk di mana" terbaca sekilas. */
.sebaran-umur { display: flex; height: 10px; border-radius: 99px;
  overflow: hidden; margin-bottom: 9px; cursor: pointer; }
.sebaran-umur span { display: block; }

/* Kolom kanan: angka yang sebelumnya ditempel ke kolom tengah dan memaksa
   barisnya pecah dua. Dengan kolom sendiri, nomor urut, kode, dan angka
   berbaris lurus ke bawah. */
.rinci-kanan {
  padding-left: 12px !important; text-align: right; white-space: nowrap;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
}
.laci-isi .rinci-kanan { font-size: 12.5px; }

/* Nomor urut tetap sebaris dengan kode di sebelahnya, bukan melayang di
   tengah bila barisnya kebetulan dua baris.

   nowrap-nya yang penting: tanpa itu kolom selebar 30px memecah "23" jadi
   "2" dan "3" di dua baris begitu daftarnya lewat sepuluh butir. Lebarnya
   dipatok cukup untuk tiga angka, karena daftar di sini rutin puluhan baris. */
.rinci-no, .rinci-utama, .rinci-kanan { vertical-align: top; }
.rinci-no { width: 34px; min-width: 34px; white-space: nowrap; }
.laci-isi .rinci-no { width: 38px; min-width: 38px; }

/* Pemicu laci pada baris yang sudah punya tautan sendiri. Tautan tahap
   menyaring tabel; rincian membuka lacinya. Keduanya perlu ada, jadi
   masing-masing dapat sasaran klik sendiri daripada satu klik dipaksa
   melakukan dua hal. */
.buka-laci {
  margin-left: 8px; padding: 1px 8px; border-radius: 99px;
  border: 1px solid var(--garis); background: var(--kertas);
  font-size: 10.5px; font-weight: 600; color: var(--baja); cursor: pointer;
  white-space: nowrap;
}
.buka-laci:hover { border-color: var(--biru); color: var(--biru); }

/* Tabel tarif yang bisa disunting langsung. Baris "(semua)" adalah tarif
   cadangan, bukan tarif salah satu pelayaran -- diberi latar berbeda supaya
   tidak terbaca sebagai baris biasa yang tertinggal namanya. */
.tabel-tarif input { width: 76px; }
.tabel-tarif .baris-dasar td { background: var(--oranye-muda); }
.tabel-tarif .baris-dasar strong { color: #92400e; }

.kotak-cari {
  min-width: 230px; padding: 6px 11px; border: 1px solid var(--garis);
  border-radius: 9px; background: var(--kertas); font-size: 12.5px;
  font-family: var(--huruf); color: var(--tinta);
}
.kotak-cari:focus { border-color: var(--biru); outline: none; }

/* Logo perusahaan di kepala rel navigasi, tanpa alas.

   Berkasnya sudah tembus pandang. Diperiksa dulu sebelum alas putihnya
   dilepas: dari 87.790 piksel bergambar, hanya 153 (0,2%) yang cukup gelap
   untuk lenyap ke latar navy -- tulisan kecil di lambang PPI. Sisanya toska
   dan oranye, yang justru lebih terbaca tanpa kotak putih di sekelilingnya. */
.logo {
  display: block; margin: 2px 14px 0; padding: 2px 2px 14px; line-height: 0;
  border-bottom: 1px solid rgba(148, 163, 184, .22);
}
/* Lebarnya dipatok, bukan 100%: rel navigasi selebar 244px membuat logo
   selebar penuh mendominasi kepala halaman, padahal ia penanda, bukan judul.
   Nama sistem di bawahnya yang harus lebih dulu terbaca. */
.logo img { width: 124px; max-width: 100%; height: auto; }
.logo:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }

/* --- halaman Struktur & Sistem -------------------------------------------- */

/* Alur data digambar sebagai rantai kotak, bukan gambar: ia harus tetap
   terbaca saat layar sempit, dan isinya ikut berubah kalau sistemnya
   berubah. */
.alur { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  margin-bottom: 16px; }
.alur__kotak {
  flex: 1 1 168px; min-width: 0; padding: 13px 14px;
  border: 1px solid var(--garis); border-radius: 10px; background: #fbfcfe;
}
.alur__kotak b { display: block; font-size: 13px; margin-bottom: 4px; }
.alur__kotak span { display: block; font-size: 11.5px; color: var(--baja);
  line-height: 1.45; }
.alur__kotak em { display: block; margin-top: 7px; font-style: normal;
  font-size: 10.5px; color: var(--redup); }
.alur__panah { display: grid; place-items: center; flex: 0 0 auto;
  color: var(--redup); padding: 0 2px; }
.alur__panah span { display: block; font-size: 9.5px; margin-top: 3px; }

.kisi-aturan { display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.kisi-aturan section { padding: 13px 15px; border: 1px solid var(--garis);
  border-radius: 10px; background: #fbfcfe; }
.kisi-aturan h3 { margin: 0 0 6px; font-size: 12.5px; }
.kisi-aturan p { margin: 0; font-size: 12.5px; color: var(--baja);
  line-height: 1.6; }

.lambang--ungu { background: var(--ungu-muda); color: var(--ungu); }

/* Bagan alur pada halaman Struktur & Sistem. */
.bagan { max-width: 900px; margin: 0 auto 4px; display: block; }
.bagan-kotak { fill: #fbfcfe; stroke-width: 1.5; }
.bagan-kotak--manusia { stroke: var(--oranye); fill: var(--oranye-muda); }
.bagan-kotak--awas { stroke: var(--merah); fill: var(--merah-muda); }
.bagan-judul { font: 700 13.5px var(--huruf); }
.bagan-teks { font: 11.5px var(--huruf); fill: var(--baja); }
.bagan-label { font: 10.5px var(--huruf); fill: var(--redup); }
.bagan-garis { stroke: #94a3b8; stroke-width: 1.5; fill: none; }

/* --- sinyal denyut untuk kondisi merah -----------------------------------
   Titik kecil yang berdenyut di sebelah angka genting. Dipakai HANYA pada
   ember teratas dan baris yang lewat 30 hari; kalau dipasang di mana-mana,
   ia berhenti berarti "prioritas" dan berubah jadi hiasan.

   Gerakan dimatikan bagi yang memilih mengurangi animasi -- titiknya tetap
   ada dan tetap merah, jadi artinya tidak hilang, hanya diamnya. */
@keyframes denyut {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.72); }
}

.denyut {
  display: inline-block; width: 9px; height: 9px; flex: none;
  border-radius: 99px; background: var(--merah);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .16);
  animation: denyut 1.15s ease-in-out infinite;
  vertical-align: middle; margin-right: 6px;
}
.denyut--pekat { background: var(--merah-pekat);
  box-shadow: 0 0 0 3px rgba(127, 29, 29, .18); }

/* Baris tabel yang sudah lewat 30 hari: titiknya menempel pada angka umur,
   bukan pada seluruh barisnya, supaya yang ditandai jelas apanya. */
td.umur .denyut { margin-right: 5px; }

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

/* --- rel navigasi bisa disembunyikan --------------------------------------
   Tombolnya dibuat oleh rel.js, jadi ia hanya ada bila skripnya jalan --
   tombol mati yang tetap terlihat lebih membingungkan daripada tombol yang
   memang tidak ada. Tanpa skrip, halaman tampil seperti biasa. */

.rel, .lembar { transition: transform .18s ease, margin-left .18s ease; }

body.rel-tutup .rel { transform: translateX(calc(-1 * var(--rel-lebar))); }
body.rel-tutup .lembar { margin-left: 0; }

.rel-tombol {
  position: fixed; top: 14px; left: calc(var(--rel-lebar) - 14px); z-index: 60;
  width: 28px; height: 28px; padding: 0; line-height: 1;
  display: grid; place-items: center;
  border: 1px solid var(--garis); border-radius: 99px;
  background: var(--kertas); color: var(--baja);
  font-size: 16px; cursor: pointer;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .12);
  transition: left .18s ease;
}
.rel-tombol:hover { color: var(--biru); border-color: var(--biru); }
body.rel-tutup .rel-tombol { left: 12px; }

@media (prefers-reduced-motion: reduce) {
  .rel, .lembar, .rel-tombol { transition: none; }
}

/* Pita galat JavaScript. Galat yang tidak terlihat hanya menyisakan gejala
   "fiturnya tidak jalan", tanpa cara memeriksanya dari jarak jauh. */
.galat-pita {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px; background: var(--merah); color: #fff;
  font-size: 13px; font-family: var(--huruf);
  box-shadow: 0 -2px 10px rgba(15, 23, 42, .25);
}
.galat-pita a { color: #fff; font-weight: 700; }
.galat-pita button {
  margin-left: auto; padding: 2px 9px; border: 1px solid rgba(255,255,255,.5);
  background: transparent; color: #fff; border-radius: 7px; cursor: pointer;
}
.tanda--gagal { background: var(--merah-muda); color: var(--merah); }

/* Alamat jaringan di halaman Struktur & Sistem. Dibuat besar dan monospace
   karena gunanya memang untuk dibacakan atau disalin ke rekan kerja. */
.alamat-jaringan {
  display: grid; gap: 12px; margin: 14px 0;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.alamat-jaringan > div {
  padding: 14px 16px; border: 1px solid var(--garis); border-radius: 10px;
  background: #fbfcfe;
}
.alamat-jaringan .label { display: block; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; color: var(--redup); }
.alamat-jaringan b { display: block; margin-top: 6px; font-size: 17px;
  word-break: break-all; }

/* --- panel kemajuan penarikan ---------------------------------------------
   Muncul di sudut kanan bawah selama penarikan berjalan. Ditempel ke layar,
   bukan disisipkan ke halaman: penarikan bisa dipicu dari halaman mana pun,
   dan panel yang mendorong isi halaman akan menggeser apa yang sedang
   dibaca orang. */
.tarik-panel {
  position: fixed; right: 20px; bottom: 20px; z-index: 75;
  width: 340px; max-width: calc(100vw - 40px);
  padding: 14px 16px; background: var(--kertas);
  border: 1px solid var(--garis); border-radius: 12px;
  box-shadow: 0 8px 28px rgba(15, 23, 42, .18);
  font-size: 12.5px;
}
.tarik-tajuk { font-weight: 700; font-size: 13px; margin-bottom: 10px; }

.tarik-langkah { margin: 0; padding: 0; list-style: none; }
.tarik-langkah li {
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px; align-items: baseline; padding: 4px 0; color: var(--baja);
}
.tarik-langkah .nama { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.tarik-langkah b { font-family: var(--mono); font-size: 11px;
  color: var(--redup); white-space: nowrap; }
.tarik-langkah i { font-style: normal; }

.tarik-menunggu i { color: var(--garis); }
.tarik-berjalan { color: var(--tinta); font-weight: 600; }
.tarik-berjalan i { color: var(--biru); }
.tarik-selesai i { color: var(--hijau); }
.tarik-gagal, .tarik-gagal i { color: var(--merah); }
.tarik-batal i { color: var(--redup); }
/* ======================================================================
   Panel dirapikan menyeluruh
   ----------------------------------------------------------------------
   Ditulis di akhir berkas supaya menimpa aturan panel di atasnya tanpa
   perlu mengubahnya -- aturan lama tetap utuh sebagai rujukan.
   ====================================================================== */

.panel {
  /* Dua lapis bayangan: satu sangat dekat untuk menegaskan tepi, satu lebih
     jauh dan sangat samar untuk memberi kedalaman. Satu lapis saja membuat
     panel tampak seperti stiker yang ditempel. */
  border-radius: 13px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04),
              0 6px 18px -8px rgba(15, 23, 42, .10);
}
/* Sudut dilengkungkan pada kepala dan kakinya sendiri, BUKAN dengan
   overflow:hidden pada panel. Panel memuat hal-hal yang sengaja keluar dari
   kotaknya -- gelembung "tersalin" di atas kode, misalnya -- dan
   overflow:hidden akan memotongnya tanpa jejak yang mudah dilacak. */
.kepala-panel:first-child { border-radius: 13px 13px 0 0; }
.kaki-panel:last-child { border-radius: 0 0 13px 13px; }
.panel > table:last-child tbody tr:last-child td:first-child {
  border-bottom-left-radius: 13px;
}
.panel > table:last-child tbody tr:last-child td:last-child {
  border-bottom-right-radius: 13px;
}

.kepala-panel {
  /* Gradasi sangat tipis dari atas ke bawah. Yang dicari bukan warnanya,
     melainkan pemisahan antara judul bagian dan isinya. */
  padding: 14px 18px;
  background: linear-gradient(180deg, #fbfcfe, #f6f9fd);
  border-bottom: 1px solid var(--garis);
}
.kepala-panel h2 {
  font-size: 14.5px; font-weight: 680; letter-spacing: -.012em;
  color: var(--tinta);
}
.kepala-panel .aksi {
  display: flex; align-items: center; gap: 8px; margin-left: auto;
}

/* Kepala tabel duduk tepat di bawah kepala panel, jadi warnanya dibedakan
   supaya tidak menyambung jadi satu blok abu-abu setinggi dua baris. */
thead th {
  background: var(--kertas);
  border-bottom: 1.5px solid var(--garis);
  font-size: 10px; letter-spacing: .1em; color: var(--redup);
}
tbody tr { transition: background-color .12s ease; }
tbody tr:hover td { background: #f7fafd; }

/* Keterangan di kaki panel: diberi latar dan garis atas supaya terbaca
   sebagai catatan, bukan sebagai baris data terakhir yang kehilangan
   kotaknya. */
.kaki-panel {
  margin: 0; padding: 12px 18px;
  border-top: 1px solid var(--garis);
  background: #fbfcfe;
  font-size: 11.5px; line-height: 1.65; color: var(--baja);
}
.kaki-panel b, .kaki-panel strong { color: var(--tinta); font-weight: 650; }

/* Catatan pembuka: garis di tepi kiri, bukan kotak penuh -- kotak abu-abu
   sebesar paragraf menarik perhatian melebihi haknya. */
.catatan {
  padding-left: 13px; border-left: 2px solid var(--garis);
  font-size: 12.5px; line-height: 1.65; color: var(--baja);
}
.catatan b, .catatan strong { color: var(--tinta); font-weight: 650; }

/* Keadaan kosong. Yang penting di sini bukan hiasannya, melainkan bahwa
   kosong TIDAK terbaca sebagai rusak: diberi wadah bergaris putus-putus,
   bentuk yang lazim berarti "memang belum ada isinya". */
.pos-kosong, .kosong {
  margin: 0; padding: 26px 18px;
  border: 1px dashed var(--garis); border-radius: 10px;
  background: #fcfdfe;
  font-size: 12.5px; line-height: 1.6; color: var(--redup);
  text-align: center;
}

/* Rel warna di tepi kiri panel, untuk menandai panel yang sifatnya beda.
   Dipakai seperlunya -- kalau semua panel punya rel, relnya tidak lagi
   memberi tahu apa pun. */
.panel--biru   { border-left: 3px solid var(--biru); }
.panel--hijau  { border-left: 3px solid var(--hijau); }
.panel--oranye { border-left: 3px solid var(--oranye); }
.panel--merah  { border-left: 3px solid var(--merah); }
.panel--ungu   { border-left: 3px solid var(--ungu); }

/* Lencana ikon di kepala panel, dipakai di beberapa halaman. Ditaruh di sini
   supaya bentuknya sama di semua halaman, tidak ditulis ulang berbeda-beda. */
.tanda-panel {
  display: inline-grid; place-items: center; width: 26px; height: 26px;
  margin-right: 10px; border-radius: 8px; flex: 0 0 auto;
}
.tanda-panel.biru   { background: var(--biru-muda);   color: var(--biru); }
.tanda-panel.ungu   { background: var(--ungu-muda);   color: var(--ungu); }
.tanda-panel.hijau  { background: var(--hijau-muda);  color: var(--hijau); }
.tanda-panel.oranye { background: var(--oranye-muda); color: #b45309; }
.tanda-panel.merah  { background: var(--merah-muda);  color: var(--merah); }
.kepala-panel h2 { display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  tbody tr { transition: none; }
}
/* ======================================================================
   Panel diredupkan
   ----------------------------------------------------------------------
   Latar halaman hampir seputih panelnya, sehingga panel tidak terbaca
   sebagai lembar tersendiri -- seluruh layar jadi satu bidang putih besar
   yang menyilaukan dan tanpa susunan.

   Arahnya disamakan dengan palet panduan alur yang sudah dipakai: latar
   jelas lebih dalam, permukaan panel putih kebiruan yang lembut, garis
   sedikit lebih tegas. Kontras teks terhadap permukaan justru NAIK, bukan
   turun -- yang diredupkan latarnya, bukan tulisannya.
   ====================================================================== */
:root {
  --latar:  #dfe7f3;   /* jauh lebih dalam: panel jadi punya tepi */
  --kertas: #f9fbfe;   /* putih kebiruan, bukan putih murni */
  --garis:  #ccd7e8;   /* cukup tegas untuk terlihat di atas latar baru */
}

body { background: var(--latar); }

/* ======================================================================
   Penyegaran yang tidak menyentak
   ----------------------------------------------------------------------
   Papan memuat ulang dirinya tiap menit. Muat ulang biasa mengedipkan
   layar putih lalu memasang halaman baru sekaligus -- di layar yang
   ditonton seharian, kedipan tiap menit itu menarik mata setiap kali,
   padahal sembilan dari sepuluh kali tidak ada yang berubah.

   Transisi bawaan peramban menyilangkan halaman lama ke yang baru. Yang
   berubah tetap terlihat berubah; yang tidak berubah tidak berkedip.
   Peramban yang belum mengenal aturan ini mengabaikannya dan berperilaku
   persis seperti sebelumnya -- tidak ada yang rusak.
   ====================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root){animation-duration:.26s}
/* Yang meminta gerak dikurangi tidak diberi silangan sama sekali. */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root),
  ::view-transition-new(root){animation:none}
}
/* Batang gulir yang muncul-hilang menggeser seluruh lebar halaman satu
   sentakan tiap kali tinggi isinya berubah. */
html{scrollbar-gutter:stable}

.panel {
  border-color: var(--garis);
  box-shadow: 0 1px 2px rgba(23, 43, 77, .05),
              0 8px 20px -10px rgba(23, 43, 77, .16);
}

.kepala-panel {
  /* Pita kepala dibuat lebih berwarna daripada badannya, supaya judul
     bagian terbaca sebagai judul tanpa perlu garis tebal. */
  background: linear-gradient(180deg, #f0f5fc, #e8eff9);
  border-bottom-color: var(--garis);
}

thead th {
  background: #f3f7fc;
  border-bottom: 1.5px solid var(--garis);
  color: #5b6b85;
}
td { border-bottom-color: #e6ecf6; }
tbody tr:hover td { background: #eef4fc; }

.kaki-panel { background: #f2f6fc; border-top-color: var(--garis); }
.catatan { border-left-color: var(--garis); }
.pos-kosong, .kosong { background: #f4f8fd; border-color: var(--garis); }

/* Kotak isian ikut disesuaikan: putih murni di atas permukaan kebiruan
   terbaca sebagai lubang, bukan sebagai kolom. */
input, select, textarea { background: #ffffff; border-color: var(--garis); }

/* --- kartu angka -----------------------------------------------------
   Sebelumnya kotak putih polos berjajar, seluruhnya seragam, sehingga yang
   genting dan yang biasa saja tampak sama penting. Sekarang tiap kartu
   membawa warna keadaannya sendiri: rel tipis di tepi kiri, dan latar yang
   sangat samar. Warnanya diambil dari lambangnya, jadi tidak ada keputusan
   baru yang perlu diingat. */
.kisi-ukur .ukur{position:relative;overflow:hidden;padding:16px 18px 16px 20px;
  border-radius:13px;transition:box-shadow .16s ease,transform .16s ease}
.kisi-ukur .ukur::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--garis)}
.kisi-ukur .ukur:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 10px 22px -12px rgba(15,23,42,.22)}

.ukur--biru::before{background:var(--biru)}
.ukur--biru{background:linear-gradient(110deg,var(--biru-muda) 0%,var(--kertas) 46%)}
.ukur--oranye::before{background:var(--oranye)}
.ukur--oranye{background:linear-gradient(110deg,var(--oranye-muda) 0%,var(--kertas) 46%)}
.ukur--merah::before{background:var(--merah)}
.ukur--merah{background:linear-gradient(110deg,var(--merah-muda) 0%,var(--kertas) 46%)}
.ukur--ungu::before{background:var(--ungu)}
.ukur--ungu{background:linear-gradient(110deg,var(--ungu-muda) 0%,var(--kertas) 46%)}
.ukur--hijau::before{background:var(--hijau)}
.ukur--hijau{background:linear-gradient(110deg,var(--hijau-muda) 0%,var(--kertas) 46%)}
.ukur--abu::before{background:var(--redup)}

/* Angka yang genting dibuat sewarna relnya. Yang aman tetap hitam biasa --
   kalau semua angka berwarna, tidak ada yang menonjol. */
.ukur--merah .isi > b{color:var(--merah)}
.ukur--oranye .isi > b{color:#b45309}

.kisi-ukur .ukur .lambang{width:40px;height:40px;border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
.kisi-ukur .ukur .label{letter-spacing:.09em}
@media (prefers-reduced-motion: reduce){
  .kisi-ukur .ukur{transition:none}
  .kisi-ukur .ukur:hover{transform:none}
}


/* ======================================================================
   Kaki halaman dan tombol dalam tabel
   ----------------------------------------------------------------------
   Ditulis sekali di sini supaya seluruh halaman memakai bentuk yang sama.
   Sebelumnya hanya papan yang punya, sehingga tombol yang sama persis
   fungsinya terlihat berbeda dari halaman ke halaman -- dan yang berbeda
   bentuknya selalu disangka berbeda gunanya.
   ====================================================================== */
/* Kaki halaman. Sebelumnya tiga potong teks abu-abu berderet tanpa bentuk --
   tombolnya tidak terbaca sebagai tombol, dan nomor halamannya hilang di
   antara keduanya. */
.kaki-halaman{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin:2px 0 0;padding:11px 16px;border-top:1px solid var(--garis);
  background:linear-gradient(180deg,#fbfcfe,#f4f8fd);
  border-radius:0 0 13px 13px}
.kaki-halaman .hal-info{font-size:11.5px;color:var(--baja)}
.hal-nav{display:flex;align-items:center;gap:8px}
.hal-tombol{display:inline-flex;align-items:center;gap:6px;padding:6px 13px;
  border:1px solid var(--garis);border-radius:8px;background:var(--kertas);
  font:inherit;font-size:11.5px;font-weight:650;color:var(--biru);cursor:pointer;
  transition:.14s ease}
.hal-tombol:hover:not([disabled]){background:var(--biru);border-color:var(--biru);
  color:#fff;box-shadow:0 2px 8px -2px rgba(37,99,235,.5)}
.hal-tombol[disabled]{color:var(--redup);background:#f3f6fa;cursor:default;
  border-color:#e8edf4}
.hal-nomor{padding:5px 12px;border-radius:99px;background:var(--biru-muda);
  color:var(--biru);font-family:var(--mono);font-size:11px;font-weight:700;
  white-space:nowrap}

/* Tombol di dalam baris tabel: buka rincian, lihat transaksi, dan sejenisnya. */
.tombol-rinci, .tombol-lihat {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border: 1px solid var(--garis); border-radius: 8px;
  background: var(--kertas); font-size: 11.5px; font-weight: 650;
  color: var(--biru); text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: .14s ease;
}
.tombol-rinci:hover, .tombol-lihat:hover {
  background: var(--biru); border-color: var(--biru); color: #fff;
  box-shadow: 0 2px 8px -2px rgba(37, 99, 235, .5);
}
tr:hover .tombol-rinci, tr:hover .tombol-lihat { border-color: #bfd4f5; }

/* Tombol utama, dipakai di kepala panel dan borang. */
.tombol--utama {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 15px; border: 0; border-radius: 9px;
  background: var(--biru); color: #fff;
  font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer;
  transition: filter .14s ease, box-shadow .14s ease;
}
.tombol--utama:hover {
  filter: brightness(1.06);
  box-shadow: 0 3px 12px -3px rgba(37, 99, 235, .6);
}

/* ======================================================================
   Tooltip
   ----------------------------------------------------------------------
   Ditulis di gaya.css supaya berlaku di seluruh halaman. Yang bawaan
   peramban baru muncul setelah satu detik lebih, tidak bisa diatur
   lebarnya, dan teks panjang ditampilkannya buruk -- praktisnya tidak
   terbaca.
   ====================================================================== */
/* Tooltip sendiri, bukan title bawaan peramban: yang bawaan baru muncul
   setelah satu detik lebih, tidak bisa diatur lebarnya, dan teks panjang
   berbaris ditampilkannya buruk -- praktisnya tidak terbaca. */
#tip{position:fixed;z-index:200;max-width:330px;padding:11px 13px;
  border-radius:10px;background:#0f172a;color:#e2e8f0;font-size:11.5px;
  line-height:1.6;box-shadow:0 10px 30px rgba(15,23,42,.35);
  pointer-events:none;opacity:0;transform:translateY(3px);
  transition:opacity .12s ease,transform .12s ease}
#tip.tampil{opacity:1;transform:translateY(0)}
/* Tooltip yang isinya lebih tinggi daripada ruang layar dipotong lalu
   digulir. Dipotong masih bisa dibaca; tumpah keluar layar tidak. Selama
   bisa digulir ia HARUS menerima tetikus -- kalau tidak, penggulirnya ada
   tetapi tidak bisa disentuh. */
#tip{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  scrollbar-color:#475569 transparent}
#tip.tip--gulir{pointer-events:auto}
#tip::-webkit-scrollbar{width:8px}
#tip::-webkit-scrollbar-thumb{background:#475569;border-radius:99px;
  border:2px solid #0f172a}
#tip b{display:block;margin-bottom:6px;color:#fff;font-size:12.5px}
#tip p{margin:0 0 7px}
#tip p:last-child{margin-bottom:0;color:#94a3b8}
#tip .awas{color:#fca5a5;font-weight:600}
[data-info]{cursor:help}
/* Spasi setelah kurung kurawal itu WAJIB. Kurawal-buka yang langsung
   diikuti pagar adalah pembuka komentar Jinja, dan tanpa spasi seluruh
   templat gagal dikompilasi. */
@media (prefers-reduced-motion: reduce){ #tip{transition:none} }


/* --- kartu ukuran ringkas (Eskalasi Aktif, Monitoring Tagihan) ---------
   Papan memakai .kisi-ukur dengan markup bertingkat: lambang, .isi, .label,
   .kaki-label. Halaman lain tidak punya lambang dan isinya cuma tiga baris,
   jadi markup-nya sengaja lebih pendek: span, b, i.

   Tanpa aturan di bawah ini ketiganya jatuh ke .ukur yang display:flex, dan
   label, angka, serta keterangannya berjejer MENYAMPING dalam satu baris --
   itu sebabnya kartunya terbaca seperti teks yang tumpah. */
.es-ukur{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;padding:16px 18px 4px}
.es-ukur .ukur{position:relative;overflow:hidden;flex-direction:column;
  align-items:stretch;gap:0;padding:16px 18px 16px 20px;border-radius:13px}
.es-ukur .ukur::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px;background:var(--garis)}
.es-ukur .ukur > span{display:block;font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--baja)}
.es-ukur .ukur > b{display:block;margin:4px 0 3px;font-size:32px;
  font-weight:700;line-height:1.05;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.es-ukur .ukur > b.panjang{font-size:19px;letter-spacing:-.02em}
.es-ukur .ukur > i{display:block;font-style:normal;font-size:11.5px;
  line-height:1.45;color:var(--redup)}


/* ====================================================================
   LAYAR TELEPON  (<= 820px)

   Sampai sekarang lembar gaya ini berhenti di 980px. Di bawah itu tidak
   ada aturan apa pun, padahal rel menu adalah kolom position:fixed
   selebar 244px. Di layar telepon 390px rel memakan 244px dan isi
   halaman diperas ke sisa ~146px: tabelnya meluber ke samping, barisnya
   terlalu sempit untuk disentuh dengan jari, dan laci -- yang dibuka
   dengan menyentuh baris -- praktis tidak bisa dijangkau sama sekali.
   Itu sebabnya "dari HP tidak bisa buka laci": bukan lacinya yang rusak,
   melainkan barisnya yang tidak tersentuh.

   Di lebar ini rel berhenti menjadi kolom dan menjadi baris menu yang
   digulir mendatar -- pola yang sama dengan tab pos di ruang kerja,
   supaya keduanya terasa satu aplikasi.
   ==================================================================== */
@media (max-width: 820px) {
  .rel {
    position: static; inset: auto; width: auto; height: auto;
    flex-direction: row; align-items: center; gap: 4px;
    padding: 8px 10px; overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  /* Logo, merek, judul kelompok, dan kaki dibuang di lebar ini. Semuanya
     keterangan, bukan tujuan -- dan tujuanlah yang perlu dijangkau jari. */
  .rel .logo, .rel .merek, .rel h2, .rel .kaki { display: none; }
  .rel a {
    flex: 0 0 auto; margin: 0; padding: 9px 14px; border-radius: 99px;
    white-space: nowrap; font-size: 13px;
  }
  .rel a svg { display: none; }
  .rel-tombol { display: none; }

  .lembar { margin-left: 0; padding: 0 12px 32px; }
  .kepala { padding: 14px 0 12px; }
  .kepala h1 { font-size: 19px; }

  /* Tabel lebar tetap digulir di dalam pembungkusnya sendiri, jangan
     sampai badan halaman yang ikut bergeser ke samping. */
  .gulung { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Baris tabel adalah tombol yang sesungguhnya di papan ini -- itulah
     yang membuka laci. Di jari, sasaran setinggi 44px adalah batas
     nyaman; sel yang padat membuat orang meleset lalu menyimpulkan
     lacinya tidak bisa dibuka. */
  tr.klik td { padding-top: 11px; padding-bottom: 11px; }

  /* Laci selebar layar penuh. Menyisakan 3vw di tepi kiri tidak memberi
     apa-apa selain memperkecil ruang baca yang sudah sempit. */
  .laci { width: 100vw; max-width: 100vw; border-left: 0; }
}

/* Tinggi layar telepon berubah saat bilah alamat peramban menyusut dan
   muncul kembali. 100vh dihitung dari layar TERBESAR, jadi dasar laci --
   tempat tombol kirim berada -- terdorong ke bawah tepi layar dan tidak
   bisa disentuh. dvh mengikuti tinggi yang benar-benar terlihat.
   Ditulis terpisah supaya peramban lama yang tidak mengenal dvh tetap
   memakai aturan 100vh di atasnya, bukan mengabaikan keduanya. */
@supports (height: 100dvh) {
  .laci { max-height: 100dvh; }
}


/* ============================================================
   Lencana akun di kepala halaman
   ============================================================
   Ditulis DI SINI, bukan di bagian_gaya_papan.html: berkas itu hanya
   disertakan dua halaman, sementara lencananya tergambar di semua.
   Aturan yang harus berlaku di mana-mana tinggal di berkas yang dimuat
   di mana-mana.

   Sengaja bukan tombol: ia memberi tahu, tidak mengundang ditekan --
   jalan keluarnya di rel kiri, satu tempat saja. */
.kepala-akun{display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px;border:1px solid var(--garis);border-radius:99px;
  background:var(--kertas);font-size:12px;line-height:1.2;white-space:nowrap}
.kepala-akun b{font-weight:650;color:var(--tinta)}
.kepala-akun .ka-akun{font-family:var(--mono);font-size:11px;
  color:var(--redup)}
.kepala-akun .ka-tanda{padding:2px 8px;border-radius:99px;
  background:#fef3c7;color:#92400e;font-size:10px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase}
.kepala-akun .ka-tanda--penuh{background:#dcfce7;color:#166534}
.kepala-akun.ka-pantau{border-color:#fcd9a4;background:#fffbf3}
@media (max-width:640px){
  .kepala-akun .ka-akun{display:none}
}

/* ===================== PITA PEKERJAAN YANG MENUNGGU =====================
   Berjalan, bukan diam. Papan ini penuh angka, dan satu kotak diam di
   antaranya akan ikut jadi latar dalam dua hari. Yang bergerak tetap
   tertangkap sudut mata orang yang sedang membaca yang lain.

   Berhenti saat disentuh atau ditunjuk kursor: pita yang tidak bisa
   dihentikan memaksa orang menunggu satu putaran penuh untuk membaca
   ulang satu baris yang terlanjur lewat. */
.pita-tunggu{display:flex;align-items:center;gap:14px;margin:0 0 16px;
  padding:9px 14px;border:1px solid #f0b429;border-left-width:4px;
  border-radius:10px;background:#fffdf6;overflow:hidden}
.pita-tunggu .pita-label{flex:none;font-size:11.5px;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:#92400e;
  white-space:nowrap}
.pita-jendela{flex:1;min-width:0;overflow:hidden;position:relative}
.pita-jalan{display:flex;gap:34px;width:max-content;
  animation:pita-geser calc(var(--n, 3) * 9s) linear infinite}
.pita-tunggu:hover .pita-jalan,
.pita-tunggu:focus-within .pita-jalan{animation-play-state:paused}
@keyframes pita-geser{from{transform:translateX(0)}
                      to{transform:translateX(-50%)}}
.pita-butir{white-space:nowrap;font-size:13px;color:var(--tinta);
  text-decoration:none}
.pita-butir b{font-family:var(--data,monospace);margin-right:7px;
  color:var(--baja)}
.pita-butir:hover{text-decoration:underline}
.pita-butir--lewat{color:var(--merah);font-weight:600}
/* Serah terima yang menggantung. Dibedakan dari yang lewat SLA: yang satu
   pekerjaan yang sedang dikerjakan terlalu lama, yang lain pekerjaan yang
   belum disentuh sama sekali -- dan tindakan yang diminta keduanya
   berbeda. */
.pita-butir--tunggu,
.pita-butir--tunggu_dari{color:#b45309;font-weight:600}
.pita-semua{flex:none;font-size:12px;font-weight:600;color:var(--biru);
  text-decoration:none;white-space:nowrap}
/* Yang menyetel sistemnya untuk mengurangi gerak tidak boleh dipaksa
   menonton pita berjalan. Isinya tetap terbaca, cuma tidak bergerak. */
@media (prefers-reduced-motion: reduce){
  .pita-jalan{animation:none;flex-wrap:wrap;width:auto}
}

/* ==================== TAB ANALISA: DETAIL vs MANAJEMEN ==================
   Dua pertanyaan yang berbeda. Papan menjawab "apa yang harus dikerjakan
   hari ini"; manajemen menjawab "apakah kita membaik, dan di mana waktunya
   hilang". Mencampurnya membuat yang mendesak tenggelam di antara yang
   penting.

   Bentuknya SATU sakelar bersegmen, bukan dua tab bergaris bawah: dua
   panel yang saling meniadakan lebih jujur digambarkan sebagai satu
   tuas berposisi dua daripada dua tautan sejajar. Yang aktif TERANGKAT
   (kertas putih di atas alur cekung) -- kedalaman membaca lebih cepat
   daripada warna, dan tetap terbaca saat dicetak hitam-putih.
   Tiap segmen memakai rona sendiri (biru = papan harian, toska =
   manajemen) supaya sekilas pandang sudah tahu sedang di mana. */
.an-tab{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;
  margin:26px 0 18px;max-width:100%;border:1px solid var(--garis);
  border-radius:14px;background:var(--latar);
  box-shadow:inset 0 1px 3px rgba(15,23,42,.06)}
.an-t{--tan:var(--biru);position:relative;display:flex;flex-direction:column;
  gap:3px;padding:10px 22px 12px;border:0;background:none;font:inherit;
  text-align:left;color:var(--baja);cursor:pointer;border-radius:10px;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease}
.an-t[data-an="manajemen"]{--tan:var(--toska)}
.an-t b{font-size:14px;font-weight:650;letter-spacing:.005em}
.an-t:hover:not(.on){color:var(--tinta);background:rgba(255,255,255,.55)}
.an-t.on{color:var(--tinta);background:var(--kertas);
  box-shadow:0 1px 1px rgba(15,23,42,.05),0 4px 12px rgba(15,23,42,.09)}
/* Garis rona hanya pada yang aktif, di DALAM segmen: penanda posisi,
   bukan hiasan tepi. */
.an-t.on::after{content:"";position:absolute;left:22px;right:22px;bottom:5px;
  height:2px;border-radius:2px;background:var(--tan)}
.an-t:focus-visible{outline:2px solid var(--tan);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.an-t{transition:none}}
@media (max-width:560px){
  .an-tab{display:flex}
  .an-t{flex:1 1 auto;padding-left:14px;padding-right:14px}
  .an-t.on::after{left:14px;right:14px}
}

/* Peringatan asal data. TIDAK bisa ditutup: angka latihan yang dibaca
   sebagai kinerja nyata jadi dasar keputusan tentang orang. */
.an-awas{margin:0 0 18px;padding:12px 16px;border-radius:10px;
  border-left:4px solid var(--merah);background:#fdecec;color:#7f1d1d;
  font-size:13.5px;line-height:1.55}
.an-awas--ringan{border-left-color:#e0a72c;background:#fef9ec;color:#8a6414}

/* Kartu dan panel di sini memakai BAHASA YANG SAMA dengan papan: rel tipis
   di tepi kiri sewarna keadaannya, gradasi 110 derajat dari warna muda ke
   kertas, sudut 13px, dan dua lapis bayangan yang sama. Ragam warnanya pun
   kelas yang sama persis (.ukur--biru dan kawan-kawan), bukan salinan --
   dijiplak ke kelas baru, dua daftar warna itu cepat atau lambat
   berselisih dan halaman ini pelan-pelan terlihat seperti aplikasi lain
   yang kebetulan menempel. */
.an-kisi{display:grid;gap:14px;margin-bottom:20px;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.an-kartu{position:relative;overflow:hidden;
  border:1px solid var(--garis);
  border-radius:13px;padding:16px 18px 16px 20px;box-shadow:var(--bayang);
  transition:box-shadow .16s ease,transform .16s ease}
/* Latar dan rel BAWAANNYA hanya untuk kartu tanpa ragam warna. Ditulis
   tanpa syarat, aturan ini menimpa .ukur--biru dan kawan-kawan yang
   letaknya lebih atas -- kekhususannya sama, jadi yang belakangan menang,
   dan seluruh kartu kembali abu-abu tanpa ada yang salah ketik. */
.an-kartu:not([class*="ukur--"]){background:var(--kertas)}
.an-kartu::before{content:"";position:absolute;left:0;top:0;bottom:0;
  width:3px}
.an-kartu:not([class*="ukur--"])::before{background:var(--garis)}
.an-kartu:hover{transform:translateY(-1px);
  box-shadow:0 2px 4px rgba(15,23,42,.05),0 10px 22px -12px rgba(15,23,42,.22)}
@media (prefers-reduced-motion: reduce){
  .an-kartu{transition:none}
  .an-kartu:hover{transform:none}
}
/* Label dan angka disamakan huruf demi huruf dengan .ukur .label dan
   .ukur b -- dua ukuran yang beda tipis di layar yang sama terbaca sebagai
   kelalaian, bukan sebagai pilihan. */
.an-label{display:block;font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--baja);margin-bottom:2px}
.an-angka{display:block;margin:2px 0 3px;font-size:32px;font-weight:700;
  line-height:1.1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.an-angka--awas{color:var(--merah)}
.an-beda{display:inline-block;margin-top:6px;padding:2px 8px;
  border-radius:20px;font-size:11.5px;font-weight:700;
  background:var(--latar);color:var(--baja)}
.an-beda.naik{background:#e4f4ec;color:#0c6340}
.an-beda.turun{background:#fdecec;color:#9f1c1c}
.an-kaki{display:block;margin-top:7px;font-size:12px;color:var(--redup);
  line-height:1.45}

.an-dua{display:grid;gap:16px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
/* Blok analisa dibentuk seperti .panel: badan kartu, dan judulnya jadi
   PITA KEPALA bergradasi dengan garis pemisah -- bukan sekadar teks tebal
   di dalam kotak. Itu yang membuat panel di halaman lain terbaca sebagai
   bagian yang berdiri sendiri. */
.an-blok{background:var(--kertas);border:1px solid var(--garis);
  border-radius:13px;margin-bottom:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 6px 18px -8px rgba(15,23,42,.10)}
.an-blok > h3{margin:0;padding:14px 18px;
  background:linear-gradient(180deg,#f0f5fc,#e8eff9);
  border-bottom:1px solid var(--garis);
  font-size:14.5px;font-weight:680;letter-spacing:-.012em;color:var(--tinta)}
.an-blok > .gulir-tabel{padding:4px 4px 6px}
.an-blok > .an-tren{padding:16px 18px 14px}
/* Angka di tabel analisa berbaris sama seperti angka di papan. */
.an-blok td.angka,.an-blok .an-angka{font-variant-numeric:tabular-nums}
/* Aturan .an-blok h3 yang lama dihapus. Kekhususannya SAMA dengan
   `.an-blok > h3` di atas dan letaknya lebih bawah, jadi ia yang menang --
   pita kepala bergradasi itu tidak akan pernah muncul selama ia ada. */
.an-ket{margin:0 0 12px;font-size:12.5px;color:var(--baja);
  line-height:1.5;max-width:70ch}

/* Tren per pekan. Batang, bukan garis: yang dibandingkan pekan dengan
   pekan, dan garis mengundang orang membaca kemiringan di antaranya --
   padahal di antara dua pekan tidak ada data apa pun. */
.an-tren{position:relative;display:flex;align-items:flex-end;gap:10px;
  height:168px;padding-top:14px}
/* Garis bantu 50% dan 100%. Batang tanpa garis acuan cuma bisa
   dibandingkan satu sama lain; dengan acuan, tiap batang bisa dibaca
   sendirian. Sangat tipis dan di BELAKANG batang -- ia acuan, bukan isi. */
.an-tren::before,.an-tren::after{content:"";position:absolute;left:0;right:0;
  border-top:1px dashed var(--garis);pointer-events:none}
.an-tren::before{top:14px}
.an-tren::after{top:calc(14px + (100% - 40px) / 2)}
.an-batang{position:relative;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;gap:5px}
/* Batang: alas gelap yang memudar ke atas, ditutup pucuk terang. Bukan
   gradasi datar dari satu biru ke biru lain -- yang membuatnya terbaca
   sebagai balok cat, bukan sebagai ukuran yang tumbuh dari dasar. */
.an-batang i{position:relative;display:block;width:100%;max-width:44px;
  border-radius:6px 6px 2px 2px;min-height:4px;
  background:linear-gradient(180deg,#7aa8ff 0%,#3b6fe0 38%,#1e46a8 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),
             0 6px 14px -8px rgba(30,70,168,.75);
  transition:filter .16s ease}
/* Kilau tipis di pucuk: memberi arah cahaya yang sama untuk semua batang,
   sehingga deretnya terbaca sebagai satu benda, bukan delapan potong. */
.an-batang i::after{content:"";position:absolute;left:0;right:0;top:0;
  height:38%;border-radius:6px 6px 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,.32),transparent)}
.an-batang:hover i{filter:brightness(1.08)}
/* Pekan TERAKHIR adalah yang sedang berjalan. Ia dibedakan dengan warna
   sendiri, bukan cuma diletakkan paling kanan -- di deret yang panjang,
   posisi tidak cukup menandai mana yang masih bisa berubah. */
.an-batang:last-child i{
  background:linear-gradient(180deg,#5fd8c4 0%,#12a594 40%,#0b7466 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 6px 14px -8px rgba(11,116,102,.8)}
.an-batang span{font-size:11.5px;font-weight:700;color:var(--baja);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.an-batang:last-child span{color:#0b7466}
.an-batang em{font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--redup);font-style:normal}
@media (prefers-reduced-motion: reduce){
  .an-batang i{transition:none}
  .an-batang:hover i{filter:none}
}
.an-kaki-panel{margin:4px 0 0;font-size:12px;color:var(--redup)}

/* ======================================================================
   Judul kolom rata TENGAH
   ----------------------------------------------------------------------
   Berlaku untuk seluruh tabel di dalam panel, supaya tidak ada satu tabel
   pun yang tertinggal dengan aturan lamanya sendiri.

   ISI selnya TIDAK ikut ditengahkan. Angka tetap rata kanan: digit yang
   berbaris di satu tepi bisa dibandingkan sekilas, dan menengahkannya
   membuat "5" dan "1.240" mulai di tempat berbeda sehingga panjangnya
   tidak lagi bisa dibaca sebagai besarnya.
   ====================================================================== */
.panel table th,
.an-blok table th,
.kp-tabel th{text-align:center}

/* Baris tombol kirim alarm. Berdiri sendiri, tanpa latar peringatan:
   yang perlu terlihat cuma tombolnya. */
.baris-kirim-alarm{display:flex;justify-content:flex-end;margin:0 0 16px}

/* Baris tabel manajemen yang bisa ditekan. Isyaratnya harus ada SEBELUM
   ditekan -- baris yang ternyata bisa diklik tapi tidak terlihat begitu
   sama saja dengan tidak ada. */
.mnj-baris{cursor:pointer}
.mnj-baris:hover td{background:#eef4ff}
.mnj-baris:focus-visible{outline:2px solid var(--biru);outline-offset:-2px}

/* ======================================================================
   Isi laci samping: satu KARTU per langkah
   ----------------------------------------------------------------------
   Laci lebarnya 420px. Tabel enam kolom di dalamnya meremas kolom terakhir
   jadi satu kata per baris, dan tiga kolom waktu berhimpit sampai justru
   yang paling perlu dibandingkan jadi paling sulit dibaca.

   Susunannya dibalik: pertanyaan yang dibawa orang ke sini adalah "langkah
   ini kenapa", jadi tiap langkah berdiri sendiri -- nama dan keadaannya di
   atas, tiga angka waktunya berjajar rata, akibatnya di bawah.
   ====================================================================== */
.laci-ringkas{margin:0 0 14px;padding:0 0 12px;
  border-bottom:1px solid var(--garis);
  font-size:12.5px;line-height:1.6;color:var(--baja)}
.laci-ringkas b{color:var(--tinta);font-weight:650}

/* Lebar laci mengikuti ISINYA, bukan angka mati.

   Isi laci ini sedikit: satu nama langkah, satu nama desk, tiga angka
   waktu. Dipatok 560px ia jadi bidang putih yang sebagian besar kosong;
   dipatok 420px, "1 jam 30 mnt" patah dua baris. fit-content memberi
   lebar secukupnya, dengan batas bawah supaya tiga angka waktu tetap
   sebaris, dan batas atas supaya kalimat "Kalau dibiarkan" yang panjang
   tidak menarik lacinya sampai menutupi separuh layar. */
.laci{width:auto;
  min-width:min(420px, 92vw);
  max-width:min(560px, 94vw);
  width:fit-content}

/* KARTU KENDALA jauh lebih lebar daripada kartu putaran: ia memuat borang
   pengisian DAN daftar fakta berdampingan, belum termasuk tiga kotak
   waktu. Dipaksa masuk 520px, kedua lajurnya tinggal 180-an piksel dan
   tiap selnya patah dua sampai tiga kata per baris -- "BATAS SLA / 4 /
   jam" bertumpuk tiga baris untuk dua kata.
   Lebar laci ditentukan ISINYA, bukan satu angka untuk semua. */
/* .laci-butir = kartu kendala di laci papan (dibangun kartuLangkah()).
   .kj-kartu   = kartu kerja di layar HP dan ruang coba.
   Keduanya disebut: sempat hanya .kj-kartu, dan laci papan -- yang justru
   isinya paling banyak -- tidak pernah cocok, jadi tidak ada yang berubah
   sama sekali. Kelas akar dipastikan dari markah yang benar-benar
   dihasilkan, bukan dari ingatan. */
.laci:has(.laci-butir),
.laci:has(.kj-kartu){
  min-width:min(820px, 96vw);
  max-width:min(980px, 96vw)}
/* Peramban tanpa :has() tetap mendapat laci selebar mungkin -- lebih baik
   terlalu lebar daripada terlalu sempit untuk isi sebanyak ini. */
@supports not selector(:has(*)){
  .laci{max-width:min(980px, 96vw)}
}

.lp-langkah{position:relative;padding:14px 16px;margin-bottom:10px;
  border-radius:12px;border:1px solid var(--garis);background:var(--kertas);
  box-shadow:0 1px 2px rgba(15,23,42,.04)}
.lp-langkah:last-child{margin-bottom:0}
.lp-langkah h4{margin:0 0 5px;font-size:13.5px;font-weight:650;
  line-height:1.4;letter-spacing:-.008em;color:var(--tinta)}
.lp-langkah h4 .kunci{margin-right:5px}
/* Desk dan lencana keadaan pada satu baris, lencana rata kanan: keadaan
   adalah hal pertama yang dicari mata, dan di ujung baris ia selalu ada
   di tempat yang sama pada tiap kartu. */
.lp-desk{display:flex;align-items:center;gap:8px;margin:0 0 12px;
  font-size:11.5px;color:var(--baja)}
.lp-pil{margin-left:auto;flex:0 0 auto}
.lp-desk .sub{display:block;margin-top:2px}

/* Tiga angka waktu berjajar dengan lebar SAMA. Lebar yang mengikuti isi
   membuat kolom bergeser dari kartu ke kartu, dan mata kehilangan tempat
   membandingkan. */
.lp-angka{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  padding:10px 4px;border-radius:10px;background:var(--latar)}
/* Garis pemisah tipis ANTAR angka, bukan kotak sendiri-sendiri: tiga
   kotak berjajar terbaca sebagai tiga hal terpisah, padahal ketiganya
   satu ukuran yang sama dibaca dari tiga sisi. */
.lp-angka > div + div{border-left:1px solid #d8e1ee}
.lp-angka > div{padding:0 10px}
.lp-angka > div{min-width:0;display:flex;flex-direction:column;gap:3px}
.lp-angka i{font-style:normal;font-size:9.5px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--redup)}
.lp-angka b{font-size:12px;font-weight:700;font-family:var(--mono);
  font-variant-numeric:tabular-nums;color:var(--tinta);
  overflow-wrap:anywhere}

.lp-dampak{margin:10px 0 0;padding-top:9px;
  border-top:1px dashed var(--garis);
  font-size:11.5px;line-height:1.55;color:var(--baja)}

/* Blok alur membentang penuh di dalam kisi dua kolom: ia dibaca sebagai
   URUTAN, dan urutan yang dipotong jadi dua kolom sempit berhenti terbaca
   sebagai urutan. */
.alur-kepala{margin:0;padding:13px 18px;
  border-bottom:1px solid var(--garis);
  font-size:12.5px;line-height:1.6;color:var(--baja)}
.alur-kepala b{color:var(--tinta)}
.alur-angka{font-size:20px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;vertical-align:-1px;margin-right:2px}
.alur-angka--awas{color:var(--merah)}
.alur-merah{color:var(--merah)}
/* Tahap yang ada pengiriman lewat tenggatnya diberi rel merah tipis.
   Angkanya sudah merah; relnya yang membuat barisnya ketemu tanpa dibaca. */
.alur-lewat > td:first-child{box-shadow:inset 3px 0 0 var(--merah)}
/* Nama desk di baris berisiko: BARIS SENDIRI. Sebagai span sebaris ia
   menempel pada nama tahap tanpa spasi -- "Container balik kosongDesk
   Trucking EMKL" -- dan terbaca seperti satu nama yang salah ketik. */
.alur-desk{display:block;margin-top:2px;font-size:11px}

/* ======================================================================
   Susunan panel manajemen
   ----------------------------------------------------------------------
   Alur berdiri SENDIRI selebar panel: ia dibaca sebagai urutan, dan
   urutan yang dipotong jadi kolom sempit berhenti terbaca sebagai urutan.
   Tiga tabel sisanya berbagi satu baris.

   Yang diperbaiki di sini: sebelumnya "Menunggu paling lama" tersisa
   sendirian di kisi yang blok sebelahnya membentang penuh, dan ia
   menyusut jadi lajur seratus piksel -- tiap sel patah satu kata per
   baris sampai tabelnya tidak bisa dibaca sama sekali.
   ====================================================================== */
.an-tiga{display:grid;gap:16px;margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* Lebar kolom DIKUNCI. Dibiarkan mengikuti isi, tabel tiga kolom melar
   selebar panel sampai nama tahap di tepi kiri dan angkanya di tepi kanan
   berjarak sejengkal -- yang harus dibaca berpasangan justru paling jauh
   terpisah. */
.an-blok table{table-layout:fixed;width:100%}
.an-blok th,.an-blok td{overflow-wrap:anywhere}
/* Alur: lima kolom, dua panel berdampingan. Desknya pindah ke baris
   kedua di bawah nama tahap -- sebagai kolom sendiri ia memakan seperlima
   lebar panel yang tinggal separuh. */
.alur-tabel th:nth-child(1),.alur-tabel td:nth-child(1){width:40%}
.alur-tabel th:nth-child(2),.alur-tabel td:nth-child(2){width:24%}
.alur-tabel th:nth-child(3),.alur-tabel td:nth-child(3){width:13%}
.alur-tabel th:nth-child(4),.alur-tabel td:nth-child(4){width:11%}
.alur-tabel th:nth-child(5),.alur-tabel td:nth-child(5){width:12%}
/* Daftar yang berisiko: empat kolom. */
.risiko-tabel th:nth-child(1),.risiko-tabel td:nth-child(1){width:32%}
.risiko-tabel th:nth-child(2),.risiko-tabel td:nth-child(2){width:34%}
.risiko-tabel th:nth-child(3),.risiko-tabel td:nth-child(3){width:18%}
.risiko-tabel th:nth-child(4),.risiko-tabel td:nth-child(4){width:20%}
.risiko-tabel th:nth-child(1),.risiko-tabel td:nth-child(1){width:30%}
.risiko-tabel th:nth-child(2),.risiko-tabel td:nth-child(2){width:32%}

/* Panel risiko: daftarnya bisa panjang, jadi ia digulir SENDIRI --
   tingginya mengikuti KOTAKNYA, bukan angka mati.

   Sebelumnya dipatok 330px. Angka mati tidak pernah pas dengan apa pun:
   kalau panel di sebelahnya lebih tinggi, sisa kotaknya menganga kosong;
   kalau lebih pendek, daftarnya menonjol keluar. Yang benar, panelnya
   dijadikan kolom flex, dan area tabel mengambil SISA tinggi berapa pun
   itu -- jadi kedua kotak selalu sama tinggi dan isinya selalu di dalam.

   min-height:0 wajib pada keduanya. Tanpa itu anak flex menolak menyusut
   di bawah tinggi isinya, dan tabelnya meluber keluar kotak tanpa pernah
   memunculkan batang gulir -- persis gejala yang sedang diperbaiki. */
.an-dua > .an-blok,.an-tiga > .an-blok{display:flex;flex-direction:column}
.an-blok > .gulir-tabel{min-height:0}
.an-blok--risiko > .gulir-tabel{flex:1 1 0;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}
.an-blok--risiko thead th{position:sticky;top:0;z-index:1;
  background:#f3f7fc}
.alur-kosong{margin:0;padding:22px 18px 26px;text-align:center;
  font-size:12.5px;line-height:1.6;color:var(--redup)}

/* --- bilah bertumpuk per tahap ---------------------------------------
   Hijau yang sudah lewat tahap ini, biru yang berhenti di sini, sisanya
   alur kosong = belum sampai. Warnanya bahasa yang sama dengan roda
   putaran di papan, jadi tidak ada kosakata baru yang harus dihafal. */
.alur-bilah-sel{padding-right:14px !important}
.alur-bilah{display:flex;height:8px;border-radius:99px;overflow:hidden;
  background:#e6ebf3}
.alur-bilah i{display:block;height:100%}
.ab-tuntas{background:var(--hijau)}
.ab-sini{background:var(--biru)}
.ab-dari{color:var(--redup);font-weight:400}

/* --- bilah nilai di dalam sel angka ----------------------------------
   Angka menjawab "berapa"; bilah menjawab "dibanding yang lain" tanpa
   perlu membaca satu digit pun. */
.an-bar{display:block;margin-top:5px;height:4px;border-radius:99px;
  background:#e6ebf3;overflow:hidden}
.an-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#f0836a,var(--merah))}
.an-bar--tunggu i{background:linear-gradient(90deg,#7aa8ff,#2f5fd0)}

/* Batang tren diberi lebar maksimum. Tanpa itu dua pekan pertama --
   saat riwayatnya masih pendek -- melar jadi dua balok selebar telapak
   tangan di tengah panel kosong.
   Tetapi DIRAPATKAN KE KIRI juga salah, dan itulah yang terjadi sampai
   sekarang: dua batang berdesakan di pojok kiri sementara dua pertiga
   panel menganga kosong, dan yang membacanya menyimpulkan sisanya gagal
   dimuat. Disebar rata -- kosongnya jadi jarak antar batang, bukan
   lubang di satu sisi. */
.an-tren{justify-content:space-evenly}
.an-batang{flex:0 1 132px;max-width:132px}
/* Tingginya IKUT panel, bukan angka mati. Panel ini sebaris dengan dua
   panel tabel yang lebih tinggi, jadi tinggi tetap 168 px menyisakan
   ruang kosong di bawah grafik -- persis ruang yang membuat panelnya
   terbaca separuh jadi. */
.an-blok > .an-tren{flex:1 1 auto;height:auto;min-height:168px}

/* ---------- donat "berpotensi lewat N hari" ----------
   Tiga keadaan satu pengiriman: berpotensi lewat, sesuai rencana, dan
   kapalnya belum sandar. Digambar SVG di tempat -- lihat catatan di
   bagian_analisa_manajemen.html soal kenapa bukan Chart.js. */
.d7{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  margin:2px 0 10px}
.d7-gbr{position:relative;width:118px;height:118px;flex:0 0 auto}
.d7-donat{width:118px;height:118px;display:block}
.d7-alas{fill:none;stroke:var(--garis);stroke-width:13}
.d7-j{fill:none;stroke-width:13;stroke-linecap:butt;
  transition:stroke-width .15s ease}
.d7-j--lewat{stroke:var(--merah)}
.d7-j--aman{stroke:var(--hijau)}
.d7-j--sandar{stroke:var(--oranye)}
/* Angka di lubang donat. pointer-events dimatikan supaya juring di
   bawahnya tetap bisa disentuh -- kotak teks yang menutupi gambar adalah
   sebab paling sering sebuah juring terasa "mati". */
.d7-tengah{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
  line-height:1.05}
.d7-tengah b{font-size:26px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.d7-tengah b.d7-awas{color:var(--merah)}
.d7-tengah span{font-size:10.5px;color:var(--redup);margin-top:2px}
/* SATU baris, TIGA kolom. Ketiga keadaan itu setara dan saling
   melengkapi -- ditumpuk menegak, yang teratas terbaca sebagai yang
   terpenting dan dua di bawahnya sebagai keterangan tambahan. Berjajar,
   mata membacanya sebagai satu pembagian: sepuluh, tujuh, dua dari
   sembilan belas. Lebar kolomnya dibuat sama (1fr) supaya panjang label
   yang berbeda tidak menggeser angkanya. */
.d7-legenda{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px;flex:1 1 320px}
.d7-legenda li{display:flex;flex-direction:column;align-items:flex-start;
  gap:2px;font-size:12px;color:var(--ink,#1f2937);padding:7px 10px;
  border-radius:8px;background:var(--surface-2,#f6f8fc);
  border:1px solid var(--garis)}
/* Titik dan label sebaris; angkanya turun sendiri di bawahnya, besar.
   Angka yang duduk di ujung kanan baris bersaing dengan angka kolom
   sebelahnya dan terbaca seperti satu deret. */
.d7-legenda li > span{display:flex;align-items:center;gap:7px;
  color:var(--redup);font-size:11px;line-height:1.2}
.d7-titik{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.d7-titik--lewat{background:var(--merah)}
.d7-titik--aman{background:var(--hijau)}
.d7-titik--sandar{background:var(--oranye)}
.d7-n{font-variant-numeric:tabular-nums;font-weight:700;font-size:19px;
  letter-spacing:-.02em;line-height:1.1}
/* Hanya angka "berpotensi lewat" yang merah. Kalau ketiganya berwarna,
   warnanya berhenti berarti apa-apa dan yang perlu dilihat tidak lagi
   menonjol. */
.d7-n--awas{color:var(--merah)}
/* Hanya keadaan "berpotensi lewat" yang punya tujuan: daftarnya ada tepat
   di bawah. Dua yang lain tidak diberi rupa bisa-ditekan -- tombol yang
   ditekan lalu tidak terjadi apa-apa lebih buruk daripada tidak ada
   tombol, sebab orang menyimpulkan aplikasinya rusak. */
.d7-bisa{cursor:pointer}
.d7-bisa:hover,.d7-bisa:focus-visible{background:var(--merah-muda);
  outline:none}
.d7 .d7-j:hover{stroke-width:16}
/* Di layar sempit tiga kolom tinggal 60-an piksel dan labelnya patah satu
   kata per baris. Turun jadi satu kolom -- bertumpuk masih terbaca,
   terpotong tidak. */
@media (max-width:640px){
  .d7{gap:12px}
  .d7-legenda{grid-template-columns:1fr;gap:6px;flex-basis:100%}
  .d7-legenda li{flex-direction:row;align-items:center;
    justify-content:space-between;gap:10px}
  .d7-n{font-size:16px}
}

/* Sorotan sesaat sesudah menekan juring donat. Kelas yang ditambahkan JS
   tanpa aturan CSS-nya adalah cacat yang tidak berbunyi: tombolnya bekerja,
   tetapi tidak ada yang berubah di layar dan orang menekannya lagi. */
.sorot-sekejap{animation:sorotSekejap 1.2s ease-out 1}
@keyframes sorotSekejap{
  0%{box-shadow:0 0 0 3px var(--merah-muda)}
  40%{box-shadow:0 0 0 3px var(--merah-muda)}
  100%{box-shadow:0 0 0 3px rgba(0,0,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .sorot-sekejap{animation:none;box-shadow:0 0 0 3px var(--merah-muda)}
}

/* ---------- panel ringkasan keadaan (donat) ----------
   Panel ketiga di baris atas, supaya barisnya bertiga sama seperti baris
   di bawahnya -- dan supaya panel daftar tidak lagi memuat gambar,
   kalimat, dan tabel sembilan baris sekaligus dalam satu kotak. */
.d7-badan{padding:16px 18px 14px;display:flex;flex-direction:column;
  gap:14px;flex:1 1 auto}
/* Di panel selebar sepertiga, donat dan tiga kolom TIDAK muat berjajar:
   yang dipaksa berjajar membuat labelnya patah satu kata per baris.
   Donat naik ke atas, legendanya melebar penuh di bawahnya. */
.an-blok--ringkas .d7{flex-direction:column;align-items:center;gap:14px;
  margin:0}
.an-blok--ringkas .d7-legenda{width:100%;flex:0 0 auto}
.an-blok--ringkas .d7-legenda li{padding:8px 8px}
.an-blok--ringkas .d7-legenda li > span{font-size:10.5px}
/* Kalimatnya menutup panel, jadi garis bawah dan bantalan bawaannya
   dibuang -- garis yang tidak memisahkan apa-apa terbaca seperti isi yang
   terpotong. Didorong ke dasar supaya panel ini tetap sejajar dengan dua
   panel di sebelahnya yang lebih tinggi. */
.d7-badan .alur-kepala{padding:0;border-bottom:0;margin-top:auto}

/* Donat diperbesar di panelnya sendiri. Ukuran 118 px lahir ketika ia
   masih menumpang di pojok panel daftar; berdiri sebagai panel utuh
   selebar sepertiga papan, ukuran itu meninggalkan ruang kosong yang
   lebih besar daripada gambarnya sendiri -- dan panel yang isinya
   tenggelam di ruang kosong terbaca seperti panel yang gagal dimuat.
   viewBox tidak berubah, jadi tebal cincin ikut membesar sebanding.

   Ukurannya MENGIKUTI lebar panel, bukan angka mati: papan ini dibuka di
   layar 1280 sampai 1920 piksel, dan ukuran tetap yang pas di salah
   satunya selalu terlalu kecil di yang lain. aspect-ratio menjaga tetap
   bundar berapa pun lebarnya. */
.an-blok--ringkas .d7-gbr{width:min(94%,340px);height:auto;
  aspect-ratio:1/1}
.an-blok--ringkas .d7-donat{width:100%;height:auto}
.an-blok--ringkas .d7-tengah b{font-size:62px}
.an-blok--ringkas .d7-tengah span{font-size:14px;margin-top:5px}
/* Donat dan legendanya MENGAMBIL sisa tinggi panel, lalu dipusatkan di
   dalamnya. Tanpa ini keduanya menempel di kepala panel sementara kalimat
   penutup terdorong ke dasar, dan di antaranya menganga ruang kosong
   setinggi dua ratus piksel -- panel yang isinya berkumpul di tepi
   terbaca seperti panel yang gambarnya gagal dimuat. */
.an-blok--ringkas .d7{gap:20px;flex:1 1 auto;justify-content:center}
@media (max-width:640px){
  .an-blok--ringkas .d7-gbr{width:min(64%,196px)}
  .an-blok--ringkas .d7-tengah b{font-size:38px}
  .an-blok--ringkas .d7{flex:0 0 auto}
}

/* ---------- jejak akses (Pengaturan > Akun) ----------
   Yang perlu ketemu tanpa dibaca satu per satu adalah baris yang GAGAL
   dan yang DITOLAK. Warnanya dipakai untuk itu saja; kalau tiap baris
   berwarna, warnanya berhenti menandai apa pun. */
.jk-judul{margin:22px 18px 8px;font-size:13px;font-weight:680;
  letter-spacing:-.01em;color:var(--tinta)}
.jk-awas{color:var(--merah)}
tr.jk-gagal > td{background:var(--merah-muda)}
tr.jk-gagal > td:first-child{box-shadow:inset 3px 0 0 var(--merah)}

/* Kartu angka jejak akses. Empat besaran yang dibaca sekilas tiap pagi
   tidak boleh menuntut satu paragraf dibaca lebih dulu. */
.jk-cap{margin-left:auto;font-size:11px;color:var(--redup);
  letter-spacing:.04em;text-transform:uppercase}
.jk-angka{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;padding:14px 18px 4px}
.jk-kartu{border:1px solid var(--garis);border-radius:10px;padding:10px 12px;
  background:var(--surface-2,#f7f9fc);display:flex;flex-direction:column;gap:3px}
.jk-kartu--awas{border-color:#f3b7b7;background:var(--merah-muda)}
.jk-label{font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--redup)}
.jk-nilai{font-size:22px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1}
.jk-kartu--awas .jk-nilai{color:var(--merah)}
.jk-sub{font-weight:400;font-size:11px;color:var(--redup);margin-left:8px}
/* Saklar di dalam daftar rincian panel setelan. Kotak centang berdiri
   sendiri tanpa label yang bisa diklik memaksa orang mengenai kotak
   selebar 13 px di layar telepon. */
.jk-saklar{display:flex;align-items:flex-start;gap:7px;font-size:12px;
  line-height:1.5;color:var(--tinta);cursor:pointer}
.jk-saklar input{margin:2px 0 0;flex:none}
.jk-kaki{margin:14px 18px 16px;font-size:11px;line-height:1.6;
  color:var(--redup);border-top:1px solid var(--garis);padding-top:12px}

/* Cadangan harian: borang jadwal di kiri, keadaan sekarang di kanan. */
.cdg-isi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px;padding:14px 18px 4px;align-items:start}
.cdg-borang{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.cdg-borang label{display:flex;flex-direction:column;gap:4px;font-size:11px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--redup)}
.cdg-borang input{font:inherit;font-size:13px;padding:7px 9px;
  border:1px solid var(--garis);border-radius:8px;background:var(--kertas);
  color:var(--tinta);width:130px}
.cdg-satuan{font-size:10px;text-transform:none;letter-spacing:0}
.cdg-rinci{margin:0}
.cdg-sekarang{display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:6px 18px 4px}
.cdg-ket{flex:1 1 260px;font-size:11px;line-height:1.55;color:var(--redup)}

.jk-alat{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:99px;
  background:var(--biru-muda);color:var(--biru);font-size:10.5px;font-weight:600}
.jk-ciri{display:block;font-size:10.5px;color:var(--redup);margin-top:1px}
.jk-nama-borang{display:flex;gap:6px;align-items:center;margin:0}
.jk-nama-borang input{font:inherit;font-size:12px;padding:5px 8px;
  border:1px solid var(--garis);border-radius:7px;background:var(--kertas);
  color:var(--tinta);width:150px}

/* ---------- daftar container di kartu kerja ----------
   Satu kartu berisi daftar, bukan satu kartu per container. Yang
   dikerjakan orang satu perintah truk untuk seluruh B/L; tiga kartu yang
   mirip memaksanya membandingkan nomor container untuk tahu mana yang
   mana. */
.kj-cont{margin:12px 0 0;padding:12px 14px;border:1px solid var(--garis);
  border-radius:11px;background:var(--surface-2,#f7f9fc)}
.kj-cont-judul{margin:0 0 9px;font-size:11px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--redup)}
.kj-cont-hitung{font-size:12px;color:var(--tinta);
  font-variant-numeric:tabular-nums}
.kj-cont-hitung--kelar{color:var(--hijau)}
.kj-cont-list{list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:8px}
.kj-ct{border:1px solid var(--garis);border-radius:9px;padding:9px 11px;
  background:var(--kertas)}
/* Warna menandai KEADAAN, bukan hiasan: yang sudah keluar tidak perlu
   dibaca lagi, yang belum justru itu yang dicari. */
.kj-ct--selesai{border-color:#bfe6cd;background:#f4fbf6}
.kj-ct--berjalan{border-color:#f0d5a8;background:#fffaf0}
.kj-ct-kepala{display:flex;align-items:center;justify-content:space-between;
  gap:8px;margin-bottom:7px}
.kj-ct-kepala b{font-size:12.5px}
.kj-ct-status{font-size:10px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--redup)}
.kj-ct--selesai .kj-ct-status{color:var(--hijau)}
.kj-ct--berjalan .kj-ct-status{color:#b45309}
.kj-ct-isi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:8px}
.kj-ct-medan{display:flex;flex-direction:column;gap:4px;font-size:10.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--redup)}
.kj-ct-medan label{display:flex;flex-direction:column;gap:3px}
.kj-ct-medan input,
.kj-ct-isi-medan{font:inherit;font-size:12.5px;text-transform:none;
  letter-spacing:0;padding:6px 9px;border:1px solid var(--garis);
  border-radius:8px;background:var(--kertas);color:var(--tinta)}
.kj-ct-medan--ada input,
.kj-ct-medan--ada .kj-ct-isi-medan{border-color:#bfe6cd;background:#f4fbf6}
.kj-ct-kabar{font-size:10px;text-transform:none;letter-spacing:0;
  color:var(--redup);min-height:12px}

/* Tombol keadaan yang menempel pada nomor containernya.
   Dibuat KECIL dan berjajar, bukan sebesar tombol utama: tombol setinggi
   44px pada tiap baris container membuat kartu tiga container memanjang
   melewati satu layar penuh, dan yang dicari orang -- nomor containernya
   -- terdorong keluar layar. */
.kj-ct-pilih{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;
  padding-top:9px;border-top:1px dashed var(--garis)}
.kj-p--baris{display:inline-flex;align-items:center;width:auto;
  min-height:34px;padding:6px 12px 6px 34px;text-align:left;
  font-size:12px;font-weight:600;border-radius:8px}
.kj-p--baris::before{left:10px;top:8px;width:16px;height:16px}
.kj-p--baris.dipilih::after{left:10px;top:8px;width:16px;height:16px;
  line-height:16px;font-size:11px}
.kj-ct-tujuan{display:flex;flex-direction:column;gap:3px;font-size:10.5px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--redup)}
.kj-ct-tujuan b{font-size:12.5px;text-transform:none;letter-spacing:0;
  color:var(--tinta);font-weight:600}
.kj-cont-kaki{margin:9px 0 0;font-size:10.5px;line-height:1.55;
  color:var(--redup)}