/* =========================================================================
   Daftar kode KBLI <x-vt.kbli />
   =========================================================================
   Berkas terpisah dengan alasan yang sama seperti wilayah.css: komponennya
   dipakai di dua tema sekaligus - halaman vendor/panitia yang memuat
   vendor-tender.css, dan portal publik yang hanya mengenal portal.css.
   Komponen memuat berkas ini sendiri (@once).

   Bentuknya dua kolom: kode di kiri dengan lebar tetap dan huruf monospace
   supaya deretannya sejajar dan dapat dipindai dari atas ke bawah, keterangan
   mengisi sisanya. Sebelum ini daftarnya dirangkai menjadi satu kalimat
   berkoma di dalam sel rincian, dan satu izin berisi tujuh KBLI memanjangkan
   kartunya berlayar-layar.
   ========================================================================= */

:root {
    --kb-ink: #10212c;
    --kb-muted: #6b7c87;
    --kb-line: #e1e7ea;
    --kb-canvas: #f4f6f7;
    --kb-wait: #a96b00;
    --kb-wait-soft: #fdf3e2;
    --kb-open: #0b6e4f;
}

/* --- Daftar KBLI --------------------------------------------------------- */

.vt-kbli {
    list-style: none;
    margin: 0;
    padding: 0 4px 0 0;
    display: flex;
    flex-direction: column;
    gap: 2px;

    /* Dibatasi tingginya dengan pola yang sama seperti rincian HPS
       (.vt-tabel-gulir): satu izin usaha bisa memuat lebih dari seratus KBLI -
       yang terpanjang di basis data ini 133 - dan daftar sepanjang itu
       sendirian mendorong seluruh isi di bawahnya jauh ke luar layar.

       Batasnya tidak bergantung jumlah baris melainkan tinggi sesungguhnya:
       sepuluh kode berketerangan panjang melipat menjadi 666 piksel, dua kali
       lebih tinggi daripada dua puluh kode berketerangan pendek. */
    max-height: 320px;
    overflow-y: auto;
}

.vt-kbli__jumlah {
    margin: 0 0 4px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kb-muted);
}

.vt-kbli__butir {
    display: grid;
    /* Lima digit monospace ditambah ruang napas; kolomnya tetap supaya
       keterangan seluruh baris mulai pada garis yang sama. */
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid var(--kb-line);
}

.vt-kbli__butir:last-child {
    border-bottom: 0;
}

.vt-kbli__kode {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: .02em;
    color: var(--kb-ink);
    background: var(--kb-canvas);
    border-radius: 4px;
    padding: 2px 6px;
    text-align: center;
}

.vt-kbli__nama {
    font-size: 13px;
    line-height: 1.45;
    color: var(--kb-ink);
    /* Keterangan KBLI 2020 seluruhnya huruf kapital dan bisa sangat panjang;
       dibiarkan melipat, bukan dipotong - kode yang keterangannya terpenggal
       tidak dapat dicocokkan dengan izin di atas meja. */
    overflow-wrap: anywhere;
}

.vt-kbli__tanda {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kb-wait);
    background: var(--kb-wait-soft);
    white-space: nowrap;
    vertical-align: middle;
}

.vt-kbli__berkas {
    font-size: 12px;
    color: var(--kb-open);
    white-space: nowrap;
}

.vt-kbli__nihil {
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--kb-wait);
    white-space: nowrap;
}

/* Hasil penilaian kelayakan, satu baris penuh di bawah kode dan keterangannya:
   penanda tanpa alasan menyuruh panitia memercayai jawaban yang tidak dapat
   ditelusurinya ke buku BPS. */
.vt-kbli__ringkas {
    margin: 0 0 8px;
    font-size: 12.5px;
    color: var(--kb-ink);
}

.vt-kbli__jawab {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}

.vt-kbli__alasan {
    font-size: 11.5px;
    color: var(--kb-muted);
    line-height: 1.5;
}

.vt-kbli__kosong {
    margin: 0;
    font-size: 13px;
    color: var(--kb-muted);
}

/* Di layar sempit kode berdiri di atas keterangannya: dua kolom selebar
   72px + sisa membuat keterangannya tinggal beberapa huruf per baris. */
@media (max-width: 520px) {
    .vt-kbli__jumlah {
    margin: 0 0 4px;
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--kb-muted);
}

.vt-kbli__butir {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .vt-kbli__kode {
        grid-column: 1 / -1;
        justify-self: start;
    }
}