/* Layar Task dan layar sebuah tugas yang dibuka.
   Bentuknya GARIS WAKTU: jam berdiri di luar kartu, di kiri, dihubungkan satu
   garis menurun. Pertanyaan yang dibawa orang ke layar ini adalah "jam berapa
   apa", dan jam yang berbaris rapi di satu kolom bisa dibaca sekilas -
   sedangkan jam yang terselip di dalam tiap kartu harus dicari satu per satu. */

.rel + .rel {
  margin-top: 16px;
}

.rel__hari {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 8px;
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  font-weight: 600;
}

.rel__baris {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* Kolom jam. Garis menurunnya digambar sebagai latar kolom ini, jadi ia
   tersambung dari baris pertama sampai terakhir tanpa satu pun elemen tambahan. */
.rel__jam {
  position: relative;
  flex: 0 0 50px;
  padding-top: 12px;
  text-align: right;
}

.rel__jam::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: -10px;
  right: 4px;
  width: 1px;
  background: var(--garis);
}

.rel__baris:last-child .rel__jam::before {
  bottom: 50%;
}

.rel__jam-teks {
  position: relative;
  display: block;
  padding-right: 10px;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rel__titik {
  position: absolute;
  top: 18px;
  right: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--garis);
}

.rel__isi {
  flex: 1;
  min-width: 0;
  padding-bottom: 10px;
}

.rel__hari .tombol,
.waktu__hari .tombol {
  min-height: 34px;
  padding: 5px 10px;
  font-size: 0.8125rem;
}

/* ---------- satu kartu tugas (sketsa hal. 1) ---------- */

.tugas {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
}

.tugas__atas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.tugas__affect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.tugas__affect-label {
  color: var(--tinta-redup);
  font-weight: 600;
}

.tugas__buka {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.tugas__judul {
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
  word-break: break-word;
}

.tugas__ket {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tugas__kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--garis);
}

/* Hitung mundur ditulis apa adanya di sebelah statusnya, bukan disembunyikan di
   dalam Details: inilah satu-satunya angka yang menentukan apakah tugas ini
   harus dikerjakan sekarang atau masih bisa nanti. */
