/* SiberRadar — seluruh gaya halaman: token warna kedua tema, kerangka layar, tabel
 * exposure, panel, tooltip, dan ketiga blok @media (960px, 640px, print).
 *
 * Langkah 5 dari docs/superpowers/specs/2026-08-02-pecah-frontend-design.md. Berbeda dari
 * kelima modul JS sebelumnya, yang ini tidak punya pembungkus apa pun — CSS tidak butuh
 * IIFE dan tidak mengekspor nama. Yang perlu dijaga justru satu hal yang tidak terlihat
 * di berkas ini sama sekali:
 *
 *   URUTAN <link> DI DALAM <helmet> ADALAH KEBENARANNYA.
 *
 * Blok <style> yang isinya pindah ke sini berdiri SESUDAH kedua stylesheet `_ds/`, jadi
 * aturan di bawah ini menimpa keduanya pada spesifisitas yang sama. Tag <link> penggantinya
 * WAJIB berdiri di tempat yang sama — sesudah `colors_and_type.css` dan `styles.css`, bukan
 * sebelum. Menaikkannya satu baris tidak menghasilkan satu pun error: yang berubah hanya
 * siapa yang menang, dan gejalanya adalah warna serta jarak yang bergeser diam-diam di
 * layar yang tidak sedang dibuka siapa pun.
 *
 * Tidak ada satu pun `url(...)` relatif di sini, dan itu disengaja: path relatif di dalam
 * CSS resolve terhadap letak BERKAS CSS-nya, bukan halaman yang memuatnya. Selama aset
 * dirujuk dari HTML (`assets/...`) dan bukan dari sini, memindahkan berkas ini tidak bisa
 * mematahkan gambar mana pun. Kalau suatu hari ada `url()` masuk, ingat bahwa acuannya
 * adalah `Design/`, sama seperti halamannya — jadi kebetulan aman, bukan aman by design.
 *
 * Seperti setiap berkas yang dikirim terpisah: WAJIB masuk SHELL_URLS di sw.js dan
 * menaikkan VERSION-nya. Kalau lupa, halaman baru dari cache akan dirender TANPA gaya
 * sama sekali begitu offline — bukan degradasi, melainkan tumpukan teks polos.
 */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
.sr-app{
  font-family:var(--font-sans);
  font-variant-numeric:tabular-nums;
  min-height:100vh;
  color:var(--sr-fg1);
  background:var(--sr-canvas);
  --sr-canvas:#F3F5F8; --sr-surface:#FFFFFF; --sr-surface-2:#EEF1F5;
  /* --sr-fg3 dulu #8A94A6 = 2,70:1 di atas --sr-surface-2, dan ia dipakai 184 kali:
     setiap header kolom, setiap label small-caps, setiap keterangan di bawah angka.
     Nyaris semuanya 9,5–11,5px, jadi tidak ada keringanan "large text". #616B7A
     menaikkannya ke 4,76:1 pada permukaan TERBURUK — bukan pada #FFFFFF, yang adalah
     cara mengukur yang membuat token ini lulus di atas kertas selama ini. */
  --sr-border:#E1E4E8; --sr-fg1:#131C2B; --sr-fg2:#4A5568; --sr-fg3:#616B7A;
  --sr-head:#07285A; --sr-brandbar:#07285A; --sr-shadow:0 4px 14px rgba(7,40,90,.08);
  --sr-track:#E7EBF1;
  /* Tinta band. SENGAJA terpisah dari BAND_HEX (sr-format.js), yang tetap jadi warna
     ISIAN untuk pil, gauge, radar, dan PDF — mengubah konstanta itu membuat dashboard
     dan laporan bercerita beda (PRD §4.3). Yang ini cuma dipakai saat warnanya jadi
     TEKS, dan band adalah satu-satunya kolom yang hanya dikodekan warna + kata: kalau
     katanya tidak terbaca, yang tersisa cuma warna.
     ⚠️ Nilainya SAMA DENGAN BAND_HEX, dan itu keputusan pemilik produk 6 Agustus 2026
     sesudah melihat hasilnya: lightness yang digeser demi 4,5:1 membuat Very High jadi
     merah muda pucat di tema gelap (#E470A8) — skor 856 berhenti terbaca sebagai
     peringatan, dan itulah satu-satunya pekerjaan warna ini. Token-nya SENGAJA
     dipertahankan meski isinya kembali sama: ia satu tempat untuk menggeser lagi kalau
     kontrasnya mau dinaikkan tanpa menyentuh belasan pemanggil, dan menghapusnya berarti
     mengembalikan hex ke dalam kode yang sudah dibersihkan.
     Konsekuensi yang diterima: sebagai teks kelimanya di bawah 4,5:1 di tema terang
     (2,21–4,43:1). Yang menahan color-not-only tetap ada — katanya ditulis penuh
     ("Very High"), bukan warna saja. */
  --sr-ink-vhigh:#D83483; --sr-ink-high:#F08A2C; --sr-ink-med:#C99A00;
  --sr-ink-low:#5A9E2F; --sr-ink-vlow:#0FA98C;
  /* Magenta punya masalah yang SAMA dan lebih sering: putih di atas --magenta-500
     cuma 4,43:1 — itu CTA utama produk — dan magenta sebagai TEKS cuma 3,91:1 di
     atas --sr-surface-2. Dua pemakaian, dua perbaikan berbeda:
       · isian/border/accent-color tetap --magenta-500, dinaikkan ke #CE2C7B di bawah
         supaya putih di atasnya jadi 4,92:1. Tidak bisa dibedakan mata dari yang lama.
       · warnanya sebagai teks pindah ke token ini. Nilai terangnya adalah
         --accent-press milik design system, bukan warna karangan sendiri. */
  /* Digelapkan dari #B82A6F (--accent-press design system): permukaan tersulit ternyata
     BUKAN canvas melainkan wash chip negara itu sendiri — #EED4E4, yaitu magenta 14% di
     atas latar kartu — tempat ia cuma 4,22:1. Terlihat hanya di lebar telepon, karena
     chip itu tidak dirender di tabel desktop. */
  --sr-ink-accent:#AD2768;
  /* Tiga tinta terakhir, ditemukan hanya SESUDAH pengukuran dijalankan di viewport
     desktop sungguhan — di layout telepon ketiga elemennya tidak dirender, jadi
     hitungan node audit yang asli tidak pernah memuatnya.
       · teal: plat negara 'MY' — teks --teal-500 di atas wash teal 16%-nya sendiri.
       · warn: lencana Failed dan tombol Retry now.
       · delta naik/turun: kolom Δ, satu-satunya angka yang artinya dibawa warnanya.
     Permukaan yang dihitung termasuk wash chip-nya, bukan cuma canvas — di situlah
     ketiganya gagal, dan itu permukaan yang tidak pernah diperiksa siapa pun. */
  --sr-ink-teal:#066D61; --sr-ink-warn:#9B5615;
  --sr-ink-up:#C12570; --sr-ink-down:#0A7662;
  /* Isian: putih di atasnya 4,43 → 4,92. BUKAN warna teks — untuk itu ada
     --sr-ink-accent di atas. Override bertingkat lokal, berkas design system-nya
     sendiri tidak disentuh: ia dipakai produk lain juga. */
  --magenta-500:#CE2C7B;
}
.sr-app[data-theme="dark"]{
  --sr-canvas:#04152F; --sr-surface:#0A2450; --sr-surface-2:#0F2E5F;
  --sr-border:#1E3E70; --sr-fg1:#EAF1FB; --sr-fg2:#9DB0CE; --sr-fg3:#8497BA;
  --sr-head:#EAF1FB; --sr-brandbar:#061E43; --sr-shadow:0 8px 24px rgba(0,0,0,.35);
  --sr-track:#13315F;
  /* Sama dengan isiannya — lihat catatan panjang di blok terang. Di sinilah geseran
     itu paling terlihat dan paling merugikan: Very High yang dinaikkan ke #E470A8
     terbaca sebagai merah muda pastel di atas navy, warna yang mengatakan kebalikan
     dari yang dimaksud angkanya. */
  --sr-ink-vhigh:#D83483; --sr-ink-high:#F08A2C; --sr-ink-med:#C99A00;
  --sr-ink-low:#5A9E2F; --sr-ink-vlow:#0FA98C;
  /* Magenta merek 2,71:1 di atas navy — gagal telak sebagai teks di tema gelap,
     dan di sinilah ia paling sering muncul. */
  --sr-ink-accent:#EC7FB2;
  --sr-ink-teal:#09B6A1; --sr-ink-warn:#E48C3B;
  --sr-ink-up:#E781B2; --sr-ink-down:#10B596;
}
/* Permukaan yang SELALU navy, apa pun tema halamannya: tooltip blip radar (#0A1424),
   overlay laporan (#0C2245), blok peers. Tanpa ini, tinta band di dalamnya diselesaikan
   memakai varian TERANG waktu halamannya terang — magenta gelap di atas hitam — dan
   itu justru kebalikan dari yang dibutuhkan. Menimpa tokennya di sini berarti tidak ada
   satu pun pemanggil yang perlu tahu bahwa permukaannya istimewa. */
.sr-onnavy{
  --sr-ink-vhigh:#D83483; --sr-ink-high:#F08A2C; --sr-ink-med:#C99A00;
  --sr-ink-low:#5A9E2F; --sr-ink-vlow:#0FA98C; --sr-ink-accent:#EC7FB2;
}
a{color:var(--sr-ink-accent);text-decoration:none}
a:hover{text-decoration:underline}
.sr-pdf-short{display:none}
/* Same mechanism as .sr-pdf-pre/.sr-pdf-short below: the long label is the default
   and a shorter one takes over under 640px. Four Settings tabs at their full names
   measure wider than a 375px screen, and the alternative — a horizontal scroller —
   would be a component this app does not have. */
.sr-tab-short{display:none}
/* Mekanisme yang sama sekali lagi, untuk tombol Market scope: nama panjang default,
   nama pendek mengambil alih di bawah 640px. Tiga pasar dieja penuh ("Brunei, Indonesia
   and Malaysia") menuntut ~300px di dalam tombol selebar layar 375px yang sudah memakai
   96px untuk ikon, chevron dan pil hitungan. */
.sr-scope-short{display:none}
/* Baris kotak pencarian di dalam panel menu. `min-width` di sini adalah LANTAI LEBAR
   panelnya, dan itu satu-satunya tugasnya: menu Country di Settings shrink-to-fit, jadi
   menyaring sampai tersisa satu baris ("MY · Malaysia") memendekkan panelnya 256px → 177px
   dan kotak yang sedang diketik ikut menciut di bawah jari.
   Ditulis sebagai panjang tetap, BUKAN `min(190px,100%)` inline yang dicoba lebih dulu:
   persen di dalam induk yang lebarnya shrink-to-fit tidak punya nilai untuk dihitung, jadi
   min() memilih cabang persennya dan lantainya tidak pernah mengikat — terukur 177px,
   persis seperti tanpa aturan apa pun. Telepon mencabutnya di blok 640px: di sana panel
   .sr-cofilters dijepit ke lebar selnya (170px) dan lantai 190px akan meluber. */
