/**
 * TAHAP 2 / ITEM 1 (2026-09-24) — kartu fungsi Tools.
 *
 * SATU tampilan kartu yang dipakai SEMUA pintu Tools: /alat,
 * /akun-saya/tools, /kalkulator, /komparator, dan pintu owner. Sebelum ini
 * tiap pintu punya tampilannya sendiri.
 *
 * Seluruh nilai memakai token sr-design-system.css. Tanpa warna hardcode,
 * tanpa emoji. Daftar sengaja RATA: tidak ada baris chip penyaring kategori,
 * mengikuti keputusan pemilik "pilih kartu fungsi dulu, tanpa toggle kategori".
 *
 * PAKET RAPIH TAMPILAN (2026-09-28):
 *   - Kartu = IKON + NAMA saja. Deskripsi & penanda tetap ada di DOM
 *     (dipakai pencarian & pembaca layar) tapi disembunyikan dari tampilan.
 *   - Deskripsi muncul sebagai tooltip HANYA saat kursor menyentuh kartu,
 *     dan HANYA di perangkat berkursor: @media (hover: hover) and (pointer: fine).
 *     Di layar sentuh (hover: none) deskripsi tidak pernah muncul, jadi sentuhan
 *     pertama langsung membuka alat (tanpa sentuhan ganda).
 *   - Ikon: SVG inline garis tipis, warna dari token oranye identitas.
 */

.sr-ka-daftar {
  display: grid;
  gap: var(--sr-space-3);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  margin: 0 0 var(--sr-space-6);
  padding: 0;
  list-style: none;
}

.sr-ka-kartu {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sr-space-2);
  min-height: 100%;
  padding: var(--sr-space-4);
  background: var(--sr-color-bg);
  border: var(--sr-border-width) solid var(--sr-color-border);
  border-radius: var(--sr-radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--sr-transition-fast);
}

a.sr-ka-kartu:hover,
a.sr-ka-kartu:focus-visible {
  border-color: var(--sr-color-orange);
}

/* Baris kepala: ikon + nama, sejajar tengah. */
.sr-ka-kepala {
  display: flex;
  align-items: center;
  gap: var(--sr-space-3);
}

.sr-ka-ikon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--sr-radius-md);
  background: var(--sr-color-orange-tint);
  color: var(--sr-color-orange-dark);   /* diserap SVG via currentColor; lolos AA di atas tint */
}

.sr-ka-svg {
  display: block;
  width: 24px;
  height: 24px;
}

.sr-ka-kartu strong {
  font-size: var(--sr-text-body);
  font-weight: var(--sr-font-weight-bold);
  line-height: var(--sr-line-height-heading);
}

/* Deskripsi & penanda: tetap di DOM, disembunyikan dari tampilan secara bawaan.
   Deskripsi bisa muncul lagi sebagai tooltip HANYA di perangkat berkursor
   (lihat blok @media di bawah). Penanda tidak ditampilkan sama sekali. */
.sr-ka-ket {
  display: none;
  margin: 0;
  font-size: var(--sr-text-sm);
  line-height: var(--sr-line-height-body);
  color: var(--sr-color-text-secondary);
}

.sr-ka-tanda {
  display: none;
}

/* Kartu yang belum bisa dibuka (alat lama, perlu masuk dulu). Sengaja BUKAN
   tautan, supaya tidak ada tautan yang mengantar ke halaman penolakan. State
   ini tetap terbaca dari gaya kartunya sendiri walau penandanya disembunyikan. */
.sr-ka-kartu.is-terkunci {
  background: var(--sr-color-bg-secondary);
  border-style: dashed;
}

.sr-ka-catatan {
  margin: 0 0 var(--sr-space-4);
  font-size: var(--sr-text-sm);
  line-height: var(--sr-line-height-body);
  color: var(--sr-color-text-secondary);
}

/* Hanya perangkat berkursor: deskripsi muncul sebagai tooltip saat kursor
   menyentuh (atau kartu tautan mendapat fokus keyboard). Layar sentuh tidak
   memenuhi syarat ini, jadi deskripsi tetap tersembunyi di sana. */
@media (hover: hover) and (pointer: fine) {
  .sr-ka-ket {
    display: block;
    position: absolute;
    left: var(--sr-space-3);
    right: var(--sr-space-3);
    top: calc(100% - var(--sr-space-2));
    z-index: 20;
    padding: var(--sr-space-3) var(--sr-space-4);
    background: var(--sr-color-bg);
    border: var(--sr-border-width) solid var(--sr-color-border);
    border-radius: var(--sr-radius-md);
    box-shadow: var(--sr-shadow-md, 0 6px 20px rgba(32, 35, 31, 0.14));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--sr-transition-fast), transform var(--sr-transition-fast), visibility var(--sr-transition-fast);
    pointer-events: none;
  }

  .sr-ka-kartu:hover .sr-ka-ket,
  .sr-ka-kartu:focus-visible .sr-ka-ket,
  .sr-ka-kartu:focus-within .sr-ka-ket {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width: 480px) {
  .sr-ka-daftar { grid-template-columns: minmax(0, 1fr); }
}