/* =====================================================================
   Portal Pimpinan — AkseleraSync
   ---------------------------------------------------------------------
   Berkas TUNGGAL untuk seluruh tampilan Portal Pimpinan. Sebelumnya
   tampilan ini tersebar di sembilan berkas tambalan yang saling
   membatalkan (chrome-v2, density, decision-rhythm, decision-grid,
   finance-rhythm, finance-desktop-grid, home-freshness, home-final,
   context). Semuanya sudah digabung ke sini pada 15 Agustus 2026 dengan
   hanya menyisakan aturan yang MENANG pada cascade lama.

   ATURAN BERKAS INI
   - Seluruh aturan digerbangi [data-active-portal="pimpinan"] sehingga
     kontrak Portal Wali, Guru, dan Staf tidak tersentuh.
   - Nilai spacing, radius, ukuran teks, dan elevasi memakai token dari
     assets/css/tokens.css. Jangan menulis angka mentah baru.
   - Ukuran teks terkecil adalah var(--fs-caption) = 12px. Tidak ada
     pengecualian; kontrak audit visual melarang teks di bawah 12px.
   - !important hanya boleh dipakai untuk melawan aturan di luar kendali
     berkas ini (reduced motion). Layout TIDAK boleh memakainya; JS sudah
     tidak lagi memancarkan style="" untuk layout.

   DAFTAR ISI
     01  Token lokal portal
     02  Kartu pemilih portal
     03  Kerangka halaman
     04  Topbar
     05  Hero eksekutif
     06  Filter bar & freshness
     07  Ikon, kartu metrik, provenance
     08  Baris daftar generik
     09  Baris sinyal
     10  Baris keputusan
     11  Lima pilar
     12  Direktori layanan
     13  Lapisan keuangan
     14  Module Control Plane
     15  Hikmah
     16  Halaman detail approval & sinyal
     17  Action Center
     18  Notice, akun, state, sheet
     19  Chart section
     20  Navigasi
     21  Fokus, tombol, mode presentasi
     22  Breakpoint kecil
     23  Desktop (≥900px)
   ===================================================================== */

/* =====================================================================
   01  TOKEN LOKAL PORTAL
   Warna khas Pimpinan. Skala ukuran tidak diduplikasi di sini — ambil
   dari tokens.css.
   ===================================================================== */
[data-active-portal="pimpinan"] {
  --leadership-midnight: #0c1732;
  --leadership-navy: #162b58;
  --leadership-indigo: #243b72;
  --leadership-emerald: #087a60;
  --leadership-emerald-dark: #075845;
  --leadership-gold: #d7a52e;
  --leadership-gold-light: #f7dda0;
  --leadership-gold-dark: #8d6216;
  --leadership-sky: #2679a9;
  --leadership-purple: #7551a6;
  --leadership-terracotta: #d96d4b;

  --leadership-navy-950: #07142f;
  --leadership-navy-900: #0d2248;
  --leadership-navy-800: #173563;
  --leadership-gold-500: #d7a52e;
  --leadership-gold-300: #f0d37a;
  --leadership-gold-100: #fff4cf;
  --leadership-surface: #fffefa;
  --leadership-ink: #132449;

  /* Teks sekunder. Diuji terhadap #fff, #fcfbf7, dan #f2f5fa; rasio
     terendah 6,3:1 sehingga lolos WCAG AA untuk teks kecil. */
  --leadership-muted: #4a5a75;

  --leadership-border: rgba(19, 36, 73, .12);
  --leadership-border-soft: rgba(19, 36, 73, .08);
  --leadership-shadow: var(--elev-1);
  --leadership-shadow-raised: var(--elev-3);
  --leadership-card-radius: var(--r-lg);
  --leadership-touch: var(--touch-min);

  /* Geometri baris — dipakai bersama oleh baris generik, sinyal, dan
     keputusan supaya ikon dan chevron sejajar di semua daftar. */
  --leadership-row-icon: 44px;
  --leadership-row-icon-dense: 40px;
  --leadership-row-tail: 24px;
  --leadership-row-tail-dense: 20px;
  --leadership-content-gap: var(--sp-3);

  /* Jarak antar KARTU di dalam grid.
     `--d-card-gap` portal ini bernilai 8px di bawah 900px demi kepadatan.
     Delapan piksel cukup untuk kartu yang warnanya berbeda, tetapi kartu
     KPI, pilar, dan lapisan semuanya memakai permukaan yang sama persis —
     tanpa tepi warna pemisah, dua kartu berjarak 8px terbaca sebagai satu
     blok. Grid kartu karena itu memakai satu tangga penuh design system
     (`--sp-3` = 12px, jarak antar kartu) dan tidak ikut turun. */
  --leadership-card-gap: var(--sp-3);
}

/* =====================================================================
   02  (dikosongkan) LAYAR PEMILIH PORTAL
   ---------------------------------------------------------------------
   Blok lama di sini menimpa .portal-choice--pimpinan pada layar pemilih
   portal: latar gradasi emas, ubin emas, panah emas, dan hover khusus.
   Layar itu bukan wilayah stylesheet portal — pemiliknya adalah
   portal-router.css — dan karena berkas ini dimuat belakangan, kartu
   Pimpinan tampil tersorot sementara tiga portal lain polos. Keempat
   portal setara, jadi seluruh blok dihapus pada 15 Agustus 2026.

   Berkas ini sekarang HANYA menyentuh elemen di dalam
   [data-active-portal="pimpinan"]. Jangan menambahkan selector yang
   menjangkau .portal-choice, .portal-selector, .launch-splash, atau
   komponen milik portal lain.
   ===================================================================== */

/* =====================================================================
   03  KERANGKA HALAMAN
   ===================================================================== */
/* --- STANDAR JARAK ANTAR-BLOK HALAMAN -------------------------------
   Disalin dari STANDAR TOPBAR PORTAL / STANDAR JARAK ANTAR-BLOK di puncak
   assets/css/portal-staff.css.

   Akar masalah "elemen terlalu menempel": pada shell bersama HANYA .section
   yang punya margin-bottom. Filter bar, kartu, notice, chips, dan grid tidak
   punya jarak sama sekali, sehingga begitu salah satunya diikuti blok lain
   jaraknya nol dan keduanya terbaca menyatu. Ditambal sekali di kontainer
   halaman, bukan per layar. */
[data-active-portal="pimpinan"] .leadership-page,
[data-active-portal="pimpinan"] .leadership-home {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-5);
  animation: leadership-page-in var(--motion-slow) var(--motion-ease) both;
}
/* Jarak antar blok kini satu sumber: `gap`. Margin lama tiap blok dinolkan
   supaya tidak ada dua sumber jarak yang saling menambah. */
[data-active-portal="pimpinan"] .leadership-page > *,
[data-active-portal="pimpinan"] .leadership-home > * {
  margin-top: 0;
  margin-bottom: 0;
}
/* Batas "blok selesai, bagian baru dimulai" butuh lebih banyak udara. */
[data-active-portal="pimpinan"] .leadership-page > :not(.section) + .section,
[data-active-portal="pimpinan"] .leadership-home > :not(.section) + .section { margin-top: var(--sp-3); }

/* --- SATU RITME UNTUK SELURUH HALAMAN BER-ROUTE ---------------------
   Komentar di atas benar bahwa jarak harus punya satu sumber, tetapi
   `gap` halaman ternyata masih DITAMBAHI margin per blok, sehingga satu
   layar memakai empat ritme sekaligus: filter → grid 20px, grid →
   section 32px, section → section 40px (52px di desktop), section →
   sumber data 28px. Mata membaca empat jarak berbeda sebagai kesalahan
   penataan, dan detektor membacanya sebagai lompatan 20px → 76px.

   Ritme sekarang satu nilai: `--leadership-section-rhythm`. Nilainya
   diambil dari skala token (32px genggam, 40px desktop) — cukup lapang
   untuk memisahkan bagian, tetapi tidak melar seperti penjumlahan lama.
   Semua margin blok tingkat atas dinolkan supaya `gap` benar-benar
   menjadi satu-satunya sumber. Beranda punya tata letak desktop
   tersendiri dan sengaja TIDAK ikut aturan ini. */
[data-active-portal="pimpinan"] .leadership-page {
  /* RITME SECTION (26 Agu 2026): nilai diambil dari --sec-gap milik
     tokens.css, yang Pimpinan timpa ke 32px pada semua lebar layar
     (kepadatan pindai dipertahankan) — bukan angka tangga lokal, supaya
     satu keputusan pemilik produk mengalir ke seluruh halaman. */
  --leadership-section-rhythm: var(--sec-gap);
  gap: var(--leadership-section-rhythm);
}
[data-active-portal="pimpinan"] .leadership-page > :not(.section) + .section,
[data-active-portal="pimpinan"] .leadership-page > .section + .section,
[data-active-portal="pimpinan"] .leadership-page > .leadership-section,
[data-active-portal="pimpinan"] .leadership-page > .leadership-provenance,
[data-active-portal="pimpinan"] .leadership-page > * { margin-block: 0; }

/* Shell bersama memberi `.card + .card { margin-top: var(--d-card-gap) }`.
   Aturan itu benar untuk tumpukan, tetapi merusak grid: kartu kedua dan
   seterusnya tergeser ke bawah sehingga baris kartu terlihat miring dan
   kartu pertama seolah "duduk lebih tinggi". Jarak di dalam grid sudah
   diurus `gap`, jadi margin itu dinolkan di setiap grid kartu portal ini. */
[data-active-portal="pimpinan"] .leadership-metric-grid > .card + .card,
[data-active-portal="pimpinan"] .leadership-layer-grid > .card + .card,
[data-active-portal="pimpinan"] .leadership-pillar-grid > .card + .card,
[data-active-portal="pimpinan"] .leadership-service-grid > .card + .card,
[data-active-portal="pimpinan"] .leadership-module-matrix > .card + .card,
[data-active-portal="pimpinan"] .leadership-simulation-grid > .card + .card,
[data-active-portal="pimpinan"] .leadership-fact-grid > .card + .card,
[data-active-portal="pimpinan"] .quick-grid > .card + .card { margin-top: 0; }
/* Sel grid selalu setinggi barisnya supaya tepi atas dan bawah segaris. */
[data-active-portal="pimpinan"] .leadership-metric-grid,
[data-active-portal="pimpinan"] .leadership-layer-grid,
[data-active-portal="pimpinan"] .leadership-pillar-grid { align-items: stretch; }
[data-active-portal="pimpinan"] .leadership-metric-grid > *,
[data-active-portal="pimpinan"] .leadership-layer-grid > *,
[data-active-portal="pimpinan"] .leadership-pillar-grid > * { align-self: stretch; }
/* Hero berdiri DI LUAR grid halaman: ia saudara sebelum <main>, bukan
   anaknya. Karena itu `gap` tidak berlaku di antara keduanya dan chip
   penyaring mendarat tepat pada lengkung bawah hero — terukur 0px, dan
   inilah keluhan yang sama yang dilaporkan pemilik produk. Padding atas
   di kepala halaman memberi jarak itu tanpa menyentuh tinggi hero. */
/* RUANG BAWAH DIHITUNG SEKALI, BUKAN DUA KALI.
   Shell bersama sudah memberi `.screen` padding bawah 94px + safe-area,
   cukup untuk dock setinggi 76px. Menambahkan 112px lagi di sini membuat
   setiap layar berakhir dengan 206px ruang kosong — satu kartu penuh —
   sehingga pembaca mengira halaman masih berlanjut padahal sudah habis.
   Sisa yang dibutuhkan hanyalah udara di atas dock; safe-area tidak
   diulang karena shell sudah memperhitungkannya. */
[data-active-portal="pimpinan"] .leadership-home {
  padding: var(--sp-4) var(--d-page-pad) var(--sp-6);
}
[data-active-portal="pimpinan"] .leadership-page {
  padding-bottom: var(--sp-6);
}

/* Rel horizontal tak sengaja adalah cacat berulang pada halaman padat. */
[data-active-portal="pimpinan"] .leadership-page,
[data-active-portal="pimpinan"] .leadership-home { overflow-x: clip; }
[data-active-portal="pimpinan"] .leadership-page .chips,
[data-active-portal="pimpinan"] .leadership-home .chips,
[data-active-portal="pimpinan"] .leadership-page .leadership-filterbar,
[data-active-portal="pimpinan"] .leadership-home .leadership-filterbar { scrollbar-width: none; }
[data-active-portal="pimpinan"] .leadership-page .chips::-webkit-scrollbar,
[data-active-portal="pimpinan"] .leadership-home .chips::-webkit-scrollbar,
[data-active-portal="pimpinan"] .leadership-page .leadership-filterbar::-webkit-scrollbar,
[data-active-portal="pimpinan"] .leadership-home .leadership-filterbar::-webkit-scrollbar { display: none; }

[data-active-portal="pimpinan"] .leadership-section { margin-top: var(--d-section-gap); }
[data-active-portal="pimpinan"] .leadership-section > .section-head { align-items: flex-start; }
[data-active-portal="pimpinan"] .leadership-section > .section-head > div { min-width: 0; flex: 1; }
[data-active-portal="pimpinan"] .leadership-section .section-title {
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-tight);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .section-sub {
  margin-top: var(--sp-1);
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* --- RITME SECTION OPSI B: bar aksen + kicker (SoT 7.2.5) -----------
   Perangkat ritme Pimpinan hanyalah bar aksen, kicker, dan divider
   bermerek — ukuran judul TIDAK dinaikkan dan kicker tetap 12px karena
   kepadatan pindai dipertahankan. Warna --kick-* dan --sec-head-gap
   datang dari tokens.css dan hanya DIPAKAI lewat var() di sini.
   Diperiksa dengan grep 26 Agu 2026: ::before pada .section-title dan
   kedua pseudo .sec-kicker belum dipakai selektor mana pun di berkas
   ini maupun di shell untuk lingkup pimpinan, jadi aman diklaim. */
[data-active-portal="pimpinan"] .section-head { margin-bottom: var(--sec-head-gap); }
[data-active-portal="pimpinan"] .section > .section-head .section-title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo);
}
/* Bila section punya kicker, bar pindah menempel di kiri kicker; bar
   bawaan judul dipadamkan supaya tidak dobel. Selektornya WAJIB memuat
   rantai .section > .section-head yang sama dengan aturan pemasang bar
   di atas — versi pendek (.sec-kicker + .section-title) kalah
   spesifisitas (3 class vs 4) dan display:none-nya tidak pernah menang,
   yang tampak sebagai bar aksen dobel di setiap section ber-kicker. */
[data-active-portal="pimpinan"] .section > .section-head .sec-kicker + .section-title::before { display: none; }
[data-active-portal="pimpinan"] .sec-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .sec-kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}
[data-active-portal="pimpinan"] .sec-kicker.kick-indigo { color: var(--kick-indigo); }
[data-active-portal="pimpinan"] .sec-kicker.kick-emerald { color: var(--kick-emerald); }
[data-active-portal="pimpinan"] .sec-kicker.kick-gold { color: var(--kick-gold); }
[data-active-portal="pimpinan"] .sec-kicker.kick-terra { color: var(--kick-terra); }
/* Aksi sekunder dulu berupa tautan biru telanjang ("Buka seluruh tindakan",
   "Buka tabel data"). Sebagai aksi utama sebuah blok, teks berwarna saja
   bukan afordans yang pantas. Satu pola untuk semuanya: tombol hantu
   bergaris dengan chevron, tinggi tetap 44px. */
[data-active-portal="pimpinan"] .text-btn {
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid rgba(36, 59, 114, .18);
  border-radius: var(--r-pill);
  color: var(--leadership-navy-800);
  background: rgba(255, 255, 255, .82);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  white-space: nowrap;
}
[data-active-portal="pimpinan"] .text-btn::after {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-top: 1.6px solid currentColor;
  border-right: 1.6px solid currentColor;
  opacity: .7;
  transform: rotate(45deg);
}
@media (hover: hover) {
  [data-active-portal="pimpinan"] .text-btn:hover {
    border-color: rgba(36, 59, 114, .38);
    background: #fff;
  }
}
/* Kepala section: pada ponsel aksi turun ke bawah judul supaya tidak
   berdesakan dengan subjudul yang membungkus dua baris. */
[data-active-portal="pimpinan"] .leadership-section > .section-head {
  flex-wrap: wrap;
  /* Ketika aksi turun ke bawah, yang mendarat di atasnya adalah subjudul
     tanpa latar; tombol hantu membawa bingkai sendiri. Delapan piksel
     membuat bingkai itu menempel pada huruf — satu tangga penuh tidak. */
  row-gap: var(--sp-3);
}
@media (max-width: 599px) {
  [data-active-portal="pimpinan"] .leadership-section > .section-head > .text-btn { margin-left: 0; }
  [data-active-portal="pimpinan"] .leadership-section > .section-head > div { flex: 1 1 100%; }
}

/* --- DIVIDER BERMEREK ANTAR SECTION (SoT 7.2.5) ---------------------
   Digambar absolut di TENGAH gap antar section level halaman, jadi
   TIDAK menambah tinggi layout, tidak pernah muncul di dalam kartu,
   sheet, modal, atau antar item daftar, dan tidak menyentuh hero
   (hero bukan .section dan kedua pseudonya memang sudah dipakai).
   Diperiksa dengan grep 26 Agu 2026: kedua pseudo elemen .section
   masih kosong di berkas ini, di portal-leadership-charts.css, dan di
   shell untuk lingkup pimpinan, jadi aman diklaim keduanya.

   --sec-divider-span = jarak nyata section-ke-section pada konteksnya:
   halaman ber-route memakai gap tunggal --leadership-section-rhythm;
   beranda genggam = gap kontainer (--sp-5) + margin-top
   .leadership-section (--d-section-gap); beranda desktop = gap grid
   --sp-6 murni (timpaannya di bagian 23 DESKTOP). Rute detail
   approval/sinyal dikecualikan: gap flex-nya 12px, terlalu sempit
   untuk piring 18px. Section pemilik pseudo diberi position:relative;
   z-index tidak disentuh sehingga urutan tumpuk watermark (z 0) dan
   .screen (z 1) tetap seperti semula. */
[data-active-portal="pimpinan"] .leadership-page:not(.leadership-route-approval-detail):not(.leadership-route-signal-detail) > .section + .section,
[data-active-portal="pimpinan"] .leadership-home > .section + .section {
  position: relative;
  --sec-divider-span: var(--leadership-section-rhythm);
}
[data-active-portal="pimpinan"] .leadership-home > .section + .section {
  --sec-divider-span: calc(var(--sp-5) + var(--d-section-gap));
}
/* Garis 1px membentang ~84% lebar KOLOM KONTEN — persen dihitung dari
   lebar section di dalam padding halaman, bukan lebar penuh bingkai
   1180px, sehingga di desktop garis tetap sejajar tepi kartu. */
