/* app-latest.css — potongan dari assets/app.css (dipecah 28 Jul 2026).
   Blok TERBARU: THE NEW EYE + tata letak 28 Jul. Berkas ini WAJIB dimuat paling akhir.
   URUTAN <link> di index.html/admin-users.html/observability.html adalah KONTRAK:
   cascade CSS = urutan muat, blok bawah sengaja mengalahkan blok atas.
   Muat setelah app-patches-3.css (paling akhir). */
/* =========================================================================
   THE NEW EYE (27 Jul 2026) — panel ringkas log keputusan kalender.
   Kolom melayang kanan yang bisa dibuka-tutup; di layar sempit turun jadi
   lembar bawah. Semua ukuran memakai token keseragaman. */
.new-eye{
  position:fixed;
  top:72px;
  right:14px;
  z-index:150;
  width:min(360px, calc(100vw - 28px));
  max-height:min(72vh, 640px);
  display:flex;
  flex-direction:column;
  gap:var(--ui-2);
  padding:var(--ui-3);
  border:1px solid var(--line);
  border-radius:var(--radius-card);
  background:var(--panel);
  box-shadow:var(--shadow-soft);
}
.new-eye[hidden]{display:none}
.new-eye-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--ui-2);
}
.new-eye-kicker{
  margin:0;
  color:var(--muted);
  font-size:10px;
  font-weight:var(--fw-heavy);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.new-eye-head h2{
  margin:2px 0 0;
  color:var(--ink);
  font-size:var(--fs-title);
  line-height:1.2;
}
.new-eye-search input{
  width:100%;
  min-height:var(--ctrl-h);
  padding:0 var(--ui-3);
  border:1px solid var(--line);
  border-radius:var(--radius-control);
  background:var(--soft);
  color:var(--ink);
  font:inherit;
  font-size:var(--ctrl-fs);
}
.new-eye-filters{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ui-15);
}
.new-eye-chip{
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--ink);
  border-radius:var(--ui-r-pill);
  padding:4px 9px;
  font:inherit;
  font-size:var(--fs-caption);
  font-weight:var(--fw-bold);
  line-height:1.2;
  cursor:pointer;
}
.new-eye-chip span{margin-left:var(--ui-1);opacity:.65;font-variant-numeric:tabular-nums}
.new-eye-chip.active{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.new-eye-body{
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:grid;
  gap:var(--ui-15);
  align-content:start;
}
.new-eye-day{
  position:sticky;
  top:-2px;
  z-index:1;
  margin:var(--ui-1) 0 0;
  padding:var(--ui-05) 0;
  background:var(--panel);
  color:var(--muted);
  font-size:10px;
  font-weight:var(--fw-heavy);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.new-eye-day:first-child{margin-top:0}
.new-eye-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr);
  gap:var(--ui-2);
  width:100%;
  text-align:left;
  padding:var(--ui-2);
  border:1px solid var(--line);
  border-left:3px solid var(--status-surface-border, var(--line));
  border-radius:var(--radius-chip);
  background:var(--soft);
  font:inherit;
  cursor:pointer;
}
.new-eye-row:hover{background:var(--panel)}
.new-eye-when{
  color:var(--muted);
  font-size:var(--fs-caption);
  font-weight:var(--fw-bold);
  line-height:1.35;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.new-eye-main{display:grid;gap:2px;min-width:0}
.new-eye-title{
  color:var(--ink);
  font-size:var(--fs-label);
  font-weight:var(--fw-bold);
  line-height:1.3;
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.new-eye-meta{
  color:var(--muted);
  font-size:var(--fs-caption);
  line-height:1.35;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.new-eye-meta b{color:var(--status-surface-ink, var(--ink));font-weight:var(--fw-bold)}
.new-eye-foot{
  color:var(--muted);
  font-size:var(--fs-caption);
  text-align:center;
}
.new-eye-dot{
  position:absolute;
  top:6px;
  right:6px;
  width:7px;
  height:7px;
  border-radius:var(--ui-r-pill);
  background:var(--status-rejected);
}
.new-eye-dot[hidden]{display:none}
#newEyeBtn{position:relative}
@media (max-width:520px){
  .new-eye{
    top:auto;
    left:10px;
    right:10px;
    bottom:calc(84px + var(--safe-bottom));
    width:auto;
    max-height:62dvh;
  }
}

/* ===== The New Eye — tab & lapisan kalender (28 Jul 2026) ===== */
.new-eye-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--ui-05);
  padding:3px;
  border-radius:var(--ui-r-pill);
  background:var(--soft);
}
.new-eye-tab{
  border:0;
  background:transparent;
  color:var(--muted);
  border-radius:var(--ui-r-pill);
  padding:6px 8px;
  font:inherit;
  font-size:var(--fs-caption);
  font-weight:var(--fw-bold);
  cursor:pointer;
}
.new-eye-tab.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow-soft)}
.new-eye-search[hidden],.new-eye-filters[hidden]{display:none}
/* GERBANG AKSES — penawar wajib. Atribut [hidden] hanya bernilai display:none dengan
   kekhususan (0,0,0); .new-eye-tabs (flex), .new-eye-tab (flex) dan .icon-btn
   (inline-flex) semuanya menang atasnya, jadi tanpa baris ini tombol dan tab yang
   "disembunyikan" gerbang tetap tergambar utuh di layar. Sudah dua kali menggigit di
   proyek ini (blok tujuan ETA, strip dashboard) — karena itu !important dan eksplisit. */
.new-eye-trigger[hidden],.new-eye-tabs[hidden],.new-eye-tab[hidden]{display:none !important}
/* Tampilan gabungan antar profil (gate #5). Satu profil = satu warna, dan warna
   yang sama dipakai di daftar centang maupun penanda kartu — kalau berbeda,
   warnanya berhenti berarti apa-apa. */
.new-eye-swatch-profile{background:var(--profile-color, var(--accent))}
.cal-profile-mark{
  display:inline-block;
  margin-right:5px;
  padding:0 5px;
  border-radius:var(--ui-r-pill);
  background:var(--profile-color, var(--accent));
  color:#fff;
  font-size:9px;
  font-weight:var(--fw-heavy);
  letter-spacing:.04em;
  vertical-align:1px;
}
/* Agenda profil lain: BACA-SAJA (server mengirim detailLocked). Kursor dan
   opasitas dibuat berbeda supaya ketiadaan reaksi saat diketuk terbaca sebagai
   disengaja, bukan sebagai aplikasi menggantung. */
.cal-item.is-profile-locked,.agenda-row.is-profile-locked{cursor:default;opacity:.86}
.new-eye-layer-group{display:grid;gap:0;margin-bottom:var(--ui-25)}
.new-eye-layer-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--ui-2);
  margin-bottom:var(--ui-05);
}
.new-eye-layer-head p{
  margin:0;
  color:var(--muted);
  font-size:10px;
  font-weight:var(--fw-heavy);
  letter-spacing:.1em;
  text-transform:uppercase;
}
.new-eye-linkbtn{
  border:0;
  background:transparent;
  color:var(--link);
  padding:0;
  font:inherit;
  font-size:var(--fs-caption);
  font-weight:var(--fw-bold);
  cursor:pointer;
}
.new-eye-layer{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  align-items:center;
  gap:var(--ui-15);
  padding:3px var(--ui-15);
  border-radius:var(--radius-chip);
  cursor:pointer;
}
.new-eye-layer:hover{background:var(--soft)}
.new-eye-layer input{width:15px;height:15px;margin:0;accent-color:var(--accent);cursor:pointer}
.new-eye-swatch{
  width:11px;
  height:11px;
  border-radius:3px;
  background:var(--accent);
}
/* Jenis agenda diwarnai menurut STATUS di kalender, jadi titiknya netral. */
.new-eye-swatch-netral{background:var(--line);border:1px solid var(--muted);opacity:.55}

.new-eye-swatch-evt-kemenko{background:#2563eb}
.new-eye-swatch-evt-pd{background:#0f766e}
.new-eye-swatch-evt-kresna{background:#b45309}
.new-eye-swatch-evt-hut{background:var(--evt-hut-ink)}
.new-eye-swatch-evt-internal{background:#475569}
.new-eye-layer-label{
  color:var(--ink);
  font-size:var(--fs-label);
  font-weight:var(--fw-medium);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.new-eye-layer-count{
  color:var(--muted);
  font-size:var(--fs-caption);
  font-variant-numeric:tabular-nums;
}
.new-eye-layer.off .new-eye-layer-label,
.new-eye-layer.off .new-eye-swatch{opacity:.42}
.new-eye-note{
  margin:var(--ui-1) 0 0;
  color:var(--muted);
  font-size:var(--fs-caption);
  line-height:1.45;
}

/* ===== Tata letak 28 Jul 2026 (permintaan pemilik) =====
   (1) Pemilih mode kalender (Harian/Mingguan/Bulanan) DI TENGAH kepala kalender.
       Dipasang hanya di layar >=761px: di bawah itu kepala kalender sudah jadi
       satu kolom (lihat @media max-width:760px) dan sudah otomatis rapi.
   (2) The New Eye pindah dari header website ke sudut atas kalender; panelnya
       tidak lagi dipatok ke topbar melainkan digantung dari tombolnya (posisi
       dihitung di app.js), karena .cc-shell overflow:hidden akan memotongnya. */
@media (min-width:761px){
  .calendar-suite-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
  }
  .calendar-suite-head > :first-child{grid-column:1}
  .calendar-suite-head > .calendar-segmented{grid-column:2;justify-self:center;flex:none}
  /* Kolom ketiga menyeimbangkan kolom judul, jadi pemilih mode benar-benar di
     tengah KARTU — bukan sekadar di tengah sisa ruang. */
  .calendar-suite-head > .new-eye-trigger{grid-column:3;justify-self:end}
}
/* Layar sempit: judul + tombol satu baris, pemilih mode turun penuh di bawahnya. */
@media (max-width:760px){
  .calendar-suite-head{
    grid-template-columns:minmax(0,1fr) auto;
    align-items:start;
  }
  .calendar-suite-head > :first-child{grid-column:1;grid-row:1}
  .calendar-suite-head > .new-eye-trigger{grid-column:2;grid-row:1;justify-self:end}
  .calendar-suite-head > .calendar-segmented{grid-column:1 / -1;grid-row:2}
}
/* Nilai top/right awal hanya cadangan sebelum app.js menghitung posisi. */
.new-eye{top:96px}
#newEyeBtn{position:relative;flex:0 0 auto}

/* Strip dashboard Home disembunyikan REVERSIBEL untuk peran tanpa viewHome.
   Wajib mengalahkan .grid{display:grid} — itulah sebabnya dulu node-nya sampai
   di-remove(), yang ternyata tak bisa dikembalikan saat hak akses tiba terlambat
   (bug produksi 28 Jul 2026). Kelas ini dipasang/dilepas oleh
   applyViewAccessControls() SETELAH peta akses selesai dimuat. */
.grid.stats.is-access-hidden{ display:none !important; }

/* ===================================================================
   TIGA BAGIAN KALENDER (28 Jul 2026, malam) — diambil ulang SENDIRIAN dari
   paket yang dibatalkan, atas permintaan eksplisit pemilik. TIDAK ada halaman
   terkunci, TIDAK ada sticky, TIDAK ada kompresi kepala: halaman tetap
   menggulir seperti biasa. Hanya tiga hal di bawah ini.
   =================================================================== */

/* 1. Strip 6 stat HANYA di Home. Atribut disetel switchView; sebelum JS
   menyetelnya (muat awal) strip tetap tampil, dan muat awal memang Home. */
body[data-active-view]:not([data-active-view="today"]) .grid.stats{display:none !important}

/* 2. Kartu tanggal harian -> bar ramping sebaris; daftar agenda mendapat
   seluruh lebar (grid dua kolom menjadi satu). */
.day-focus-layout{grid-template-columns:1fr; gap:var(--ui-2)}
.day-focus-date{
  display:flex; flex-direction:row; align-items:center; flex-wrap:wrap;
  gap:6px 10px; padding:8px 14px; border-radius:var(--ui-r);
}
.day-focus-date strong{font-size:24px; line-height:1; letter-spacing:0}
.day-focus-date > span:not(.day-focus-kicker):not(.day-focus-count){font-size:13px}
.day-focus-kicker{font-size:10px}
.day-focus-count{font-size:11px}
.day-focus-date .day-nav{
  /* bentuk kartu lama menumpuknya vertikal; bar sebaris menuntut mendatar */
  margin-left:auto; display:flex; flex-direction:row; align-items:center;
  gap:6px; width:auto;
}
.day-focus-date .day-nav .btn{min-height:0; height:32px; padding:2px 12px; width:auto}

/* 3. Trio Harian/Mingguan/Bulanan -> satu baris pil kecil. Selektor ganda
   (.calendar-suite ...) wajib: aturan keseragaman lama ber-spesifisitas
   (0,2,0) memasang min-height:74px + flex-direction:column. */
.calendar-glance, .calendar-suite .calendar-glance{
  display:flex; flex-wrap:wrap; justify-content:flex-start;
  gap:var(--ui-2); margin:6px 0 10px;
}
.calendar-glance-item, .calendar-suite .calendar-glance-item{
  display:flex; flex-direction:row; align-items:baseline; gap:7px;
  padding:5px 13px; border-radius:var(--ui-r-pill);
  min-height:0; justify-content:flex-start;
}
.calendar-suite .calendar-glance-item span{font-size:10px; letter-spacing:.08em; text-transform:uppercase; display:inline}
.calendar-suite .calendar-glance-item strong{font-size:16px; line-height:1; display:inline}
.calendar-suite .calendar-glance-item small{font-size:10px; display:inline}
/* Ringkasan MINGGU (Agenda/Prioritas/TBC) ikut jadi pil kecil — khusus panel
   minggu; ringkasan Bulanan TIDAK disentuh (tidak diminta kali ini). */
#calendar-panel-week .calendar-summary{
  display:flex; flex-wrap:wrap; gap:var(--ui-2); margin:6px 0 10px;
}
#calendar-panel-week .calendar-summary .stat{
  display:flex; flex-direction:row; align-items:baseline; gap:7px;
  min-height:0; padding:5px 13px; border-radius:var(--ui-r-pill);
}
#calendar-panel-week .calendar-summary .stat span{font-size:10px}
#calendar-panel-week .calendar-summary .stat strong{font-size:16px; line-height:1}

/* ===================================================================
   TANGGAL & BLOK TERPAKU ala Google Calendar (28 Jul 2026, contoh GCal
   dari pemilik). POLA-nya persis GCal: KANVASNYA yang menggulir, dan baris
   tanggal + baris BLOK menempel di mulut kanvas. Halaman luar TIDAK diubah:
   tidak dikunci, tidak dikompresi — kepala Dashboard tetap apa adanya.
   Offset tempelan (--week-head-h, --day-bar-h) diukur renderer per render.
   =================================================================== */
@media (min-width:761px){
  /* ---------- MINGGUAN: grid menggulir, SEN..MIN + BLOK menempel ---------- */
  #view-calendar #weekGrid{
    max-height:calc(100dvh - 150px);
    overflow-y:auto; overscroll-behavior:contain;
  }
  /* overflow:hidden pada week-stage mematahkan sticky anak-anaknya; clip
     radius tetap aman karena #weekGrid (wadah gulir) yang memotong. */
  #view-calendar .week-stage{overflow:visible}
  #view-calendar .week-headrow{
    position:sticky; top:0; z-index:6;
    background:var(--panel);
  }
  #view-calendar .week-alldayrow{
    position:sticky; top:var(--week-head-h, 66px); z-index:5;
    background:var(--panel);
  }

  /* ---------- HARIAN: bar tanggal + pita blok menempel ---------- */
  /* Wadah gulirnya adalah day-focus-layout: bar tanggal ada DI DALAMNYA,
     jadi bar bisa menempel di top:0 — persis contoh GCal Day milik pemilik. */
  #view-calendar .day-focus-layout{
    max-height:calc(100dvh - 150px);
    overflow-y:auto; overscroll-behavior:contain;
    grid-template-columns:1fr;
    /* celah antar-anak memperlihatkan kartu yang menggulir di baliknya —
       jarak visual diserahkan ke padding permukaan, bukan gap wadah gulir */
    gap:0;
  }
  #view-calendar .day-focus-date{
    position:sticky; top:0; z-index:6;
    background:var(--panel);
  }
  /* leluhur di antara pita dan wadah gulir tidak boleh ber-overflow —
     dan max-height warisan daftar harian (486px) DILEPAS: dialah yang membuat
     timeline berhenti di tengah layar dengan ruang abu kosong di bawahnya. */
  #view-calendar .day-agenda-surface,
  #view-calendar #selectedDateList,
  #view-calendar .day-stage{overflow:visible; max-height:none}
  #view-calendar .day-allday{
    position:sticky; top:var(--day-bar-h, 66px); z-index:5;
    background:var(--panel);
    padding-bottom:6px;
  }
}

/* ===================================================================
   REVAMP KALENDER FULL-SCREEN ala Google Calendar (28 Jul 2026).
   Referensi: tangkapan layar GCal Day/Week/Month milik pemilik.
   Prinsip: satu toolbar ringkas, kanvas memakan seluruh sisa layar,
   TAB bawah dipertahankan, tampilan flat putih ala GCal. Semuanya
   digantung pada body[data-active-view="calendar"] + desktop, jadi
   tab lain dan mobile TIDAK tersentuh sama sekali.
   =================================================================== */
@media (min-width:761px){
  /* ---------- panggung penuh: cangkang kaca menjadi flat & full-bleed ---------- */
  /* Topbar (logo, MENKO, status) DISEMBUNYIKAN di tab Kalender — permintaan
     pemilik 28 Jul malam: kalender benar-benar satu halaman penuh. Kembali
     tampil begitu pindah ke tab mana pun lewat TAB bawah. */
  body[data-active-view="calendar"] .topbar{display:none}
  /* Halaman Kalender DIKUNCI TOTAL (permintaan pemilik: "bulanan benar-benar
     statik"). Aman karena ketiga mode kini muat di bawah garis layar — gulir
     hanya hidup DI DALAM kanvas Harian/Mingguan; Bulanan diam sepenuhnya. */
  body[data-active-view="calendar"]{overflow:hidden; height:100dvh}
  body[data-active-view="calendar"] #app{padding:0}
  body[data-active-view="calendar"] main{max-width:none; padding:0; margin:0; background:var(--panel); height:100dvh; overflow:hidden}
  body[data-active-view="calendar"] #view-calendar .calendar-command-shell{
    max-width:none; margin:0; border:0; border-radius:0;
    padding:4px 10px 0; background:var(--panel); box-shadow:none;
  }
  body[data-active-view="calendar"] #view-calendar .calendar-command-shell::before{display:none}
  /* kepala shell: hanya deretan tombol aksi, ramping, rata kanan */
  body[data-active-view="calendar"] #view-calendar .cc-shell-header{padding:2px 0 4px; margin:0; justify-content:flex-end}
  body[data-active-view="calendar"] #view-calendar .cc-shell-heading{display:none}
  body[data-active-view="calendar"] #view-calendar .cc-header-side .btn{min-height:0; height:32px; padding:2px 14px; font-size:12px}
  /* kartu suite menjadi permukaan polos tanpa kaca (blur mahal ikut hilang) */
  body[data-active-view="calendar"] #view-calendar .calendar-suite{
    border:0; border-radius:0; padding:0; margin:0;
    background:transparent; box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }

  /* ---------- toolbar tunggal ala GCal ---------- */
  /* INI yang memotong logo: #calendarSuite ber-overflow:hidden (sisa gaya
     kartu ber-sudut-bulat) dan tepi atasnya ada DI BAWAH puncak logo yang
     dinaikkan, jadi bagian atas logo terpotong rapi tanpa jejak. Sudut bulat
     dan bingkainya sendiri sudah dilucuti di mode kalender penuh, jadi klipnya
     tak lagi ada gunanya di sini. Gulir tetap ditangani panel di dalamnya
     (#calendarGrid, #weekGrid, .day-focus-layout), bukan oleh wadah ini. */
  body[data-active-view="calendar"] #view-calendar #calendarSuite{overflow:visible}
  /* Sel bulanan adalah flex kolom: tanpa ini pil agenda IKUT MENYUSUT saat sel
     memendek (sampai 8px pada layar 600px), teksnya meluber keluar kotak dan
     terlihat seperti terpotong di tengah. Jumlah pil yang dirender sudah
     menyesuaikan tinggi baris (chipMuatUntukPekan), jadi pil cukup menolak
     menyusut — bukan diperkecil. */
  body[data-active-view="calendar"] #view-calendar .calendar-day .calendar-pill,
  body[data-active-view="calendar"] #view-calendar .calendar-day .calendar-more{
    flex:0 0 auto;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar{
    display:flex; align-items:center; flex-wrap:wrap; gap:10px;
    padding:6px 2px 8px; border-bottom:1px solid var(--line);
  }
  /* Judul boleh menyusut lebih dulu sebelum barisnya terpaksa membungkus.
     Toolbar yang membungkus tidak merusak apa pun — tingginya diukur, jadi
     anggaran layar ketiga panel ikut menyesuaikan. */
  body[data-active-view="calendar"] #view-calendar .gcal-title{
    min-width:0; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto;
  }
  /* Logo mengisi sudut kiri atas: topbar disembunyikan di mode kalender penuh,
     jadi identitas Kemenko Infra pindah ke sini. Ukuran desktop dinaikkan
     (permintaan pemilik, 28 Jul 2026) — ponsel punya ukurannya sendiri. */
  body[data-active-view="calendar"] #view-calendar .gcal-brand{
    width:120px; height:120px;
    /* Naik menembus .cc-shell-header di atasnya — pita itu tetap di tempat
       semula (keputusan pemilik 29 Jul) dan sisi kirinya kosong. Margin
       negatif, bukan position:relative, supaya tinggi toolbar ikut menyusut
       dan --gcal-bar-h tetap melaporkan angka benar ke anggaran layar.
       Besar kenaikannya DIHITUNG ukurGcalToolbar dari posisi nyata toolbar
       (--brand-naik), bukan ditebak dari tinggi pita. Cadangan 0px berarti:
       kalau JS belum sempat mengukur, logo duduk di bawah pita — turun,
       tidak pernah terpotong. */
    margin-top:calc(-1 * var(--brand-naik, 0px)); margin-bottom:-4px;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .gcal-nav{display:flex; gap:2px}
  /* [Hari ini ‹ ›] duduk rapat di kiri The New Eye; segmented bergeser kiri
     memberi ruang (permintaan pemilik, 28 Jul 2026). */
  body[data-active-view="calendar"] #view-calendar .gcal-nav-group{
    display:flex; align-items:center; gap:6px; flex:0 0 auto;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .icon-btn{
    min-height:0; height:32px; min-width:32px; width:32px; font-size:16px;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .btn{
    min-height:0; height:32px; padding:2px 14px; font-size:12px;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-title{
    margin:0; font-size:20px; font-weight:650; letter-spacing:-.01em; white-space:nowrap;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-spacer{flex:1 1 auto}
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .calendar-mode-btn{
    min-height:0; height:30px; padding:2px 14px; font-size:12px;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .calendar-segmented{
    padding:2px; min-height:0; margin-right:6px;
  }
  body[data-active-view="calendar"] #view-calendar .gcal-toolbar .new-eye-trigger{
    min-height:0; height:32px; min-width:32px; width:32px; grid-column:auto; justify-self:auto;
  }

  /* ---------- baris informasi lama yang digantikan toolbar ---------- */
  body[data-active-view="calendar"] #view-calendar .calendar-suite-head,
  body[data-active-view="calendar"] #view-calendar .calendar-glance,
  body[data-active-view="calendar"] #view-calendar .week-toolbar,
  body[data-active-view="calendar"] #view-calendar #weekSummary,
  body[data-active-view="calendar"] #view-calendar .week-legend,
  body[data-active-view="calendar"] #view-calendar .calendar-toolbar,
  body[data-active-view="calendar"] #view-calendar #calendar-panel-month .calendar-summary,
  body[data-active-view="calendar"] #view-calendar .day-agenda-surface .section-head.compact{
    display:none;
  }

  /* ---------- HARIAN: kanvas penuh, bar tanggal kecil terpaku ----------
     Anggaran layar = tinggi toolbar TERUKUR (--gcal-bar-h, disetel
     ukurGcalToolbar) + 81px sisa krom (padding shell + pita .cc-shell-header
     + ruang bawah). Dulu dipatok 132px dengan asumsi toolbar 51px; begitu
     logonya dibesarkan asumsi itu meleset dan panel terpotong diam-diam
     karena main ber-overflow:hidden. */
  body[data-active-view="calendar"] #view-calendar .day-focus-layout{
    max-height:calc(100dvh - var(--gcal-bar-h, 93px) - 81px);
  }
  body[data-active-view="calendar"] #view-calendar .day-focus-date{
    padding:6px 12px; border-radius:0; border:0; border-bottom:1px solid var(--line);
    box-shadow:none; background:var(--panel);
  }
  body[data-active-view="calendar"] #view-calendar .day-focus-date strong{font-size:18px}
  /* navigasi per-panel disembunyikan — toolbar yang memegang ‹ Hari ini › */
  body[data-active-view="calendar"] #view-calendar .day-focus-date .day-nav{display:none}
  body[data-active-view="calendar"] #view-calendar .day-agenda-surface{
    border:0; border-radius:0; background:transparent; box-shadow:none; padding:6px 0 0;
  }

  /* ---------- MINGGUAN: grid penuh ---------- */
  body[data-active-view="calendar"] #view-calendar #weekGrid{
    max-height:calc(100dvh - var(--gcal-bar-h, 93px) - 81px);
    border:0; border-radius:0;
  }
  body[data-active-view="calendar"] #view-calendar .week-stage{border:0; border-radius:0}

  /* ---------- BULANAN: grid memenuhi layar & menggulir sendiri ---------- */
  body[data-active-view="calendar"] #view-calendar #calendarWeekdays{margin-top:4px}
  body[data-active-view="calendar"] #view-calendar #calendarGrid{
    /* SATU layar statik CUKUP (keputusan pemilik): tidak ada gulir bulanan.
       Baris membagi rata sisa layar — bulan 6 baris berarti sel lebih pendek,
       dan itu diterima; isi sel yang tak muat terpotong dengan "+N lagi". */
    height:calc(100dvh - var(--gcal-bar-h, 93px) - 99px);
    overflow:hidden;
    /* #calendarGrid ber-display:block di konteks ini (barisnya .calendar-week,
       bukan 35 sel) — grid-auto-rows tak pernah berefek. Flex kolom yang
       membagi rata: bulan 6 baris berarti tiap baris lebih pendek, diterima. */
    display:flex; flex-direction:column;
  }
  body[data-active-view="calendar"] #view-calendar #calendarGrid .calendar-week{
    flex:1 1 0; min-height:0;
  }
  body[data-active-view="calendar"] #view-calendar #calendarGrid .calendar-day{
    min-height:0; height:100%; overflow:hidden;
  }
  /* performa: blur per-sel & per-pil di bulanan dicabut (90 pil berlatar solid
     membayar blur yang tak terlihat; terukur 132 elemen -> penyebab lag gulir) */
  body[data-active-view="calendar"] #view-calendar #calendar-panel-month .calendar-day,
  body[data-active-view="calendar"] #view-calendar #calendar-panel-month .calendar-pill,
  body[data-active-view="calendar"] #view-calendar #calendar-panel-month .calendar-chip{
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  body[data-active-view="calendar"] #view-calendar #calendar-panel-month .calendar-day{
    background:var(--panel-strong); contain:layout paint;
  }
}

/* ===================================================================
   BOLA NAVIGASI liquid glass (28 Jul 2026, ide pemilik) — pengganti tab
   bar panjang di DESKTOP. Menguncup = bola berikon tab aktif; mengembang
   = tumpukan menu kaca; bisa diseret ke mana pun (posisi diingat).
   Mobile tetap tab bar lama — jangkauan jempol adalah urusan lain.
   =================================================================== */
@media (min-width:761px){
  body.nav-orb-aktif .tabbar,
  body.nav-orb-aktif .bottom-nav{display:none !important}

  .nav-orb{position:fixed; z-index:80; width:60px; height:60px}
  .nav-orb-ball{
    width:60px; height:60px; border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    background:linear-gradient(145deg, rgba(255,255,255,.66), rgba(255,255,255,.28));
    backdrop-filter:blur(22px) saturate(180%);
    -webkit-backdrop-filter:blur(22px) saturate(180%);
    box-shadow:0 14px 34px rgba(16,24,40,.22), inset 0 1px 0 rgba(255,255,255,.75);
    cursor:grab; display:flex; align-items:center; justify-content:center;
    font-size:22px; color:var(--ink);
    transition:transform .16s ease, box-shadow .16s ease;
  }
  .nav-orb-ball:active{cursor:grabbing; transform:scale(.94)}
  .nav-orb-ball:hover{box-shadow:0 18px 40px rgba(16,24,40,.28), inset 0 1px 0 rgba(255,255,255,.8)}
  [data-theme="dark"] .nav-orb-ball{
    border-color:rgba(148,163,184,.35);
    background:linear-gradient(145deg, rgba(51,65,85,.72), rgba(15,23,42,.5));
    color:var(--ink);
  }

  .nav-orb-menu{
    position:absolute; left:50%; bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(6px) scale(.96);
    transform-origin:bottom center;
    display:flex; flex-direction:column; gap:4px;
    padding:8px; border-radius:22px;
    border:1px solid rgba(255,255,255,.5);
    background:linear-gradient(160deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
    backdrop-filter:blur(26px) saturate(180%);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    box-shadow:0 22px 54px rgba(16,24,40,.26);
    opacity:0; pointer-events:none;
    transition:opacity .14s ease, transform .14s ease;
  }
  /* bola di paruh ATAS layar -> menu mengembang ke bawah */
  .nav-orb-menu.ke-atas{}
  .nav-orb-menu:not(.ke-atas){bottom:auto; top:calc(100% + 10px); transform-origin:top center}
  .nav-orb-menu.terbuka{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1)}
  [data-theme="dark"] .nav-orb-menu{
    border-color:rgba(148,163,184,.3);
    background:linear-gradient(160deg, rgba(51,65,85,.82), rgba(15,23,42,.66));
  }

  .nav-orb-item{
    display:flex; align-items:center; gap:10px;
    min-width:150px; padding:8px 14px; border:0; border-radius:14px;
    background:transparent; color:var(--ink); font:inherit; font-size:13px;
    cursor:pointer; text-align:left;
  }
  .nav-orb-item:hover{background:rgba(255,255,255,.55)}
  [data-theme="dark"] .nav-orb-item:hover{background:rgba(148,163,184,.18)}
  .nav-orb-item.aktif{background:var(--accent); color:#fff}
  .nav-orb-item-ikon{width:20px; text-align:center; font-size:15px}
  @media (prefers-reduced-motion:reduce){
    .nav-orb-ball,.nav-orb-menu{transition:none}
  }
}

/* Toolbar GCal dibangun di SEMUA lebar (DOM tetap sama saat jendela diubah,
   jadi segmented & The New Eye tak perlu dipindah bolak-balik). Gaya penuhnya
   desktop-saja, maka di sini hanya tata letak dasarnya — tanpa ini, di ponsel
   logo memenuhi lebar layar dan tombolnya menumpuk ke bawah. */
#view-calendar .gcal-toolbar{display:flex; align-items:center; flex-wrap:wrap; gap:8px}
#view-calendar .gcal-nav-group{display:flex; align-items:center; gap:6px}
#view-calendar .gcal-nav{display:flex; gap:4px}
/* Ukuran ponsel jadi dasar; desktop menimpanya lebih besar. Tanpa aturan
   dasar ini gambar memenuhi lebar layar. */
#view-calendar .gcal-brand{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; flex:0 0 auto;
}
#view-calendar .gcal-brand img{width:100%; height:100%; object-fit:contain; display:block}
@media (max-width:760px){
  /* ponsel sudah punya kartu tanggal sendiri — judul di toolbar cuma
     pengulangan; logo tetap ada, hanya diperkecil */
  #view-calendar .gcal-title,
  #view-calendar .gcal-spacer{display:none}
  /* segmented dipaksa selebar wadah oleh aturan lama, jadi logo pasti
     terlempar ke barisnya sendiri dan tampak nyasar. Naikkan segmented ke
     baris pertama supaya logo memimpin baris kontrol: [logo][Hari ini ‹ ›][◉] */
  #view-calendar .gcal-toolbar .calendar-segmented{order:-1}
}

/* Pita BLOK harian: ramping + ciut bila lebih dari 3 (28 Jul 2026).
   Bagian CIUT wajib di luar media query: tombolnya dirender di semua lebar,
   jadi kalau aturannya desktop-saja, di ponsel tombol muncul tanpa menciutkan. */
#view-calendar .day-allday-list{display:flex; flex-direction:column; gap:4px}
/* Standar 2 kartu blok (10 Agu 2026) — selaras BLOK_TAMPIL=2 di calendar.js */
#view-calendar .day-allday.tertutup .day-allday-list > *:nth-child(n+3){display:none}
#view-calendar .day-allday-more{
  align-self:center; margin-top:4px; padding:3px 12px; border:1px solid var(--line);
  border-radius:var(--ui-r-pill); background:transparent; color:var(--muted);
  font:inherit; font-size:11px; cursor:pointer;
}
#view-calendar .day-allday-more:hover{background:var(--panel-strong); color:var(--ink)}
@media (min-width:761px){
  /* tiap blok jadi pil sebaris — pita tak lagi setinggi kartu penuh */
  #view-calendar .day-allday .calendar-day-event{
    display:flex; flex-direction:row; align-items:center; gap:10px;
    padding:5px 12px; min-height:0; border-radius:var(--ui-r-pill);
  }
  #view-calendar .day-allday .calendar-day-event > span:nth-child(2){
    display:flex; flex-direction:row; align-items:baseline; gap:8px; min-width:0; flex:1 1 auto;
  }
  #view-calendar .day-allday .calendar-day-event-title,
  #view-calendar .day-allday .calendar-day-event-meta{
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:0 1 auto;
  }
  #view-calendar .day-allday .calendar-day-event-title{font-size:13px}
  #view-calendar .day-allday .calendar-day-event-meta{font-size:10px}
  #view-calendar .day-allday .calendar-day-event-time{
    font-size:10px; flex:0 0 auto; min-height:0; min-width:0; height:auto; width:auto; padding:2px 8px;
  }
  #view-calendar .day-allday .badge{padding:2px 7px; font-size:10px}
}

/* ============================================================================
   PETA SATELIT MAPS JS — 29 Jul 2026
   Kanvas google.maps.Map menggantikan iframe embed saat kunci Maps JS tersedia DAN
   agenda terpilih punya koordinat pasti. Kanvas dipasang JS sebagai anak pertama
   #officialMapStage (lihat mountMapsJs di assets/map-view.js), jadi tidak ada markup
   untuknya di index.html.
   ============================================================================ */
#view-map .google-map-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:inherit;
}
/* Kebijakan Google: logo (sudut kiri bawah) dan atribusi "Map data ©" (sudut kanan bawah)
   TIDAK boleh tertutup. Bilah chip lokasi aslinya bottom:14px melintang penuh — persis di
   atas keduanya. Dinaikkan hanya pada jalur kanvas; jalur iframe tidak punya kewajiban ini. */
#view-map .official-map-stage:has(.google-map-canvas) .map-location-strip{bottom:34px}
/* Shade dekoratif dibuat untuk iframe statis. Di atas peta yang bisa digeser ia menurunkan
   kontras citra satelit tanpa memberi apa pun, jadi dimatikan pada jalur kanvas.
   (pointer-events:none sudah ada di app.css, jadi ia tak pernah memblokir gestur.) */
#view-map .official-map-stage:has(.google-map-canvas) .google-map-shade{display:none}

/* =========================================================================
   PETA 3.0 (29 Jul 2026) — peta jadi LATAR PENUH, kartu kaca mengambang.
   Referensi: dua tangkapan layar pemilik.

   Peta LAMA tidak dihapus; ia hanya disembunyikan saat body.peta3-aktif.
   Mencabut fitur = mematikan saklarnya, bukan mengembalikan CSS.

   Blur DIPAKAI HEMAT dan hanya pada permukaan kaca yang benar-benar melayang
   (panel kiri, bilah aksi, kontrol). Catatan performa yang sudah dibayar
   proyek ini: 132 elemen berblur = penyebab lag gulir bulanan. Simpul rute,
   garis, dan teks SVG sengaja TANPA blur.
   ========================================================================= */
body.peta3-aktif #view-map > .map-command-shell{display:none}
body.peta3-aktif .topbar{display:none}
body.peta3-aktif #app{padding:0}
body.peta3-aktif main{max-width:none; padding:0; margin:0; height:100dvh; overflow:hidden}

#peta3{position:relative; width:100%; height:100dvh; overflow:hidden; background:#0b1220;
  /* SATU sumber lebar panel kaca kiri. Kartu versus memakai token yang sama
     untuk menempatkan dirinya di sebelah kanan panel; tanpa token, angkanya
     harus ditebak dua kali dan keduanya bergeser diam-diam saat panel diubah. */
  --peta3-panel-lebar:380px}
#peta3[hidden]{display:none}      /* penawar: [hidden] kalah dari display:block */

.peta3-basis{position:absolute; inset:0; z-index:0}
.peta3-basis .peta3-iframe{width:100%; height:100%; border:0; display:block; filter:saturate(1.05)}
.peta3-skema{position:absolute; inset:0; z-index:1; width:100%; height:100%}
.peta3-skema[hidden]{display:none}

/* --- garis & simpul rute (SVG, tanpa blur) --- */
.peta3-garis{stroke-width:5; stroke-linecap:round; fill:none; opacity:.95}
.peta3-garis.risiko-aman{stroke:#30d158}
.peta3-garis.risiko-ketat{stroke:#ff9f0a}
.peta3-garis.risiko-berisiko{stroke:#ff453a}
.peta3-garis.risiko-belum{stroke:rgba(255,255,255,.55); stroke-dasharray:2 9}
.peta3-cakram{fill:rgba(120,180,255,.12); stroke:rgba(160,200,255,.5); stroke-dasharray:5 5}
.peta3-simpul{fill:#0b1220; stroke:#fff; stroke-width:3}
.peta3-simpul.tingkat-perkiraan{stroke:rgba(255,255,255,.62); stroke-dasharray:4 3}
.peta3-simpul.tingkat-bandara{stroke:#64d2ff}
.peta3-simpul-no{fill:#fff; font-size:13px; font-weight:700; text-anchor:middle}
.peta3-simpul-teks{fill:rgba(255,255,255,.94); font-size:13px; font-weight:600;
  paint-order:stroke; stroke:rgba(4,10,20,.75); stroke-width:4px; stroke-linejoin:round}
.peta3-skala line{stroke:rgba(255,255,255,.85); stroke-width:2}
.peta3-skala text{fill:rgba(255,255,255,.85); font-size:12px; font-weight:600; text-anchor:middle}
.peta3-skema-nota{fill:rgba(255,255,255,.66); font-size:12px; font-weight:600}

/* --- kontrol mengambang --- */
.peta3-atas{position:absolute; z-index:3; top:18px; left:50%; transform:translateX(-50%)}
.peta3-seg{display:flex; gap:2px; padding:4px; border-radius:var(--ui-r-pill);
  background:rgba(18,26,40,.52); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%)}
.peta3-seg-btn{border:0; background:transparent; color:rgba(255,255,255,.76); cursor:pointer;
  font:inherit; font-size:13px; font-weight:600; padding:7px 16px; border-radius:var(--ui-r-pill)}
.peta3-seg-btn.aktif{background:rgba(255,255,255,.94); color:#0b1220}
.peta3-seg-btn:hover:not(.aktif){color:#fff}

.peta3-kanan{position:absolute; z-index:3; top:18px; right:18px; display:flex; align-items:center; gap:10px}
.peta3-bulat,.peta3-jenis{border:1px solid rgba(255,255,255,.18); color:#fff; cursor:pointer;
  background:rgba(18,26,40,.52); font:inherit; font-size:13px; font-weight:600;
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%)}
.peta3-bulat{width:42px; height:42px; border-radius:50%; font-size:17px}
.peta3-jenis{height:42px; padding:0 18px; border-radius:var(--ui-r-pill)}
.peta3-jenis:disabled{opacity:.55; cursor:not-allowed}

/* --- panel kaca kiri --- */
.peta3-panel{position:absolute; z-index:3; top:18px; left:18px;
  width:min(var(--peta3-panel-lebar), calc(100vw - 36px)); max-height:calc(100dvh - 150px); overflow:auto;
  display:flex; flex-direction:column; gap:var(--ui-2); padding:var(--ui-3);
  border-radius:var(--radius-card); color:#fff;
  background:rgba(16,24,38,.56); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 24px 60px rgba(4,10,20,.45);
  backdrop-filter:blur(30px) saturate(170%); -webkit-backdrop-filter:blur(30px) saturate(170%)}
.peta3-kicker{margin:0; font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.62)}
.peta3-judul{margin:2px 0 0; font-size:26px; font-weight:650; letter-spacing:-.02em}
.peta3-tanggal{margin:0; font-size:var(--fs-body); color:rgba(255,255,255,.7)}
.peta3-angka{display:flex; gap:16px; flex-wrap:wrap; padding:10px 0;
  border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14)}
.peta3-angka span{font-size:var(--fs-label); color:rgba(255,255,255,.72)}
.peta3-angka b{display:block; font-size:20px; font-weight:700; color:#fff}
.peta3-angka .bahaya b{color:#ff6961}
.peta3-blok{display:flex; flex-direction:column; gap:6px}
.peta3-label{margin:0; font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.58)}
.peta3-persen{margin:0; font-size:30px; font-weight:700; letter-spacing:-.02em}
.peta3-nota{color:rgba(255,255,255,.6); font-size:var(--fs-caption); line-height:1.45}
.peta3-kosong{margin:0; font-size:var(--fs-label); color:rgba(255,255,255,.6)}
.peta3-baris{display:flex; gap:10px; align-items:flex-start}
.peta3-no{flex:0 0 auto; width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  font-size:12px; font-weight:700; color:#0b1220; background:rgba(255,255,255,.9)}
.peta3-no.waspada{background:#ff9f0a; color:#0b1220}
.peta3-no.bahaya{background:#ff453a; color:#fff}
.peta3-baris-isi{min-width:0; display:flex; flex-direction:column; gap:2px}
.peta3-baris-isi strong{font-size:var(--fs-body); font-weight:650}
.peta3-baris-isi small{font-size:var(--fs-caption); color:rgba(255,255,255,.66)}
.peta3-baris-isi em{font-style:normal; font-size:var(--fs-caption); font-weight:600; color:rgba(255,255,255,.72)}
.peta3-baris-isi em.tingkat-perkiraan{color:#ffd60a}
.peta3-baris-isi em.tingkat-tidak{color:rgba(255,255,255,.5)}
.peta3-baris-isi em.waspada{color:#ff9f0a}
.peta3-baris-isi em.bahaya{color:#ff6961}
.peta3-pita{display:flex; gap:14px; flex-wrap:wrap; padding-top:10px; border-top:1px solid rgba(255,255,255,.14)}
.peta3-pita-titik{display:flex; align-items:center; gap:6px; font-size:var(--fs-caption); color:rgba(255,255,255,.74)}
.peta3-pita-titik i{width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.5)}
.peta3-pita-titik i.st-aman,.peta3-pita-titik i.st-lewat{background:#30d158}
.peta3-pita-titik i.st-ketat{background:#ff9f0a}
.peta3-pita-titik i.st-berisiko{background:#ff453a}
.peta3-pita-titik i.st-tidak{background:transparent; border:1px dashed rgba(255,255,255,.5)}

/* --- bilah aksi mengambang --- */
.peta3-aksi{position:absolute; z-index:3; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; max-width:min(760px, calc(100vw - 36px));
  padding:12px 18px; border-radius:var(--ui-r-pill); color:#fff;
  background:rgba(16,24,38,.58); border:1px solid rgba(255,255,255,.18);
  box-shadow:0 20px 50px rgba(4,10,20,.45);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%)}
.peta3-aksi-ikon{font-size:16px; color:rgba(255,255,255,.72)}
.peta3-aksi-teks{min-width:0; display:flex; flex-direction:column; gap:1px}
.peta3-aksi-teks strong{font-size:var(--fs-body); font-weight:650; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.peta3-aksi-teks small{font-size:var(--fs-caption); color:rgba(255,255,255,.68)}
.peta3-aksi-jam{flex:0 0 auto; font-size:var(--fs-label); font-weight:650;
  padding:8px 16px; border-radius:var(--ui-r-pill); background:#0a84ff}
.peta3-lencana{flex:0 0 auto; font-size:var(--fs-caption); font-weight:700;
  padding:5px 11px; border-radius:var(--ui-r-pill)}
.peta3-lencana.aman{background:rgba(48,209,88,.2); color:#30d158}
.peta3-lencana.ketat{background:rgba(255,159,10,.2); color:#ff9f0a}
.peta3-lencana.berisiko{background:rgba(255,69,58,.2); color:#ff6961}
.peta3-aksi-tautan{flex:0 0 auto; color:#64d2ff; font-size:var(--fs-label); font-weight:600; text-decoration:none}
.peta3-aksi-tautan:hover{text-decoration:underline}
.peta3-aksi-kosong{margin:0; font-size:var(--fs-label); color:rgba(255,255,255,.72)}

/* --- ponsel: panel turun jadi lembar bawah, bilah aksi menumpuk --- */
@media (max-width:760px){
  body.peta3-aktif .topbar{display:block}
  body.peta3-aktif main{height:auto; overflow:visible}
  #peta3{height:78dvh}
  .peta3-panel{position:static; width:auto; max-height:none; margin:12px;
    background:rgba(16,24,38,.7)}
  .peta3-atas{top:10px}
  .peta3-seg{max-width:calc(100vw - 24px); overflow:auto}
  .peta3-aksi{left:12px; right:12px; transform:none; max-width:none; flex-wrap:wrap; bottom:12px}
}

@media (prefers-reduced-motion:reduce){
  .peta3-panel,.peta3-aksi{transition:none}
}

/* Mode skematik: latar gelap sendiri, iframe disembunyikan. Kartu kaca gelap
   menuntut latar gelap; menumpuk skema di atas peta terang membuat keduanya
   sama-sama tak terbaca. */
#peta3.mode-skema{background:
  radial-gradient(120% 90% at 18% 8%, #16233a 0%, #0b1220 55%, #070d17 100%)}
#peta3.mode-skema .peta3-basis{display:none}
.peta3-basis[hidden]{display:none}

/* BOLA NAVIGASI "MATI" DI TAB PETA (dilaporkan pemilik 29 Jul 2026) — aturan
   di sinilah sebabnya, dan karena itu ia DICABUT.

   Dulu baris ini memaksa `left:auto !important; top:auto !important` supaya orb
   pindah ke kanan bawah di tab Peta, menjauhi bilah aksi. Masalahnya kepemilikan
   posisi jadi TERBELAH: assets/nav-orb.js memindahkan orb dengan menulis
   style.left/style.top (inline), sedangkan `!important` di stylesheet
   MENGALAHKAN inline. Jadi di tab Peta orb tidak bisa digeser sama sekali.

   Itu sendiri belum fatal. Yang fatal: penggolong ketukan-vs-seretan di
   nav-orb.js menyatakan "ini seretan" begitu jari bergerak 6 px, dan seretan
   TIDAK PERNAH membuka menu. Karena orb tak bisa ikut bergerak, pengguna tidak
   mendapat satu pun umpan balik — tombolnya sekadar diam. Terukur di browser:
   ketukan bergeser 8 px di Home membuat orb BERGERAK (jelas terlihat sebagai
   seretan), ketukan yang sama di Peta tidak menghasilkan apa-apa.

   Penggantinya: posisi bawaan orb dipindah ke kanan bawah di nav-orb.js, jadi
   ia tetap menjauhi bilah aksi TANPA merebut kepemilikan posisi dari JS. */
.peta3-simpul.rumpun{stroke-width:3.5}

/* Lapisan petak sendiri (tanpa pustaka pihak ketiga). */
.peta3-petak-lapis{position:absolute; inset:0; overflow:hidden}
.peta3-petak{position:absolute; user-select:none; -webkit-user-drag:none; will-change:transform}
.peta3-gambar{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.peta3-basis{cursor:grab}
.peta3-basis.menyeret{cursor:grabbing}
.peta3-atribusi{position:absolute; right:8px; bottom:6px; margin:0; z-index:2;
  font-size:10px; color:rgba(255,255,255,.82); background:rgba(8,14,24,.5);
  padding:3px 8px; border-radius:6px; pointer-events:none}
/* Ruas antarkota: bukan perjalanan darat, jadi tidak diberi warna risiko. */
.peta3-garis.risiko-antarkota{stroke:#64d2ff; stroke-dasharray:14 8; opacity:.85}
.peta3-nota-kunci{position:absolute; z-index:4; left:50%; bottom:96px; transform:translateX(-50%);
  margin:0; max-width:min(620px, calc(100vw - 36px)); text-align:center;
  font-size:var(--fs-caption); color:#ffd60a; background:rgba(16,24,38,.72);
  border:1px solid rgba(255,214,10,.35); border-radius:var(--ui-r-pill); padding:7px 16px}

/* Tahap 2: segmented rentang waktu duduk DI DALAM panel kiri — ia mengendalikan
   apa yang panel ringkas, dan di atas ia menimpa panel serta memaksa kontrol
   jadi dua baris. Saringan tetap mengambang di atas, digeser melewati panel. */
.peta3-atas{left:calc(18px + 380px + 18px); transform:none}
#peta3PanelIsi{display:flex; flex-direction:column; gap:var(--ui-2)}

/* Tingkat keyakinan dibedakan lewat BENTUK, bukan warna — warna sudah dipakai
   risiko jadwal, dan menumpuk dua makna pada kanal yang sama pasti salah baca. */
.peta3-simpul.tingkat-pulihkan{stroke:#ffd60a; stroke-dasharray:5 4}
.peta3-baris-isi em.tingkat-pulihkan{color:#ffd60a}
.peta3-pulih-btn{align-self:flex-start; margin-top:4px; padding:5px 12px;
  border:1px solid rgba(255,214,10,.45); border-radius:var(--ui-r-pill);
  background:rgba(255,214,10,.12); color:#ffd60a; font:inherit;
  font-size:var(--fs-caption); font-weight:600; cursor:pointer}
.peta3-pulih-btn:hover{background:rgba(255,214,10,.2)}
.peta3-pulih-btn:disabled{opacity:.55; cursor:default}

/* ===== PETA 3.0 — INTERAKSI PETA (29 Jul 2026) =====
   Zoom dan geser MATI TOTAL di kedua basis, dan sebabnya bukan pada peta.
   Lapisan skematik .peta3-skema terbentang penuh (inset:0) di atas basis dan
   MENYERAP seluruh wheel/drag/klik: diukur di browser, elementFromPoint di
   tengah peta SELALU mengembalikan svg.peta3-skema, tidak pernah petanya.
   Di mode Maps JS lapisan itu bahkan KOSONG (rute digambar google.maps.
   Polyline), jadi ia murni kaca penghalang tanpa isi.

   Isinya memang gambar semata — tidak ada satu pun handler pada .peta3-simpul,
   .peta3-ruas, atau .peta3-cakram (sudah ditelusuri) — jadi meneruskan input
   ke bawah TIDAK menghilangkan fitur apa pun. Panel, bilah aksi, dan tombol
   berada di z-index 3 dengan elemennya sendiri, tak tersentuh aturan ini. */
.peta3-skema{pointer-events:none}

/* Layar sentuh: cubit dan seret harus menggerakkan PETA, bukan menggulir
   halaman. Tanpa touch-action:none, peramban merebut gerakannya lebih dulu
   dan pinch-zoom kita tidak pernah menerima pointermove kedua.

   DIPERSEMPIT ke basis PETAK saja (kelas dipasang Peta3BasisPetak.pasang,
   dilepas oleh lepas()). Alasannya dua:
   - Maps JS mengurus touch-action-nya sendiri di wadah internal Google;
     memaksakan milik kita di atasnya hanya menambah permukaan kejutan.
   - Di ponsel (<=760px) HALAMAN yang menggulir — `body.peta3-aktif main`
     memakai height:auto/overflow:visible dan #peta3 setinggi 78dvh. Aturan
     tanpa lingkup akan mengunci gulir halaman di 78% layar. Kartu kaca
     (.peta3-panel) berada di luar .peta3-basis, jadi menggulir lewat kartu
     tetap bekerja — itulah jalan keluar pengguna di layar kecil. */
.peta3-basis.basis-petak{touch-action:none}

/* Kartu isi rumpun (klik penanda peta). Google merender InfoWindow di DOM-nya
   sendiri dengan gaya terang bawaan; kita hanya menata ISI kita di dalamnya —
   jangan menimpa pembungkus .gm-style-iw, itu milik Google dan menimpanya
   pernah menutupi tombol tutupnya. */
.peta3-info{font:inherit; color:#0b1220; max-width:280px}
.peta3-info-lokasi{margin:0 0 2px; font-weight:700; font-size:var(--fs-body)}
.peta3-info-tingkat{margin:0 0 8px; font-size:var(--fs-caption); color:#5b6577}
.peta3-info-daftar{margin:0; padding-left:18px; display:grid; gap:4px;
  font-size:var(--fs-caption); line-height:1.45}
.peta3-info-daftar li{margin:0}

/* Bilah aksi ANTARKOTA (Tahap 3): baris penjelas rantai hitung mundur.
   Sengaja kecil dan meredup — ia konteks, bukan angka utama; yang harus
   tertangkap mata lebih dulu adalah lencana "lepas landas ≤ jam". */
.peta3-aksi-nota{display:block; margin-top:2px; max-width:52ch;
  font-size:var(--fs-caption); line-height:1.4; opacity:.72}

/* ===== Kartu daftar penerbangan (Tahap 3) =====
   Duduk tepat di atas bilah aksi, memakai bahasa visual kartu kaca yang sama.
   Urutan baca sengaja: maskapai -> jam -> durasi -> kelas -> apakah keburu. */
.peta3-terbang{position:absolute; left:50%; bottom:132px; transform:translateX(-50%);
  z-index:3; width:min(680px, calc(100vw - 40px)); padding:14px 16px 12px;
  border-radius:var(--radius-card); border:1px solid rgba(255,255,255,.14);
  background:rgba(16,24,38,.72); backdrop-filter:blur(30px) saturate(1.3);
  -webkit-backdrop-filter:blur(30px) saturate(1.3);
  box-shadow:0 18px 48px rgba(0,0,0,.42); color:#fff;
  max-height:calc(100dvh - 220px); overflow:auto}
.peta3-terbang[hidden]{display:none}
.peta3-terbang-kepala{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  margin-bottom:10px}
.peta3-terbang-kepala strong{font-size:var(--fs-body); letter-spacing:.02em}
.peta3-terbang-kepala span{font-size:var(--fs-caption); opacity:.7}
.peta3-terbang-rantai{margin:0 0 10px; font-size:var(--fs-caption); line-height:1.5; opacity:.82}
.peta3-terbang-opsi{margin:10px 0 0; font-size:var(--fs-caption); line-height:1.5; opacity:.8}
.peta3-terbang-rantai b{font-variant-numeric:tabular-nums}
.peta3-terbang-daftar{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.peta3-terbang-baris{display:grid; align-items:center; gap:12px;
  grid-template-columns:minmax(96px,1.2fr) minmax(112px,1fr) minmax(96px,1fr) 64px auto;
  padding:8px 10px; border-radius:12px; font-size:var(--fs-caption)}
.peta3-terbang-baris:nth-child(odd){background:rgba(255,255,255,.05)}
/* Penerbangan yang TIDAK keburu tetap ditampilkan — menyembunyikannya membuat
   pengguna mengira rutenya cuma punya dua penerbangan. Diredupkan saja. */
.peta3-terbang-baris.lewat{opacity:.45}
.peta3-terbang-maskapai{font-weight:600}
.peta3-terbang-jam{font-variant-numeric:tabular-nums; font-weight:600}
.peta3-terbang-durasi{opacity:.72}
.peta3-terbang-kelas{opacity:.72}
.peta3-terbang-tanda{justify-self:end; padding:2px 8px; border-radius:var(--ui-r-pill,999px);
  font-size:11px; font-weight:700; white-space:nowrap}
.peta3-terbang-tanda.keburu{background:rgba(48,209,88,.18); color:#30d158}
.peta3-terbang-tanda.lewat{background:rgba(255,159,10,.16); color:#ff9f0a}
.peta3-terbang-kaki{margin-top:10px; padding-top:9px; border-top:1px solid rgba(255,255,255,.1);
  font-size:11px; line-height:1.45; opacity:.62}
@media (max-width:760px){
  .peta3-terbang{position:static; transform:none; width:auto; margin:12px}
  .peta3-terbang-baris{grid-template-columns:1fr auto; gap:4px 10px}
  .peta3-terbang-durasi, .peta3-terbang-kelas{grid-column:1 / -1; opacity:.6}
}

/* Kolom teks bilah aksi harus MENGAMBIL sisa ruang, bukan menyusut lebih dulu.
   Terukur 29 Jul 2026: dengan chip tambahan di sebelahnya kolom ini mengerut
   jadi 54px dan judul ruas terpotong ("Pontia..."). min-width:0 saja tidak
   cukup — tanpa flex-grow ia tidak pernah menuntut ruangnya kembali. */
.peta3-aksi-teks{flex:1 1 auto}

/* ===== Panel Peta 3.0 — daftar agenda berjenjang + kartu 3 moda (29 Jul) =====
   Aturan pemilik: pertahankan kesederhanaan kartu. Baris ringkas dulu; detail
   dan tombol hanya muncul saat baris dibuka. Warna risiko memakai kosakata
   yang sudah ada (bahaya/waspada), bukan palet baru. */
.peta3-peringatan{margin:0 0 8px; padding:7px 10px; border-radius:10px;
  background:rgba(255,159,10,.14); color:#ffb340;
  font-size:var(--fs-caption); font-weight:600; line-height:1.4}
.peta3-agenda-daftar{display:flex; flex-direction:column; gap:2px; margin-top:4px}
.peta3-agenda-hari{margin:8px 0 2px; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; opacity:.55; font-weight:700}
.peta3-agenda-baris{display:flex; align-items:center; gap:8px; width:100%;
  padding:7px 8px; border:0; border-radius:10px; background:transparent;
  color:inherit; font:inherit; text-align:left; cursor:pointer}
.peta3-agenda-baris:hover{background:rgba(255,255,255,.06)}
.peta3-agenda-baris[aria-expanded="true"]{background:rgba(255,255,255,.08)}
.peta3-agenda-baris.bahaya .peta3-no{background:rgba(255,69,58,.22); color:#ff6961}
.peta3-agenda-baris.waspada .peta3-no{background:rgba(255,159,10,.2); color:#ffb340}
.peta3-agenda-jam{font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap}
.peta3-agenda-judul{flex:1 1 auto; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-caption)}
.peta3-chip{padding:2px 7px; border-radius:var(--ui-r-pill); font-size:10px;
  font-weight:700; white-space:nowrap; background:rgba(255,255,255,.1)}
/* WARNA STATUS = TOKEN RESMI APLIKASI, bukan palet sendiri (koreksi pemilik
   30 Jul 2026: "Approved itu warna biru, dan status lainnya mengikuti").
   Peta 3.0 sebelumnya memakai hijau/kuning/merah buatannya sendiri, sehingga
   satu agenda Approved tampak HIJAU di peta tetapi BIRU di Approval, Home, dan
   Kalender. Warna status adalah bahasa bersama seluruh aplikasi; menyimpang di
   satu layar membuat orang belajar dua kosakata untuk hal yang sama.
   Sumbernya --status-* di app-patches-1.css (blok [data-theme="dark"]). */
.peta3-chip.st-approved{
  background:var(--status-approved-bg); color:var(--status-approved);
  border:1px solid var(--status-approved-border)}
.peta3-chip.st-pending-approval, .peta3-chip.st-draft{
  background:var(--status-pending-bg); color:var(--status-pending);
  border:1px solid var(--status-pending-border)}
.peta3-chip.st-rejected{
  background:var(--status-rejected-bg); color:var(--status-rejected);
  border:1px solid var(--status-rejected-border)}
.peta3-chip.st-delegated{
  background:var(--status-delegated-bg); color:var(--status-delegated);
  border:1px solid var(--status-delegated-border)}
.peta3-chip.st-waiting-list{
  background:var(--status-waiting-bg); color:var(--status-waiting);
  border:1px solid var(--status-waiting-border)}
.peta3-chip.st-tapping{
  background:var(--status-tapping-bg); color:var(--status-tapping);
  border:1px solid var(--status-tapping-border)}
.peta3-agenda-detail{margin:0 8px 6px 34px; padding:8px 10px; border-radius:10px;
  background:rgba(255,255,255,.05); display:flex; flex-direction:column; gap:4px;
  font-size:var(--fs-caption)}
.peta3-agenda-detail small{line-height:1.45; opacity:.85}
.peta3-agenda-detail .bahaya{color:#ff6961; opacity:1}
.peta3-agenda-detail .waspada{color:#ffb340; opacity:1}
.peta3-agenda-aksi{display:flex; gap:8px; margin-top:4px}
.peta3-mini{padding:5px 12px; border-radius:var(--ui-r-pill);
  border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.08);
  color:inherit; font:inherit; font-size:var(--fs-caption); font-weight:600; cursor:pointer}
.peta3-mini:hover{background:rgba(255,255,255,.14)}
.peta3-mini.keputusan{border-color:rgba(10,132,255,.5); background:rgba(10,132,255,.16); color:#7cc0ff}
.peta3-mini.keputusan:hover{background:rgba(10,132,255,.26)}

/* Kartu 3 moda — tiga kotak sejajar di kepala kartu penerbangan. */
.peta3-moda{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin:0 0 12px}
.peta3-moda-kotak{display:flex; flex-direction:column; gap:2px; padding:9px 11px;
  border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.05)}
.peta3-moda-kotak.utama{border-color:rgba(100,210,255,.4); background:rgba(100,210,255,.1)}
.peta3-moda-nama{font-size:11px; letter-spacing:.05em; text-transform:uppercase;
  opacity:.7; font-weight:700}
.peta3-moda-kotak b{font-size:var(--fs-body); font-variant-numeric:tabular-nums}
.peta3-moda-kotak small{font-size:10px; line-height:1.35; opacity:.66}
@media (max-width:760px){
  .peta3-moda{grid-template-columns:1fr}
}

/* ===== THE LIVE (29 Jul 2026) =====
   Tombol duduk bersama Fokus & Satelit di gugus kanan. Saat aktif ia menyala
   biru — pengguna harus bisa tahu sekilas bahwa yang dilihatnya adalah rute
   lalu lintas nyata, bukan garis lurus perkiraan. */
.peta3-live{padding:8px 14px; border-radius:var(--ui-r-pill);
  border:1px solid rgba(255,255,255,.2); background:rgba(16,24,38,.62);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  color:#fff; font:inherit; font-size:var(--fs-caption); font-weight:700;
  letter-spacing:.06em; cursor:pointer; white-space:nowrap}
.peta3-live:hover{background:rgba(16,24,38,.8)}
.peta3-live.aktif{background:rgba(10,132,255,.9); border-color:rgba(10,132,255,.9);
  box-shadow:0 6px 20px rgba(10,132,255,.4)}

/* Pesan penolakan/penjelasan. Bukan alert(): alert memblokir halaman dan
   terbaca sebagai kerusakan, padahal ini penjelasan yang bisa ditindaklanjuti. */
/* z-index 8 sejak 5 Agu 2026 (audit besar). Angka lamanya (4) lahir sebelum
   THE FLYOVER: panggung film berdiri di z 5 dengan latar OPAK #0b1220, jadi
   setiap penolakan yang dikirim peta3Pesan selama briefing tergambar DI BAWAH
   panggung dan tak pernah terlihat. Dari kursi pengguna, aplikasi hanya diam
   saat ditolak — bentuk kegagalan yang paling menyesatkan. Pesan adalah
   lapisan penjelasan: ia harus mengalahkan semua permukaan, termasuk pintu
   keluar briefing (z 7). */
.peta3-pesan{position:absolute; left:50%; bottom:96px; transform:translateX(-50%);
  z-index:8; width:min(560px, calc(100vw - 40px)); margin:0; padding:11px 15px;
  border-radius:var(--radius-card); border:1px solid rgba(255,159,10,.4);
  background:rgba(48,32,8,.92); backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px); color:#ffd8a8;
  font-size:var(--fs-caption); line-height:1.5; box-shadow:0 14px 40px rgba(0,0,0,.45)}
.peta3-pesan[hidden]{display:none}
@media (max-width:760px){
  .peta3-live{padding:7px 11px; font-size:11px}
  /* Di ponsel pesan dulu dijadikan `position:static` — di dalam #peta3 yang
     tingginya 100dvh dan overflow-nya terkunci, itu berarti ia digambar di
     bawah lipatan dan tak pernah terlihat sama sekali; selama briefing ia
     bahkan tertutup panggung. Tetap mengambang, tetapi melebar mengikuti tepi
     layar seperti pola .peta3-sim. */
  .peta3-pesan{left:12px; right:12px; transform:none; width:auto; margin:0}
}
/* Jalur jalan sungguhan (THE LIVE) di basis petak OSM. Warnanya dari atribut
   stroke per-ruas — keterlambatan lalu lintas, bukan kecepatan absolut. */
.peta3-jalur{fill:none; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; opacity:.92}

/* Mode TANDAI TITIK: kursor bidik di seluruh peta, supaya jelas klik berikutnya
   bukan menggeser peta melainkan menetapkan lokasi. */

.peta3-mini.tandai{border-color:rgba(255,214,10,.5); background:rgba(255,214,10,.14); color:#ffd60a}
.peta3-mini.tandai:hover{background:rgba(255,214,10,.24)}

/* ============================================================
   PETA 3.0 — FULL LAYAR SUNGGUHAN (29 Jul 2026)
   Keputusan pemilik: Google Maps satu-satunya basis, memenuhi layar.
   Dua celah yang ditutup di sini, keduanya hasil pengukuran di browser:

   1. KETERGANTUNGAN SENYAP. Peta selama ini hanya full-bleed karena kebetulan
      menumpang kelas `body.map-view-active` milik PETA LAMA (app-patches-1.css).
      Begitu kelas itu tidak terpasang, `.app{max-width:1120px}` menjepit peta
      jadi 1120px dengan pias kosong 240px kiri-kanan pada layar 1600px.
      Peta 3.0 tidak boleh bergantung pada kelas milik fitur yang sedang kita
      pensiunkan, jadi ia menyatakan kebutuhannya sendiri.

   2. PONSEL TERKUNCI DI 78%. Blok <=760px di atas sengaja menahan peta pada
      78dvh supaya panel bisa duduk di bawahnya sebagai jalan gulir. Itu
      rancangan lama; permintaan sekarang adalah PETA PENUH. Panel karena itu
      dikembalikan mengambang sebagai lembar bawah — kalau tidak, ia kehilangan
      tempat begitu `main` jadi overflow:hidden.

   Catatan yang dijaga uji (scripts/test-peta3-interaksi.js): touch-action:none
   TIDAK BOLEH dipasang pada wadah basis tanpa lingkup kelas tambahan — aturan
   selebar itu mengunci gulir halaman di ponsel. Uji itu memeriksa TEKS sumber,
   jadi menuliskan polanya di komentar pun akan memerahkannya (dan memang
   sempat terjadi saat blok ini ditulis).
   ============================================================ */
body.peta3-aktif #app{max-width:none; width:100%; margin:0}
@media (max-width:760px){
  body.peta3-aktif .topbar{display:none}
  body.peta3-aktif main{height:100dvh; overflow:hidden}
  body.peta3-aktif #peta3{height:100dvh}
  /* Panel kembali mengambang, di atas peta, di atas bilah navigasi. */
  body.peta3-aktif .peta3-panel{position:absolute; top:auto; left:12px; right:12px;
    width:auto; margin:0; max-height:46dvh; overflow:auto;
    bottom:calc(84px + var(--safe-bottom))}
  body.peta3-aktif .peta3-aksi{bottom:calc(84px + var(--safe-bottom))}
}

/* ===== SIMULASI PERJALANAN (THE LIVE) =====
   Bilah kendali waktu: putar/jeda, jam tersimulasi, penggeser, dan keterangan
   "sedang di mana". Duduk di atas bilah aksi, bukan menggantikannya — keduanya
   menjawab pertanyaan berbeda (bilah aksi: ruas mana; bilah ini: jam berapa). */
.peta3-sim{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:96px; z-index:6;   /* tepat di atas .peta3-aksi (bottom:26px, tinggi ~56px) */
  display:flex; align-items:center; gap:12px;
  padding:8px 14px; border-radius:var(--ui-r-pill);
  background:rgba(12,18,30,.82); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-width:min(560px, calc(100vw - 32px));
}
.peta3-sim[hidden]{display:none}
.peta3-sim-main{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.1);
  color:#fff; font-size:13px; line-height:1; cursor:pointer;
}
.peta3-sim-main:hover{background:rgba(255,255,255,.2)}
.peta3-sim-jam{
  flex:0 0 auto; font-weight:700; font-size:var(--fs-body, 14px); color:#fff;
  /* Angka jam berubah tiap frame; tabular-nums menahan lebarnya agar bilah
     tidak bergetar mengikuti lebar digit. */
  font-variant-numeric:tabular-nums; min-width:52px;
}
.peta3-sim-geser{flex:1 1 auto; min-width:80px; accent-color:#0a84ff}
.peta3-sim-ket{
  flex:0 1 auto; font-size:var(--fs-label); color:rgba(255,255,255,.72);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:180px;
}
@media (max-width:760px){
  .peta3-sim{left:12px; right:12px; transform:none; max-width:none;
    bottom:calc(148px + var(--safe-bottom))}
  .peta3-sim-ket{display:none}
}

/* ===== LAPORAN ADVANCE (Peta 3.0) =====
   Laporan WhatsApp tim advance dihidupkan di peta. Bahasa visualnya mengikuti
   Liquid Glass yang sudah berdiri: kaca gelap ber-blur, sudut membulat token,
   satu aksen biru, dan tiga warna status (hijau/oranye/merah) yang SAMA dengan
   painter lalu lintas — supaya "cukup/ketat/kurang" terbaca dengan insting
   yang sudah terbentuk dari bagian peta lain. */
.peta3-adv-btn{
  padding:10px 16px; border-radius:var(--ui-r-pill); cursor:pointer;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui); letter-spacing:.02em;
  color:#fff; background:rgba(16,24,38,.58); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 12px 30px rgba(4,10,20,.4);
}
.peta3-adv-btn:hover{background:rgba(30,42,60,.72)}

/* Lembar tempel: latar gelap menenggelamkan peta, kartu kaca di tengah. */
.peta3-adv-sheet{
  position:absolute; inset:0; z-index:40; display:flex;
  align-items:center; justify-content:center; padding:24px;
  background:rgba(4,8,16,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.peta3-adv-sheet[hidden]{display:none}
.peta3-adv-kartu{
  width:min(560px, 100%); padding:22px 24px; border-radius:var(--radius-card);
  background:rgba(16,24,38,.78); border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(30px) saturate(160%); -webkit-backdrop-filter:blur(30px) saturate(160%);
  box-shadow:0 30px 80px rgba(2,6,14,.6);
}
.peta3-adv-kartu h3{margin:2px 0 6px; font-size:var(--fs-title); color:#fff}
.peta3-adv-kicker{margin:0; font-size:11px; letter-spacing:.14em; color:#64d2ff; font-weight:700}
.peta3-adv-ket{margin:0 0 12px; font-size:var(--fs-label); line-height:1.55; color:rgba(255,255,255,.72)}
.peta3-adv-kartu textarea{
  width:100%; resize:vertical; min-height:150px; padding:12px 14px;
  border-radius:14px; border:1px solid rgba(255,255,255,.16);
  background:rgba(8,14,26,.65); color:#fff;
  font:500 12.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.peta3-adv-kartu textarea:focus{outline:none; border-color:rgba(100,210,255,.55)}
.peta3-adv-status{min-height:1.3em; margin:8px 0 4px; font-size:var(--fs-label); color:#ffd60a}
.peta3-adv-baris{display:flex; justify-content:flex-end; gap:10px}
.peta3-mini.utama{
  border-color:rgba(10,132,255,.6); background:rgba(10,132,255,.25); color:#dbeeff
}
.peta3-mini.utama:hover{background:rgba(10,132,255,.4)}

/* Kepala panel mode Advance */
.peta3-adv-kepala{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.peta3-adv-h{margin:2px 0 2px; font-size:var(--fs-title); line-height:1.25; color:#fff}
.peta3-adv-sub{margin:0; font-size:var(--fs-label); color:rgba(255,255,255,.6)}
.peta3-adv-chips{margin:2px 0 12px}

/* Linimasa: rel kaca dengan titik per langkah. Titik perpindahan biru
   (bergerak), titik kegiatan putih redup (diam) — sejalan dengan penanda
   simulasi biru yang berjalan di peta. */
.peta3-adv-timeline{list-style:none; margin:0; padding:0; position:relative}
.peta3-adv-timeline::before{
  content:""; position:absolute; left:5px; top:10px; bottom:10px; width:1.5px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
}
.peta3-adv-langkah{display:flex; gap:14px; padding:7px 0; position:relative}
.peta3-adv-dot{
  flex:0 0 auto; width:11px; height:11px; margin-top:4px; border-radius:50%;
  background:rgba(255,255,255,.35); border:1.5px solid rgba(255,255,255,.5);
  box-shadow:0 0 0 3px rgba(8,14,26,.9);
}
.peta3-adv-langkah.jenis-pindah .peta3-adv-dot{
  background:#0a84ff; border-color:#9ecdff; box-shadow:0 0 0 3px rgba(8,14,26,.9), 0 0 12px rgba(10,132,255,.55)
}
.peta3-adv-isi{min-width:0}
.peta3-adv-jam{margin:0; font-size:var(--fs-label); font-weight:700; color:#64d2ff;
  font-variant-numeric:tabular-nums}
.peta3-adv-jam span{color:rgba(255,255,255,.4); font-weight:600}
.peta3-adv-judul{margin:1px 0 3px; font-size:var(--fs-body); line-height:1.45; color:rgba(255,255,255,.92)}
.peta3-adv-chip{
  display:inline-block; padding:3px 10px; border-radius:var(--ui-r-pill);
  font-size:11px; font-weight:700; letter-spacing:.02em;
  background:rgba(255,255,255,.1); color:rgba(255,255,255,.66);
  border:1px solid rgba(255,255,255,.14);
}
.peta3-adv-chip.aman{background:rgba(48,209,88,.16); color:#7ce69a; border-color:rgba(48,209,88,.4)}
.peta3-adv-chip.ketat{background:rgba(255,159,10,.16); color:#ffc46b; border-color:rgba(255,159,10,.4)}
.peta3-adv-chip.kurang{background:rgba(255,69,58,.18); color:#ff8d84; border-color:rgba(255,69,58,.5)}

@media (max-width:760px){
  .peta3-adv-sheet{padding:12px}
  .peta3-adv-kartu{padding:16px}
}

/* ===== PANEL PETA 3.0 — NAVIGASI TANGGAL, KALENDER, ARAH (30 Jul 2026) =====
   Permintaan pemilik: kartu disederhanakan, navigasi tanggal kiri/kanan dengan
   kalender kecil, dan tombol menuju lokasi. Tetap Liquid Glass: kaca gelap
   ber-blur, sudut token, satu aksen biru. */

/* Navigasi tanggal — SIMETRIS: dua panah berukuran sama mengapit tanggal yang
   melar. Tanpa lebar tetap pada panah, tombol tanggal yang berubah panjang
   ("Rabu, 1 Juli" vs "Senin, 22 September") menggeser panahnya dan bilah ini
   terlihat bergoyang tiap kali tanggal berganti. */
.peta3-navtgl{
  display:flex; align-items:center; gap:8px; margin:0 0 12px;
}
.peta3-navtgl-panah{
  flex:0 0 auto; width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:17px; line-height:1; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.peta3-navtgl-panah:hover{background:rgba(255,255,255,.18)}
.peta3-navtgl-tgl{
  flex:1 1 auto; min-width:0; height:36px; padding:0 14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  border-radius:var(--ui-r-pill); cursor:pointer; color:#fff;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui);
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.peta3-navtgl-tgl:hover{background:rgba(255,255,255,.18)}
.peta3-navtgl-tgl span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.peta3-navtgl-tgl i{font-style:normal; font-size:10px; opacity:.6; flex:0 0 auto}
.peta3-navtgl-tgl[aria-expanded="true"]{
  background:rgba(10,132,255,.24); border-color:rgba(10,132,255,.5)
}

/* Kalender kecil */
.peta3-kal{
  margin:0 0 14px; padding:12px; border-radius:var(--radius-card);
  background:rgba(8,14,26,.6); border:1px solid rgba(255,255,255,.14);
}
.peta3-kal-kepala{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.peta3-kal-judul{font:700 var(--fs-label)/1 var(--font-ui, system-ui); color:#fff}
.peta3-kal-nav{
  width:28px; height:28px; border-radius:50%; cursor:pointer; color:#fff; font-size:15px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
}
.peta3-kal-nav:hover{background:rgba(255,255,255,.18)}
.peta3-kal-hari,
.peta3-kal-kisi{display:grid; grid-template-columns:repeat(7, 1fr); gap:3px}
.peta3-kal-hari{margin-bottom:4px}
.peta3-kal-hari span{
  text-align:center; font-size:10px; font-weight:700; letter-spacing:.04em;
  color:rgba(255,255,255,.42);
}
.peta3-kal-sel{
  aspect-ratio:1; min-height:30px; border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; position:relative;
  font:600 12px/1 var(--font-ui, system-ui); color:rgba(255,255,255,.82);
  background:transparent; border:1px solid transparent;
  font-variant-numeric:tabular-nums;
}
.peta3-kal-sel:hover{background:rgba(255,255,255,.12)}
.peta3-kal-sel.kosong{cursor:default; pointer-events:none}
/* Titik = hari yang PUNYA agenda. Tanpa penanda ini, melompat jauh berarti
   menebak dan pengguna harus mencoba tanggal satu per satu. */
.peta3-kal-sel.ada::after{
  content:""; position:absolute; bottom:4px; width:4px; height:4px; border-radius:50%;
  background:#64d2ff;
}
.peta3-kal-sel.kini{border-color:rgba(255,255,255,.4)}
.peta3-kal-sel.aktif{background:#0a84ff; color:#fff; border-color:#0a84ff}
.peta3-kal-sel.aktif.ada::after{background:#fff}
.peta3-kal-kini{
  width:100%; margin-top:10px; padding:7px; border-radius:var(--ui-r-pill); cursor:pointer;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui); color:#dbeeff;
  background:rgba(10,132,255,.2); border:1px solid rgba(10,132,255,.45);
}
.peta3-kal-kini:hover{background:rgba(10,132,255,.34)}

/* Lokasi ringkas pada kartu agenda: "Lokasi utama · Kota" */
.peta3-agenda-lokasi{font-weight:600; color:rgba(255,255,255,.88)}

/* Tombol arah + tiga opsi asal */
.peta3-arah{margin-top:8px}
.peta3-mini.arah{
  border-color:rgba(100,210,255,.45); background:rgba(100,210,255,.14); color:#a8e4ff
}
.peta3-mini.arah:hover{background:rgba(100,210,255,.26)}
.peta3-arah-opsi{
  display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;
  padding-top:8px; border-top:1px solid rgba(255,255,255,.1);
}
.peta3-arah-opsi[hidden]{display:none}

/* ==========================================================================
   HOME COMMAND CENTER — approved Apple Liquid Glass composition (30 Jul 2026)
   Visual language comes from the approved preview; content and actions stay on
   the production renderers. Every rule is Home-scoped so other views keep their
   established layout. Desktop is one viewport; only the agenda rows scroll.
   ========================================================================== */

body[data-active-view="today"]{
  --home-glass-border:rgba(255,255,255,.84);
  --home-glass-shadow:0 22px 50px rgba(8,31,49,.20),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 0 0 1px rgba(42,80,104,.07);
  background:
    linear-gradient(102deg,rgba(241,249,252,.04),rgba(246,251,253,0) 52%,rgba(218,236,244,.025)),
    url("./landing/infrastructure-network.jpg") center/cover fixed;
}
body[data-active-view="today"]::before{
  opacity:.22;
  background:
    radial-gradient(circle at 78% 2%,rgba(255,255,255,.1),transparent 27%),
    linear-gradient(108deg,rgba(12,38,57,.018),transparent 54%,rgba(12,38,57,.015));
  background-size:auto;
  mask-image:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-active-view="today"] #app{
  max-width:none;
  border:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
body[data-active-view="today"] .topbar{
  border:1px solid rgba(255,255,255,.9);
  border-radius:24px;
  background:linear-gradient(145deg,rgba(253,255,255,.74),rgba(235,247,251,.52));
  box-shadow:0 14px 38px rgba(18,45,64,.13),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(10px) saturate(126%);
  -webkit-backdrop-filter:blur(10px) saturate(126%);
}
body[data-active-view="today"] .topbar::after{opacity:.34}
body[data-active-view="today"] .home-command-workspace{
  min-width:0;
  min-height:0;
  gap:12px;
}
body[data-active-view="today"] .home-command-rail,
body[data-active-view="today"] .home-agenda-surface{
  min-width:0;
  min-height:0;
  overflow:hidden;
  border:1px solid var(--home-glass-border);
  border-radius:24px;
  background:
    linear-gradient(145deg,rgba(250,254,255,.48),rgba(221,240,247,.24) 58%,rgba(255,255,255,.12));
  box-shadow:var(--home-glass-shadow);
  backdrop-filter:blur(2.5px) saturate(106%);
  -webkit-backdrop-filter:blur(2.5px) saturate(106%);
}
body[data-active-view="today"] .home-command-rail{
  display:flex;
  flex-direction:column;
  padding:16px;
}
body[data-active-view="today"] .home-rail-heading{
  flex:0 0 auto;
  padding:0 2px 8px;
  border-bottom:1px solid rgba(32,69,94,.16);
}
body[data-active-view="today"] .home-rail-heading .cc-kicker{
  margin-bottom:5px;
  color:#126ed2;
  font-size:10px;
}
body[data-active-view="today"] .home-rail-heading h1{
  margin:0;
  color:#0d2539;
  font-size:34px;
  font-weight:620;
  letter-spacing:-.045em;
  line-height:.98;
  text-shadow:0 1px 0 rgba(255,255,255,.56);
}
body[data-active-view="today"] .home-rail-date{
  margin:7px 0 0;
  color:rgba(35,62,82,.72);
  font-size:11px;
  font-weight:650;
}
body[data-active-view="today"] .home-rail-pulse{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:9px 0;
  border-bottom:1px solid rgba(32,69,94,.16);
}
body[data-active-view="today"] .home-rail-pulse > div{
  min-width:0;
  display:grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:center;
  column-gap:7px;
  padding:0 7px;
  border-right:1px solid rgba(32,69,94,.13);
}
body[data-active-view="today"] .home-rail-pulse > div:last-child{border-right:0}
body[data-active-view="today"] .home-pulse-icon{
  grid-row:1 / 3;
  color:rgba(30,68,94,.7);
  font-size:15px;
}
body[data-active-view="today"] .home-rail-pulse strong{
  color:#0d2539;
  font-size:20px;
  font-variant-numeric:tabular-nums;
  line-height:1;
}
body[data-active-view="today"] .home-rail-pulse small{
  overflow:hidden;
  color:rgba(35,62,82,.7);
  font-size:9px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* TUJUH KPI action sejak "Pengajuan Agenda" (13 Agu 2026, permintaan pemilik).
   Geometrinya tetap 2 kolom di rail kiri — yang berubah hanya kartu TERAKHIR, yang
   sengaja melebar penuh. Alasannya simetri: tujuh kartu mustahil dibagi dua kolom tanpa
   menyisakan satu kartu yatim di kanan, dan sudut kosong itu persis yang keputusan
   "approved 2 × 3 geometry" dulu hindari. Melebarkan yang terakhir membuat barisnya
   terbaca disengaja: tiga baris berpasangan, lalu satu baris penuh.
   INILAH lapisan yang benar-benar menang untuk view Home — aturan 7 kolom di
   app-views.css kalah oleh selektor ini (app-latest dimuat paling akhir). */
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"]{
  flex:0 0 auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  margin:9px 0;
}
/* ===== BENTUK STRIP: penuh · 2x2 · penuh (keputusan pemilik 14 Agu 2026) =====
   Dua kartu dicabut ("Agenda hari ini" & "7 Hari ke Depan") karena mengulang informasi
   yang sudah terbaca di tempat lain — sisanya enam.
   Yang MEMBUKA hari (Disposisi Saya: apa yang menunggu SAYA) dan yang MENUTUPNYA
   (Pengajuan Agenda: apa yang menunggu keputusan) diberi baris penuh; empat kartu
   pemantauan di tengah tetap 2x2. Hierarkinya jadi terbaca dari bentuk, bukan dari
   membaca kedelapan label satu per satu.
   Dipatok pada KELAS, bukan :first-child/:last-child — urutan DOM bisa bergeser dan
   pemenang barisnya harus tetap kartu yang sama. */
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .home-stat-disposisi{
  grid-column:1 / -1;
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .home-stat-pengajuan{
  grid-column:1 / -1;
}
/* Hack "kartu terakhir melebar" dicabut 13 Agu 2026. Lapisan INILAH yang menang untuk
   view Home (app-latest dimuat paling akhir) — menguji app-views saja pernah menyesatkan.

   ATURAN RAIL (ditetapkan 14 Agu 2026, sesudah komentar di atas terbukti basi — ia
   menyebut "kartu ke-8" padahal rail berisi ENAM): kapsul yang punya DUA SISI
   (masuk & keluar) membentang penuh; kapsul satu sisi setengah lebar; dan jumlah kapsul
   setengah-lebar WAJIB GENAP supaya tidak ada baris yatim. Sekarang: 6 kapsul —
   `home-stat-disposisi` & `home-stat-pengajuan` membentang penuh, empat sisanya mengisi
   dua baris dua-kolom. Kapsul ke-7 nanti wajib berpasangan, atau ikut membentang.
   Gerbangnya ada di ai-safe-check.js (himpunan `bolehMelebar`). */
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{
  position:relative;
  width:100%;
  height:72px;
  min-height:72px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  grid-template-rows:20px 21px 10px;
  grid-template-areas:"icon label" "icon value" "sub sub";
  align-items:start;
  column-gap:8px;
  row-gap:1px;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:16px;
  color:#0a2133;
  text-align:left;
  background:linear-gradient(145deg,rgba(255,255,255,.74),rgba(221,239,247,.50));
  box-shadow:0 7px 18px rgba(16,45,65,.10),inset 0 1px 0 #fff;
  backdrop-filter:blur(3px) saturate(106%);
  -webkit-backdrop-filter:blur(3px) saturate(106%);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action::before{display:none}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action::after{opacity:.22}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action:hover,
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action:focus-visible{
  border-color:rgba(76,132,175,.42);
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(235,248,253,.66));
  box-shadow:0 12px 27px rgba(26,55,76,.13),inset 0 1px 0 #fff;
  transform:translateY(-2px);
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action.waiting{
  border-color:rgba(183,113,23,.32);
  background:linear-gradient(145deg,rgba(255,248,229,.76),rgba(255,233,190,.52));
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat-icon{
  grid-area:icon;
  width:27px;
  height:27px;
  align-self:center;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.94);
  border-radius:10px;
  color:#294e69;
  background:rgba(255,255,255,.58);
  box-shadow:inset 0 1px 0 #fff;
  font-size:13px;
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat-label{
  grid-area:label;
  min-width:0;
  display:-webkit-box;
  overflow:hidden;
  color:rgba(25,55,77,.76);
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  line-height:1.04;
  text-transform:uppercase;
  white-space:normal;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat strong{
  grid-area:value;
  align-self:end;
  margin:0;
  color:#092338;
  font-size:23px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.04em;
  line-height:1;
}
body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat small{
  grid-area:sub;
  display:block;
  min-width:0;
  overflow:hidden;
  color:rgba(35,62,82,.62);
  font-size:8px;
  font-weight:650;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body[data-active-view="today"] .home-rail-approval{flex:0 0 auto}
body[data-active-view="today"] .home-approval-alert{
  min-height:48px;
  display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid rgba(188,72,64,.3);
  border-radius:16px;
  color:#782e2a;
  background:linear-gradient(105deg,rgba(255,231,226,.76),rgba(255,249,246,.56));
  box-shadow:0 10px 26px rgba(111,49,45,.09),inset 0 1px 0 rgba(255,255,255,.96);
  backdrop-filter:blur(3px) saturate(108%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
}
body[data-active-view="today"] .home-approval-alert::before{
  content:"!";
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:#c5413b;
  font-size:13px;
  font-weight:900;
}
body[data-active-view="today"] .home-approval-alert.level-warn::before{background:#b77117}
body[data-active-view="today"] .home-approval-alert.level-ok::before{
  content:"✓";
  background:#218653;
}
body[data-active-view="today"] .home-approval-alert > span{
  min-width:0;
  display:grid;
  gap:1px;
  margin:0;
}
body[data-active-view="today"] .home-approval-alert strong,
body[data-active-view="today"] .home-approval-alert span span{
  overflow:hidden;
  margin:0;
  color:inherit;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-approval-alert strong{font-size:10px}
body[data-active-view="today"] .home-approval-alert span span{font-size:8.5px}
body[data-active-view="today"] .home-approval-alert > b{font-size:20px}

body[data-active-view="today"] .home-rail-timeline-wrap{
  min-height:44px;
  flex:0 0 auto;
  margin-top:auto;
  padding-top:6px;
}
body[data-active-view="today"] .home-timeline-block{min-width:0}
body[data-active-view="today"] .home-timeline-label{
  margin:0 0 -4px;
  color:#17344b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-active-view="today"] .home-rail-timeline{
  min-width:0;
  overflow-x:auto;
  scrollbar-width:none;
}
body[data-active-view="today"] .home-rail-timeline::-webkit-scrollbar{display:none}
body[data-active-view="today"] .home-rail-timeline-track{
  position:relative;
  width:max-content;
  min-width:100%;
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:22px 3px 2px;
}
body[data-active-view="today"] .home-rail-timeline-track::before{
  content:"";
  position:absolute;
  top:28px;
  right:12px;
  left:12px;
  height:2px;
  background:rgba(29,65,89,.24);
}
body[data-active-view="today"] .home-timeline-stop{
  position:relative;
  z-index:1;
  min-width:40px;
  display:grid;
  justify-items:center;
  gap:6px;
  padding:0;
  border:0;
  color:rgba(37,62,81,.82);
  background:transparent;
  cursor:pointer;
}
body[data-active-view="today"] .home-timeline-stop i{
  width:14px;
  height:14px;
  display:block;
  border:2px solid rgba(34,67,89,.56);
  border-radius:50%;
  background:#e9f3f7;
}
body[data-active-view="today"] .home-timeline-stop.is-done i{
  border-color:#54a56d;
  background:#438d5b;
  box-shadow:0 0 0 4px rgba(67,141,91,.12);
}
body[data-active-view="today"] .home-timeline-stop.is-now i{
  border-color:#ffc074;
  background:#eb8241;
  box-shadow:0 0 0 5px rgba(235,130,65,.16);
}
body[data-active-view="today"] .home-timeline-stop.is-next i{
  border-color:#4f9cff;
  background:#126ed2;
  box-shadow:0 0 0 4px rgba(18,110,210,.13);
}
body[data-active-view="today"] .home-timeline-stop small{
  padding:2px 4px;
  border:1px solid rgba(255,255,255,.76);
  border-radius:6px;
  color:#17344b;
  background:rgba(255,255,255,.58);
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
body[data-active-view="today"] .home-timeline-empty{
  margin-top:10px;
  padding:9px 10px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  color:rgba(35,62,82,.72);
  background:rgba(255,255,255,.42);
  font-size:9px;
  font-weight:650;
}

/* Right operational surface. */
body[data-active-view="today"] .home-agenda-surface{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  align-content:stretch;
  padding:12px 14px;
}
body[data-active-view="today"] .home-agenda-surface::after{display:none}
body[data-active-view="today"] .home-agenda-surface > *{z-index:auto}
body[data-active-view="today"] .upcoming-event-bar{
  min-width:0;
  min-height:48px;
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(225,241,248,.40));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 20px rgba(29,58,78,.055);
  backdrop-filter:blur(3px) saturate(108%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
}
body[data-active-view="today"] .upcoming-event-bar[hidden]{display:none}
body[data-active-view="today"] .upcoming-event-bar{grid-row:1}
body[data-active-view="today"] .upcoming-event-head{
  min-width:96px;
  flex:0 0 auto;
  color:rgba(25,55,77,.72);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
body[data-active-view="today"] .upcoming-event-scroll{
  min-width:0;
  flex:1 1 auto;
  display:flex;
  flex-wrap:nowrap;
  gap:6px;
  overflow-x:auto;
  padding:0 1px 2px;
  scrollbar-width:thin;
}
body[data-active-view="today"] .upcoming-event-group{
  min-width:0;
  display:flex;
  flex:0 0 auto;
  flex-wrap:nowrap;
  align-items:center;
  gap:6px;
}
body[data-active-view="today"] .upcoming-event-group-label{
  flex:0 0 auto;
  color:rgba(25,55,77,.65);
  font-size:8px;
  font-weight:820;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body[data-active-view="today"] .upcoming-event-pill{
  min-width:150px;
  max-width:210px;
  height:32px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:11px;
  color:#10283d;
  background:rgba(255,255,255,.52);
  box-shadow:0 6px 16px rgba(29,57,76,.06),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(3px) saturate(106%);
  -webkit-backdrop-filter:blur(3px) saturate(106%);
}
body[data-active-view="today"] .upcoming-event-pill:hover{
  border-color:rgba(45,115,184,.4);
  background:rgba(255,255,255,.72);
}
body[data-active-view="today"] .upcoming-event-pill .upcoming-event-date{
  color:#078f83;
  font-size:8px;
  font-weight:850;
}
body[data-active-view="today"] .upcoming-event-pill .upcoming-event-title{
  max-width:none;
  color:#0d2539;
  font-size:9px;
}
body[data-active-view="today"] .upcoming-event-pill .upcoming-event-loc{
  display:none;
}
body[data-active-view="today"] .upcoming-event-more{
  color:rgba(35,62,82,.68);
  font-size:8px;
}

body[data-active-view="today"] .home-agenda-heading{
  grid-row:2;
  min-width:0;
  align-items:flex-end;
  padding:6px 2px 4px;
}
body[data-active-view="today"] .home-agenda-heading .cc-kicker{
  margin-bottom:4px;
  color:#126ed2;
  font-size:9px;
}
body[data-active-view="today"] .home-agenda-heading h2{
  margin:0;
  color:#0d2539;
  font-size:26px;
  font-weight:580;
  letter-spacing:-.04em;
  line-height:1;
  text-shadow:0 1px 0 rgba(255,255,255,.56);
}
body[data-active-view="today"] .home-agenda-heading .cc-subtitle{
  margin-top:5px;
  color:rgba(35,62,82,.68);
  font-size:10px;
}
body[data-active-view="today"] .home-agenda-heading [data-open-add]{
  min-width:104px;
  height:36px;
  min-height:36px;
  padding:0 13px;
  border:1px solid rgba(104,170,255,.52);
  border-radius:13px;
  color:#fff;
  background:linear-gradient(145deg,rgba(32,105,205,.96),rgba(45,115,219,.74));
  box-shadow:0 10px 24px rgba(17,79,174,.23),inset 0 1px 0 rgba(255,255,255,.24);
  font-size:11px;
}
body[data-active-view="today"] #todayWarnings,
body[data-active-view="today"] #todayWarnings > *,
body[data-active-view="today"] .home-compact-grid{
  min-width:0;
  min-height:0;
  height:100%;
  margin:0;
}
body[data-active-view="today"] #todayWarnings{grid-row:3}
body[data-active-view="today"] #view-today .home-command-shell #todayWarnings > *{margin-top:0}
body[data-active-view="today"] .home-compact-shell,
body[data-active-view="today"] .home-compact-grid{
  display:block;
}
body[data-active-view="today"] .home-agenda-card{
  min-width:0;
  min-height:0;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:0;
  padding:0;
  overflow:hidden;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-active-view="today"] .home-agenda-card::after{display:none}
body[data-active-view="today"] .home-agenda-toolbar{
  min-width:0;
  min-height:36px;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:13px;
  background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(225,241,248,.40));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 20px rgba(29,58,78,.055);
  backdrop-filter:blur(3px) saturate(108%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
}
body[data-active-view="today"] .home-day-nav{
  display:flex;
  align-items:center;
  gap:3px;
  justify-self:start;
}
body[data-active-view="today"] .home-day-nav .btn{
  min-width:28px;
  width:auto;
  height:28px;
  min-height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 7px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:8px;
  color:#17344b;
  background:rgba(255,255,255,.52);
  box-shadow:0 5px 13px rgba(29,57,76,.05),inset 0 1px 0 rgba(255,255,255,.98);
  font-size:10px;
}
body[data-active-view="today"] .home-day-nav .btn:disabled{opacity:.4}
body[data-active-view="today"] .home-day-nav .home-today-btn{
  color:#0b63b6;
  font-weight:750;
}
body[data-active-view="today"] .home-day-nav .home-today-btn.active{
  background:linear-gradient(145deg,rgba(231,246,255,.94),rgba(207,233,251,.78));
}
body[data-active-view="today"] .home-current-date{
  min-width:0;
  display:grid;
  justify-items:center;
  gap:1px;
  margin:0;
  overflow:hidden;
  color:rgba(35,62,82,.68);
  text-align:center;
}
body[data-active-view="today"] .home-current-date strong,
body[data-active-view="today"] .home-current-date span{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-current-date strong{
  color:#17344b;
  font-size:9px;
}
body[data-active-view="today"] .home-current-date span{font-size:8px}
body[data-active-view="today"] .home-card-summary{
  display:flex;
  align-items:center;
  gap:3px;
  justify-self:end;
}
body[data-active-view="today"] .home-card-summary > span{
  min-width:auto;
  min-height:28px;
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:8px;
  background:rgba(255,255,255,.52);
  box-shadow:0 5px 13px rgba(29,57,76,.05),inset 0 1px 0 rgba(255,255,255,.98);
}
body[data-active-view="today"] .home-card-summary small{
  color:rgba(35,62,82,.65);
  font-size:7px;
}
body[data-active-view="today"] .home-card-summary b{
  margin:0;
  color:#10283d;
  font-size:12px;
  font-variant-numeric:tabular-nums;
}
body[data-active-view="today"] .home-birthday-note{
  flex:0 0 auto;
  margin:5px 0 0;
}

body[data-active-view="today"] .home-agenda-mini-list{
  min-width:0;
  min-height:0;
  max-height:none;
  flex:1 1 auto;
  display:grid;
  align-content:start;
  gap:5px;
  margin-top:5px;
  padding:0 5px 0 0;
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-color:rgba(31,73,101,.5) rgba(255,255,255,.24);
  scrollbar-gutter:stable;
  scrollbar-width:thin;
}
body[data-active-view="today"] .home-agenda-mini-list::-webkit-scrollbar{width:7px}
body[data-active-view="today"] .home-agenda-mini-list::-webkit-scrollbar-track{
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
body[data-active-view="today"] .home-agenda-mini-list::-webkit-scrollbar-thumb{
  border:2px solid transparent;
  border-radius:999px;
  background:rgba(31,73,101,.5);
  background-clip:padding-box;
}
body[data-active-view="today"] .home-agenda-mini-list > .empty{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px solid rgba(255,255,255,.74);
  background:rgba(255,255,255,.5);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item{
  position:relative;
  width:100%;
  height:56px;
  min-height:56px;
  display:grid;
  grid-template-columns:34px 78px minmax(0,1fr) minmax(76px,104px) auto 18px;
  align-items:center;
  gap:8px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.92);
  border-left:3px solid #126ed2;
  border-radius:14px;
  color:#10283d;
  text-align:left;
  background:linear-gradient(96deg,rgba(219,238,253,.82),rgba(250,253,255,.66) 74%);
  box-shadow:0 8px 22px rgba(28,58,79,.075),inset 0 1px 0 rgba(255,255,255,.94);
  backdrop-filter:blur(2.5px) saturate(106%);
  -webkit-backdrop-filter:blur(2.5px) saturate(106%);
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item:hover,
body[data-active-view="today"] .home-agenda-mini.home-agenda-item:focus-visible{
  border-color:rgba(45,115,184,.42);
  border-left-color:#126ed2;
  background:linear-gradient(96deg,rgba(207,232,255,.9),rgba(255,255,255,.78) 74%);
  box-shadow:0 13px 29px rgba(28,58,79,.13),inset 0 1px 0 #fff;
  transform:translateX(3px);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-pending{
  border-left-color:#a86008;
  background:linear-gradient(96deg,rgba(255,237,200,.82),rgba(255,252,244,.68) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-rejected{
  border-left-color:#c5413b;
  background:linear-gradient(96deg,rgba(255,225,222,.82),rgba(255,250,249,.68) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-tapping{
  border-left-color:#8b5cf6;
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-delegated{
  border-left-color:#7c3aed;
  background:linear-gradient(96deg,rgba(237,226,255,.84),rgba(253,250,255,.68) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-resched{
  border-left-color:#0f8a83;
  background:linear-gradient(96deg,rgba(216,247,242,.84),rgba(249,255,253,.68) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-flower{
  border-left-color:#bd3ec8;
  background:linear-gradient(96deg,rgba(250,225,252,.84),rgba(255,250,255,.68) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item:is(.status-waiting,.status-busy){
  border-left-color:#667889;
  background:linear-gradient(96deg,rgba(228,237,242,.82),rgba(252,253,254,.66) 74%);
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item.is-past-today{
  opacity:.62;
  background:linear-gradient(96deg,rgba(226,235,240,.72),rgba(250,252,253,.58) 74%);
}
body[data-active-view="today"] .home-agenda-index{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.96);
  border-radius:50%;
  color:#2d5069;
  background:rgba(255,255,255,.62);
  font-size:9px;
  font-weight:850;
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item time{
  min-width:0;
  display:grid;
  gap:1px;
  color:#10283d;
  font-variant-numeric:tabular-nums;
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item time strong{
  font-size:14px;
  line-height:1;
}
body[data-active-view="today"] .home-agenda-mini.home-agenda-item time small{
  color:rgba(35,62,82,.68);
  font-size:8px;
}
body[data-active-view="today"] .home-agenda-copy{
  min-width:0;
  display:grid;
  gap:2px;
}
body[data-active-view="today"] .home-agenda-copy > strong,
body[data-active-view="today"] .home-agenda-copy > span{
  min-width:0;
  display:block;
  overflow:hidden;
  color:inherit;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-agenda-copy > strong{
  color:#0d2539;
  font-size:13px;
  line-height:1.12;
}
body[data-active-view="today"] .home-agenda-copy > span{
  color:rgba(35,62,82,.68);
  font-size:9px;
}
body[data-active-view="today"] .home-agenda-copy .home-agenda-meta{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
body[data-active-view="today"] .home-agenda-copy .home-agenda-meta > span:first-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-agenda-copy .home-agenda-mini-delegate{
  min-width:0;
  flex:0 1 auto;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-agenda-mini .home-agenda-mini-folder{
  display:inline-block;
  width:auto;
  margin-right:4px;
  padding:1px 5px;
  border:1px solid rgba(67,113,183,.28);
  border-radius:999px;
  color:#315f9f;
  background:rgba(68,119,203,.13);
  font-size:7px;
  vertical-align:1px;
}
body[data-active-view="today"] .home-agenda-readiness{
  --home-ready-color:#c73f4b;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(42px,1fr) auto;
  align-items:center;
  column-gap:6px;
  row-gap:2px;
}
body[data-active-view="today"] .home-agenda-readiness i{
  grid-column:1 / 3;
  height:3px;
  overflow:hidden;
  border-radius:99px;
  background:rgba(35,62,82,.13);
}
body[data-active-view="today"] .home-agenda-readiness i::before{
  content:"";
  width:var(--home-ready);
  height:100%;
  display:block;
  border-radius:inherit;
  background:var(--home-ready-color);
}
body[data-active-view="today"] .home-agenda-readiness.is-ready{--home-ready-color:#178a6f}
body[data-active-view="today"] .home-agenda-readiness.is-warning{--home-ready-color:#d0911c}
body[data-active-view="today"] .home-agenda-readiness.is-danger{--home-ready-color:#c73f4b}
body[data-active-view="today"] .home-agenda-readiness.is-locked i::before{width:0}
body[data-active-view="today"] .home-agenda-readiness small{
  color:rgba(35,62,82,.64);
  font-size:7px;
}
body[data-active-view="today"] .home-agenda-readiness b{
  color:var(--home-ready-color);
  font-size:9px;
}
body[data-active-view="today"] .home-agenda-status{
  justify-self:end;
  margin:0;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-style:normal;
  font-weight:750;
}
body[data-active-view="today"] .home-agenda-arrow{
  display:block;
  color:rgba(37,62,81,.52);
  font-size:20px;
}

body[data-active-view="today"] .home-next-movement{
  min-width:0;
  min-height:36px;
  flex:0 0 auto;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  margin-top:5px;
  padding:5px 8px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:13px;
  color:#10283d;
  background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(225,241,248,.40));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 7px 20px rgba(29,58,78,.055);
  backdrop-filter:blur(3px) saturate(108%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
}
body[data-active-view="today"] .home-next-movement.no-map-action{
  grid-template-columns:30px minmax(0,1fr) auto;
}
body[data-active-view="today"] .home-movement-icon{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.9);
  border-radius:50%;
  color:#294e69;
  background:rgba(255,255,255,.55);
}
body[data-active-view="today"] .home-movement-copy{
  min-width:0;
  display:grid;
  gap:1px;
}
body[data-active-view="today"] .home-movement-copy small,
body[data-active-view="today"] .home-movement-metric small{
  color:rgba(35,62,82,.64);
  font-size:7px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
body[data-active-view="today"] .home-movement-copy strong{
  overflow:hidden;
  color:#0d2539;
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
body[data-active-view="today"] .home-movement-metric{
  display:grid;
  justify-items:end;
  padding-left:9px;
  border-left:1px solid rgba(37,62,81,.14);
}
body[data-active-view="today"] .home-movement-metric strong{
  color:#17344b;
  font-size:10px;
}
body[data-active-view="today"] .home-next-movement button{
  height:28px;
  padding:0 10px;
  border:1px solid rgba(53,119,190,.26);
  border-radius:9px;
  color:#0b63b6;
  background:rgba(224,241,253,.62);
  font-size:8px;
  font-weight:750;
  cursor:pointer;
}
body[data-active-view="today"] #todayList{display:none !important}

/* Dark mode keeps the same hierarchy without hiding the infrastructure image. */
[data-theme="dark"] body[data-active-view="today"]{
  --home-glass-border:rgba(255,255,255,.17);
  --home-glass-shadow:0 22px 54px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.11);
  background:
    linear-gradient(102deg,rgba(5,15,24,.58),rgba(7,20,31,.42) 52%,rgba(3,12,20,.62)),
    url("./landing/infrastructure-network.jpg") center/cover fixed;
}
[data-theme="dark"] body[data-active-view="today"]::before{opacity:.34}
[data-theme="dark"] body[data-active-view="today"] .topbar{
  border-color:rgba(255,255,255,.17);
  background:linear-gradient(145deg,rgba(23,37,48,.78),rgba(13,29,41,.64));
  box-shadow:0 14px 38px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12);
}
[data-theme="dark"] body[data-active-view="today"] .home-command-rail,
[data-theme="dark"] body[data-active-view="today"] .home-agenda-surface{
  background:linear-gradient(145deg,rgba(15,31,44,.68),rgba(12,27,39,.42) 58%,rgba(8,22,33,.28));
  backdrop-filter:blur(5px) saturate(112%);
  -webkit-backdrop-filter:blur(5px) saturate(112%);
}
[data-theme="dark"] body[data-active-view="today"] :is(
  .home-rail-heading h1,.home-rail-pulse strong,.grid.stats[aria-label="Ringkasan"] .stat strong,
  .home-agenda-heading h2,.home-current-date strong,.home-card-summary b,.home-agenda-copy > strong,
  .home-agenda-mini.home-agenda-item time,.home-agenda-readiness b,.home-movement-copy strong,
  .home-movement-metric strong
){color:#edf7fd;text-shadow:none}
[data-theme="dark"] body[data-active-view="today"] :is(
  .home-rail-date,.home-rail-pulse small,.home-timeline-label,.home-timeline-stop,
  .home-agenda-heading .cc-subtitle,.home-current-date,.home-card-summary small,
  .home-agenda-copy > span,.home-agenda-mini.home-agenda-item time small,
  .home-agenda-readiness small,.home-movement-copy small,.home-movement-metric small
){color:rgba(222,238,247,.72)}
[data-theme="dark"] body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action,
[data-theme="dark"] body[data-active-view="today"] .upcoming-event-bar,
[data-theme="dark"] body[data-active-view="today"] .home-agenda-toolbar,
[data-theme="dark"] body[data-active-view="today"] .home-next-movement{
  border-color:rgba(255,255,255,.16);
  color:#edf7fd;
  background:linear-gradient(145deg,rgba(34,55,70,.72),rgba(19,40,54,.52));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 7px 20px rgba(0,0,0,.12);
}
[data-theme="dark"] body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat-label,
[data-theme="dark"] body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat small{
  color:rgba(222,238,247,.7);
}
[data-theme="dark"] body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat-icon{
  border-color:rgba(255,255,255,.17);
  color:#dbeeff;
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] body[data-active-view="today"] .upcoming-event-pill,
[data-theme="dark"] body[data-active-view="today"] .home-day-nav .btn,
[data-theme="dark"] body[data-active-view="today"] .home-card-summary > span{
  border-color:rgba(255,255,255,.15);
  color:#edf7fd;
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] body[data-active-view="today"] .upcoming-event-pill .upcoming-event-title{color:#edf7fd}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item{
  border-color:rgba(255,255,255,.15);
  border-left-color:#4f9cff;
  color:#edf7fd;
  background:linear-gradient(96deg,rgba(49,112,177,.33),rgba(17,37,50,.62) 74%);
  box-shadow:0 8px 22px rgba(0,0,0,.16),inset 0 1px 0 rgba(255,255,255,.08);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-pending{
  border-left-color:#ffbd63;
  background:linear-gradient(96deg,rgba(141,91,27,.34),rgba(26,39,47,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-rejected{
  border-left-color:#ff7a75;
  background:linear-gradient(96deg,rgba(142,52,48,.34),rgba(29,37,45,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-tapping{
  border-left-color:#b89aff;
  background:linear-gradient(96deg,rgba(92,65,151,.34),rgba(25,35,47,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-delegated{
  border-left-color:#b89aff;
  background:linear-gradient(96deg,rgba(92,65,151,.34),rgba(25,35,47,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-resched{
  border-left-color:#51d5cb;
  background:linear-gradient(96deg,rgba(27,116,110,.34),rgba(22,38,47,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item.status-flower{
  border-left-color:#ee8cf5;
  background:linear-gradient(96deg,rgba(132,49,140,.34),rgba(29,35,46,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-mini.home-agenda-item:is(.status-waiting,.status-busy){
  border-left-color:#9eb1c0;
  background:linear-gradient(96deg,rgba(73,88,99,.34),rgba(24,36,45,.62) 74%);
}
[data-theme="dark"] body[data-active-view="today"] .home-agenda-index{
  border-color:rgba(255,255,255,.18);
  color:#dbeeff;
  background:rgba(255,255,255,.08);
}

/* Existing auth lifecycle doubles as the cold-start veil; no added timer. */
body[data-active-view="today"] #authGate{
  overflow:hidden;
  color:#10283d;
  background:
    linear-gradient(102deg,rgba(235,246,251,.36),rgba(235,246,251,.12)),
    url("./landing/infrastructure-network.jpg") center/cover;
}
body[data-active-view="today"] #authGate::before{
  content:"";
  position:absolute;
  width:min(430px,calc(100vw - 36px));
  height:250px;
  z-index:0;
  border:1px solid rgba(255,255,255,.88);
  border-radius:30px;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(225,241,248,.44));
  box-shadow:0 24px 60px rgba(8,31,49,.22),inset 0 1px 0 #fff;
  backdrop-filter:blur(9px) saturate(120%);
  -webkit-backdrop-filter:blur(9px) saturate(120%);
  animation:homeColdStartIn .42s cubic-bezier(.22,1,.36,1) both;
}
body[data-active-view="today"] #authGate > *{position:relative;z-index:1}
body[data-active-view="today"] #authGate .kc-spinner{
  border-color:rgba(18,110,210,.18);
  border-top-color:#126ed2;
  box-shadow:0 7px 20px rgba(18,110,210,.16);
}
@keyframes homeColdStartIn{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* Desktop/tablet landscape: one viewport and one scrolling region. */
@media (min-width:901px){
  body[data-active-view="today"]{
    width:100%;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }
  body[data-active-view="today"] #app{
    position:relative;
    top:auto;
    width:100%;
    height:100dvh;
    min-height:0;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    gap:8px;
    margin:0;
    padding:10px 18px 12px;
    overflow:hidden;
  }
  body[data-active-view="today"] .topbar{
    position:relative;
    top:auto;
    grid-row:1;
    min-height:54px;
    margin:0;
    /* main di grid ini padding:0, jadi header wajib selebar kolom #app juga —
       tanpa ini cap `max-width:1120px` (app-tokens.css) menyisakan lubang
       kosong di kanan header pada layar lebar. */
    width:100%;
    max-width:none;
  }
  body[data-active-view="today"] .topbar-inner{min-height:52px;padding:6px 12px}
  body[data-active-view="today"] #appBanners{grid-row:2}
  body[data-active-view="today"] #appBanners:empty{display:none}
  body[data-active-view="today"] main{
    grid-row:3;
    width:100%;
    max-width:none;
    height:100%;
    min-height:0;
    margin:0;
    padding:0;
    overflow:hidden;
  }
  body[data-active-view="today"] .home-command-workspace.view.active{
    height:100%;
    display:grid;
    grid-template-columns:minmax(300px,370px) minmax(0,1fr);
    overflow:hidden;
  }
  body[data-active-view="today"] .home-command-rail,
  body[data-active-view="today"] .home-agenda-surface{height:100%}
}

/* Layar laptop pendek tetap satu viewport tanpa memangkas rail kiri. */
@media (min-width:901px) and (max-height:700px){
  body[data-active-view="today"] #app{
    gap:6px;
    padding:7px 14px 9px;
  }
  body[data-active-view="today"] .topbar{min-height:48px}
  body[data-active-view="today"] .topbar-inner{min-height:46px;padding:4px 10px}
  body[data-active-view="today"] .home-command-rail{padding:10px 12px}
  body[data-active-view="today"] .home-rail-heading{padding-bottom:5px}
  body[data-active-view="today"] .home-rail-heading .cc-kicker{margin-bottom:3px;font-size:8px}
  body[data-active-view="today"] .home-rail-heading h1{font-size:28px}
  body[data-active-view="today"] .home-rail-date{margin-top:4px;font-size:9px}
  body[data-active-view="today"] .home-rail-pulse{padding:5px 0}
  body[data-active-view="today"] .home-rail-pulse strong{font-size:17px}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"]{gap:5px;margin:6px 0}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{
    height:58px;
    min-height:58px;
    grid-template-rows:15px 18px 9px;
    padding:5px 7px;
  }
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat strong{font-size:20px}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat-icon{width:24px;height:24px}
  body[data-active-view="today"] .home-approval-alert{min-height:40px;padding:5px 8px}
  body[data-active-view="today"] .home-rail-timeline-wrap{min-height:37px;padding-top:3px}
  body[data-active-view="today"] .home-rail-timeline-track{padding-top:18px}
  body[data-active-view="today"] .home-rail-timeline-track::before{top:24px}
  body[data-active-view="today"] .home-agenda-surface{padding:9px 12px}
  body[data-active-view="today"] .upcoming-event-bar{min-height:42px}
  body[data-active-view="today"] .home-agenda-heading{padding:4px 2px 3px}
  body[data-active-view="today"] .home-agenda-heading h2{font-size:23px}
  body[data-active-view="today"] .home-next-movement{margin-right:66px}
}

/* Tablet/mobile return to normal document flow; production bottom navigation stays. */
@media (max-width:900px){
  body[data-active-view="today"]{
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    background-attachment:scroll;
  }
  body[data-active-view="today"] #app{
    position:relative;
    top:auto;
    width:calc(100% - 16px);
    min-height:100dvh;
    display:block;
    margin:8px auto 0;
    padding:0 0 calc(94px + var(--safe-bottom));
    overflow:visible;
  }
  body[data-active-view="today"] .topbar{
    position:relative;
    top:auto;
    min-height:54px;
    margin-bottom:8px;
  }
  body[data-active-view="today"] .topbar-inner{padding:7px 9px}
  body[data-active-view="today"] main{
    width:100%;
    max-width:none;
    min-height:0;
    padding:0;
    overflow:visible;
  }
  body[data-active-view="today"] .home-command-workspace.view.active{
    display:block;
    height:auto;
    overflow:visible;
  }
  body[data-active-view="today"] .home-command-rail{
    min-height:0;
    margin-bottom:12px;
    padding:17px;
    overflow:visible;
    background:linear-gradient(145deg,rgba(250,254,255,.68),rgba(221,240,247,.46));
  }
  body[data-active-view="today"] .home-agenda-surface{
    min-height:0;
    display:flex;
    flex-direction:column;
    padding:15px;
    overflow:visible;
    background:linear-gradient(145deg,rgba(250,254,255,.68),rgba(221,240,247,.46));
  }
  body[data-active-view="today"] .home-rail-heading h1{font-size:30px}
  body[data-active-view="today"] .home-rail-pulse{padding:12px 0}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"]{
    /* 13 Agu 2026: 3 -> 2 kolom. Delapan kartu HABIS dibagi 2 tetapi TIDAK habis
     dibagi 3, jadi pita 431-900px menyisakan satu slot kosong di baris terakhir.
     Hack lama 'kartu terakhir melebar' dulu menutup KEDUA breakpoint sekaligus;
     mencabutnya memindahkan cacatnya ke sini. Dua kolom di seluruh lebar =
     4 baris terisi rata di mana pun. */
  grid-template-columns:repeat(2,minmax(0,1fr));
    margin:12px 0;
  }
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action{
    height:76px;
    min-height:76px;
  }
  body[data-active-view="today"] .home-rail-timeline-wrap{display:none}
  body[data-active-view="today"] .upcoming-event-bar{
    min-height:0;
    padding:8px;
  }
  body[data-active-view="today"] .upcoming-event-head{min-width:82px}
  body[data-active-view="today"] .upcoming-event-scroll{
    flex-direction:row;
    overflow-x:auto;
  }
  body[data-active-view="today"] .home-agenda-heading{padding:16px 0 10px}
  body[data-active-view="today"] .home-agenda-heading h2{font-size:28px}
  body[data-active-view="today"] #todayWarnings,
  body[data-active-view="today"] #todayWarnings > *,
  body[data-active-view="today"] .home-compact-grid,
  body[data-active-view="today"] .home-agenda-card{
    height:auto;
    overflow:visible;
  }
  body[data-active-view="today"] .home-agenda-toolbar{
    grid-template-columns:auto minmax(0,1fr) auto;
    padding:6px;
  }
  body[data-active-view="today"] .home-agenda-mini-list{
    max-height:none;
    overflow:visible;
    padding-right:0;
  }
  body[data-active-view="today"] .home-agenda-mini.home-agenda-item{
    min-height:70px;
    height:auto;
    grid-template-columns:52px minmax(0,1fr) minmax(74px,92px);
    gap:8px;
    padding:9px;
    border-radius:16px;
  }
  body[data-active-view="today"] .home-agenda-index,
  body[data-active-view="today"] .home-agenda-arrow,
  body[data-active-view="today"] .home-agenda-status{display:none}
  body[data-active-view="today"] .home-agenda-mini.home-agenda-item time{grid-column:1}
  body[data-active-view="today"] .home-agenda-copy{grid-column:2}
  body[data-active-view="today"] .home-agenda-readiness{grid-column:3}
  body[data-active-view="today"] .home-next-movement{
    min-height:54px;
    grid-template-columns:34px minmax(0,1fr) auto;
    margin-top:7px;
    padding:8px;
  }
  body[data-active-view="today"] .home-movement-metric{display:none}
  body[data-active-view="today"] .home-next-movement button{height:34px}
}

/* Pada tablet 761–900px orb produksi sudah aktif; sisakan kantong kanan agar
   tombol + Agenda tidak tertutup posisi bawaan orb. */
@media (min-width:761px) and (max-width:900px){
  body[data-active-view="today"] .home-agenda-heading{padding-right:72px}
}

@media (max-width:560px){
  body[data-active-view="today"] .home-agenda-toolbar{
    grid-template-columns:auto minmax(0,1fr);
  }
  body[data-active-view="today"] .home-card-summary{
    grid-column:1 / -1;
    justify-content:center;
  }
  body[data-active-view="today"] .home-current-date{justify-items:end;text-align:right}
  body[data-active-view="today"] .home-next-movement{
    grid-template-columns:32px minmax(0,1fr) auto;
  }
}

/* ==========================================================================
   AGENDA HARIAN — LIQUID GLASS HOME PARITY (31 Jul 2026)
   Visual mengikuti preview Agenda yang disetujui. Seluruh kontrak id/data-*,
   RBAC, filter, pencarian, progressive render, select massal, disposisi,
   readiness, Edit/Tapping/Merge, dan Detail tetap dijalankan oleh JS lama.
   ========================================================================== */
body[data-active-view="agenda"]{
  --agenda-glass-ink:#142034;
  --agenda-glass-muted:#63738c;
  --agenda-glass-line:rgba(255,255,255,.82);
  --agenda-glass-panel:rgba(248,251,255,.74);
  --agenda-glass-raised:rgba(255,255,255,.82);
  --agenda-glass-navy:#16243b;
  --agenda-glass-blue:#476df3;
  --agenda-glass-red:#c73f4b;
  --agenda-glass-red-soft:rgba(253,232,235,.80);
  --agenda-glass-amber:#c48210;
  --agenda-glass-amber-soft:rgba(255,241,214,.82);
  --agenda-glass-green:#178a6f;
  --agenda-glass-green-soft:rgba(228,245,239,.84);
  color:var(--agenda-glass-ink);
  background:
    linear-gradient(145deg,rgba(6,18,34,.76),rgba(9,24,43,.64)),
    url("./landing/infrastructure-network.jpg") center/cover fixed;
}

body[data-active-view="agenda"] #app{
  position:relative;
  isolation:isolate;
  overflow:visible;
  width:calc(100% - 32px);
  max-width:1500px;
  min-height:calc(100vh - 32px);
  margin:16px auto;
  padding:18px;
  border:1px solid rgba(255,255,255,.48);
  border-radius:32px;
  background:transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 24px 70px rgba(4,15,31,.28);
}

body[data-active-view="agenda"] #app::before{
  position:absolute;
  z-index:-1;
  inset:1px;
  border:1px solid rgba(255,255,255,.30);
  border-radius:30px;
  content:"";
  pointer-events:none;
}

body[data-active-view="agenda"] .topbar{
  width:100%;
  max-width:none;
  min-height:70px;
  margin:0;
  border:1px solid rgba(255,255,255,.84);
  border-radius:24px;
  background:rgba(248,251,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.56),
    0 12px 34px rgba(4,15,31,.15);
  backdrop-filter:blur(28px) saturate(118%);
  -webkit-backdrop-filter:blur(28px) saturate(118%);
}

body[data-active-view="agenda"] .topbar-inner{
  min-height:68px;
  padding:10px 14px;
}

body[data-active-view="agenda"] main{
  width:100%;
  max-width:none;
  padding:18px 0 calc(104px + var(--safe-bottom));
}

#view-agenda .agenda-command-shell{
  overflow:visible;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}

#view-agenda .agenda-command-shell::before,
#view-agenda .agenda-command-shell::after{
  display:none;
}

#view-agenda .agenda-view-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr);
  gap:18px;
  align-items:stretch;
  padding:20px;
  border:1px solid var(--agenda-glass-line);
  border-radius:26px;
  background:var(--agenda-glass-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.54),
    0 12px 34px rgba(4,15,31,.14);
  backdrop-filter:blur(30px) saturate(120%);
  -webkit-backdrop-filter:blur(30px) saturate(120%);
}

#view-agenda .agenda-view-hero > .cc-shell-header{
  min-width:0;
  align-items:center;
  padding:4px 2px;
}

#view-agenda .agenda-view-hero .cc-kicker{
  margin-bottom:8px;
  color:var(--agenda-glass-muted);
}

#view-agenda .agenda-view-hero .cc-shell-heading h2{
  color:var(--agenda-glass-ink);
  font-size:clamp(32px,4vw,50px);
  font-weight:750;
  letter-spacing:-.055em;
}

#view-agenda .agenda-view-hero .cc-subtitle{
  color:var(--agenda-glass-muted);
}

#view-agenda .agenda-command-shell > .agenda-view-hero > .daily-report-card{
  min-width:0;
  margin:0;
  padding:15px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:20px;
  background:rgba(255,255,255,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.50);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

#view-agenda .daily-report-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  margin:0;
}

#view-agenda .daily-report-head > div:first-child{
  display:grid;
  min-width:0;
  gap:4px;
}

#view-agenda .agenda-date-kicker{
  color:var(--agenda-glass-muted);
  font-size:var(--fs-caption);
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#view-agenda .daily-report-head h2{
  overflow-wrap:anywhere;
  color:var(--agenda-glass-ink);
  font-weight:750;
}

#view-agenda .daily-report-head p{
  margin:0;
  color:var(--agenda-glass-muted);
}

#view-agenda .daily-date-controls{
  display:grid;
  grid-template-columns:42px minmax(110px,1fr) 42px;
  gap:7px;
  width:236px;
  min-width:0;
  justify-content:end;
}

#view-agenda .daily-report-card .daily-date-controls .btn{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:0 12px;
  border:1px solid rgba(190,204,222,.82);
  border-radius:14px;
  color:var(--agenda-glass-ink);
  background:rgba(237,243,250,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
}

#view-agenda .daily-report-card .daily-date-controls #todayAgendaDayBtn,
#view-agenda .daily-report-card .daily-date-controls #todayAgendaDayBtn.active{
  min-width:92px;
  border-color:var(--agenda-glass-navy);
  color:#fff;
  background:var(--agenda-glass-navy);
  box-shadow:0 7px 18px rgba(22,36,59,.16),inset 0 1px 0 rgba(255,255,255,.14);
}

#view-agenda .agenda-command-tools{
  display:grid;
  gap:12px;
  margin-top:14px;
}

#view-agenda .searchbar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  margin:0;
}

#view-agenda .searchbar input{
  min-height:52px;
  padding:0 18px 0 54px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:17px;
  color:var(--agenda-glass-ink);
  background:
    linear-gradient(90deg,transparent 0 48px,rgba(255,255,255,.20) 48px),
    rgba(248,251,255,.76);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.48),
    0 12px 34px rgba(4,15,31,.12);
  backdrop-filter:blur(26px);
  -webkit-backdrop-filter:blur(26px);
}

#view-agenda .searchbar::before{
  position:absolute;
  z-index:2;
  top:15px;
  left:20px;
  color:var(--agenda-glass-muted);
  content:"⌕";
  font-size:20px;
  pointer-events:none;
}

#view-agenda .searchbar{position:relative}

#view-agenda .searchbar .btn{
  min-width:110px;
  min-height:52px;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:17px;
  color:var(--agenda-glass-ink);
  background:rgba(255,255,255,.78);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 12px 34px rgba(4,15,31,.12);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  font-weight:750;
}

#view-agenda .agenda-filter-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
}

#view-agenda .chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  width:max-content;
  max-width:100%;
  margin:0;
  padding:4px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.84);
  border-radius:16px;
  background:rgba(237,243,250,.72);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

#view-agenda .chip-row .chip{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  min-height:38px;
  margin:0;
  padding:0 16px;
  border:0;
  border-radius:12px;
  color:var(--agenda-glass-muted);
  background:transparent;
  box-shadow:none;
  font-weight:750;
}

#view-agenda .chip-row .chip.active{
  color:#fff;
  background:var(--agenda-glass-navy);
  box-shadow:0 6px 14px rgba(22,36,59,.18);
}

#view-agenda .scoped-create-row,
#view-agenda #agendaSelectToolbar{
  margin:0;
}

#view-agenda #agendaSelectToolbar > #agendaSelectToggle,
#view-agenda .scoped-create-row .btn{
  min-height:46px;
  margin:0;
  padding:0 18px;
  border:1px solid rgba(255,255,255,.84);
  border-radius:17px;
  color:var(--agenda-glass-ink);
  background:rgba(255,255,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),0 12px 30px rgba(4,15,31,.11);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  font-weight:750;
}

#view-agenda #agendaList{
  display:grid;
  grid-template-columns:1fr!important;
  gap:12px;
  margin-top:8px!important;
}

#view-agenda .agenda-card{
  --agenda-card-tone:var(--status-surface-ink,var(--agenda-glass-navy));
  --agenda-card-soft:var(--status-surface-bg,rgba(237,243,250,.84));
  --agenda-card-border:var(--status-surface-border,rgba(190,204,222,.86));
  --agenda-readiness-tone:var(--agenda-glass-red);
  --agenda-readiness-soft:var(--agenda-glass-red-soft);
  position:relative;
  display:block;
  width:100%;
  min-width:0;
  min-height:142px;
  height:auto;
  padding:17px;
  overflow:visible;
  border:1px solid color-mix(in srgb,var(--agenda-card-border) 74%,rgba(255,255,255,.82));
  border-radius:23px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.54),rgba(255,255,255,.16) 48%,rgba(255,255,255,.30)),
    color-mix(in srgb,var(--agenda-card-soft) 68%,var(--panel));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    inset 1px 0 0 rgba(255,255,255,.64),
    0 14px 36px color-mix(in srgb,var(--agenda-card-tone) 16%,transparent);
  backdrop-filter:blur(28px) saturate(118%);
  -webkit-backdrop-filter:blur(28px) saturate(118%);
}

#view-agenda .agenda-card.agenda-ready-warning{
  --agenda-readiness-tone:var(--agenda-glass-amber);
  --agenda-readiness-soft:var(--agenda-glass-amber-soft);
}

#view-agenda .agenda-card.agenda-ready-ready{
  --agenda-readiness-tone:var(--agenda-glass-green);
  --agenda-readiness-soft:var(--agenda-glass-green-soft);
}

#view-agenda .agenda-card::before{
  position:absolute;
  inset:14px auto 14px 0;
  width:4px;
  border-radius:0 4px 4px 0;
  background:var(--agenda-card-tone);
  content:"";
  opacity:1;
}

#view-agenda .agenda-card::after{
  position:absolute;
  inset:1px;
  border:1px solid rgba(255,255,255,.68);
  border-radius:21px;
  background:none;
  content:"";
  pointer-events:none;
}

#view-agenda .agenda-card-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:118px minmax(0,1fr) 104px 48px;
  align-items:center;
  gap:18px;
  min-width:0;
}

#view-agenda .timebox{
  display:grid;
  align-self:stretch;
  align-content:center;
  justify-items:center;
  min-width:0;
  min-height:104px;
  gap:4px;
  padding:10px 7px;
  border:1px solid color-mix(in srgb,var(--agenda-card-tone) 28%,rgba(190,204,222,.86));
  border-radius:17px;
  color:var(--agenda-card-tone);
  background:color-mix(in srgb,var(--agenda-card-soft) 82%,rgba(255,255,255,.68));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98),inset 1px 0 0 rgba(255,255,255,.52);
  text-align:center;
}

#view-agenda .timebox strong{
  color:var(--agenda-card-tone);
  font-size:clamp(17px,1.45vw,22px);
  font-weight:780;
  white-space:nowrap;
}

#view-agenda .timebox span{
  color:var(--agenda-glass-muted);
  font-size:12px;
}

#view-agenda .agenda-card-copy{
  display:grid;
  min-width:0;
  gap:8px;
}

#view-agenda .agenda-card-copy > .agenda-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#view-agenda .agenda-kind{
  color:var(--agenda-glass-muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.14em;
  text-transform:uppercase;
}

#view-agenda .agenda-priority{
  flex:0 0 auto;
  min-height:0;
  padding:5px 9px;
  border:0;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

#view-agenda .agenda-priority.p1{color:var(--danger);background:var(--danger-bg)}
#view-agenda .agenda-priority.p2{color:var(--warning);background:var(--warning-bg)}
#view-agenda .agenda-priority.p3{color:var(--info);background:var(--info-bg)}
#view-agenda .agenda-priority.p4{color:var(--priority-p4);background:var(--priority-p4-bg)}
#view-agenda .agenda-priority.p5{color:var(--priority-p5);background:var(--priority-p5-bg)}

#view-agenda .agenda-title{
  display:block;
  margin:0;
  overflow:visible;
  color:var(--agenda-glass-ink);
  font-size:clamp(17px,1.9vw,24px);
  font-weight:780;
  letter-spacing:-.018em;
  line-height:1.18;
  overflow-wrap:anywhere;
}

#view-agenda .agenda-meta{
  display:flex;
  align-items:flex-start;
  gap:7px;
  min-width:0;
  margin:0;
  color:var(--agenda-glass-muted);
  font-size:14px;
  line-height:1.35;
}

#view-agenda .agenda-meta .agenda-location-trigger{
  min-width:0;
  max-width:100%;
  padding:0;
  overflow:visible;
  border:0;
  color:inherit;
  background:transparent;
  font:inherit;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere;
}

#view-agenda .agenda-badges{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin:0;
}

#view-agenda .agenda-badges > .badge,
#view-agenda .agenda-badges .metric-action,
#view-agenda .agenda-delegate-trigger{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  gap:5px;
  margin:0;
  padding:5px 10px;
  border:1px solid rgba(190,204,222,.82);
  border-radius:999px;
  color:var(--agenda-glass-muted);
  background:rgba(237,243,250,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90);
  font-size:12px;
  font-weight:700;
  line-height:1;
}

#view-agenda .agenda-badges > .badge:first-child{
  border-color:color-mix(in srgb,var(--agenda-card-tone) 34%,transparent);
  color:var(--agenda-card-tone);
  background:var(--agenda-card-soft);
}

#view-agenda .agenda-badges .metric-action.danger{
  border-color:color-mix(in srgb,var(--agenda-glass-red) 34%,transparent);
  color:var(--agenda-glass-red);
  background:var(--agenda-glass-red-soft);
}

#view-agenda .agenda-badges .metric-action.warn{
  border-color:color-mix(in srgb,var(--agenda-glass-amber) 34%,transparent);
  color:var(--agenda-glass-amber);
  background:var(--agenda-glass-amber-soft);
}

#view-agenda .agenda-badges .metric-action.ok{
  border-color:color-mix(in srgb,var(--agenda-glass-green) 34%,transparent);
  color:var(--agenda-glass-green);
  background:var(--agenda-glass-green-soft);
}

#view-agenda .agenda-delegate-trigger{
  cursor:pointer;
}

#view-agenda .agenda-delegate-disclosure.open .agenda-delegate-trigger{
  outline:2px solid color-mix(in srgb,var(--agenda-card-tone) 34%,transparent);
  outline-offset:2px;
}

.floating-popover.agenda-delegate-panel{
  padding:16px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:18px;
  color:var(--agenda-glass-ink,#142034);
  background:rgba(248,251,255,.94);
  box-shadow:0 20px 52px rgba(4,15,31,.26),inset 0 1px 0 rgba(255,255,255,.98);
  backdrop-filter:blur(28px) saturate(120%);
  -webkit-backdrop-filter:blur(28px) saturate(120%);
}

.floating-popover .agenda-delegate-event{
  display:none;
}

.floating-popover .agenda-delegate-list{
  display:grid;
  gap:7px;
  margin:0;
  padding:0;
  list-style:none;
}

.floating-popover .agenda-delegate-list li{
  padding:9px 10px;
  border:1px solid rgba(190,204,222,.78);
  border-radius:12px;
  color:var(--agenda-glass-ink,#142034);
  background:rgba(255,255,255,.76);
  font-size:13px;
  font-weight:700;
  overflow-wrap:anywhere;
}

#view-agenda .agenda-assignee{
  margin:0;
}

#view-agenda .agenda-secondary-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
}

#view-agenda .agenda-secondary-actions .btn{
  min-height:29px;
  margin:0;
  padding:4px 10px;
  border:1px solid rgba(190,204,222,.70);
  border-radius:999px;
  color:var(--agenda-glass-muted);
  background:rgba(255,255,255,.48);
  box-shadow:none;
  font-size:11px;
  font-weight:750;
}

#view-agenda .agenda-readiness{
  display:grid;
  justify-items:center;
  gap:3px;
  color:var(--agenda-glass-ink);
  text-align:center;
}

#view-agenda .agenda-readiness-ring{
  display:grid;
  width:72px;
  height:72px;
  margin-bottom:2px;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.94) 0 58%,transparent 60%),
    conic-gradient(var(--agenda-readiness-tone) calc(var(--agenda-progress) * 1%),rgba(190,204,222,.70) 0);
  box-shadow:inset 0 0 0 1px rgba(190,204,222,.48);
}

#view-agenda .agenda-readiness-ring span{
  display:flex;
  align-items:baseline;
  color:var(--agenda-readiness-tone);
}

#view-agenda .agenda-readiness-ring strong{
  font-size:18px;
  font-weight:800;
}

#view-agenda .agenda-readiness-ring small{
  color:inherit;
  font-size:11px;
}

#view-agenda .agenda-readiness > strong{
  font-size:12px;
}

#view-agenda .agenda-readiness > small{
  color:var(--agenda-glass-muted);
  font-size:11px;
}

#view-agenda .agenda-primary-action{
  display:grid;
  place-items:center;
  margin:0;
}

#view-agenda .agenda-primary-action .agenda-open-detail{
  display:grid;
  width:46px;
  min-width:46px;
  height:46px;
  min-height:46px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid rgba(190,204,222,.80);
  border-radius:50%;
  color:var(--agenda-glass-muted);
  background:rgba(255,255,255,.88);
  box-shadow:0 8px 20px rgba(22,36,59,.12),inset 0 1px 0 rgba(255,255,255,.98);
  font-size:27px;
  line-height:1;
}

#view-agenda .agenda-progress-accessible,
#view-agenda .sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

#view-agenda .agenda-card.selectable{
  padding-left:54px;
}

#view-agenda .agenda-card.selected{
  outline:3px solid rgba(71,109,243,.38);
  outline-offset:2px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 0 0 2px var(--agenda-glass-blue) inset,
    0 16px 40px rgba(71,109,243,.20);
}

#view-agenda .agenda-check{
  z-index:3;
}

#view-agenda .empty{
  min-height:180px;
  padding:24px;
  border:1px dashed rgba(255,255,255,.82);
  border-radius:23px;
  color:var(--agenda-glass-muted);
  background:rgba(248,251,255,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

[data-theme="dark"] body[data-active-view="agenda"]{
  --agenda-glass-ink:#e9f1fb;
  --agenda-glass-muted:#b9c7d9;
  --agenda-glass-panel:rgba(16,30,49,.70);
  --agenda-glass-raised:rgba(30,47,69,.84);
}

[data-theme="dark"] body[data-active-view="agenda"] .topbar,
[data-theme="dark"] #view-agenda .agenda-view-hero{
  background:rgba(16,30,49,.72);
}

[data-theme="dark"] #view-agenda .agenda-command-shell > .agenda-view-hero > .daily-report-card,
[data-theme="dark"] #view-agenda .searchbar input,
[data-theme="dark"] #view-agenda .searchbar .btn,
[data-theme="dark"] #view-agenda #agendaSelectToolbar > #agendaSelectToggle{
  background:rgba(23,39,61,.82);
}

@media(max-width:980px){
  #view-agenda .agenda-view-hero{
    grid-template-columns:1fr;
  }

  #view-agenda .agenda-card-layout{
    grid-template-columns:100px minmax(0,1fr) 94px;
  }

  #view-agenda .agenda-primary-action{
    position:absolute;
    right:0;
    bottom:0;
  }

  #view-agenda .agenda-card-copy{
    padding-right:4px;
  }
}

@media(max-width:680px){
  body[data-active-view="agenda"] #app{
    width:100%;
    min-height:100vh;
    margin:0;
    padding:10px;
    border-radius:0;
  }

  body[data-active-view="agenda"] #app::before{
    border-radius:0;
  }

  body[data-active-view="agenda"] .topbar{
    border-radius:20px;
  }

  body[data-active-view="agenda"] main{
    padding-top:12px;
  }

  #view-agenda .agenda-view-hero{
    gap:14px;
    padding:14px;
    border-radius:22px;
  }

  #view-agenda .daily-report-head,
  #view-agenda .searchbar{
    grid-template-columns:1fr;
  }

  #view-agenda .daily-date-controls{
    width:100%;
    grid-template-columns:52px minmax(108px,1fr) 52px;
  }

  #view-agenda .searchbar::before{
    top:15px;
  }

  #view-agenda .searchbar .btn{
    width:100%;
  }

  #view-agenda .agenda-filter-row{
    align-items:stretch;
    flex-direction:column;
  }

  #view-agenda .chip-row{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
  }

  #view-agenda #agendaSelectToolbar > #agendaSelectToggle{
    width:100%;
  }

  #view-agenda .agenda-card{
    padding-bottom:80px;
  }

  #view-agenda .agenda-card-layout{
    grid-template-columns:86px minmax(0,1fr);
    gap:12px;
  }

  #view-agenda .agenda-readiness{
    position:absolute;
    right:58px;
    bottom:-63px;
    display:flex;
    align-items:center;
    gap:7px;
    text-align:left;
  }

  #view-agenda .agenda-readiness-ring{
    width:54px;
    height:54px;
    margin:0;
  }

  #view-agenda .agenda-readiness > strong,
  #view-agenda .agenda-readiness > small{
    display:none;
  }

  #view-agenda .agenda-primary-action{
    right:0;
    bottom:-59px;
  }

  #view-agenda .agenda-card.selectable{
    padding-left:50px;
  }
}

@media(max-width:420px){
  #view-agenda .agenda-card{
    padding-bottom:82px;
  }

  #view-agenda .agenda-card-layout{
    grid-template-columns:1fr;
  }

  #view-agenda .timebox{
    width:100%;
    min-height:64px;
  }

  #view-agenda .agenda-card-copy > .agenda-row{
    align-items:flex-start;
  }
}

@media (max-width:430px){
  body[data-active-view="today"] #app{width:calc(100% - 12px);margin-top:6px}
  body[data-active-view="today"] .home-command-rail{padding:15px}
  body[data-active-view="today"] .home-agenda-surface{padding:13px}
  body[data-active-view="today"] .home-rail-heading h1{font-size:27px}
  body[data-active-view="today"] .home-rail-pulse > div{padding:0 3px}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  body[data-active-view="today"] .home-agenda-heading{
    align-items:center;
    gap:8px;
  }
  body[data-active-view="today"] .home-agenda-heading h2{font-size:24px}
  body[data-active-view="today"] .home-agenda-heading .cc-subtitle{font-size:9px}
  body[data-active-view="today"] .home-agenda-heading [data-open-add]{
    min-width:84px;
    padding:0 9px;
  }
  body[data-active-view="today"] .home-agenda-mini.home-agenda-item{
    min-height:66px;
    grid-template-columns:48px minmax(0,1fr);
  }
  body[data-active-view="today"] .home-agenda-readiness{display:none}
  body[data-active-view="today"] .home-next-movement{
    grid-template-columns:30px minmax(0,1fr);
  }
  body[data-active-view="today"] .home-next-movement button{
    grid-column:1 / -1;
    width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-active-view="today"] #authGate::before{animation:none}
  body[data-active-view="today"] .grid.stats[aria-label="Ringkasan"] .stat.home-stat-action,
  body[data-active-view="today"] .home-agenda-mini.home-agenda-item{transition:none}
}

/* ===== THE DECISION — susun jadwal seperti puzzle (30 Jul 2026) =====
   Kartu kecil di samping kartu utama. Bahasa visualnya tetap Liquid Glass;
   yang ditambahkan adalah GERAK, dan gerak di sini bukan hiasan — ia yang
   memberi tahu apakah sesuatu bisa dijatuhkan, dan apakah susunannya sah. */

.peta3-kep-btn{
  padding:10px 16px; border-radius:var(--ui-r-pill); cursor:pointer;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui); letter-spacing:.02em;
  color:#fff; background:rgba(16,24,38,.58); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 12px 30px rgba(4,10,20,.4);
  transition:background .22s ease, border-color .22s ease, transform .18s ease;
}
.peta3-kep-btn:hover{background:rgba(30,42,60,.72)}
.peta3-kep-btn.aktif{
  background:rgba(10,132,255,.28); border-color:rgba(10,132,255,.6); color:#dbeeff;
}

/* Kartu: lebih KECIL dari kartu utama, duduk di sebelahnya. */
.peta3-keputusan{
  position:absolute; z-index:6;
  left:calc(var(--peta3-panel-lebar) + 36px); top:96px;
  width:min(320px, calc(100vw - var(--peta3-panel-lebar) - 72px));
  max-height:calc(100dvh - 260px); overflow:auto;
  padding:14px 15px; border-radius:var(--radius-card); color:#fff;
  background:rgba(16,24,38,.72); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(28px) saturate(165%); -webkit-backdrop-filter:blur(28px) saturate(165%);
  box-shadow:0 26px 70px rgba(4,10,20,.5);
  animation:peta3KepMasuk .34s cubic-bezier(.22,1,.36,1);
}
.peta3-keputusan[hidden]{display:none}
@keyframes peta3KepMasuk{
  from{opacity:0; transform:translateX(-14px) scale(.97)}
  to{opacity:1; transform:none}
}
.peta3-kep-kepala{display:flex; align-items:flex-start; justify-content:space-between; gap:10px}
.peta3-kep-kicker{margin:0; font-size:10px; letter-spacing:.14em; font-weight:800; color:#64d2ff}
.peta3-kep-kepala h3{margin:3px 0 0; font-size:var(--fs-body); line-height:1.3}

/* Lampu status — satu kalimat, satu warna. Bulatnya BERDENYUT hanya saat
   menunggu; hijau yang berdenyut akan terbaca seolah masih ragu. */
.peta3-kep-lampu{
  display:flex; align-items:center; gap:9px; margin:12px 0;
  padding:9px 11px; border-radius:12px; font-size:var(--fs-label); line-height:1.4;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.78);
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.peta3-kep-bulat{
  flex:0 0 auto; width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.42);
  transition:background .3s ease, box-shadow .3s ease;
}
.peta3-kep-lampu.siap{background:rgba(48,209,88,.16); border-color:rgba(48,209,88,.44); color:#9be8b0}
.peta3-kep-lampu.siap .peta3-kep-bulat{background:#30d158; box-shadow:0 0 12px rgba(48,209,88,.8)}
.peta3-kep-lampu.bentrok{background:rgba(255,69,58,.16); border-color:rgba(255,69,58,.46); color:#ff9d95}
.peta3-kep-lampu.bentrok .peta3-kep-bulat{background:#ff453a; box-shadow:0 0 12px rgba(255,69,58,.8)}
.peta3-kep-lampu.menunggu .peta3-kep-bulat{background:#64d2ff; animation:peta3KepDenyut 1.4s ease-in-out infinite}
@keyframes peta3KepDenyut{
  0%,100%{box-shadow:0 0 0 rgba(100,210,255,0); opacity:.55}
  50%{box-shadow:0 0 12px rgba(100,210,255,.9); opacity:1}
}

/* Kotak puzzle */
.peta3-kep-kotak-daftar{display:flex; flex-direction:column; gap:0}
.peta3-kep-kotak{
  position:relative; display:flex; align-items:center; gap:9px;
  padding:9px 10px; border-radius:13px;
  transition:background .2s ease, border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.peta3-kep-kotak.kosong{
  border:1.5px dashed rgba(255,255,255,.22); background:rgba(255,255,255,.03);
  justify-content:center; min-height:52px;
}
.peta3-kep-kotak.terisi{
  border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.08);
  animation:peta3KepJatuh .32s cubic-bezier(.34,1.56,.64,1);
}
/* Pantulan halus saat kotak baru terisi: gerak yang menegaskan "masuk",
   bukan sekadar muncul. */
@keyframes peta3KepJatuh{
  from{opacity:0; transform:scale(.9) translateY(-6px)}
  to{opacity:1; transform:none}
}
.peta3-kep-kotak.tanpa-titik{border-color:rgba(255,214,10,.4)}
/* Kotak yang sedang diincar hantu seretan. */
.peta3-kep-kotak.incar{
  border-color:rgba(10,132,255,.75); background:rgba(10,132,255,.2);
  transform:scale(1.03);
}
.peta3-kep-no{
  flex:0 0 auto; width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:rgba(255,255,255,.62);
  background:rgba(255,255,255,.1);
}
.peta3-kep-isi{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:1px}
.peta3-kep-jam{margin:0; font-size:11px; font-weight:800; color:#64d2ff; font-variant-numeric:tabular-nums}
.peta3-kep-judul{margin:0; font-size:var(--fs-caption); font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.peta3-kep-lok{margin:0; font-size:10px; color:rgba(255,255,255,.6); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.peta3-kep-ajak{margin:0; font-size:11px; color:rgba(255,255,255,.4)}
.peta3-kep-buang{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%; cursor:pointer;
  color:rgba(255,255,255,.6); font-size:11px; line-height:1;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}
.peta3-kep-buang:hover{background:rgba(255,69,58,.28); color:#fff}

/* Sambungan antar-kotak: garis vertikal berwarna + keterangannya. Inilah
   tempat penilaian "cukup atau tidak" terbaca, jadi warnanya harus terlihat
   tanpa membaca teksnya dulu. */
.peta3-kep-sambung{display:flex; align-items:center; gap:8px; padding:2px 0 2px 20px; min-height:24px}
.peta3-kep-garis{width:2px; height:20px; border-radius:2px; background:rgba(255,255,255,.2)}
.peta3-kep-teks{font-size:10px; line-height:1.3; color:rgba(255,255,255,.55)}
.peta3-kep-sambung.aman .peta3-kep-garis{background:#30d158}
.peta3-kep-sambung.aman .peta3-kep-teks{color:#9be8b0}
.peta3-kep-sambung.ketat .peta3-kep-garis{background:#ff9f0a}
.peta3-kep-sambung.ketat .peta3-kep-teks{color:#ffc46b}
.peta3-kep-sambung.bentrok .peta3-kep-garis{background:#ff453a}
.peta3-kep-sambung.bentrok .peta3-kep-teks{color:#ff9d95}

/* Tombol THE LIVE yang MASUK ke kartu ini — merah saat bentrok, hijau saat
   bisa dijalankan, persis permintaan pemilik. */
.peta3-kep-kaki{display:flex; align-items:center; gap:8px; margin-top:12px}
.peta3-kep-live{
  flex:1 1 auto; padding:10px 14px; border-radius:var(--ui-r-pill); cursor:pointer;
  font:700 var(--fs-label)/1 var(--font-ui, system-ui); color:#fff;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  transition:background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.peta3-kep-live.siap{
  background:rgba(48,209,88,.28); border-color:rgba(48,209,88,.66); color:#c8f7d4;
  box-shadow:0 0 18px rgba(48,209,88,.28);
}
.peta3-kep-live.siap:hover{background:rgba(48,209,88,.42)}
.peta3-kep-live.bentrok{
  background:rgba(255,69,58,.26); border-color:rgba(255,69,58,.6); color:#ffc9c4;
}
.peta3-kep-live[disabled]{cursor:not-allowed; opacity:.72}
.peta3-kep-nota{margin:9px 0 0; font-size:10px; line-height:1.45; color:rgba(255,255,255,.46)}

/* Baris agenda yang bisa DISERET ke kotak puzzle. Barisnya sendiri yang
   ditarik — bukan pegangan kecil di tepinya — jadi sasaran seret sebesar
   barisnya, dan tidak ada elemen tambahan yang perlu diposisikan.
   pan-y disengaja: jari tetap bisa menggulir panel ke atas-bawah, dan hanya
   gerakan mendatar yang menjadi milik seretan. */
.peta3-agenda-baris.dapat-tarik{
  position:relative; cursor:grab; touch-action:pan-y; padding-right:26px;
}
.peta3-agenda-baris.dapat-tarik::after{
  content:"\2237"; position:absolute; right:8px; top:50%; transform:translateY(-50%);
  font-size:12px; letter-spacing:-1px; color:rgba(255,255,255,.34);
  transition:color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}
.peta3-agenda-baris.dapat-tarik:hover::after{color:#64d2ff; transform:translateY(-50%) translateX(2px)}
body.peta3-kep-menyeret .peta3-agenda-baris.dapat-tarik{cursor:grabbing}

/* Hantu yang mengikuti jari/kursor. Kaca kecil, sedikit miring, supaya jelas
   ia sedang "diangkat" dan bukan bagian dari daftar. */
.peta3-kep-hantu{
  position:fixed; z-index:9999; pointer-events:none;
  transform:translate(-50%, -50%) scale(.86) rotate(-2deg);
  opacity:0; transition:opacity .16s ease, transform .16s cubic-bezier(.22,1,.36,1);
  display:flex; flex-direction:column; gap:1px; max-width:230px;
  padding:8px 12px; border-radius:12px; color:#fff;
  background:rgba(10,132,255,.34); border:1px solid rgba(10,132,255,.6);
  backdrop-filter:blur(20px) saturate(160%); -webkit-backdrop-filter:blur(20px) saturate(160%);
  box-shadow:0 18px 44px rgba(4,10,20,.55);
}
.peta3-kep-hantu.tampil{opacity:1; transform:translate(-50%, -50%) scale(1) rotate(-2deg)}
.peta3-kep-hantu b{font-size:11px; color:#bfe4ff; font-variant-numeric:tabular-nums}
.peta3-kep-hantu span{font-size:var(--fs-caption); font-weight:600; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
body.peta3-kep-menyeret{cursor:grabbing; user-select:none}
body.peta3-kep-menyeret .peta3-kep-kotak.kosong{border-color:rgba(10,132,255,.45)}

/* Hormati preferensi sistem: gerak boleh hilang, informasi tidak boleh. */
@media (prefers-reduced-motion:reduce){
  .peta3-keputusan, .peta3-kep-kotak.terisi{animation:none}
  .peta3-kep-lampu.menunggu .peta3-kep-bulat{animation:none}
  .peta3-kep-hantu{transition:none}
}

@media (max-width:900px){
  .peta3-keputusan{
    left:12px; right:12px; top:auto; width:auto;
    bottom:calc(160px + var(--safe-bottom)); max-height:46dvh;
  }
}

/* ===== Ringkasan Agenda — Mission Brief Home (31 Jul 2026) ================
   Presentasi baru memakai seluruh kontrak data/aksi lama. Kelas active khusus
   mencegah modal Audiensi yang berbagi #agendaPreviewModal ikut berubah. */
.agenda-preview-kicker{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 0 4px;
  color:var(--muted);
  font-size:9px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.agenda-preview-kicker > span{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--signal-p5,#178a6f);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--signal-p5,#178a6f) 12%,transparent);
}

#agendaPreviewModal.agenda-preview-revamp-active{
  --ap-ink:#122037;
  --ap-ink-soft:#31435d;
  --ap-muted:#6e819d;
  --ap-line:rgba(255,255,255,.72);
  --ap-panel:rgba(249,252,255,.62);
  --ap-panel-strong:rgba(247,250,253,.78);
  --ap-blue:#2675ec;
  --ap-blue-soft:#e8f1ff;
  --ap-green:#178a6f;
  --ap-green-soft:#e3f5f0;
  --ap-amber:#b66f13;
  --ap-amber-soft:#fff2dc;
  --ap-red:#c73f4b;
  --ap-red-soft:#fff0f2;
  --ap-purple:#6558d7;
  --ap-purple-soft:#eeecff;
  align-items:center;
  padding:16px;
  overflow:auto;
  background:
    radial-gradient(circle at 76% 10%,rgba(74,130,205,.2),transparent 32%),
    rgba(4,14,29,.68);
  backdrop-filter:blur(16px) saturate(82%);
  -webkit-backdrop-filter:blur(16px) saturate(82%);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-modal{
  isolation:isolate;
  position:relative;
  width:min(1120px,calc(100vw - 32px));
  height:min(860px,calc(100dvh - 32px));
  max-width:none;
  max-height:none;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.92);
  border-radius:34px;
  color:var(--ap-ink);
  background:
    linear-gradient(150deg,rgba(251,253,255,.95),rgba(227,235,245,.9)),
    url("/assets/landing/infrastructure-network.jpg") center/cover;
  box-shadow:0 34px 100px rgba(5,18,38,.35),0 3px 15px rgba(5,18,38,.16);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-modal::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.68),rgba(255,255,255,.08) 48%),
    radial-gradient(circle at 88% 8%,rgba(57,139,230,.18),transparent 28%);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head{
  min-height:104px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0;
  padding:21px 25px 19px 30px;
  border-bottom:1px solid rgba(107,131,162,.16);
  background:rgba(247,251,255,.5);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head-copy{
  min-width:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-kicker{
  color:#4e7599;
  font-size:10px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head h3{
  margin:0;
  color:var(--ap-ink);
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.04em;
}

#agendaPreviewModal.agenda-preview-revamp-active #agendaPreviewSub{
  margin:8px 0 0!important;
  color:var(--ap-muted);
  font-size:13px;
  font-weight:650;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-close{
  width:46px;
  height:46px;
  flex:0 0 auto;
  padding:0 0 3px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:15px;
  color:#253750;
  background:rgba(255,255,255,.72);
  box-shadow:0 7px 22px rgba(34,57,82,.08);
  font-size:24px;
  font-weight:350;
}

#agendaPreviewModal.agenda-preview-revamp-active #agendaPreviewBody{
  min-height:0;
  overflow:hidden;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-shell{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-scroll{
  min-height:0;
  overflow:auto;
  padding:22px 30px 24px;
  scrollbar-color:rgba(77,103,137,.3) transparent;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  align-items:stretch;
  gap:14px;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-hero-main,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-panel{
  border:1px solid var(--ap-line);
  background:var(--ap-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 9px 30px rgba(42,66,94,.06);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-hero-main{
  min-width:0;
  display:block;
  padding:23px 25px;
  border-radius:24px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:27px;
  max-width:min(100%,240px);
  padding:5px 10px;
  overflow:hidden;
  border:1px solid rgba(76,109,146,.13);
  border-radius:999px;
  color:#5e51c3;
  background:var(--ap-purple-soft);
  font-size:10px;
  font-weight:850;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-chip::before{
  content:"";
  width:5px;
  height:5px;
  flex:0 0 auto;
  border-radius:50%;
  background:currentColor;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-chip.info{
  color:var(--ap-amber);
  border-color:#f4d59f;
  background:var(--ap-amber-soft);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-location-chip{
  color:#167d83;
  border-color:#bce6e9;
  background:#e4f6f7;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-chip:is(.status-approved,.status-final,.status-done){
  color:var(--ap-green);
  border-color:#bce6dc;
  background:var(--ap-green-soft);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-chip:is(.status-rejected,.status-danger){
  color:var(--ap-red);
  border-color:#f7c8cd;
  background:var(--ap-red-soft);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-title{
  max-width:780px;
  margin:15px 0 7px;
  color:var(--ap-ink);
  font-size:clamp(22px,2.25vw,32px);
  line-height:1.08;
  letter-spacing:-.042em;
  font-weight:860;
  text-wrap:balance;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-recommended{
  margin:0;
  color:var(--ap-muted);
  font-size:12px;
  font-style:italic;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-recommended strong{
  color:#526e8c;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place{
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid rgba(99,125,156,.13);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv{
  min-width:0;
  display:grid;
  gap:4px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv{
  grid-column:auto;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time small,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv small{
  margin:0;
  color:var(--ap-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time strong,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv strong,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv button{
  display:block;
  max-width:100%;
  overflow:hidden;
  border:0;
  padding:0;
  color:#2a3b53;
  background:none;
  font-size:13px;
  font-weight:820;
  line-height:1.25;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv button{
  color:var(--ap-blue);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness{
  display:flex;
  align-items:center;
  gap:17px;
  margin:0;
  padding:20px;
  border-radius:24px;
  color:var(--ap-muted);
  background:linear-gradient(145deg,rgba(236,244,255,.86),rgba(246,249,253,.62));
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-ring{
  --ap-ring:var(--ap-red);
  width:94px;
  height:94px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:50%;
  background:
    radial-gradient(circle closest-side,rgba(247,250,254,.96) 77%,transparent 79% 99%,rgba(255,255,255,.88) 100%),
    conic-gradient(var(--ap-ring) calc(var(--agenda-preview-progress) * 1%),rgba(130,151,177,.15) 0);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.78),0 12px 30px rgba(24,61,103,.1);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-ready .agenda-preview-readiness-ring{--ap-ring:var(--ap-green)}
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-warning .agenda-preview-readiness-ring{--ap-ring:var(--ap-amber)}
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-danger .agenda-preview-readiness-ring{--ap-ring:var(--ap-red)}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-ring > span{
  display:flex;
  align-items:flex-start;
  color:var(--ap-ink);
  line-height:1;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-ring strong{
  color:var(--ap-ink);
  font-size:30px;
  letter-spacing:-.06em;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-ring small{
  margin:3px 0 0 2px;
  color:var(--ap-ink-soft);
  font-size:11px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-copy{
  min-width:0;
  display:grid;
  gap:5px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-copy small{
  color:var(--ap-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-copy > strong{
  color:var(--ap-red);
  font-size:16px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-ready .agenda-preview-readiness-copy > strong{color:var(--ap-green)}
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-warning .agenda-preview-readiness-copy > strong{color:var(--ap-amber)}
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness.is-danger .agenda-preview-readiness-copy > strong{color:var(--ap-red)}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-copy p{
  margin:0;
  color:var(--ap-muted);
  font-size:11px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-content-grid{
  display:grid;
  grid-template-columns:minmax(280px,.74fr) minmax(420px,1.26fr);
  gap:14px;
  margin-top:14px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-panel{
  min-width:0;
  padding:19px 20px;
  border-radius:22px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:40px;
  margin-bottom:15px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid rgba(76,109,146,.12);
  border-radius:11px;
  color:#506b89;
  background:#eef4fa;
  font-size:10px;
  font-weight:850;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head > div{
  min-width:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head small,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head h4{
  display:block;
  margin:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head small{
  color:var(--ap-muted);
  font-size:9px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head h4{
  margin-top:2px;
  color:var(--ap-ink);
  font-size:16px;
  line-height:1.15;
  letter-spacing:-.025em;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head > em{
  margin-left:auto;
  padding:6px 9px;
  border-radius:999px;
  color:#71839c;
  background:rgba(226,234,244,.72);
  font-size:9px;
  font-style:normal;
  font-weight:800;
  white-space:nowrap;
}

/* Konteks Agenda — tata letak 5 Agu 2026.
   Dulu dua kolom timpang (.58fr 1.42fr) dengan Dress Code di kolom SEMPIT:
   satu kalimat pakaian ("PSL warna Gelap, dasi biru muda, …") menjadi tiang
   teks tinggi di samping ruang kosong, lalu dipotong di tengah kata.
   Sekarang: baris atas dua kotak pendek berlebar SAMA, baris bawah kotak
   selebar penuh untuk nilai berbentuk kalimat. */
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  border:1px solid rgba(98,125,157,.12);
  border-radius:16px;
  background:rgba(247,250,253,.56);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv{
  min-width:0;
  margin:0;
  padding:13px 14px;
  border:0;
  border-top:1px solid rgba(98,125,157,.1);
  border-right:1px solid rgba(98,125,157,.1);
  border-radius:0;
  background:none;
  box-shadow:none;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv-wide{
  grid-column:1 / -1;
}

/* Garis ATAS hanya pemisah antarbaris: dua kotak teratas tidak memakainya. */
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv:nth-child(-n+2){
  border-top:0;
}

/* Garis KANAN hanya pemisah antarkolom: kotak kolom kanan, kotak selebar
   penuh, dan kotak terakhir tidak memakainya. */
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv:nth-child(2n),
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv-wide,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv:last-child{
  border-right:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv small{
  margin:0 0 4px;
  color:var(--ap-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* `text-overflow:ellipsis` di sini tidak pernah bekerja sebagaimana niatnya:
   tanpa `white-space:nowrap` ia tidak meringkas nilai panjang jadi satu baris,
   ia hanya MEMOTONG tiap baris yang meluber ("sepatu for…"). Nilai di panel ini
   memang harus terbaca utuh, jadi biarkan membungkus dan pecah kata hanya bila
   satu kata memang lebih lebar dari kotaknya (URL/nama tanpa spasi). */
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv strong{
  display:block;
  min-width:0;
  color:#273951;
  font-size:12px;
  font-weight:760;
  line-height:1.4;
  overflow-wrap:anywhere;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card{
  min-width:0;
  min-height:68px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:10px;
  border:1px solid rgba(98,125,157,.12);
  border-radius:15px;
  background:rgba(247,250,253,.56);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card > span:first-child{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:10px;
  color:#5e7390;
  background:#e8eef5;
  font-size:9px;
  font-weight:850;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card > div{
  min-width:0;
  display:grid;
  gap:2px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card small{
  color:var(--ap-muted);
  font-size:8px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card strong,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .muted,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .delegate-stack-line{
  display:block;
  min-width:0;
  overflow:hidden;
  color:#30435c;
  font-size:10px;
  font-weight:760;
  line-height:1.28;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .muted{
  color:#61748e;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .delegate-stack{
  min-width:0;
  display:grid;
  gap:2px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .delegate-stack-more{
  justify-self:start;
  border:0;
  padding:0;
  color:var(--ap-blue);
  background:none;
  font-size:9px;
  font-weight:800;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .s2-wa-names{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  gap:3px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .s2-wa-name{
  max-width:100%;
  overflow:hidden;
  padding:2px 6px;
  border-radius:7px;
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .s2-wa-name::before{
  width:9px;
  height:9px;
  margin-right:3px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-docs{
  margin-top:14px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-docs .agenda-preview-section-head{
  margin-bottom:13px;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"]{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip{
  min-width:0;
  min-height:72px;
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  align-items:center;
  justify-content:stretch;
  gap:4px 10px;
  padding:12px;
  border:1px solid var(--chip-border);
  border-radius:16px;
  color:var(--chip-color);
  background:var(--chip-tint);
  text-align:left;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(34,57,83,.09);
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > span:first-child{
  width:32px;
  height:32px;
  display:grid;
  grid-row:1 / 3;
  place-items:center;
  border-radius:10px;
  background:rgba(255,255,255,.64);
  font-size:10px;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-dot{
  width:7px;
  height:7px;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > span:nth-child(2){
  min-width:0;
  overflow:hidden;
  font-size:8px;
  font-weight:850;
  letter-spacing:.05em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > strong{
  margin-left:auto;
  color:currentColor;
  font-size:19px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > em{
  grid-column:2 / 4;
  color:currentColor;
  font-size:8px;
  font-style:normal;
  font-weight:700;
  opacity:.68;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-direction,
#agendaPreviewModal.agenda-preview-revamp-active .home-operational-summary,
#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-summary{
  border:1px solid var(--ap-line);
  border-radius:18px;
  background:var(--ap-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-direction{
  margin-top:14px;
}

#agendaPreviewModal.agenda-preview-revamp-active .home-operational-summary{
  padding:16px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-summary{
  margin:14px 0 0;
  padding:13px 15px;
  color:var(--ap-muted);
  font-size:12px;
  line-height:1.45;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer{
  min-height:80px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 25px 14px 30px;
  border-top:1px solid rgba(107,131,162,.18);
  background:rgba(247,251,255,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status > span{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--ap-amber);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ap-amber) 10%,transparent);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status > span.is-approved{
  background:var(--ap-green);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ap-green) 10%,transparent);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status > span.is-rejected{
  background:var(--ap-red);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--ap-red) 10%,transparent);
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status p{
  min-width:0;
  display:grid;
  gap:2px;
  margin:0;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status small{
  color:var(--ap-muted);
  font-size:9px;
  font-weight:750;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status strong{
  overflow:hidden;
  color:var(--ap-ink);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  flex-wrap:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .btn{
  min-height:42px;
  margin:0;
  padding:10px 15px;
  border-radius:13px;
  font-size:11px;
  font-weight:820;
  white-space:nowrap;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-detail-btn{
  margin-right:8px!important;
  color:#38688f;
  background:#eff5fa;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .status-approved-action{
  min-width:106px;
  color:#fff!important;
  border-color:#14715f!important;
  background:linear-gradient(145deg,#218c75,#14715f)!important;
  box-shadow:0 9px 20px rgba(23,138,111,.2),inset 0 1px 0 rgba(255,255,255,.22)!important;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .status-rejected-action{
  color:var(--ap-red)!important;
  border-color:#f3c7cc!important;
  background:var(--ap-red-soft)!important;
}

#agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .status-delegated-action{
  color:var(--ap-purple)!important;
  border-color:#d8d2ff!important;
  background:var(--ap-purple-soft)!important;
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active{
  --ap-ink:#f2f7fb;
  --ap-ink-soft:#d6e1ea;
  --ap-muted:#9fb0bf;
  --ap-line:rgba(255,255,255,.14);
  --ap-panel:rgba(24,37,47,.78);
  --ap-panel-strong:rgba(29,43,54,.9);
  --ap-blue:#8ec8ff;
  --ap-blue-soft:rgba(54,120,180,.2);
  --ap-green:#7ee2ab;
  --ap-green-soft:rgba(39,147,102,.2);
  --ap-amber:#ffd080;
  --ap-amber-soft:rgba(181,112,18,.2);
  --ap-red:#ffaaa4;
  --ap-red-soft:rgba(199,63,75,.2);
  --ap-purple:#c6bfff;
  --ap-purple-soft:rgba(101,88,215,.22);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-modal{
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(150deg,rgba(28,41,51,.96),rgba(15,27,37,.92)),
    url("/assets/landing/infrastructure-network.jpg") center/cover;
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-modal::before{
  background:
    linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 48%),
    radial-gradient(circle at 88% 8%,rgba(70,155,240,.13),transparent 28%);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer{
  background:rgba(23,36,46,.82);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-close,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-section-head > span,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card > span:first-child{
  border-color:rgba(255,255,255,.12);
  color:var(--ap-ink);
  background:rgba(255,255,255,.08);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card{
  background:rgba(255,255,255,.04);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-context-grid .agenda-preview-kv strong,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card strong,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .muted,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-card .delegate-stack-line,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time strong,
[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place .agenda-preview-kv strong{
  color:var(--ap-ink);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness{
  background:linear-gradient(145deg,rgba(36,57,75,.86),rgba(25,39,50,.72));
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness-ring{
  background:
    radial-gradient(circle closest-side,rgba(29,43,54,.98) 77%,transparent 79% 99%,rgba(255,255,255,.08) 100%),
    conic-gradient(var(--ap-ring) calc(var(--agenda-preview-progress) * 1%),rgba(255,255,255,.1) 0);
}

[data-theme="dark"] #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-detail-btn{
  color:var(--ap-blue);
  background:rgba(255,255,255,.08);
}

@media(max-width:900px){
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-hero,
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-content-grid{
    grid-template-columns:1fr;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-readiness{
    justify-content:flex-start;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"]{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .btn{
    width:100%;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-detail-btn{
    margin-right:0!important;
  }
}

@media(max-width:620px){
  #agendaPreviewModal.agenda-preview-revamp-active{
    display:block;
    padding:0;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-modal{
    width:100%;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head{
    min-height:102px;
    padding:17px 17px 15px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-head h3{
    font-size:21px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active #agendaPreviewSub{
    font-size:11px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-close{
    width:42px;
    height:42px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-scroll{
    padding:14px 14px 18px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-hero-main{
    padding:18px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-title{
    font-size:23px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-time-place{
    gap:18px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-panel{
    padding:16px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-team-grid{
    grid-template-columns:1fr;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"]{
    grid-template-columns:1fr 1fr;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip{
    grid-template-columns:27px minmax(0,1fr);
    min-height:68px;
    padding:10px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > span:first-child{
    width:27px;
    height:27px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > strong{
    grid-column:2;
    grid-row:2;
    margin:0;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chips[data-checklist-category-scope="home-revamp"] .checklist-category-chip > em{
    display:none;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer{
    gap:8px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-footer-status{
    display:none;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions{
    grid-template-columns:repeat(3,1fr);
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-actions .btn{
    min-height:44px;
    padding:9px 7px;
    font-size:10px;
  }
  #agendaPreviewModal.agenda-preview-revamp-active .agenda-preview-detail-btn{
    grid-column:1 / -1;
    order:-1;
  }
}

@media(prefers-reduced-motion:reduce){
  #agendaPreviewModal.agenda-preview-revamp-active .checklist-category-chip{
    transition:none;
  }
}

/* ===== Detail Agenda + Lembar Kerja — Mission Workspace Home (31 Jul 2026)
   Revamp presentasi saja. Seluruh data-* hook, RBAC, endpoint, upload, disposisi,
   notifikasi, dan audit tetap memakai alur produksi yang sudah ada. */
#detailModal.detail-workspace-revamp-active{
  --dw-ink:#172033;
  --dw-ink-soft:#30415a;
  --dw-muted:#68758d;
  --dw-line:rgba(80,101,137,.2);
  --dw-window:rgba(244,247,252,.98);
  --dw-panel:rgba(255,255,255,.76);
  --dw-panel-strong:rgba(255,255,255,.94);
  --dw-blue:#5b79ff;
  --dw-blue-soft:rgba(91,121,255,.1);
  --dw-teal:#118f82;
  --dw-teal-soft:rgba(17,143,130,.1);
  --dw-amber:#bd7611;
  --dw-amber-soft:rgba(189,118,17,.1);
  --dw-red:#d84552;
  --dw-red-soft:rgba(216,69,82,.09);
  align-items:center;
  padding:16px;
  overflow:auto;
  background:
    radial-gradient(circle at 76% 9%,rgba(80,128,197,.22),transparent 32%),
    rgba(4,14,29,.7);
  backdrop-filter:blur(16px) saturate(86%);
  -webkit-backdrop-filter:blur(16px) saturate(86%);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-modal{
  isolation:isolate;
  position:relative;
  width:min(1220px,calc(100vw - 32px));
  height:min(900px,calc(100dvh - 32px));
  max-width:none;
  max-height:none;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  padding:0;
  border:1px solid rgba(255,255,255,.92);
  border-radius:30px;
  color:var(--dw-ink);
  background:
    linear-gradient(150deg,rgba(251,253,255,.96),rgba(227,235,245,.92)),
    url("/assets/landing/infrastructure-network.jpg") center/cover;
  box-shadow:0 34px 100px rgba(5,18,38,.36),0 3px 15px rgba(5,18,38,.16);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-modal::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(120deg,rgba(255,255,255,.7),rgba(255,255,255,.08) 48%),
    radial-gradient(circle at 90% 5%,rgba(57,139,230,.16),transparent 28%);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-modal::after{
  content:"";
  position:absolute;
  z-index:4;
  inset:0 0 auto;
  height:4px;
  pointer-events:none;
  background:linear-gradient(90deg,var(--dw-blue),#7764ed,var(--dw-teal));
}

#detailModal.detail-workspace-revamp-active .modal-head{
  min-height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  margin:0;
  padding:20px 24px 17px 27px;
  border-bottom:1px solid rgba(107,131,162,.16);
  background:rgba(247,251,255,.52);
}

#detailModal.detail-workspace-revamp-active .modal-head > div{
  min-width:0;
  display:flex;
  flex-direction:column;
}

#detailModal.detail-workspace-revamp-active #modalSub{
  order:-1;
  margin:0 0 5px!important;
  overflow:hidden;
  color:#567492;
  font-size:9px;
  font-weight:850;
  letter-spacing:.12em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap;
}

#detailModal.detail-workspace-revamp-active #modalTitle{
  margin:0;
  color:var(--dw-ink);
  font-size:25px;
  line-height:1.05;
  letter-spacing:-.04em;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-close{
  width:46px;
  height:46px;
  flex:0 0 auto;
  padding:0 0 3px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:15px;
  color:#253750;
  background:rgba(255,255,255,.74);
  box-shadow:0 7px 22px rgba(34,57,82,.09);
  font-size:24px;
  font-weight:350;
}

#detailModal.detail-workspace-revamp-active #modalBody{
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-nav{
  display:flex;
  gap:7px;
  min-width:0;
  padding:11px 27px;
  overflow:auto hidden;
  border-bottom:1px solid rgba(107,131,162,.13);
  background:rgba(247,251,255,.5);
  scrollbar-width:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-nav::-webkit-scrollbar{display:none}

#detailModal.detail-workspace-revamp-active .detail-workspace-nav button{
  min-height:34px;
  flex:0 0 auto;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:999px;
  color:var(--dw-muted);
  background:transparent;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-nav button:first-child,
#detailModal.detail-workspace-revamp-active .detail-workspace-nav button:hover{
  color:var(--dw-blue);
  border-color:rgba(91,121,255,.2);
  background:var(--dw-blue-soft);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-content{
  min-height:0;
  overflow:auto;
  padding:18px 27px 24px;
  scroll-behavior:smooth;
  scrollbar-color:rgba(77,103,137,.3) transparent;
}

#detailModal.detail-workspace-revamp-active :is(
  #detail-workspace-summary,
  #detail-workspace-information,
  #detail-workspace-coordination,
  #detail-workspace-checklist,
  #detail-workspace-audit
){scroll-margin-top:16px}

#detailModal.detail-workspace-revamp-active .detail-brief{
  display:grid;
  gap:14px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px,300px);
  gap:14px;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-head{
  grid-column:1;
  grid-row:1;
  min-width:0;
  display:grid;
  grid-template-areas:"badges" "heading";
  align-content:start;
  gap:14px;
  padding:22px 24px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:var(--dw-panel-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 15px 36px rgba(42,66,94,.07);
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-head::before{display:none}

#detailModal.detail-workspace-revamp-active .detail-brief-heading{
  grid-area:heading;
  max-width:none;
  padding:0;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-badges{
  grid-area:badges;
  max-width:100%;
  justify-content:flex-start;
  gap:7px;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-badges .badge,
#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-editbtn{
  min-height:28px;
  padding:5px 10px;
  border-radius:999px;
  font-size:10px;
  font-weight:850;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-kicker{
  margin:0 0 6px;
  color:var(--dw-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-title{
  max-width:34ch;
  margin:0;
  color:var(--dw-ink);
  font-size:clamp(22px,2.4vw,31px);
  line-height:1.08;
  letter-spacing:-.042em;
  font-weight:860;
  text-wrap:balance;
}

#detailModal.detail-workspace-revamp-active .detail-brief-recommended{
  margin:8px 0 0;
  color:var(--dw-muted);
  font-size:12px;
  font-style:italic;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-readonly .detail-brief-meta{display:none}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid rgba(99,125,156,.13);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule > div{
  min-width:0;
  padding:11px 12px;
  border:1px solid var(--dw-line);
  border-radius:15px;
  background:var(--dw-panel);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule span{
  display:block;
  margin:0 0 4px;
  color:var(--dw-muted);
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule strong,
#detailModal.detail-workspace-revamp-active .detail-workspace-schedule button{
  display:block;
  max-width:100%;
  overflow:hidden;
  border:0;
  padding:0;
  color:var(--dw-ink-soft);
  background:none;
  font-size:12px;
  font-weight:800;
  line-height:1.3;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-section{
  grid-column:2;
  grid-row:1;
  align-content:start;
  gap:10px;
  padding:18px;
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:
    radial-gradient(circle at 50% 0%,var(--dw-teal-soft),transparent 72%),
    var(--dw-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 15px 36px rgba(42,66,94,.07);
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-section .detail-brief-section-head{
  justify-content:center;
  padding:0;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-section .detail-brief-section-head > span{
  color:var(--dw-muted);
  font-size:9px;
  letter-spacing:.11em;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid,
#detailModal.detail-workspace-revamp-active .detail-brief-command-grid.has-actions{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}

#detailModal.detail-workspace-revamp-active .detail-brief-score-full{
  display:grid;
  grid-template-columns:112px minmax(0,1fr);
  grid-template-areas:
    "ring label"
    "ring copy";
  align-items:center;
  gap:5px 15px;
  min-height:132px;
  padding:10px;
  border:0;
  background:none;
}

#detailModal.detail-workspace-revamp-active .detail-brief-score-full > strong{
  grid-area:ring;
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--dw-teal);
  background:
    radial-gradient(circle closest-side,var(--dw-panel-strong) 73%,transparent 75% 99%,rgba(255,255,255,.76) 100%),
    conic-gradient(var(--dw-teal) var(--detail-readiness),rgba(17,143,130,.13) 0);
  box-shadow:0 8px 22px rgba(16,42,63,.1);
  font-size:24px;
  font-weight:820;
  letter-spacing:-.04em;
}

#detailModal.detail-workspace-revamp-active .detail-brief-score-full > span{
  grid-area:label;
  align-self:end;
  margin:0;
  color:var(--dw-muted);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#detailModal.detail-workspace-revamp-active .detail-brief-score-full > small{
  grid-area:copy;
  align-self:start;
  margin:0;
  color:var(--dw-muted);
  font-size:10px;
  font-weight:700;
  line-height:1.45;
}

#detailModal.detail-workspace-revamp-active .detail-brief-score-full > .detail-brief-progress{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid > .detail-modal-actions{
  margin:0;
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-decision-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-decision-row .btn{
  width:100%;
  min-width:0;
  min-height:39px;
  padding:8px 10px;
  border-radius:12px;
  font-size:10px;
  font-weight:800;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-decision-row .decision-trigger{
  grid-column:1 / -1;
  grid-row:2;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panels{
  grid-column:1 / -1;
  grid-row:2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-upper{
  grid-template-columns:1fr;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-upper > :is(
  .detail-brief-head,
  .detail-brief-info-section,
  .detail-brief-create-actions,
  .detail-brief-command-section
){
  grid-column:1;
  grid-row:auto;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:22px;
  background:var(--dw-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 11px 30px rgba(42,66,94,.05);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 17px;
  border-bottom:1px solid var(--dw-line);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head > div{
  min-width:0;
  display:grid;
  gap:2px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head small{
  color:var(--dw-muted);
  font-size:8px;
  font-weight:820;
  letter-spacing:.1em;
  text-transform:uppercase;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head h5{
  margin:0;
  color:var(--dw-ink);
  font-size:16px;
  line-height:1.2;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head > span{
  flex:0 0 auto;
  padding:6px 9px;
  border-radius:999px;
  color:var(--dw-muted);
  background:rgba(226,234,244,.72);
  font-size:9px;
  font-weight:800;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--dw-line);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid .detail-brief-tile{
  border:0;
  border-radius:0;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid .detail-brief-tile-full,
#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid .detail-brief-tile-pic{
  grid-column:1 / -1;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:13px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid .detail-brief-tile-media{
  grid-column:1 / -1;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panels .detail-brief-tile{
  min-width:0;
  padding:13px 14px;
  border-color:var(--dw-line);
  border-radius:14px;
  background:var(--dw-panel-strong);
  box-shadow:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panels .detail-brief-tile span{
  margin:0 0 4px;
  color:var(--dw-muted);
  font-size:8px;
  font-weight:850;
  letter-spacing:.1em;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panels .detail-brief-tile strong,
#detailModal.detail-workspace-revamp-active .detail-workspace-panels .detail-brief-tile .muted,
#detailModal.detail-workspace-revamp-active .detail-workspace-panels .detail-brief-tile .delegate-stack-line{
  color:var(--dw-ink-soft);
  font-size:11px;
  font-weight:760;
  line-height:1.35;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > :only-child{
  grid-column:1 / -1;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > :is(.approval-collaboration-disclosure,.detail-disposisi){
  min-width:0;
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:21px;
  background:var(--dw-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 11px 30px rgba(42,66,94,.05);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > .detail-disposisi{
  display:grid;
  align-content:start;
  gap:10px;
  padding:16px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > .detail-disposisi > span{
  color:var(--dw-ink);
  font-size:14px;
  letter-spacing:0;
  text-transform:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination .detail-disposisi-hint{
  color:var(--dw-muted);
  font-size:10px;
  line-height:1.5;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination .detail-disposisi-row{
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:7px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination .detail-disposisi-row :is(input,.btn){
  min-height:40px;
  border-radius:11px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  border-radius:24px;
  background:var(--dw-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 12px 34px rgba(42,66,94,.06);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist > .detail-brief-fold{
  position:relative;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto auto;
  gap:14px;
  align-items:center;
  padding:19px 20px;
  border-bottom:1px solid var(--dw-line);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-title{
  min-width:0;
  display:grid;
  gap:3px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-title small{
  color:var(--dw-muted);
  font-size:8px;
  font-weight:850;
  letter-spacing:.12em;
  text-transform:uppercase;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-title > strong{
  color:var(--dw-ink);
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.03em;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-title em{
  color:var(--dw-muted);
  font-size:10px;
  font-style:normal;
  font-weight:650;
  line-height:1.4;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-score{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border:1px solid rgba(17,143,130,.22);
  border-radius:15px;
  color:var(--dw-teal);
  background:var(--dw-teal-soft);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-score i{
  width:8px;
  height:8px;
  flex:0 0 auto;
  border-radius:50%;
  background:currentColor;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-score strong{
  color:inherit;
  font-size:11px;
  white-space:nowrap;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist > .detail-brief-fold > summary{
  position:absolute;
  z-index:2;
  top:-54px;
  right:15px;
  width:38px;
  height:38px;
  min-height:38px;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:0;
  border:1px solid var(--dw-line);
  border-radius:12px;
  color:transparent;
  background:var(--dw-panel-strong);
  font-size:0;
  box-shadow:0 6px 18px rgba(34,57,82,.07);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist > .detail-brief-fold > summary::after{
  color:var(--dw-muted);
  font-size:13px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .detail-brief-fold-body{
  gap:0;
  padding:0;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools{
  padding:14px 20px;
  border-bottom:1px solid var(--dw-line);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-block{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:start;
  gap:10px 14px;
  margin:0;
  padding:0;
  border:0;
  background:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-block > span{
  margin:7px 0 0;
  color:var(--dw-muted);
  font-size:8px;
  letter-spacing:.1em;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-list li{
  padding:6px 9px;
  border:1px solid var(--dw-line);
  border-radius:999px;
  color:var(--dw-muted);
  background:var(--dw-panel-strong);
  font-size:10px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-list li::before{display:none}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-list button{
  color:inherit;
  font-size:inherit;
  font-weight:750;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .detail-brief-results{
  gap:10px;
  padding:14px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .work-bulk-category-bar{
  margin:0;
  padding:13px 14px;
  border:1px solid rgba(91,121,255,.22);
  border-radius:17px;
  background:var(--dw-blue-soft);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .work-bulk-category-bar .btn{
  min-height:40px;
  padding:9px 13px;
  border-color:transparent;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(135deg,var(--dw-blue),#7566ea);
  box-shadow:0 9px 20px rgba(91,121,255,.22);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .work-bulk-category-bar .muted{
  color:var(--dw-muted);
  font-size:10px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-column{
  border-color:color-mix(in srgb,var(--category-color) 30%,var(--dw-line));
  border-radius:19px;
  background:color-mix(in srgb,var(--category-color) 6%,var(--dw-panel-strong));
  box-shadow:0 10px 26px rgba(29,43,69,.045);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-head{
  min-height:64px;
  padding:11px 15px 11px 18px;
  color:var(--category-color);
  font-size:11px;
  letter-spacing:.01em;
  text-transform:none;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-head::before{
  top:10px;
  bottom:10px;
  border-radius:0 999px 999px 0;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-head strong{
  width:auto;
  min-width:48px;
  height:auto;
  min-height:34px;
  padding:7px 9px;
  border-radius:999px;
  color:var(--category-color);
  background:color-mix(in srgb,var(--category-color) 12%,var(--dw-panel-strong))!important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-head em{
  border:0;
  padding:5px 8px;
  background:color-mix(in srgb,var(--category-color) 10%,transparent);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-checklist .checklist-category-items{
  gap:8px;
  padding:0 11px 11px;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-row{
  --dw-row-color:var(--category-color);
  grid-template-columns:minmax(150px,1.1fr) minmax(180px,1.5fr) minmax(150px,1fr) auto!important;
  min-height:62px!important;
  gap:12px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--dw-row-color) 29%,var(--dw-line))!important;
  border-left:4px solid var(--dw-row-color)!important;
  border-radius:15px;
  background:color-mix(in srgb,var(--dw-row-color) 6%,var(--dw-panel-strong))!important;
  box-shadow:none!important;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-row:not(.is-missing){
  --dw-row-color:var(--dw-teal);
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-title :is(strong,.detail-brief-result-toggle),
#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-value :is(strong,.result-preview),
#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-owner strong{
  color:var(--dw-ink);
  font-size:11px;
  font-weight:780;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column :is(
  .detail-brief-result-title,
  .detail-brief-result-value,
  .detail-brief-result-owner
) small{
  color:var(--dw-muted);
  font-size:9px;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-chip{
  padding:7px 9px;
  border-color:color-mix(in srgb,var(--dw-row-color) 34%,transparent);
  color:var(--dw-row-color);
  background:var(--dw-panel-strong);
  font-size:9px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-audit{
  margin-top:14px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-audit .audit-compact{
  border-color:rgba(255,255,255,.75);
  border-radius:18px;
  background:var(--dw-panel);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 10px 26px rgba(42,66,94,.05);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-audit .audit-compact summary{
  padding:14px 16px;
  color:var(--dw-ink);
  font-size:12px;
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active{
  --dw-ink:#edf4ff;
  --dw-ink-soft:#d6e1ea;
  --dw-muted:#9daac1;
  --dw-line:rgba(202,216,242,.15);
  --dw-window:rgba(12,21,39,.98);
  --dw-panel:rgba(28,39,61,.82);
  --dw-panel-strong:rgba(34,47,71,.96);
  --dw-blue:#90a5ff;
  --dw-blue-soft:rgba(91,121,255,.18);
  --dw-teal:#73dac8;
  --dw-teal-soft:rgba(17,143,130,.18);
  --dw-amber:#f2bd61;
  --dw-amber-soft:rgba(189,118,17,.18);
  --dw-red:#ff9ca2;
  --dw-red-soft:rgba(216,69,82,.17);
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active .detail-workspace-modal{
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(150deg,rgba(28,41,54,.97),rgba(15,27,39,.94)),
    url("/assets/landing/infrastructure-network.jpg") center/cover;
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active .detail-workspace-modal::before{
  background:
    linear-gradient(120deg,rgba(255,255,255,.05),rgba(255,255,255,.01) 48%),
    radial-gradient(circle at 88% 8%,rgba(70,155,240,.13),transparent 28%);
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active :is(.modal-head,.detail-workspace-nav){
  background:rgba(23,36,49,.82);
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-close,
  .detail-workspace-panel-head > span
){
  border-color:rgba(255,255,255,.12);
  color:var(--dw-ink);
  background:rgba(255,255,255,.08);
}

@media(max-width:920px){
  #detailModal.detail-workspace-revamp-active .detail-brief-upper{
    grid-template-columns:1fr;
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-head,
  #detailModal.detail-workspace-revamp-active .detail-brief-command-section{
    grid-column:1;
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-command-section{grid-row:2}
  #detailModal.detail-workspace-revamp-active .detail-workspace-panels{
    grid-column:1;
    grid-row:3;
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-score-full{
    grid-template-columns:94px minmax(0,1fr);
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-score-full > strong{
    width:94px;
    height:94px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-coordination{
    grid-template-columns:1fr;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-coordination > :only-child{
    grid-column:auto;
  }
  #detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  #detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-chip{
    justify-self:start!important;
  }
}

@media(max-width:640px){
  #detailModal.detail-workspace-revamp-active{
    display:block;
    padding:0;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-modal{
    width:100%;
    height:100dvh;
    border:0;
    border-radius:0;
  }
  #detailModal.detail-workspace-revamp-active .modal-head{
    min-height:88px;
    padding:16px 16px 13px;
  }
  #detailModal.detail-workspace-revamp-active #modalTitle{font-size:21px}
  #detailModal.detail-workspace-revamp-active #modalSub{font-size:8px}
  #detailModal.detail-workspace-revamp-active .detail-workspace-close{
    width:42px;
    height:42px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-nav{
    padding:9px 14px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-content{
    padding:13px 12px calc(18px + env(safe-area-inset-bottom));
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-head{
    padding:17px;
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-title{
    font-size:22px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-schedule,
  #detailModal.detail-workspace-revamp-active .detail-workspace-panels,
  #detailModal.detail-workspace-revamp-active .detail-workspace-info-grid,
  #detailModal.detail-workspace-revamp-active .detail-workspace-team-grid{
    grid-template-columns:1fr;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-info-grid .detail-brief-tile-full,
  #detailModal.detail-workspace-revamp-active .detail-workspace-info-grid .detail-brief-tile-pic,
  #detailModal.detail-workspace-revamp-active .detail-workspace-team-grid .detail-brief-tile-media{
    grid-column:auto;
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-score-full{
    grid-template-columns:88px minmax(0,1fr);
  }
  #detailModal.detail-workspace-revamp-active .detail-brief-score-full > strong{
    width:88px;
    height:88px;
    font-size:21px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-coordination .detail-disposisi-row{
    grid-template-columns:1fr;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-head{
    grid-template-columns:minmax(0,1fr) auto auto;
    padding:16px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-title em{display:none}
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-score{
    padding:7px 9px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-score strong{
    font-size:9px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools{
    padding:13px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-block{
    grid-template-columns:1fr;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist-tools .detail-brief-block > span{
    margin:0;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist .detail-brief-results{
    padding:10px;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist .work-bulk-category-bar{
    align-items:stretch;
    flex-direction:column;
  }
  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist .work-bulk-category-bar .btn{
    width:100%;
  }
  #detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-row{
    grid-template-columns:1fr!important;
  }
}

@media(prefers-reduced-motion:reduce){
  #detailModal.detail-workspace-revamp-active .detail-workspace-content{scroll-behavior:auto}
}

/* ============================================================
   DETAIL WORKSPACE — SYMMETRY FIX (31 Jul 2026)
   Reset penempatan grid-area dari layout Detail lama. Tanpa reset
   ini, class tile lama membuat implicit tracks sehingga kartu
   menghilang/menyempit walau markup dan datanya benar.
   ============================================================ */
#detailModal.detail-workspace-revamp-active .detail-workspace-panels{
  align-items:stretch;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-panel{
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

#detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-info-grid,
  .detail-workspace-team-grid
){
  height:100%;
  gap:10px;
  padding:14px;
  background:transparent;
}

#detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-info-grid,
  .detail-workspace-team-grid
) > .detail-brief-tile{
  grid-area:auto !important;
  grid-column:auto !important;
  grid-row:auto !important;
  min-width:0;
  min-height:66px;
  overflow:hidden;
}

#detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-info-grid,
  .detail-workspace-team-grid
) > .detail-brief-tile strong{
  min-width:0;
  overflow-wrap:break-word;
  word-break:normal;
}

/* Empat baris kiri dan empat baris kanan: tinggi kedua panel
   mengikuti konten terpadat tetapi selalu berakhir sejajar. */
#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid{
  grid-template-columns:minmax(0,1fr);
  grid-auto-rows:minmax(66px,auto);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid > .detail-brief-tile{
  grid-column:1 !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:
    "delegate delegate"
    "pic sespri"
    "protocol ops"
    "persidangan media";
  grid-auto-rows:minmax(66px,auto);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-span2{
  grid-area:delegate !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-picint{
  grid-area:pic !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-sespri{
  grid-area:sespri !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-protokol{
  grid-area:protocol !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-ops{
  grid-area:ops !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-persidangan{
  grid-area:persidangan !important;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile-media{
  grid-area:media !important;
}

/* Panel koordinasi ditumpuk selebar workspace. Disclosure yang
   tertutup tidak lagi direntangkan mengikuti tinggi form Disposisi. */
#detailModal.detail-workspace-revamp-active .detail-workspace-coordination{
  grid-template-columns:minmax(0,1fr);
  align-items:start;
  gap:12px;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > :is(
  .approval-collaboration-disclosure,
  .detail-disposisi
){
  grid-column:1 !important;
  width:100%;
  height:auto;
  align-self:start;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-coordination > .approval-collaboration-disclosure > summary{
  min-height:62px;
  padding:13px 16px;
}

@media(max-width:640px){
  #detailModal.detail-workspace-revamp-active .detail-workspace-info-grid,
  #detailModal.detail-workspace-revamp-active .detail-workspace-team-grid{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:none;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-team-grid > .detail-brief-tile{
    grid-area:auto !important;
    grid-column:1 !important;
  }
}

/* ============================================================
   DETAIL WORKSPACE — EDIT GATE & ACTION CONTRAST (31 Jul 2026)
   Prioritas tampil sebagai informasi saat mode baca. Kontrol
   dropdown hanya dirender setelah whitelist membuka mode Edit.
   ============================================================ */
#detailModal.detail-workspace-revamp-active .detail-brief-priority-readonly{
  cursor:default;
  user-select:text;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-command-edit-trigger{
  border-color:color-mix(in srgb,var(--accent) 78%,#163c8c);
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent) 94%,#fff) 0%,
    color-mix(in srgb,var(--accent) 72%,#163c8c) 100%
  );
  color:#fff;
  box-shadow:
    0 7px 17px color-mix(in srgb,var(--accent) 27%,transparent),
    inset 0 1px 0 rgba(255,255,255,.28);
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-command-edit-trigger::before{
  content:"✎";
  display:inline-block;
  margin-right:6px;
  font-size:12px;
  line-height:1;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-command-edit-trigger:hover{
  border-color:color-mix(in srgb,var(--accent) 88%,#102f75);
  background:linear-gradient(
    135deg,
    color-mix(in srgb,var(--accent) 84%,#fff) 0%,
    color-mix(in srgb,var(--accent) 62%,#102f75) 100%
  );
  box-shadow:
    0 9px 21px color-mix(in srgb,var(--accent) 34%,transparent),
    inset 0 1px 0 rgba(255,255,255,.32);
  transform:translateY(-1px);
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-command-edit-trigger:focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent) 30%,transparent);
  outline-offset:2px;
}

#detailModal.detail-workspace-revamp-active .detail-brief-command-grid .detail-decision-row.no-edit-action [data-modal-delete]{
  grid-column:1 / -1;
  grid-row:1;
}

/* ============================================================
   DETAIL WORKSPACE — CONTENT INTEGRITY (31 Jul 2026)
   Semua track boleh menyusut mengikuti modal. Teks informasi
   membungkus dan kartu bertambah tinggi; tidak ada data yang
   dipotong hanya demi mempertahankan tinggi semu.
   ============================================================ */
#detailModal.detail-workspace-revamp-active .detail-workspace-modal,
#detailModal.detail-workspace-revamp-active #modalBody{
  grid-template-columns:minmax(0,1fr);
}

#detailModal.detail-workspace-revamp-active .detail-workspace-modal > *,
#detailModal.detail-workspace-revamp-active #modalBody,
#detailModal.detail-workspace-revamp-active .detail-workspace-nav,
#detailModal.detail-workspace-revamp-active .detail-workspace-content,
#detailModal.detail-workspace-revamp-active .detail-brief,
#detailModal.detail-workspace-revamp-active .detail-brief-upper,
#detailModal.detail-workspace-revamp-active .detail-brief-upper > *,
#detailModal.detail-workspace-revamp-active .detail-workspace-panels,
#detailModal.detail-workspace-revamp-active .detail-workspace-panel,
#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid,
#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid,
#detailModal.detail-workspace-revamp-active .detail-workspace-coordination,
#detailModal.detail-workspace-revamp-active .detail-workspace-checklist,
#detailModal.detail-workspace-revamp-active .detail-workspace-audit{
  width:100%;
  min-width:0;
  max-width:100%;
}

#detailModal.detail-workspace-revamp-active .modal-head{
  align-items:flex-start;
}

#detailModal.detail-workspace-revamp-active .modal-head > div{
  flex:1 1 auto;
  width:0;
}

#detailModal.detail-workspace-revamp-active #modalSub{
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.4;
}

#detailModal.detail-workspace-revamp-active #modalTitle,
#detailModal.detail-workspace-revamp-active .detail-brief-title,
#detailModal.detail-workspace-revamp-active .detail-workspace-panel-head h5{
  max-width:100%;
  overflow-wrap:anywhere;
}

#detailModal.detail-workspace-revamp-active .detail-brief-upper .detail-brief-head{
  overflow:visible;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule > div{
  min-height:62px;
  height:auto;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-schedule strong,
#detailModal.detail-workspace-revamp-active .detail-workspace-schedule button{
  width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
}

#detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-info-grid,
  .detail-workspace-team-grid
) > .detail-brief-tile{
  height:auto;
  overflow:visible;
  align-self:stretch;
}

#detailModal.detail-workspace-revamp-active :is(
  .detail-workspace-info-grid,
  .detail-workspace-team-grid
) > .detail-brief-tile :is(
  strong,
  .muted,
  .delegate-stack-line
){
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  -webkit-line-clamp:unset;
}

#detailModal.detail-workspace-revamp-active .detail-workspace-info-grid,
#detailModal.detail-workspace-revamp-active .detail-workspace-team-grid{
  grid-auto-rows:minmax(66px,max-content);
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .detail-brief-result-row{
  height:auto!important;
  overflow:visible!important;
  align-items:start;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column :is(
  .detail-brief-result-title,
  .detail-brief-result-value,
  .detail-brief-result-owner
){
  min-width:0;
  max-width:100%;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column :is(
  .detail-brief-result-title,
  .detail-brief-result-value,
  .detail-brief-result-owner
) :is(strong,small,.detail-brief-result-toggle,.result-preview){
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  -webkit-line-clamp:unset;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column .result-reader-toggle{
  height:auto;
  overflow:visible;
  white-space:normal;
}

#detailModal.detail-workspace-revamp-active .checklist-category-column :is(
  .result-reader-toggle-label,
  .result-reader-toggle-meta
){
  overflow:visible;
  white-space:normal;
  -webkit-line-clamp:unset;
}

@media(max-width:640px){
  #detailModal.detail-workspace-revamp-active .modal-head > div{
    width:auto;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-schedule > div{
    min-height:0;
  }
}

/* ============================================================
   DETAIL WORKSPACE — EDIT FLOW, HOME DIRECTION (31 Jul 2026)
   Empat panel presentasi untuk seluruh isian sampai readiness.
   Hook data-inline-*, validasi, whitelist, simpan, notifikasi,
   dan kalkulasi kesiapan tetap memakai alur produksi yang sama.
   ============================================================ */
#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-upper{
  gap:14px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-upper .detail-brief-head{
  grid-template-columns:minmax(0,1fr) minmax(430px,.92fr);
  grid-template-areas:"heading badges";
  align-items:center;
  gap:24px;
  padding:22px 24px;
  background:
    radial-gradient(circle at 92% 0%,var(--dw-blue-soft),transparent 44%),
    var(--dw-panel-strong);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-heading{
  align-self:center;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-title{
  max-width:28ch;
  font-size:clamp(21px,2vw,28px);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-meta{
  max-width:72ch;
  margin:8px 0 0;
  color:var(--dw-muted);
  font-size:10px;
  font-weight:680;
  line-height:1.45;
  overflow-wrap:anywhere;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-controls{
  align-self:center;
  display:grid;
  grid-template-columns:minmax(150px,.8fr) minmax(220px,1.2fr) auto;
  align-items:end;
  gap:8px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-control{
  min-width:0;
  min-height:56px;
  display:grid;
  align-content:center;
  gap:4px;
  padding:8px 12px;
  border:1px solid var(--dw-line);
  border-radius:15px;
  color:var(--dw-ink);
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-control > span{
  color:var(--dw-muted);
  font-size:8px;
  letter-spacing:.11em;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-control .detail-brief-select{
  min-height:20px;
  color:var(--dw-ink-soft);
  font-size:11px;
  font-weight:800;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-actions{
  min-height:56px;
  display:grid;
  grid-template-columns:repeat(2,minmax(72px,1fr));
  gap:7px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-actions .btn{
  min-height:56px;
  padding:9px 14px;
  border-radius:15px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-actions .primary{
  border-color:transparent;
  color:#fff;
  background:linear-gradient(135deg,var(--dw-blue),#6d61df);
  box-shadow:0 9px 21px rgba(91,121,255,.22);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-info-section{
  gap:10px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-info-section > .detail-brief-section-head{
  min-height:34px;
  padding:0 5px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-info-section > .detail-brief-section-head > span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--dw-muted);
  font-size:9px;
  letter-spacing:.12em;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-info-section > .detail-brief-section-head > span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--dw-blue);
  box-shadow:0 0 0 5px var(--dw-blue-soft);
}

#detailModal.detail-workspace-revamp-active .detail-edit-flow{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-areas:
    "main schedule"
    "team team"
    "brief brief"!important;
  align-items:stretch;
  gap:14px!important;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section{
  min-width:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.78);
  border-radius:23px;
  background:var(--dw-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 32px rgba(42,66,94,.055);
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-main{grid-area:main}
#detailModal.detail-workspace-revamp-active .detail-edit-section-schedule{grid-area:schedule}
#detailModal.detail-workspace-revamp-active .detail-edit-section-team{grid-area:team}
#detailModal.detail-workspace-revamp-active .detail-edit-section-brief{grid-area:brief}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head{
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:15px 17px;
  border-bottom:1px solid var(--dw-line);
  background:
    linear-gradient(118deg,rgba(255,255,255,.54),rgba(255,255,255,.12)),
    color-mix(in srgb,var(--dw-blue-soft) 42%,transparent);
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head > div{
  min-width:0;
  display:grid;
  gap:2px;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head small{
  color:var(--dw-muted);
  font-size:8px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head h5{
  margin:0;
  color:var(--dw-ink);
  font-size:16px;
  line-height:1.2;
  letter-spacing:-.02em;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head p{
  margin:2px 0 0;
  color:var(--dw-muted);
  font-size:9px;
  font-weight:650;
  line-height:1.35;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-head > span{
  flex:0 0 auto;
  padding:6px 9px;
  border:1px solid rgba(91,121,255,.13);
  border-radius:999px;
  color:var(--dw-blue);
  background:var(--dw-blue-soft);
  font-size:9px;
  font-weight:820;
  white-space:nowrap;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(76px,max-content);
  align-content:start;
  gap:10px;
  padding:13px;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-tile,
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-folder-fields > .detail-brief-tile{
  grid-area:auto!important;
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0;
  min-height:76px;
  height:auto;
  justify-content:flex-start;
  overflow:visible;
  padding:13px 14px;
  border:1px solid var(--dw-line);
  border-radius:16px;
  background:var(--dw-panel-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-tile-full,
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-tile-span2,
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-folder-fields > .detail-brief-tile-full,
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-folder-fields > .detail-brief-tile-span2{
  grid-column:1 / -1!important;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-tile > span{
  margin:0 0 7px;
  color:var(--dw-muted);
  font-size:8px;
  font-weight:850;
  letter-spacing:.11em;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid :is(
  .detail-brief-input,
  .detail-brief-select,
  select.detail-brief-pick
){
  width:100%;
  min-width:0;
  min-height:43px;
  padding:9px 11px;
  border:1px solid rgba(87,111,145,.2);
  border-radius:12px;
  color:var(--dw-ink);
  background:rgba(248,251,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
  font-size:11px;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid :is(
  .detail-brief-input,
  .detail-brief-select,
  select.detail-brief-pick
):focus{
  border-color:var(--dw-blue);
  outline:0;
  box-shadow:0 0 0 3px var(--dw-blue-soft),inset 0 1px 0 rgba(255,255,255,.9);
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-textarea{
  min-height:112px;
  line-height:1.5;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-tile-sub{
  margin-top:7px;
  color:var(--dw-muted);
  font-size:9px;
  line-height:1.4;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .assign-chips{
  margin:0 0 8px;
  gap:6px;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .assign-chip{
  border-color:rgba(91,121,255,.18);
  color:var(--dw-ink-soft);
  background:var(--dw-blue-soft);
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-time-pair{
  width:100%;
  gap:7px;
}

/* RENTANG TANGGAL (4 Sep 2026): baris [tgl][jam] – [jam][tgl] di tile Hari dan Tanggal
   (aturan .detail-brief-multidate lama dihapus bersama tile "Blok beberapa tanggal"). */
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-rentang-baris{
  flex-wrap:wrap;
  row-gap:8px;
}
#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-rentang-tepi{
  display:flex;
  align-items:center;
  gap:7px;
  flex:1 1 15em;
  min-width:0;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-dateonly{
  margin-top:8px;
  color:var(--dw-muted);
  font-size:9px;
}

#detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-zone-tag{
  flex:0 0 auto;
  padding:7px 9px;
  border-radius:10px;
  color:var(--dw-ink-soft);
  background:rgba(226,234,244,.8);
  font-size:9px;
  font-weight:850;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-section{
  position:relative;
  overflow:hidden;
  gap:12px;
  padding:18px 20px 20px;
  border:1px solid rgba(255,255,255,.78);
  border-radius:23px;
  background:
    radial-gradient(circle at 12% 10%,var(--dw-teal-soft),transparent 38%),
    var(--dw-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 12px 32px rgba(42,66,94,.055);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-section .detail-brief-section-head{
  justify-content:flex-start;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-section .detail-brief-section-head > span{
  color:var(--dw-ink);
  font-size:15px;
  letter-spacing:-.01em;
  text-transform:none;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-grid{
  grid-template-columns:minmax(260px,.78fr) minmax(0,1.22fr);
  align-items:stretch;
  gap:12px;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-score-full{
  min-height:126px;
  padding:8px 12px;
  border:1px solid rgba(17,143,130,.14);
  border-radius:18px;
  background:rgba(255,255,255,.48);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-grid > .detail-modal-actions{
  display:grid;
  align-content:center;
  padding:12px;
  border:1px solid var(--dw-line);
  border-radius:18px;
  background:rgba(255,255,255,.48);
}

[data-theme="dark"] #detailModal.detail-workspace-revamp-active .detail-brief.is-editing :is(
  .detail-brief-control,
  .detail-edit-section-head,
  .detail-edit-section-grid .detail-brief-input,
  .detail-edit-section-grid .detail-brief-select,
  .detail-edit-section-grid select.detail-brief-pick,
  .detail-brief-score-full,
  .detail-brief-command-grid > .detail-modal-actions
){
  color:var(--dw-ink);
  background:rgba(36,49,72,.82);
}

@media(max-width:1040px){
  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-upper .detail-brief-head{
    grid-template-columns:1fr;
    grid-template-areas:"heading" "badges";
  }

  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-controls{
    grid-template-columns:minmax(145px,.8fr) minmax(210px,1.2fr) auto;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-flow{
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"main" "schedule" "team" "brief"!important;
  }
}

@media(max-width:760px){
  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-controls{
    grid-template-columns:1fr;
    align-items:stretch;
  }

  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-header-actions{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-grid{
    grid-template-columns:minmax(0,1fr);
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-tile,
  #detailModal.detail-workspace-revamp-active .detail-edit-section-grid > .detail-brief-folder-fields > .detail-brief-tile{
    grid-column:1!important;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-team .detail-brief-time-pair,
  #detailModal.detail-workspace-revamp-active .detail-edit-section-grid .detail-brief-tile-pic .detail-brief-time-pair{
    align-items:stretch;
    flex-direction:column;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-team .detail-brief-time-pair select.detail-brief-pick{
    width:100%;
  }

  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing .detail-brief-command-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

@media(max-width:480px){
  #detailModal.detail-workspace-revamp-active .detail-edit-section-head{
    align-items:flex-start;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-head p{
    display:none;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-grid{
    padding:10px;
  }

  #detailModal.detail-workspace-revamp-active .detail-edit-section-schedule .detail-brief-time-pair{
    flex-wrap:wrap;
  }
  /* Rentang tanggal (4 Sep 2026): di bawah 760px tiap tepi [tgl][jam] mengambil satu
     baris penuh; tanda "–" menyusut jadi pemisah baris. */
  #detailModal.detail-workspace-revamp-active .detail-edit-section-schedule .detail-brief-rentang-tepi{
    flex:1 1 100%;
  }
}

/* Input Agenda: hanya ada aksi Batal di header. Hindari jejak grid dua tombol
   milik mode edit dan bagi tiga kontrol secara simetris. */
#detailModal.detail-workspace-revamp-active .detail-brief.is-editing.is-new-input .detail-brief-header-controls{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing.is-new-input .detail-brief-header-actions{
  align-self:stretch;
  width:100%;
  height:56px;
  min-height:56px;
  grid-template-columns:minmax(0,1fr);
}

#detailModal.detail-workspace-revamp-active .detail-brief.is-editing.is-new-input .detail-brief-header-actions .btn{
  align-self:stretch;
  box-sizing:border-box;
  width:100%;
  height:56px;
  min-height:56px;
  margin:0;
  border:1px solid var(--dw-line);
  border-radius:15px;
  color:var(--dw-ink);
  background:rgba(255,255,255,.68);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86);
}

@media(max-width:760px){
  #detailModal.detail-workspace-revamp-active .detail-brief.is-editing.is-new-input .detail-brief-header-controls{
    grid-template-columns:minmax(0,1fr);
  }
}

/* ==========================================================================
   GEOMETRI HEADER SAMA DENGAN HOME DI TAB LAIN (31 Jul 2026)
   Lanjutan commit ed61314 yang baru menyetel Home: di sana header ikut lebar
   viewport (gutter 18px) sedangkan tab lain masih terkena cap
   `--ipad-shell-max` (app-tokens.css blok >=768px) — di 1920px header berhenti
   di 1360px, gutter 34px, dan tinggi 80px, jadi berpindah tab = header
   melompat. Blok ini menyamakan gutter, lebar, dan tinggi header saja; gaya
   kaca/warna tetap milik masing-masing view karena sudah identik secara visual.
   KALENDER & PETA dikecualikan: kalender menyembunyikan `.topbar`
   (body[data-active-view="calendar"] .topbar{display:none}) dan Peta 3.0
   memakai shell full-bleed sendiri (body.peta3-aktif .topbar{display:none}).
   ========================================================================== */
@media (min-width:901px){
  body.wide-view-active:not([data-active-view="today"]):not([data-active-view="calendar"]):not([data-active-view="map"]) #app{
    /* gutter Home (blok desktop `body[data-active-view="today"] #app`) */
    padding-left:18px;
    padding-right:18px;
  }
  body.wide-view-active:not([data-active-view="today"]):not([data-active-view="calendar"]):not([data-active-view="map"]) .topbar{
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    min-height:54px;
  }
  body.wide-view-active:not([data-active-view="today"]):not([data-active-view="calendar"]):not([data-active-view="map"]) .topbar-inner{
    min-height:52px;
    padding:6px 12px;
  }
  /* Tepi konten = tepi header, persis seperti Home yang memberi gutter di #app
     dan `main{padding:0}`. Tanpa ini konten masuk 30px lagi ke dalam. */
  body.wide-view-active:not([data-active-view="today"]):not([data-active-view="calendar"]):not([data-active-view="map"]) main{
    padding-left:0;
    padding-right:0;
  }
}

/* ============================================================================
   APPROVAL DECISION DESK — LIQUID GLASS HOME/AGENDA (31 Jul 2026)
   Visual-only. Semua id, data-attribute, urutan panel, kontrol edit, dan alur
   keputusan tetap dimiliki markup/JavaScript yang sudah ada.
   ============================================================================ */
body[data-active-view="approval"]{
  --approval-glass-ink:#101d34;
  --approval-glass-muted:#647590;
  --approval-glass-navy:#12223d;
  --approval-glass-line:rgba(255,255,255,.88);
  --approval-glass-line-soft:rgba(255,255,255,.66);
  --approval-glass-panel:rgba(231,239,249,.60);
  --approval-glass-panel-strong:rgba(248,251,255,.76);
  --approval-glass-panel-soft:rgba(222,233,246,.48);
  min-height:100vh;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(110deg,rgba(4,17,39,.80),rgba(5,35,65,.42) 48%,rgba(4,20,43,.72)),
    url("./landing/infrastructure-network.jpg") center/cover fixed;
}

body[data-active-view="approval"] #app{
  width:100%;
  max-width:none;
  padding:14px 18px 36px;
}

body[data-active-view="approval"] .topbar{
  border:1px solid var(--approval-glass-line);
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.43),rgba(216,228,242,.54)),
    rgba(226,235,246,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.55),
    0 18px 46px rgba(3,14,31,.22);
  backdrop-filter:blur(30px) saturate(122%);
  -webkit-backdrop-filter:blur(30px) saturate(122%);
}

body[data-active-view="approval"] .topbar :is(.brand-copy strong,.brand-copy small){
  color:var(--approval-glass-ink);
}

body[data-active-view="approval"] main{
  padding:16px 0 0;
}

body[data-active-view="approval"] #view-approval{
  min-width:0;
}

body[data-active-view="approval"] #view-approval .approval-command-shell{
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  padding:20px;
  overflow:visible;
  border:1px solid var(--approval-glass-line);
  border-radius:30px;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(140deg,rgba(255,255,255,.30),rgba(199,217,236,.28) 46%,rgba(255,255,255,.18)),
    rgba(181,204,228,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 1px 0 0 rgba(255,255,255,.55),
    0 28px 72px rgba(1,12,29,.28);
  backdrop-filter:blur(24px) saturate(120%);
  -webkit-backdrop-filter:blur(24px) saturate(120%);
}

body[data-active-view="approval"] #view-approval .approval-command-shell::before{
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:
    radial-gradient(circle 290px at 92% 2%,rgba(255,255,255,.28),transparent 72%),
    linear-gradient(118deg,rgba(255,255,255,.07),transparent 42%);
  content:"";
  pointer-events:none;
}

body[data-active-view="approval"] #view-approval .approval-command-shell > *{
  position:relative;
  z-index:1;
}

body[data-active-view="approval"] #view-approval .cc-shell-header{
  align-items:center;
  min-width:0;
  padding:20px 22px;
  border:1px solid var(--approval-glass-line);
  border-radius:24px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.56),rgba(219,231,244,.42)),
    rgba(226,236,247,.48);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 16px 38px rgba(4,16,34,.14);
  backdrop-filter:blur(28px) saturate(118%);
  -webkit-backdrop-filter:blur(28px) saturate(118%);
}

body[data-active-view="approval"] #view-approval .cc-kicker{
  margin-bottom:8px;
  color:#23669c;
}

body[data-active-view="approval"] #view-approval .cc-shell-heading h2{
  color:var(--approval-glass-ink);
  font-size:clamp(32px,4vw,50px);
  font-weight:780;
  letter-spacing:-.055em;
}

body[data-active-view="approval"] #view-approval .cc-subtitle{
  color:var(--approval-glass-muted);
  font-weight:560;
}

body[data-active-view="approval"] #view-approval .daily-report-card{
  margin:0;
  padding:16px 18px;
  border:1px solid var(--approval-glass-line);
  border-radius:22px;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(132deg,rgba(255,255,255,.70),rgba(230,238,248,.58)),
    var(--approval-glass-panel-strong);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 14px 34px rgba(4,16,34,.13);
  backdrop-filter:blur(26px) saturate(116%);
  -webkit-backdrop-filter:blur(26px) saturate(116%);
}

body[data-active-view="approval"] #view-approval .daily-report-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  margin:0;
}

body[data-active-view="approval"] #view-approval .daily-report-head > div:first-child{
  display:grid;
  min-width:0;
  gap:4px;
}

body[data-active-view="approval"] #view-approval .daily-report-head h2{
  margin:0;
  color:var(--approval-glass-ink);
  font-weight:780;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}

body[data-active-view="approval"] #view-approval .daily-report-head p{
  margin:0;
  color:var(--approval-glass-muted);
}

body[data-active-view="approval"] #view-approval .daily-date-controls{
  display:grid;
  grid-template-columns:48px minmax(136px,1fr) 48px;
  gap:8px;
  width:272px;
  min-width:0;
}

body[data-active-view="approval"] #view-approval .daily-date-controls .btn{
  width:100%;
  min-width:0;
  min-height:48px;
  margin:0;
  padding:0 13px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:15px;
  color:var(--approval-glass-ink);
  background:rgba(242,247,253,.74);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 8px 20px rgba(8,25,48,.09);
  font-weight:780;
}

body[data-active-view="approval"] #view-approval .daily-date-controls #todayApprovalDayBtn,
body[data-active-view="approval"] #view-approval .daily-date-controls #todayApprovalDayBtn.active{
  border-color:var(--approval-glass-navy);
  color:#fff;
  background:var(--approval-glass-navy);
  box-shadow:0 9px 22px rgba(18,34,61,.18),inset 0 1px 0 rgba(255,255,255,.16);
}

body[data-active-view="approval"] .approval-day-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

body[data-active-view="approval"] .approval-day-metrics > div{
  position:relative;
  min-width:0;
  min-height:86px;
  padding:17px 18px 17px 22px;
  overflow:hidden;
  border:1px solid var(--approval-glass-line);
  border-radius:20px;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(132deg,rgba(255,255,255,.62),rgba(224,234,246,.47)),
    var(--approval-glass-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 13px 30px rgba(4,16,34,.12);
  backdrop-filter:blur(24px) saturate(118%);
  -webkit-backdrop-filter:blur(24px) saturate(118%);
}

body[data-active-view="approval"] .approval-day-metrics > div::before{
  position:absolute;
  inset:16px auto 16px 0;
  width:4px;
  border-radius:0 4px 4px 0;
  background:#c78a18;
  content:"";
}

body[data-active-view="approval"] .approval-day-metrics > div:nth-child(2)::before{background:#168d7d}
body[data-active-view="approval"] .approval-day-metrics > div:nth-child(3)::before{background:#d74352}

body[data-active-view="approval"] .approval-day-metrics small{
  color:var(--approval-glass-muted);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
}

body[data-active-view="approval"] .approval-day-metrics strong{
  color:var(--approval-glass-ink);
  font-size:30px;
  font-variant-numeric:tabular-nums;
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-card{
  display:grid;
  gap:14px;
  margin:0;
  padding:18px 20px;
  border:1px solid var(--approval-glass-line);
  border-radius:22px;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(135deg,rgba(255,255,255,.60),rgba(218,230,243,.45)),
    var(--approval-glass-panel);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 14px 34px rgba(4,16,34,.12);
  backdrop-filter:blur(26px) saturate(118%);
  -webkit-backdrop-filter:blur(26px) saturate(118%);
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-card summary{
  min-width:0;
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-card summary h2{
  margin:0;
  color:var(--approval-glass-ink);
  font-weight:760;
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-card summary p{
  margin:5px 0 0;
  color:var(--approval-glass-muted);
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-card summary::after{
  min-width:62px;
  padding:8px 13px;
  border:1px solid rgba(255,255,255,.88);
  color:var(--approval-glass-ink);
  background:rgba(246,250,255,.70);
  text-align:center;
}

body[data-active-view="approval"] #view-approval .approval-whatsapp-preview{
  border:1px solid var(--approval-glass-line);
  color:var(--approval-glass-ink);
  background:rgba(248,252,255,.66);
}

body[data-active-view="approval"] #approvalList{
  display:grid;
  grid-template-columns:minmax(0,1fr)!important;
  gap:18px;
  margin:0!important;
}

body[data-active-view="approval"] #approvalList .agenda-card{
  --approval-card-tone:var(--status-surface-ink,#266ea8);
  --approval-card-soft:var(--status-surface-bg,rgba(219,232,246,.72));
  position:relative;
  display:grid;
  gap:16px;
  width:100%;
  min-width:0;
  height:auto;
  padding:20px;
  overflow:visible;
  border:1px solid rgba(255,255,255,.94)!important;
  border-radius:26px;
  color:var(--approval-glass-ink)!important;
  background:
    linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.22) 48%,rgba(222,233,245,.42)),
    color-mix(in srgb,var(--approval-card-soft) 48%,rgba(225,235,247,.58))!important;
  box-shadow:
    inset 5px 0 0 var(--approval-card-tone),
    inset 0 1px 0 rgba(255,255,255,1),
    inset 1px 0 0 rgba(255,255,255,.68),
    0 18px 48px rgba(1,12,29,.22)!important;
  backdrop-filter:blur(30px) saturate(122%);
  -webkit-backdrop-filter:blur(30px) saturate(122%);
}

body[data-active-view="approval"] #approvalList .agenda-card::after{
  position:absolute;
  inset:2px;
  z-index:0;
  border:1px solid rgba(255,255,255,.48);
  border-radius:23px;
  content:"";
  pointer-events:none;
}

body[data-active-view="approval"] #approvalList .agenda-card > *{
  position:relative;
  z-index:1;
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row{
  display:grid;
  grid-template-columns:104px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-width:0;
  margin:0;
  padding:0 0 16px;
  border-bottom:1px solid rgba(255,255,255,.72);
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .timebox{
  min-width:0;
  min-height:74px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.88)!important;
  border-radius:18px;
  color:var(--approval-card-tone)!important;
  background:color-mix(in srgb,var(--approval-card-soft) 62%,rgba(255,255,255,.58))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
  text-align:center;
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .timebox strong{
  font-size:20px;
  font-variant-numeric:tabular-nums;
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .agenda-title{
  display:block;
  margin:0 0 6px;
  overflow:visible;
  color:var(--approval-glass-ink);
  font-size:clamp(18px,2vw,24px);
  font-weight:780;
  line-height:1.22;
  letter-spacing:-.025em;
  -webkit-line-clamp:unset;
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .agenda-meta{
  color:var(--approval-glass-muted);
  font-size:14px;
  line-height:1.45;
}

body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row > .badge{
  min-height:34px;
  padding:7px 12px;
  border:1px solid color-mix(in srgb,var(--approval-card-tone) 36%,rgba(255,255,255,.72));
  border-radius:999px;
  color:var(--approval-card-tone);
  background:color-mix(in srgb,var(--approval-card-soft) 74%,rgba(255,255,255,.62));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92);
  font-weight:850;
}

/* Ringkasan: delapan informasi selalu 4 x 2 agar simetris. */
body[data-active-view="approval"] #approvalList .approval-overview{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  border-radius:22px;
  background:
    linear-gradient(136deg,rgba(255,255,255,.46),rgba(214,227,242,.35)),
    rgba(228,237,247,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 12px 30px rgba(4,16,34,.10);
  backdrop-filter:blur(24px) saturate(116%);
  -webkit-backdrop-filter:blur(24px) saturate(116%);
}

body[data-active-view="approval"] #approvalList .approval-overview > summary{
  min-height:68px;
  padding:15px 17px;
  border:0;
  color:var(--approval-glass-ink);
  background:rgba(236,244,252,.46);
  transition:background .16s ease,box-shadow .16s ease;
}

body[data-active-view="approval"] #approvalList .approval-overview[open] > summary{
  border-bottom:1px solid rgba(255,255,255,.74);
  background:rgba(241,247,253,.54);
}

body[data-active-view="approval"] #approvalList .approval-overview > summary:hover,
body[data-active-view="approval"] #approvalList .approval-overview > summary:focus-visible{
  background:rgba(248,251,255,.64);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
}

body[data-active-view="approval"] #approvalList .approval-overview > summary > span{
  min-width:0;
  font-size:18px;
  font-weight:800;
  letter-spacing:-.015em;
}

body[data-active-view="approval"] #approvalList .approval-overview > summary small{
  margin-top:4px;
  color:var(--approval-glass-muted);
  font-size:12px;
  font-weight:680;
  letter-spacing:0;
}

body[data-active-view="approval"] #approvalList .approval-overview > summary::after{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.90);
  color:var(--approval-glass-ink);
  background:rgba(247,251,255,.64);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
}

body[data-active-view="approval"] #approvalList .approval-overview-body{
  display:grid;
  gap:14px;
  padding:16px;
}

body[data-active-view="approval"] #approvalList .approval-overview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
  gap:14px;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-summary-row{
  position:relative;
  min-width:0;
  min-height:88px;
  display:grid;
  align-content:start;
  gap:7px;
  padding:15px 16px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:17px;
  color:var(--approval-glass-ink);
  background:
    linear-gradient(138deg,rgba(255,255,255,.64),rgba(227,237,248,.43)),
    rgba(240,246,252,.54);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 8px 20px rgba(6,20,40,.08);
  overflow:visible;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-summary-row small{
  margin:0;
  color:var(--approval-glass-muted);
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
  line-height:1.3;
  text-transform:uppercase;
}

/* Nilai biasa dan nilai editable sengaja memakai metrik teks yang sama. */
body[data-active-view="approval"] #approvalList .approval-overview .approval-summary-row > div:not(.approval-inline-editor),
body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display{
  min-width:0;
  margin:0;
  color:var(--approval-glass-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:650;
  line-height:1.45;
  letter-spacing:0;
  overflow-wrap:anywhere;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display{
  width:100%;
  min-height:34px;
  display:block;
  padding:0 54px 0 0;
  border:0;
  background:transparent;
  text-align:left;
  cursor:pointer;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display > span:first-child{
  display:block;
  min-width:0;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-edit-cue{
  position:absolute;
  top:13px;
  right:13px;
  min-width:38px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.94);
  border-radius:999px;
  color:#285c8b;
  background:rgba(246,250,255,.76);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  text-align:center;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display:hover .approval-inline-edit-cue,
body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display:focus-visible .approval-inline-edit-cue{
  border-color:#5d8db8;
  color:#174c7c;
  background:#fff;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-editor{
  display:grid;
  gap:9px;
  min-width:0;
  margin-top:2px;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-editor[hidden]{display:none}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-editor :is(input,textarea,select){
  border:1px solid rgba(255,255,255,.95);
  color:var(--approval-glass-ink);
  background:rgba(250,252,255,.80);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-active-view="approval"] #approvalList .checklist-category-chips{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin:0;
}

body[data-active-view="approval"] #approvalList .checklist-category-chip{
  min-width:0;
  min-height:54px;
  padding:10px 12px;
  border-width:1px;
  border-color:color-mix(in srgb,var(--chip-border) 56%,rgba(255,255,255,.80));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.90);
}

body[data-active-view="approval"] #approvalList .approval-readiness-strip{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,28%);
  align-items:center;
  gap:16px;
  padding:14px 16px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:17px;
  color:var(--approval-glass-ink);
  background:rgba(241,247,253,.56);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.98);
}

body[data-active-view="approval"] #approvalList .approval-readiness-strip strong{
  color:var(--approval-glass-ink);
  font-size:14px;
}

body[data-active-view="approval"] #approvalList .approval-readiness-strip small{
  color:var(--approval-glass-muted);
}

body[data-active-view="approval"] #approvalList .approval-readiness-meter{
  width:100%;
  min-width:0;
  height:8px;
  background:rgba(119,139,165,.20);
}

body[data-active-view="approval"] #approvalList :is(
  .approval-collaboration-disclosure,
  .approval-direction,
  .approval-checklist-disclosure,
  .approval-reschedule-panel
){
  border:1px solid rgba(255,255,255,.88);
  color:var(--approval-glass-ink);
  background:rgba(237,244,251,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94);
}

body[data-active-view="approval"] #approvalList .approval-collaboration-disclosure > summary{
  color:var(--approval-glass-ink);
}

body[data-active-view="approval"] #approvalList .approval-collaboration-disclosure > summary small{
  color:var(--approval-glass-muted);
}

body[data-active-view="approval"] #approvalList .approval-decision-actions{
  display:block;
  width:100%;
  margin:0;
}

body[data-active-view="approval"] #approvalList .approval-decision-trigger{
  width:100%;
  min-height:52px;
  border:1px solid color-mix(in srgb,var(--approval-card-tone) 42%,rgba(255,255,255,.84));
  border-radius:17px;
  color:color-mix(in srgb,var(--approval-card-tone) 76%,var(--approval-glass-ink));
  background:
    linear-gradient(135deg,rgba(255,255,255,.60),rgba(255,255,255,.22)),
    color-mix(in srgb,var(--approval-card-soft) 68%,rgba(233,241,250,.64));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    0 10px 24px color-mix(in srgb,var(--approval-card-tone) 14%,transparent);
  font-weight:900;
}

body[data-active-view="approval"] #approvalList .approval-decision-trigger:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
}

/* Dark theme: foto tetap sama, permukaan kaca lebih gelap tanpa mengubah status. */
[data-theme="dark"] body[data-active-view="approval"],
body[data-theme="dark"][data-active-view="approval"]{
  --approval-glass-ink:#f3f7fd;
  --approval-glass-muted:#b2bfd1;
  --approval-glass-navy:#f1f6fd;
  --approval-glass-line:rgba(255,255,255,.30);
  --approval-glass-line-soft:rgba(255,255,255,.18);
  --approval-glass-panel:rgba(23,37,58,.60);
  --approval-glass-panel-strong:rgba(26,41,63,.74);
  --approval-glass-panel-soft:rgba(18,32,52,.50);
  background:
    linear-gradient(112deg,rgba(2,10,24,.91),rgba(4,23,43,.70) 48%,rgba(1,12,29,.88)),
    url("./landing/infrastructure-network.jpg") center/cover fixed;
}

body[data-theme="dark"][data-active-view="approval"] :is(
  .topbar,
  #view-approval .approval-command-shell,
  #view-approval .cc-shell-header,
  #view-approval .daily-report-card,
  .approval-day-metrics > div,
  #view-approval .approval-whatsapp-card,
  #approvalList .agenda-card,
  #approvalList .approval-overview,
  #approvalList .approval-overview .approval-summary-row
){
  color:var(--approval-glass-ink)!important;
  background:
    linear-gradient(138deg,rgba(255,255,255,.13),rgba(255,255,255,.035)),
    rgba(14,29,49,.62)!important;
}

body[data-theme="dark"][data-active-view="approval"] #view-approval :is(h2,p,small,strong),
body[data-theme="dark"][data-active-view="approval"] #approvalList :is(.agenda-title,.agenda-meta,.approval-inline-display){
  color:inherit;
}

@media(max-width:980px){
  body[data-active-view="approval"] #view-approval .approval-command-shell{padding:16px}
  body[data-active-view="approval"] #approvalList .agenda-card{padding:17px}
  body[data-active-view="approval"] #approvalList .checklist-category-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:700px){
  body[data-active-view="approval"] #app{padding:10px 10px 28px}
  body[data-active-view="approval"] main{padding-top:10px}
  body[data-active-view="approval"] #view-approval .approval-command-shell{
    gap:12px;
    padding:12px;
    border-radius:24px;
  }
  body[data-active-view="approval"] #view-approval .cc-shell-header{padding:17px;border-radius:19px}
  body[data-active-view="approval"] #view-approval .cc-shell-heading h2{font-size:34px}
  body[data-active-view="approval"] #view-approval .daily-report-head{grid-template-columns:1fr;gap:14px}
  body[data-active-view="approval"] #view-approval .daily-date-controls{width:100%}
  body[data-active-view="approval"] .approval-day-metrics{gap:9px}
  body[data-active-view="approval"] .approval-day-metrics > div{
    min-height:70px;
    display:grid;
    align-content:center;
    gap:5px;
    padding:12px 10px 12px 15px;
  }
  body[data-active-view="approval"] .approval-day-metrics small{font-size:8px}
  body[data-active-view="approval"] .approval-day-metrics strong{font-size:23px}
  body[data-active-view="approval"] #approvalList .agenda-card{
    gap:13px;
    padding:14px;
    border-radius:22px;
  }
  body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row{
    grid-template-columns:76px minmax(0,1fr);
    gap:12px;
    padding-bottom:13px;
  }
  body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row > .badge{
    grid-column:2;
    justify-self:start;
  }
  body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .timebox{
    min-height:66px;
    padding:8px;
  }
  body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .timebox strong{font-size:17px}
  body[data-active-view="approval"] #approvalList .agenda-card > .agenda-row .agenda-title{font-size:18px}
  body[data-active-view="approval"] #approvalList .approval-overview-body{padding:12px;gap:12px}
  body[data-active-view="approval"] #approvalList .approval-overview-grid{
    grid-template-columns:minmax(0,1fr);
    gap:11px;
  }
  body[data-active-view="approval"] #approvalList .approval-overview .approval-summary-row{
    min-height:0;
    padding:13px 14px;
  }
  body[data-active-view="approval"] #approvalList .approval-readiness-strip{grid-template-columns:1fr;gap:10px}
}

@media(max-width:430px){
  body[data-active-view="approval"] #view-approval .approval-command-shell{padding:9px}
  body[data-active-view="approval"] #view-approval .daily-date-controls{grid-template-columns:48px minmax(100px,1fr) 48px}
  body[data-active-view="approval"] #view-approval .approval-whatsapp-card{padding:15px}
  body[data-active-view="approval"] #approvalList .checklist-category-chips{grid-template-columns:minmax(0,1fr)}
}

/* Approval card corner cleanup (31 Jul 2026)
   Lapisan kilau global .agenda-card::before harus mengikuti radius kartu.
   Tanpa clipping, Safari menampilkan sudut compositing sebagai kotak. */
body[data-active-view="approval"] #approvalList .agenda-card{
  overflow:hidden;
  isolation:isolate;
  background-clip:padding-box;
}

body[data-active-view="approval"] #approvalList .agenda-card::before{
  border-radius:inherit;
}

body[data-active-view="approval"] #approvalList .agenda-card::after{
  background:none;
}

/* GLASS SHELL BOUNDARY — HEADER MANDIRI + BIDANG KOSONG TRANSPARAN (31 Jul 2026)
   Garis luar Agenda berhenti di Topbar. Shell Approval hanya menyisakan garis
   kaca; permukaan berisi informasi tetap memakai kartu masing-masing. */
body[data-active-view="agenda"] #app{
  width:100%;
  max-width:1500px;
  min-height:100vh;
  margin:0 auto;
  padding:14px 18px 36px;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body[data-active-view="agenda"] #app::before{
  display:none;
}

body[data-active-view="approval"] #view-approval .approval-command-shell,
body[data-theme="dark"][data-active-view="approval"] #view-approval .approval-command-shell{
  background:transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 1px 0 0 rgba(255,255,255,.52),
    0 20px 58px rgba(1,12,29,.22);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-active-view="approval"] #view-approval .approval-command-shell::before{
  background:none;
}

@media(max-width:680px){
  body[data-active-view="agenda"] #app{
    padding:10px 10px 28px;
  }
}

/* APPROVAL EDIT HITBOX — HANYA TOMBOL EDIT (31 Jul 2026)
   Nilai agenda tetap tampil sebagai teks biasa. Editor hanya boleh dibuka oleh
   kontrol Edit yang terlihat; hover/fokus pada nilai atau kartu tidak memberi
   affordance klik yang menyesatkan. */
body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display{
  cursor:default;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-edit-cue{
  cursor:pointer;
  font-family:inherit;
}

body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display:hover .approval-inline-edit-cue{
  border-color:rgba(255,255,255,.94);
  color:#285c8b;
  background:rgba(246,250,255,.76);
}

body[data-active-view="approval"] #approvalList .approval-overview button.approval-inline-edit-cue:hover,
body[data-active-view="approval"] #approvalList .approval-overview button.approval-inline-edit-cue:focus-visible{
  border-color:#5d8db8;
  color:#174c7c;
  background:#fff;
}

/* MOBILE REVAMP SAFETY — TOUCH, SAFE AREA, DAN VIEWPORT (31 Jul 2026)
   Kontrak data dan handler tetap sama. Lapisan ini hanya memastikan permukaan
   Home/Agenda/Detail/Approval nyaman disentuh dan tidak keluar layar ponsel. */
@media(max-width:980px){
  .nav-orb-menu,
  .nav-orb-menu:not(.ke-atas){
    position:fixed;
    right:auto;
    bottom:calc(84px + env(safe-area-inset-bottom));
    left:50%;
    top:auto;
    width:min(320px,calc(100vw - 24px));
    max-width:calc(100vw - 24px);
    transform:translateX(-50%) translateY(6px) scale(.96);
    transform-origin:bottom center;
  }

  .nav-orb-menu.terbuka,
  .nav-orb-menu:not(.ke-atas).terbuka{
    transform:translateX(-50%) translateY(0) scale(1);
  }

  .nav-orb-item{
    width:100%;
    min-width:0;
    min-height:44px;
  }
}

@media(max-width:700px){
  body[data-active-view="today"] .upcoming-event-pill{
    height:auto;
    min-height:44px;
  }

  body[data-active-view="today"] :is(
    .home-day-nav .btn,
    .home-agenda-heading .btn,
    .home-next-movement button
  ){
    min-width:44px;
    min-height:44px;
    height:auto;
  }

  #view-agenda :is(
    .chip-row .chip,
    .agenda-location-trigger,
    .badge.metric-action,
    .agenda-card-actions .btn
  ){
    min-height:44px;
  }

  #view-agenda .agenda-location-trigger{
    display:inline-flex;
    align-items:center;
    padding-block:10px;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-close{
    width:44px;
    height:44px;
  }

  #detailModal.detail-workspace-revamp-active :is(
    .detail-workspace-nav button,
    .detail-modal-actions .btn,
    .detail-workspace-checklist .work-bulk-category-bar .btn,
    .detail-workspace-checklist .detail-brief-list button,
    .detail-workspace-checklist button.detail-brief-chip,
    .detail-workspace-audit summary
  ){
    min-height:44px;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist .detail-brief-list button{
    display:inline-flex;
    align-items:center;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-checklist > .detail-brief-fold > summary{
    top:-57px;
    width:44px;
    height:44px;
    min-height:44px;
  }

  body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-edit-cue{
    top:8px;
    right:8px;
    min-width:44px;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  body[data-active-view="approval"] #approvalList .approval-overview .approval-inline-display{
    min-height:44px;
    padding-right:56px;
  }

  body[data-active-view="today"] .upcoming-event-pill,
  body[data-active-view="today"] .home-day-nav .btn,
  #view-agenda .agenda-location-trigger,
  #view-agenda .badge.metric-action,
  #detailModal.detail-workspace-revamp-active .detail-workspace-nav button,
  body[data-active-view="approval"] #approvalList .approval-inline-edit-cue{
    touch-action:manipulation;
  }
}

/* IPHONE / MOBILE BROWSER — DETAIL MODAL VISIBILITY GATE (31 Jul 2026)
   Pada layar <=640px, aturan workspace lama memberi display:block tanpa
   memeriksa .active. Safari lalu menampilkan kerangka Detail Agenda kosong
   sejak boot dan menutup seluruh aplikasi. Pertahankan kontrak modal:
   tersembunyi saat idle, tampil hanya setelah agenda benar-benar dibuka. */
@media(max-width:640px){
  #detailModal.detail-workspace-revamp-active:not(.active){
    display:none;
  }

  #detailModal.detail-workspace-revamp-active.active{
    display:block;
  }

  #detailModal.detail-workspace-revamp-active .detail-workspace-modal{
    height:100vh;
    height:100dvh;
  }
}

/* THE ARCHITECT — tombol susun otomatis di dalam kartu The Decision. */
.peta3-kep-susun{
  width:100%; margin-top:8px; padding:10px 14px; cursor:pointer;
  border-radius:var(--ui-r-pill); font:700 var(--fs-label)/1 var(--font-ui, system-ui);
  color:#dbeeff; background:rgba(10,132,255,.22); border:1px solid rgba(10,132,255,.5);
  transition:background .22s ease;
}
.peta3-kep-susun:hover{background:rgba(10,132,255,.34)}
.peta3-kep-ars{
  margin:9px 0 0; padding:8px 10px; border-radius:12px;
  font-size:var(--fs-micro); line-height:1.45;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.72);
}
.peta3-kep-ars.siap{background:rgba(48,209,88,.14); border-color:rgba(48,209,88,.4); color:#9be8b0}
.peta3-kep-ars.awas{background:rgba(255,159,10,.14); border-color:rgba(255,159,10,.42); color:#ffc46b}

/* ============================================================
   PETA 3.0 — kartu agenda kiri atas yang bisa dibuka-tutup
   (keputusan pemilik 1 Agu 2026)

   Menggantikan segmented empat-mode (Hari ini / Mingguan / Luar Kota /
   Luar Negeri) yang dicabut bersama modenya. Tombolnya memakai geometri dan
   bahan yang PERSIS SAMA dengan The Decision / Advance / THE LIVE supaya
   keduanya terbaca sebagai satu baris kontrol — hanya berlawanan sisi.
   ============================================================ */
.peta3-kiri{position:absolute; z-index:4; top:18px; left:18px;
  display:flex; align-items:center; gap:10px}
.peta3-kartu-btn{
  padding:10px 16px; border-radius:var(--ui-r-pill); cursor:pointer;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui); letter-spacing:.02em;
  color:#fff; background:rgba(16,24,38,.58); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 12px 30px rgba(4,10,20,.4);
  transition:background .22s ease, border-color .22s ease;
}
.peta3-kartu-btn:hover{background:rgba(26,38,58,.68)}
.peta3-kartu-btn.tutup{background:rgba(16,24,38,.4); color:rgba(255,255,255,.72)}

/* Kartu turun ke bawah tombolnya. 18px (atas) + 36px (tinggi tombol) + 12px. */
.peta3-panel{top:66px}

/* WAJIB, dan bukan kehati-hatian berlebihan: .peta3-panel memakai display:flex,
   dan aturan penulis mengalahkan `display:none` bawaan atribut [hidden]. Tanpa
   baris ini tombolnya menyala, aria-expanded berubah, dan kartunya TETAP
   TERLIHAT — persis kelas cacat `<svg hidden>` yang pernah mematikan zoom peta
   pada 29 Jul 2026. */
.peta3-panel[hidden]{display:none}

@media (max-width:760px){
  /* Di ponsel kartu menjadi lembar statis di bawah peta, jadi tombolnya ikut
     keluar dari lapisan mengambang supaya tidak menutupi peta. */
  .peta3-kiri{position:static; margin:12px 12px 0}
  .peta3-panel{top:auto}
}

/* ===== Bilah briefing DI DALAM kartu (1 Agu 2026) =====
   Live dan titik awal pindah ke dalam kartu atas permintaan pemilik. Inputnya
   sengaja kecil: isinya datang dari saran autocomplete, bukan diketik penuh,
   jadi lebar penuh hanya memakan ruang tanpa dipakai. Ia melebar saat difokus. */
/* order:-1 menaikkannya ke ATAS kartu tanpa memindahkan DOM-nya. Ia harus
   tetap berada di luar #peta3PanelIsi (yang ditulis ulang tiap render), tetapi
   di bawah daftar agenda ia jatuh di luar area gulir dan tak pernah terlihat.

   TANPA LATAR, DAN TANPA sticky. Versi sebelumnya lengket di atas dengan latar
   rgba(16,24,38,.92) supaya daftar yang tergulir tidak menembusnya. Akibatnya
   sebuah persegi gelap bersudut siku duduk di dalam kartu ber-radius 24px,
   lebih pekat daripada kartunya sendiri (.56) dan dengan blur menumpuk di atas
   blur kartu \u2014 terbaca sebagai bayangan kotor, bukan sebagai bilah.

   Menyamakan warnanya pun tidak bisa menyelamatkan: latar semi-transparan di
   atas latar semi-transparan selalu menghasilkan lapisan yang lebih pekat.
   Jadi latarnya dicabut, dan sticky ikut dicabut karena tanpa latar ia justru
   membiarkan daftar tergulir menembusnya. Konsekuensinya diterima sadar: pada
   hari yang sangat panjang, tombol Live ikut tergulir ke atas. */
.peta3-briefbar{order:-1;
  display:flex; align-items:flex-start; gap:8px; padding-bottom:10px;
  border-bottom:1px solid rgba(255,255,255,.14)}

/* SATU geometri dan SATU bahan untuk tombol maupun input.
   Sebelumnya keduanya diwarisi dari tempat asalnya yang berbeda: tombol dari
   bilah mengambang di atas peta (kaca gelap, tinggi dari padding), input dari
   medan formulir (putih transparan, tinggi tetap 34px). Di dalam kartu, dua
   bahasa itu berdampingan dan terbaca miring \u2014 tinggi berbeda 3px, isian
   berbeda, tepi berbeda.

   Tingginya DIKUNCI, bukan diturunkan dari padding: padding + line-height
   menghasilkan tinggi yang berubah begitu ukuran fontnya bergeser, dan dua
   elemen bersebelahan akan bergeser dengan laju berbeda.

   ANGKANYA 44px, DAN ITU BUKAN PILIHAN BEBAS. app.css memasang
   `input,select,textarea{min-height:44px}` \u2014 ukuran target sentuh minimum
   untuk seluruh aplikasi. Percobaan pertama saya menyetel 36px dan kalah
   diam-diam: min-height mengalahkan height, jadi inputnya tetap 44 sementara
   tombolnya menyusut, dan barisnya justru makin miring. Melawan aturan itu
   berarti mengecilkan target sentuh di tablet ajudan; yang benar adalah
   tombolnya yang menyesuaikan. */
.peta3-briefbar .peta3-live,
.peta3-briefbar .peta3-awal-input{
  height:44px; min-height:44px; box-sizing:border-box; border-radius:var(--ui-r-pill);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  color:#fff; letter-spacing:.02em;
}
.peta3-briefbar .peta3-live{
  flex:0 0 auto; padding:0 16px; backdrop-filter:none; -webkit-backdrop-filter:none;
  font:700 var(--fs-label)/1 var(--font-ui, system-ui); cursor:pointer;
}
.peta3-briefbar .peta3-live:hover{background:rgba(255,255,255,.12)}
.peta3-briefbar .peta3-live.aktif{
  background:rgba(10,132,255,.85); border-color:rgba(10,132,255,.9);
  box-shadow:0 4px 14px rgba(10,132,255,.35);
}

.peta3-awal{position:relative; display:flex; align-items:flex-start; flex:1 1 auto; min-width:0}
.peta3-awal-input{
  width:100%; min-width:0; padding:0 30px 0 14px;
  font:600 var(--fs-label)/1 var(--font-ui, system-ui);
}
.peta3-awal-input::placeholder{color:rgba(255,255,255,.45)}
.peta3-awal-input:focus{outline:none; border-color:rgba(120,190,255,.55);
  background:rgba(255,255,255,.1)}

/* Baris status autocomplete tetap DI DALAM alur \u2014 ia keterangan yang perlu
   dibaca, bukan hiasan. Yang diperbaiki hanya keselarasannya: dengan
   align-items:flex-start, tumbuhnya baris status mendorong ke bawah tanpa
   menggeser tombol dari sejajar dengan input. */
.peta3-awal .location-autocomplete{gap:4px}
.peta3-awal .location-autocomplete-status{
  padding-left:14px; font-size:10.5px; line-height:1.3;
  color:rgba(255,255,255,.5);
}
.peta3-awal-hapus{
  position:absolute; top:14px; right:11px; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; cursor:pointer; font-size:12px; line-height:1;
  color:rgba(255,255,255,.75); background:rgba(255,255,255,.16); border:0; padding:0;
}
.peta3-awal-hapus:hover{background:rgba(255,255,255,.26)}
.peta3-awal-hapus[hidden]{display:none}

/* ===== MODE BRIEFING: semua menutup, tinggal peta dan animasinya =====
   Briefing pagi DITONTON Menko, bukan dioperasikan. Setiap kontrol yang tetap
   terlihat hanya mengundang salah tekan di tengah paparan.

   Kendali keluar sengaja TIDAK ikut disembunyikan: ia pindah ke bilah simulasi
   (#peta3Sim), yang memang permukaan milik briefing. Menyembunyikan segalanya
   tanpa menyisakan satu pintu keluar adalah jebakan, bukan kesederhanaan. */
body.peta3-briefing .peta3-panel,
body.peta3-briefing .peta3-kiri,
body.peta3-briefing .peta3-atas,
body.peta3-briefing .peta3-kanan,
body.peta3-briefing .peta3-aksi,
body.peta3-briefing .peta3-terbang{display:none !important}
body.peta3-briefing .peta3-sim{z-index:6}
/* Pintu keluar briefing. Mengambang sendiri, TIDAK menumpang bilah simulasi:
   bilah itu bisa saja tak pernah muncul, dan pintu keluar yang bergantung pada
   fitur lain adalah pintu yang suatu hari terkunci. */
.peta3-brief-keluar{
  position:absolute; z-index:7; top:18px; right:18px; padding:10px 18px;
  border-radius:var(--ui-r-pill); cursor:pointer;
  font:700 var(--fs-label)/1 var(--font-ui, system-ui); color:#fff;
  background:rgba(255,69,58,.3); border:1px solid rgba(255,69,58,.55);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 12px 30px rgba(4,10,20,.45);
}
.peta3-brief-keluar:hover{background:rgba(255,69,58,.42)}
.peta3-brief-keluar[hidden]{display:none}

/* ===== Panel sisip titik di tengah briefing =====
   Mengambang di kiri saat briefing menyala. Muncul HANYA bila ada jeda lowong
   atau titik yang sudah disisipkan \u2014 panel yang selalu ada terbaca sebagai
   perkakas, padahal ini jalan keluar untuk keadaan tertentu. */
.peta3-sisip{position:absolute; z-index:7; top:18px; left:18px;
  width:min(340px, calc(100vw - 36px));
  display:flex; flex-direction:column; gap:6px; padding:12px 14px;
  border-radius:var(--radius-card); color:#fff;
  background:rgba(16,24,38,.72); border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(26px) saturate(165%); -webkit-backdrop-filter:blur(26px) saturate(165%);
  box-shadow:0 20px 50px rgba(4,10,20,.45)}
.peta3-sisip[hidden]{display:none}
.peta3-sisip-baris{display:flex; align-items:center; gap:8px; justify-content:space-between;
  font-size:var(--fs-caption); line-height:1.4; color:rgba(255,255,255,.82)}
.peta3-sisip-baris.terpasang{color:#64d2ff}
.peta3-sisip-tambah,.peta3-sisip-hapus{
  flex:0 0 auto; cursor:pointer; color:#fff; border-radius:var(--ui-r-pill);
  font:700 var(--fs-caption)/1 var(--font-ui, system-ui);
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2)}
.peta3-sisip-tambah{padding:7px 12px; white-space:nowrap}
.peta3-sisip-tambah:hover{background:rgba(255,255,255,.18)}
.peta3-sisip-hapus{width:22px; height:22px; padding:0; display:grid; place-items:center; font-size:13px}
.peta3-sisip-form[hidden]{display:none}
.peta3-sisip .peta3-awal-input{width:100%}
.peta3-sisip-nota{margin:2px 0 0; font-size:10.5px; line-height:1.35; color:rgba(255,255,255,.5)}

/* ===== THE FLYOVER — briefing pagi sebagai film drone 3D (2 Agu 2026) =====
   Panggung menutup SELURUH #peta3 di z 5: di atas basis 2D (0/1) dan panel
   kiri (4), di bawah pintu keluar briefing (7). Pintu keluar tidak boleh
   tertutup panggung — ia satu-satunya jalan pulang saat 3D bermasalah. */
#peta3FlyWadah{position:absolute; inset:0; z-index:5; background:#0b1220; overflow:hidden}
#peta3FlyWadah gmp-map-3d{position:absolute; inset:0; width:100%; height:100%; display:block}
/* Bilah simulasi 2D disembunyikan selama panggung 3D hidup: kendalinya milik
   mesin 2D (▶ memutar mobil DI BAWAH lapisan 3D — tak terlihat, membingungkan).
   Flyover membawa kendalinya sendiri di lower-third. */
body.peta3-flyover .peta3-sim{display:none !important}
.peta3-fly-veil{
  position:absolute; inset:0; z-index:3; display:grid; place-items:center;
  font:600 13px/1.4 system-ui; letter-spacing:.04em; color:rgba(255,255,255,.72);
  background:#0b1220;
}
/* Lower-third ala dokumenter: jam kecil di atas, keterangan di bawah. Berdiri
   di tempat bilah sim biasanya berdiri supaya mata tidak pindah rumah. */
/* KOLOM HUD (6 Agu 2026). Sidang, kartu agenda, dan bilah kontrol dulu
   masing-masing memakai posisi absolut dengan `bottom` sendiri (164px & 96px):
   menumbuhkan salah satunya berarti menghitung ulang yang lain dengan tangan,
   dan kartu agenda yang judulnya membungkus tingginya TIDAK bisa diketahui di
   muka. Satu kolom yang tumbuh ke atas membuat tabrakan mustahil. */
.peta3-fly-hud{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:96px; z-index:4;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  width:min(620px, calc(100vw - 32px));
}
.peta3-fly-bawah{
  display:flex; align-items:center; gap:14px;
  padding:10px 16px; border-radius:var(--ui-r-pill);
  background:rgba(12,18,30,.82); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  max-width:100%;
}
.peta3-fly-jam{font:700 11px/1 ui-monospace, monospace; letter-spacing:.08em; color:#64d2ff}
.peta3-fly-jam:empty{display:none}
/* Judul agenda TIDAK lagi dipotong. `text-overflow:ellipsis` pada 420 px lahir
   saat teks ini masih berdesakan di dalam bilah kontrol bersama tujuh tombol;
   di kartunya sendiri ia punya lebar penuh dan boleh membungkus. Dibatasi tiga
   baris supaya judul yang sangat panjang tidak mendorong bilah keluar layar —
   dan berbeda dengan ellipsis satu baris, tiga baris hampir selalu memuat
   judul agenda seutuhnya. */
.peta3-fly-ket{
  font:700 15px/1.35 system-ui; color:#fff;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden; overflow-wrap:anywhere;
}
.peta3-fly-kartu{
  width:100%; box-sizing:border-box;
  display:flex; flex-direction:column; gap:4px;
  padding:12px 16px; border-radius:16px;
  background:rgba(12,18,30,.82); backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.peta3-fly-kartu[hidden]{display:none}
.peta3-fly-rinci{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:2px 10px;
  margin:4px 0 0;
}
.peta3-fly-rinci > div{display:contents}
.peta3-fly-rinci > div[hidden]{display:none}
.peta3-fly-rinci dt{
  font:700 9.5px/1.6 system-ui; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.45); white-space:nowrap;
}
.peta3-fly-rinci dd{
  margin:0; min-width:0; font:500 12px/1.5 system-ui;
  color:rgba(255,255,255,.85); overflow-wrap:anywhere;
}
/* Tujuh tombol tidak muat pada lebar ponsel (~358px): sebelumnya barisnya
   terpotong di tepi bilah. Membungkus lebih baik daripada tombol yang
   tak bisa dijangkau — ini bukan baris angka yang wajib sebaris. */
.peta3-fly-ctl{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.peta3-fly-ctl button{
  min-width:44px; min-height:34px; padding:0 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10);
  color:#fff; font:700 13px/1 system-ui; cursor:pointer;
}
.peta3-fly-ctl button:hover{background:rgba(255,255,255,.2)}
/* Panggung vektor THE FLYOVER (2 Agu malam): wadah peta gedung-3D mengisi
   panggung penuh, di bawah veil (z 3) dan lower-third (z 4). */
#peta3FlyWadah .peta3-fly-vektor{position:absolute; inset:0}
/* Kenop laju THE FLYOVER (3 Agu 2026): per moda, mengikuti adegan yang
   ditonton. Label bukan tombol — ia indikator; yang bisa ditekan hanya −/+. */
.peta3-fly-laju{
  min-width:64px; text-align:center; align-self:center;
  font:700 12px/1 ui-monospace, monospace; letter-spacing:.02em;
  color:#cfe7ff; white-space:nowrap;
}
.peta3-fly-ctl button[disabled]{opacity:.35; cursor:default}
.peta3-fly-ctl button[disabled]:hover{background:rgba(255,255,255,.10)}

/* ===== THE GHOST — pita waktu hari alternatif (3 Agu 2026) =====
   Berdiri di slot bilah sim (bottom:96) — keduanya tak pernah tampil bersama:
   Ghost mati saat Live menyala. z 6 = di atas panel kiri (4), di bawah pintu
   keluar (7). */
.peta3-ghost-pita{
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:96px; z-index:6;
  width:min(860px, calc(100vw - 32px));
  padding:12px 14px 8px; border-radius:18px;
  background:rgba(12,18,30,.88); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.peta3-ghost-pita[hidden]{display:none}
.peta3-ghost-rel{position:relative; height:52px; touch-action:none;
  border-bottom:1px solid rgba(255,255,255,.10)}
.peta3-ghost-jam{position:absolute; bottom:-1px; transform:translateX(-50%);
  font:600 9.5px/1 ui-monospace, monospace; color:rgba(255,255,255,.38);
  padding-bottom:2px}
.peta3-ghost-blok{
  position:absolute; top:6px; height:34px; min-width:34px;
  display:flex; flex-direction:column; justify-content:center; gap:1px;
  padding:0 8px; border-radius:9px; border:1px solid rgba(100,210,255,.35);
  background:rgba(10,132,255,.28); color:#eaf6ff;
  font:600 10.5px/1.15 system-ui; text-align:left;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  cursor:grab; user-select:none;
}
.peta3-ghost-blok:active{cursor:grabbing}
.peta3-ghost-blok-jam{font:700 9px/1 ui-monospace, monospace; color:#9be2ff}
.peta3-ghost-blok.terkunci{cursor:not-allowed; opacity:.66;
  border-color:rgba(255,255,255,.22); background:rgba(255,255,255,.10)}
.peta3-ghost-blok.digeser{border-color:#64d2ff; background:rgba(100,210,255,.30);
  box-shadow:0 0 0 1px rgba(100,210,255,.5)}
.peta3-ghost-blok.seret{box-shadow:0 6px 18px rgba(100,210,255,.35); z-index:2}
.peta3-ghost-blok.keluar{opacity:.4; text-decoration:line-through}
.peta3-ghost-kartu{margin-top:8px; display:flex; flex-direction:column; gap:6px}
.peta3-ghost-delta{margin:0; font:600 12px/1.5 system-ui; color:rgba(255,255,255,.9)}
.peta3-ghost-delta .baik{color:#30d158}
.peta3-ghost-delta .buruk{color:#ff6961}
.peta3-ghost-delta .samar{color:rgba(255,255,255,.5)}
.peta3-ghost-ubah{margin:0; font:500 10.5px/1.5 ui-monospace, monospace;
  color:rgba(255,255,255,.62); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.peta3-ghost-aksi{display:flex; gap:8px; justify-content:flex-end}
.peta3-ghost-nota{margin:6px 0 0; font:500 10px/1.4 system-ui; color:rgba(255,255,255,.42)}
.peta3-ghost-tombol.aktif{background:rgba(100,210,255,.30); border-color:#64d2ff}
/* Briefing menutup seluruh permukaan lain — pita hantu ikut menyingkir. */
body.peta3-briefing .peta3-ghost-pita{display:none !important}

/* ===== THE VERDICT — meja putusan (3 Agu 2026) =====
   Kartu perkara di tengah layar, z 6 (di atas panel, di bawah pintu keluar
   briefing 7 — briefing menutup meja lewat peta3SinkronLive, bukan CSS). */
.peta3-verdict{position:absolute; inset:0; z-index:6; display:grid;
  place-items:center; background:rgba(6,10,18,.45); backdrop-filter:blur(3px)}
.peta3-verdict[hidden]{display:none}
.peta3-verdict-kartu{
  width:min(560px, calc(100vw - 40px));
  padding:20px 22px 16px; border-radius:20px;
  background:rgba(14,20,32,.96); backdrop-filter:blur(22px);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:10px;
}
.peta3-verdict-kicker{margin:0; font:700 10.5px/1 system-ui; letter-spacing:.14em;
  color:#9be2ff; text-transform:uppercase}
.peta3-verdict-kartu h3{margin:0; font:700 18px/1.3 system-ui; color:#fff}
.peta3-verdict-meta{margin:0; font:500 12px/1.5 system-ui; color:rgba(255,255,255,.62)}
.peta3-verdict-status{padding:1px 8px; border-radius:99px;
  background:rgba(255,214,10,.18); color:#ffd60a; font-weight:700}
.peta3-verdict-vonis{margin:0; font:600 13.5px/1.5 system-ui; color:rgba(255,255,255,.92);
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06);
  border-left:3px solid rgba(255,255,255,.25)}
.peta3-verdict-vonis.tingkat-hijau{border-left-color:#30d158}
.peta3-verdict-vonis.tingkat-kuning{border-left-color:#ffd60a}
.peta3-verdict-vonis.tingkat-merah{border-left-color:#ff453a}
.peta3-verdict-syarat{margin:0; padding-left:20px;
  font:500 12px/1.7 ui-monospace, monospace; color:#ffe28a}
.peta3-verdict-nota{margin:0; font:500 10.5px/1.4 system-ui; color:rgba(255,255,255,.45)}
.peta3-verdict-galat{margin:0; font:600 12px/1.4 system-ui; color:#ff6961}
.peta3-verdict-aksi{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.peta3-verdict-aksi .peta3-mini.bahaya{background:rgba(255,69,58,.22);
  border-color:rgba(255,69,58,.5)}
.peta3-verdict-aksi .peta3-mini.bahaya:hover{background:rgba(255,69,58,.34)}
.peta3-verdict-kaki{margin:2px 0 0; font:500 10px/1.5 system-ui;
  color:rgba(255,255,255,.4)}
.peta3-verdict-tombol.aktif{background:rgba(155,226,255,.28); border-color:#9be2ff}

/* ===== THE PULSE — jantung Peta 3.0, Sesi 1 (3 Agu 2026) ===== */
/* Strip SEKARANG di puncak panel: kartu kaca kecil yang berdenyut. */
.peta3-pulse-strip{margin:10px 0 2px; padding:11px 14px; border-radius:14px;
  background:rgba(18,33,58,.72); border:1px solid rgba(100,210,255,.18)}
.peta3-pulse-kicker{display:flex; align-items:center; gap:7px; margin:0;
  font:700 10px/1.4 system-ui; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.5)}
.peta3-pulse-titik{width:8px; height:8px; border-radius:50%; background:#30d158;
  animation:peta3PulseDenyut 1.6s ease-in-out infinite}
.peta3-pulse-utama{margin:4px 0 0; font:700 19px/1.25 system-ui; color:#fff}
.peta3-pulse-sub{margin:2px 0 0; font:500 13px/1.4 system-ui; color:rgba(255,255,255,.72)}
.peta3-pulse-nota{margin:6px 0 0; font:500 10px/1.4 system-ui; color:rgba(255,255,255,.4)}
@keyframes peta3PulseDenyut{
  0%,100%{transform:scale(1); opacity:.8}
  50%{transform:scale(1.35); opacity:1}}
/* Komet di peta: titik proyeksi "menurut rencana" yang bernapas di GPU.
   position:absolute wajib — ia anak pane OverlayView Google Maps. */
.peta3-pulse-komet{position:absolute; width:16px; height:16px; border-radius:50%;
  background:#eaf6ff; border:3px solid #64d2ff;
  box-shadow:0 0 12px 4px rgba(100,210,255,.55);
  animation:peta3PulseDenyut 1.8s ease-in-out infinite; pointer-events:auto}
.peta3-pulse-komet.udara{border-color:#9be2ff;
  box-shadow:0 0 14px 5px rgba(155,226,255,.6)}
/* Gerak dihormati seperlunya: pengguna yang meminta reduksi gerak mendapat
   komet & titik yang diam — posisinya tetap benar, hanya tak berdenyut. */
@media (prefers-reduced-motion: reduce){
  .peta3-pulse-komet, .peta3-pulse-titik{animation:none}}
/* Sesi 2: napas di baris penghitung + fase baris agenda. Fase MELENGKAPI
   warna risiko (bahaya/waspada), tidak menggantikannya. */
.peta3-pulse-napas{color:#7ae0a1}
.peta3-agenda-baris.peta3-pulse-lalu{opacity:.55}
.peta3-agenda-baris.peta3-pulse-kini{
  box-shadow:0 0 0 1.5px rgba(100,210,255,.55), 0 0 10px rgba(100,210,255,.22)}

/* ===== SIDANG TERBANG — Verdict × Flyover (3 Agu 2026) ===== */
/* Kartu vonis di lower-third film: di atas bilah kendali, di bawah langit.
   PERBAIKAN 5 Agu 2026 (audit besar): "di atas bilah kendali" dulu hanya benar
   soal z-index — kedua permukaan sama-sama `bottom:96px`, jadi kartu vonis
   (z 6) menumpuk TEPAT di atas bilah kendali film (z 4) dan mengubur ⏸, 2D,
   picker mode, picker panggung, serta kenop laju. Sidang mencegat pada
   perpindahan adegan PERTAMA (3,2 detik sesudah film mulai) untuk siapa pun
   yang punya wewenang memutus dan punya satu saja agenda Draft hari itu —
   yaitu keadaan normal pemilik. Yang terlihat: film membuka, berhenti, dan
   seluruh tombolnya lenyap. Kartu kini berdiri DI ATAS bilah itu, bukan di
   atasnya dalam arti lapisan. 96px + tinggi bilah (~54px) + jarak nafas. */
.peta3-fly-sidang{width:100%; z-index:6}
.peta3-fly-sidang[hidden]{display:none}
.peta3-sidang-kartu{padding:14px 16px; border-radius:16px;
  background:rgba(10,16,28,.86); border:1px solid rgba(255,214,10,.28);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; display:flex; flex-direction:column; gap:6px}
.peta3-sidang-kicker{margin:0; font:700 10px/1.4 system-ui;
  letter-spacing:.12em; color:#ffd60a}
.peta3-sidang-kartu h3{margin:0; font:700 16px/1.3 system-ui; color:#fff}
.peta3-sidang-meta{margin:0; font:500 11.5px/1.4 system-ui; color:rgba(255,255,255,.65)}
.peta3-sidang-vonis{margin:0; font:600 13px/1.45 system-ui}
.peta3-sidang-vonis.tingkat-hijau{color:#7ae0a1}
.peta3-sidang-vonis.tingkat-kuning{color:#ffd60a}
.peta3-sidang-vonis.tingkat-merah{color:#ff6961}
.peta3-sidang-vonis.tingkat-abu{color:rgba(255,255,255,.6)}
.peta3-sidang-syarat{margin:0; padding-left:18px;
  font:500 12px/1.5 system-ui; color:rgba(255,255,255,.8)}
.peta3-sidang-nota{margin:0; font:500 10.5px/1.4 system-ui; color:rgba(255,255,255,.45)}
.peta3-sidang-galat{margin:0; font:600 12px/1.4 system-ui; color:#ff6961}
.peta3-sidang-aksi{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.peta3-sidang-aksi .peta3-mini.bahaya{background:rgba(255,69,58,.22);
  border-color:rgba(255,69,58,.5)}
.peta3-sidang-aksi .peta3-mini.bahaya:hover{background:rgba(255,69,58,.34)}
.peta3-sidang-kaki{margin:2px 0 0; font:500 10px/1.5 system-ui;
  color:rgba(255,255,255,.4)}

/* ===== KARTU INTERVENSI — THE PULSE Sesi 3 (3 Agu 2026) ===== */
/* Mengambang di kanan-bawah peta, di atas bilah aksi; amber = peringatan
   yang membawa jalan keluar, bukan sekadar alarm. */
.peta3-intervensi{position:absolute; right:14px; bottom:96px; z-index:7;
  width:min(430px, calc(100vw - 28px))}
.peta3-intervensi-kartu{padding:13px 15px; border-radius:16px;
  background:rgba(16,20,14,.9); border:1px solid rgba(250,199,117,.4);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  color:#fff; display:flex; flex-direction:column; gap:6px}
.peta3-intervensi-kicker{margin:0; font:700 10px/1.4 system-ui;
  letter-spacing:.12em; color:#FAC775}
.peta3-intervensi-kartu h3{margin:0; font:700 15px/1.35 system-ui; color:#fff}
.peta3-intervensi-meta{margin:0; font:600 12.5px/1.4 system-ui; color:#ffd60a}
.peta3-intervensi-usul{margin:0; font:500 12px/1.4 system-ui; color:rgba(255,255,255,.75)}
.peta3-intervensi-syarat{margin:0; padding-left:18px;
  font:500 12px/1.5 system-ui; color:rgba(255,255,255,.85)}
.peta3-intervensi-gagal{margin:0; font:500 12px/1.5 system-ui; color:rgba(255,255,255,.7)}
.peta3-intervensi-galat{margin:0; font:600 12px/1.4 system-ui; color:#ff6961}
.peta3-intervensi-aksi{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.peta3-intervensi-kaki{margin:2px 0 0; font:500 10px/1.5 system-ui;
  color:rgba(255,255,255,.4)}

/* ===== PRA-DENYUT — THE PULSE Sesi 4 (3 Agu 2026) ===== */
/* Vonis hari depan di strip yang sama; warna mengikuti tingkatnya. */
.peta3-pulse-titik.pra{background:#FAC775; animation-duration:2.4s}
.peta3-pulse-utama.pra-muat{color:#7ae0a1}
.peta3-pulse-utama.pra-tidak_muat{color:#ff6961}
.peta3-pulse-utama.pra-belum_utuh{color:#FAC775}
.peta3-pulse-utama.pra-belum_bisa{color:rgba(255,255,255,.65)}
/* Chip ⚖ kotak vonis di baris penghitung — tombol, bukan angka mati. */
.peta3-pulse-vonis{font:600 12px/1.2 system-ui; color:#ffd60a;
  background:rgba(255,214,10,.12); border:1px solid rgba(255,214,10,.35);
  border-radius:999px; padding:4px 10px; cursor:pointer}
.peta3-pulse-vonis:hover{background:rgba(255,214,10,.22)}
/* Lipatan agenda lampau: baris ringkas + baris/detail yang tersembunyi. */
.peta3-pulse-terlipat{display:none}
.peta3-pulse-lipat{display:block; width:100%; text-align:left; margin:0 0 6px;
  font:500 11.5px/1.4 system-ui; color:rgba(255,255,255,.55);
  background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.18);
  border-radius:10px; padding:6px 10px; cursor:pointer}
.peta3-pulse-lipat:hover{background:rgba(255,255,255,.1)}

/* ===== THE INTELLIGENCE — lembar brief per-agenda, Fase 1 (3 Agu 2026) ===== */
/* Overlay panel (pola .peta3-verdict) dengan kartu yang BISA DIGULIR: lembar
   berisi ringkasan/TOR/tamu/catatan bisa panjang, geometri verdict tidak cukup. */
.peta3-intel{position:absolute; inset:0; z-index:7; display:grid;
  place-items:center; background:rgba(6,10,18,.45); backdrop-filter:blur(3px)}
.peta3-intel[hidden]{display:none}
.peta3-intel-kartu{
  width:min(560px, calc(100vw - 40px));
  max-height:min(78vh, 640px); overflow:auto;
  padding:20px 22px 16px; border-radius:20px;
  background:rgba(14,20,32,.96); backdrop-filter:blur(22px);
  border:1px solid rgba(133,183,235,.28);
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  display:flex; flex-direction:column; gap:10px;
}
.peta3-intel-kicker{margin:0; font:700 10.5px/1 system-ui; letter-spacing:.14em;
  color:#85b7eb; text-transform:uppercase}
.peta3-intel-kartu h3{margin:0; font:700 18px/1.3 system-ui; color:#fff}
.peta3-intel-meta{margin:0; font:500 12px/1.5 system-ui; color:rgba(255,255,255,.62)}
.peta3-intel-status{margin:0; align-self:flex-start; padding:2px 10px; border-radius:99px;
  font:700 10.5px/1.6 system-ui; letter-spacing:.06em}
.peta3-intel-status.draf{background:rgba(255,214,10,.16); color:#ffd60a}
.peta3-intel-status.sah{background:rgba(48,209,88,.16); color:#30d158}
.peta3-intel-isi{display:flex; flex-direction:column; gap:8px}
.peta3-intel-ringkasan{margin:0; font:500 13.5px/1.6 system-ui; color:rgba(255,255,255,.92);
  padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.06);
  border-left:3px solid #85b7eb}
.peta3-intel-kicker2{margin:4px 0 0; font:700 10px/1 system-ui; letter-spacing:.12em;
  color:rgba(255,255,255,.5); text-transform:uppercase}
.peta3-intel-daftar{margin:0; padding-left:20px; font:500 12.5px/1.7 system-ui;
  color:rgba(255,255,255,.85)}
.peta3-intel-daftar.kurang{color:#ffe28a}
.peta3-intel-tamu{padding:8px 12px; border-radius:12px; background:rgba(133,183,235,.08);
  border:1px solid rgba(133,183,235,.18); font:500 12.5px/1.5 system-ui; color:rgba(255,255,255,.9)}
.peta3-intel-tamu small{display:block; margin-top:2px; color:rgba(255,255,255,.6)}
.peta3-intel-tunggu{margin:0; font:600 12.5px/1.5 system-ui; color:#85b7eb}
.peta3-intel-kosong{margin:0; font:500 12.5px/1.6 system-ui; color:rgba(255,255,255,.6)}
.peta3-intel-galat{margin:0; font:600 12px/1.5 system-ui; color:#ff6961}
.peta3-intel-aksi{display:flex; gap:8px; flex-wrap:wrap; margin-top:2px}
.peta3-intel-aksi .peta3-mini.sahkan{background:rgba(48,209,88,.2);
  border-color:rgba(48,209,88,.5)}
.peta3-intel-aksi .peta3-mini.sahkan:hover{background:rgba(48,209,88,.32)}
.peta3-intel-kaki{margin:2px 0 0; font:500 10px/1.5 system-ui; color:rgba(255,255,255,.4)}
.peta3-mini.intel{border-color:rgba(133,183,235,.45)}

/* ===== THE INTELLIGENCE Fase 2-3 — berkas dibaca + profil tamu (3 Agu 2026) ===== */
/* HUKUM NOL TAUTAN: sumber internet dirender sebagai teks biasa, bukan <a>. */
.peta3-intel-dibaca{margin:0; padding-left:18px; list-style:none;
  font:500 11.5px/1.6 system-ui; color:rgba(255,255,255,.7)}
.peta3-intel-dibaca li.ok{color:rgba(159,225,203,.85)}
.peta3-intel-dibaca li.gagal{color:rgba(255,255,255,.66)}
/* Terbaca SEBAGIAN — bukan hijau, bukan abu. Dokumen yang terpotong adalah
   peringatan: rangkumannya benar, tetapi hanya atas bagian yang terbaca. */
.peta3-intel-dibaca li.sebagian{color:rgba(255,214,10,.92)}
.peta3-intel-dibaca li small{color:rgba(255,226,138,.75)}
.peta3-intel-tamu.profil{display:flex; flex-direction:column; gap:3px}
.peta3-intel-tamu.profil.tidak_ditemukan{opacity:.75; border-style:dashed}
.peta3-intel-yakin{align-self:flex-start; padding:1px 8px; border-radius:99px;
  font:700 9.5px/1.7 system-ui; letter-spacing:.08em; text-transform:uppercase}
.peta3-intel-yakin.cocok{background:rgba(48,209,88,.16); color:#30d158}
.peta3-intel-yakin.ragu{background:rgba(255,214,10,.16); color:#ffd60a}
.peta3-intel-yakin.tidak_ditemukan{background:rgba(255,255,255,.1); color:rgba(255,255,255,.6)}
.peta3-intel-tamu small.catatan{color:#ffe28a}
.peta3-intel-sumber{margin-top:2px; font:500 10.5px/1.5 ui-monospace, monospace;
  color:rgba(133,183,235,.85)}
.peta3-intel-nota{margin:0; font:500 10.5px/1.4 system-ui; color:rgba(255,255,255,.45)}

/* THE INTELLIGENCE Fase 4b — tombol lembar di strip PULSE (3 Agu 2026). */
.peta3-pulse-brief{margin-top:8px; border-color:rgba(133,183,235,.45)}

/* ===== THE FLYOVER — picker mode film & panggung (3 Agu 2026 malam) ===== */
.peta3-fly-ctl [data-fly-mode], .peta3-fly-ctl [data-fly-gaya]{
  font-size:12px; padding:4px 10px; white-space:nowrap}

/* ===== PERBAIKAN UI/UX PANEL PETA 3.0 (4 Agu 2026, laporan pemilik) ===== */
/* Tiga keluhan, satu akar yang sama: geometri panel dirancang untuk kolom
   lebar, lalu dipakai di kolom sempit. Yang diperbaiki BUKAN isinya —
   melainkan cara ia melipat saat ruang menyempit. */

/* 1) AKSI KARTU AGENDA: dari baris flex yang MELUBER jadi kisi seragam.
   `display:flex` tanpa wrap membuat tombol keenam terpotong di tepi kartu
   (pemilik melihat "Kep…"), dan karena lebar tiap tombol mengikuti panjang
   katanya, barisnya tak pernah rata. Kisi auto-fit memberi SATU lebar untuk
   semua tombol, membungkus sendiri saat sempit, dan tepi kanannya lurus.
   minmax 104px = muat "Detail agenda" dua baris tanpa memotong huruf. */
.peta3-agenda-aksi{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr));
  gap:6px; margin-top:6px; align-items:stretch;
}
.peta3-agenda-aksi .peta3-mini{
  width:100%; min-height:34px; padding:6px 8px; text-align:center;
  display:inline-flex; align-items:center; justify-content:center;
  line-height:1.2; hyphens:auto;
}
/* Blok "Menuju ke sini" adalah PEMBUKA daftar arah, bukan aksi sejajar —
   ia berdiri satu baris penuh di bawah kisi supaya tidak ikut menyempit. */
.peta3-agenda-detail .peta3-arah{margin-top:6px}
.peta3-agenda-detail .peta3-arah .peta3-mini.arah{width:100%}

/* 2) BILAH BRIEFING BOLEH MELIPAT. Sebelumnya satu baris flex tanpa wrap:
   input titik awal ditekan sampai placeholder-nya sendiri terpotong jadi
   "Titik awa". Kolom sempit adalah keadaan normal panel ini, bukan kecelakaan
   — jadi bilahnya yang mengalah, dan input mengambil satu baris penuh saat
   tombol tidak lagi muat di sebelahnya. */
.peta3-briefbar{flex-wrap:wrap; row-gap:8px}
.peta3-briefbar .peta3-awal{flex:1 1 220px; min-width:200px}

/* 3) SARAN LOKASI: kartu putih padat, tidak menumpang latar apa pun.
   Daftar ini hidup di <body> (position:fixed) dan melintas di atas panel kaca;
   bila latarnya ikut transparan, teks panel di belakangnya tembus dan terbaca
   seperti tulisan bertumpuk. Latar & bayangannya dikunci di sini, dan lencana
   sumber boleh turun baris supaya tidak berdesakan dengan nama tempat. */
.location-autocomplete-list{
  background:var(--bg, #fff); isolation:isolate; z-index:520;
  box-shadow:0 20px 52px rgba(4,10,20,.5);
}
.location-autocomplete-heading{flex-wrap:wrap; row-gap:3px}
.location-autocomplete-option{min-height:auto; padding:9px 11px}
.location-autocomplete-option small{line-height:1.35; overflow-wrap:anywhere}
/* Dua saran berturut-turut tanpa pemisah terbaca sebagai satu blok teks —
   garis tipis di antaranya memisahkan "nama tempat" dari "nama tempat
   berikutnya", bukan dari alamatnya sendiri. */
.location-autocomplete-option + .location-autocomplete-option{
  border-top:1px solid var(--line, rgba(15,23,42,.12)); border-radius:0
}
/* Tombol terakhir yang tersisa sendirian di baris ganjil (mis. "Keputusan"
   setelah empat tombol) melebar penuh — kotak menggantung di satu sisi
   membuat kartu terbaca miring, dan itu keluhan yang sama persis. */
.peta3-agenda-aksi .peta3-mini:last-child:nth-child(odd){grid-column:1 / -1}

/* ===== PRATINJAU MULTI-VERSI SUBSTANSI MENKO (6 Agu 2026) =====
   Bar tab versi di reader dokumen: satu tombol per versi unggahan (terbaru
   paling kiri & aktif secara baku). Meniru rasa strip lampiran R3 tetapi
   berbentuk TAB — tepat satu yang aktif; klik memuat ulang pratinjau in-app,
   tidak pernah mengunduh otomatis. Bar menggulir horizontal di layar sempit
   supaya riwayat panjang tidak mendorong tinggi modal. */
.link-reader-version-tabs{
  display:flex;
  align-items:center;
  gap:var(--ui-2);
  margin:2px 0 10px;
  padding:var(--ui-25) var(--ui-3);
  border:1px solid var(--line,#e2e8f0);
  border-radius:var(--radius-control);
  background:var(--panel,#fff);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.link-reader-version-tab{
  flex:0 0 auto;
  appearance:none;
  border:1px solid var(--line,#e2e8f0);
  border-radius:999px;
  background:transparent;
  color:var(--muted,#64748b);
  font:inherit;
  font-size:var(--fs-label);
  font-weight:700;
  padding:6px 12px;
  cursor:pointer;
  white-space:nowrap;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.link-reader-version-tab:hover{color:var(--ink,#0f172a); border-color:var(--muted,#94a3b8)}
.link-reader-version-tab.is-active{
  background:var(--accent,#2563eb);
  border-color:var(--accent,#2563eb);
  color:#fff;
}
.link-reader-version-tab.is-active:hover{color:#fff}
/* Judul baris versi (4 Sep 2026) — kembar gaya .link-reader-attachments-title
   (app-patches-1.css) supaya dua baris chip bersebelahan itu terbaca sebagai DUA
   hal berbeda: baris ini memilih versi untuk DIPRATINJAU, baris lampiran di
   bawahnya MENGUNDUH. flex-shrink dimatikan: wadahnya menggulir horizontal, dan
   judul yang ikut menyusut akan hilang lebih dulu justru saat layarnya sempit. */
.link-reader-version-title{
  flex:0 0 auto;
  font-size:var(--fs-label);
  font-weight:850;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted,#64748b);
  margin-right:2px;
}
/* Ikon aksi chip lampiran R3: panah bawah = unduh, panah serong = buka keluar. */
.link-reader-attachments .link-reader-attach-icon{
  margin-right:5px;
  font-weight:700;
  opacity:.7;
}

/* ===== TAB TERKUNCI — LAYAR TERKUNCI KALENDER & UTILITAS TOOLS (6 Agu 2026) =====
   Keputusan pemilik: SEMUA jenjang melihat tab Kalender dan Tools; yang peran
   profilnya belum berwenang membuka LAYAR TERKUNCI yang jujur — bukan layar
   kosong, bukan toast penolakan. Panel ini hanya memuat TEKS STATIS (kontrak
   lintas platform, lihat LOCKED_VIEW_COPY di assets/app.js): nol daftar agenda,
   nol hitungan. Warna teks memakai var(--ink) — token --text TIDAK ADA di sistem
   ini dan akan ditolak scripts/test-ui-tokens.js. */
.view-locked-slot[hidden]{display:none}
.view-locked-panel{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:var(--ui-2);
  max-width:560px;
  margin:var(--ui-5) auto;
  padding:var(--ui-6) var(--ui-5);
  border:1px solid var(--line,#e2e8f0);
  border-radius:var(--radius-inner);
  background:var(--panel,#fff);
  color:var(--ink,#0f172a);
}
.view-locked-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:var(--ui-1);
  border-radius:999px;
  border:1px solid var(--line,#e2e8f0);
  background:var(--surface,#f1f5f9);
  font-size:22px;
  line-height:1;
}
.view-locked-title{
  margin:0;
  color:var(--ink,#0f172a);
  font-size:var(--fs-heading);
  font-weight:var(--fw-heavy);
}
.view-locked-text{
  margin:0;
  color:var(--muted,#64748b);
  font-size:var(--fs-body);
  line-height:1.55;
}
/* Kalimat pertama adalah penjelasan APA yang terkunci — dibedakan agar alasan
   ("peran Anda belum mencakup") dan jalan keluar ("minta Owner") terbaca sebagai
   lanjutan, bukan tiga paragraf setara. */
.view-locked-text:first-of-type{color:var(--ink,#0f172a)}
@media(max-width:640px){
  .view-locked-panel{margin:var(--ui-3) auto; padding:var(--ui-5) var(--ui-4)}
}
/* Chip "Akses Saya" untuk tab yang tampil TAPI terkunci — dibedakan dari tab yang
   benar-benar terbuka supaya panel itu tidak menjanjikan akses yang tak ada. */
.legend-chip.is-locked{
  color:var(--muted,#64748b);
  border-style:dashed;
  opacity:.85;
}

/* Rujuk-silang tamu dari internet (Menko 7 Agu 2026) — WAJIB terlihat berbeda dari
   fakta berkas resmi. Nada peringatan lembut, bukan alarm: informasinya berguna,
   hanya asalnya yang perlu disadari pembaca. */
.peta3-intel-tamu.dari-internet{
  border-left:2px solid var(--warning-border);
  padding-left:8px;
}
.peta3-intel-tamu .peta3-intel-asal{
  display:block;
  margin-top:2px;
  font-size:11px;
  letter-spacing:.01em;
  opacity:.72;
  font-style:italic;
}

/* Tahapan menunggu lembar brief (7 Agu 2026) — menunggu terasa berjalan, bukan
   menggantung. Tahap aktif berdenyut lembut; yang sudah lewat meredup tapi tetap
   terbaca supaya pengguna melihat SEJAUH MANA prosesnya, bukan sekadar "sedang sibuk". */
.peta3-intel-tahapan{
  list-style:none;
  margin:10px 0 0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.peta3-intel-tahap{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:8px;
  align-items:baseline;
  font-size:13px;
  line-height:1.35;
  transition:opacity .25s ease;
}
.peta3-intel-tahap .tanda{ text-align:center; font-size:12px; }
/* KEREDUPAN DIBUAT DENGAN WARNA, BUKAN OPACITY (6 Agu 2026, laporan pemilik:
   "prosesnya, ga keliatan tulisannya"). Sebabnya menumpuk tiga lapis, di atas
   latar kartu rgba(14,20,32,.96):
     selesai  opacity .5     -> kontras ~4,9:1  (pas-pasan)
     nanti    opacity .32    -> kontras ~2,7:1  (di bawah ambang baca)
     small    .32 x .7 = .22 -> kontras ~1,9:1  (praktis tak terlihat)
   `opacity` pada <li> MEWARISI ke seluruh anaknya lalu DIKALIKAN lagi oleh
   opacity anaknya sendiri — itulah yang membuat baris nama dokumen paling
   parah, padahal justru baris itu yang membuat progresnya terasa nyata.
   Hierarki tetap ada — lewat warna, ukuran, dan tebal huruf — tetapi lantainya
   dinaikkan sampai teks paling redup pun tetap di atas 4,5:1. */
.peta3-intel-tahap small{
  grid-column:2;
  display:block;
  margin-top:1px;
  font-size:11px;
  opacity:1;
  color:inherit;
  /* Hierarki dari UKURAN, bukan dari keredupan. Tanpa ini nama dokumen
     mewarisi font-weight:600 milik baris aktif dan tampak sepenting judul
     tahapnya. */
  font-weight:400;
}
.peta3-intel-tahap.selesai{ opacity:1; color:rgba(255,255,255,.72); }
/* Centang di atas latar GELAP: #16a34a hanya ~3,5:1 di sini — terlihat, tetapi
   tidak terbaca. Hijau terang dipakai supaya penandanya ikut jelas. */
.peta3-intel-tahap.selesai .tanda{ color:#4ade80; }
.peta3-intel-tahap.nanti{ opacity:1; color:rgba(255,255,255,.58); }
.peta3-intel-tahap.aktif{ opacity:1; color:#fff; font-weight:600; }
.peta3-intel-tahap.aktif .tanda{ animation:peta3IntelDenyut 1.5s ease-in-out infinite; }
@keyframes peta3IntelDenyut{
  0%, 100%{ opacity:.45; }
  50%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .peta3-intel-tahap.aktif .tanda{ animation:none; opacity:1; }
}

/* Event Kalender berulang tahunan — kontrolnya ringan dan penandanya menumpang
   pada kartu/pita yang sudah ada. Tidak ada animasi, filter, atau layout baru di
   renderer kalender agar scroll dan refresh-rate tetap sama. */
/* 13 Sep 2026: kotak biru + checkbox raksasa dipensiunkan atas permintaan pemilik —
   kini tick kecil 17px; gayanya hidup di app-patches-2.css (#calendarEventForm
   .calendar-event-repeat) bersama reset aturan input global. */
.week-band.is-recurring::after,
.calendar-band.is-recurring::after,
.calendar-pill.is-recurring::after,
.calendar-day-event.is-recurring::after,
.day-timed-item.is-recurring::after,
.cev-kind-badge.is-recurring::after{
  content:"🔁";
  display:inline-block;
  margin-left:5px;
  font-size:.78em;
  line-height:1;
  vertical-align:baseline;
}

/* ===== PAKET A (10 Agu 2026): "+N" kalender terasa bisa dibuka =====
   "+N blok" Mingguan kini <button> (dulu <span> mati tanpa induk ber-handler).
   "+N lagi" Bulanan sudah berfungsi lewat klik selnya, tetapi tidak pernah
   TERLIHAT bisa diklik. Keduanya disamakan afordansinya dengan tombol
   "+N blok lagi" Harian yang sudah ada. Ukuran/warna tidak diubah — hanya
   kursor, hover, dan reset tampilan tombol supaya <button> tak membawa gaya
   bawaan peramban ke dalam grid. */
#view-calendar .week-allday-more{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  font:inherit; font-size:9.5px; font-weight:750; color:var(--muted);
  cursor:pointer; text-align:left; width:100%;
  border-radius:6px; transition:background-color .12s linear, color .12s linear;
}
#view-calendar .week-allday-more:hover,
#view-calendar .week-allday-more:focus-visible{
  color:var(--ink); background:var(--chip-bg, rgba(127,127,127,.12));
}
#view-calendar .calendar-day .calendar-more{
  cursor:pointer; border-radius:6px;
  transition:background-color .12s linear, color .12s linear;
}
#view-calendar .calendar-day:hover .calendar-more{ color:var(--ink); }

/* Gutter "Blok ▾/▴" Mingguan jadi tombol lipatan (10 Agu 2026) — reset tampilan
   <button> bawaan peramban; gaya teksnya mengikuti .week-gutter-cell yang ada. */
#view-calendar button.week-gutter-cell.week-allday-toggle{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  font:inherit; color:var(--muted); cursor:pointer; text-align:right;
  border-radius:6px; transition:background-color .12s linear, color .12s linear;
}
#view-calendar button.week-gutter-cell.week-allday-toggle:hover,
#view-calendar button.week-gutter-cell.week-allday-toggle:focus-visible{
  color:var(--ink); background:var(--chip-bg, rgba(127,127,127,.12));
}

/* ===== Popup daftar hari (#calendarDateModal) — 11 Agu 2026 =====
   Dua bug lapor pemilik:
   1) JAM MENIMPA JUDUL: kolom jam dipatok 64px + nowrap, sedangkan isinya bisa
      "09:00 - 10:20 WIB" — teksnya meluber ke kolom judul. Kolom jam kini
      menyesuaikan isi (auto) dengan lantai 64px supaya baris ber-jam pendek
      tetap sejajar.
   2) WARNA EVENT: baris Event kini membawa kelas jenisnya (calendar.js), dan
      karena popup ini hidup DI LUAR #view-calendar, painter per-permukaan lama
      tidak menjangkaunya — nilai painter dicerminkan di sini APA ADANYA dari
      app-patches-2.css (identitas event: putus-putus + miring; HUT fuchsia,
      KEMENKO tosca, PD navy, KRESNA ungu). Jangan mengubah nilai di satu sisi
      tanpa sisi lainnya. */
#calendarDateModal .calendar-date-event{ grid-template-columns:auto minmax(0,1fr); }
#calendarDateModal .calendar-date-event time{ min-width:64px; padding:0 10px; }

#calendarDateModal .calendar-date-event.is-calendar-event{
  background:var(--status-waiting-bg) !important;
  border:1px dashed var(--status-waiting) !important;
  color:var(--status-waiting) !important;
  font-style:italic;
}
#calendarDateModal .calendar-date-event.is-calendar-event time{
  /* !important: painter status di app-patches-1 juga !important — tanpa ini chip
     jam baris Event tetap tersapu tinta status (kuning TBC di baris fuchsia). */
  color:currentColor !important; background:color-mix(in srgb, currentColor 12%, transparent) !important;
}
#calendarDateModal .calendar-date-event.is-calendar-event.evt-kemenko{
  background:#dff3f0 !important; border-color:#0d7a6a !important; color:#0d7a6a !important;
}
#calendarDateModal .calendar-date-event.is-calendar-event.evt-pd{
  background:#dfe6f6 !important; border-color:#1e3a8a !important; color:#1e3a8a !important;
}
#calendarDateModal .calendar-date-event.is-calendar-event.evt-kresna{
  background:var(--status-delegated-bg) !important; border-color:var(--status-delegated) !important; color:var(--status-delegated) !important;
}
#calendarDateModal .calendar-date-event.is-calendar-event.evt-hut{
  background:#fbe8ff !important; border-color:var(--evt-hut-ink) !important; color:var(--evt-hut-ink) !important;
}

/* ===== DETAIL WORKSPACE: jahitan tab tertutup (11 Agu 2026) =====
   Blur dibatasi pada SATU bar kecil; scroller besar tidak diberi mask/filter.
   Fade 15px adalah overlay pasif di bawah nav agar teks yang digulir tidak
   terpotong telanjang tepat di garis tab, terutama pada Safari. */
#detailModal.detail-workspace-revamp-active #modalBody{
  position:relative;
}
#detailModal.detail-workspace-revamp-active .detail-workspace-nav{
  position:relative;
  z-index:3;
  background:rgba(247,251,255,.84);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
#detailModal.detail-workspace-revamp-active #modalBody::after{
  content:"";
  position:absolute;
  z-index:2;
  grid-column:1 / -1;
  grid-row:2 / 3;
  inset:0 0 auto;
  height:15px;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(247,251,255,.96),rgba(247,251,255,0));
}
[data-theme="dark"] #detailModal.detail-workspace-revamp-active .detail-workspace-nav{
  background:rgba(23,36,49,.86);
}
[data-theme="dark"] #detailModal.detail-workspace-revamp-active #modalBody::after{
  background:linear-gradient(to bottom,rgba(23,36,49,.97),rgba(23,36,49,0));
}

/* ============================================================
   KURUNG TENGAH MALAM (bug pemilik 11 Agu 2026) — label jam PENUTUP
   di ujung kanvas Harian & Mingguan. Label biasa dinaikkan 6px dari
   garisnya; yang penutup duduk PERSIS di tepi bawah, jadi ia harus
   naik penuh agar tidak terpotong `overflow:hidden` milik .day-canvas.
   ============================================================ */
#view-calendar .day-hour.is-end{ transform:translateY(-12px); }
#view-calendar .week-hour.is-end{ transform:translateY(-11px); }

/* ============================================================
   TANDA HARI LIBUR — "Opsi B" (permintaan pengguna, keputusan pemilik
   12 Agu 2026): PITA di atas chip agenda, bukan mewarnai seluruh sel.
   Merah = Libur Nasional, amber = Cuti Bersama (status hukumnya beda).
   Nada merah/amber sengaja memakai token status yang SUDAH ada supaya
   satu keluarga warna dengan sisa aplikasi.

   TINGGI PITA BULANAN TERKUNCI 18px + margin 3px = 21px, PERSIS satu
   slot chip (CAL_CHIP_H 20 + CAL_GAP 1). Renderer mengurangi anggaran
   chip sel berlibur sebanyak satu; kalau angka di sini diubah, ubah
   juga CAL_CHIP_H/CAL_GAP di calendar.js — kalau tidak, chip terakhir
   melewati tinggi sel dan tertimpa baris pekan berikutnya.
   ============================================================ */
#view-calendar .calendar-libur{
  height:18px; margin:1px 0 2px; padding:0 8px; border-radius:999px;
  display:flex; align-items:center; gap:4px;
  font-size:9.5px; font-weight:var(--fw-heavy); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--status-rejected); color:#fff;
}
#view-calendar .calendar-libur.libur-cuti{ background:var(--status-pending); }
/* Angka tanggal ikut menandai — tanpa mewarnai seluruh sel supaya tidak
   bertabrakan dengan penanda "hari ini"/"terpilih" yang sudah ada. */
#view-calendar .calendar-day.is-libur .date-circle{ color:var(--status-rejected); font-weight:var(--fw-heavy); }
#view-calendar .calendar-day.is-libur-cuti .date-circle{ color:var(--status-pending); }
#view-calendar .calendar-day.is-libur.today .date-circle,
#view-calendar .calendar-day.is-libur.selected .date-circle{ color:inherit; }

/* MINGGUAN: pita libur di baris BLOK (baris pertama; baris agenda digeser
   turun oleh renderer). Bukan tombol — libur tidak bisa dibuka. */
#view-calendar .week-band.week-band-libur{
  display:flex; align-items:center; padding:0 8px; border-radius:999px;
  font-size:9.5px; font-weight:var(--fw-heavy); letter-spacing:.2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  background:var(--status-rejected); color:#fff; cursor:default;
}
#view-calendar .week-band.week-band-libur.libur-cuti{ background:var(--status-pending); }
#view-calendar .week-day-head.is-libur .week-day-number{ color:var(--status-rejected); }
#view-calendar .week-day-head.is-libur-cuti .week-day-number{ color:var(--status-pending); }

/* HARIAN: lencana pada bilah tanggal. `hidden` bawaan HTML sudah membuat
   slotnya nol lebar, jadi kluster navigasi hari tidak pernah tergeser. */
#view-calendar .day-focus-libur{
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px;
  font-size:var(--fs-label); font-weight:var(--fw-heavy); line-height:1.2;
  background:var(--status-rejected); color:#fff; white-space:nowrap;
  max-width:min(46ch, 100%); overflow:hidden; text-overflow:ellipsis;
}
#view-calendar .day-focus-libur.libur-cuti{ background:var(--status-pending); }
#view-calendar .day-focus-libur[hidden]{ display:none; }

/* POPUP DAFTAR HARI: baris keterangan di atas daftar agenda. */
#calendarDateModal .calendar-date-libur{
  margin:0 0 10px; padding:8px 12px; border-radius:var(--radius-control);
  font-size:var(--fs-label); font-weight:var(--fw-bold);
  background:var(--status-rejected-bg); color:var(--status-rejected);
  border:1px solid var(--status-rejected-border);
}
#calendarDateModal .calendar-date-libur.libur-cuti{
  background:var(--status-pending-bg); color:var(--status-pending);
  border-color:var(--status-pending-border);
}

/* Penanda pembuat agenda di modal Detail — muncul HANYA untuk agenda rekan setim
   (kalender bersama tim, 12 Agu 2026). Sebaris di bawah judul, seperti baris
   "Rekomendasi dari" yang sudah ada, jadi tidak ada tata letak yang bergeser. */
#detailModal .detail-brief-pembuat{
  margin:2px 0 0; font-size:var(--fs-label); font-weight:var(--fw-bold);
  color:var(--muted); display:flex; align-items:center; gap:6px;
}
#detailModal .detail-brief-pembuat::before{
  content:"👥"; font-size:11px; line-height:1;
}

/* ===== PENGAJUAN AGENDA — kartu & modal (revamp 13 Agu 2026) =====
   Ditempel di AKHIR app-latest.css sesuai aturan repo. Nol hex baru: seluruh warnanya
   token yang sudah ada, dan status memakai kelas painter yang sudah terdaftar.

   Prinsip revamp, karena keluhan pemiliknya soal HIERARKI bukan warna:
   satu tinggi kontrol, satu radius, tiga keadaan dokumen yang berbeda ARTI,
   dan tiap bagian kartu dipisah garis tipis supaya mata tahu batasnya. */
.home-stat-pengajuan .stat-icon{ filter:none; }
.home-stat-disposisi .stat-icon{ filter:none; }

/* Toolbar dua sisi */
.pengajuan-toolbar{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; }
.pengajuan-toolbar-kiri{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; min-width:0; }
/* Sejak 15 Agu 2026 toolbar ini hanya berisi tombol Ajukan — pemilih tujuannya pindah
   ke dalam formulir. Tiga kolom untuk satu anak menyisakan dua jalur kosong yang
   menggeser tombolnya menjauh dari tepi. */
.pengajuan-ajukan-kontrol{ display:grid; grid-template-columns:auto; gap:8px; align-items:center; }

.pengajuan-seksi{
  margin:10px 0 6px; font-size:var(--fs-label); font-weight:var(--fw-bold);
  letter-spacing:.05em; color:var(--muted); text-transform:uppercase;
}
.pengajuan-seksi:first-child{ margin-top:0; }

.pengajuan-item{
  display:grid; gap:10px; padding:14px;
  border:1px solid var(--border, var(--line)); border-radius:var(--radius-inner);
  background:var(--card-bg, var(--panel)); margin-bottom:8px;
}
.pengajuan-item.ditolak{ border-color:var(--danger, #b42318); }
.pengajuan-top{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; }
.pengajuan-judul{ font-size:var(--fs-title); font-weight:var(--fw-bold); letter-spacing:-.01em; }

/* Meta = SATU baris teks; hanya asal unit yang tetap pil. */
.pengajuan-meta{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:0; color:var(--muted); font-size:var(--fs-body); }
.pengajuan-meta b{ color:var(--ink); font-weight:var(--fw-medium); }
.pengajuan-titik{ opacity:.45; }
.pengajuan-asal{
  padding:1px 8px; border-radius:999px; font-size:var(--fs-caption); font-weight:var(--fw-bold);
  letter-spacing:.03em; background:var(--accent-soft, var(--soft)); color:var(--ink);
  border:1px solid var(--border, var(--line));
}

/* Lokasi: SATU baris, dipotong. Alamat penuh lewat title — lengkapnya ada di Detail. */
.pengajuan-lokasi{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px; align-items:center; color:var(--muted); font-size:var(--fs-body); }
.pengajuan-lokasi > span:last-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Dokumen: baris berlabel, chip seragam, tiga keadaan berbeda arti. */
.pengajuan-dok-baris{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:start;
  padding-top:9px; border-top:1px solid var(--border, var(--line));
}
.pengajuan-dok-label{
  font-size:var(--fs-caption); font-weight:var(--fw-bold); letter-spacing:.05em;
  color:var(--muted); text-transform:uppercase; padding-top:3px;
}
.pengajuan-dok-list{ display:flex; gap:5px; flex-wrap:wrap; }
.pengajuan-dok{
  display:inline-flex; align-items:center; gap:4px; height:22px; padding:0 9px;
  border-radius:999px; font-size:var(--fs-caption);
  border:1px solid var(--border, var(--line)); background:var(--soft, var(--panel-strong)); color:var(--muted);
}
.pengajuan-dok i{ font-style:normal; font-size:10px; }
.pengajuan-dok.ada{ border-color:var(--success, #067647); color:var(--success, #067647); font-weight:var(--fw-medium); }
/* Hanya TOR yang wajib: yang wajib-dan-kurang merah, yang boleh menyusul TETAP NETRAL —
   memberi silang merah pada semuanya membuat kartu terbaca "semuanya bermasalah". */
.pengajuan-dok.wajib-kurang{ border-color:var(--danger, #b42318); color:var(--danger, #b42318); font-weight:var(--fw-bold); }

.pengajuan-alasan{
  padding:9px 11px; border-radius:var(--radius-chip);
  border:1px solid var(--danger, #b42318); color:var(--danger, #b42318);
  font-size:var(--fs-body); line-height:1.45;
}
.pengajuan-alasan b{ display:block; font-size:var(--fs-caption); letter-spacing:.05em; margin-bottom:2px; }

/* Tombol: SATU sistem. Tinggi & radius sama; bobotnya yang membedakan.
   "Lihat lengkap" jadi tautan dan didorong ke kanan — ia bukan keputusan. */
.pengajuan-aksi{
  display:grid; grid-template-columns:auto auto auto minmax(0,1fr); gap:8px; align-items:center;
  padding-top:10px; border-top:1px solid var(--border, var(--line));
}
.pengajuan-aksi.ringkas{ grid-template-columns:minmax(0,1fr); }
/* TINGGI TOMBOL SENGAJA TIDAK DIPAKSA: --ctrl-h (44px) adalah standar kontrol aplikasi
   ini, sekaligus batas sentuh minimum. Rancangan awal saya memakai 36px dan itu KELIRU —
   ia akan membuat kartu ini satu-satunya tempat dengan tombol lebih pendek dari seluruh
   aplikasi, dan lebih sulit ditekan di ponsel. Yang diseragamkan cukup radius & padding;
   tingginya biar standar yang menentukan. */
.pengajuan-aksi .btn{ padding:0 16px; border-radius:var(--radius-chip); }
.pengajuan-tautan{
  justify-self:end; height:var(--ctrl-h, 44px); padding:0 6px; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:var(--fs-body); font-weight:var(--fw-medium);
  text-decoration:underline; text-underline-offset:3px;
}
.pengajuan-tautan:hover{ color:var(--ink); }
.pengajuan-aksi.ringkas .pengajuan-tautan{ justify-self:start; }
.pengajuan-catatan{
  color:var(--muted); font-size:var(--fs-caption); line-height:1.45;
}

@media (max-width: 640px){
  .pengajuan-toolbar{ grid-template-columns:minmax(0,1fr); }
  .pengajuan-ajukan-kontrol{ grid-template-columns:minmax(0,1fr); }
  .pengajuan-top{ grid-template-columns:minmax(0,1fr); }
  .pengajuan-dok-baris{ grid-template-columns:minmax(0,1fr); }
  .pengajuan-aksi{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .pengajuan-aksi .pengajuan-tautan{ grid-column:1 / -1; justify-self:start; }
}

/* Rumah "Ditolak" pada dashboard Pengajuan (13 Agu 2026) — arsip, bukan pekerjaan.
   Judul seksinya diberi warna bahaya supaya batas antara "yang perlu dikerjakan" dan
   "yang tersimpan sebagai catatan" terbaca tanpa harus dibaca. */
.pengajuan-seksi.ditolak{ color:var(--danger, #b42318); }
/* "Di tangan pemohon" bukan pekerjaan pemutus dan bukan pula arsip — warnanya sengaja
   diredam supaya tidak bersaing dengan seksi yang memang menunggu keputusan. */
.pengajuan-seksi.menunggu-pemohon{ color:var(--muted); }
.pengajuan-jejak{
  margin-top:5px; padding-top:5px; border-top:1px dashed currentColor;
  font-size:var(--fs-caption); opacity:.85;
}

/* ===== MEJA AUDIENSI Gen-4 — Fase 4 (13 Agu 2026) =====
   Satu anatomi kartu enam baris, dipakai identik di rak atas, rak bawah, dan
   "Disposisi Saya". Nol palet baru: chip tahap memakai kelas .badge.status-*
   yang sudah dicat painter app-patches-1.css, dan nada baris jejak memakai
   token --status-* yang sama. Menambah warna sendiri di sini akan membuat
   Meja terlihat seperti aplikasi lain yang menumpang. */
/* min-width:0 BUKAN hiasan. Induknya (.home-risk-body) adalah GRID, dan anak grid
   ber-`min-width:auto` = min-content — jadi daftar ini boleh melampaui traknya, dan
   pada 375px kartunya menjadi 392px lalu terpotong tepi modal. Terukur 14 Agu 2026;
   cacat bawaan yang mengenai rak Meja maupun lembar kerja Disposisi Saya. */
.audiensi-meja{ display:flex; flex-direction:column; gap:14px; min-width:0; }
.audiensi-rak{ display:flex; flex-direction:column; gap:8px; }
/* Rak ATAS adalah bahan lapor Menko — ia diberi sedikit lebih banyak ruang,
   bukan warna, supaya urutannya terbaca tanpa menambah kebisingan. */
.audiensi-rak.atas{ padding-bottom:6px; border-bottom:1px solid var(--border); }
.audiensi-rakhead{ display:flex; align-items:center; gap:8px; }
.audiensi-rakhead h4{ margin:0; font-size:var(--fs-title); font-weight:700; }
.audiensi-subhead{ font-size:var(--fs-caption); font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-top:12px; }
.audiensi-subhead.dashed{ border-top:1px dashed var(--border); padding-top:10px; }

.audiensi-kartu{ display:flex; flex-direction:column; gap:5px;
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-chip, 10px);
  background:var(--surface); }
.audiensi-r1{ display:flex; align-items:center; gap:8px; }
.audiensi-nm{ flex:1; min-width:0; font-size:var(--fs-title); font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Maksud dibatasi DUA baris: kartu harus tetap setinggi kartu lain di raknya,
   kalau tidak rak berhenti terbaca sebagai daftar. */
.audiensi-r2{ font-size:var(--fs-body); display:-webkit-box; -webkit-line-clamp:2;
  -webkit-box-orient:vertical; overflow:hidden; }
.audiensi-r3{ font-size:var(--fs-caption); color:var(--muted); }
.audiensi-r4{ display:flex; flex-wrap:wrap; gap:4px; }
.audiensi-att{ font-size:var(--fs-caption); font-weight:600; padding:2px 7px;
  border:1px solid var(--border); border-radius:999px; }
.audiensi-att.kosong{ color:var(--muted); font-weight:400; border-style:dashed; }
/* Baris jejak: TEMPATNYA tetap, isinya yang berubah menurut tahap. */
.audiensi-r5{ font-size:var(--fs-caption); padding:4px 8px; border-radius:8px;
  background:var(--soft); }
.audiensi-r5.nada-delegated{ background:var(--status-delegated-bg, var(--soft)); color:var(--status-delegated, inherit); }
.audiensi-r5.nada-approved{ background:var(--status-approved-bg, var(--soft)); color:var(--status-approved, inherit); }
.audiensi-r5.nada-pending{ background:var(--status-pending-bg, var(--soft)); color:var(--status-pending, inherit); }
.audiensi-r5.nada-rejected{ background:var(--status-rejected-bg, var(--soft)); color:var(--status-rejected, inherit); }
.audiensi-r5.nada-waiting{ background:var(--status-waiting-bg, var(--soft)); color:var(--status-waiting, inherit); }
.audiensi-r6{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:2px; }
/* Gaya tombol-mati kartu Meja DICABUT 13 Agu 2026: barisTombol (audiensi-meja.js)
   berhenti merender aksi non-enabled sama sekali (keputusan pemilik lewat anotasi
   produksi), sehingga gaya itu tak pernah lagi punya sasaran. */
.audiensi-tautan{ background:none; border:0; padding:0; margin-left:auto;
  font-size:var(--fs-caption); font-weight:700; color:var(--link); cursor:pointer; }
.audiensi-why{ flex-basis:100%; font-size:var(--fs-caption); color:var(--muted); }
.audiensi-terkuncup > summary{ cursor:pointer; font-size:var(--fs-caption);
  font-weight:700; color:var(--muted); padding:6px 0; }
.audiensi-terkuncup[open] > summary{ margin-bottom:6px; }

.audiensi-form{ display:flex; flex-direction:column; gap:10px; padding:4px 0; }
.audiensi-form-baris{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
@media (max-width:680px){ .audiensi-form-baris{ grid-template-columns:1fr; } }

/* Disposisi Saya + BlokRekomendasiDetail (Meja Audiensi Fase 4). */
.home-rail-disposisi{ margin:10px 0; }
.home-rail-disposisi .audiensi-rak.disposisi-saya{ padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius-chip, 10px); background:var(--surface); }
.audiensi-disposisi-sub{ margin:0 0 4px; font-size:var(--fs-caption); }
.audiensi-rek-daftar{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.audiensi-rek-item{ padding:8px 10px; border:1px solid var(--border); border-radius:8px; }
.audiensi-rek-kepala{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.audiensi-rek-oleh{ font-size:var(--fs-caption); font-weight:700; }
.audiensi-rek-pada{ font-size:var(--fs-caption); color:var(--muted); }
.audiensi-rek-teks{ margin:4px 0 0; font-size:var(--fs-body); }
.audiensi-rek-kosong, .audiensi-rek-sisa{ margin:4px 0 0; font-size:var(--fs-caption); }

/* ===== Tarik ke Meja di baris formulir (13 Agu 2026) =====
   Anotasi pemilik: jalur tarik dulu terkubur di popup Ringkasan — kini tombolnya
   berdiri di tiap baris formulir. Wrapper .audiensi-item-samping menumpuk badge
   status + tombol di kolom kanan grid .audiensi-item (2 kolom, app-views.css);
   tanpa wrapper, anak ketiga jatuh ke baris grid berikutnya. */
.audiensi-item-samping{ display:grid; gap:var(--ui-15); justify-items:end; align-content:start; }
.audiensi-item-samping .audiensi-tarik{ white-space:nowrap; }
@media (max-width:560px){
  .audiensi-item-samping{ justify-items:start; }
}

/* ===== PemilihPejabatUtama (13 Agu 2026) =====
   Daftar centang, bukan ketik-bebas: hanya akun berklasifikasi `pejabat-utama` yang
   berhak memberi rekomendasi, jadi mengetik nama bebas di sini akan melahirkan
   disposisi yang tersangkut. Baris "sudah ditunjuk" tetap TAMPIL (disabled), tidak
   disembunyikan — operator perlu melihat siapa yang sudah memegang. */
.audiensi-pejabat-body{ padding:0 var(--ui-3); max-height:min(52vh, 420px); overflow:auto; }
.audiensi-pejabat-list{ display:grid; gap:var(--ui-15); }
.audiensi-pejabat-baris{
  display:flex; align-items:center; gap:var(--ui-25);
  padding:var(--ui-25) var(--ui-3);
  border:1px solid var(--line); border-radius:var(--radius-control);
  background:color-mix(in srgb, var(--panel) 80%, transparent);
  cursor:pointer; min-height:44px;
}
.audiensi-pejabat-baris:hover{ border-color:var(--glass-border); }
.audiensi-pejabat-baris.sudah{ opacity:.6; cursor:default; }
.audiensi-pejabat-baris input{ width:18px; height:18px; flex:0 0 auto; accent-color:var(--accent); }
.audiensi-pejabat-nama{ flex:1 1 auto; min-width:0; font-size:var(--fs-body); font-weight:var(--fw-medium); }
.audiensi-pejabat-aksi{
  display:flex; gap:var(--ui-2); justify-content:flex-end;
  padding:var(--ui-3); border-top:1px solid var(--line);
}
.audiensi-pejabat-aksi .btn[disabled]{ opacity:.45; cursor:not-allowed; }
@media (max-width:560px){
  .audiensi-pejabat-aksi{ flex-direction:column-reverse; }
  .audiensi-pejabat-aksi .btn{ width:100%; }
}


/* ===== Kartu PETUGAS di lembar kerja (14 Agu 2026) =====
   Tidak ada gaya baru untuk bentuknya: ia memakai rangka enam baris yang SAMA
   (kartuEnamBaris), jadi hanya penanda jenis yang ditambahkan di sini untuk keperluan
   uji & penelusuran. Menambah gaya khusus per jenis adalah cara simetri bubar pelan-pelan. */
.audiensi-kartu[data-jenis="petugas"] .audiensi-r2{ font-weight:var(--fw-medium); }

/* Chip lampiran yang BISA DIBUKA (14 Agu 2026). Bentuk chip-nya tidak berubah — yang
   berubah hanya isinya menjadi tombol pratinjau, supaya dokumen terbaca dari kartu
   tanpa masuk Detail lebih dulu. */
.audiensi-att.audiensi-att-buka{ padding:0; border:0; background:none; }
.audiensi-att.audiensi-att-buka .audiensi-attachment-link{
  display:inline-block; padding:1px 7px; border-radius:999px;
  border:1px solid var(--line); background:var(--soft);
  font-size:var(--fs-caption); font-weight:600; color:var(--link); cursor:pointer;
}
.audiensi-att.audiensi-att-buka .audiensi-attachment-link:hover{ border-color:var(--accent); }

/* ============================================================================
   KARTU AUDIENSI — perintah, dokumen, dan jejak dibedakan bentuknya
   (14 Agu 2026, paritas iOS build 1009 / commit 5e204a7).

   Sebelum ini "Detail" dan chip dokumen berdiri di deret yang SAMA dengan Tutup dan
   Agendakan: tautan yang cuma membuka halaman terlihat sederajat dengan perbuatan yang
   tak bisa diurungkan. Keluarga cacat yang sama dengan #13 — bentuk yang membuat tangan
   salah mendarat.

   Ditempel di AKHIR app-latest.css sesuai kontrak berkas ini (cascade = urutan muat).
   ============================================================================ */

/* r4 — dokumen: judul + kapsul, sengaja BUKAN bentuk tombol perintah. */
.audiensi-att-judul{
  flex-basis:100%; font-size:var(--fs-caption); font-weight:600;
  color:var(--muted); letter-spacing:.01em; margin-bottom:2px;
}
.audiensi-att.audiensi-att-buka{ border-radius:999px; }

/* r5 — jejak yang bisa dibuka. Pemotongnya CSS, jadi teks utuh tetap ada di DOM
   (salin-tempel, Ctrl+F, dan pembaca layar tetap menerima kalimat penuh). */
.audiensi-jejak-teks[data-jejak-ringkas]{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden;
}
.audiensi-jejak-lipat{
  display:block; margin-top:2px; background:none; border:0; padding:0;
  font-size:var(--fs-caption); font-weight:600; color:var(--accent);
  cursor:pointer; min-height:24px;
}
.audiensi-jejak-lipat:hover{ text-decoration:underline; }

/* r6 — perintah punya rumah sendiri; Detail turun jadi baris navigasi. */
.audiensi-tindakan-judul{
  flex-basis:100%; font-size:var(--fs-caption); font-weight:600;
  color:var(--muted); letter-spacing:.01em;
}
/* Dua kolom SAMA LEBAR supaya tidak ada perintah yang tampak lebih besar daripada
   saudaranya. Di bawah 380px ia jatuh ke satu kolom — sama seperti grid iOS pada
   Dynamic Type besar. */
.audiensi-tindakan{
  flex-basis:100%; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px;
}
.audiensi-tindakan > .btn{ width:100%; min-height:36px; }
@media (max-width:380px){
  .audiensi-tindakan{ grid-template-columns:minmax(0, 1fr); }
}
/* Detail: penuh lebar, di BAWAH perintah, dan tidak lagi memakai margin-left:auto
   yang dulu menyelipkannya ke ujung deret perintah. */
.audiensi-r6 .audiensi-tautan{
  flex-basis:100%; margin-left:0; display:flex; align-items:center;
  justify-content:space-between; gap:6px; min-height:32px;
}
.audiensi-tautan-chevron{ font-weight:700; opacity:.7; }

/* ===== PENGAJUAN AGENDA Gen-2 — simetri dua kolom (14 Agu 2026) =====
   MASUK di kiri, KELUAR di kanan. Satu sisi pekerjaan yang datang ke meja profile ini,
   satu sisi titipan kita di meja unit lain — pembagian yang paling terbaca, dan membuat
   panel seimbang alih-alih satu kolom panjang yang urutannya harus dihafal.

   Ambang 861px SAMA dengan rel panel lain di aplikasi ini (lihat catatan lebar rel 236px
   pada memori proyek); memakai ambang sendiri akan membuat panel ini berganti bentuk di
   titik yang berbeda dari tetangganya.

   Di bawah ambang: satu kolom, dan yang MENUNTUT TINDAKAN tetap di atas karena kolom
   MASUK dirender lebih dulu di DOM. Arsip "Ditolak" selalu membentang penuh di bawah
   keduanya — ia catatan, bukan pekerjaan. */
.pengajuan-kolom{ display:grid; grid-template-columns:minmax(0,1fr); gap:16px; }
.pengajuan-kolom-masuk,
.pengajuan-kolom-keluar{ min-width:0; }
.pengajuan-arsip{ margin-top:16px; }
@media (min-width:861px){
  /* Dua kolom BERBAGI SAMA RATA: `1fr 1fr` (bukan auto) supaya lebar keduanya identik
     berapa pun isinya. Kolom yang menyempit mengikuti isi adalah asimetri yang paling
     sering lolos dari mata tetapi langsung terasa. */
  .pengajuan-kolom{ grid-template-columns:1fr 1fr; align-items:start; }
}

/* Chip ASAL PENGAJUAN pada kartu agenda (14 Agu 2026). Menempel SESUDAH pengajuan
   disetujui dan penanda `request` dilepas — tanpa ini unit tujuan melihat agenda yang
   "tiba-tiba ada" di kalendernya tanpa tahu siapa yang memintanya. */
.agenda-asal-pengajuan{
  display:flex; align-items:center; gap:6px;
  margin-top:6px; font-size:12px; color:var(--muted);
}
.agenda-asal-pengajuan .badge{ flex:0 0 auto; }

/* JENIS AGENDA TERKUNCI pada baris Pengajuan (15 Agu 2026).
   Geometri pilnya sengaja DIWARISI dari .detail-brief-select-wrap supaya barisnya tetap
   sejajar dengan kontrol lain di header Detail — yang dicabut hanya dua hal yang
   MENJANJIKAN interaksi: tanda panah bawah dan kursor tangan. Sebuah pil yang tampak
   persis dropdown tetapi tak menanggapi klik lebih membingungkan daripada pil biasa. */
.detail-brief-select-wrap.detail-brief-terkunci{ cursor:default; }
.detail-brief-select-wrap.detail-brief-terkunci::after{ content:none; }
.detail-brief-select-wrap.detail-brief-terkunci b{
  font-size:var(--fs-caption); font-weight:850; white-space:nowrap;
}

/* ALASAN PENOLAKAN di modal Detail (15 Agu 2026). Bentuknya sengaja MENCERMIN
   .pengajuan-alasan di kartu panel: kalimat yang sama, wajah yang sama, dua permukaan.
   Warna danger dipakai hanya saat benar-benar DITOLAK; catatan "perlu dilengkapi"
   memakai warna teks biasa karena ia permintaan, bukan vonis. */
.detail-pengajuan-catatan{
  margin-top:10px; padding:9px 11px; border-radius:var(--radius-chip);
  border:1px solid var(--line); color:var(--ink);
  font-size:var(--fs-body); line-height:1.45;
}
.detail-pengajuan-catatan.ditolak{
  border-color:var(--danger, #b42318); color:var(--danger, #b42318);
}
.detail-pengajuan-catatan b{
  display:block; font-size:var(--fs-caption); letter-spacing:.05em; margin-bottom:2px;
}
.detail-pengajuan-jejak{
  margin-top:5px; padding-top:5px; border-top:1px dashed currentColor;
  font-size:var(--fs-caption); opacity:.85;
}

/* ===== TIGA RAK KARTU PENGAJUAN (15 Agu 2026): MASUK · KELUAR · RIWAYAT =====
   Tiga tab SAMA LEBAR (`repeat(3,1fr)`, bukan auto): lebar yang mengikuti panjang kata
   membuat "Riwayat" selalu lebih besar dari "Masuk" dan barisnya terbaca miring. Ini
   aturan yang sama dengan dua kolom sebelumnya — yang berubah bentuknya, bukan
   prinsipnya. Angka di tiap tab memakai pil sendiri supaya terbaca sebagai jumlah,
   bukan bagian dari namanya. */
.pengajuan-rak{
  display:grid; grid-template-columns:repeat(3,1fr); gap:6px;
  margin-bottom:10px;
}
.pengajuan-rak-tab{
  display:flex; align-items:center; justify-content:center; gap:6px;
  min-height:var(--ctrl-h, 44px); padding:0 10px;
  border:1px solid var(--line); border-radius:var(--radius-chip);
  background:transparent; color:var(--muted);
  font-size:var(--fs-body); font-weight:var(--fw-bold); cursor:pointer;
}
.pengajuan-rak-tab.active{
  color:var(--ink); border-color:currentColor;
  box-shadow:inset 0 -2px 0 currentColor;
}
.pengajuan-rak-angka{
  min-width:20px; padding:0 6px; border-radius:999px;
  background:var(--line); color:var(--ink);
  font-size:var(--fs-caption); font-weight:850; line-height:18px; text-align:center;
}
.pengajuan-rak-tab.active .pengajuan-rak-angka{ background:currentColor; color:var(--panel, #fff); }
.pengajuan-rak-isi{ display:block; }

/* ===== MODE TENANG: animasi dekoratif dijeda saat idle (16 Agu 2026) =====
   Syarat pemilik: "iPhone harus tetap dingin saat layar idle 5 menit, tapi scrolling,
   buka agenda, dan transisi tetap 60 fps." Kuncinya: saat idle layarnya masih TERLIHAT,
   jadi menunggu `document.hidden` tidak menolong sama sekali — animasi `infinite` terus
   membangunkan compositor selama kartunya ada di layar.

   Yang dijeda HANYA dekorasi berdenyut tanpa akhir. `#authGate .kc-spinner` SENGAJA
   tidak ikut: ia menyatakan "sedang memuat", dan spinner yang membeku terbaca sebagai
   aplikasi menggantung — persis kesan yang ingin dihindari.

   `animation-play-state` dipilih, bukan `animation:none`: menjeda MEMPERTAHANKAN fase
   dan tidak memicu relayout, jadi saat pengguna menyentuh layar denyutnya melanjutkan
   dari posisi terakhir alih-alih meloncat. Efek visualnya utuh; yang hilang cuma
   pekerjaan GPU saat tidak ada yang menonton. */
html[data-cc-tenang="1"] #view-map .map-command-kicker span,
html[data-cc-tenang="1"] .cc-kicker > i,
html[data-cc-tenang="1"] .peta3-pulse-titik,
html[data-cc-tenang="1"] .peta3-pulse-komet,
html[data-cc-tenang="1"] .peta3-intel-tahap.aktif .tanda,
html[data-cc-tenang="1"] .peta3-kep-lampu.menunggu .peta3-kep-bulat{
  animation-play-state:paused !important;
}

/* ============================================================================
   FASE 4 PENDINGINAN (16 Agu 2026) — kartu di luar layar berhenti dibayar.

   DIUKUR LEBIH DULU, bukan ditebak: `agendaCard()` dijalankan di sandbox boot dan
   keluarannya dihitung — 43-44 elemen per kartu, tetap segitu baik untuk agenda
   kosong maupun agenda penuh checklist & lampiran. Jadi biayanya murni
   44 x jumlah kartu. Saat Mencari atau membuka Disposisi Saya, daftar ini memuat
   SELURUH agenda yang cocok (±1.400) = ±61.000 elemen, dan seluruhnya di-layout
   serta dicat setiap kali menggulir. Itu beban 60 fps yang tersisa setelah Fase 3.
   (Komentar lama di app.js menyebut "~32 elemen / 45.000" — itu meremehkan ~35%.)

   Kalender SENGAJA tidak diberi perlakuan ini: ketiga modenya sudah berpagar keras
   (Bulanan maks 42 sel x 3 pil x 3 lajur pita, Mingguan 3 lajur + 2 sehari-penuh,
   Harian satu tanggal), jadi tak ada yang bisa dihemat di sana.

   Bentuknya sengaja `content-visibility` dan BUKAN virtualisasi ber-JS: nol kode
   baru di jalur gulir, nol pendengar tambahan, dan tak ada daftar yang bisa jadi
   basi. Browser melewati layout+paint kartu di luar viewport, lalu mengerjakannya
   tepat sebelum terlihat.

   TIGA risiko sudah diperiksa dan NIHIL, bukan diasumsikan:
   1. `content-visibility` membawa `contain:paint` yang MENGGUNTING luapan. Satu-
      satunya yang absolute di kartu ini adalah ::before & ::after miliknya sendiri,
      dan keduanya inset KE DALAM (14px/1px) — tak ada yang menjulur untuk terpotong.
   2. Kartu di luar layar melaporkan ukuran PERKIRAAN. Nol kode membaca offsetHeight/
      getBoundingClientRect/scrollIntoView pada .agenda-card, jadi tak ada yang
      tertipu.
   3. Lingkupnya DIPERSEMPIT ke #agendaList saja. Kartu bernama sama juga hidup di
      #approvalList, Home, dan modal Detail — daftar itu pendek, tak butuh ini, dan
      ikut terseret hanya menambah risiko tanpa imbalan.

   DIUKUR DI CHROME ASLI, bukan diperkirakan (300 kartu nyata, CSS produksi utuh):
   median layout paksa 2,0 ms DENGAN properti ini vs 39,4 ms tanpanya — ~20x. Urutan
   pengukuran dibalik dan hasilnya bertahan, jadi itu bukan artefak pemanasan.
   Diproyeksikan ke ±1.400 kartu (kasus Mencari di produksi) angka "tanpa" menjadi
   ±184 ms untuk SATU layout, sementara anggaran 60 fps cuma 16,7 ms. Dengan properti
   ini biayanya tetap ±2 ms berapa pun panjang daftarnya, karena yang dibayar hanya
   yang terlihat.

   Catatan untuk siapa pun yang ingin membuktikan ulang: JANGAN memakai tinggi anak
   atau checkVisibility sebagai detektor. Keduanya sudah diuji dengan kontrol positif
   `content-visibility:hidden` — yang PASTI melewati isinya — dan keduanya tetap
   melaporkan anak setinggi 180px. Detektor yang buta itu sempat membuat perubahan ini
   terlihat 'tidak bekerja'. Ukur WAKTU LAYOUT-nya.

   Tinggi kartu BERBEDA per layar (ponsel punya min-height 142px + padding-bottom
   80px; desktop tidak), jadi satu angka mati pasti salah di salah satunya. Karena
   itu dipakai `auto`: browser MENGINGAT tinggi asli tiap kartu setelah sekali
   dirender, dan angka 160px hanya benih untuk kartu yang belum pernah terlihat.
   Baris pertama tanpa `auto` adalah cadangan untuk mesin yang belum mengenalnya —
   tanpa itu, mesin lama membaca perkiraan nol dan batang gulirnya melompat-lompat.
   ========================================================================== */
#agendaList > .agenda-card{
  content-visibility:auto;
  contain-intrinsic-size:160px;
  contain-intrinsic-size:auto 160px;
}

/* Mencetak wajib memaksa SEMUA kartu tergambar. Tanpa ini, yang tak pernah
   tergulir ke layar berisiko keluar sebagai kotak kosong di kertas. */
@media print{
  #agendaList > .agenda-card{ content-visibility:visible; }
}

/* ============================================================================
   REL KESIAPAN — persen kesiapan terbaca dari Kalender, tanpa mengetuk kartu.

   Permintaan pengguna 15 Agu 2026: melihat kesiapan tanpa membuka kartu satu per
   satu. Kendalanya nyata — kartu sudah padat, dan aplikasi baru saja melewati empat
   fase pendinginan. Karena itu rel ini dirancang dengan dua pantangan: NOL node DOM
   baru, dan NOL sapuan baru per render (nilainya di-memo di agenda-format.js).

   BENTUK: satu garis 3px di tepi ATAS kartu; panjang isinya = persen kesiapan.
   Yang membawa informasi adalah PANJANG, bukan warna — jadi tetap terbaca oleh
   pengguna yang tak membedakan merah/hijau. Warna hanya kanal kedua.

   KENAPA TEPI ATAS, BUKAN BAWAH: tepi bawah SUDAH dipegang `.cal-resize`
   (app-patches-2.css:1562) — pegangan tarik-durasi 9px yang saat hover menampilkan
   pil 26x3px di bottom:2.5px. Rel di sana akan dibaca sebagai pegangan seret, lalu
   tertutup pil itu sendiri.

   KENAPA `::before`: `::after` sudah dipakai penanda berulang (app-latest.css:8694).
   Pseudo-elemen tidak masuk pohon DOM — itulah yang membuat "nol node baru" benar-
   benar nol. Satu pseudo-elemen membawa DUA lapis lewat gradien berhenti-keras.

   HARIAN & MINGGUAN saja. Bulanan tidak: chip-nya 20px, bisa 126 sekaligus, dan
   pada jarak sebulan angka kesiapan belum bermakna (fase baru berganti di H-1/H-0).
   ========================================================================== */

/* JANGAN menambahkan position:relative di sini. Kedua kartu sudah position:absolute
   (app-patches-2.css:1385 & :1238) sehingga sudah menjadi containing block sendiri;
   selektor yang lebih spesifik akan MENANG dan mengeluarkan kartu dari penempatan
   absolutnya — kanvas rusak, dan geometri seret/ubah-durasi ikut salah baca. */
#view-calendar .day-col .day-timed-item[data-kesiapan]::before,
#view-calendar .week-cols .week-agenda-item[data-kesiapan]::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(
    to right,
    var(--rel-isi) 0 var(--kesiapan, 0%),
    var(--rel-sisa) var(--kesiapan, 0%) 100%);
  pointer-events:none;   /* jangan pernah mencuri klik dari kartunya */
}

/* Nada diturunkan dari homeReadinessTone() (agenda-format.js) — SATU-SATUNYA sumber
   ambang 90/50. Jangan menulis ulang angkanya di sini. */
#view-calendar .day-col .day-timed-item[data-kesiapan="atensi"],
#view-calendar .week-cols .week-agenda-item[data-kesiapan="atensi"]{ --rel-isi:var(--signal-risk); }
#view-calendar .day-col .day-timed-item[data-kesiapan="sedang"],
#view-calendar .week-cols .week-agenda-item[data-kesiapan="sedang"]{ --rel-isi:var(--signal-pending); }
#view-calendar .day-col .day-timed-item[data-kesiapan="siap"],
#view-calendar .week-cols .week-agenda-item[data-kesiapan="siap"]{ --rel-isi:var(--readiness-complete); }

/* Sisa pekerjaan: jejak dari nada yang sama. Ia WAJIB terlihat — itulah yang
   membedakan "0%" (rel ada, kosong) dari "tidak berlaku" (rel tidak dicetak sama
   sekali). Kalau keduanya tertukar, orang mengira pekerjaan belum jalan padahal
   memang tak ada yang perlu dikerjakan.
   Angkanya 34%, bukan 20%: pada pratinjau pertama 20% membuat kartu 0% nyaris tak
   berel di atas latar kartu berwarna — terbalik, karena 0% justru yang paling perlu
   dilihat. */
#view-calendar .day-col .day-timed-item[data-kesiapan],
#view-calendar .week-cols .week-agenda-item[data-kesiapan]{
  /* Nilai dasar WAJIB ada di sini, bukan hanya sebagai fallback var(). Repo ini
     punya gerbang yang menolak properti kustom yang dirujuk tanpa pernah
     didefinisikan (kelas bug --fg/--shadow-soft), dan pagar itu benar: kalau
     pelukis suatu saat gagal menitipkan nilainya, rel akan jatuh ke 0% yang jujur
     alih-alih menggambar gradien tanpa titik berhenti. Pelukis menimpanya inline. */
  --kesiapan:0%;
  --rel-sisa:color-mix(in srgb, var(--rel-isi) 34%, transparent);
}

@media (prefers-contrast:more){
  #view-calendar .day-col .day-timed-item[data-kesiapan]::before,
  #view-calendar .week-cols .week-agenda-item[data-kesiapan]::before{ height:4px; }
  #view-calendar .day-col .day-timed-item[data-kesiapan],
  #view-calendar .week-cols .week-agenda-item[data-kesiapan]{
    --rel-sisa:color-mix(in srgb, var(--rel-isi) 46%, transparent);
  }
}

/* Mode warna paksa: tanpa ini seluruh rel diratakan jadi satu warna sistem dan
   panjangnya berhenti bermakna. */
@media (forced-colors:active){
  #view-calendar .day-col .day-timed-item[data-kesiapan]::before,
  #view-calendar .week-cols .week-agenda-item[data-kesiapan]::before{
    forced-color-adjust:none;
  }
}

/* ============================================================================
   DISPOSISI SAYA — satu agenda, SATU kartu (15 Agu 2026, keluhan pemilik).

   Sembilan penugasan checklist pada satu agenda dulu melahirkan sembilan kartu
   berjudul sama; lembar kerjanya jadi tak terbaca. Kini ia satu kartu, dan daftar
   perannya DILIPAT — terbuka, sembilan baris mengembalikan persis kekacauan yang
   dikeluhkan.

   Penyelesaian tetap PER PERAN di dalam lipatan ini (keputusan pemilik): satu
   ketukan yang menyelesaikan sembilan pekerjaan akan mencatat yang belum dikerjakan
   sebagai selesai. Yang diborong hanya "Tandai Diterima", karena ia cuma pengakuan.
   ========================================================================== */
.audiensi-rincian{
  grid-column:1 / -1;
  margin:2px 0 0;
  border-top:1px solid var(--line);
  padding-top:6px;
}
.audiensi-rincian > summary{
  cursor:pointer;
  font-size:var(--fs-caption);
  font-weight:650;
  color:var(--muted);
  list-style:none;
  padding:2px 0;
}
.audiensi-rincian > summary::-webkit-details-marker{ display:none; }
.audiensi-rincian > summary::before{ content:"▸ "; }
.audiensi-rincian[open] > summary::before{ content:"▾ "; }

.disp-peran-list{
  list-style:none;
  margin:4px 0 0;
  padding:0;
  display:grid;
  gap:4px;
}
.disp-peran{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:8px;
  padding:4px 0;
}
/* Nama peran boleh panjang ("Petugas Videotron/LED"); ia yang mengalah, bukan
   tombolnya — tombol yang menyusut jadi tak bisa diketuk. */
.disp-peran-nama{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--fs-caption);
}

/* ============================================================================
   RIWAYAT PENGAJUAN — dua seksi (15 Agu 2026, permintaan pemilik).

   Sebelumnya Riwayat hanya bisa memuat yang DITOLAK — bukan karena "disetujui" lupa
   dibuat, melainkan karena begitu disetujui folder "request" DILEPAS dan barisnya
   keluar dari himpunan yang menjadi sumber rak itu.

   Kartu DISETUJUI sengaja NOL TOMBOL: keputusannya sudah diambil dan sepenuhnya milik
   profil tujuan. Setiap tombol di sini akan jadi tombol yang tidak pernah benar.
   ========================================================================== */
/* Token `--status-approved` (BUKAN --status-approved-fg, yang tak pernah ada) —
   gerbang token menolak properti kustom yang dirujuk tanpa definisi, dan nilai
   cadangan di dalam var() TIDAK membuatnya sah. */
.pengajuan-seksi.disetujui{ color:var(--status-approved); }

.pengajuan-item.pengajuan-arsip{
  /* Tanpa kursor tunjuk & tanpa efek tekan: ia catatan yang bisa dibuka detailnya,
     bukan baris yang menunggu diputuskan. */
  opacity:.94;
}
.pengajuan-item.pengajuan-arsip .pengajuan-item-jejak{
  font-size:var(--fs-caption);
  color:var(--muted);
}

/* ===== THE NEW EYE — angka jendela/total (16 Agu 2026, audit A1) =====
   Angka utama = baris pada rentang kalender yang sedang dilihat; total semua
   tanggal menyusul redup. Tanpa pemisahan ini "376" terbaca sebagai "376 kartu
   minggu ini" dan panel dituduh rusak justru saat ia benar. */
.new-eye-layer-count .new-eye-count-total{opacity:.55;font-weight:400}

/* ===== RENTANG RANGKUMAN WHATSAPP (17 Agu 2026, permintaan Sespri) =====
   Harian/Mingguan/2 Mingguan. Meniru gaya tombol aktif pager tanggal Agenda
   (#view-agenda .daily-date-controls .btn.active) supaya satu bahasa visual;
   token dipakai apa adanya, tanpa warna literal baru. */
/* Jarak antar-baris diurus grid .approval-whatsapp-body (gap:var(--ui-25)) —
   tanpa margin sendiri supaya tidak menggandakan jarak. */
.approval-whatsapp-modes{
  display:flex;
  flex-wrap:wrap;
  gap:var(--ui-2);
}
.approval-whatsapp-modes .btn.active{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--bg);
}

/* ===== PEMILIH PROFIL DI KEPALA KALENDER (20 Agu 2026, permintaan pemilik) =====
   Di layar >=761px .topbar disembunyikan pada tab Kalender (lihat blok kalender
   layar-penuh di atas), dan pemilih profil ikut lenyap bersamanya — berpindah
   profil jadi menuntut keluar dari Kalender lebih dulu. Salinan kedua dipasang di
   .cc-header-side, dan gayanya MENCERMINKAN pil topbar (app-patches-3.css) supaya
   keduanya tidak pernah terlihat sebagai dua kontrol yang berbeda.

   Aturan asli digantung pada #officeProfileSelect — ID dipakai di sana agar menang
   dari `.topbar-actions .icon-btn`. Di sini konteksnya lain, jadi cukup ID salinan
   ini sendiri; menyalin nilainya (bukan mengubah selektor lama) menjaga pil topbar
   tetap persis seperti sebelumnya. */
#officeProfileWrapCalendar{ width:auto; padding:0 var(--ui-3); border:0; }
#officeProfileSelectCalendar{
  appearance:none; -webkit-appearance:none;
  border:0; background:transparent; color:inherit;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  font:inherit; font-size:var(--fs-body); font-weight:var(--fw-medium);
  padding:0 15px 0 0; cursor:pointer; max-width:9rem;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 8px) 55%, calc(100% - 4px) 55%;
  background-size:4px 4px, 4px 4px; background-repeat:no-repeat;
}
#officeProfileSelectCalendar:focus-visible{ outline:2px solid var(--accent, #4c8dff); outline-offset:2px; }
/* Popup select digambar OS dan tak mewarisi warna kita -> putih di atas putih. */
#officeProfileSelectCalendar option{ color:#111; background:#fff; }

/* ===== LONCENG THE DOT DI TOPBAR (5 Sep 2026, ADR-0007 F5 C3, assets/notif-dot.js) =====
   Tombol ikut gaya .icon-btn topbar; angka belum-dilihat di sudut kanan-atas; panel daftar
   dibuat skrip di body (topbar ber-overflow:hidden) — fixed di bawah topbar, selebar
   min(380px, viewport). Warna hanya token yang sudah ada (terang & gelap ikut otomatis) — KECUALI
   tinta angka lencana: latar lencana = --status-pending yang di tema terang oker gelap (#a15c07,
   putih 5,19:1) tetapi di tema gelap kuning muda (#fde68a, putih hanya 1,25:1) → tinta wajib
   berpasangan terang/gelap (#101828 di atas #fde68a = 14,25:1). Dipaku kontras di test-ui-tokens. */
:root{ --notif-dot-badge-ink:#ffffff; }
[data-theme="dark"]{ --notif-dot-badge-ink:#101828; }
#notifDotBtn{ position:relative; overflow:visible; }
#notifDotBtn.has-unseen{ border-color:var(--status-pending); }
.notif-dot-badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  border-radius:var(--ui-r-pill); background:var(--status-pending); color:var(--notif-dot-badge-ink);
  font-size:10px; font-weight:var(--fw-heavy); line-height:18px; text-align:center;
  border:2px solid var(--panel); box-sizing:content-box; pointer-events:none;
}
.notif-dot-badge[hidden]{ display:none; }
.notif-dot-panel{
  position:fixed; top:78px; right:12px; z-index:240;
  width:min(380px, calc(100vw - 24px)); max-height:min(70vh, 560px);
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--panel-strong); color:var(--ink); border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-soft);
}
.notif-dot-panel[hidden]{ display:none; }
.notif-dot-kepala{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:10px 10px 10px 14px; border-bottom:1px solid var(--line);
}
.notif-dot-judul{ margin:0; font-size:var(--fs-title); font-weight:var(--fw-bold); }
.notif-dot-tutup{ min-width:36px; width:36px; height:36px; }
.notif-dot-isi{ overflow:auto; -webkit-overflow-scrolling:touch; }
.notif-dot-status{ margin:0; padding:16px 14px; color:var(--muted); font-size:var(--fs-body); }
.notif-dot-status[hidden]{ display:none; }
.notif-dot-status.is-gagal button{ margin-left:8px; }
/* Pengumuman "N notifikasi baru" untuk pembaca layar saja (wilayah hidup sempit, §14.5). */
.notif-dot-sr{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.notif-dot-daftar{ list-style:none; margin:0; padding:4px 0; }
.notif-dot-item{
  display:grid; grid-template-columns:12px minmax(0,1fr); align-items:start; gap:10px;
  width:100%; min-height:44px; padding:10px 14px; border:0; border-bottom:1px solid var(--line);
  background:transparent; color:var(--ink); text-align:left; cursor:pointer; font:inherit;
  touch-action:manipulation;
}
.notif-dot-daftar li:last-child .notif-dot-item{ border-bottom:0; }
.notif-dot-item:hover{ background:var(--soft); }
.notif-dot-item:focus-visible{ outline:2px solid var(--link); outline-offset:-2px; }
.notif-dot-item.is-belum-dibaca{ background:color-mix(in srgb,var(--status-pending) 6%,transparent); }
.notif-dot-titik{ width:8px; height:8px; margin-top:6px; border-radius:50%; background:transparent; }
.notif-dot-item.is-belum-dibaca .notif-dot-titik{ background:var(--status-pending); }
.notif-dot-item.is-unseen .notif-dot-titik{ box-shadow:0 0 0 3px color-mix(in srgb,var(--status-pending) 25%,transparent); }
.notif-dot-teks{ display:grid; gap:2px; min-width:0; }
.notif-dot-teks b{ font-size:var(--fs-body); font-weight:var(--fw-bold); overflow-wrap:anywhere; }
.notif-dot-item.is-belum-dibaca .notif-dot-teks b{ font-weight:var(--fw-heavy); }
.notif-dot-teks span{ font-size:var(--fs-label); color:var(--ink); overflow-wrap:anywhere; }
.notif-dot-teks small{ font-size:var(--fs-caption); color:var(--muted); }
@media(max-width:640px){
  .notif-dot-panel{ top:64px; left:12px; right:12px; width:auto; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); }
}

/* Ruang di kartu Approval yang sempit: avatar dan aksi membungkus tanpa gulir mendatar. */
.ruang-kepala{ min-width:0; flex-wrap:wrap; }
.ruang-anggota-strip{ flex-basis:200px; }
.ruang-kepala-aksi{ margin-left:auto; }

/* ===== BRIEF THE INTELLIGENCE di kartu Approval (6 Sep 2026) =====
   Host kedua lembar The Intelligence (assets/intel-brief.js, hukum 6). Bingkainya
   meniru pintu Ringkasan Agenda (.approval-overview) supaya tiga pintu kartu terbaca
   sebagai satu keluarga. Isinya memakai kelas .peta3-intel-* yang SAMA dengan overlay
   Peta, tetapi warnanya diikat ulang ke token kartu Approval (--approval-glass-ink /
   --approval-glass-muted ikut berbalik di tema gelap lewat selektor hidup
   `[data-theme="dark"] body[data-active-view="approval"]`): overlay Peta memakai
   putih di atas peta gelap, dan itu tak terbaca di kaca terang kartu Approval. */
.approval-intel{ margin:0; overflow:hidden; }
.approval-intel > summary{ align-items:center; }
.approval-intel > summary > span:first-child{ min-width:0; flex:1; }
.approval-intel > summary small{
  display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.approval-intel-chip{
  flex:0 0 auto; padding:3px 10px; border-radius:var(--ui-r-pill);
  border:1px solid transparent;
  font-size:10px; font-weight:850; letter-spacing:.08em; line-height:1.5;
  text-transform:uppercase; white-space:nowrap;
}
.approval-intel-chip.sah{
  color:var(--success);
  background:color-mix(in srgb,var(--success) 14%,transparent);
  border-color:color-mix(in srgb,var(--success) 34%,transparent);
}
.approval-intel-chip.draf{
  color:var(--warning);
  background:color-mix(in srgb,var(--warning) 14%,transparent);
  border-color:color-mix(in srgb,var(--warning) 36%,transparent);
}
.approval-intel-chip.sibuk{
  color:var(--info);
  background:color-mix(in srgb,var(--info) 12%,transparent);
  border-color:color-mix(in srgb,var(--info) 34%,transparent);
}
.approval-intel-chip.kosong{
  color:var(--muted);
  background:color-mix(in srgb,var(--muted) 10%,transparent);
  border-color:color-mix(in srgb,var(--muted) 28%,transparent);
}

body[data-active-view="approval"] #approvalList .approval-intel{
  margin:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.92);
  border-radius:22px;
  background:
    linear-gradient(136deg,rgba(255,255,255,.46),rgba(214,227,242,.35)),
    rgba(228,237,247,.40);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.99),
    0 12px 30px rgba(4,16,34,.10);
  backdrop-filter:blur(24px) saturate(116%);
  -webkit-backdrop-filter:blur(24px) saturate(116%);
}
body[data-active-view="approval"] #approvalList .approval-intel > summary{
  min-height:68px;
  padding:15px 17px;
  border:0;
  color:var(--approval-glass-ink);
  background:rgba(236,244,252,.46);
  transition:background .16s ease,box-shadow .16s ease;
}
body[data-active-view="approval"] #approvalList .approval-intel[open] > summary{
  border-bottom:1px solid rgba(255,255,255,.74);
  background:rgba(241,247,253,.54);
}
body[data-active-view="approval"] #approvalList .approval-intel > summary:hover,
body[data-active-view="approval"] #approvalList .approval-intel > summary:focus-visible{
  background:rgba(248,251,255,.64);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);
}
body[data-active-view="approval"] #approvalList .approval-intel > summary > span:first-child{
  font-size:18px;
  font-weight:800;
  letter-spacing:-.015em;
}
body[data-active-view="approval"] #approvalList .approval-intel > summary small{
  margin-top:4px;
  color:var(--approval-glass-muted);
  font-size:12px;
  font-weight:680;
  letter-spacing:0;
}
body[data-active-view="approval"] #approvalList .approval-intel > summary::after{
  width:32px;
  height:32px;
  border:1px solid rgba(255,255,255,.90);
  color:var(--approval-glass-ink);
  background:rgba(247,251,255,.64);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96);
}
body[data-active-view="approval"] #approvalList .approval-intel-body{
  display:block;
  padding:16px;
}

/* Badan kartu — warna teks & permukaan mengikuti kaca kartu Approval. */
.approval-intel-kartu{ display:flex; flex-direction:column; gap:10px; color:var(--ink); }
body[data-active-view="approval"] #approvalList .approval-intel-kartu{ color:var(--approval-glass-ink); }
.approval-intel-kartu .peta3-intel-status{
  margin:0; align-self:flex-start; padding:3px 11px; border-radius:var(--ui-r-pill);
  font:750 10.5px/1.6 system-ui; letter-spacing:.1em; text-transform:uppercase;
}
.approval-intel-kartu .peta3-intel-status.draf{ color:var(--warning); background:color-mix(in srgb,var(--warning) 14%,transparent); }
.approval-intel-kartu .peta3-intel-status.sah{ color:var(--success); background:color-mix(in srgb,var(--success) 14%,transparent); }
.approval-intel-kartu .peta3-intel-isi{ display:flex; flex-direction:column; gap:8px; }
.approval-intel-kartu .peta3-intel-ringkasan{ margin:0; color:inherit; font:500 14.5px/1.65 system-ui; }
.approval-intel-kartu .peta3-intel-kicker2{
  margin:6px 0 0; color:var(--approval-glass-muted, var(--muted));
  font:800 10.5px/1.4 system-ui; letter-spacing:.12em; text-transform:uppercase;
}
.approval-intel-kartu .peta3-intel-daftar{ margin:0; padding-left:20px; color:inherit; font:500 13.5px/1.7 system-ui; }
.approval-intel-kartu .peta3-intel-daftar.kurang{ color:var(--warning); }
.approval-intel-kartu .peta3-intel-tamu{
  padding:9px 12px; border-radius:12px; color:inherit;
  border:1px solid rgba(255,255,255,.72); background:rgba(255,255,255,.44);
}
.approval-intel-kartu .peta3-intel-tamu small{ display:block; margin-top:2px; color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-tamu.dari-internet{ border-style:dashed; }
.approval-intel-kartu .peta3-intel-tamu .peta3-intel-asal,
.approval-intel-kartu .peta3-intel-tamu small.catatan{ color:var(--warning); }
.approval-intel-kartu .peta3-intel-tamu.profil{ display:flex; flex-direction:column; gap:3px; }
.approval-intel-kartu .peta3-intel-yakin.cocok{ color:var(--success); background:color-mix(in srgb,var(--success) 14%,transparent); }
.approval-intel-kartu .peta3-intel-yakin.ragu{ color:var(--warning); background:color-mix(in srgb,var(--warning) 14%,transparent); }
.approval-intel-kartu .peta3-intel-yakin.tidak_ditemukan{ color:var(--approval-glass-muted, var(--muted)); background:color-mix(in srgb,var(--muted) 12%,transparent); }
.approval-intel-kartu .peta3-intel-sumber{ color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-dibaca{ margin:0; padding-left:18px; list-style:none; font:500 12.5px/1.7 system-ui; }
.approval-intel-kartu .peta3-intel-dibaca li.ok{ color:var(--success); }
.approval-intel-kartu .peta3-intel-dibaca li.gagal{ color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-dibaca li.sebagian{ color:var(--warning); }
.approval-intel-kartu .peta3-intel-dibaca li small{ color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-tunggu{ margin:0; color:var(--link); font:650 13px/1.5 system-ui; }
.approval-intel-kartu .peta3-intel-kosong{ margin:0; color:var(--approval-glass-muted, var(--muted)); font:500 13px/1.6 system-ui; }
.approval-intel-kartu .peta3-intel-galat{ margin:0; color:var(--danger); font:650 12.5px/1.5 system-ui; }
.approval-intel-kartu .peta3-intel-nota{ margin:0; color:var(--approval-glass-muted, var(--muted)); font:500 11px/1.4 system-ui; }
.approval-intel-kartu .peta3-intel-kaki{ margin:2px 0 0; color:var(--approval-glass-muted, var(--muted)); font:500 10.5px/1.5 system-ui; }
.approval-intel-kartu .peta3-intel-tahapan{ color:inherit; }
.approval-intel-kartu .peta3-intel-tahap,
.approval-intel-kartu .peta3-intel-tahap.nanti{ color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-tahap.aktif{ color:inherit; }
.approval-intel-kartu .peta3-intel-tahap.selesai{ color:inherit; }
.approval-intel-kartu .peta3-intel-tahap.selesai .tanda{ color:var(--success); }
.approval-intel-kartu .peta3-intel-tahap small{ color:var(--approval-glass-muted, var(--muted)); }
.approval-intel-kartu .peta3-intel-aksi{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.approval-intel-kartu .peta3-mini{
  min-height:38px; padding:8px 15px; border-radius:var(--ui-r-pill);
  border:1px solid color-mix(in srgb,var(--approval-glass-ink, var(--ink)) 22%,transparent);
  background:rgba(255,255,255,.55); color:inherit;
  font:700 var(--fs-label)/1.2 system-ui; cursor:pointer;
}
.approval-intel-kartu .peta3-mini:hover{ background:rgba(255,255,255,.78); }
.approval-intel-kartu .peta3-mini.sahkan{
  color:var(--success);
  border-color:color-mix(in srgb,var(--success) 40%,transparent);
  background:color-mix(in srgb,var(--success) 14%,rgba(255,255,255,.55));
}
.approval-intel-kartu .peta3-mini.sahkan:hover{ background:color-mix(in srgb,var(--success) 22%,rgba(255,255,255,.7)); }
.approval-intel-kartu .peta3-mini.silang{ margin-left:auto; border-style:dashed; }

/* Tombol silang dari sisi Peta (overlay gelap) — bergaya seperti tombol overlay lain. */
.peta3-intel-aksi .peta3-mini.silang{ border-color:rgba(133,183,235,.45); }

/* Tema gelap: token --approval-glass-ink/--approval-glass-muted berbalik TERANG lewat
   selektor hidup `[data-theme="dark"] body[data-active-view="approval"]` (app-latest.css
   ~7574), tetapi kaca pintu tetap terang bila tidak diredupkan — teks terang di kaca
   terang = tak terbaca (terbukti di tangkapan layar harness 6 Sep 2026; pintu tetangga
   memakai selektor `body[data-theme="dark"]` yang MATI, dicatat sebagai temuan terpisah).
   Karena itu permukaan pintu Brief dan isinya diredupkan di sini dengan selektor hidup. */
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel{
  border-color:rgba(255,255,255,.18);
  background:
    linear-gradient(138deg,rgba(255,255,255,.13),rgba(255,255,255,.035)),
    rgba(14,29,49,.66);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,0,0,.32);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel > summary{
  background:rgba(255,255,255,.06);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel[open] > summary{
  border-bottom-color:rgba(255,255,255,.14);
  background:rgba(255,255,255,.09);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel > summary:hover,
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel > summary:focus-visible{
  background:rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel > summary::after{
  border-color:rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel-kartu .peta3-intel-tamu{
  border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.08);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel-kartu .peta3-mini{
  border-color:rgba(255,255,255,.26); background:rgba(255,255,255,.10);
}
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel-kartu .peta3-mini:hover{ background:rgba(255,255,255,.18); }
[data-theme="dark"] body[data-active-view="approval"] #approvalList .approval-intel-kartu .peta3-mini.sahkan{
  background:color-mix(in srgb,var(--success) 22%,rgba(255,255,255,.08));
}

@media(max-width:700px){
  body[data-active-view="approval"] #approvalList .approval-intel > summary{ min-height:0; padding:13px 14px; }
  body[data-active-view="approval"] #approvalList .approval-intel > summary > span:first-child{ font-size:16px; }
  body[data-active-view="approval"] #approvalList .approval-intel-body{ padding:12px; }
  .approval-intel > summary small{
    white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  }
  .approval-intel-kartu .peta3-mini.silang{ margin-left:0; }
}

/* Arahan Menteri yang tersimpan pada agenda vs pesan yang sedang disematkan
   (7 September 2026). Keduanya dulu memakai gaya `.ruang-sematan` yang sama
   persis, sehingga melepas sematan tampak tidak mengubah apa pun — pemilik
   melaporkannya sebagai "sematan lengket". Pita arahan kini bergaya netral
   (bukan kuning penanda sematan) supaya perbedaannya terbaca sekilas.
   Kelas `.is-arahan` SUDAH ada di markup dan dipaku uji; yang kurang gayanya. */
.ruang-sematan.is-arahan{
  border-color:var(--line);
  background:var(--panel-strong);
}
.ruang-sematan.is-arahan small{ color:var(--muted); }

/* Menu pesan — 8 September 2026: klik kanan / tekan-tahan, tanpa toolbar hover.
   Portal di body menjaga menu utuh di Ringkasan, Detail, dan kartu Approval. */
.ruang-pesan .ruang-pesan-aksi[hidden],
.ruang-pesan .ruang-reaksi-pilihan[hidden]{ display:none; }
.ruang-pesan[aria-haspopup="menu"]:focus-visible > .ruang-gelembung{
  outline:2px solid var(--link); outline-offset:3px;
}
.ruang-pesan[aria-expanded="true"] > .ruang-gelembung{
  outline:2px solid var(--link); outline-offset:3px;
}
.ruang-pesan-menu{
  position:fixed; z-index:290; box-sizing:border-box;
  width:max-content; min-width:180px; padding:6px; overflow:auto;
  border:1px solid var(--line); border-radius:14px;
  background:var(--panel-strong); color:var(--ink);
  box-shadow:0 8px 32px rgba(9,14,22,.2);
  overscroll-behavior:contain;
}
.ruang-pesan-menu > button{
  display:flex; align-items:center; width:100%; min-height:44px;
  margin:0; padding:10px 14px; border:0; border-radius:8px;
  background:transparent; color:inherit; text-align:left; white-space:normal;
  font:inherit; font-size:14px; line-height:1.4; cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.ruang-pesan-menu > button:hover,
.ruang-pesan-menu > button:focus-visible{ background:var(--ruang-kanvas); }
.ruang-pesan-menu > button:focus-visible{ outline:2px solid var(--link); outline-offset:-2px; }
.ruang-pesan-menu > .ruang-pesan-menu-hapus{ color:var(--danger); }
@media(forced-colors:active){
  .ruang-pesan-menu{ background:Canvas; color:CanvasText; border-color:CanvasText; }
}
/* Riwayat perubahan — 8 September 2026. Semua aturan hanya untuk audit agenda. */
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit){
  background:var(--surface); color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 14%,transparent); box-shadow:none;
}
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) summary{
  color:var(--ink); list-style:none; cursor:pointer; font-weight:600; line-height:1.5; min-width:0;
}
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) summary::after{
  content:""; width:7px; height:7px; padding:0; border:solid var(--muted); border-width:0 1.5px 1.5px 0;
  background:none; border-radius:0; transform:rotate(-45deg); align-self:center; flex:none; margin-right:4px;
}
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit)[open] > summary::after,
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) details[open] > summary::after{ transform:rotate(45deg); }
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) > summary{
  display:flex; gap:14px; padding:20px 22px; font-size:18px;
}
.cc-audit .cc-audit-count{ margin-left:auto; white-space:nowrap; font-size:12px; color:var(--muted); font-weight:400; }
.cc-audit .cc-audit-body{ padding:0 22px 20px; }
.cc-audit .cc-audit-zone{ margin:0 0 12px; color:var(--muted); font-size:12px; }
.cc-audit .cc-audit-day{ border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) .cc-audit-day > summary{
  display:flex; align-items:center; gap:12px; padding:14px 0; font-size:12px; color:var(--muted); min-height:48px;
}
.cc-audit .cc-audit-entry + .cc-audit-entry{ border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); }
:is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) .cc-audit-entry > summary{
  display:grid; grid-template-columns:86px 30px minmax(0,1fr) 12px; gap:12px; align-items:start; padding:18px 0; font-size:14px;
}
.cc-audit .cc-audit-time{ font-size:14px; font-variant-numeric:tabular-nums; font-weight:600; padding-top:2px; }
.cc-audit .cc-audit-time small{ font-size:11px; color:var(--muted); margin-left:3px; font-weight:400; }
.cc-audit .cc-audit-symbol{ display:grid; place-items:center; width:30px; height:30px; background:var(--soft); border-radius:9px; color:var(--link); font-size:18px; font-weight:500; }
.cc-audit .cc-audit-copy{ min-width:0; display:grid; gap:4px; }
.cc-audit .cc-audit-copy strong{ font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.cc-audit .cc-audit-description{ font-size:13px; color:var(--ink); font-weight:400; overflow-wrap:anywhere; }
.cc-audit .cc-audit-actor{ font-size:12px; color:var(--muted); font-weight:400; overflow-wrap:anywhere; }
.cc-audit .cc-audit-entry[open] .cc-audit-copy strong{ color:var(--link); }
.cc-audit .cc-audit-detail{ margin:0 0 18px 140px; padding:16px; border-radius:12px; background:var(--soft); overflow-wrap:anywhere; }
.cc-audit .cc-audit-detail-label{ display:block; margin-bottom:8px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.cc-audit .cc-audit-detail ul{ margin:0; padding-left:18px; font-size:13px; line-height:1.6; }
.cc-audit .cc-audit-note{ font-size:12px; color:var(--muted); margin:10px 0 0; }
.cc-audit .cc-audit-detail dl{ border-top:1px solid color-mix(in srgb,var(--ink) 12%,transparent); padding-top:12px; margin:12px 0 0; display:grid; grid-template-columns:48px minmax(0,1fr); gap:6px 10px; font-size:12px; line-height:1.5; }
.cc-audit .cc-audit-detail dt{ color:var(--muted); }
.cc-audit .cc-audit-detail dd{ margin:0; }
.cc-audit .cc-audit-empty{ color:var(--muted); font-size:14px; }
@media(max-width:600px){
  :is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) > summary{ padding:18px 16px; font-size:17px; }
  .cc-audit .cc-audit-body{ padding:0 16px 16px; }
  :is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) .cc-audit-entry > summary{ grid-template-columns:30px minmax(0,1fr) 12px; gap:8px 10px; }
  .cc-audit .cc-audit-time{ grid-column:2; grid-row:1; font-size:12px; padding:0; }
  .cc-audit .cc-audit-symbol{ grid-column:1; grid-row:1 / span 2; }
  .cc-audit .cc-audit-copy{ grid-column:2; grid-row:2; }
  :is(.cc-audit,#detailModal.detail-workspace-revamp-active .detail-workspace-audit .cc-audit) .cc-audit-entry > summary::after{ grid-column:3; grid-row:1 / span 2; }
  .cc-audit .cc-audit-detail{ margin-left:0; padding:14px; }
}
/* ============================================================================
   CETAK — pisahkan halaman aktif dari Mode Persentase (10 September 2026).
   Aturan cetak lama menyembunyikan main dan membuka overlay presentasi walau
   belum pernah digunakan. Akibatnya File > Print pada halaman biasa mencetak
   bidang kosong atau minggu lama. Ukuran satu lembar tetap berlaku hanya saat
   presentasi aktif; halaman lain boleh berlanjut ke lembar berikutnya.
   ========================================================================== */
@media print{
  html:not(:has(#presentationOverlay.active)),
  body:not(:has(#presentationOverlay.active)){
    width:auto !important;
    height:auto !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body:not(:has(#presentationOverlay.active)) main{display:block !important;}
  .presentation-overlay:not(.active){display:none !important;}

  /* Cetak hanya minggu yang terbuka. Panel aplikasi dan pratinjau dokumen
     tidak ikut menjadi lapisan di belakang/di atas hasil cetak. */
  body:has(#presentationOverlay.active) > :not(#presentationOverlay){display:none !important;}
  #presentationOverlay.active,
  #presentationOverlay.active *{
    animation:none !important;
    transition:none !important;
    will-change:auto !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    contain:none !important;
    content-visibility:visible !important;
  }
  #presentationOverlay.active,
  #presentationOverlay.active .presentation-shell,
  #presentationOverlay.active #presentationGrid,
  #presentationOverlay.active .presentation-fit-stage{
    transform:none !important;
    translate:none !important;
    scale:none !important;
    rotate:none !important;
    opacity:1 !important;
  }
  /* File > Print: ukur tinggi alami sebelum fitSheet menyesuaikan satu A4.
     Hilangkan batas lane yang dahulu membuang agenda padat di luar halaman. */
  #presentationOverlay.active .pdf-slide{
    position:absolute !important;
    transform-origin:top left !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
  #presentationOverlay.active .pdf-timeline-grid{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-rows:auto auto auto !important;
  }
  #presentationOverlay.active .pdf-day-col{display:contents !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(1) > *{grid-column:1 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(2) > *{grid-column:2 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(3) > *{grid-column:3 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(4) > *{grid-column:4 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(5) > *{grid-column:5 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(6) > *{grid-column:6 !important;}
  #presentationOverlay.active .pdf-day-col:nth-child(7) > *{grid-column:7 !important;}
  #presentationOverlay.active .pdf-lane{max-height:none !important;}
  #presentationOverlay.active .pdf-lane-top{grid-row:1 !important;}
  #presentationOverlay.active .pdf-day-band{grid-row:2 !important;}
  #presentationOverlay.active .pdf-lane-bottom{grid-row:3 !important;}
  #presentationOverlay.active .pdf-event{min-height:0 !important;}
  #presentationOverlay.active .presentation-fit-stage{position:relative !important;}
}

/* ===== LENCANA MERAH ARAHAN (12 Sep 2026) =====
   Angka pesan Ruang Percakapan yang belum dibaca pada KARTU agenda — Home (di bawah
   kolom jam), Tab Agenda (timebox), Kalender Harian/Mingguan/Bulanan (pojok kanan
   atas blok / ujung chip & pita), Approval, popup daftar tanggal. Satu bahasa visual
   dengan iOS (CCTheme.Ruang.lencanaMerah*) dan Android (CCColors.ruangLencanaMerah):
   kapsul merah penuh, tinta putih, angka tebal tabular, cincin 1,5 px warna permukaan.
   Token sendiri: --status-rejected/--danger tema gelap adalah TINTA pucat (#fecaca),
   bukan latar — digit putih di atasnya gagal kontras. Kontras #fff/#b42318 = 7,0:1,
   #fff/#dc2626 = 4,8:1. Aturan .ruang-lencana-kartu lama (app-patches-3.css) dibekukan
   uji dan TIDAK disentuh — pemanggilnya kini menghasilkan kelas ini.
   Blok :root di bawah ini SENGAJA sesudah blok LONCENG THE DOT (test-ui-tokens.js
   mengambil :root{ pertama sesudah penanda lonceng). */
:root{ --ruang-lencana-merah-bg:#b42318; --ruang-lencana-merah-ink:#ffffff; }
[data-theme="dark"]{ --ruang-lencana-merah-bg:#dc2626; --ruang-lencana-merah-ink:#ffffff; }
.ruang-lencana-merah{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--ruang-lencana-merah-bg); color:var(--ruang-lencana-merah-ink);
  font-size:11px; font-weight:var(--fw-heavy); line-height:1; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1.5px var(--panel); white-space:nowrap; cursor:pointer; flex:0 0 auto;
}
.ruang-lencana-merah[hidden]{ display:none; }
.ruang-lencana-merah.is-mini{ min-width:14px; height:14px; padding:0 4px; font-size:9px; }
/* Home: `.home-agenda-mini span` (app-views.css) menimpa span polos dengan display:block,
   warna muted, dan font caption — spesifisitas (0,2,1) di sini mengalahkannya. Baris Home
   tetap 56 px: 14 + 1 + 8 + 1 + 18 muat di 46 px isi.
   Lencana yang hidden memakai visibility:hidden (BUKAN display:none): <time> adalah grid
   yang dipusatkan dalam baris 56 px — bila baris ketiganya lenyap, jam melompat 10 px
   ke bawah saat angka hilang dan tak sebaris dengan baris berlencana. Tempatnya
   dicadangkan tetap; pembaca layar tetap melewati elemen visibility:hidden. */
.home-agenda-mini time .ruang-lencana-merah{
  display:inline-flex; justify-self:end; margin-top:1px; overflow:visible;
  color:var(--ruang-lencana-merah-ink); font-size:11px; line-height:1;
}
.home-agenda-mini time .ruang-lencana-merah[hidden]{ display:inline-flex; visibility:hidden; }
/* Tab Agenda: `#view-agenda .timebox span` (1,1,1) memberi warna muted 12px DAN display:block
   (app.css `.timebox span`) — (1,2,0) menang, dan display wajib disetel ulang di sini:
   tanpa itu kapsul jadi block, align-items mati, angka menempel di tepi atas kapsul. */
#view-agenda .timebox .ruang-lencana-merah{ display:inline-flex; color:var(--ruang-lencana-merah-ink); font-size:11px; margin-top:2px; }
#view-agenda .timebox .ruang-lencana-merah[hidden]{ display:none; }
/* Popup daftar tanggal (#calendarDateModal, di luar #view-calendar): tombol bergrid
   `auto minmax(0,1fr)` — anak ketiga in-flow jatuh ke baris grid baru selebar kolom jam
   (pita merah 131×18 px, tombol membengkak 50→77 px). Lencana absolut di pojok kanan
   atas; judul (nowrap + ellipsis sampai tepi kanan) diberi ruang hanya saat lencana tampak. */
#calendarDateModal .calendar-date-event{ position:relative; }
#calendarDateModal .calendar-date-event .ruang-lencana-merah{ position:absolute; top:6px; right:8px; }
#calendarDateModal .calendar-date-event:has(.ruang-lencana-merah:not([hidden])) > span:not(.ruang-lencana-merah){ padding-right:26px; }
/* Kalender. Kartu kanvas Harian/Mingguan sudah position:absolute (containing block);
   lencana Mingguan menempel pojok kanan atas. Pita & chip menjadi flex supaya judul
   yang ber-ellipsis, bukan lencana, yang menyusut. Tinggi chip Bulanan tetap 20 px
   (lencana mini 14 px in-flow). */
#view-calendar .day-timed-head .ruang-lencana-merah{ margin-left:auto; }
/* Baris Blok Harian: lencana adalah anak TERAKHIR tombol, absolut di pojok kanan atas
   (ponsel: grid 72px/1fr/auto — anak in-flow ke-4 akan melompat ke baris grid baru);
   di desktop ≥761px baris jadi pil flex sebaris, lencana ikut alur di ujung kanan. */
#view-calendar .calendar-day-event{ position:relative; }
#view-calendar .calendar-day-event .ruang-lencana-merah{ position:absolute; top:6px; right:8px; }
@media (min-width:761px){
  #view-calendar .day-allday .calendar-day-event .ruang-lencana-merah{ position:static; margin-left:2px; }
}
@media (max-width:760px){
  /* ponsel: judul (kolom 2 sampai tepi kanan, clamp 2 baris + ellipsis) menyisakan ruang
     untuk kapsul absolut pada baris pertamanya, hanya saat lencana tampak. */
  #view-calendar .calendar-day-event:has(.ruang-lencana-merah:not([hidden])) .calendar-day-event-title{ padding-right:22px; }
}
#view-calendar .week-cols .week-agenda-item .ruang-lencana-merah{ position:absolute; top:4px; right:4px; }
/* Kartu Mingguan yang menyempit karena bentrok kolom (≈96 px): teks jam membungkus di bawah
   lencana absolut. Beri ruang pada jam (kolom) / seluruh kartu (.is-short, satu baris)
   hanya saat lencana tampak. */
#view-calendar .week-cols .week-agenda-item:not(.is-short):has(.ruang-lencana-merah:not([hidden])) .week-agenda-time{ padding-right:22px; }
#view-calendar .week-cols .week-agenda-item.is-short:has(.ruang-lencana-merah:not([hidden])){ padding-right:22px; }
#view-calendar button.week-band, #view-calendar .calendar-band{ display:flex; align-items:center; gap:3px; } /* pita libur (div) tetap teks ber-ellipsis */
#view-calendar .week-band-judul, #view-calendar .calendar-band-judul{
  min-width:0; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Chip Bulanan: `.calendar-chip-time` nowrap flex:0 0 auto ±101 px ("09:00 - 10:00 WIB") di
   chip overflow:hidden — item flex terakhir (lencana) yang terpotong begitu chip < ±140 px
   (≤820 px judul disembunyikan, chip 30–62 px → lencana lenyap sama sekali). Lencana absolut
   di tepi kanan chip menimpa ekor jam, bukan hilang; padding kanan chip dibuka hanya saat
   lencana tampak supaya judul/jam ber-ellipsis sebelum kapsul. Tinggi chip tetap 20 px. */
#view-calendar .calendar-day .calendar-pill.calendar-chip{ position:relative; }
#view-calendar .calendar-day .calendar-pill.calendar-chip .ruang-lencana-merah{
  position:absolute; top:50%; right:4px; transform:translateY(-50%); margin-left:0;
}
#view-calendar .calendar-day .calendar-pill.calendar-chip:has(.ruang-lencana-merah:not([hidden])){ padding-right:24px; }
#view-calendar .calendar-day .calendar-more .ruang-lencana-merah{ margin-left:4px; vertical-align:middle; }
#view-calendar .week-allday-more .ruang-lencana-merah,
#view-calendar .day-allday-more .ruang-lencana-merah{ margin-left:4px; vertical-align:middle; }
/* SUMBER angka kartu = lencana pintu Ruang Percakapan di Ringkasan Agenda, Detail Agenda,
   dan kartu Approval (`.ruang-pintu .ruang-lencana`, app-patches-3.css memberinya warna
   aksen biru). Permintaan pemilik 12 Sep 2026: pintu memakai kapsul MERAH yang sama supaya
   pengguna melihat dari mana titiknya berasal. Aturan lama dibiarkan; (0,2,0) menang. */
.ruang-pintu .ruang-lencana{
  min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:var(--ruang-lencana-merah-bg); color:var(--ruang-lencana-merah-ink);
  font-size:11px; font-weight:var(--fw-heavy); line-height:1; font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 1.5px var(--panel);
}
.ruang-pintu .ruang-lencana[hidden]{ display:none; }

/* Dua ruang di pintu percakapan yang sama — permintaan pemilik 12 September 2026. */
.ruang-dua { border: 1px solid var(--ruang-garis); border-radius: 18px; overflow: hidden; background: var(--ruang-kepala-bg); }
.ruang-dua-judul { padding: 16px 20px 12px; font-size: 14px; font-weight: 750; color: var(--ink, #263c4b); }
.ruang-dua-pilihan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 14px; }
.ruang-dua-pilihan button { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; padding: 13px 15px; border: 1px solid var(--ruang-garis); border-radius: 12px; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.ruang-dua-pilihan button > span:last-child { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ruang-dua-pilihan strong { font-size: 14px; }
.ruang-dua-pilihan small { font-size: 12px; opacity: .75; }
.ruang-dua-pilihan button[aria-selected="true"] { background: color-mix(in srgb, var(--ruang-nama-5) 10%, var(--ruang-kepala-bg)); border-color: var(--ruang-nama-5); box-shadow: inset 0 0 0 1px var(--ruang-nama-5); }
.ruang-dua-pilihan button:focus-visible { outline: 3px solid var(--ruang-nama-5); outline-offset: 2px; }
.ruang-dua [data-ruang-panel][hidden] { display: none !important; }
.ruang-dua .ruang-percakapan { margin: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; }
.ruang-dua-terkunci { margin: 0; padding: 40px 24px; text-align: center; color: var(--ruang-meta-ink); line-height: 1.6; }
@media(max-width: 480px) {
  .ruang-dua-pilihan { gap: 6px; padding: 0 10px 10px; }
  .ruang-dua-pilihan button { padding: 11px 9px; gap: 6px; }
  .ruang-dua-pilihan strong { font-size: 12px; }
  .ruang-dua-pilihan small { font-size: 10px; }
}
.ruang-dua-notifikasi { color: var(--ruang-meta-ink); font-size: 11px; margin-right: 8px; }

/* Berbagi Posisi Saat Bertugas — 12 September 2026. */
.agenda-location{background:var(--surface,#fff);color:var(--ink,#172f42);border:1px solid color-mix(in srgb,var(--ink,#172f42) 14%,transparent);border-radius:20px;padding:20px;margin:16px 0;min-width:0;}
.agenda-location[hidden]{display:none!important;}
.agenda-location-head,.agenda-location-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.agenda-location-head{justify-content:space-between;}
.agenda-location-head h4{font-size:18px;margin:4px 0;}
.agenda-location-kicker{font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted,#566579);}
.agenda-location-count{font-size:12px;background:color-mix(in srgb,#008c72 10%,var(--surface,#fff));color:var(--ink,#172f42);padding:7px 12px;border-radius:20px;}
.agenda-location-status{font-size:14px;line-height:1.5;margin:12px 0;}
.agenda-location-description{font-size:12px;line-height:1.5;color:var(--muted,#566579);}
.agenda-location-actions{margin-top:14px;font-size:12px;}
.agenda-location .btn,.agenda-location-dialog .btn{min-height:42px;white-space:normal;}
.agenda-location-stop{color:#b32931!important;border-color:currentColor!important;}
.agenda-location-team{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(240px,1fr);gap:12px;margin-top:18px;}
.agenda-location-team[hidden]{display:none!important;}
.agenda-location-map{min-height:340px;min-width:0;border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink,#172f42) 5%,var(--surface,#fff));display:grid;place-items:center;font-size:13px;line-height:1.5;}
.agenda-location-roster{display:flex;flex-direction:column;gap:4px;min-width:0;}
.agenda-location-person{font:inherit;border:0;border-radius:12px;background:transparent;color:inherit;text-align:left;display:flex;gap:11px;padding:11px;align-items:center;min-height:64px;cursor:pointer;}
.agenda-location-person:hover:not(:disabled){background:color-mix(in srgb,#008c72 8%,var(--surface,#fff));}
.agenda-location-person:disabled{cursor:default;opacity:1;}
.agenda-location-person>span:last-child{min-width:0;overflow-wrap:anywhere;}
.agenda-location-person strong,.agenda-location-person small{display:block;line-height:1.5;}
.agenda-location-person strong{font-size:13px;}
.agenda-location-person small{font-size:12px;color:var(--muted,#566579);}
.agenda-location-person.stale small:last-child{color:light-dark(#8d5600,#f5c265);}
.agenda-location-avatar{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:color-mix(in srgb,#008c72 12%,var(--surface,#fff));font-size:12px;}
.agenda-location-detail{grid-column:1/-1;font-size:12px;color:var(--muted,#566579);line-height:1.6;margin:4px 0;}
.agenda-location-dialog{border:1px solid color-mix(in srgb,var(--ink,#172f42) 15%,transparent);border-radius:24px;padding:26px;background:var(--surface,#fff);color:var(--ink,#172f42);width:min(520px,calc(100vw - 32px));max-height:85dvh;box-sizing:border-box;overflow:auto;box-shadow:0 18px 80px #0003;}
.agenda-location-dialog::backdrop{background:#09182b88;}
.agenda-location-dialog h3{font-size:22px;margin:0 0 18px;}
.agenda-location-dialog p{font-size:14px;line-height:1.6;}
.agenda-location-dialog label{display:block;font-size:13px;}
.agenda-location-dialog select,.agenda-location-dialog input{display:block;width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:12px;border-radius:12px;background:var(--surface,#fff);color:var(--ink,#172f42);border:1px solid color-mix(in srgb,var(--ink,#172f42) 22%,transparent);margin:8px 0;}
.agenda-location-candidate{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0;font-size:14px;}
.agenda-location-candidate span{min-width:0;overflow-wrap:anywhere;}
@media(max-width:700px){.agenda-location{padding:16px;}.agenda-location-team{grid-template-columns:1fr;}.agenda-location-map{min-height:310px;}.agenda-location-actions>.btn{flex:1 1 auto;}.agenda-location-dialog{padding:20px;}.agenda-location-candidate{flex-wrap:wrap;}}
.agenda-location-map{height:420px;}
.agenda-location-invitation-summary{width:min(980px,calc(100vw - 32px));}
.agenda-location-invites{display:flex;flex-direction:column;gap:10px;}
@media(max-width:700px){.agenda-location-map{height:310px;}}