.mundur {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* Tombol Run rata kanan, di tiap kartu tugas. Keterangan tumbuh dari kiri -
   status, penanda terlambat, hitung mundur - jadi tombol yang mengikutinya
   berpindah tempat kartu demi kartu, dan jari yang sudah hafal letaknya menekan
   ruang kosong. Didorong ke ujung kanan, letaknya sama pada semua kartu. */
.tugas__jalan {
  margin-left: auto;
}

/* Isian yang terkunci ditampilkan sebagai TULISAN, bukan kotak yang dimatikan.
   Kotak yang dimatikan tetap terlihat seperti kotak isian, dan orang yang
   mengetik ke dalamnya baru sadar tidak terjadi apa-apa sesudah beberapa kata. */
.isian--beku {
  padding: 11px 12px;
  border: 1px dashed var(--garis);
  border-radius: 10px;
  color: var(--tinta-redup);
  word-break: break-word;
}

/* ---------- Active Now ----------

   Rombongan di kepala tab Active, tepat di bawah judul tanggal. Isinya tugas
   yang tidak bisa lagi ditampung garis waktu di bawahnya - yang jamnya sudah
   lewat, yang tidak punya jam sama sekali, yang sedang dikerjakan, dan yang
   terlambat.

   TIDAK PUNYA KOLOM JAM, dan itu seluruh maksudnya: jam yang sudah lewat bukan
   lagi keterangan yang menolong, dan kolom kosong selebar 50px cuma menyisakan
   lekukan di kepala layar. */
/* minmax(0, 1fr) WAJIB, bukan grid telanjang. Trek "auto" tidak pernah menyusut
   di bawah min-content isinya, dan sebuah kartu tugas punya lantai ±409px karena
   baris "Affect:" dan hitung mundurnya tidak boleh patah. Di layar 430px kartunya
   melebar 4px melewati kotaknya - terpotong diam-diam, tanpa satu pun pesan.
   Pagarnya RELATIF, bukan px: ia harus benar di 320px maupun di 1280px. */
.sekarang {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

/* ---------- baris tugas yang tipis (view Week & Month) ----------

   Titik status, judul, PIC. Tujuh hari dikali belasan tugas tidak muat kalau
   tiap barisnya sebesar kartu di garis waktu. */
.tipis {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}

.tipis__buka {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  /* WAJIB. Tanpa min-width:0 sebuah anak flex tidak pernah menyusut di bawah
     lebar tulisannya sendiri, dan judul task yang panjang mendorong PIC keluar
     layar alih-alih dipotong tiga titik. */
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.tipis__judul {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tipis__pic {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 40%;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tipis .tombol {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  font-size: 0.8125rem;
}

/* ---------- view Week ---------- */

.rentang {
  display: grid;
  /* minmax(0, 1fr), bukan 1fr: sebuah <input type="date"> punya lebar bawaan
     yang tidak kecil, dan trek 1fr tidak pernah menyusut di bawahnya - dua
     kotak tanggal berdampingan melebar melewati layar 320px tanpa pagar ini. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.rentang__isian {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-weight: 600;
}

.rentang__isian .isian {
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
}

.pekan__hari {
  padding: 8px 10px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
}

.pekan__hari + .pekan__hari {
  margin-top: 8px;
}

.pekan__hari--kini {
  border-color: var(--utama);
}

.pekan__kepala {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  padding: 0 0 6px;
  border: 0;
  border-bottom: 1px solid var(--garis);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.pekan__nama {
  font-weight: 650;
}

.pekan__tanggal {
  color: var(--tinta-redup);
  font-size: 0.8125rem;
}

/* Deadline dibedakan dari tugas biasa dengan garis di kirinya, bukan dengan
   warna tulisan: warna sudah dipakai titik statusnya, dan dua sistem warna di
   satu baris tidak bisa dibaca bersamaan. */
.pekan__tenggat {
  padding-left: 8px;
  border-left: 2px solid var(--chip-merah);
}

.pekan__harian {
  display: block;
  margin-top: 4px;
  padding: 4px 0 0;
  border: 0;
  background: none;
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.75rem;
  cursor: pointer;
}

/* ---------- view Month ---------- */

.bulan__kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.bulan__judul {
  font-weight: 650;
}

.bulan__kepala .tombol {
  min-height: 32px;
  padding: 0 12px;
}

/* TUJUH KOLOM, DIPAGARI minmax(0, 1fr). Trek "auto" maupun "1fr" polos tidak
   pernah menyusut di bawah min-content isinya, dan tujuh kotak yang begitu
   melebar melewati layar 320px - kolom terakhir terpotong diam-diam, dan
   tanggal terakhir tiap pekan tidak bisa ditekan siapa pun. */
.bulan__nama,
.bulan__petak {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px;
}

.bulan__nama {
  margin-bottom: 4px;
  color: var(--tinta-redup);
  font-size: 0.6875rem;
  text-align: center;
}

.bulan__nama > span {
  min-width: 0;
  overflow: hidden;
}

.bulan__kotak {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
  min-height: 44px;
  padding: 5px 1px;
  border: 1px solid var(--garis);
  border-radius: 8px;
  background: var(--kertas);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.bulan__kotak--luar {
  opacity: 0.4;
}

.bulan__kotak--kini {
  border-color: var(--utama);
  font-weight: 700;
}

.bulan__angka {
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

/* Penandanya GARIS, bukan titik: tiga titik sebesar 4px berdempetan di kotak
   selebar 40px tidak bisa dibedakan satu sama lain, sedangkan tiga garis
   bertumpuk terbaca sekilas sebagai "hari ini ramai". */
.bulan__tanda {
  display: grid;
  gap: 2px;
  width: 100%;
  padding: 0 3px;
}

.bulan__garis {
  height: 3px;
  border-radius: 999px;
}

.bulan__garis--sekali {
  background: var(--utama);
}

/* Mingguan lebih tipis dan setengah lebar: ia berulang, jadi ia memang kabar
   yang lebih kecil daripada acara yang cuma sekali di bulan itu. */
.bulan__garis--pekanan {
  width: 55%;
  height: 2px;
  margin: 0 auto;
  background: var(--chip-tunggu);
}

.bulan__garis--tenggat {
  background: var(--chip-merah);
}

.bulan__baris {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bulan__baris > .tipis {
  flex: 1;
  min-width: 0;
}

.bulan__baris-tanggal {
  flex: none;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}