/* Pill kategori + toolbar daftar — SATU SUMBER untuk /blog, /video, /tools, /kelas.

   ---- KENAPA BERKAS INI ADA ----
   Gaya pill ini lahir di blog.css sebagai `.tblog-cats__chip`, lalu DISALIN ke
   video.css sebagai `.tv-chip`; komentar di video.css baris 14 menyebutnya apa
   adanya, "SALINAN .tblog-cats + .tblog-cats__chip dari blog.css". Ketika Ega
   meminta gaya yang sama dipakai /tools dan /kelas (5 Sep 2026), pilihannya
   menambah salinan ketiga dan keempat, atau berhenti menyalin. Arahan Ega:
   berhenti menyalin.

   Nilai yang disalin tidak pernah memunculkan error saat ia melenceng. Ia cuma
   pelan-pelan jadi beda, dan orang melihatnya sebagai "halaman kita bentuknya
   beda-beda" — keluhan yang persis sama pernah muncul untuk hero /tools yang
   markupnya tersebar di 14 berkas.

   ---- CARA MEMAKAI ----
   Muat berkas ini SEBELUM stylesheet halaman, supaya aturan khusus halaman
   masih bisa menimpanya:

       <link rel="stylesheet" href="{{ asset('assets/shared/listing-toolbar.css') }}?v=...">
       <link rel="stylesheet" href="{{ asset('assets/blog/blog.css') }}?v=...">

   ---- DUA KEADAAN AKTIF, DAN ITU DISENGAJA ----
   Halaman daftar memakai dua bentuk pill yang berbeda secara semantik:
     - /blog, /video, /kelas  -> <a> yang MENAVIGASI ke URL kategori. Keadaan
       aktifnya `.is-active`, sama dengan konvensi kelas.css.
     - /tools                 -> <button> yang MENYARING di tempat tanpa pindah
       halaman. Keadaan aktifnya `aria-pressed="true"`, karena itulah atribut
       yang benar untuk tombol dua keadaan dan itu yang dibaca pembaca layar.
   Keduanya didukung. JANGAN menyeragamkannya jadi satu: memaksa /tools memakai
   `.is-active` membuang informasi yang dipakai teknologi bantu, dan memaksa
   /blog memakai `aria-pressed` berbohong tentang apa yang dilakukan tautan itu.

   ⚠ Pill MEMBUNGKUS ke baris berikutnya, tidak menggulir mendatar. Itu perilaku
   /video dan /blog yang sudah berjalan, dan sejak 5 Sep 2026 juga /tools: hub
   /tools sempat digulir mendatar karena kategori ketujuh tidak muat satu baris,
   dan solusi itu dicabut begitu gayanya disamakan. Membungkus lebih baik di sini
   karena jumlah kategori memang bertambah terus dan baris kedua tetap terlihat,
   sedangkan isi yang tergulir ke kanan tidak pernah ditemukan sebagian orang. */

.tls-pills{background:#fff;border-bottom:1px solid #e8ecf3}
.tls-pills__inner{max-width:1320px;margin:0 auto;padding:14px 12px;
  display:flex;flex-wrap:wrap;gap:8px}

.tls-pill{font-size:13px;padding:6px 14px;border-radius:999px;background:#f1f4fb;color:#334155;
  text-decoration:none;transition:.15s;white-space:nowrap;border:0;line-height:1.2;
  font-family:inherit;font-weight:400;cursor:pointer}
.tls-pill:hover{background:#e2e8fa;color:#004aad}
.tls-pill:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,74,173,.18)}
.tls-pill.is-active,
.tls-pill[aria-pressed="true"]{background:#004aad;color:#fff}

/* Angka jumlah di dalam pill. `small` dipakai /video dan /blog; `.tls-pill__n`
   disediakan untuk markup yang tidak ingin memakai elemen `small`. */
.tls-pill small,
.tls-pill__n{opacity:.65;margin-left:5px;font-size:.92em;font-weight:inherit}
.tls-pill.is-active small,
.tls-pill[aria-pressed="true"] small,
.tls-pill.is-active .tls-pill__n,
.tls-pill[aria-pressed="true"] .tls-pill__n{opacity:.8}

@media(max-width:600px){
  .tls-pills__inner{gap:6px;padding:12px}
  /* Sasaran sentuh. Diukur di emulasi 375px saat chip /tools dibuat: padding
     kecil membuat pill sulit ditekan tepat. */
  .tls-pill{padding:8px 13px;font-size:12.5px}
}