/* =============================================================================
   assets/css/ui-aspirasi.css [PATCH163] Kunci layar, jadwal, dan tanggapan
   di Kotak Aspirasi.
   =============================================================================
   Di <head>, bukan dimuat belakangan, karena tirai PIN-nya harus sudah bergaya
   sejak halaman pertama digambar. Tirai yang sempat tergambar sebagai daftar
   kotak polos sebelum melompat menjadi tirai membuat orang mengira daftarnya
   sempat terlihat, padahal yang terlihat memang belum berisi apa-apa.
   ========================================================================== */

/* ── Tirai PIN ───────────────────────────────────────────────────────────── */
.asp-kunci {
    text-align: center;
}

.asp-kunci-ikon {
    font-size: 1.8rem;
    color: #6c8aa5;
}

/* Kotak PIN. Huruf lebar dan berjarak supaya enam angka terbaca sebagai enam
   angka, bukan sebagai satu bilangan panjang. */
.asp-pin {
    font-size: 1.35rem;
    letter-spacing: .5rem;
    font-weight: 600;
    padding-left: .5rem;
}

.asp-pin::placeholder {
    letter-spacing: .35rem;
    font-weight: 400;
    color: #9aa4ae;
}

/* ── Blok jadwal pertemuan ───────────────────────────────────────────────── */
.asp-jadwal,
.asp-1on1 {
    border: 1px solid #ccd6e0;
    border-left-width: 3px;
    border-radius: .25rem;
    padding: .6rem .7rem;
    background: #f4f8fb;
}

.asp-jadwal-waktu {
    font-weight: 600;
    font-size: .85rem;
}

/* ── Tanggapan yang dibaca pengirim ──────────────────────────────────────── */
/* Warnanya sengaja BEDA dari catatan internal. Dua kotak yang mirip di layar
   yang sama, satu dibaca pengirim dan satu tidak, adalah cara paling mudah
   membuat disposisi internal terkirim ke orang yang sedang dibicarakannya. */
.asp-tanggapan {
    border: 1px solid #bcd8c4;
    border-left-width: 3px;
    border-radius: .25rem;
    padding: .5rem .6rem;
    background: #f2f9f4;
}

.asp-tanggapan-isi {
    white-space: pre-wrap;
}

.asp-tanggapan-kotak label {
    font-weight: 600;
}