[data-active-portal="pimpinan"] .leadership-page:not(.leadership-route-approval-detail):not(.leadership-route-signal-detail) > .section + .section::before,
[data-active-portal="pimpinan"] .leadership-home > .section + .section::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-.5 * var(--sec-divider-span));
  transform: translate(-50%, -50%);
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
  pointer-events: none;
}
/* Piring bulat 18px berwarna kanvas memutus garis dengan rapi; icon
   mark 12px di atasnya. Keredupan ~.55 dicapai lewat lapisan cuci
   warna kanvas 45% + grayscale supaya piringnya sendiri tetap pekat
   menutup garis — kecil dan tenang, bukan dekorasi berisik. */
[data-active-portal="pimpinan"] .leadership-page:not(.leadership-route-approval-detail):not(.leadership-route-signal-detail) > .section + .section::after,
[data-active-portal="pimpinan"] .leadership-home > .section + .section::after {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(-.5 * var(--sec-divider-span));
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(252, 251, 247, .45), rgba(252, 251, 247, .45)),
    url(/presentasi/storage/brand/akselerasync-mark-1x1.webp?v=20260802h) center / 12px 12px no-repeat,
    var(--canvas);
  filter: grayscale(1);
  pointer-events: none;
}

/* Watermark rute bawaan shell adalah derau di bawah hero eksekutif. */
[data-active-portal="pimpinan"] #pageWatermark {
  opacity: .018;
  filter: grayscale(1) contrast(.7);
  transform: translate(-50%, -50%) scale(.82);
}

/* =====================================================================
   04  TOPBAR
   ===================================================================== */
/* Mengikuti STANDAR TOPBAR PORTAL di puncak assets/css/portal-staff.css:
   tiga slot, judul dua tingkat (eyebrow konteks + judul layar), dan slot
   aksi yang hanya berisi tombol bundar 44px berisi ikon — tidak pernah pil
   berteks. Padding kiri/kanan disamakan dengan padding konten sehingga judul
   dan kartu pertama berbagi satu garis tepi kiri. */
[data-active-portal="pimpinan"] .leadership-topbar {
  min-height: 76px;
  align-items: center;
  gap: var(--sp-3);
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--d-page-pad) var(--sp-4);
  border-bottom: 1px solid rgba(225, 219, 204, .78);
  background: rgba(252, 251, 247, .94);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}
[data-active-portal="pimpinan"] .leadership-topbar__titles {
  min-width: 0;
  flex: 1;
  align-self: center;
}
[data-active-portal="pimpinan"] .leadership-topbar__eyebrow {
  display: block;
  overflow: hidden;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
[data-active-portal="pimpinan"] .leadership-topbar__title {
  margin: 3px 0 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-topbar__sub {
  display: -webkit-box;
  max-width: 100%;
  margin: var(--sp-1) 0 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  white-space: normal;
  text-overflow: clip;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
/* Slot aksi: wadah tanpa rupa; yang terlihat hanya tombol bundarnya. */
[data-active-portal="pimpinan"] .leadership-topbar__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
/* Tombol bundar tunggal: dipakai tombol kembali, cari, lonceng, dan
   "tindakan lain". Ukurannya identik supaya ketiganya terbaca sekeluarga. */
/* Ukuran dan bentuk datang dari `tokens.css` (--bell-size /
   --bell-radius), bukan dari angka milik portal ini. Selama tiap portal
   menuliskan radiusnya sendiri, bentuk lonceng tidak pernah seragam;
   dengan token, mengubahnya cukup di satu tempat. */
[data-active-portal="pimpinan"] .leadership-topbar__back,
[data-active-portal="pimpinan"] .leadership-round-action {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  flex: none;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--leadership-border);
  border-radius: var(--bell-radius);
  background: #fff;
  box-shadow: var(--elev-1);
  color: var(--leadership-navy-800);
  cursor: pointer;
}
[data-active-portal="pimpinan"] .leadership-topbar__glyph { display: block; }
@media (hover: hover) {
  [data-active-portal="pimpinan"] .leadership-topbar__back:hover,
  [data-active-portal="pimpinan"] .leadership-round-action:hover {
    border-color: rgba(19, 36, 73, .3);
    background: var(--leadership-surface-2, #f6f4ee);
  }
}
/* PENANDA BELUM DIBACA ADALAH PSEUDO-ELEMENT, BUKAN ANAK KEDUA.
   Baku topbar portal mewajibkan tombol bundar berisi TEPAT SATU anak,
   yaitu ikonnya; anak kedua membuat tinggi tombol berbeda antar portal.
   Dulu titik kuning di sini berupa span.notif-dot sebagai anak kedua.
   Sekarang titik yang sama digambar ::after dan dinyalakan atribut
   data-unread, persis seperti Portal Wali. Rupanya tidak berubah, dan
   jumlahnya tetap dibacakan pembaca layar lewat aria-label tombolnya. */
[data-active-portal="pimpinan"] .leadership-hero__bell[data-unread]::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: var(--sp-2);
  right: 9px;
  border: 2px solid #2A4784;
  border-radius: 50%;
  background: #FFCD4D;
}
/* Lonceng di hero berdiri di atas latar gelap; bentuknya tetap sama. */
[data-active-portal="pimpinan"] .leadership-hero .leadership-round-action {
  position: relative;
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
  color: #fff;
}
@media (hover: hover) {
  [data-active-portal="pimpinan"] .leadership-hero .leadership-round-action:hover {
    border-color: rgba(255, 255, 255, .5);
    background: rgba(255, 255, 255, .2);
  }
}

/* =====================================================================
   05  HERO EKSEKUTIF
   Satu identitas jelas, satu watermark lembaga yang tenang.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-hero {
  min-height: 286px;
  padding: calc(var(--sp-5) + env(safe-area-inset-top, 0px)) var(--sp-5) var(--sp-4);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: 0 0 30px 30px;
  background: var(--leadership-navy-900);
  box-shadow:
    inset 0 -1px 0 rgba(240, 211, 122, .34),
    0 15px 36px rgba(7, 20, 47, .22);
}
/* TANDA AIR TIDAK BOLEH MELEBARKAN HERO.
   Lambang ini sengaja mengintip dari sudut kanan bawah. Dulu ia berupa
   kotak 188px yang digantung 47px di luar tepi kanan; `overflow: hidden`
   menyembunyikannya dari mata, tetapi kotak itu tetap menambah lebar
   gulir hero menjadi 437px pada layar 390px — terbaca sebagai "isi
   terpotong 47px" dan tidak bisa dibedakan dari kalimat yang benar-benar
   terpangkas. Sekarang lapisannya seukuran hero (`inset: 0`) dan lambang
   digambar sebagai latar yang digeser: piksel di layar persis sama,
   lebar gulir tidak bertambah sedikit pun. */
[data-active-portal="pimpinan"] .leadership-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  opacity: .075;
  background: url("/presentasi/storage/brand/ibnuhajar-ih-mark.webp?v=20260802") right -47px bottom -49px / 188px 188px no-repeat;
  filter: grayscale(1) brightness(3.1);
  transform: none;
}
[data-active-portal="pimpinan"] .leadership-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 12% 0%, rgba(78, 116, 184, .24), transparent 36%),
    linear-gradient(90deg, transparent 0 68%, rgba(8, 98, 79, .48) 100%);
  box-shadow: inset 0 -4px 0 rgba(215, 165, 46, .78);
  pointer-events: none;
}
[data-active-portal="pimpinan"] .leadership-hero__content {
  min-height: 208px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 124px;
  align-items: center;
  gap: var(--sp-4);
  position: relative;
  z-index: 2;
}
[data-active-portal="pimpinan"] .leadership-hero__copy {
  min-width: 0;
  align-self: center;
  padding-top: 0;
}
[data-active-portal="pimpinan"] .leadership-hero .eyebrow {
  max-width: max-content;
  padding: var(--sp-1) var(--sp-2);
  border: 1px solid rgba(240, 211, 122, .26);
  border-radius: var(--r-pill);
  color: var(--leadership-gold-300);
  background: rgba(7, 20, 47, .32);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
/* Pil konteks adalah PERMUKAAN — ia punya bingkai emas dan latar sendiri,
   dan tepi kerasnya mendarat langsung di badan huruf nama yang setinggi
   30px. Jarak lama menyisakan 3px terukur di desktop dan 7px di ponsel.
   Nama pemimpin adalah jangkar hero, jadi ia mendapat satu tangga penuh. */
[data-active-portal="pimpinan"] .leadership-hero h1 {
  max-width: 225px;
  margin: var(--sp-5) 0 var(--sp-1);
  color: #fff;
  font-size: clamp(25px, 7vw, 30px);
  font-weight: var(--fw-heavy);
  letter-spacing: -.045em;
  line-height: 1.06;
  text-wrap: balance;
}
[data-active-portal="pimpinan"] .leadership-hero .school-line {
  max-width: 235px;
  color: var(--leadership-gold-300);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-hero__scope {
  max-width: 225px;
  margin: var(--sp-2) 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
/* Pemilih mode adalah permukaan gelap sendiri. Di ponsel ia duduk persis
   pada tepi bawah kotak isi hero — 3,9px dari huruf terakhir kalimat
   cakupan. Desktop sudah memakai `gap: var(--sp-3)` pada hero; baris ini
   menyamakan ponsel dengan angka yang sama. */
[data-active-portal="pimpinan"] .leadership-hero .leadership-mode-switcher { margin-top: var(--sp-3); }

/* Tombol pemberitahuan tetap terlihat tanpa menyaingi identitas pemimpin. */
[data-active-portal="pimpinan"] .leadership-hero__people {
  width: 124px;
  min-width: 0;
  min-height: 202px;
  position: relative;
  display: block;
}
[data-active-portal="pimpinan"] .leadership-hero__people > .round-btn {
  width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  position: absolute;
  z-index: 4;
  top: -4px;
  right: 0;
  color: #fff;
  border: 1px solid rgba(240, 211, 122, .3);
  background: rgba(7, 20, 47, .54);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .2);
}
[data-active-portal="pimpinan"] .leadership-hero__people > .round-btn .custom-icon {
  width: 21px;
  height: 21px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .24));
}

/* Pemimpin aktif adalah identitas; yang lain menjadi tombol ganti ringkas. */
[data-active-portal="pimpinan"] .leadership-avatar-stack {
  width: 124px;
  height: 168px;
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  justify-content: center;
  gap: 2px;
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame] {
  width: 40px;
  min-width: 40px;
  height: var(--touch-min);
  min-height: var(--touch-min);
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 2px;
  color: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .32);
  border-radius: var(--r-md);
  background: rgba(7, 20, 47, .72);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  cursor: pointer;
  transform: none;
  transition: transform var(--motion-base) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease), filter var(--motion-base) var(--motion-ease);
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame] .leadership-avatar {
  width: 34px;
  height: 38px;
  display: block;
  object-fit: cover;
  border: 0;
  border-radius: 9px;
  background: #dfe8ef;
}
/* Label pemimpin non-aktif dibaca screen reader, tidak digambar. */
[data-active-portal="pimpinan"] [data-leadership-avatar-frame] > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame].active {
  width: 92px;
  min-width: 92px;
  height: 112px;
  min-height: 112px;
  flex: 0 0 100%;
  order: -1;
  align-content: start;
  gap: var(--sp-1);
  padding: var(--sp-1);
  color: #fff;
  border: 3px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--leadership-navy-900), var(--leadership-navy-900)) padding-box,
    conic-gradient(from 30deg, #8d6216, #f7dda0, #c99425, #fff0ad, #8d6216) border-box;
  box-shadow:
    0 0 0 2px rgba(255, 244, 207, .12),
    0 13px 28px rgba(0, 0, 0, .3);
  filter: none;
  transform: none;
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame].active .leadership-avatar {
  width: 82px;
  height: 82px;
  border: 2px solid rgba(255, 255, 255, .86);
  border-radius: 18px;
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame].active > span {
  position: static;
  width: auto;
  height: auto;
  max-width: 80px;
  overflow: hidden;
  color: var(--leadership-gold-100);
  clip: auto;
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  text-overflow: ellipsis;
}
[data-active-portal="pimpinan"] [data-leadership-avatar-frame]:hover { border-color: rgba(240, 211, 122, .8); }
[data-active-portal="pimpinan"] [data-leadership-avatar-frame]:active { transform: translateY(1px) scale(.97); }