.sr-optsearch{position:relative;min-width:190px}
.sr-logo-msbu{filter:brightness(0);opacity:.72}
.sr-app[data-theme="dark"] .sr-logo-msbu{filter:none;opacity:.92}
.sr-scroll{scrollbar-width:thin;scrollbar-color:var(--sr-border) transparent}
.sr-scroll::-webkit-scrollbar{height:10px;width:10px}
.sr-scroll::-webkit-scrollbar-thumb{background:var(--sr-border);border-radius:99px}
.sr-scroll::-webkit-scrollbar-track{background:transparent}
@keyframes srspin{to{transform:rotate(360deg)}}
@keyframes srpulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes srrise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes srping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(2.8);opacity:0}}
@keyframes srfade{from{opacity:0}to{opacity:1}}
@keyframes srstripe{to{background-position:36px 0}}
@keyframes srshine{0%{transform:translateX(-120%)}60%,100%{transform:translateX(320%)}}
@keyframes srsweepx{0%{transform:translateX(-60%)}100%{transform:translateX(160%)}}
@keyframes srorb{0%,100%{box-shadow:0 0 0 0 rgba(216,52,131,.55),0 0 12px 2px rgba(216,52,131,.5)}50%{box-shadow:0 0 0 7px rgba(216,52,131,0),0 0 20px 5px rgba(216,52,131,.75)}}
@keyframes srsheet{from{opacity:0;transform:translateY(-10px) scale(.975)}to{opacity:1;transform:none}}
.sr-tip{position:absolute;left:calc(100% + 14px);top:50%;white-space:nowrap;background:#0E2C5A;color:#EAF1FB;font-size:12px;font-weight:600;padding:6px 11px;border-radius:8px;box-shadow:0 10px 28px rgba(0,0,0,.45);border:1px solid #2C4E82;pointer-events:none;opacity:0;transform:translateY(-50%) translateX(-7px) scale(.94);transition:opacity .15s ease,transform .2s cubic-bezier(.34,1.56,.64,1);z-index:60}
.sr-tip::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:#0E2C5A}
.sr-tipwrap:hover .sr-tip{opacity:1;transform:translateY(-50%) translateX(0) scale(1)}
/* `width:max-content` WAJIB, dan sebabnya halus: elemen absolut dengan `right` diset dan
   `left:auto` memakai lebar shrink-to-fit yang dibatasi CONTAINING BLOCK-nya — di sini
   tombol Ask AI selebar ~90px, bukan `max-width:40ch` yang dipasang di isinya. Tooltip
   yang membungkus (`white-space:pre-line`) karena itu jatuh jadi kolom satu-dua kata
   setinggi delapan baris. Tooltip yang `nowrap` tidak menampakkannya — ia sekadar
   meluber — jadi cacat ini tidak terlihat sampai baris yang di-hover berhenti tertutup
   baris di bawahnya dan kotaknya benar-benar bisa dibaca. */
/* ============================================================================
   Baris pilihan di dalam menu saringan — kotak centang + kaki "Clear".
   ============================================================================

   Satu komponen untuk KEDELAPAN saringan multi-pilih (state, band, industri di
   radar; source, band, country, industri di Settings; market scope), yang sebelum
   ini punya delapan salinan gaya sebaris yang sama persis sampai ke nilai padding-nya
   — dan sudah menyimpang di tiga tempat.

   KENAPA kotak centang, bukan centang di ujung kanan seperti sebelumnya. Kedelapan
   saringan ini SUDAH multi-pilih (toggleFilter menulis array), tapi bentuknya —
   satu ✓ yang muncul di kanan baris terpilih — adalah bentuk menu pilih-SATU. Orang
   membacanya sebagai radio, memilih satu, dan tidak pernah tahu keenam yang lain bisa
   ikut. Kotak di depan label mengatakan "boleh lebih dari satu" sebelum diklik, bukan
   sesudahnya.

   ⚠️ TIGA HAL YANG TIDAK BOLEH DILANGGAR DI SINI, semuanya soal telepon:

   1. Kaki "Clear" WAJIB berada DI DALAM panel, bukan sebagai saudaranya.
      openMenuOwner() (SiberRadar.dc.html) menemukan menu yang terbuka dengan mencari
      pembungkus [data-sr-menu] yang punya anak KEDUA, dan repaintMenu() mengambil
      `own.children[1]` sebagai panelnya. Anak ketiga membuat kedua fungsi itu memilih
      elemen yang salah — dan gejalanya bukan error, melainkan menu yang melompat saat
      digulir di telepon dan panel yang tersaji separuh terlukis di Safari iOS.

   2. Label memakai .sr-optlbl dan BUKAN mengandalkan `span:first-child`.
      Aturan mobile di kedua blok @media memotong teks panjang lewat
      `[data-sr-menu] > div button > span:first-child`. Anak pertama sekarang KOTAKNYA,
      bukan labelnya — jadi tanpa kelas ini, ellipsis dipasang pada kotak 20px yang tidak
      punya teks sementara label aslinya meluber keluar panel. Aturannya diperluas di
      kedua blok itu, bukan diganti: menu yang belum berkotak masih memakai bentuk lama.

   3. Tinggi baris 44px, dan itu bukan estetika — ia temuan #10. Checkbox 15px di tabel
      adalah target sentuh terkecil di aplikasi ini; menu yang barisnya 38px cuma versi
      lebih sopan dari cacat yang sama. Padding-nya yang menaikkan area sentuh, kotaknya
      sendiri tetap 20px supaya kerapatan visualnya tidak berubah. */
.sr-opt{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:8px 11px;
  border:none;border-radius:9px;background:transparent;color:var(--sr-fg1);
  font-family:inherit;font-size:13.5px;font-weight:500;text-align:left;cursor:pointer}
.sr-opt:hover,.sr-opt:focus-visible{background:var(--sr-surface-2)}
.sr-opt[aria-selected="true"]{font-weight:600;color:var(--sr-ink-accent)}
/* Kotaknya. `flex-shrink:0` wajib — tanpa ia, nama industri panjang di panel selebar
   telepon memerasnya jadi persegi panjang 6px yang tidak terbaca sebagai kotak apa pun. */
.sr-optbox{position:relative;flex-shrink:0;display:grid;place-items:center;
  width:20px;height:20px;border-radius:6px;border:2px solid var(--sr-fg3);
  background:transparent;transition:background .12s ease,border-color .12s ease}
.sr-opt:hover .sr-optbox{border-color:var(--sr-fg2)}
.sr-opt[aria-selected="true"] .sr-optbox{background:var(--magenta-500);border-color:var(--magenta-500)}
/* Centangnya digambar dengan border, bukan SVG: satu elemen kosong yang sudah ada di
   markup tiap baris jauh lebih murah daripada <svg> per opsi di menu berisi 16 industri,
   dan ia tidak perlu ikut diperbarui saat terpilih — cuma `opacity`-nya. */
.sr-optbox::after{content:"";width:9px;height:5px;margin-top:-2px;
  border-left:2.2px solid #fff;border-bottom:2.2px solid #fff;transform:rotate(-45deg);
  opacity:0;transition:opacity .12s ease}
.sr-opt[aria-selected="true"] .sr-optbox::after{opacity:1}
.sr-optlbl{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-optn{flex-shrink:0;font-size:12px;color:var(--sr-fg3);font-variant-numeric:tabular-nums}
/* Kaki panel. Garis pemisahnya `margin` ke kiri-kanan supaya ia berhenti sebelum sudut
   membulat panel — garis yang menyentuh tepi terbaca sebagai panel yang terpotong. */
.sr-optclear{display:block;width:100%;min-height:44px;margin-top:5px;padding:11px 10px;
  border:none;border-top:1px solid var(--sr-border);border-radius:0 0 8px 8px;
  background:transparent;color:var(--sr-fg2);
  font-family:inherit;font-size:13px;font-weight:600;text-align:center;cursor:pointer}
.sr-optclear:hover:not(:disabled),.sr-optclear:focus-visible:not(:disabled){background:var(--sr-surface-2);color:var(--sr-fg1)}
/* Mati saat tidak ada yang dipilih, dan itu yang membedakannya dari opsi "All …" yang
   ia gantikan: "All states" selalu bisa diklik dan kadang tidak melakukan apa-apa.
   Tombol yang tidak melakukan apa-apa mengajari orang bahwa mengkliknya tidak berarti. */
.sr-optclear:disabled{opacity:.42;cursor:default}
/* Area sentuh 44px untuk kontrol yang GAMBARNYA memang harus tetap kecil.
   Temuan #10: checkbox pemilih baris 15×15px — dua kali lipat lebih kecil daripada
   ambang Apple HIG (44pt) dan Material (48dp) — dan ia pintu masuk SATU-SATUNYA ke
   seluruh alur bulk re-scan (PRD §4.4).

   Yang termurah bukan memperbesar kotaknya: checkbox 44px di dalam tabel sepuluh kolom
   mengubah tinggi tiap baris dan kerapatan seluruh tabel. Yang dibesarkan areanya, lewat
   ::after transparan di dalam <label> pembungkusnya — klik di area itu mendarat di
   label, dan label meneruskannya ke input. Kotaknya tetap 15px, jarinya dapat 44px.

   `position:absolute` berarti ia TIDAK menempati ruang, jadi tata letaknya tidak
   bergeser satu piksel pun. Diuji: tinggi baris tabel sebelum dan sesudah sama. */
/* Skip link — di luar layar sampai ia difokus, lalu mendarat di pojok kiri atas di atas
   segalanya. `clip-path` + ukuran 1px, bukan `display:none`: yang kedua membuatnya tidak
   bisa difokus sama sekali, yang justru menghapus gunanya. */
.sr-skip{position:fixed;top:0;left:0;z-index:200;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
  background:var(--magenta-500);color:#fff;font-family:var(--font-sans);font-size:13.5px;
  font-weight:600;text-decoration:none;border-radius:0 0 10px 0}
.sr-skip:focus{width:auto;height:auto;clip-path:none;padding:12px 18px;min-height:44px;
  display:inline-flex;align-items:center}
.sr-tap{position:relative;display:inline-flex;align-items:center;justify-content:center;
  vertical-align:middle;cursor:pointer}
.sr-tap::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;
  transform:translate(-50%,-50%)}
/* Sisa temuan #10, dikelompokkan menurut apa yang sebenarnya kekurangan tinggi.
   Semuanya `min-height` dan bukan `height`: yang isinya sudah lebih tinggi dari 44px
   (baris industri dengan nama dua baris) tidak boleh dipaksa memendek.

   ⚠️ Ini SENGAJA bukan `.sr-tap` — overlay 44px tak terlihat cuma benar untuk kontrol
   yang berdiri SENDIRIAN. Chip legend band berjajar lima dengan jarak 8px; memberi
   masing-masing overlay 44px membuat kelimanya saling menindih, dan ketukan di antara
   dua chip mendarat di chip yang salah. Target kecil yang jujur lebih baik daripada
   target besar yang berbohong soal batasnya. */
.sr-radar-foot button{min-height:44px}
.sr-secrow,.sr-sectoggle{min-height:44px;min-width:44px}
/* Targetnya LABEL-nya, bukan checkbox 15px di dalamnya — label yang berpadding sudah
   meneruskan klik ke input sejak awal. Yang kurang cuma 5px tingginya. */
.sr-f-rising{min-height:44px}
.sr-f-search input{min-height:44px}
.sr-pagi-nav button{min-height:44px}
/* Tombol aksi per baris (Report, re-scan, roda gigi). Di kartu telepon inilah seluruh
   pekerjaan dilakukan sambil menelepon, jadi di sanalah 44px paling berarti — dan di
   sana barisnya memang boleh bertambah tinggi. */
/* ⚠️ `justify-content:center` WAJIB berdampingan dengan min-width di sini, dan itu
   satu-satunya sebab ikon re-scan terlihat tidak di tengah kotaknya selama ini —
   dilaporkan tiga kali sebagai "ikonnya berantakan", padahal gambarnya tidak pernah
   salah. Tombolnya `inline-flex` dengan padding 7px dan isi 14px = 28px; begitu
   min-width menariknya jadi 44px, 16px sisanya seluruhnya jatuh di KANAN karena
   justify-content bawaannya `flex-start`. Ikonnya duduk 7px di kiri titik tengah —
   terukur — sementara tombol tetangganya memakai `place-items:center` dan benar-benar
   di tengah. Mata membandingkan keduanya dalam satu baris, dan yang terlihat adalah
   ikon yang melenceng.
   Menaikkan area sentuh tanpa mengatakan ke mana ruang barunya pergi adalah setengah
   perubahan; setengah itu yang tertinggal waktu audit menaikkan target sentuh. */
.sr-cards .sr-ttwrap{min-height:44px;min-width:44px;justify-content:center}
/* Ikon-saja di bilah samping. `48x40` — kurang tingginya saja, dan menaikkannya tidak
   menggeser apa pun karena bilahnya kolom vertikal. */
.sr-tipwrap{min-height:44px}
/* Pengurut header tabel. Padding pindah dari <th> ke sini supaya area klik/sentuhnya
   adalah SELURUH sel, bukan sepotong teks di tengahnya — <th onClick> dulu memberi
   seluruh sel sebagai target tetikus, dan menyusutkannya jadi seukuran label adalah
   harga yang tidak perlu dibayar untuk mendapat akses keyboard. `min-height:44px`
   sekalian menutup temuan target sentuh untuk baris header. */
.sr-sortbtn{display:flex;align-items:center;width:100%;min-height:44px;padding:11px 9px;
  border:none;background:transparent;color:inherit;font:inherit;letter-spacing:inherit;
  text-transform:inherit;white-space:nowrap;cursor:pointer}
.sr-sortbtn:hover{color:var(--sr-fg2)}
.sr-ttip{position:absolute;right:calc(100% + 9px);top:50%;white-space:nowrap;width:max-content;background:#0E2C5A;color:#EAF1FB;font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:7px;box-shadow:0 12px 28px -10px rgba(7,40,90,.55);opacity:0;pointer-events:none;transform:translateY(-50%) translateX(4px);transition:opacity .14s ease,transform .14s ease;z-index:30}
.sr-ttip::after{content:"";position:absolute;left:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left-color:#0E2C5A}
.sr-ttwrap:hover .sr-ttip{opacity:1;transform:translateY(-50%)}
/* Varian yang membuka ke KANAN, untuk pemicu yang berdiri di kolom kiri: .sr-ttip
   bawaan membuka ke kiri karena semua pemakainya tombol aksi di ujung kanan baris.
   Tetap ditengahkan vertikal, dan itu bukan selera: pembungkus tabelnya
   .sr-scroll{overflow-y:hidden}, jadi tooltip yang menggantung di bawah baris
   terpotong — yang di atas/bawah baris tidak akan pernah terlihat utuh. */
.sr-ttip-r{right:auto;left:calc(100% + 9px);transform:translateY(-50%) translateX(-4px)}
.sr-ttip-r::after{left:auto;right:100%;border-left-color:transparent;border-right-color:#0E2C5A}
.sr-ttwrap:hover .sr-ttip-r{transform:translateY(-50%)}
/* Varian yang membuka ke BAWAH, untuk pemicu yang berdiri di strip mendatar dan bukan di
   ujung sebuah baris tabel — tombol Import CSV satu-satunya hari ini.
   Kenapa bukan .sr-ttip biasa: strip filternya MEMBUNGKUS, jadi posisi mendatar tombol
   itu berpindah-pindah mengikuti lebar jendela. Diukur di 660px, tooltip yang membuka ke
   kiri mendarat di x=-94 — terpotong tepi layar, dan tidak ada tepi mana pun yang aman:
   varian -r punya cacat kembarannya di sisi kanan. Membuka ke bawah, kotaknya bergerak
   BERSAMA tombolnya alih-alih menjauh darinya.
   Ditambatkan tepi KANANNYA ke tepi kanan pemicu (`right:0`), bukan tepi kirinya, dan itu
   bukan selera — itu yang membuat terpotong-di-kanan MUSTAHIL alih-alih sekadar tidak
   terjadi. Versi `left:0` pertama memang muat, tapi muatnya kebetulan: tombol Import CSV
   berdiri di ujung KANAN strip (~86px dari tepi layar di setiap lebar ≥1280px), jadi
   kotak yang tumbuh ke kanan cuma menyisakan 33px — dan 33px itu habis begitu teksnya
   bertambah satu kata atau font pemakainya lebih lebar. Dengan tambatan kanan, tepi kanan
   kotaknya TIDAK PERNAH melewati tepi kanan tombolnya, berapa pun panjang teksnya.
   Dilaporkan pemilik repo dua kali: "button nya ada diujung soalnya."
   Sisi yang masih bergantung ukuran tinggal kiri, dan di sana jaraknya lebar: tombolnya
   tidak pernah mendekati tepi kiri layar karena sidebar dan padding halaman berdiri di
   situ. Diukur pada strip filter monitored, 641–1920px, 3 Agustus 2026 — lihat angkanya
   di badan commit. max-width 200px yang menjaga sisi itu; menaikkannya = sapuan ulang,
   dan pemicu .sr-ttip-b BARU di tempat lain juga. */
.sr-ttip-b{right:0;left:auto;top:calc(100% + 9px);width:max-content;max-width:200px;
  white-space:pre-line;transform:translateY(-4px)}
.sr-ttip-b::after{left:auto;right:14px;top:auto;bottom:100%;transform:none;
  border-left-color:transparent;border-bottom-color:#0E2C5A}
.sr-ttwrap:hover .sr-ttip-b{transform:translateY(0)}
/* Baris yang sedang di-hover naik di atas saudara-saudaranya, dan tanpa ini tooltipnya
   TERTUTUP baris di bawahnya — gejala yang terlihat langsung di layar dan yang tidak bisa
   diperbaiki dengan menaikkan z-index tooltipnya sendiri.
   Sebabnya: tiap <tr class="sr-row"> membawa `animation:srrise`, dan elemen ber-animation
   MEMBUAT stacking context sendiri. `z-index:30` milik .sr-ttip karena itu hanya berlaku
   DI DALAM barisnya; ia tidak bisa naik melewati baris lain, dan baris yang lebih bawah
   di DOM digambar belakangan. Jadi tooltip baris 3 selalu kalah dari baris 4.
   `position:relative` wajib menyertainya: z-index tidak berlaku pada elemen yang tidak
   diposisikan, walau elemen itu sudah punya stacking context dari animation-nya.
   Cukup pada :hover — hanya satu baris yang bisa di-hover, jadi tidak ada perlombaan
   z-index antar baris, dan baris yang tidak di-hover tidak punya tooltip untuk ditutupi. */
.sr-row:hover{position:relative;z-index:5}
.sr-scoretip{width:238px;white-space:normal;text-align:left;padding:11px 13px;font-weight:500;background:#0E2C5A;border:1px solid rgba(140,175,225,.3);z-index:60}
.sr-stip{position:absolute;left:0;bottom:calc(100% + 9px);width:236px;max-width:none;white-space:normal;text-align:left;background:#0E2C5A;color:#EAF1FB;font-size:11.5px;font-weight:500;line-height:1.45;padding:10px 12px;border-radius:9px;border:1px solid rgba(140,175,225,.28);box-shadow:0 14px 32px -10px rgba(3,8,18,.6);opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;pointer-events:none;z-index:60}
.sr-stip::after{content:"";position:absolute;left:22px;top:100%;border:6px solid transparent;border-top-color:#0E2C5A}
.sr-statrow > div:nth-last-child(-n+2) .sr-stip{left:auto;right:0}
.sr-statrow > div:nth-last-child(-n+2) .sr-stip::after{left:auto;right:22px}
.sr-stipwrap:hover .sr-stip{opacity:1;transform:translateY(0)}
.sr-statrow > div:first-child{border-top-left-radius:var(--r-md);border-bottom-left-radius:var(--r-md)}
.sr-statrow > div:last-child{border-top-right-radius:var(--r-md);border-bottom-right-radius:var(--r-md)}
.sr-scroll{overflow-y:hidden}
.sr-actcol{position:sticky;right:0;z-index:4;background:var(--sr-surface-2);border-left:1px solid var(--sr-border)}
.sr-actcell{position:sticky;right:0;z-index:3;background:var(--sr-surface);border-left:1px solid var(--sr-border)}
.sr-row:hover .sr-actcell{background:var(--sr-surface-2)}
.sr-scanrow{background-color:rgba(216,52,131,.07)!important;background-image:linear-gradient(100deg,transparent 0%,rgba(216,52,131,.18) 45%,transparent 72%);background-size:220% 100%;animation:srrowsweep 1.9s linear infinite}
.sr-scanrow>td:first-child{box-shadow:inset 3px 0 0 var(--magenta-500)}
.sr-queuerow{background-color:rgba(216,52,131,.035)!important}
.sr-queuerow>td:first-child{box-shadow:inset 3px 0 0 rgba(216,52,131,.35)}
@keyframes srrowsweep{from{background-position:130% 0}to{background-position:-130% 0}}
.sr-scanscore{animation:srpulsefade 1.5s ease-in-out infinite}
@keyframes srpulsefade{0%,100%{opacity:.4}50%{opacity:.9}}
.sr-indet{animation:srindet 1.25s ease-in-out infinite}
@keyframes srindet{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* ---------- panel dropdown: lapisan sendiri, TANPA will-change ----------

   Safari iOS melukis panel ini SEBAGIAN waktu isinya berubah di tempat. Memilih "High
   Risk" membuat tulisan barisnya terpotong mendatar di tengah — separuh ATAS masih
   putih (keadaan lama) dan separuh BAWAH sudah magenta (keadaan baru) — sementara baris
   lain masih memakai lukisan pertama seluruhnya, lengkap dengan kotak seukuran ikon di
   tempat centang yang sudah tidak berlaku. Yang berubah cuma dua properti gaya sebaris
   (`color`, `background`) pada tombol yang tidak berpindah sepiksel pun.

   ⚠️ `will-change:transform` PERNAH ada di baris ini (v117) dan TIDAK memperbaiki apa
   pun — fotonya sesudah reload identik. Ia dicabut lagi, bukan ditinggalkan sebagai
   jimat: pada lapisan yang isinya berubah tapi tidak pernah bergerak, `will-change`
   justru menyuruh Safari menahan tekstur lamanya. Yang tersisa cuma promosi lapisan
   polos; yang benar-benar memaksa lukisan baru sekarang ada di JS (`repaintMenu()` di
   SiberRadar.dc.html), karena masalahnya INVALIDASI, bukan ukuran ubin. */
[data-sr-menu] > div{transform:translateZ(0);backface-visibility:hidden}

/* ---------- Exposure by industry: daftar batang terurut ----------
   Menggantikan plot polar. Alasannya bukan selera: pekerjaan blok ini adalah
   membandingkan SATU angka di lima belas kategori, terurut, dan panjang batang pada
   garis dasar yang sama adalah kanal yang paling akurat dibaca mata. Juring memakai
   dua kanal terlemah dan MEMBENGKOKKAN dua-duanya — luas ∝ r² (skor 2x tampak 4x)
   dan sudut ∝ √jumlah (sengaja, supaya 489 tidak menelan 3). Dua besaran tampil,
   tidak satu pun bisa dibandingkan. Caption tiga baris yang dulu ada di atas gambar
   ikut hilang: ia ada persis karena juringnya tidak terbaca sendiri.

   Semua gerak di sini CSS, TIDAK ADA requestAnimationFrame — dan itu keputusan yang
   terukur hari ini: rAF berhenti total saat `document.visibilityState === 'hidden'`,
   jadi loop canvas lamanya tidak pernah menggambar di tab yang tidak terlihat dan
   backing store-nya tinggal 300x150 bawaan. Transisi dan keyframe CSS tidak punya
   masalah itu, dan tidak membangunkan main thread enam puluh kali sedetik. */
.sr-secbars{position:relative;display:flex;flex-direction:column;gap:1px;margin-top:12px}
/* Sapuan yang menuruni daftar, kosakata gerak yang sama dengan radar hero — tapi
   lewat satu elemen bergradien, bukan lima belas elemen yang dianimasikan sendiri.
   `pointer-events:none` wajib: baris di bawahnya semuanya tombol. */
.sr-secbars::after{content:"";position:absolute;left:0;right:0;top:0;height:64px;
  pointer-events:none;border-radius:10px;
  background:linear-gradient(180deg,transparent,rgba(216,52,131,.09) 45%,transparent);
  animation:srsecsweep 5.2s cubic-bezier(.5,0,.5,1) infinite}
@keyframes srsecsweep{0%{transform:translateY(-64px);opacity:0}
  8%,88%{opacity:1}100%{transform:translateY(var(--sr-secsweep,560px));opacity:0}}
.sr-secrow{display:grid;grid-template-columns:150px minmax(0,1fr) 46px 54px;align-items:center;
  gap:11px;width:100%;padding:5px 8px;border:1px solid transparent;border-radius:9px;
  background:transparent;font-family:inherit;font-size:12.5px;text-align:left;cursor:pointer;
  transition:background .16s ease,border-color .16s ease,opacity .16s ease}
.sr-secrow:hover,.sr-secrow:focus-visible{background:var(--sr-surface-2);border-color:var(--sr-border);opacity:1!important}
/* Hover menyalakan batangnya sendiri, bukan cuma barisnya: yang dibandingkan mata
   adalah batangnya, jadi umpan baliknya harus mendarat di sana. */
.sr-secrow:hover .sr-secbar,.sr-secrow:focus-visible .sr-secbar{filter:brightness(1.18)}
.sr-secrow:hover .sr-secval,.sr-secrow:focus-visible .sr-secval{color:var(--sr-fg1)}
/* `text-overflow:ellipsis` TIDAK berlaku pada kontainer flex — ia properti kotak teks.
   Tanpa pembungkus sendiri, nama panjang meluber keluar kolomnya dan dicat DI BAWAH
   batangnya alih-alih terpotong: "Financial Serv", "Telco & Medi". Terlihat di 375px,
   tempat kolom namanya paling sempit. */
.sr-secnm{display:flex;align-items:center;gap:6px;min-width:0;font-weight:600}
.sr-secnm span:last-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Encoding KEDUA untuk sektor First Schedule, dan ia wajib — bukan kerapian.
   Diukur dengan validator palet: di tema TERANG pasangan aksen/abu hanya ΔE 6,9
   untuk protan, dan pita 6–8 hanya sah kalau ada penanda selain warna. */
.sr-secsec{flex:0 0 auto;font-size:9.5px;font-weight:700;line-height:1.35;
  border:1px solid currentColor;border-radius:4px;padding:0 3px;opacity:.9}
.sr-sectrack{position:relative;height:15px}
.sr-sectrack i{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--sr-border);opacity:.7}
/* `background-color`, TIDAK PERNAH shorthand `background`: shorthand mereset
   background-image, jadi ember tipis yang kebetulan sektor First Schedule kehilangan
   arsirnya tanpa satu pun gejala — batangnya tampil padat, seolah datanya tepercaya.
   Terlihat di prototipe: Government (3) padat sementara Education (3) berarsir. */
.sr-secbar{position:absolute;left:0;top:2px;height:11px;border-radius:0 4px 4px 0;
  background-color:var(--sr-fg3);transform-origin:left center;
  transition:width .45s cubic-bezier(.3,1,.4,1),filter .16s ease;
  animation:srsecgrow .5s cubic-bezier(.3,1,.4,1) both}
@keyframes srsecgrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Arsirnya warna PERMUKAAN, bukan putih: putih hilang di atas magenta dan hanya
   terlihat di atas abu. Warna permukaan terbaca sebagai "dipotong" di atas isian apa pun. */
.sr-secbar.sr-secthin{background-image:repeating-linear-gradient(45deg,
  var(--sr-canvas) 0 1.5px,transparent 1.5px 5px)}
.sr-secdot{position:absolute;top:5px;width:5px;height:5px;border-radius:50%;
  background:#FF6B6B;box-shadow:0 0 0 2px var(--sr-canvas)}
.sr-secval{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--sr-fg2);transition:color .16s ease}
.sr-seccnt{text-align:right;font-size:11px;color:var(--sr-fg3);font-variant-numeric:tabular-nums}
.sr-sechd,.sr-secax{display:grid;grid-template-columns:150px minmax(0,1fr) 46px 54px;
  gap:11px;padding:0 8px}
/* `margin-top` di kepala kolom, dan itu bukan kerapian. Ringkasan di atasnya adalah
   KALIMAT yang panjangnya bergantung nama industri teratas — di telepon ia membungkus
   tiga baris — sementara kepala kolom ini cuma punya `padding-bottom`. Hasilnya baris
   terakhir ringkasan menempel persis ke "INDUSTRY" tanpa jarak sama sekali, dan yang
   terbaca adalah satu blok teks, bukan judul lalu tabel. Terlihat di produksi 375px. */
.sr-sechd{font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sr-fg3);margin-top:14px;padding-bottom:6px}
.sr-sechd span:nth-child(3),.sr-sechd span:nth-child(4){text-align:right}
.sr-secax{margin-top:5px}
/* Lima teratas terbuka bawaan, DI SEMUA LEBAR — sampai 3 Agustus 2026 pemangkasan ini
   hidup hanya di dua blok mobile di bawah, dan di desktop daftarnya berdiri utuh enam
   belas baris. Alasan aslinya tetap berlaku persis sama di layar besar: pertanyaan yang
   dibawa orang ke blok ini ("industri mana yang paling terekspos") dijawab oleh puncak
   daftarnya, sementara ekornya mendorong tabel — yang sebenarnya jadi tujuan — keluar
   layar pertama. Dilaporkan pemilik repo: "agak lebar kebawah, on the first view seperti
   menggangu."

   `.sr-secmore` dipasang di renderVals, bukan lewat nth-child, karena aturannya "lima
   teratas DAN apa pun yang sedang terpilih" — ember terpilih yang jatuh di luar lima
   besar harus tetap terlihat, kalau tidak tabelnya tersaring oleh sesuatu yang tidak ada
   di layar sama sekali.

   `!important` di ketiganya karena tombolnya membawa `display:none` inline (gaya inline
   mengalahkan kelas), dan karena kedua blok mobile di bawah masih menyetel kolom baris
   ini dengan `!important` juga. */
.sr-secmore{display:none!important}
.sr-secscope.sr-secopen .sr-secmore{display:grid!important}
.sr-sectoggle{display:inline-flex!important}
.sr-secticks{position:relative;height:13px}
/* `> span`, BUKAN `span`: runtime template membungkus tiap interpolasi dalam
   <span class="sc-interp">, jadi selektor keturunan mengenai anak DAN cucu — cucunya
   ikut jadi absolut, lebar induknya runtuh ke nol, dan salah satu tick menghilang dari
   tata letak sama sekali. Kelas cacat yang sama dengan shorthand `background` di atas:
   pemilih yang mengenai lebih banyak daripada yang dimaksud. */
.sr-secticks > span{position:absolute;transform:translateX(-50%);font-size:10px;
  color:var(--sr-fg3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ⚠️ `transition` ikut, dan sampai commit ini ia TIDAK: aturannya hanya mematikan
   `animation`, sementara 42 elemen tetap bertransisi di bawah `reduce` — hover kartu
   yang menggeser 2px, pil band yang memudar, panel yang menggelincir masuk. Untuk orang
   yang menyalakan setelan ini karena gerakan memicu mual atau vertigo, transisi 160ms
   adalah gerakan yang sama persis dengan animasi 160ms; spesifikasinya tidak
   membedakan keduanya dan tidak ada alasan kita membedakannya.
   `.01ms` dan bukan `0`: durasi nol membuat sebagian browser MELEWATI event
   `transitionend`, dan kode yang menunggunya menggantung selamanya. Angka ini idiom
   yang sudah umum justru karena alasan itu.
   Sisi JS-nya sudah benar sejak awal — sr-radar.js menghormati `cmp._reduce` di enam
   tempat, jadi radarnya memang sudah diam. Yang tertinggal cuma baris CSS ini. */
@media (prefers-reduced-motion: reduce){
  .sr-app *,.sr-app *::before,.sr-app *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
.sr-app[data-vp="mobile"]{container-type:inline-size;width:404px;max-width:100%;margin:0 auto;position:relative}
.sr-app[data-vp="mobile"] .sr-ovl{position:absolute!important;inset:0!important;padding:14px 12px!important}
.sr-app[data-vp="mobile"] .sr-report{max-width:100%!important}

/* Deret tab Settings, dan HANYA deret itu — ambangnya sendiri, lebih lebar dari 640px
   yang dipakai sisa layout.
   Alasannya aritmatika, bukan selera. Label panjang keenamnya menuntut ~625px, dan tiga
   badge hitungan (Domains bisa tiga digit) menambah ~90px lagi — sementara kolom isi di
   viewport 698px hanya menyediakan ~554px. Diukur di browser: deretnya pecah dua baris
   dengan 'Notifications' yatim di bawah. Sampai tab AI ditambahkan, lima label muat
   sampai jauh di bawah 640px dan blok itu tidak pernah menyentuh masalah ini.
   Perlakuannya sengaja SAMA dengan yang sudah diputuskan di blok 640px: nama pendek lalu
   menggeser, bukan membungkus. Menggeser menyembunyikan tab; membungkus menyembunyikan
   bahwa mereka satu deret — dan yang pertama lebih mudah ditemukan sendiri.
   Ditaruh SEBELUM blok 640px supaya di telepon aturan yang di sana (font 12px, gap 4px)
   tetap menang — spesifisitasnya sama, jadi urutannya yang memutuskan. */
@container (max-width: 960px){
  .sr-tab-long{display:none!important}
  .sr-tab-short{display:inline!important}
  .sr-tabstrip{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  .sr-tabstrip::-webkit-scrollbar{display:none}
  .sr-tabstrip > button{margin-right:14px!important;flex:0 0 auto!important}
}
@media (max-width: 960px){
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. */
  .sr-tab-long{display:none!important}
  .sr-tab-short{display:inline!important}
  .sr-tabstrip{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}
  .sr-tabstrip::-webkit-scrollbar{display:none}
  .sr-tabstrip > button{margin-right:14px!important;flex:0 0 auto!important}
}
@container (max-width: 640px){
  .sr-pagi{flex-direction:column!important;align-items:stretch!important;gap:14px!important}
  .sr-pagi-left{justify-content:center!important}
  .sr-pagi-nav{justify-content:center!important}
  .sr-desk-table{display:none!important}
  .sr-cards{display:flex!important}
  .sr-mobilebar{display:flex!important}
  .sr-backdrop{display:none!important}
  .sr-collapse-btn{display:none!important}
  .sr-aside{display:none!important}
  .sr-msheet-wrap{display:block!important}
  
  .sr-filters{gap:10px!important}
  .sr-scope{width:100%!important}
  .sr-scope > button{width:100%!important;padding:9px 12px!important}
  .sr-scope > button > svg{margin-left:auto!important}
  .sr-scope-long{display:none!important}
  .sr-scope-short{display:inline!important}
  /* Lantai lebar kotak pencarian dicabut di sini — lihat catatan di .sr-optsearch.
     Panel .sr-cofilters dijepit ke lebar SEL saringannya (170px di 375px), jadi lantai
     190px akan meluber keluar panelnya sendiri. */
  .sr-cofilters .sr-optsearch{min-width:0!important}
  .sr-scope [role="listbox"]{left:0!important;right:0!important;min-width:0!important;width:100%!important}
  /* iOS Safari MEMBESARKAN seluruh halaman begitu fokus mendarat di kotak teks yang
     font-nya di bawah 16px, dan zoom itu tidak pernah surut sendiri sesudah papan
     ketiknya ditutup. Kotak pencarian dan hampir setiap input di halaman ini 12,5–13,5px,
     jadi mengetik satu huruf saja sudah cukup: skalanya naik ~1,19× dan tepi kanan
     layar terpotong — kolom kanan strip saringan, skor di kartu, ujung kartu sektor.
     Yang berubah BUKAN layout-nya melainkan viewport-nya, jadi tidak ada satu pun
     aturan lebar yang bisa menjelaskannya, dan di simulator desktop tidak pernah
     terlihat. `user-scalable=no` bukan jawabannya: iOS mengabaikannya sejak iOS 10
     (dan itu memang benar — mencabut cubit-zoom mematahkan aksesibilitas). 16px adalah
     satu-satunya ambang yang dihormati.

     Kotak centang dan pemilih berkas tidak pernah memicunya, jadi keduanya dibiarkan
     apa adanya. */
  .sr-app input:not([type="checkbox"]):not([type="file"]),.sr-app textarea{font-size:16px!important}
  .sr-stip{display:none!important}
  /* Tooltip hover tidak punya arti di layar sentuh: tidak ada kursor untuk
     menggantung, dan ketukan meninggalkan :hover menempel — jadi menekan ikon
     scan/report/manage justru menerbitkan kotak yang tinggal di sana menutupi
     baris berikutnya. `title` tetap terpasang di setiap pemicu (lihat idiom di
     ~1132) dan itu yang jadi nama aksesibilitasnya, jadi tidak ada penjelasan
     yang benar-benar hilang. Rincian skor di kartu radar TIDAK termasuk di
     sini: ia panel yang dibuka dengan ketukan (`toggleTip`/[data-sr-score]),
     bukan .sr-ttip, dan memang satu-satunya yang harus tetap ada. */
  .sr-ttip{display:none!important}
  /* Strip saringan tabel radar — grid dua kolom, idiom yang SAMA dengan .sr-cofilters
     tepat di bawah, dan itulah seluruh alasan blok ini ditulis ulang 4 Agustus 2026.

     Sebelumnya: flex-wrap dengan `flex:1 1 calc(50% - 5px)` pada tiga dropdown. Lima
     kontrol dengan lebar dasar berbeda membungkus jadi tangga — pencarian penuh,
     [State][Band], lalu [Industry] SENDIRIAN dengan separuh baris kosong di
     sebelahnya, lalu Δ rising melebar penuh dengan isinya mengambang di tengah. Tepi
     kanannya tidak pernah rata, dan di layar yang sama Monitored companies berbaris
     rapi — perbedaan yang dilaporkan sebagai "filter di radar anehnya di telepon".

     Dengan grid: pencarian penuh, lalu [State][Band] dan [Industry][Δ rising] — dua
     baris pasangan utuh, keempat sisinya berbaris. */
  .sr-rdfilters{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:start!important}
  .sr-rdfilters > *{min-width:0!important}
  .sr-rdfilters > .sr-f-search{grid-column:1/-1!important}
  /* Pengurut khusus telepon. Ia display:none inline — idiom yang SAMA dengan .sr-cards
     tepat di atas — dan HANYA blok ini yang menyalakannya, karena di atas 640px header
     kolomnya sendiri yang jadi kontrolnya dan dua permukaan yang terlihat bersamaan
     untuk satu state adalah tempat orang lupa melihat.
     Baris penuh, bukan setengah sel: labelnya membawa nama kolom DAN arahnya
     ("Sort: Last leak ▼"), dan di setengah lebar 375px itu terpotong jadi "Sort: La…" —
     yang menghapus justru satu-satunya bagian yang menjawab "urutannya apa sekarang". */
  .sr-rdfilters > .sr-f-sort,.sr-cofilters > .sr-f-sort{display:block!important;grid-column:1/-1!important}
  /* `:not(.sr-f-search)` BUKAN kerapian. Satu-satunya <button> anak pembungkus
     pencarian adalah tombol × pembersih, dan ia `position:absolute` berlabuh
     `right:7px` selebar 22px. Dilebarkan jadi 100% ia membentang menutupi SELURUH
     kotak pencarian — lengkap dengan latar `--sr-surface-2`-nya — menjulur ~7px
     keluar tepi kirinya, dan ×-nya (`place-items:center`) mendarat di tengah kotak.
     Aturan ini menyasar pemicu dropdown ([State][Band][Industry]); tombol × ikut
     kena cuma karena keduanya sama-sama `div > button`.

     Gejalanya cuma muncul SESUDAH ada yang diketik, karena `sc-if hasSearch` yang
     memunculkan tombolnya — jadi yang terlihat: kotak pencarian yang normal berubah
     jadi slab biru berisi satu × begitu disentuh, teks yang barusan diketik hilang
     di baliknya. Dilaporkan dari telepon 5 Agustus 2026. */
  .sr-rdfilters > div:not(.sr-f-search) > button,.sr-rdfilters > label{width:100%!important;min-width:0!important}
  .sr-rdfilters > label{justify-content:center!important}
  /* Menu dijepit ke lebar SELNYA — ketiganya, bukan lagi cuma industri. Alasannya
     ditulis panjang di .sr-cofilters di bawah dan berlaku sama persis di sini: menu
     berlabuh `left:0` di dalam sel kolom KANAN lalu tumbuh selebar isinya, dan
     sisanya keluar layar tanpa ada yang bisa menggulirnya ke sana. Band ("Very High
     Risk" + centang) dan State berisiko sama sejak selnya jadi setengah layar. */
  .sr-rdfilters [data-sr-menu] > div{left:0!important;right:0!important;min-width:0!important;width:auto!important}
  /* Label opsi MEMBUNGKUS di sini, tidak dipotong. Aturan di atas menjepit panel ke
     lebar selnya — setengah layar — dan kotak centang mengambil 32px lagi dari sisa
     itu, jadi di 320px "Very High Risk" jadi "Very Hig…". Yang terpotong justru kata
     yang membedakannya dari "Very Low".
     Melebarkan panelnya BUKAN jalan keluar: penjepitan itu ada karena panel di sel
     kolom kanan yang tumbuh sesuai isinya keluar layar, dan tidak ada yang bisa
     menggulir ke sana. Membungkus tidak bisa meluber ke mana pun, dan barisnya
     memang sudah boleh tumbuh — `min-height`, bukan `height`. */
  .sr-opt .sr-optlbl{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .sr-rdfilters [data-sr-menu] > div button > span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  /* Settings filters: DELAPAN kontrol dengan lebar berbeda-beda dibungkus
     flex-wrap, dan di layar telepon hasilnya tangga — tiap baris berhenti di
     titik acak dan tepi kanannya tak pernah rata. Grid dua kolom membuat
     semua sisi berbaris.

     Indeksnya menghitung ANAK LANGSUNG strip ini, jadi ia bergeser tiap kali
     ada kontrol yang ditambah atau dipindah — dan yang bergeser diam-diam
     adalah baris yang jadi ganjil, bukan galat yang terlihat. Urutannya hari
     ini: 1 pencarian, 2 source, 3 band, 4 country, 5 industry, 6 Add company,
     7 Import, 8 unduh template.

     Yang penuh tinggal (1) dan (8) — dulu (1), (4), (7), waktu strip ini
     berisi tujuh dan country jadi ganjil sendiri. Kolom Industry (Task C2)
     justru merapikannya: enam kontrol di tengah membentuk tiga pasang utuh,
     jadi tidak ada lagi yang perlu dilebarkan supaya barisnya tidak timpang.
     Pencarian dan tautan template tetap penuh karena masing-masing adalah
     langkah tersendiri, bukan saringan. */
  .sr-cofilters{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:start!important}
  .sr-cofilters > *{min-width:0!important}
  .sr-cofilters > *:nth-child(1),.sr-cofilters > *:nth-child(8){grid-column:1/-1!important}
  /* `.sr-ttwrap` ikut disebut, dan itu bukan kelengkapan: tombol Import CSV dibungkus
     satu <span class="sr-ttwrap"> supaya tooltipnya tidak terpotong `overflow:hidden`
     milik <label>-nya, dan sejak itu labelnya BUKAN LAGI anak langsung strip ini —
     tanpa baris ini ia berhenti melebar penuh di telepon sementara tetangganya melebar. */
  .sr-cofilters > div:not(.sr-f-search) > button,.sr-cofilters > button,.sr-cofilters > label,
  .sr-cofilters > .sr-ttwrap,.sr-cofilters > .sr-ttwrap > label{width:100%!important;min-width:0!important}
  .sr-cofilters > button,.sr-cofilters > label,.sr-cofilters > a,
  .sr-cofilters > .sr-ttwrap > label{justify-content:center!important}
  /* Menu dropdown dijepit ke lebar SELNYA. Tanpa ini menu berlabuh `left:0` di dalam
     sel kolom KANAN lalu tumbuh selebar isinya — "Consumer Products & Services" ~250px
     dari sel ~165px — dan separuh daftarnya keluar layar di sisi kanan tanpa ada yang
     bisa menggulirnya ke sana. Terlihat di produksi pada saringan industri.

     Menjepitnya ke lebar sel, bukan menggesernya ke `right:0`: sel kolom KIRI akan
     tumbuh ke kiri dan keluar layar di sisi sebaliknya, dan membedakan keduanya menuntut
     nth-child yang bergeser tiap ada kontrol ditambah — dua bug yang sudah kena hari ini.
     Idiom yang sama dengan .sr-scope [role="listbox"] di atas. */
  .sr-cofilters [data-sr-menu] > div{left:0!important;right:0!important;min-width:0!important;width:auto!important}
  /* Sama seperti di .sr-rdfilters — dan di sini lebih perlu lagi: nama industri
     kanonik ("Telecommunications & Media") tidak muat di setengah layar mana pun. */
  .sr-opt .sr-optlbl{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .sr-cofilters [data-sr-menu] > div button > span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  /* Chip alasan: labelnya kalimat ("Email is a provider, not a company"),
     white-space:nowrap, dan lebarnya berkisar 3x — tersusun jadi lima baris
     compang-camping yang tidak terbaca sebagai satu daftar. Satu kolom penuh
     dengan angka didorong ke kanan: itu memang daftar saringan. */
  .sr-gapchips{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .sr-gapchips > button{justify-content:space-between!important;padding:8px 12px!important}
  .sr-navlist{flex:0 0 auto!important;padding-top:10px!important}
  .sr-aside .sr-footer{border-top:1px solid #35538A!important;padding-top:12px!important;margin-top:12px!important}
  .sr-aside .sr-brandcol{display:none!important}
  .sr-brandcol{width:auto!important;padding-right:14px!important}
  .sr-console{padding:20px 18px!important;gap:20px!important}
  .sr-main-pad{padding:16px 13px 48px!important}
  .sr-h1{font-size:26px!important}
  .sr-hero-row{gap:13px!important}
  .sr-radar-card{width:100%!important;padding:14px!important}
  /* Legend MENGALIR di bawah kanvas di telepon, tidak lagi absolut. Di desktop kotaknya
     440x500 dan foot absolut duduk rapi di 60px sisa bawah kanvas — di sini sisanya cuma
     84px (384-300) sementara lima chip @44px (baris .sr-radar-foot button di blok dasar)
     membungkus jadi dua-tiga baris ~100px, jadi ia memanjat balik ke atas lingkarannya.
     Tinggi tetap apa pun akan salah lagi begitu jumlah band atau lebar layar berubah;
     yang benar adalah membiarkan kotaknya setinggi isinya. */
  .sr-radar-box{width:300px!important;height:auto!important}
  .sr-radar-box canvas{width:300px!important;height:300px!important}
  .sr-radar-glow{width:300px!important;height:300px!important}
  .sr-radar-foot{position:static!important;padding:12px 8px 0!important}
  .sr-radar-wrap{width:100%!important;display:flex!important;justify-content:center!important}
  .sr-table{min-width:0!important}
  /* Kolom angka yang tidak muat di telepon: Δ, People, Logins, Devices, Last leak.
     Digeser 6–10 → 7–11 waktu kolom Industry masuk di posisi 4 (Task C1); indeksnya
     posisi <td>, jadi kotak centang di kolom 1 ikut dihitung.

     ⚠️ Aturan ini TIDAK BERPENGARUH hari ini, dan itu perlu diketahui sebelum ada yang
     menghabiskan sore hari mencari kenapa mengubahnya tidak mengubah apa pun. Ia
     menyasar `.sr-table` mana pun, tapi satu-satunya tabel yang punya sebanyak ini
     kolom — radar dan Monitored companies — berada di dalam `.sr-desk-table`, yang
     BLOK YANG SAMA ini set display:none beberapa baris di atas; di bawah 640px
     kartulah yang tampil. Tiga tabel `.sr-table` lain (hasil impor, Archived, From
     Xpose) berhenti di 4–5 kolom, jadi nth-child(7) ke atas tidak pernah kena.

     Tetap dirawat, bukan dihapus: ia jaring pengaman kalau ada yang menampilkan
     tabelnya lagi di lebar sempit, dan selisih yang dibiarkan basi akan
     menyembunyikan kolom yang salah tanpa satu pun gejala sampai itu terjadi.

     Angka 7–11 dihitung untuk RADAR saja, dan sejak Task C2 selisihnya dengan
     Monitored companies melebar: tabel itu sekarang delapan kolom (Company,
     Domain, Score, Band, Country, Industry, Source, Action), jadi seandainya
     jaring ini pernah benar-benar menyala di sana ia akan menyembunyikan
     Source DAN Action — bukan cuma Action seperti sebelumnya. Dicatat, bukan
     diperbaiki: menyempitkan pemilihnya ke tabel radar adalah keputusan
     tersendiri atas aturan yang hari ini tidak menyala di mana pun, dan
     mengubahnya sambil lewat berarti menyentuh jaring pengaman satu-satunya
     tanpa satu pun cara membuktikannya masih menangkap. */
  .sr-table th:nth-child(7),.sr-table td:nth-child(7),.sr-table th:nth-child(8),.sr-table td:nth-child(8),.sr-table th:nth-child(9),.sr-table td:nth-child(9),.sr-table th:nth-child(10),.sr-table td:nth-child(10),.sr-table th:nth-child(11),.sr-table td:nth-child(11){display:none!important}
  .sr-signin-card{padding:30px 22px!important}
  .sr-rsec{padding-left:20px!important;padding-right:20px!important}
  .sr-hero-h{font-size:24px!important}
  .sr-ov-top{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  .sr-ov-top > div:first-child{width:auto!important}
  .sr-grid4{grid-template-columns:1fr!important}
  .sr-ov-top{padding:20px 18px!important}
  .sr-rfoot{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important;line-height:1.5}
  .sr-ov-card{padding:18px 18px!important;align-items:center!important;text-align:center!important}
  .sr-herometa{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:end!important;gap:14px 16px!important}
  .sr-metagrid{display:contents!important}
  .sr-herometa > span{justify-self:start;align-self:end}
  .sr-bignum{font-size:34px!important}
  .sr-rtoolbar{padding:10px 12px!important;gap:8px!important}
  .sr-tb-pre,.sr-tb-ico{display:none!important}
  .sr-pdf-pre{display:none!important}
  .sr-pdf-short{display:inline!important}
  .sr-tab-long{display:none!important}
  .sr-tab-short{display:inline!important}
  /* Nama pendek saja tidak lagi cukup. Tab kelima ditambah badge tiga digit di
     Domains membuat deretnya menuntut ~334px sementara telepon menyediakan
     288–398px, jadi flex-wrap menyisakan satu tab yatim di baris kedua — dan
     satu tab sendirian di bawah tidak terbaca sebagai bagian dari deret yang
     sama. Deret ini tidak pernah dibungkus lagi: dikecilkan ke 12px supaya
     muat utuh sampai 360px (Galaxy kelas A, lantai yang nyata hari ini), dan
     di bawah itu ia menggeser. Menggeser menyembunyikan tab; membungkus
     menyembunyikan bahwa mereka satu deret. Yang pertama lebih mudah
     ditemukan sendiri. */
  .sr-tabstrip{flex-wrap:nowrap!important;overflow-x:auto;gap:4px!important;scrollbar-width:none}
  /* Batang gulirnya digambar TEPAT di atas border-bottom deret ini, jadi ia
     terbaca sebagai garis abu tebal di bawah tab — bukan sebagai kontrol. Tab
     terakhir yang terpotong di tepi kanan sudah menjadi petunjuk bahwa masih
     ada isi, dan itu hanya terjadi di bawah 360px. */
  .sr-tabstrip::-webkit-scrollbar{display:none}
  .sr-tabstrip > button{margin-right:0!important;flex:0 0 auto!important;font-size:12px!important;gap:5px!important}
  .sr-pdfbtn{padding:8px 13px!important}
  .sr-heropair{width:100%!important;flex-direction:column!important}
  .sr-heropair > div[style*="width:1px"]{width:auto!important;height:1px!important}
  .sr-cred{grid-template-columns:1.6fr 1fr 0.75fr!important;gap:10px!important;padding-left:14px!important;padding-right:14px!important;font-size:11px!important}
  .sr-cred > span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .sr-cred > span:nth-child(3),.sr-cred > span:nth-child(4){display:none!important}
  .sr-matrix-head{display:none!important}
  .sr-matrix{grid-template-columns:1fr!important;gap:6px!important}
  /* Scope sektoral: terlipat secara bawaan di telepon, dan itu bukan kehematan ruang —
     plot polar lima belas juring pada lebar 347px tidak terbaca, jadi yang dibuka
     secara bawaan mestinya tidak ada. Yang tetap terlihat: judul, ringkasan satu baris,
     dan tombol yang membukanya.
     Aturannya di CSS dan bukan di state React, karena satu nilai state harus melayani
     dua jawaban berlawanan (desktop terbuka, telepon terlipat) — dan menerjemahkannya
     lewat lebar jendela yang dibaca sekali di render menghasilkan blok yang tidak ikut
     berubah waktu jendelanya diubah. */
  /* Badan blok TIDAK lagi disembunyikan di telepon. Sebelumnya seluruh blok terlipat,
     dan itu benar selama isinya plot polar lima belas juring yang memang tidak terbaca
     di lebar ini — tapi daftar batang terbaca. Yang terlipat berarti tidak ada: satu
     ketukan berdiri antara orangnya dan satu-satunya jawaban yang blok ini punya.

     Yang dipangkas sekarang BARISNYA, bukan bloknya — dan sejak 3 Agustus 2026
     pemangkasan itu berlaku di SEMUA lebar, jadi aturannya pindah ke blok dasar
     (`.sr-secmore` di atas). Yang tersisa di sini cuma paddingnya. */
  .sr-secscope{padding:15px 14px 14px!important}
  /* Daftar samping pindah ke BAWAH plot: pada lebar ini tidak ada "samping" yang
     tersisa, dan dua kolom akan menyisakan nama industri terpotong di kolom 120px. */
  /* Nama industri dipersempit dan kolom jumlah dilepas: di 375px empat kolom tidak
     muat, dan yang paling bisa dikorbankan adalah `n` — ia konteks, sementara nama,
     batang, dan skor bertiga menjawab pertanyaannya. Angkanya tetap ada di `title`
     dan di kolom Industry tabel di bawah. */
  .sr-secrow,.sr-sechd,.sr-secax{grid-template-columns:104px minmax(0,1fr) 40px!important;gap:9px!important}
  /* Kepala kolom tengah DIKOSONGKAN di 375px, bukan dipendekkan. "Average exposure
     score" membungkus dua baris dan mendorong seluruh daftar turun; memendekkannya jadi
     "SCORE" justru lebih buruk — kolom Score sungguhan berdiri tepat di sebelahnya dan
     dua kepala berbunyi sama persis. Sumbu 0..300 di bawahnya sudah menamai skalanya. */
  .sr-sechd span:nth-child(2){font-size:0!important}
  /* `>`, dan itu wajib: tanpanya `span:nth-child(4)` adalah selektor KETURUNAN dan ikut
     mengenai tick keempat (225) di dalam .sr-secticks, yang kebetulan juga anak keempat
     induknya. Sumbunya kehilangan satu angka di tengah tanpa satu pun gejala lain.
     Kelas cacat yang sama dengan `.sr-secticks span` dan shorthand `background`. */
  .sr-seccnt,.sr-sechd > span:nth-child(4),.sr-secax > span:nth-child(4){display:none!important}
}
@media (max-width: 640px){
  .sr-pagi{flex-direction:column!important;align-items:stretch!important;gap:14px!important}
  .sr-pagi-left{justify-content:center!important}
  .sr-pagi-nav{justify-content:center!important}
  .sr-desk-table{display:none!important}
  .sr-cards{display:flex!important}
  .sr-mobilebar{display:flex!important}
  .sr-backdrop{display:none!important}
  .sr-collapse-btn{display:none!important}
  .sr-aside{display:none!important}
  .sr-msheet-wrap{display:block!important}
  
  .sr-filters{gap:10px!important}
  .sr-scope{width:100%!important}
  .sr-scope > button{width:100%!important;padding:9px 12px!important}
  .sr-scope > button > svg{margin-left:auto!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. Yang ini
     yang berlaku di telepon sungguhan. */
  .sr-scope-long{display:none!important}
  .sr-scope-short{display:inline!important}
  /* Lantai lebar kotak pencarian dicabut di sini — lihat catatan di .sr-optsearch.
     Panel .sr-cofilters dijepit ke lebar SEL saringannya (170px di 375px), jadi lantai
     190px akan meluber keluar panelnya sendiri. */
  .sr-cofilters .sr-optsearch{min-width:0!important}
  .sr-scope [role="listbox"]{left:0!important;right:0!important;min-width:0!important;width:100%!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. Yang ini
     yang benar-benar berlaku di telepon sungguhan: zoom-nya perilaku viewport, dan
     viewport bukan container. */
  .sr-app input:not([type="checkbox"]):not([type="file"]),.sr-app textarea{font-size:16px!important}
  .sr-stip{display:none!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. */
  .sr-ttip{display:none!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. */
  .sr-rdfilters{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:start!important}
  .sr-rdfilters > *{min-width:0!important}
  .sr-rdfilters > .sr-f-search{grid-column:1/-1!important}
  /* Pengurut khusus telepon. Ia display:none inline — idiom yang SAMA dengan .sr-cards
     tepat di atas — dan HANYA blok ini yang menyalakannya, karena di atas 640px header
     kolomnya sendiri yang jadi kontrolnya dan dua permukaan yang terlihat bersamaan
     untuk satu state adalah tempat orang lupa melihat.
     Baris penuh, bukan setengah sel: labelnya membawa nama kolom DAN arahnya
     ("Sort: Last leak ▼"), dan di setengah lebar 375px itu terpotong jadi "Sort: La…" —
     yang menghapus justru satu-satunya bagian yang menjawab "urutannya apa sekarang". */
  .sr-rdfilters > .sr-f-sort,.sr-cofilters > .sr-f-sort{display:block!important;grid-column:1/-1!important}
  /* Kembaran aturan di blok @container di atas — termasuk `:not(.sr-f-search)`-nya,
     dan alasannya (tombol × pembersih) ditulis panjang di sana. */
  .sr-rdfilters > div:not(.sr-f-search) > button,.sr-rdfilters > label{width:100%!important;min-width:0!important}
  .sr-rdfilters > label{justify-content:center!important}
  .sr-rdfilters [data-sr-menu] > div{left:0!important;right:0!important;min-width:0!important;width:auto!important}
  /* Label opsi MEMBUNGKUS di sini, tidak dipotong. Aturan di atas menjepit panel ke
     lebar selnya — setengah layar — dan kotak centang mengambil 32px lagi dari sisa
     itu, jadi di 320px "Very High Risk" jadi "Very Hig…". Yang terpotong justru kata
     yang membedakannya dari "Very Low".
     Melebarkan panelnya BUKAN jalan keluar: penjepitan itu ada karena panel di sel
     kolom kanan yang tumbuh sesuai isinya keluar layar, dan tidak ada yang bisa
     menggulir ke sana. Membungkus tidak bisa meluber ke mana pun, dan barisnya
     memang sudah boleh tumbuh — `min-height`, bukan `height`. */
  .sr-opt .sr-optlbl{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .sr-rdfilters [data-sr-menu] > div button > span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana,
     termasuk daftar urutan kedelapan kontrolnya. Kalau salah satu blok diubah
     tanpa yang lain, strip ini akan berperilaku berbeda menurut apakah
     browsernya mendukung container query. */
  .sr-cofilters{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:start!important}
  .sr-cofilters > *{min-width:0!important}
  .sr-cofilters > *:nth-child(1),.sr-cofilters > *:nth-child(8){grid-column:1/-1!important}
  /* `.sr-ttwrap` ikut disebut, dan itu bukan kelengkapan: tombol Import CSV dibungkus
     satu <span class="sr-ttwrap"> supaya tooltipnya tidak terpotong `overflow:hidden`
     milik <label>-nya, dan sejak itu labelnya BUKAN LAGI anak langsung strip ini —
     tanpa baris ini ia berhenti melebar penuh di telepon sementara tetangganya melebar. */
  .sr-cofilters > div:not(.sr-f-search) > button,.sr-cofilters > button,.sr-cofilters > label,
  .sr-cofilters > .sr-ttwrap,.sr-cofilters > .sr-ttwrap > label{width:100%!important;min-width:0!important}
  .sr-cofilters > button,.sr-cofilters > label,.sr-cofilters > a,
  .sr-cofilters > .sr-ttwrap > label{justify-content:center!important}
  /* Menu dropdown dijepit ke lebar SELNYA. Tanpa ini menu berlabuh `left:0` di dalam
     sel kolom KANAN lalu tumbuh selebar isinya — "Consumer Products & Services" ~250px
     dari sel ~165px — dan separuh daftarnya keluar layar di sisi kanan tanpa ada yang
     bisa menggulirnya ke sana. Terlihat di produksi pada saringan industri.

     Menjepitnya ke lebar sel, bukan menggesernya ke `right:0`: sel kolom KIRI akan
     tumbuh ke kiri dan keluar layar di sisi sebaliknya, dan membedakan keduanya menuntut
     nth-child yang bergeser tiap ada kontrol ditambah — dua bug yang sudah kena hari ini.
     Idiom yang sama dengan .sr-scope [role="listbox"] di atas. */
  .sr-cofilters [data-sr-menu] > div{left:0!important;right:0!important;min-width:0!important;width:auto!important}
  /* Sama seperti di .sr-rdfilters — dan di sini lebih perlu lagi: nama industri
     kanonik ("Telecommunications & Media") tidak muat di setengah layar mana pun. */
  .sr-opt .sr-optlbl{white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .sr-cofilters [data-sr-menu] > div button > span:first-child{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .sr-gapchips{display:grid!important;grid-template-columns:1fr!important;gap:6px!important}
  .sr-gapchips > button{justify-content:space-between!important;padding:8px 12px!important}
  .sr-navlist{flex:0 0 auto!important;padding-top:10px!important}
  .sr-aside .sr-footer{border-top:1px solid #35538A!important;padding-top:12px!important;margin-top:12px!important}
  .sr-aside .sr-brandcol{display:none!important}
  .sr-brandcol{width:auto!important;padding-right:14px!important}
  .sr-console{padding:20px 18px!important;gap:20px!important}
  .sr-main-pad{padding:16px 13px 48px!important}
  .sr-h1{font-size:26px!important}
  .sr-hero-row{gap:13px!important}
  .sr-radar-card{width:100%!important;padding:14px!important}
  /* Legend MENGALIR di bawah kanvas di telepon, tidak lagi absolut. Di desktop kotaknya
     440x500 dan foot absolut duduk rapi di 60px sisa bawah kanvas — di sini sisanya cuma
     84px (384-300) sementara lima chip @44px (baris .sr-radar-foot button di blok dasar)
     membungkus jadi dua-tiga baris ~100px, jadi ia memanjat balik ke atas lingkarannya.
     Tinggi tetap apa pun akan salah lagi begitu jumlah band atau lebar layar berubah;
     yang benar adalah membiarkan kotaknya setinggi isinya. */
  .sr-radar-box{width:300px!important;height:auto!important}
  .sr-radar-box canvas{width:300px!important;height:300px!important}
  .sr-radar-glow{width:300px!important;height:300px!important}
  .sr-radar-foot{position:static!important;padding:12px 8px 0!important}
  .sr-radar-wrap{width:100%!important;display:flex!important;justify-content:center!important}
  .sr-table{min-width:0!important}
  /* Kolom angka yang tidak muat di telepon: Δ, People, Logins, Devices, Last leak.
     Digeser 6–10 → 7–11 waktu kolom Industry masuk di posisi 4 (Task C1); indeksnya
     posisi <td>, jadi kotak centang di kolom 1 ikut dihitung.

     ⚠️ Aturan ini TIDAK BERPENGARUH hari ini, dan itu perlu diketahui sebelum ada yang
     menghabiskan sore hari mencari kenapa mengubahnya tidak mengubah apa pun. Ia
     menyasar `.sr-table` mana pun, tapi satu-satunya tabel yang punya sebanyak ini
     kolom — radar dan Monitored companies — berada di dalam `.sr-desk-table`, yang
     BLOK YANG SAMA ini set display:none beberapa baris di atas; di bawah 640px
     kartulah yang tampil. Tiga tabel `.sr-table` lain (hasil impor, Archived, From
     Xpose) berhenti di 4–5 kolom, jadi nth-child(7) ke atas tidak pernah kena.

     Tetap dirawat, bukan dihapus: ia jaring pengaman kalau ada yang menampilkan
     tabelnya lagi di lebar sempit, dan selisih yang dibiarkan basi akan
     menyembunyikan kolom yang salah tanpa satu pun gejala sampai itu terjadi.

     Angka 7–11 dihitung untuk RADAR saja, dan sejak Task C2 selisihnya dengan
     Monitored companies melebar: tabel itu sekarang delapan kolom (Company,
     Domain, Score, Band, Country, Industry, Source, Action), jadi seandainya
     jaring ini pernah benar-benar menyala di sana ia akan menyembunyikan
     Source DAN Action — bukan cuma Action seperti sebelumnya. Dicatat, bukan
     diperbaiki: menyempitkan pemilihnya ke tabel radar adalah keputusan
     tersendiri atas aturan yang hari ini tidak menyala di mana pun, dan
     mengubahnya sambil lewat berarti menyentuh jaring pengaman satu-satunya
     tanpa satu pun cara membuktikannya masih menangkap. */
  .sr-table th:nth-child(7),.sr-table td:nth-child(7),.sr-table th:nth-child(8),.sr-table td:nth-child(8),.sr-table th:nth-child(9),.sr-table td:nth-child(9),.sr-table th:nth-child(10),.sr-table td:nth-child(10),.sr-table th:nth-child(11),.sr-table td:nth-child(11){display:none!important}
  .sr-signin-card{padding:30px 22px!important}
  .sr-rsec{padding-left:20px!important;padding-right:20px!important}
  .sr-hero-h{font-size:24px!important}
  .sr-ov-top{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  .sr-ov-top > div:first-child{width:auto!important}
  .sr-grid4{grid-template-columns:1fr!important}
  .sr-ov-top{padding:20px 18px!important}
  .sr-rfoot{flex-direction:column!important;align-items:center!important;text-align:center!important;gap:6px!important;line-height:1.5}
  .sr-ov-card{padding:18px 18px!important;align-items:center!important;text-align:center!important}
  .sr-herometa{display:grid!important;grid-template-columns:1fr 1fr!important;align-items:end!important;gap:14px 16px!important}
  .sr-metagrid{display:contents!important}
  .sr-herometa > span{justify-self:start;align-self:end}
  .sr-bignum{font-size:34px!important}
  .sr-rtoolbar{padding:10px 12px!important;gap:8px!important}
  .sr-tb-pre,.sr-tb-ico{display:none!important}
  .sr-pdf-pre{display:none!important}
  .sr-pdf-short{display:inline!important}
  .sr-tab-long{display:none!important}
  .sr-tab-short{display:inline!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. */
  .sr-tabstrip{flex-wrap:nowrap!important;overflow-x:auto;gap:4px!important;scrollbar-width:none}
  /* Batang gulirnya digambar TEPAT di atas border-bottom deret ini, jadi ia
     terbaca sebagai garis abu tebal di bawah tab — bukan sebagai kontrol. Tab
     terakhir yang terpotong di tepi kanan sudah menjadi petunjuk bahwa masih
     ada isi, dan itu hanya terjadi di bawah 360px. */
  .sr-tabstrip::-webkit-scrollbar{display:none}
  .sr-tabstrip > button{margin-right:0!important;flex:0 0 auto!important;font-size:12px!important;gap:5px!important}
  .sr-pdfbtn{padding:8px 13px!important}
  .sr-heropair{width:100%!important;flex-direction:column!important}
  .sr-heropair > div[style*="width:1px"]{width:auto!important;height:1px!important}
  .sr-cred{grid-template-columns:1.6fr 1fr 0.75fr!important;gap:10px!important;padding-left:14px!important;padding-right:14px!important;font-size:11px!important}
  .sr-cred > span{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
  .sr-cred > span:nth-child(3),.sr-cred > span:nth-child(4){display:none!important}
  .sr-matrix-head{display:none!important}
  .sr-matrix{grid-template-columns:1fr!important;gap:6px!important}
  /* Kembaran aturan di blok @container di atas — lihat komentarnya di sana. */
  /* Badan blok TIDAK lagi disembunyikan di telepon. Sebelumnya seluruh blok terlipat,
     dan itu benar selama isinya plot polar lima belas juring yang memang tidak terbaca
     di lebar ini — tapi daftar batang terbaca. Yang terlipat berarti tidak ada: satu
     ketukan berdiri antara orangnya dan satu-satunya jawaban yang blok ini punya.

     Yang dipangkas sekarang BARISNYA, bukan bloknya — dan sejak 3 Agustus 2026
     pemangkasan itu berlaku di SEMUA lebar, jadi aturannya pindah ke blok dasar
     (`.sr-secmore` di atas). Yang tersisa di sini cuma paddingnya. */
  .sr-secscope{padding:15px 14px 14px!important}
  /* Nama industri dipersempit dan kolom jumlah dilepas: di 375px empat kolom tidak
     muat, dan yang paling bisa dikorbankan adalah `n` — ia konteks, sementara nama,
     batang, dan skor bertiga menjawab pertanyaannya. Angkanya tetap ada di `title`
     dan di kolom Industry tabel di bawah. */
  .sr-secrow,.sr-sechd,.sr-secax{grid-template-columns:104px minmax(0,1fr) 40px!important;gap:9px!important}
  /* Kepala kolom tengah DIKOSONGKAN di 375px, bukan dipendekkan. "Average exposure
     score" membungkus dua baris dan mendorong seluruh daftar turun; memendekkannya jadi
     "SCORE" justru lebih buruk — kolom Score sungguhan berdiri tepat di sebelahnya dan
     dua kepala berbunyi sama persis. Sumbu 0..300 di bawahnya sudah menamai skalanya. */
  .sr-sechd span:nth-child(2){font-size:0!important}
  /* `>`, dan itu wajib: tanpanya `span:nth-child(4)` adalah selektor KETURUNAN dan ikut
     mengenai tick keempat (225) di dalam .sr-secticks, yang kebetulan juga anak keempat
     induknya. Sumbunya kehilangan satu angka di tengah tanpa satu pun gejala lain.
     Kelas cacat yang sama dengan `.sr-secticks span` dan shorthand `background`. */
  .sr-seccnt,.sr-sechd > span:nth-child(4),.sr-secax > span:nth-child(4){display:none!important}
}
.sr-app[data-vp="mobile"] .sr-panelwrap,
.sr-app[data-vp="mobile"] .sr-msheet-wrap{position:absolute!important;inset:0!important}
/* Gulir di DALAM panel berhenti di panel. Tanpa ini, mentok di ujung daftar
   menyambung ke halaman di belakangnya (scroll chaining) — dan di iOS itu yang
   menggeser lapisan fixed-nya sendiri. Pasangan dari kunci gulir di lockScroll(). */
.sr-panelwrap{overscroll-behavior:contain}
@keyframes srslidein{from{transform:translateX(26px);opacity:.4}to{transform:none;opacity:1}}
@keyframes srtoast{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}}
.sr-range{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;background:var(--sr-track);outline:none}
.sr-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:17px;height:17px;border-radius:50%;background:var(--magenta-500);border:2px solid var(--sr-surface);box-shadow:0 2px 6px rgba(216,52,131,.5);cursor:pointer}
.sr-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--magenta-500);border:2px solid var(--sr-surface);cursor:pointer}
@container (max-width: 640px){
  .sr-alertpanel{width:100%!important;border-radius:0!important}
  .sr-toast{left:12px!important;right:12px!important;bottom:auto!important;top:66px!important;width:auto!important}
  .sr-phones{flex-direction:column!important;align-items:center!important}
  /* Section "Posisi di sektor" di panel report. `!important` karena ketiganya membawa
     gaya inline dari templat (lebar strip 300px, kartu flex-row) — tanpa itu aturan di
     sini kalah. Chip pilar jadi 2x2, bukan 4x1: empat kolom di 375px menyisakan ~70px
     per chip, dan angkanya berhenti terbaca. */
  .sr-peerscard{flex-direction:column!important;align-items:stretch!important;gap:15px!important}
  .sr-peersstrip{width:100%!important}
  .sr-peerschips{display:grid!important;grid-template-columns:1fr 1fr!important}
}
@media (max-width: 640px){
  .sr-alertpanel{width:100%!important;border-radius:0!important}
  .sr-toast{left:12px!important;right:12px!important;bottom:auto!important;top:66px!important;width:auto!important}
  .sr-phones{flex-direction:column!important;align-items:center!important}
  /* Section "Posisi di sektor" di panel report. `!important` karena ketiganya membawa
     gaya inline dari templat (lebar strip 300px, kartu flex-row) — tanpa itu aturan di
     sini kalah. Chip pilar jadi 2x2, bukan 4x1: empat kolom di 375px menyisakan ~70px
     per chip, dan angkanya berhenti terbaca. */
  .sr-peerscard{flex-direction:column!important;align-items:stretch!important;gap:15px!important}
  .sr-peersstrip{width:100%!important}
  .sr-peerschips{display:grid!important;grid-template-columns:1fr 1fr!important}
}
@media print{
  body *{visibility:hidden}
  .sr-report,.sr-report *{visibility:visible}
  .sr-report{position:absolute!important;inset:0;padding:0!important;background:#06172F!important;max-width:none!important;border-radius:0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .sr-noprint{display:none!important}
}