/* Pengalih peran dibaca sebagai segmented control, bukan navigasi kedua. */
[data-active-portal="pimpinan"] .leadership-mode-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-1);
  position: relative;
  z-index: 3;
  padding: var(--sp-1);
  border: 1px solid rgba(240, 211, 122, .18);
  border-radius: var(--r-lg);
  background: rgba(7, 20, 47, .68);
  box-shadow: none;
  backdrop-filter: none;
}
[data-active-portal="pimpinan"] .leadership-mode-chip {
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  border-radius: var(--r-sm);
  color: rgba(255, 255, 255, .78);
  background: transparent;
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
[data-active-portal="pimpinan"] .leadership-mode-chip.active {
  color: var(--leadership-navy-950);
  background: var(--leadership-gold-300);
  box-shadow: inset 0 0 0 1px rgba(141, 98, 22, .32);
}

/* =====================================================================
   06  FILTER BAR & FRESHNESS
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-filterbar {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
[data-active-portal="pimpinan"] .leadership-filterbar::-webkit-scrollbar { display: none; }
/* Chip filter kini tanpa ikon. Yang tampak: jenis filter (kecil, kapital),
   nilai aktif (tebal), dan satu caret. Ikon berwarna pada ukuran 17px
   terbaca seperti emoji dan tidak sekeluarga dengan sisa produk. */
[data-active-portal="pimpinan"] .leadership-filter-chip {
  min-width: max-content;
  min-height: var(--touch-min);
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: var(--leadership-indigo);
  border-color: rgba(36, 59, 114, .13);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .9);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  box-shadow: var(--elev-1);
}
[data-active-portal="pimpinan"] .leadership-filter-chip__kind {
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .leadership-filter-chip__value { color: var(--leadership-navy-800); }
[data-active-portal="pimpinan"] .leadership-filter-chip__caret {
  align-self: center;
  width: 12px;
  height: 12px;
  opacity: .55;
}
[data-active-portal="pimpinan"] .leadership-filter-chip__caret svg { display: block; width: 12px; height: 12px; }
@media (hover: hover) {
  [data-active-portal="pimpinan"] .leadership-filter-chip:hover { border-color: rgba(36, 59, 114, .32); }
}

/* Freshness beranda adalah provenance, bukan kartu konteks kedua. */
[data-active-portal="pimpinan"] .leadership-home > [data-home-freshness] {
  width: fit-content;
  max-width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  /* Sama seperti .leadership-provenance: padding + line-height snug pada
     baris pendek ini menyisakan jarak pecahan (49.6px) ke kartu radar
     berikutnya. line-height:1 menghapus sisa spasi baris; margin naik ke
     --sp-2 di atas supaya jarak ke grid metrik di atasnya tetap lapang. */
  margin: var(--sp-2) 0 var(--sp-1);
  padding: 0;
  color: var(--leadership-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1;
}
[data-active-portal="pimpinan"] .leadership-home > [data-home-freshness] > .custom-icon { display: none; }
[data-active-portal="pimpinan"] .leadership-home > [data-home-freshness]::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  border-radius: 50%;
  background: #0a7d62;
  box-shadow: 0 0 0 3px rgba(8, 122, 96, .11);
}
[data-active-portal="pimpinan"] .leadership-home > [data-home-freshness] > span:not(.custom-icon) {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* =====================================================================
   07  IKON, KARTU METRIK, PROVENANCE
   ===================================================================== */
[data-active-portal="pimpinan"] .custom-icon {
  background-size: contain;
  background-position: center;
  filter: none;
}
[data-active-portal="pimpinan"] .leadership-icon-tile {
  width: 43px;
  height: 43px;
  min-width: 43px;
  min-height: 43px;
  flex: none;
  padding: var(--sp-1);
  border: 1px solid var(--leadership-border-soft);
  border-radius: var(--r-md);
  background: #f2f5f8;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-icon-tile .custom-icon { width: 31px; height: 31px; }
[data-active-portal="pimpinan"] .leadership-icon-tile.green { background: #eaf5f0; }
[data-active-portal="pimpinan"] .leadership-icon-tile.gold { background: #fbf3dc; }
[data-active-portal="pimpinan"] .leadership-icon-tile.warm { background: #faeee8; }
[data-active-portal="pimpinan"] .leadership-icon-tile.sky { background: #eaf3f8; }
[data-active-portal="pimpinan"] .leadership-icon-tile.purple { background: #f1ecf6; }

[data-active-portal="pimpinan"] .leadership-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leadership-card-gap);
}
[data-active-portal="pimpinan"] .leadership-metric {
  min-width: 0;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  text-align: left;
  border-color: var(--leadership-border);
  background: linear-gradient(150deg, #fff, #fcfbf7);
  box-shadow: var(--elev-1);
}
button.leadership-metric { cursor: pointer; }
[data-active-portal="pimpinan"] .leadership-metric.good { border-top: 3px solid #14946f; }
[data-active-portal="pimpinan"] .leadership-metric.warn { border-top: 3px solid #d7a52e; }
[data-active-portal="pimpinan"] .leadership-metric.danger { border-top: 3px solid #d95a54; }
[data-active-portal="pimpinan"] .leadership-metric.info { border-top: 3px solid #3d7fbb; }
/* Hierarki menurut bobot: KPI genting mendapat permukaan sendiri supaya mata
   pimpinan jatuh ke sana lebih dulu, tanpa mengubah geometri grid. */
[data-active-portal="pimpinan"] .leadership-metric.danger {
  border-color: rgba(217, 90, 84, .34);
  border-top-width: 4px;
  background: linear-gradient(150deg, #fff, #fff4f2);
  box-shadow: 0 8px 22px rgba(148, 46, 41, .1);
}
/* Tiga bobot, tiga berat baca.
   Sebelumnya "Risiko kepatuhan: Tinggi" dan "Rasio siswa:guru" tampil dengan
   ukuran, bayangan, dan tebal huruf yang persis sama, sehingga radar terbaca
   rata dan pembacanya harus memeriksa satu per satu. Sekarang kartu genting
   membawa angka lebih besar dan bayangan lebih dalam; kartu yang sudah sesuai
   target menepi. Geometri grid tidak disentuh — hanya beratnya. */
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="utama"] .leadership-metric__value {
  font-size: var(--fs-metric-lg);
  letter-spacing: -.04em;
}
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="utama"] .leadership-metric__label { color: #8f2d28; }
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="perlu"] {
  border-color: rgba(215, 165, 46, .32);
  box-shadow: 0 5px 16px rgba(124, 83, 0, .07);
}
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="tenang"] {
  background: #fff;
  box-shadow: 0 1px 3px rgba(19, 36, 73, .06);
}
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="tenang"] .leadership-metric__value {
  font-size: var(--fs-title);
  color: #24365c;
}
[data-active-portal="pimpinan"] .leadership-metric[data-kpi-weight="tenang"] .leadership-metric__status { opacity: .88; }
[data-active-portal="pimpinan"] .leadership-metric__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-metric__label {
  display: block;
  min-width: 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: .035em;
  line-height: var(--lh-snug);
  text-transform: uppercase;
  /* Label adalah flex item ber-min-width:0, jadi kotaknya boleh menyusut
     lebih sempit daripada kata terpanjangnya. Satu kata seperti "PENDAPATAN"
     lalu meluber keluar kotak dan berjalan MENEMBUS chevron di sudut kartu.
     Kotaknya tidak pernah bertumpuk — hanya tulisannya — sehingga kontrak
     yang memeriksa tumpang tindih kotak tidak pernah melihatnya.
     overflow-wrap memaksa kata panjang patah di dalam kotaknya sendiri. */
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-metric__chev {
  flex: none;
  display: grid;
  place-items: center;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  opacity: .42;
}
[data-active-portal="pimpinan"] .leadership-metric__chev .custom-icon { width: 14px; height: 14px; background-size: 14px 14px; }
[data-active-portal="pimpinan"] .leadership-metric__value {
  display: block;
  margin-top: auto;
  color: var(--ink);
  font-size: var(--fs-metric-md);
  font-weight: var(--fw-heavy);
  letter-spacing: -.035em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-metric small,
[data-active-portal="pimpinan"] .leadership-metric__deltatext,
[data-active-portal="pimpinan"] .leadership-metric__target {
  display: block;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Perubahan: panah arah + angka. Arah terbaca sekejap tanpa membaca angka. */
[data-active-portal="pimpinan"] .leadership-metric__delta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-1);
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-metric__delta .leadership-metric__deltatext { font-weight: var(--fw-bold); }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="good"] .leadership-metric__deltatext { color: #0f7a5c; }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="warn"] .leadership-metric__deltatext { color: #8d6216; }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="danger"] .leadership-metric__deltatext { color: #a03a34; }
[data-active-portal="pimpinan"] .leadership-metric__arrow {
  flex: none;
  align-self: center;
  width: 12px;
  height: 12px;
  color: currentColor;
}
[data-active-portal="pimpinan"] .leadership-metric__arrow svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-active-portal="pimpinan"] .leadership-metric__arrow[data-kpi-direction="turun"] svg { transform: rotate(180deg); }
[data-active-portal="pimpinan"] .leadership-metric__arrow[data-kpi-direction="tetap"] svg { transform: rotate(90deg); }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="good"] .leadership-metric__arrow { color: #0f7a5c; }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="warn"] .leadership-metric__arrow { color: #8d6216; }
[data-active-portal="pimpinan"] .leadership-metric__delta[data-kpi-tone="danger"] .leadership-metric__arrow { color: #a03a34; }
[data-active-portal="pimpinan"] .leadership-metric__compare {
  flex: 1 1 100%;
  min-width: 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Kurva enam bulan dan bilah capaian. Garis putus adalah target. */
[data-active-portal="pimpinan"] .leadership-metric__spark {
  display: block;
  width: 100%;
  height: 32px;
  margin-top: var(--sp-1);
}
/* Kurva dan bilah menempati SLOT setinggi sama.
   Begitu satu baris memuat kartu berkurva dan kartu berbilah, slot yang
   tingginya berbeda membuat angka besar di kedua kartu berhenti pada garis
   yang berbeda — satu baris terbaca miring walau kotak kartunya sejajar.
   Bilah tetap setipis 6px, tetapi diletakkan di tengah slot 32px. */
[data-active-portal="pimpinan"] .leadership-metric__spark--bar {
  height: 32px;
  display: grid;
  align-content: center;
}
[data-active-portal="pimpinan"] .leadership-metric__spark--bar svg { height: 6px; }
[data-active-portal="pimpinan"] .leadership-metric__spark svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
[data-active-portal="pimpinan"] .leadership-metric__sparkline {
  fill: none;
  stroke: #2b6f9c;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
[data-active-portal="pimpinan"] .leadership-metric__sparkarea { fill: rgba(43, 111, 156, .12); stroke: none; }
[data-active-portal="pimpinan"] .leadership-metric__sparktarget {
  fill: none;
  stroke: rgba(141, 98, 22, .8);
  stroke-width: 1.2;
  stroke-dasharray: 4 3;
}
[data-active-portal="pimpinan"] .good .leadership-metric__sparkline { stroke: #0f7a5c; }
[data-active-portal="pimpinan"] .good .leadership-metric__sparkarea { fill: rgba(15, 122, 92, .13); }
[data-active-portal="pimpinan"] .warn .leadership-metric__sparkline { stroke: #b0801d; }
[data-active-portal="pimpinan"] .warn .leadership-metric__sparkarea { fill: rgba(176, 128, 29, .14); }
[data-active-portal="pimpinan"] .danger .leadership-metric__sparkline { stroke: #c0453e; }
[data-active-portal="pimpinan"] .danger .leadership-metric__sparkarea { fill: rgba(192, 69, 62, .13); }
[data-active-portal="pimpinan"] .leadership-metric__trackbed { fill: rgba(19, 36, 73, .1); }
[data-active-portal="pimpinan"] .leadership-metric__trackfill { fill: #2b6f9c; }
[data-active-portal="pimpinan"] .good .leadership-metric__trackfill,
[data-active-portal="pimpinan"] [data-layer-tone="good"] .leadership-metric__trackfill { fill: #0f7a5c; }
[data-active-portal="pimpinan"] .warn .leadership-metric__trackfill,
[data-active-portal="pimpinan"] [data-layer-tone="warn"] .leadership-metric__trackfill { fill: #b0801d; }
[data-active-portal="pimpinan"] .danger .leadership-metric__trackfill,
[data-active-portal="pimpinan"] [data-layer-tone="danger"] .leadership-metric__trackfill { fill: #c0453e; }
[data-active-portal="pimpinan"] .leadership-metric__ticker { fill: rgba(13, 34, 72, .72); }
/* Kaki kartu: status berbentuk + target. */
[data-active-portal="pimpinan"] .leadership-metric__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Chip status membawa latar sendiri; ketika kaki kartu terpaksa
     membungkus, tepi keras chip itu mendarat 3px di atas huruf "Target".
     Jarak antar baris memakai satu tangga penuh, jarak menyamping tetap
     rapat karena keduanya duduk sebaris. */
  gap: var(--sp-3) var(--sp-2);
  min-width: 0;
  margin-top: var(--sp-1);
  padding-top: var(--sp-2);
  border-top: 1px solid rgba(19, 36, 73, .08);
}
[data-active-portal="pimpinan"] .leadership-metric__status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="good"] { color: #0b6049; background: #e6f6f0; }
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="warn"] { color: #7c5300; background: #fdf3dc; }
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="danger"] { color: #8f2d28; background: #fdece9; }
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="info"] { color: #2b4d80; background: #eaf1fa; }
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="gold"] { color: #7c5300; background: #fdf3dc; }
[data-active-portal="pimpinan"] .leadership-metric__status[data-kpi-status="neutral"] { color: var(--leadership-muted); background: rgba(19, 36, 73, .06); }

/* Glif status: bentuk yang bermakna, bukan bulatan. Dipakai bersama warna
   sehingga warna tidak pernah menjadi satu-satunya pembeda status. */
[data-active-portal="pimpinan"] .leadership-status-glyph {
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 0;
  background: transparent;
}
[data-active-portal="pimpinan"] .leadership-status-glyph svg { display: block; width: 12px; height: 12px; }

/* Gerak terkendali: kartu muncul bertahap, kurva tergambar dari kiri ke
   kanan. Semuanya mati bila pengguna meminta gerak dikurangi. */
/* AKAR "kartu pertama duduk lebih tinggi".
   Reveal bertahap dulu menggeser tiap kartu 10px pada sumbu Y dengan jeda
   berbeda. Selama animasi berjalan, kartu pertama sudah mendarat sementara
   tetangganya masih naik — satu baris kartu terbaca tidak sejajar, di beranda
   maupun di halaman keuangan. Satu sebab, dua tempat, persis seperti laporan.

   Efek sampingnya juga memukul kontrak: verify-leadership-detail-visual
   mengelompokkan kartu ke baris memakai koordinat Y yang dibulatkan per 4px,
   jadi selisih 2px mid-animasi memecah satu baris menjadi dua dan memicu
   "orphan-kpi-grid" yang sebenarnya tidak ada.

   Perbaikannya: KOTAK KARTU TIDAK PERNAH BERGERAK. Kartu hanya menaik-turunkan
   opasitas, sehingga koordinat Y-nya tetap sejak frame pertama. Gerak vertikal
   dipindahkan ke ISI kartu, yang tidak menentukan tinggi baris. */
@keyframes leadership-metric-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes leadership-metric-content-in {
  from { opacity: 0; transform: translate3d(0, 6px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes leadership-spark-draw {
  from { stroke-dashoffset: 260; }
  to { stroke-dashoffset: 0; }
}
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric {
  animation: leadership-metric-in var(--motion-base) var(--motion-ease) both;
}
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(1) { animation-delay: 0ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(2) { animation-delay: 40ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(3) { animation-delay: 80ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(4) { animation-delay: 120ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(5) { animation-delay: 160ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(6) { animation-delay: 200ms; }
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric:nth-child(n+7) { animation-delay: 240ms; }
/* Isi kartu naik sedikit; tingginya tidak menentukan tinggi baris grid,
   jadi kesejajaran kartu tetap terjaga sepanjang animasi. */
[data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric > * {
  animation: leadership-metric-content-in var(--motion-base) var(--motion-ease) both;
  animation-delay: inherit;
}
[data-active-portal="pimpinan"] .leadership-metric__sparkline {
  stroke-dasharray: 260;
  animation: leadership-spark-draw var(--motion-slow) var(--motion-ease) both;
  animation-delay: 120ms;
}
html.reduce-motion .leadership-metric-grid > .leadership-metric,
html.reduce-motion .leadership-metric-grid > .leadership-metric > * { animation: none; }
html.reduce-motion .leadership-metric__sparkline { animation: none; stroke-dasharray: none; }
/* Permintaan sistem operasi dihormati walau sakelar dalam aplikasi belum
   disentuh. --motion-* sudah menjadi 0ms di tokens.css, tetapi animasi dengan
   fill "both" tetap menahan keadaan awal, jadi animasinya dimatikan penuh. */
@media (prefers-reduced-motion: reduce) {
  [data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric,
  [data-active-portal="pimpinan"] .leadership-metric-grid > .leadership-metric > *,
  [data-active-portal="pimpinan"] .leadership-metric__sparkline { animation: none; }
  [data-active-portal="pimpinan"] .leadership-metric__sparkline { stroke-dasharray: none; }
}

[data-active-portal="pimpinan"] .leadership-provenance {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  width: fit-content;
  max-width: 100%;
  /* Baris asal-usul data selalu berdiri tepat di bawah grid kartu KPI.
     Kartu KPI berlatar (chips status) ke teks butuh 12px minimum, bukan
     8px — delapan piksel dulu masih membuat tepi keras kartu terakhir
     mendarat 4px terlalu dekat dari huruf caption di bawahnya. Dua belas
     piksel (--sp-3) adalah anak tangga token yang benar untuk pasangan
     kartu-ke-teks ini. */
  margin: var(--sp-3) 0 0;
  /* min-height:28px dulu memusatkan baris caption (12px) di kotak yang
     lebih tinggi darinya, menyisakan spasi tak-rata di atas huruf yang
     tidak kelipatan 4px — jarak ke section berikutnya jadi angka pecahan
     seperti 45.6px alih-alih tangga token bulat. Tanpa min-height dan
     padding, tinggi baris murni mengikuti tinggi baris teksnya sendiri
     (line-height token), sehingga jarak antar-section kembali rapi. */
  padding: 0;
  color: var(--leadership-muted);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
[data-active-portal="pimpinan"] .leadership-provenance .custom-icon {
  width: 14px;
  height: 14px;
  flex: none;
}

/* Layar "Kondisi Layar" (demo-state) membuka dengan baris chip pemilih
   skenario (.chips, komponen bersama lintas portal). `.chips` sengaja
   memberi padding-bottom 2px agar cincin fokus tombolnya tidak terpotong
   oleh overflow-x:auto — jarak visualnya tetap wajar, hanya 2px di luar
   kelipatan 4. Menghapus padding itu akan berlaku ke SEMUA portal dan
   berisiko memotong fokus keyboard, jadi bukan .chips yang disentuh:
   section pertama di route ini digeser 2px supaya jaraknya kembali ke
   tangga token bulat (32px genggam / 40px desktop). */
[data-active-portal="pimpinan"] .leadership-route-demo-state > .chips + .section {
  margin-top: 2px;
}

/* Bar fallback ketika modul chart tidak dimuat. */
[data-active-portal="pimpinan"] .leadership-bar {
  height: 8px;
  overflow: hidden;
  border-radius: var(--r-pill);
  background: #e6ebf2;
}
[data-active-portal="pimpinan"] .leadership-bar__fill {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: var(--leadership-emerald);
}
[data-active-portal="pimpinan"] .leadership-bar__fill--collection { width: 91.8%; }

/* =====================================================================
   08  BARIS DAFTAR GENERIK
   Grid bernama menjaga copy, status, dan chevron sebagai sibling yang
   tidak pernah bertabrakan. Baris sinyal dan keputusan memakai kontrak
   sendiri di bagian 09 dan 10, sehingga dikecualikan di sini.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-list-row {
  min-width: 0;
  min-height: 66px;
  text-align: left;
}
[data-active-portal="pimpinan"] .leadership-list-row .list-title {
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-list-row .list-meta {
  margin-top: 2px;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
/* Angka utama di dalam baris memakai ukuran baris tetapi bobot tegas. */
[data-active-portal="pimpinan"] .leadership-row-figure {
  font: inherit;
  color: var(--text);
  font-weight: var(--fw-heavy);
}
[data-active-portal="pimpinan"] .leadership-row-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
  align-items: baseline;
}

[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) var(--leadership-row-tail);
  grid-template-areas:
    "icon main tail"
    "icon status tail";
  align-items: center;
  align-content: center;
  gap: var(--sp-2) var(--leadership-content-gap);
  padding: var(--sp-3) var(--sp-4);
}
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .leadership-icon-tile {
  grid-area: icon;
  align-self: center;
  inline-size: var(--leadership-row-icon);
  block-size: var(--leadership-row-icon);
  min-inline-size: var(--leadership-row-icon);
  min-block-size: var(--leadership-row-icon);
  max-inline-size: var(--leadership-row-icon);
  max-block-size: var(--leadership-row-icon);
}
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .list-main {
  grid-area: main;
  width: 100%;
  min-width: 0;
  overflow: visible;
}
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .status,
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .switch,
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .list-value,
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .small-btn,
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .text-btn {
  grid-area: status;
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  white-space: normal;
  text-align: left;
}
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .custom-icon:last-child {
  grid-area: tail;
  justify-self: end;
  align-self: center;
}
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .status {
  min-height: 28px;
  padding-inline: var(--sp-3);
  line-height: var(--lh-tight);
}
/* EKOR GANDA.
   Grid di atas hanya punya SATU area untuk benda di ekor baris. Halaman
   laporan mengirim dua benda ke sana — chip status dan tombol pratinjau —
   sehingga keduanya duduk di sel yang sama dan benar-benar saling
   menimpa; terukur 67–125px pada keempat varian status. Pembungkus
   `.leadership-row-tailgroup` menjadikan keduanya satu sel yang isinya
   berbaris sendiri, jadi baris tidak lagi bergantung pada berapa banyak
   benda yang dibawa ekornya. */
[data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .leadership-row-tailgroup {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  min-width: 0;
  max-width: 100%;
  justify-self: start;
  /* Di layar sempit ekor turun ke baris keduanya sendiri; row-gap grid
     bernilai 8px, sedangkan tepi keras tombol yang mendarat di bawah
     huruf keterangan butuh 12px. */
  margin-top: var(--sp-1);
}
[data-active-portal="pimpinan"] .leadership-row-tailgroup > .status {
  flex: none;
  min-height: 28px;
  padding-inline: var(--sp-3);
  line-height: var(--lh-tight);
}
[data-active-portal="pimpinan"] .leadership-row-tailgroup > .text-btn,
[data-active-portal="pimpinan"] .leadership-row-tailgroup > .small-btn {
  flex: none;
  min-width: 0;
  text-align: left;
}

@media (min-width: 600px) {
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) {
    grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) max-content var(--leadership-row-tail);
    grid-template-areas: "icon main status tail";
    gap: 0 var(--sp-3);
  }
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile):not(:has(> .custom-icon:last-child)) {
    grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) max-content;
    grid-template-areas: "icon main status";
  }
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .status,
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .switch,
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .list-value,
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .small-btn,
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .text-btn {
    justify-self: end;
    white-space: nowrap;
    text-align: right;
  }
  [data-active-portal="pimpinan"] .leadership-list-row:not(.leadership-signal-row):not(.leadership-decision-row):has(> .leadership-icon-tile) > .leadership-row-tailgroup {
    flex-wrap: nowrap;
    justify-self: end;
    margin-top: 0;
  }
  [data-active-portal="pimpinan"] .leadership-row-tailgroup > .text-btn,
  [data-active-portal="pimpinan"] .leadership-row-tailgroup > .small-btn {
    white-space: nowrap;
    text-align: right;
  }
}

/* Status tetap terbaca tanpa warna: border plus penanda bentuk per tone. */
[data-active-portal="pimpinan"] .leadership-page .status,
[data-active-portal="pimpinan"] .leadership-home .status {
  min-height: 28px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .46);
}
/* Penanda status adalah GLIF SVG, bukan bulatan.
   Aturan lama pernah memaksa .dot menjadi kotak 7px, memutarnya 45 derajat,
   dan menambah cincin box-shadow. Ketika glif SVG masuk, aturan itu masih
   berlaku: kotaknya menyusut ke 7px sementara SVG di dalamnya tetap 12px,
   sehingga glif meluber 5px dan menempel ke huruf pertama label — inilah
   sebab chip "Kritis" terbaca tanpa spasi. Rotasi juga merusak bentuk, karena
   segitiga peringatan menjadi miring dan kehilangan maknanya.

   Sekarang kotak dan isi memakai satu ukuran, dan tidak ada transform apa pun.
   Bentuk dibedakan oleh gambar SVG-nya sendiri (centang, segitiga, oktagon,
   jam, lingkaran-i), sehingga warna tidak pernah menjadi satu-satunya
   pembeda status. */
[data-active-portal="pimpinan"] .leadership-page .status .dot,
[data-active-portal="pimpinan"] .leadership-home .status .dot {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

/* Permukaan antrean padat: urgensi dikomunikasikan status dan ikon. */
[data-active-portal="pimpinan"] .leadership-signal-panel .list-card,
[data-active-portal="pimpinan"] .leadership-decision-queue .list-card {
  overflow: clip;
  border-color: var(--leadership-border);
  background: #fff;
  box-shadow: var(--elev-1);
}
/* Kartu "Prioritas pengurus" dipindah keluar dari kartu kurva menjadi
   barisnya sendiri (lihat renderRouteCharts(), portal-leadership.js) —
   detailnya ada di komentar pada fungsi itu. Section pembungkusnya sudah
   memakai kelas .leadership-section umum, jadi ritme jarak ke section
   sebelum/sesudahnya otomatis ikut var(--d-section-gap) seperti section
   lain; yang perlu ditambahkan hanya lebar penuhnya di grid desktop
   (lihat blok data-home-block di bagian 23, ≥900px). */

/* =====================================================================
   09  BARIS SINYAL
   Severity menempel pada sinyalnya, tidak dilempar ke kolom kanan yang
   menggelembungkan tinggi baris pada layar sempit.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-signal-row {
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 4px var(--leadership-row-icon-dense) minmax(0, 1fr) max-content var(--leadership-row-tail-dense);
  grid-template-rows: auto;
  column-gap: var(--sp-2);
  row-gap: 0;
  padding: var(--sp-3) var(--sp-2);
  align-items: center;
  align-content: center;
  text-align: left;
}
[data-active-portal="pimpinan"] .leadership-row-rail {
  grid-column: 1;
  grid-row: 1;
  min-height: var(--touch-min);
  align-self: stretch;
  min-height: 0;
  border-radius: var(--r-pill);
}
[data-active-portal="pimpinan"] .leadership-row-rail--danger { background: #c94b4b; }
[data-active-portal="pimpinan"] .leadership-row-rail--warn { background: #d69222; }

[data-active-portal="pimpinan"] .leadership-signal-row > [data-row-icon] {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  inline-size: var(--leadership-row-icon-dense);
  block-size: var(--leadership-row-icon-dense);
  min-inline-size: var(--leadership-row-icon-dense);
  min-block-size: var(--leadership-row-icon-dense);
  max-inline-size: var(--leadership-row-icon-dense);
  max-block-size: var(--leadership-row-icon-dense);
}
[data-active-portal="pimpinan"] .leadership-signal-row > [data-row-content] {
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-signal-row > [data-row-status] {
  grid-column: 4;
  grid-row: 1;
  min-height: 24px;
  padding: 3px var(--sp-2);
  justify-self: end;
  align-self: center;
  white-space: nowrap;
}
[data-active-portal="pimpinan"] .leadership-signal-row > [data-row-chevron] {
  grid-column: 5;
  grid-row: 1;
  display: grid;
  place-items: center;
  inline-size: var(--leadership-row-tail-dense);
  min-inline-size: var(--leadership-row-tail-dense);
  justify-self: end;
  align-self: center;
}
[data-active-portal="pimpinan"] .leadership-signal-row > [data-row-chevron] .custom-icon {
  inline-size: var(--leadership-row-tail-dense);
  block-size: var(--leadership-row-tail-dense);
}
[data-active-portal="pimpinan"] .leadership-signal-row .list-title {
  font-size: var(--fs-caption);
  line-height: 1.28;
}
[data-active-portal="pimpinan"] .leadership-signal-row .list-meta {
  margin-top: 1px;
  font-size: var(--fs-caption);
  line-height: 1.34;
}

@media (min-width: 600px) {
  [data-active-portal="pimpinan"] .leadership-signal-row {
    grid-template-columns: 4px var(--leadership-row-icon-dense) minmax(0, 1fr) max-content var(--leadership-row-tail-dense);
    grid-template-rows: auto;
    column-gap: var(--sp-3);
    row-gap: 0;
    padding-block: var(--sp-3);
    align-items: center;
  }
  [data-active-portal="pimpinan"] .leadership-signal-row > .leadership-row-rail {
    grid-row: 1;
    min-height: var(--touch-min);
  }
  [data-active-portal="pimpinan"] .leadership-signal-row > [data-row-icon] { grid-row: 1; }
  [data-active-portal="pimpinan"] .leadership-signal-row > [data-row-content] { grid-row: 1; align-self: center; }
  [data-active-portal="pimpinan"] .leadership-signal-row > [data-row-status] {
    grid-column: 4;
    grid-row: 1;
    justify-self: end;
    align-self: center;
  }
  [data-active-portal="pimpinan"] .leadership-signal-row > [data-row-chevron] { grid-column: 5; grid-row: 1; }
}

/* --- Varian compact (Command Center) --------------------------------
   Judul dan severity berbagi satu baris; fakta dan perubahan menjadi dua
   kalimat penuh di bawahnya. */
[data-active-portal="pimpinan"] .leadership-signal-row--compact {
  grid-template-columns: 3px var(--leadership-row-icon-dense) minmax(0, 1fr) var(--leadership-row-tail-dense);
  grid-template-rows: auto;
  column-gap: var(--sp-2);
  row-gap: 0;
  padding: var(--sp-1) var(--sp-3);
  align-items: center;
  align-content: center;
}
[data-active-portal="pimpinan"] .leadership-signal-row--compact > .leadership-row-rail {
  grid-row: 1;
  width: 3px;
  height: auto;
  min-height: 0;
  align-self: stretch;
}
[data-active-portal="pimpinan"] .leadership-signal-row--compact > [data-row-icon] { grid-row: 1; align-self: center; }
[data-active-portal="pimpinan"] .leadership-signal-row--compact > [data-row-content] {
  grid-row: 1;
  display: block;
  align-self: center;
}
/* Varian compact hanya punya empat lajur: chevron ditarik kembali dari
   lajur status milik varian penuh. */
[data-active-portal="pimpinan"] .leadership-signal-row--compact > [data-row-chevron] {
  grid-column: 4;
  grid-row: 1;
  justify-self: center;
  margin: 0;
}
/* Judul dan chip status berbagi satu baris. Jaraknya dinaikkan ke --sp-4
   dan judul diberi bantalan kanan tambahan supaya baris kedua judul yang
   membungkus pun tidak pernah merapat ke chip. */
[data-active-portal="pimpinan"] .leadership-row-headline {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: var(--sp-4);
  min-width: 0;
  /* Angka 3px mentah menyisakan 7px terukur antara tepi keras chip status
     dan baris fakta di bawahnya. Diganti dengan tangga token. */
  margin: 0 0 var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-row-headline > [data-row-title] { padding-right: var(--sp-1); }
[data-active-portal="pimpinan"] .leadership-row-headline > [data-row-title] {
  display: block;
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-severity] {
  display: inline-flex;
  width: auto;
  min-width: 0;
  min-height: 22px;
  margin: 0;
  padding: 2px var(--sp-2);
  align-self: start;
  justify-self: end;
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  white-space: nowrap;
}
/* Baris fakta: pemisah "·" digambar sebagai ::after di ekor tiap fakta.
   Dulu pemisah adalah elemen sendiri, sehingga saat baris membungkus titik
   itu bisa jatuh di AWAL baris berikutnya dan kalimatnya terbaca patah. */
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-facts],
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--sp-2);
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.32;
}
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-facts] > *,
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] > * {
  min-width: 0;
  position: relative;
}
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-facts] > *:not(:last-child)::after,
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] > *:not(:last-child)::after {
  content: "·";
  margin-left: var(--sp-2);
  color: rgba(19, 36, 73, .34);
}
/* Nilai memimpin baris perubahan+target sebagai satu unit ("Rp168 juta ·
   Perubahan +8,4% ... · Target ..."); ukurannya sedikit lebih besar dari
   fakta di sekitarnya supaya besarannya langsung terlihat sebelum
   membaca detail perubahan dan targetnya. */
[data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] > .leadership-row-figure {
  font-size: var(--fs-small);
}

@media (min-width: 600px) {
  [data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-facts] { white-space: nowrap; }
  /* Pasangan "perubahan" dan "target" tidak boleh patah DI TENGAH frasa,
     tetapi harus boleh turun baris ketika lajur isi menyempit. Dulu
     `nowrap` dipasang pada wadahnya, sehingga di beranda desktop — yang
     lajur isinya hanya 331px — delapan piksel terakhir kalimat target
     terpotong diam-diam tanpa elipsis. Sekarang yang tidak boleh patah
     adalah tiap fakta, bukan barisnya. */
  [data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
  }
  [data-active-portal="pimpinan"] .leadership-signal-row--compact [data-signal-change-target] > * { white-space: nowrap; }
  /* Varian compact tidak ikut memakai lajur status desktop. */
  [data-active-portal="pimpinan"] .leadership-signal-row--compact {
    grid-template-columns: 3px var(--leadership-row-icon-dense) minmax(0, 1fr) var(--leadership-row-tail-dense);
  }
  [data-active-portal="pimpinan"] .leadership-signal-row--compact > [data-row-chevron] { grid-column: 4; }
}

/* =====================================================================
   10  BARIS KEPUTUSAN
   Satu kontrak untuk kedua konteks: ikon | isi | (status) | chevron
   sebagai kotak nyata yang bersebelahan. Varian compact menyarangkan
   status di dalam baris judul, bukan di lajur terpisah, sehingga judul
   panjang berbahasa Indonesia tetap punya lebar penuh.

   Catatan sejarah: versi lama melarutkan pembungkus dengan
   display:contents, sehingga [data-row-content] tidak punya geometri
   sama sekali (kotak 0x0) dan kontrak audit "icon.right <= content.left"
   mustahil terpenuhi. Pendekatan itu dibuang.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-decision-row {
  width: 100%;
  min-width: 0;
  min-height: 72px;
  display: grid;
  grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) max-content var(--leadership-row-tail);
  align-items: center;
  column-gap: var(--sp-3);
  row-gap: 0;
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
/* Varian compact tidak punya anak status langsung: lajur status dilepas. */
[data-active-portal="pimpinan"] .leadership-decision-row--compact {
  grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) var(--leadership-row-tail);
}
[data-active-portal="pimpinan"] .leadership-decision-row > [data-row-icon] {
  align-self: center;
  inline-size: var(--leadership-row-icon);
  block-size: var(--leadership-row-icon);
  min-inline-size: var(--leadership-row-icon);
  min-block-size: var(--leadership-row-icon);
  max-inline-size: var(--leadership-row-icon);
  max-block-size: var(--leadership-row-icon);
}
[data-active-portal="pimpinan"] .leadership-decision-row > [data-row-content] {
  display: grid;
  gap: var(--sp-1);
  min-width: 0;
  align-self: center;
}
[data-active-portal="pimpinan"] .leadership-decision-row > [data-row-chevron] {
  display: grid;
  place-items: center;
  width: var(--leadership-row-tail);
  min-width: var(--leadership-row-tail);
  align-self: center;
  justify-self: end;
}
[data-active-portal="pimpinan"] .leadership-decision-row [data-decision-status] {
  min-height: 24px;
  padding: 3px var(--sp-2);
  gap: var(--sp-1);
  align-self: start;
  justify-self: end;
  font-size: var(--fs-caption);
  line-height: var(--lh-tight);
  white-space: nowrap;
}

/* --- Action Center: lebih padat, judul lebih tegas ------------------ */
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row {
  min-height: 96px;
  grid-template-columns: var(--leadership-row-icon-dense) minmax(0, 1fr) var(--leadership-row-tail-dense);
  column-gap: var(--sp-3);
  padding: var(--sp-3);
}
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row > [data-row-icon] {
  inline-size: var(--leadership-row-icon-dense);
  block-size: var(--leadership-row-icon-dense);
  min-inline-size: var(--leadership-row-icon-dense);
  min-block-size: var(--leadership-row-icon-dense);
  max-inline-size: var(--leadership-row-icon-dense);
  max-block-size: var(--leadership-row-icon-dense);
}
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row > [data-row-chevron] {
  width: var(--leadership-row-tail-dense);
  min-width: var(--leadership-row-tail-dense);
}
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row > [data-row-chevron] .custom-icon {
  inline-size: var(--leadership-row-tail-dense);
  block-size: var(--leadership-row-tail-dense);
}
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row [data-row-title] {
  display: block;
  min-width: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row [data-decision-context],
[data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row [data-decision-value-time] {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

@media (min-width: 600px) {
  [data-active-portal="pimpinan"] .leadership-route-actions .leadership-decision-row {
    min-height: 80px;
    padding: var(--sp-3);
  }
}

/* =====================================================================
   11  LIMA PILAR
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leadership-card-gap);
}

/* PRATINJAU KEUANGAN DI BERANDA
   Wadahnya sebelumnya tidak punya satu pun aturan, padahal ia menumpuk
   tiga blok: grid KPI, kartu bagan, lalu catatan varians. Tanpa jarak,
   kartu KPI mendarat tepat pada tepi atas kartu bagan dan kartu bagan
   pada catatan di bawahnya — keduanya terukur 0px. */
[data-active-portal="pimpinan"] .leadership-finance-preview {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--leadership-card-gap);
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-finance-preview > * {
  min-width: 0;
  margin: 0;
}
/* Kotak "Makna keputusan" (kurva) dan notice varians dulu berdiri sebagai
   DUA kotak hangat beruntun tepat di bawah kartu kurva — dua permukaan
   sama-sama bernada peringatan, membahas gap target & tunggakan >90 hari
   dengan kata yang nyaris sama, sehingga terbaca sebagai peringatan
   ganda. Notice sekarang bersarang DI DALAM kartu kurva itu sendiri
   (lihat financePreview(), portal-leadership.js) — aturan di bawah
   melepas latar, bingkai, dan padding bawaan `.notice.warn` sehingga ia
   terbaca sebagai BARIS RINCIAN dari satu kartu (kesimpulan lalu angka),
   bukan kartu peringatan kedua. Teks & data-finance-variance tidak
   berubah — hanya bentuk visualnya. */
[data-active-portal="pimpinan"] .leadership-finance-preview .lchart-card > .leadership-finance-variance--nested {
  margin-top: var(--sp-4);
  padding: var(--sp-4) 0 0;
  border-top: 1px solid rgba(217, 154, 24, .22);
  border-radius: 0;
  background: none;
}
[data-active-portal="pimpinan"] .leadership-pillar-card {
  min-width: 0;
  min-height: 194px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  position: relative;
  overflow: hidden;
  text-align: left;
  border-color: var(--leadership-border);
  background:
    radial-gradient(circle at 112% -12%, rgba(215, 165, 46, .13), transparent 42%),
    linear-gradient(150deg, #fff, #faf9f5);
  box-shadow: var(--leadership-shadow);
}
[data-active-portal="pimpinan"] .leadership-pillar-card:nth-child(5) { grid-column: 1 / -1; min-height: 158px; }
[data-active-portal="pimpinan"] .leadership-pillar-card__number {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-3);
  color: rgba(36, 59, 114, .14);
  font-size: 28px;
  font-weight: var(--fw-heavy);
  letter-spacing: -.05em;
}
[data-active-portal="pimpinan"] .leadership-pillar-card > strong {
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-pillar-card__value {
  color: var(--leadership-indigo);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  letter-spacing: -.025em;
}
[data-active-portal="pimpinan"] .leadership-pillar-card > small {
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* =====================================================================
   12  DIREKTORI LAYANAN
   Matriks responsif: 2 kolom di ponsel, 3–6 kolom mengikuti lebar
   container aslinya, bukan lebar viewport.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-page section:has(> .leadership-service-grid),
[data-active-portal="pimpinan"] .leadership-home section:has(> .leadership-service-grid) {
  container-type: inline-size;
}
[data-active-portal="pimpinan"] .leadership-service-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  align-items: stretch;
  gap: var(--sp-4) var(--sp-3);
  overflow: visible;
}
/* Saat grid layanan menutup sebuah section (halaman Semua Layanan dan
   Telaah Strategis di Analisis), kartunya sendiri transparan (tanpa
   latar/tepi), jadi tinta yang benar-benar terlihat adalah label teks di
   baris terakhir, bukan kotak pembungkus tombol. Padding bawah tombol
   layanan (8px) plus sisa baris labelnya menambah 9px kosong yang tidak
   masuk hitungan `gap` — jarak ke judul section berikutnya jadi 41/49px,
   bukan kelipatan 4. Margin negatif ini menarik kotak section sejauh 9px
   itu supaya jarak tinta-ke-tinta kembali ke ritme dasar (32px genggam /
   40px desktop). Varian kartu Beranda (--card, lihat di bawah) dikecualikan
   — bingkai putihnya sendiri sudah memberi jarak yang benar. */
[data-active-portal="pimpinan"] .leadership-service-grid:last-child:not(.leadership-service-grid--card) { margin-bottom: -9px; }
/* Beranda: tombol "tampilkan semua/ringkas" dulu berdiri sendiri sebagai
   pil lavender (.secondary-btn) di bawah grid, terlepas dari kartu ikon —
   dua permukaan berbeda warna yang terbaca sebagai elemen lepas, bukan
   satu section "Layanan pimpinan". Sekarang tombolnya dikirim lewat
   `serviceGrid(..., { footer })` sebagai anak terakhir grid itu sendiri
   (melebar penuh lewat grid-column), dan grid diberi bingkai kartu putih
   — ikon dan tombol jadi satu permukaan, sama seperti pola kartu bersama
   di bagian lain halaman ini (lihat cardSection()). Halaman lain (Semua
   Layanan, Telaah Strategis) tidak memakai `card`, jadi tampilannya di
   sana tidak berubah. */
[data-active-portal="pimpinan"] .leadership-service-grid.leadership-service-grid--card {
  background: #fff;
  border: 1px solid var(--leadership-border-soft);
  border-radius: var(--d-card-radius);
  box-shadow: var(--leadership-shadow);
  padding: var(--sp-4);
}
[data-active-portal="pimpinan"] .leadership-service-toggle {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--touch-min);
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border: 0;
  border-top: 1px solid var(--leadership-border-soft);
  border-radius: 0;
  background: transparent;
  color: var(--indigo);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  cursor: pointer;
}
[data-active-portal="pimpinan"] .leadership-service-toggle:active { opacity: .7; }
/* Ajakan di dalam kartu Hikmah butuh udara dari paragrafnya. */
[data-active-portal="pimpinan"] .leadership-hikmah-card > .text-btn,
[data-active-portal="pimpinan"] .leadership-hikmah-hero > .text-btn { margin-top: var(--sp-3); }
[data-active-portal="pimpinan"] .leadership-service-btn {
  width: 100%;
  min-width: 0;
  min-height: 116px;
  display: grid;
  grid-template-rows: 56px minmax(36px, auto);
  align-content: start;
  justify-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  background: transparent;
}
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  margin: 0;
  border: 1px solid var(--leadership-border-soft);
  border-radius: 17px;
  background: #eef2f7;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.green { background: #eaf5f0; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.gold { background: #fbf3dc; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.warm { background: #faeee8; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.sky { background: #eaf3f8; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.purple { background: #f1ecf6; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon.indigo { background: #edf1f7; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-icon .custom-icon { width: 40px; height: 40px; }
[data-active-portal="pimpinan"] .leadership-service-btn .service-name {
  width: 100%;
  max-width: 18ch;
  min-height: 36px;
  display: grid;
  place-items: start center;
  color: var(--leadership-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: 1.38;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}
[data-active-portal="pimpinan"] .leadership-service-btn .mini-badge {
  min-width: 22px;
  height: 22px;
  top: -7px;
  right: -7px;
  padding-inline: var(--sp-1);
  border-width: 2px;
  font-size: var(--fs-caption);
  line-height: 18px;
}

@container (min-width: 400px) {
  [data-active-portal="pimpinan"] .leadership-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container (min-width: 500px) {
  [data-active-portal="pimpinan"] .leadership-service-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Ambang enam kolom dulu 900px, mengasumsikan container selebar layar
   desktop tanpa sidebar (~1100px). Sidebar kiri (bagian 23 di
   portal-leadership.css) menyisakan ~860px untuk container ini di
   layar ≥900px — di bawah 900px, jadi jatuh ke tingkat 4 kolom kalau
   ambangnya tidak diturunkan. 800px dipilih: jauh di atas lebar
   container tablet (~450px, tetap dapat 4 kolom seperti sebelumnya)
   dan aman di bawah 860px yang sekarang tersedia di desktop. */
@container (min-width: 800px) {
  [data-active-portal="pimpinan"] .leadership-service-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* =====================================================================
   13  LAPISAN KEUANGAN
   ===================================================================== */
/* Kartu lapisan keuangan.
   Sebelumnya: nomor emas DAN ikon berdampingan (dua penanda identitas untuk
   satu tugas), satu baris keterangan, lalu tautan biru telanjang — kartunya
   setengah kosong dan tautannya terbaca murah. Sekarang: nomor saja sebagai
   penanda urutan (urutan lapisan memang bermakna), bilah capaian terhadap
   target sebagai isi yang berguna, dan SELURUH kartu menjadi tombol dengan
   penanda chevron. Tabel angkanya tetap terbuka lewat kartu itu, jadi
   kontrak "setiap chart punya tabel alternatif" tidak berkurang. */
[data-active-portal="pimpinan"] .leadership-layer-grid { display: grid; gap: var(--leadership-card-gap); }
[data-active-portal="pimpinan"] .leadership-layer-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-2) var(--sp-3);
  position: relative;
  padding: var(--sp-4);
  text-align: left;
  border-color: rgba(215, 165, 46, .22);
  background: linear-gradient(145deg, #fff, #fdfaf1);
  cursor: pointer;
}
[data-active-portal="pimpinan"] .leadership-layer-card__number {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #fff;
  border-radius: 9px;
  background: linear-gradient(145deg, #bf891d, #e8be5b);
  box-shadow: 0 5px 13px rgba(141, 98, 22, .18);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
[data-active-portal="pimpinan"] .leadership-layer-card__body { min-width: 0; display: grid; gap: var(--sp-1); }
[data-active-portal="pimpinan"] .leadership-layer-card__title {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-layer-card__desc {
  display: block;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-layer-card__meter {
  grid-column: 1 / -1;
  display: block;
  width: 100%;
  height: 6px;
  margin-top: var(--sp-1);
  border-radius: var(--r-pill);
  overflow: hidden;
}
[data-active-portal="pimpinan"] .leadership-layer-card__meter svg { display: block; width: 100%; height: 100%; }
[data-active-portal="pimpinan"] .leadership-layer-card__foot {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  min-width: 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-layer-card__foot > span:not(.leadership-layer-card__cta) { min-width: 0; flex: 1 1 auto; }
[data-active-portal="pimpinan"] .leadership-layer-card__cta {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-left: auto;
  color: var(--leadership-navy-800);
  font-weight: var(--fw-bold);
}
[data-active-portal="pimpinan"] .leadership-layer-card__cta .custom-icon { width: 14px; height: 14px; background-size: 14px 14px; }
@media (hover: hover) {
  [data-active-portal="pimpinan"] .leadership-layer-card:hover {
    border-color: rgba(215, 165, 46, .5);
    box-shadow: var(--elev-2);
  }
}

/* Pita KPI keuangan berdiri sendiri; tidak dibungkus panel kedua. */
[data-active-portal="pimpinan"] .leadership-route-finance {
  --finance-kpi-gutter: var(--sp-4);
  --finance-macro-gutter: var(--sp-6);
  --finance-chart-gutter: var(--sp-5);
}
[data-active-portal="pimpinan"] .leadership-route-finance > .leadership-metric-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--finance-kpi-gutter);
  /* Jarak ke blok berikutnya milik ritme halaman; margin di sini dulu
     menambahinya sehingga satu jarak pada halaman keuangan melar
     menjadi 56px sementara sisanya 32px. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-route-finance > .leadership-metric-grid .leadership-metric {
  min-height: 122px;
  padding: var(--sp-4);
  border: 1px solid var(--leadership-border);
  border-top: 3px solid var(--leadership-gold-500);
  border-radius: var(--r-lg);
  background: #fff;
  box-shadow: 0 5px 14px rgba(13, 34, 72, .045);
}
[data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section { margin-top: 0; }
[data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-grid {
  gap: var(--finance-chart-gutter);
  margin: var(--sp-5) 0 var(--finance-macro-gutter);
}
[data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-card {
  box-shadow: 0 6px 16px rgba(13, 34, 72, .05);
}

@media (min-width: 500px) and (max-width: 899px) {
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* =====================================================================
   14  MODULE CONTROL PLANE
   ===================================================================== */
/* Keterangan baris berakhir tepat 9px di atas kartu baris berikutnya;
   dua permukaan sejenis butuh satu tangga penuh yang benar-benar terlihat. */
[data-active-portal="pimpinan"] .leadership-module-matrix { display: grid; gap: var(--sp-4); }
[data-active-portal="pimpinan"] .leadership-module-card {
  overflow: hidden;
  border-color: var(--leadership-border);
  box-shadow: var(--leadership-shadow);
}
[data-active-portal="pimpinan"] .leadership-module-card__head {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
  /* Kepala kartu dan daftar modul di bawahnya dulu berjarak nol sehingga
     keduanya terbaca sebagai satu gumpalan. */
  margin-bottom: var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--leadership-border-soft, rgba(19, 36, 73, .08));
}
[data-active-portal="pimpinan"] .leadership-module-card__head h3 {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
[data-active-portal="pimpinan"] .leadership-module-card__head p {
  margin: 2px 0 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Baris modul yang berlatar sama dan tanpa garis pemisah hanya menyisakan
   9px antara huruf keterangan dan tepi baris berikutnya, sehingga dua
   baris terbaca menyatu. `--sp-3` mengembalikannya ke 12px yang diminta
   kontrak "kartu ke teks" tanpa menambah tinggi baris minimum. */
[data-active-portal="pimpinan"] .leadership-module-row {
  min-height: 55px;
  padding-block: var(--sp-3);
}
[data-active-portal="pimpinan"] .leadership-module-row .switch {
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(36, 59, 114, .12);
}
[data-active-portal="pimpinan"] .leadership-module-row[data-module-status="read-only"] { background: rgba(246, 246, 244, .78); }

/* =====================================================================
   14b  KOTAK ISIAN PENCARIAN
   ---------------------------------------------------------------------
   `.search-box` datang dari shell bersama tanpa satu pun aturan yang
   berlaku di portal ini: `display: block`, tanpa bingkai, tanpa jarak.
   Akibatnya ikon, kolom isian, dan tombol kirim berdiri persis
   berdempetan — tepi kanan yang satu adalah tepi kiri berikutnya, terukur
   0px pada halaman Hikmah maupun Pencarian. Kotak ini memberi mereka satu
   bingkai bersama dan jarak dari skala token.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-page .search-box,
[data-active-portal="pimpinan"] .leadership-home .search-box {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--leadership-border);
  border-radius: var(--r-md);
  background: #fff;
  box-shadow: var(--elev-1);
}
[data-active-portal="pimpinan"] .leadership-page .search-box > input,
[data-active-portal="pimpinan"] .leadership-home .search-box > input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-small);
}
[data-active-portal="pimpinan"] .leadership-page .search-box > input:focus,
[data-active-portal="pimpinan"] .leadership-home .search-box > input:focus { outline: none; }
[data-active-portal="pimpinan"] .leadership-page .search-box > input::placeholder,
[data-active-portal="pimpinan"] .leadership-home .search-box > input::placeholder { color: var(--leadership-muted); }
/* Ikon dan tombol tidak ikut menyusut; hanya kolom isian yang melar. */
[data-active-portal="pimpinan"] .leadership-page .search-box > :not(input),
[data-active-portal="pimpinan"] .leadership-home .search-box > :not(input) { flex: none; }
/* Cincin fokus pindah ke seluruh kotak, sebab bingkai kolom isian dilepas. */
[data-active-portal="pimpinan"] .leadership-page .search-box:focus-within,
[data-active-portal="pimpinan"] .leadership-home .search-box:focus-within {
  border-color: rgba(36, 59, 114, .42);
  box-shadow: 0 0 0 3px rgba(36, 59, 114, .14);
}

/* =====================================================================
   15  HIKMAH
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-hikmah-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(247, 221, 160, .26), transparent 37%),
    linear-gradient(140deg, #182457, #4a3274 58%, #0b6e66);
  box-shadow: 0 15px 38px rgba(59, 40, 102, .2);
}
[data-active-portal="pimpinan"] .leadership-hikmah-input {
  align-items: stretch;
  padding: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-hikmah-input input {
  min-width: 0;
  min-height: 40px;
  font-size: var(--fs-small);
}
[data-active-portal="pimpinan"] .leadership-hikmah-input .primary-btn {
  width: auto;
  min-height: 40px;
  padding-inline: var(--sp-3);
}
[data-active-portal="pimpinan"] .leadership-fact-grid,
[data-active-portal="pimpinan"] .leadership-simulation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-fact-grid > div,
[data-active-portal="pimpinan"] .leadership-simulation-grid > div {
  min-width: 0;
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border: 1px solid rgba(36, 59, 114, .11);
  border-radius: var(--r-md);
  background: #f7f8fb;
}
[data-active-portal="pimpinan"] .leadership-fact-grid span,
[data-active-portal="pimpinan"] .leadership-simulation-grid span {
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .leadership-fact-grid strong,
[data-active-portal="pimpinan"] .leadership-simulation-grid strong {
  color: var(--ink);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-hikmah-answer > p {
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-relaxed);
}

/* =====================================================================
   16  HALAMAN DETAIL APPROVAL & SINYAL
   Semua kelas di bawah menggantikan style="" yang dulu dipancarkan JS.
   ===================================================================== */
/* Halaman detail memakai ritme antar-blok yang sama dengan halaman lain.
   Sebelumnya `display: block` mematikan grid halaman, sehingga dua section
   yang berdampingan berjarak nol dan terbaca menyatu. */
[data-active-portal="pimpinan"] .leadership-route-approval-detail,
[data-active-portal="pimpinan"] .leadership-route-signal-detail { gap: var(--sp-4); }

[data-active-portal="pimpinan"] .leadership-detail-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-color: var(--leadership-border);
  background: #fff;
  box-shadow: var(--elev-2);
}
[data-active-portal="pimpinan"] .leadership-detail-card .leadership-decision-card__head {
  display: grid;
  grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr);
  grid-template-areas:
    "icon copy"
    ".    status";
  align-items: start;
  column-gap: var(--sp-3);
  row-gap: var(--sp-2);
  min-height: 0;
}
[data-active-portal="pimpinan"] .leadership-detail-card [data-approval-domain-icon],
[data-active-portal="pimpinan"] .leadership-detail-card [data-signal-domain-icon] {
  grid-area: icon;
  align-self: start;
  margin: 0;
}
[data-active-portal="pimpinan"] .leadership-detail-copy {
  grid-area: copy;
  min-width: 0;
}
[data-active-portal="pimpinan"] .leadership-detail-title {
  margin: var(--sp-1) 0;
  font-size: clamp(18px, 5.2vw, 21px);
  line-height: 1.22;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-detail-actors {
  margin: 0;
  color: var(--leadership-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-detail-card [data-approval-status],
[data-active-portal="pimpinan"] .leadership-detail-card [data-signal-severity] {
  grid-area: status;
  justify-self: start;
  max-width: 100%;
}

/* Ringkasan tiga sel tidak boleh meninggalkan kartu yatim. */
[data-active-portal="pimpinan"] [data-approval-summary-cells],
[data-active-portal="pimpinan"] [data-signal-value-cells] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leadership-card-gap);
  align-items: stretch;
}
[data-active-portal="pimpinan"] .leadership-detail-cell {
  display: grid;
  align-content: start;
  justify-content: initial;
  gap: var(--sp-1);
  min-width: 0;
  min-height: 108px;
  padding: var(--sp-3);
  background: var(--leadership-surface);
}
[data-active-portal="pimpinan"] [data-approval-summary-cells] > :last-child:nth-child(odd),
[data-active-portal="pimpinan"] [data-signal-value-cells] > :last-child:nth-child(odd) { grid-column: 1 / -1; }
[data-active-portal="pimpinan"] [data-approval-summary-cells] .leadership-metric__value,
[data-active-portal="pimpinan"] [data-signal-value-cells] .leadership-metric__value {
  margin-block: 2px;
  font-size: clamp(17px, 4.7vw, 21px);
  overflow-wrap: anywhere;
}

/* Tumpukan kartu di dalam section detail. */
[data-active-portal="pimpinan"] .leadership-stack { display: grid; gap: var(--sp-3); }
[data-active-portal="pimpinan"] .leadership-stack--diff { gap: var(--sp-3); padding: var(--sp-3); border-color: var(--leadership-border); background: #fff; }

/* Sumber/pembaruan dan aktor memakai pemisahan label–nilai eksplisit. */
[data-active-portal="pimpinan"] .leadership-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--leadership-border-soft);
  border-radius: var(--r-lg);
  background: #f5f7fa;
}
[data-active-portal="pimpinan"] .leadership-source-cell { display: grid; gap: var(--sp-1); min-width: 0; }
[data-active-portal="pimpinan"] .leadership-source-label {
  display: block;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .leadership-source-value { display: block; overflow-wrap: anywhere; }

[data-active-portal="pimpinan"] .leadership-detail-actor-box {
  display: grid;
  gap: 0;
  margin: 0;
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgba(19, 36, 73, .09);
  background: #f7f8fa;
}
[data-active-portal="pimpinan"] .leadership-detail-actor-box .receipt-row {
  display: grid;
  grid-template-columns: minmax(88px, .36fr) minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--leadership-border-soft);
}
[data-active-portal="pimpinan"] .leadership-detail-actor-box .receipt-row:last-child { border-bottom: 0; }
[data-active-portal="pimpinan"] .leadership-detail-actor-box .receipt-row > span,
[data-active-portal="pimpinan"] .leadership-detail-actor-box .receipt-row > strong {
  min-width: 0;
  margin: 0;
  text-align: left;
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* Perubahan approval adalah perbandingan sebelum/sesudah yang nyata. */
[data-active-portal="pimpinan"] .leadership-diff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  align-items: stretch;
  gap: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-diff__side {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  min-width: 0;
  min-height: 92px;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
[data-active-portal="pimpinan"] .leadership-diff__side--old {
  border-style: dashed;
  background: #f7f7f5;
}
[data-active-portal="pimpinan"] .leadership-diff__side--new {
  border: 2px solid rgba(8, 122, 96, .28);
  background: #edf8f4;
  box-shadow: 0 6px 18px rgba(8, 122, 96, .08);
}
[data-active-portal="pimpinan"] .leadership-diff__label {
  display: block;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
[data-active-portal="pimpinan"] .leadership-diff__label--new { color: var(--leadership-emerald); }
[data-active-portal="pimpinan"] .leadership-diff__value {
  display: block;
  font-size: var(--fs-subhead);
  overflow-wrap: anywhere;
}
[data-active-portal="pimpinan"] .leadership-diff__arrow {
  width: 30px;
  height: 30px;
  min-height: 30px;
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--leadership-muted);
  border: 1px solid rgba(19, 36, 73, .1);
  border-radius: var(--r-pill);
  background: #fff;
}
[data-active-portal="pimpinan"] .leadership-diff__arrow .custom-icon { width: 18px; height: 18px; }
[data-active-portal="pimpinan"] .leadership-diff__meaning {
  margin: 0;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--leadership-border-soft);
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Penjelasan sinyal: pemicu dan dampak sebagai dua artikel bersusun. */
[data-active-portal="pimpinan"] .leadership-reason-list { display: grid; gap: 0; }
[data-active-portal="pimpinan"] .leadership-reason {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--sp-3);
  padding: var(--sp-1) 0 var(--sp-4);
  border-bottom: 1px solid var(--line);
}
[data-active-portal="pimpinan"] .leadership-reason--impact {
  padding: var(--sp-4) 0 var(--sp-1);
  border-bottom: 0;
}
[data-active-portal="pimpinan"] .leadership-reason__icon { display: grid; place-items: center; }
[data-active-portal="pimpinan"] .leadership-reason__icon--trigger { color: var(--indigo); }
[data-active-portal="pimpinan"] .leadership-reason__icon--impact { color: var(--warm); }
[data-active-portal="pimpinan"] .leadership-reason__title { display: block; margin-bottom: var(--sp-1); }
[data-active-portal="pimpinan"] .leadership-reason__copy {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-small);
  line-height: 1.55;
}

/* Panel aksi: satu aksi dominan, jalur review dan destruktif ringkas. */
[data-active-portal="pimpinan"] .leadership-action-panel {
  display: grid;
  gap: var(--sp-2);
  position: sticky;
  z-index: 18;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border-color: var(--leadership-border);
  background: rgba(255, 254, 250, .96);
  box-shadow: 0 14px 34px rgba(7, 20, 47, .16);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}
[data-active-portal="pimpinan"] .leadership-action-panel > .section-head { margin-bottom: 1px; }
[data-active-portal="pimpinan"] .leadership-action-row {
  display: grid;
  gap: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-action-row--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-active-portal="pimpinan"] .leadership-action-row--decision { grid-template-columns: minmax(116px, .72fr) minmax(0, 1.28fr); }
[data-active-portal="pimpinan"] .leadership-action-row--signal { grid-template-columns: minmax(116px, .8fr) minmax(0, 1.2fr); }
[data-active-portal="pimpinan"] .leadership-action-panel .secondary-btn {
  color: #33466e;
  background: #f2f4f8;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-action-panel .danger-btn {
  min-height: 45px;
  padding-inline: var(--sp-3);
  border: 1px solid rgba(184, 60, 74, .32);
  color: #a32f3e;
  background: #fff;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-action-panel .primary-btn {
  border: 1px solid var(--leadership-emerald);
  box-shadow: 0 7px 18px rgba(8, 122, 96, .2);
}
[data-active-portal="pimpinan"] .leadership-action-more {
  min-height: var(--touch-min);
  padding: var(--sp-1) 2px;
  justify-self: start;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-active-portal="pimpinan"] .leadership-action-note {
  margin: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--leadership-border-soft);
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}

@media (min-width: 520px) {
  [data-active-portal="pimpinan"] .leadership-detail-card .leadership-decision-card__head {
    grid-template-columns: var(--leadership-row-icon) minmax(0, 1fr) max-content;
    grid-template-areas: "icon copy status";
    align-items: center;
  }
  [data-active-portal="pimpinan"] .leadership-detail-card [data-approval-status],
  [data-active-portal="pimpinan"] .leadership-detail-card [data-signal-severity] {
    justify-self: end;
    align-self: center;
  }
  [data-active-portal="pimpinan"] [data-approval-summary-cells],
  [data-active-portal="pimpinan"] [data-signal-value-cells] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-active-portal="pimpinan"] [data-approval-summary-cells] > :last-child:nth-child(odd),
  [data-active-portal="pimpinan"] [data-signal-value-cells] > :last-child:nth-child(odd) { grid-column: auto; }

  [data-active-portal="pimpinan"] .leadership-route-approval-detail,
  [data-active-portal="pimpinan"] .leadership-route-signal-detail {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding-bottom: 100px;
  }
  [data-active-portal="pimpinan"] .leadership-route-approval-detail > section,
  [data-active-portal="pimpinan"] .leadership-route-approval-detail > .leadership-provenance,
  [data-active-portal="pimpinan"] .leadership-route-signal-detail > section,
  [data-active-portal="pimpinan"] .leadership-route-signal-detail > .leadership-provenance { margin-block: 0; }
}

/* =====================================================================
   17  ACTION CENTER
   Urutan tetap action-first: konteks, KPI, filter antrean, pekerjaan,
   lalu analitik.
   ===================================================================== */
/* Halaman ini memakai flex + `order` supaya urutan bacanya action-first
   tanpa mengubah urutan DOM. Karena bukan grid, ritme halaman harus
   dinyatakan ulang di sini — nilainya variabel yang sama, jadi tetap
   satu sumber. */
[data-active-portal="pimpinan"] .leadership-route-actions {
  display: flex;
  flex-direction: column;
  gap: var(--leadership-section-rhythm);
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-filterbar { order: 1; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact { order: 2; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-action-filters { order: 3; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-decision-queue { order: 4; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-signal-panel { order: 5; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-chart-section { order: 6; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-notice { order: 7; }

[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--leadership-card-gap);
  margin-top: 0;
  padding: var(--sp-3);
  border: 1px solid rgba(19, 36, 73, .1);
  border-radius: var(--r-xl);
  background: #f2f5f8;
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact > .leadership-metric {
  min-height: 104px;
  padding: var(--sp-3);
  background: #fff;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact > :first-child {
  color: #fff;
  border-color: var(--leadership-navy-900);
  background: var(--leadership-navy-900);
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact > :first-child .leadership-metric__label,
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact > :first-child .leadership-metric__value { color: #fff; }
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact > :first-child small { color: rgba(255, 255, 255, .82); }

[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-action-filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0;
  padding: var(--sp-1);
  overflow: visible;
  border: 1px solid rgba(19, 36, 73, .1);
  border-radius: var(--r-lg);
  background: #eef2f7;
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-action-filters .chip {
  min-width: 0;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-1);
  border: 0;
  border-radius: var(--r-sm);
  color: #4a5673;
  background: transparent;
  box-shadow: none;
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-action-filters .chip.active {
  color: #fff;
  background: var(--leadership-navy-800);
  box-shadow: 0 4px 10px rgba(23, 53, 99, .18);
}
[data-active-portal="pimpinan"] .leadership-route-actions > .leadership-chart-section {
  margin-top: var(--sp-5);
  /* border-top 1px tidak punya latar/bayangan sendiri, jadi detektor
     tepi-tinta menembusnya dan mengukur sampai judul di baliknya —
     border itu 1px yang tidak pernah dihitung sebagai bagian dari
     jarak gap flex, sehingga jarak section-ke-section lebih 1px dari
     kelipatan 4 (32+1+16=49, bukan 48). Dikurangi di sini supaya
     border+padding tetap kelipatan 4 setelah ditambah gap. */
  padding-top: calc(var(--sp-4) - 1px);
  border-top: 1px solid rgba(19, 36, 73, .1);
}

@media (min-width: 520px) {
  [data-active-portal="pimpinan"] .leadership-route-actions > .leadership-metric-grid.compact {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* =====================================================================
   18  NOTICE, AKUN, STATE, SHEET
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-notice {
  align-items: flex-start;
  gap: var(--sp-2);
  border-radius: var(--r-lg);
}
[data-active-portal="pimpinan"] .leadership-notice > .custom-icon { width: 23px; height: 23px; flex: none; }
[data-active-portal="pimpinan"] .leadership-notice > div { display: grid; gap: 2px; }
[data-active-portal="pimpinan"] .leadership-notice strong { font-size: var(--fs-caption); }
[data-active-portal="pimpinan"] .leadership-notice span { font-size: var(--fs-caption); line-height: var(--lh-normal); }

[data-active-portal="pimpinan"] .leadership-account-card .leadership-mode-switcher {
  margin-top: var(--sp-3);
  border-color: rgba(36, 59, 114, .11);
  background: #f3f5f9;
}
[data-active-portal="pimpinan"] .leadership-account-card .leadership-mode-chip { color: var(--leadership-muted); }
[data-active-portal="pimpinan"] .leadership-account-card .leadership-mode-chip.active {
  color: #fff;
  background: linear-gradient(145deg, #243b72, #087a60);
}
[data-active-portal="pimpinan"] .leadership-account-avatar {
  border: 3px solid var(--leadership-gold);
  box-shadow: 0 0 0 2px #fff4cf, 0 8px 20px rgba(141, 98, 22, .16);
}

[data-active-portal="pimpinan"] .state-card {
  min-height: 240px;
  display: grid;
  place-items: center;
  align-content: center;
  /* Tombol berlatar penuh mendarat langsung di kalimat penjelas; kartu
     keadaan memakai jarak antar kartu, bukan jarak antar baris teks. */
  gap: var(--sp-3);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}
[data-active-portal="pimpinan"] .state-card h2 { margin: 0; font-size: var(--fs-subhead); }
[data-active-portal="pimpinan"] .state-card p {
  margin: 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
[data-active-portal="pimpinan"] .state-card .icon-tile { margin-inline: auto; }

[data-active-portal="pimpinan"] .leadership-sheet { max-height: min(84dvh, 720px); overflow-y: auto; }
[data-active-portal="pimpinan"] .leadership-sheet .field { margin-top: var(--sp-3); }
[data-active-portal="pimpinan"] .leadership-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
  color: var(--leadership-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-quick-grid .quick-btn {
  min-width: 0;
  min-height: 96px;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-tight);
}
[data-active-portal="pimpinan"] .leadership-quick-grid .icon-tile { margin-inline: auto; }

/* Kontrol di dalam halaman dan sheet selalu memenuhi target sentuh.
   Tombol aksi bundar dikecualikan: ia persegi 44x44 dari token bersama,
   dan sapuan ini menang atas height sehingga membuatnya 44x45 — satu
   piksel lebih tinggi, cukup untuk merusak bentuk lingkarannya.
   Angka mentah 45px diganti token supaya tidak melenceng dari kontrak. */
[data-active-portal="pimpinan"] .leadership-page :is(button, input, select, textarea, summary):not(.round-btn),
[data-active-portal="pimpinan"] .leadership-home :is(button, input, select, textarea, summary):not(.round-btn),
[data-active-portal="pimpinan"] .leadership-sheet :is(button, input, select, textarea, summary):not(.round-btn) {
  min-height: var(--touch-min);
  font-size: var(--fs-small);
}
[data-active-portal="pimpinan"] .leadership-page :is(.primary-btn, .secondary-btn),
[data-active-portal="pimpinan"] .leadership-home :is(.primary-btn, .secondary-btn),
[data-active-portal="pimpinan"] .leadership-sheet :is(.primary-btn, .secondary-btn) {
  min-height: 45px;
  font-size: var(--fs-small);
}
[data-active-portal="pimpinan"] .leadership-footer {
  /* Tiga baris bertumpuk: cap merek, slogan, lalu tombol ganti portal.
     Jarak bawaan 4px membuat bingkai tombol mendarat di huruf slogan. */
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-caption);
}

/* =====================================================================
   19  CHART SECTION
   Selector lebih spesifik daripada portal-leadership-charts.css sehingga
   tetap menang meskipun berkas ini dimuat lebih dulu.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-grid {
  align-items: start;
  gap: var(--sp-4);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-card {
  align-self: start;
  padding: var(--sp-4);
  border-color: var(--leadership-border);
  background: #fff;
  box-shadow: var(--elev-1);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-card::before { display: none; }
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-head {
  min-height: 0;
  margin-bottom: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-head h3 {
  font-size: max(var(--fs-caption), var(--lchart-title-size, 1em));
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-stage {
  height: clamp(196px, 58vw, 236px);
  min-height: 196px;
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-card[data-chart-type="funnel"] .lchart-stage {
  height: clamp(230px, 68vw, 280px);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-card > footer {
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
}
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-insight { margin-top: var(--sp-3); }
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-data__scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(36, 59, 114, .24) transparent;
}
/* Anotasi chart tetap di atas ambang keterbacaan 12px. */
[data-active-portal="pimpinan"] .leadership-chart-section :is(
  .lchart-head p,
  .lchart-delta,
  .lchart-tooltip,
  .lchart-legend,
  .lchart-legend strong,
  .lchart-insight span,
  .lchart-insight strong,
  .lchart-card > footer,
  .lchart-data,
  .lchart-data thead th
) { font-size: var(--fs-caption); }
[data-active-portal="pimpinan"] .leadership-chart-section .lchart-data summary {
  min-height: var(--touch-min);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}

/* Radar lima pilar: satu hierarki judul, satu matriks, satu kesimpulan. */
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] {
  padding: var(--sp-4);
  border-color: var(--leadership-border);
  background: #fff;
  box-shadow: var(--elev-2);
}
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-head {
  min-height: 0;
  margin-bottom: var(--sp-3);
}
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-head p {
  width: fit-content;
  /* Kicker ini PERMUKAAN — pil emas dengan tepi keras — bukan teks biasa,
     jadi jaraknya ke judul di bawah mengikuti ambang kartu-ke-teks
     (12px). --sp-2 sebelumnya mendarat 1px di bawah ambang itu. */
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  color: #76500f;
  background: var(--leadership-gold-100);
  letter-spacing: var(--ls-label);
}
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-head h3 {
  font-size: var(--fs-heading);
  line-height: var(--lh-snug);
}
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-stage {
  height: clamp(238px, 66vw, 280px);
}
[data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-insight {
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-2);
  border-left: 3px solid var(--leadership-gold);
  background: #fffaf0;
}

/* =====================================================================
   20  NAVIGASI
   Ponsel memakai dock bawah; desktop memakai bilah atas (bagian 23).
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-bottom-nav {
  min-height: calc(76px + env(safe-area-inset-bottom, 0px));
  padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom, 0px));
  align-items: end;
  border-top: 1px solid rgba(19, 36, 73, .1);
  background: rgba(255, 254, 250, .985);
  box-shadow: 0 -10px 28px rgba(7, 20, 47, .11);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* Slot aktif dikirim JS sebagai --leadership-nav-slot (0..4). */
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-indicator {
  width: calc((100% - var(--sp-4)) / 5);
  height: 3px;
  top: 0;
  left: var(--sp-2);
  border-radius: 0 0 var(--r-xs) var(--r-xs);
  background: var(--leadership-gold-500);
  box-shadow: 0 2px 8px rgba(215, 165, 46, .32);
  transform: translate3d(calc(var(--leadership-nav-slot, 0) * 100%), 0, 0);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn {
  height: 58px;
  min-height: 58px;
  padding: var(--sp-2) 3px var(--sp-1);
  gap: 3px;
  border-radius: var(--r-md);
  color: #52617d;
  font-size: var(--fs-small);
  font-weight: 750;
  line-height: 1;
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn:not(.quick-nav) {
  grid-template-rows: 28px 16px;
  row-gap: 3px;
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn::before {
  content: "";
  width: 42px;
  height: 34px;
  position: absolute;
  z-index: -1;
  top: var(--sp-1);
  left: 50%;
  border-radius: var(--r-md);
  background: transparent;
  transform: translateX(-50%);
  transition: background-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn.active {
  color: var(--leadership-navy-800);
  background: transparent;
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn.active::before {
  background: #edf1f7;
  box-shadow: inset 0 0 0 1px rgba(23, 53, 99, .08);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn > .custom-icon {
  width: 25px;
  height: 25px;
  margin: 0;
  background-size: 25px 25px;
  filter: none;
  transform: none;
  transition: transform var(--motion-fast) var(--motion-ease), filter var(--motion-fast) var(--motion-ease);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn.active > .custom-icon {
  filter: drop-shadow(0 2px 3px rgba(19, 36, 73, .15));
  transform: translateY(-1px);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn[data-route] > span:last-child {
  min-height: 16px;
  line-height: 16px;
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .quick-nav {
  padding: 0 2px 3px;
  overflow: visible;
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .quick-nav::before { display: none; }
[data-active-portal="pimpinan"] .leadership-bottom-nav .quick-circle {
  width: 58px;
  height: 58px;
  margin-top: -23px;
  border: 3px solid var(--leadership-surface);
  background: var(--leadership-navy-900);
  box-shadow:
    0 0 0 2px var(--leadership-gold-500),
    0 8px 19px rgba(7, 20, 47, .24);
}
[data-active-portal="pimpinan"] .leadership-bottom-nav .quick-circle img { width: 62px; height: 62px; }
[data-active-portal="pimpinan"] .leadership-quick-label {
  min-height: 16px;
  display: block;
  margin-top: 1px;
  color: var(--leadership-navy-800);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: 16px;
  white-space: nowrap;
}
/* Kop merek + lonceng cuma milik sidebar desktop (bagian 23). Disembunyikan
   di sini supaya dock ponsel 5-kolom TIDAK mendapat anak ke-6 — tanpa baris
   ini elemennya ikut jadi grid item dan dock melebar ke baris kedua. */
[data-active-portal="pimpinan"] .leadership-sidebar-head { display: none; }

/* =====================================================================
   21  FOKUS, TOMBOL, MODE PRESENTASI
   ===================================================================== */
[data-active-portal="pimpinan"] button,
[data-active-portal="pimpinan"] a,
[data-active-portal="pimpinan"] input,
[data-active-portal="pimpinan"] select,
[data-active-portal="pimpinan"] textarea { -webkit-tap-highlight-color: transparent; }
[data-active-portal="pimpinan"] button { min-height: var(--leadership-touch); }
[data-active-portal="pimpinan"] .text-btn {
  min-height: var(--touch-min);
  padding-block: var(--sp-2);
}
[data-active-portal="pimpinan"] .status { min-height: 0; }

[data-active-portal="pimpinan"] button:focus-visible,
[data-active-portal="pimpinan"] a:focus-visible,
[data-active-portal="pimpinan"] input:focus-visible,
[data-active-portal="pimpinan"] select:focus-visible,
[data-active-portal="pimpinan"] textarea:focus-visible {
  outline: 3px solid rgba(215, 165, 46, .72);
  outline-offset: 2px;
}
[data-active-portal="pimpinan"] :is(
  .leadership-bottom-nav .nav-btn,
  .leadership-mode-chip,
  [data-leadership-avatar-frame],
  .leadership-service-btn,
  .leadership-list-row
):active { filter: brightness(.96); }

@media (hover: hover) {
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn:not(.quick-nav):hover::before { background: #f1f4f8; }
  [data-active-portal="pimpinan"] .leadership-service-btn:hover,
  [data-active-portal="pimpinan"] button.leadership-list-row:hover { border-color: rgba(215, 165, 46, .3); }
}

.leadership-present-mode[data-active-portal="pimpinan"] .leadership-list-row .list-meta,
.leadership-present-mode[data-active-portal="pimpinan"] .leadership-provenance { filter: blur(2.5px); user-select: none; }
.leadership-present-mode[data-active-portal="pimpinan"] .leadership-hero { background: linear-gradient(140deg, #111c39, #243b72 60%, #075845); }

/* =====================================================================
   22  BREAKPOINT KECIL
   ===================================================================== */
@media (min-width: 360px) and (max-width: 599px) {
  /* Satu baris filter utuh di beranda, tanpa chip terpotong.
     ---------------------------------------------------------------------
     CACAT LAMA yang diperbaiki di sini: bilah ini dijadikan grid tiga kolom
     selebar 1fr (sekitar 114px di layar 390px), tetapi chip-nya tetap
     membawa `min-width: max-content`, `white-space: nowrap`, dan menaruh
     jenis filter di SAMPING nilainya. Isinya butuh sampai 150px, jadi teks
     meluber keluar kotaknya dan mendarat di atas chip sebelah: "Semua unit"
     menimpa "PERIODE", dan "TA 2026/2027" bahkan melewati tepi kanan layar.

     Kotak chip-nya sendiri tidak pernah bertumpuk, dan itulah sebabnya
     seluruh kontrak lama meluluskannya — yang bertabrakan teksnya, bukan
     kotaknya. Kontrak sekarang mengukur luberan teks, bukan kotak saja.

     Perbaikannya: jenis filter DITUMPUK di atas nilainya, sehingga lebar
     yang dibutuhkan tinggal separuh dan ketiganya muat tanpa menggulir.
     `min-width` dilepas ke 0 supaya track grid benar-benar mengikat, dan
     nilai yang tetap kepanjangan dipotong rapi di dalam kotaknya sendiri. */
  /* auto-fit, bukan tiga kolom mati. Di 390px ke atas ketiganya tetap satu
     baris; di 360px ruangnya tidak cukup untuk tiga chip yang terbaca utuh,
     jadi barisnya patah menjadi dua. Membungkus ke baris kedua lebih jujur
     daripada memotong "Agustus 2026" menjadi "Agustus 20…" atau
     menyembunyikannya di balik gulir mendatar yang tidak terlihat. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--sp-2);
    overflow: visible;
  }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .chip {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--touch-min);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 var(--sp-1);
    padding-inline: var(--sp-2);
    overflow: hidden;
  }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .leadership-filter-chip__kind,
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .leadership-filter-chip__value {
    grid-column: 1;
    display: block;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: var(--lh-snug);
  }
  /* Jarak huruf label dilepas dan nilainya dirapatkan sedikit supaya
     "PEMBANDING" dan "Agustus 2026" muat UTUH. Memotong periode aktif
     menjadi "Agustus 20…" menghilangkan justru keterangan yang menentukan
     arti seluruh angka di halaman ini. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .leadership-filter-chip__kind {
    letter-spacing: 0;
  }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .leadership-filter-chip__value {
    font-size: var(--fs-caption);
    letter-spacing: -.01em;
    font-weight: var(--fw-bold);
  }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .leadership-filter-chip__caret {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar .custom-icon {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
  }
}

@media (min-width: 356px) and (max-width: 429px) {
  [data-active-portal="pimpinan"] .leadership-hero__content { grid-template-columns: minmax(0, 1fr) 136px; }
  [data-active-portal="pimpinan"] .leadership-hero__people,
  [data-active-portal="pimpinan"] .leadership-avatar-stack { width: 136px; }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame]:not(.active) {
    width: var(--touch-min);
    min-width: var(--touch-min);
    flex-basis: var(--touch-min);
  }
}

@media (min-width: 430px) and (max-width: 899px) {
  [data-active-portal="pimpinan"] .leadership-hero__content { grid-template-columns: minmax(0, 1fr) 144px; gap: var(--sp-5); }
  [data-active-portal="pimpinan"] .leadership-hero__people,
  [data-active-portal="pimpinan"] .leadership-avatar-stack { width: 144px; }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame]:not(.active) {
    width: var(--touch-min);
    min-width: var(--touch-min);
    flex-basis: var(--touch-min);
  }
  [data-active-portal="pimpinan"] .leadership-hero h1 { max-width: 282px; }
  [data-active-portal="pimpinan"] .leadership-hero__scope { max-width: 275px; }
  [data-active-portal="pimpinan"] .leadership-pillar-card:nth-child(5) { min-height: 148px; }
}

@media (max-width: 355px) {
  [data-active-portal="pimpinan"] .leadership-hero {
    min-height: 338px;
    padding-inline: var(--sp-4);
  }
  [data-active-portal="pimpinan"] .leadership-hero__content {
    min-height: 250px;
    grid-template-columns: minmax(0, 1fr) 108px;
    gap: var(--sp-2);
  }
  [data-active-portal="pimpinan"] .leadership-hero__people {
    width: 108px;
    min-height: 250px;
  }
  [data-active-portal="pimpinan"] .leadership-avatar-stack { width: 108px; height: 190px; }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame].active {
    width: 108px;
    min-width: 108px;
    height: 94px;
    min-height: 94px;
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame].active .leadership-avatar {
    width: 74px;
    height: 74px;
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame]:not(.active) {
    width: 34px;
    min-width: 34px;
    flex-basis: 34px;
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame]:not(.active) .leadership-avatar { width: 28px; }
  [data-active-portal="pimpinan"] .leadership-metric__value { font-size: var(--fs-metric-md); }
  [data-active-portal="pimpinan"] .leadership-pillar-grid { grid-template-columns: 1fr; }
  [data-active-portal="pimpinan"] .leadership-pillar-card:nth-child(5) { grid-column: auto; }
  [data-active-portal="pimpinan"] .leadership-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn { font-size: var(--fs-caption); }
}

/* =====================================================================
   23  DESKTOP (≥900px)
   Kontrak audit visual: desktop TIDAK memakai bottom dock. Dock berubah
   menjadi SIDEBAR VERTIKAL tinggi penuh di sisi kiri bingkai aplikasi
   (permintaan pemilik produk — portal ini dipakai untuk presentasi
   sales, kesan sidebar elegan menggantikan pil horizontal lama). Konten
   (hero, KPI, chart, dst.) bergeser ke kanan mengisi sisa lebar; tidak
   ada lagi elemen mengambang yang menimpa kartu KPI.

   Lebar 1180px di sini BUKAN angka bebas — ia datang dari
   --portal-frame-width (didefinisikan ulang untuk Pimpinan di
   tokens.css, blok @media min-width:900px). Wali/Guru/Staf memakai
   token yang sama tetapi nilainya tetap 480px di lebar berapa pun,
   sehingga ketiganya tampil sebagai bingkai ponsel yang mengambang di
   tengah layar lebar. Pimpinan sendirian menimpanya karena dashboard
   KPI/chart-nya butuh ruang — ini VARIAN YANG DISAHKAN (lihat kepala
   storage/qa/ui-anomalies.md), bukan ukuran yang lupa disamakan.

   Sidebar memakai --leadership-sidebar-width (tokens.css, blok yang
   sama) dan tetap DIPOSISIKAN FIXED terhadap viewport lewat rumus
   `left: calc(50% - lebar-app/2)` — trik geometri yang sama persis
   dipakai bilah atas versi lama supaya tepi kirinya sejajar dengan tepi
   kiri .app, tanpa perlu mengubah .app menjadi flex container (saudara
   kandungnya di HTML — sheet, toast, watermark, hint swipe — semuanya
   position:fixed dan harus tetap begitu). .screen diberi padding-left
   sebesar lebar sidebar sebagai ganti padding-top yang dulu menyisakan
   ruang untuk bilah atas.

   Elemen #bottomNav SAMA PERSIS di HTML/JS untuk mobile dan desktop —
   hanya CSS pada breakpoint inilah yang mengubahnya dari dock bawah
   jadi sidebar. Highlight rute aktif (.nav-btn.active/aria-current),
   sheet Aksi Cepat, dan pemilih mode karena itu tetap dari mekanisme
   JS yang sama persis, tidak diduplikasi.

   Tinggi (dulu 64px, dock 5-kolom) dan sudut radius (dulu membulat di
   atas, sekarang di kiri) sengaja berbeda dari Wali/Guru/Staf karena
   strukturnya kini sidebar tinggi penuh, bukan dock/bilah — konsekuensi
   struktural, bukan lupa disamakan.
   ===================================================================== */
@media (min-width: 900px) {
  [data-active-portal="pimpinan"] body { padding: var(--sp-5) 0; }
  [data-active-portal="pimpinan"] .app {
    width: min(calc(100% - 48px), var(--portal-frame-width));
    max-width: var(--portal-frame-width);
    min-height: calc(100dvh - 40px);
    overflow: hidden;
    border-radius: 32px;
  }
  [data-active-portal="pimpinan"] .screen {
    min-height: calc(100dvh - 40px);
    padding-top: 0;
    padding-left: var(--leadership-sidebar-width);
    padding-bottom: var(--sp-7);
  }
  /* Kenaikan ritme desktop ke --sp-8 yang lama DIHAPUS (26 Agu 2026):
     keputusan pemilik produk menetapkan jarak antar section Pimpinan
     TETAP 32px pada semua lebar layar (kepadatan pindai dipertahankan).
     Nilainya kini mengalir dari --sec-gap lewat aturan dasar
     --leadership-section-rhythm di bagian 03 KERANGKA HALAMAN. */

  /* Watermark rute bawaan tampak seperti gambar bocor pada layar lebar. */
  [data-active-portal="pimpinan"] #pageWatermark { display: none; }

  /* --- Sidebar navigasi (vertikal, tinggi penuh) -------------------- */
  [data-active-portal="pimpinan"] .leadership-bottom-nav {
    top: var(--sp-5);
    bottom: var(--sp-5);
    left: calc(50% - min(calc(100% - 48px), var(--portal-frame-width)) / 2);
    right: auto;
    width: var(--leadership-sidebar-width);
    max-width: var(--leadership-sidebar-width);
    min-height: 0;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-3) var(--sp-4);
    border: 0;
    border-right: 1px solid rgba(19, 36, 73, .1);
    border-radius: 32px 0 0 32px;
    background: var(--leadership-surface);
    box-shadow: 10px 0 24px rgba(7, 20, 47, .06);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-indicator { display: none; }

  /* Kop sidebar: merek AkseleraSync + lonceng pemberitahuan. Hero tetap
     memegang identitas + pemilih mode + pemilih unit (route Beranda);
     sidebar tidak menduplikasinya, hanya menambah akses lonceng dari
     SEMUA rute. Lonceng hero sendiri disembunyikan di bawah supaya
     tidak tampil dua kali saat sidebar aktif. */
  [data-active-portal="pimpinan"] .leadership-sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: 0 var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid rgba(19, 36, 73, .1);
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-width: 0;
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-brand__mark {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--r-sm);
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-brand__word {
    overflow: hidden;
    color: var(--leadership-navy-900);
    font-size: var(--fs-small);
    font-weight: var(--fw-heavy);
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-bell {
    position: relative;
    flex: none;
    width: 36px;
    height: 36px;
    min-height: 0;
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-bell .leadership-topbar__glyph {
    width: 18px;
    height: 18px;
  }
  [data-active-portal="pimpinan"] .leadership-sidebar-bell[data-unread]::after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 4px;
    right: 4px;
    border: 2px solid var(--leadership-surface);
    border-radius: 50%;
    background: var(--leadership-gold-500);
  }
  /* Digantikan lonceng sidebar di atas: satu lonceng saja per layar. */
  [data-active-portal="pimpinan"] .leadership-hero__bell { display: none; }

  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn {
    width: 100%;
    height: auto;
    min-height: var(--touch-min);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--r-lg);
    font-size: var(--fs-small);
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn:not(.quick-nav) {
    grid-template-rows: none;
    row-gap: 0;
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn::before { display: none; }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn.active {
    color: var(--leadership-navy-950);
    background: var(--leadership-gold-300);
    box-shadow: inset 0 0 0 1px rgba(141, 98, 22, .28);
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn > .custom-icon {
    width: 20px;
    height: 20px;
    background-size: 20px 20px;
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .nav-btn[data-route] > span:last-child {
    min-height: 0;
    line-height: 1.3;
    text-align: left;
  }
  /* Aksi Cepat berlabuh di dasar sidebar (margin-top:auto), terpisah
     dari empat rute utama — pola CTA yang selalu terjangkau di ujung
     bawah, dengan tinta gold lembut supaya beda dari item nav biasa. */
  [data-active-portal="pimpinan"] .leadership-bottom-nav .quick-nav {
    order: 5;
    width: 100%;
    margin-top: auto;
    margin-left: 0;
    padding: var(--sp-2) var(--sp-3);
    gap: var(--sp-3);
    border-radius: var(--r-lg);
    background: var(--leadership-gold-100);
    box-shadow: inset 0 0 0 1px rgba(141, 98, 22, .28);
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .quick-nav::before { display: none; }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .quick-circle {
    width: 38px;
    height: 38px;
    margin-top: 0;
    border-width: 2px;
    flex: none;
  }
  [data-active-portal="pimpinan"] .leadership-bottom-nav .quick-circle img { width: 40px; height: 40px; }
  [data-active-portal="pimpinan"] .leadership-quick-label {
    min-height: 0;
    line-height: 1.3;
    color: var(--leadership-navy-800);
  }

  /* --- Hero ringkas: nama dan avatar sejajar horizontal ------------- */
  /* Tinggi hero desktop dijaga tetap 206px. Empat piksel yang dipinjam
     dari padding atas dan bawah dikembalikan persis sebagai udara di
     antara pil konteks dan nama pemimpin di bawah ini. */
  [data-active-portal="pimpinan"] .leadership-hero {
    min-height: 0;
    display: grid;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-8);
    border-radius: 0 0 34px 34px;
  }
  /* Jarak ke pemilih mode sudah diurus `gap` hero di atas. */
  [data-active-portal="pimpinan"] .leadership-hero .leadership-mode-switcher { margin-top: 0; }
  [data-active-portal="pimpinan"] .leadership-hero::before {
    background-position: right -40px bottom -54px;
    background-size: 168px 168px;
    opacity: .06;
  }
  [data-active-portal="pimpinan"] .leadership-hero__content {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-7);
  }
  [data-active-portal="pimpinan"] .leadership-hero__copy { padding-left: 0; }
  [data-active-portal="pimpinan"] .leadership-hero h1 {
    max-width: 620px;
    margin: var(--sp-5) 0 0;
    font-size: 30px;
  }
  [data-active-portal="pimpinan"] .leadership-hero .school-line {
    max-width: 600px;
    font-size: var(--fs-body);
  }
  /* Nama, jabatan, dan cakupan adalah SATU blok identitas: rapat di
     dalam, berjarak lebar dari pil konteks di atasnya. Empat piksel yang
     dilepas di sini menjaga tinggi hero desktop tetap 206px. */
  [data-active-portal="pimpinan"] .leadership-hero__scope {
    max-width: 620px;
    margin-top: 0;
    font-size: var(--fs-small);
  }
  [data-active-portal="pimpinan"] .leadership-hero__people {
    width: auto;
    min-height: 0;
    position: static;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
  }
  [data-active-portal="pimpinan"] .leadership-hero__people > .round-btn {
    position: static;
    flex: none;
  }
  [data-active-portal="pimpinan"] .leadership-avatar-stack {
    width: auto;
    height: auto;
    position: static;
    flex-wrap: nowrap;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    gap: var(--sp-2);
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame] {
    width: 46px;
    min-width: 46px;
    height: 46px;
    min-height: 46px;
    flex: 0 0 46px;
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame] .leadership-avatar {
    width: 40px;
    height: 40px;
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame].active {
    width: auto;
    min-width: 0;
    height: 64px;
    min-height: 64px;
    flex: 0 0 auto;
    order: 0;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    align-content: center;
    justify-content: start;
    gap: var(--sp-3);
    padding: var(--sp-1) var(--sp-4) var(--sp-1) var(--sp-1);
    border-width: 2px;
    border-radius: var(--r-xl);
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame].active .leadership-avatar {
    width: 52px;
    height: 52px;
    border-radius: var(--r-md);
  }
  [data-active-portal="pimpinan"] [data-leadership-avatar-frame].active > span {
    max-width: 128px;
    font-size: var(--fs-small);
    text-align: left;
    white-space: normal;
  }
  [data-active-portal="pimpinan"] .leadership-mode-switcher {
    width: max-content;
    max-width: 100%;
    grid-template-columns: repeat(3, max-content);
    margin-left: 0;
  }
  /* Tetap 44px: kontrak target sentuh berlaku juga di desktop. Kepadatan
     dicapai lewat padding vertikal yang tipis, bukan tinggi yang dipangkas. */
  [data-active-portal="pimpinan"] .leadership-mode-chip {
    min-height: var(--touch-min);
    padding: var(--sp-1) var(--sp-5);
    font-size: var(--fs-small);
  }

  /* --- Grid beranda: chip filter menempel pada bagian yang diaturnya - */
  [data-active-portal="pimpinan"] .leadership-home {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-6) var(--sp-6);
    padding: var(--sp-5) var(--sp-8) var(--sp-8);
  }
  [data-active-portal="pimpinan"] .leadership-home > * {
    min-width: 0;
    grid-column: 1 / -1;
  }
  [data-active-portal="pimpinan"] .leadership-home > .section { margin: 0; }
  /* Divider bermerek: pada grid beranda desktop margin section dinolkan
     di atas, jadi jarak section-ke-section adalah gap grid --sp-6 murni
     dan titik tengah divider mengikuti nilai itu. */
  [data-active-portal="pimpinan"] .leadership-home > .section + .section { --sec-divider-span: var(--sp-6); }

  /* Baris konteks: chip di kiri, freshness di kanan, satu baris penuh
     tepat di atas "Radar KPI utama" yang dikendalikannya. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-filterbar {
    grid-column: 1 / 8;
    align-self: center;
    justify-content: flex-start;
    margin-top: 0;
    overflow: visible;
  }
  [data-active-portal="pimpinan"] .leadership-home > [data-home-freshness] {
    grid-column: 8 / 13;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
  /* Tata letak beranda memakai penanda eksplisit `data-home-block`, bukan
     tebakan `:has([data-route=...])`. Tebakan itu langsung salah begitu
     kartu KPI menjadi tautan dan ikut membawa data-route: section Radar KPI
     tersedot ke aturan kolom milik blok Mutu Data dan menyusut jadi separuh
     lebar. Penanda membuat tata letak tidak bergantung pada isi. */
  [data-active-portal="pimpinan"] .leadership-home > [data-home-block="kpi"] { grid-column: 1 / -1; }
  /* "Kurva & indikator keputusan" (kurva 6 bulan) vs "Sinyal Perlu Tindakan"
     (3 baris ringkas) dulu berdampingan 1/8 + 8/13. Kurva sendirian sudah
     jauh lebih pendek setelah "Prioritas pengurus" dipindah keluar (lihat
     komentar di renderRouteCharts(), portal-leadership.js), tapi kolom
     kurva (~645px) masih lebih tinggi dari kolom sinyal (~485px) — beda
     ~160px yang, ditambah jarak antar-section, menyisakan celah ~184px di
     bawah kolom sinyal sebelum baris "Prioritas pengurus" mulai. Kurva
     JUGA mendapat manfaat nyata dari lebar penuh (kurva 6 bulan lebih
     legible), jadi direfow jadi SATU kolom penuh seperti pasangan pilar/
     keuangan di bawah, alih-alih dipaksa berdampingan dengan sisa ruang
     yang tidak genap. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-chart-section { grid-column: 1 / -1; }
  /* Section DAN kartu daftarnya selebar halaman. Batas 520px yang lama —
     separuh bingkai 1180 — menyisakan blok kosong besar di kanan kolom
     "Sinyal Perlu Tindakan" dan ditandai QA sebagai cacat. Baris sinyal
     ringkas kini mengisi lebar penuh, sejajar dengan kartu "Antrean
     keputusan" di bawahnya yang memakai lebar yang sama, sehingga tidak
     ada lagi kolom yang berhenti di tengah bingkai. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-signal-panel { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > .leadership-signal-panel > .list-card { max-width: none; }
  /* Baris tersendiri untuk kartu "Prioritas pengurus" (lihat komentar di
     renderRouteCharts(), portal-leadership.js) — selebar halaman penuh
     supaya lima batang capaiannya punya ruang yang sama lapangnya dengan
     kartu Radar KPI, bukan terjepit di kolom sempit 344px. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-home-priority-section { grid-column: 1 / -1; }
  /* "Lima pilar" vs "Keuangan" dulu berdampingan 1/7 + 7/13 seperti pasangan
     di atas, tapi kontennya TIDAK setara secara alami: lima pilar cuma lima
     kartu ringkas (~658px), sedangkan keuangan menumpuk grid KPI + kurva
     besar + rincian (~1232px) — rasio hampir 2×. Grid stretch bawaan
     memaksa kartu pilar setinggi kartu keuangan, jadi 5 kartu pilar
     "mengambang" di kolom yang jauh lebih tinggi dari isinya sendiri, dan
     kartu ke-5 ("Nonakademik & Sarpras") sendirian di baris terakhir grid
     internalnya menambah kesan timpang. Direfow jadi SATU kolom penuh
     (bukan berdampingan) — kolomnya sendiri pun sudah diperkaya di bawah
     (leadership-pillar-grid 4 kolom + kartu ke-5 selebar penuh). */
  [data-active-portal="pimpinan"] .leadership-home > [data-home-block="pilar"] { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > [data-home-block="keuangan"] { grid-column: 1 / -1; }
  /* "Antrean keputusan" (baris keputusan, 2 baris meta + nilai/tenggat/
     risiko per kartu — padat) vs "Agenda strategis" (baris navigasi
     standar, 1 baris meta — ringkas) sama-sama 3 item, tapi jenis
     barisnya beda kepadatan: kolom Antrean keputusan alami ~408px, Agenda
     hanya ~265px. Diukur tepi-tinta: dengan pilar/keuangan & kurva/sinyal
     di atas sudah diratakan, pasangan ini (dan Mutu data/Hikmah di bawah)
     jadi lompatan RITME PALING BESAR yang tersisa di halaman (142,8px dan
     115,8px, terdeteksi lewat `detect-ui-anomalies.mjs --categories=
     rhythm`) — pola yang sama persis dengan dua pasangan di atas, hanya
     lebih kecil. Direfow selebar penuh untuk konsistensi & supaya ritme
     halaman benar-benar kembali ke kelipatan token, bukan cuma dua
     pasangan yang kebetulan difoto pemilik produk. */
  [data-active-portal="pimpinan"] .leadership-home > .leadership-decision-queue { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > [data-home-block="agenda"] { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > [data-home-block="mutu-data"] { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > :has(.leadership-hikmah-card) { grid-column: 1 / -1; }
  [data-active-portal="pimpinan"] .leadership-home > :has(> .leadership-service-grid) { grid-column: 1 / -1; }

  [data-active-portal="pimpinan"] .leadership-page {
    width: 100%;
    padding: var(--sp-6) var(--sp-8) var(--sp-8);
  }
  [data-active-portal="pimpinan"] .leadership-topbar { padding-inline: var(--sp-8); }

  [data-active-portal="pimpinan"] .leadership-metric-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  /* Siswa & PPDB memuat LIMA kartu KPI — pada empat kolom tetap, kartu
     "Lama verifikasi" jatuh yatim sendirian di baris kedua. auto-fit
     membiarkan kelima kartu berbagi satu baris pada lebar penuh dan turun
     bersama-sama secara berimbang saat ruangnya menyempit. Diskop ke rute
     ini saja supaya grid domain berkartu genap tidak ikut berubah. */
  [data-active-portal="pimpinan"] .leadership-route-students-ppdb > .leadership-metric-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  /* Radar KPI beranda: 4 kolom membuat tiap kartu ~203px pada lebar konten
     desktop (860px setelah sidebar) — kurva sparkline terjepit, jarak
     internal sesak, dan pemilik produk menilainya kurang elegan. 3 kolom
     membagi 12 KPI rata (4 baris genap, tidak ada baris sisa) dan memberi
     ~276px per kartu — kurva dan jarak internal dilebarkan mengikuti
     ruang ekstra, BUKAN cuma padding kosong tambahan (lihat aturan
     .leadership-kpi-grid .leadership-metric* di bawah). Diskop khusus ke
     `.leadership-kpi-grid`, bukan `.leadership-metric-grid` dasar, supaya
     grid KPI lain (Keamanan, halaman domain) tidak ikut berubah. */
  [data-active-portal="pimpinan"] .leadership-home .leadership-kpi-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  [data-active-portal="pimpinan"] .leadership-home .leadership-kpi-grid .leadership-metric {
    min-height: 158px;
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
  }
  [data-active-portal="pimpinan"] .leadership-home .leadership-kpi-grid .leadership-metric__spark,
  [data-active-portal="pimpinan"] .leadership-home .leadership-kpi-grid .leadership-metric__spark--bar {
    height: 40px;
  }
  /* Ringkasan keuangan di beranda dulu duduk pada kolom samping selebar
     538px (dua kolom, 261px/kartu) karena bertetangga dengan "Lima pilar".
     Sekarang "Keuangan · delapan lapisan" direfow selebar halaman penuh
     (~860px, lihat blok data-home-block="keuangan" di atas), jadi empat
     kolom kembali lapang (~193px/kartu) tanpa nilai pecah baris. Diskop ke
     `.leadership-home` supaya halaman Keuangan Strategis (rute /finance,
     sudah punya aturan 3 kolomnya sendiri di bawah) tidak ikut berubah. */
  [data-active-portal="pimpinan"] .leadership-home [data-finance-kpi-grid] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  [data-active-portal="pimpinan"] .leadership-metric {
    min-height: 142px;
    padding: var(--sp-5);
  }
  /* Lima pilar sekarang selebar halaman penuh (lihat data-home-block=
     "pilar" di atas). Dua kolom lama sudah membuat kartu ke-5 ("Nonakademik
     & Sarpras") melebar penuh (aturan dasar nth-child(5) di bagian 11),
     tetapi kartu selebar 860px yang isinya cuma ikon+judul+angka rata kiri
     menyisakan ruang kosong besar di sisi kanannya sendiri — bentuk lain
     dari keluhan yang sama. Tiga kolom pada lebar penuh (~276px/kartu, sama
     lapangnya dengan kartu Radar KPI) membuat baris terakhir terisi DUA
     kartu (baris 66% penuh); aturan berikutnya membatalkan span penuh
     bawaan supaya kartu ke-5 ikut alur grid biasa alih-alih melebar
     sendirian. */
  [data-active-portal="pimpinan"] .leadership-home .leadership-pillar-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  [data-active-portal="pimpinan"] .leadership-home .leadership-pillar-grid > .leadership-pillar-card:nth-child(5) {
    grid-column: auto;
    min-height: 210px;
  }
  [data-active-portal="pimpinan"] .leadership-pillar-card { min-height: 210px; }
  [data-active-portal="pimpinan"] .leadership-service-btn .service-name { max-width: 110px; }
  [data-active-portal="pimpinan"] .leadership-layer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  /* Enam kolom cukup lapang saat konten selebar 1100px (bilah atas
     lama). Sidebar sekarang menyisakan ~860px untuk konten, jadi enam
     kolom memaksa "Rp8,42 miliar" pecah baris dan kartu memanjang —
     diturunkan ke tiga kolom, angka yang sama dipakai breakpoint
     tablet 500–899px di atas (lihat bagian 13) yang lebarnya serupa. */
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
  }
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-metric-grid .leadership-metric { min-height: 122px; }

  [data-active-portal="pimpinan"] .leadership-chart-section .lchart-stage {
    height: var(--chart-height, 260px);
    min-height: 220px;
  }
  [data-active-portal="pimpinan"] .leadership-chart-section .lchart-card--wide .lchart-stage { min-height: 260px; }
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-grid { align-items: stretch; }
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-card {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-card > footer {
    position: relative;
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 0;
  }
  [data-active-portal="pimpinan"] .leadership-route-finance > .leadership-chart-section .lchart-card > footer::before {
    content: "";
    position: absolute;
    inset: var(--sp-2) 0 auto;
    height: 1px;
    background: rgba(31, 58, 107, .09);
  }
  [data-active-portal="pimpinan"] .leadership-route-insights .lchart-card[data-chart-type="heatmap"] .lchart-stage { height: 270px; }

  [data-active-portal="pimpinan"] :is(
    .leadership-chart-grid,
    .leadership-domain-chart-grid,
    .leadership-visual-grid,
    .leadership-analytics-grid,
    .leadership-dashboard-grid
  ) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-5);
  }
  [data-active-portal="pimpinan"] :is(.leadership-chart-card, .leadership-visual-card, .leadership-chart-panel) {
    min-width: 0;
    min-height: 300px;
    padding: var(--sp-5);
  }
  [data-active-portal="pimpinan"] :is(.leadership-chart-card, .leadership-visual-card, .leadership-chart-panel) :is(canvas, svg) {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
  }

  /* Tanpa dock bawah, panel aksi dan toast kembali ke tepi bawah. */
  [data-active-portal="pimpinan"] .leadership-action-panel {
    width: min(760px, 100%);
    justify-self: end;
    bottom: var(--sp-6);
    margin-left: auto;
  }
  [data-active-portal="pimpinan"] .leadership-detail-card { padding: var(--sp-5); }
  /* Layar rincian tetap paling padat, tetapi 8px membuat tepi keras
     kartu mendarat di huruf judul bagian berikutnya. `--sp-4` adalah
     anak tangga terdekat yang masih menyisakan 12px yang diminta
     kontrak kartu-ke-judul. */
  [data-active-portal="pimpinan"] .leadership-route-approval-detail,
  [data-active-portal="pimpinan"] .leadership-route-signal-detail {
    gap: var(--sp-4);
    padding-top: var(--sp-3);
    padding-bottom: var(--sp-8);
  }
  [data-active-portal="pimpinan"] .leadership-route-actions {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-8);
  }
  /* Jarak ke blok sebelumnya sudah diurus ritme halaman; yang tersisa di
     sini hanya udara DI DALAM section grafik. */
  [data-active-portal="pimpinan"] .leadership-route-actions > .leadership-chart-section {
    margin-block: 0;
    /* Kompensasi border-top 1px yang sama seperti di aturan dasar. */
    padding-top: calc(var(--sp-3) - 1px);
  }

  [data-active-portal="pimpinan"] .sheet-layer {
    align-items: center;
    padding: var(--sp-7);
  }
  [data-active-portal="pimpinan"] .leadership-sheet {
    width: min(680px, calc(100vw - 64px));
    max-height: min(78dvh, 760px);
    padding: var(--sp-5) var(--sp-6) var(--sp-6);
    border-radius: 28px;
  }
  [data-active-portal="pimpinan"] .toast {
    bottom: var(--sp-6);
    width: min(560px, calc(100% - 48px));
  }
}

/* =====================================================================
   24  ROUTE MODUL BERSAMA — JARAK ANTAR PERMUKAAN KERAS
   =====================================================================
   Empat route modul (launchpad, ziswaf, penggajian, ujian) memakai
   berkas CSS-nya sendiri, dan kontainer di sana mengambil jaraknya dari
   token kepadatan --d-card-gap. Portal Pimpinan menetapkan token itu
   8px di ponsel demi kepadatan. Nilai itu pas untuk kartu KPI portal ini
   sendiri, tetapi terlalu rapat begitu anaknya berupa permukaan keras
   milik modul: kartu, pil, batang kemajuan, dan tombol. Ambang untuk
   pasangan semacam itu 12px, dan pengukuran memang menemukan 8px di
   keempat route.

   Perbaikannya dipagari DUA lapis supaya tidak bocor ke mana-mana:
     - hanya di dalam [data-active-portal="pimpinan"], sehingga Portal
       Staf, Guru, dan Wali tidak ikut berubah;
     - hanya pada pembungkus route modul, sehingga kepadatan route milik
       Portal Pimpinan sendiri tidak bergeser sedikit pun.

   Yang sengaja TIDAK dinaikkan: jarak ANTAR chip di dalam satu baris.
   Benda kecil punya ambang lebih rendah, dan melebarkan jaraknya justru
   memecah satu baris yang harus terbaca menyatu. Begitu pula pasangan
   batang kemajuan dengan labelnya: keduanya berdampingan dalam satu
   baris grid, jadi angka rapat yang dilaporkan detektor di sana bukan
   kerapatan yang terlihat mata.
   ===================================================================== */
[data-active-portal="pimpinan"] .leadership-route-launchpad,
[data-active-portal="pimpinan"] .leadership-route-ziswaf,
[data-active-portal="pimpinan"] .leadership-route-penggajian,
[data-active-portal="pimpinan"] .leadership-route-ujian {
  /* 12px (--sp-3) masih 1px pendek untuk beberapa pasangan permukaan-ke-
     teks di dalam modul Launchpad (misal tombol persetujuan -> catatan
     di bawahnya, terukur 11px). Naik ke --sp-4 memberi kelonggaran. */
  --d-card-gap: var(--sp-4);
}

/* Modul Ujian menyatakan ulang kepadatannya sendiri pada .exam-scope
   supaya tetap benar bila dipasang di luar portalnya. Deklarasi itu
   duduk LEBIH DALAM daripada pembungkus route, jadi ia menang atas
   aturan di atas dan harus disamakan di tempatnya sendiri. Tanpa baris
   ini route ujian tetap 8px, termasuk di desktop.
   Sama seperti di atas, --sp-3 masih mepet (kartu bentrok/tabel rekap
   ke kalimat catatan di bawahnya terukur 11px, ambang 12px). --sp-4. */
[data-active-portal="pimpinan"] .exam-scope[data-exam-density="pimpinan"] {
  --d-card-gap: var(--sp-4);
}

/* Modul ZISWAF menyetempel data-active-portal pada akarnya sendiri agar
   tetap bergaya benar di portal mana pun ia dipasang. Efek sampingnya:
   blok kepadatan [data-active-portal="pimpinan"] milik tokens.css ikut
   cocok pada elemen itu, sehingga 8px berlaku lagi DI DALAM pembungkus
   route yang baru saja dinaikkan. Aturan di bawah menyamakannya pada
   kedalaman yang sama. */
[data-active-portal="pimpinan"] .leadership-route-ziswaf .zis {
  --d-card-gap: var(--sp-3);
}

/* Pil status di dalam kartu Ujian mendarat 4px di atas kalimat
   penjelasnya. Pil adalah permukaan keras berwarna, bukan teks, jadi
   jaraknya ke paragraf mengikuti ambang kartu-ke-teks.
   Perbaikan pertama menaikkan 4px -> 8px, tapi ambang pasangan
   permukaan-ke-teks di sini sebenarnya 12px (pil bisa selebar satu
   kalimat, jadi pengecualian "benda kecil" tidak berlaku). --sp-3 (12px)
   terukur masih ~11px tinta-ke-tinta (line-height pil menggerus sebagian
   margin box), jadi --sp-4 dipakai supaya benar-benar lolos. */
[data-active-portal="pimpinan"] .exam-row__meta,
[data-active-portal="pimpinan"] .exam-person__detail {
  margin-top: var(--sp-4);
}
/* Arah sebaliknya: kalimat meta ("No. peserta...") ke pil catatan
   administrasi di bawahnya. Properti berbeda (margin pil, bukan margin
   paragraf) sehingga perlu baris terpisah. */
[data-active-portal="pimpinan"] .exam-person__flag {
  margin-top: var(--sp-3);
}
/* Isi peserta ke tombol aksi ("Ambil keputusan") adalah baris grid
   terpisah di dalam .exam-person; --sp-2 bawaan mendarat di huruf
   terakhir kalimat catatan. Naikkan jarak antar-barisnya saja, jarak
   antar-kolom (nomor kursi ke isi) sudah pas dan dibiarkan. */
[data-active-portal="pimpinan"] .exam-person {
  gap: var(--sp-4) var(--sp-3);
}

/* LEGENDA CHART — 4px di bawah kanvas.
   Kanvas adalah gambar: detektor tidak bisa melihat ke dalamnya, jadi
   seluruh kotak kanvas dihitung sebagai tinta dan jarak ke legenda
   terbaca 4px, di bawah ambang gambar-ke-teks 8px. Ini satu penyebab
   yang muncul di 61 tempat karena setiap kartu chart memakainya.
   Secara mata jaraknya memang belum menekan, tetapi legenda adalah
   blok tersendiri, bukan bagian dari plot, sehingga satu tangga token
   penuh lebih jujur daripada 4px.

   Perbaikan pertama (--sp-2=8px) masih 4px di bawah ambang gambar-ke-teks
   yang sebenarnya (12px, karena kanvas grafik jauh lebih besar dari
   pengecualian "benda kecil"). --sp-3 (12px) terukur pas di garis ambang
   (mepet, berisiko turun di bawahnya pada sub-piksel); --sp-4 memberi
   kelonggaran nyata.

   Aturan aslinya ada di portal-leadership-charts.css yang dimuat SESUDAH
   berkas ini, jadi override memakai anak-langsung agar menang tanpa
   perlu !important. */
[data-active-portal="pimpinan"] .lchart-card > .lchart-legend {
  margin-top: var(--sp-4);
}

/* Sisi atas plot punya cacat kembarannya: pada kartu yang subjudulnya
   sampai dua baris, baris kedua berhenti 6px di atas plot. Kepala kartu
   dan plot adalah dua blok berbeda, jadi jaraknya mengikuti tangga
   antar-kartu, bukan tangga antar-baris teks. */
[data-active-portal="pimpinan"] .lchart-card > .lchart-head {
  margin-bottom: var(--sp-3);
}

/* Baris keterangan tahap di Launchpad membungkus jadi dua baris pada
   ponsel: pil pelaksana dan tanggal di baris pertama, lama pengerjaan
   di baris kedua. Jarak ANTAR baris itu 4px, sehingga pil beserta
   tulisan di bawahnya saling menempel. Yang dinaikkan hanya row-gap;
   jarak antar chip dalam satu baris tetap, supaya barisnya masih
   terbaca sebagai satu kelompok. */
[data-active-portal="pimpinan"] .lp-stage__meta {
  row-gap: var(--sp-2);
}

/* =====================================================================
   REDUCED MOTION
   Satu-satunya tempat !important dibenarkan: melawan animasi yang
   dideklarasikan di luar berkas ini.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-active-portal="pimpinan"] *,
  [data-active-portal="pimpinan"] *::before,
  [data-active-portal="pimpinan"] *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}

@keyframes leadership-page-in {
  from { opacity: 0; transform: translate3d(0, 8px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}