/* Daftar dan kartu: workspace, anggota, koneksi, undangan, tab, dan laci
   hamburger. Semuanya barisan orang atau tempat - bentuknya sengaja sama supaya
   layar baru tidak perlu menciptakan bentuk barisnya sendiri. */

/* ---------- satu baris: foto, nama, keterangan ---------- */

.anggota {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
}

button.anggota {
  cursor: pointer;
}
button.anggota:hover {
  background: var(--latar);
}

.anggota--tunggu {
  opacity: 0.6;
}

.anggota__teks {
  display: grid;
  min-width: 0;
  flex: 1;
}

.anggota__nama {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.anggota__tombol {
  display: flex;
  gap: 6px;
}
.anggota__tombol .tombol {
  min-height: 34px;
  padding: 7px 12px;
}

/* ---------- kartu workspace ---------- */

.wskartu {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

.wskartu--aktif {
  border-color: var(--utama);
}

.wskartu__buka {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 6px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wskartu__teks {
  display: grid;
  min-width: 0;
}

.wskartu__nama {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

.wskartu__kanan {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* ---------- keterangan sebuah workspace ----------
   Sebuah daftar istilah, bukan tabel: yang kiri sebutan dan yang kanan
   jawabannya, dan tidak ada baris kedua yang membuatnya jadi tabel sungguhan. */

.wsinfo__kepala {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.wsinfo {
  display: grid;
  gap: 2px;
  margin: 0 0 16px;
}

.wsinfo__baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--garis);
}

.wsinfo__label {
  color: var(--tinta-redup);
  font-size: 0.875rem;
}

.wsinfo__nilai {
  margin: 0;
  font-weight: 600;
  text-align: right;
}

/* ---------- undangan ---------- */

.undangan {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--garis);
  border-radius: 10px;
}

.undangan__nama {
  font-weight: 600;
}

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

.undangan__tombol {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.undangan__tombol .tombol {
  min-height: 36px;
  padding: 8px 14px;
}

/* ---------- profil ---------- */

.profil {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profil__teks {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.profil__nama {
  font-size: 1.125rem;
  font-weight: 600;
}

.profil__ket {
  font-size: 0.8125rem;
  color: var(--tinta-redup);
  overflow-wrap: anywhere;
}

/* Keterangan diri berdiri DI BAWAH baris foto-dan-nama, bukan di sebelahnya:
   ia satu-satunya bagian profil yang panjangnya tidak bisa ditebak, dan kolom
   selebar sisa layar di samping foto memotongnya jadi tiga huruf per baris. */
.profil__tentang {
  margin-top: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* ---------- tab ---------- */

.tab {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--kertas);
}

.tab__butir {
  flex: 1;
  padding: 8px 6px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}

.tab__butir--aktif {
  background: var(--utama);
  color: var(--utama-tinta);
  font-weight: 600;
}

/* Tingkat kedua di bawah tab: cara melihat isi SATU tab, bukan tab lain.
   Sengaja TANPA kotak dan tanpa pil - dua deret pil bertumpuk terbaca sebagai
   dua tingkat yang setara, padahal yang kedua cuma memilih jangkauan di dalam
   yang pertama. Tingginya pun kira-kira tiga perempat tab di atasnya, jadi
   urutan keduanya kelihatan tanpa satu kata pun.

   Melebar penuh mengikuti tab di atasnya, dengan tiap butir berbagi rata -
   minmax(0) lewat min-width:0 supaya label terpanjang tidak memaksa barisnya
   melebar melewati layar. */
.subtab {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--garis);
}

.subtab__butir {
  flex: 1;
  min-width: 0;
  padding: 5px 2px 4px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.subtab__butir--aktif {
  border-bottom-color: var(--utama);
  color: var(--tinta);
  font-weight: 600;
}

/* ---------- laci hamburger ---------- */

.laci {
  position: fixed;
  inset: 0;
  /* Drawer Settings harus berada di atas header/footer shell (z-index 60),
     bukan hanya di atas konten halaman. Kalau tidak, footer menutup Log Out. */
  z-index: 200;
  background: rgba(0, 0, 0, 0.35);
}

.laci__isi {
  display: flex;
  flex-direction: column;
  width: min(340px, 88vw);
  height: 100%;
  margin-left: auto;
  background: var(--kertas);
  border-left: 1px solid var(--garis);
}

.laci__kepala {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 14px var(--sela);
  padding-top: calc(14px + env(safe-area-inset-top));
  border-bottom: 1px solid var(--garis);
}

.laci__judul {
  font-weight: 600;
}

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

.laci__tutup {
  border: 0;
  background: none;
  color: inherit;
  font-size: 1.625rem;
  line-height: 1;
  cursor: pointer;
}

/* min-height: 0 - alasannya sama dengan .rangka__isi di shell.css. */
.laci__menu {
  display: grid;
  flex: 1;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  padding: 8px;
}

.laci__butir {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.laci__butir:hover {
  background: var(--latar);
}

.laci__butir--mati {
  opacity: 0.55;
  cursor: default;
}

.laci__butir-judul {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-weight: 600;
}

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

.laci__kaki {
  flex-shrink: 0;
  padding: var(--sela);
  padding-bottom: calc(var(--sela) + env(safe-area-inset-bottom));
  border-top: 1px solid var(--garis);
}

.laci__keluar {
  width: 100%;
  padding: 11px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* ---------- kartu card & kelompok folder ----------
   Dipakai layar Files dan Manage. Bentuknya sama di keduanya supaya card yang
   sama tidak terlihat seperti dua benda berbeda tergantung dari mana dibuka. */

.kartu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
}

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

.kartu__nama {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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

/* Kenapa sebuah card masih Draft ditulis apa adanya di kartunya, bukan
   disembunyikan di balik tanda tanya - itu yang membuat orang tahu apa yang
   harus dilengkapi tanpa membuka buildernya lebih dulu. */
.kartu__sebab {
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-style: italic;
}

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

/* ---------- kartu card memanjang (sketsa hal. 1-3) ----------
   Card File, Task, dan Report digambar sebagai kartu MEMANJANG dua kolom, bukan
   ubin setengah layar. Ubin pernah dipakai di sini dan salah arah: keterangan
   yang paling menentukan sebuah card - Controller pada File, Activation &
   Content pada Task - terpotong atau turun berbaris-baris di kolom sesempit itu,
   padahal keterangan itulah yang dicari orang di layar Manage. */

.petak {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kartu-panjang {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
  background: var(--kertas);
  min-width: 0;
}

.kartu-panjang[draggable="true"] {
  cursor: grab;
}

/* Kolom kiri melar, kolom kanan seperlunya - tapi kiri tidak boleh menyusut
   sampai namanya tinggal satu huruf per baris, jadi ia punya lebar terkecil. */
.kartu-panjang__kiri {
  flex: 1 1 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.kartu-panjang__atas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.kartu-panjang__nama {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  min-width: 0;
}

.kartu-panjang__teks {
  word-break: break-word;
}

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

/* Kenapa sebuah card masih Draft ditulis apa adanya di kartunya, bukan
   disembunyikan di balik tanda tanya - itu yang membuat orang tahu apa yang
   harus dilengkapi tanpa membuka buildernya lebih dulu. */
.kartu-panjang__sebab {
  color: var(--tinta-redup);
  font-size: 0.75rem;
  font-style: italic;
}

/* Dua baris bertumpuk: tombolnya di atas, keterangannya di bawah. Tombol di atas
   supaya tempatnya sama di tiap kartu walau keterangannya berbeda panjang. */
.kartu-panjang__kanan {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 0;
}

.kartu-panjang__aksi {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ---------- daftar perbuatan di balik tanda tiga titik ----------
   Rumah tampilannya di sini, bukan di popup.css, karena yang diatur cuma jarak
   antar barisnya - barisnya sendiri memakai .popup__pilihan yang sudah ada.
   Tanda tiga titiknya duduk di kartu, dan kartu tinggal di berkas ini. */

.menu-titik {
  display: grid;
  gap: 6px;
}

/* Perbuatan yang membuang sesuatu ditulis merah sejak di daftarnya, bukan baru
   di pertanyaan sesudahnya - daftar yang semua barisnya terlihat sama membuat
   "Delete" ketekan oleh jari yang sedang menuju "Duplicate" di atasnya. */
.menu-titik__bahaya .popup__pilihan-nama {
  color: #c0392b;
}

.menu-titik .popup__pilihan:disabled {
  opacity: 0.45;
  cursor: default;
}

.kartu-panjang__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  min-width: 0;
}

.kartu-panjang__baris {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.75rem;
  min-width: 0;
}

.kartu-panjang__label {
  color: var(--tinta-redup);
  font-weight: 600;
}

.kartu-panjang__isi {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
  color: var(--tinta-redup);
  min-width: 0;
  text-align: right;
}

.kartu-panjang__chip {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--netral);
  color: var(--tinta);
}

/* Controller di All Files tetap setinggi satu baris. Chip digeser di tengah,
   sedangkan jumlah Task unik tidak ikut hilang dari ujung kanan. */
.kartu-panjang__baris--controller {
  flex-wrap: nowrap;
  width: 100%;
}

.kartu-panjang__baris--controller .kartu-panjang__isi {
  flex: 1 1 0;
  flex-wrap: nowrap;
  overflow: hidden;
}

.kartu-panjang__controller-daftar {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  padding: 1px 0;
}

.kartu-panjang__controller-daftar .kartu-panjang__chip {
  flex: 0 0 auto;
  white-space: nowrap;
}

.kartu-panjang__controller-jumlah {
  flex: 0 0 auto;
  min-width: 1.5rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--garis);
  color: var(--tinta);
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.kartu-panjang__kosong {
  color: var(--tinta-redup);
}

/* Layar sempit: dua kolom bertumpuk jadi dua baris, dan yang tadinya rata kanan
   kembali rata kiri - kolom kanan yang selebar layar tidak lagi berpasangan
   dengan apa pun di sebelahnya. */
@media (max-width: 560px) {
  .kartu-panjang__kanan {
    align-items: flex-start;
  }
  .kartu-panjang__baris,
  .kartu-panjang__isi {
    justify-content: flex-start;
    text-align: left;
  }

  .kartu-panjang__baris--controller,
  .kartu-panjang__baris--controller .kartu-panjang__isi {
    justify-content: flex-start;
  }

  /* Tanda tiga titik naik ke pojok kanan atas kartu, sejajar namanya. Selagi
     kedua kolom bertumpuk, ia jatuh jadi barisnya sendiri di tengah kartu -
     sebaris penuh untuk satu tombol, tanpa membawa keterangan apa pun, dan
     jauh dari nama card yang sedang dipilihkan perbuatannya.

     Berlaku untuk SEMUA kartu tanpa kecuali. Pengecualian pernah ada di sini
     untuk baris aksi yang masih berisi tombol bertulisan - "Build now" di kartu
     Report, yang tulisannya tidak muat di pojok. Perbuatan itu sekarang jadi
     baris di dalam daftar tiga titiknya, jadi tak ada lagi kartu yang punya
     tombol kedua di sampingnya. */
  .kartu-panjang:has(.kartu-panjang__aksi) {
    position: relative;
  }
  .kartu-panjang:has(.kartu-panjang__aksi) .kartu-panjang__kiri {
    padding-right: 40px;
  }
  .kartu-panjang:has(.kartu-panjang__aksi) .kartu-panjang__aksi {
    position: absolute;
    top: 8px;
    right: 10px;
  }
}

.kelompok {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kelompok + .kelompok {
  margin-top: 14px;
}

.kelompok__kepala {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 8px;
}

/* Judul folder menyala selagi sebuah kartu melayang di atasnya - tanpa tanda
   itu, orang yang menyeret tidak tahu lepasannya akan mendarat di mana. */
.kelompok__kepala--incar {
  outline: 2px dashed var(--utama);
  outline-offset: 2px;
}

.kelompok__judul {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: 0;
  background: none;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.kelompok__panah {
  display: inline-block;
  transition: transform 0.15s;
  color: var(--tinta-redup);
}

.kelompok__panah--buka {
  transform: rotate(90deg);
}

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

/* Tombol naik-turun folder. Tempatnya di judulnya sendiri, bukan di satu layar
   "atur urutan" tersendiri: urutan yang diubah adalah urutan yang sedang
   dilihat, jadi hasilnya harus kelihatan di tempat yang sama. */
.kelompok__geser {
  display: flex;
  gap: 2px;
}

/* ---------- baris pencarian ---------- */

.saring {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.saring__cari {
  flex: 1 1 150px;
  min-width: 0;
}

.saring__pilih {
  flex: 0 0 auto;
  width: auto;
}

.saring__aksi {
  display: flex;
  gap: 6px;
}

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

/* ---------- pohon folder ----------
   Root bukan "No folder": kartu yang belum punya folder berdiri setelah
   seluruh pohon. Setiap lapis isi menarik sedikit ke kanan dan meninggalkan garis
   tipis supaya hubungan induk-anak masih terbaca pada daftar yang panjang. */

.pohon {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pohon__root {
  margin-top: 10px;
}

.pohon__cabang {
  min-width: 0;
}

.pohon__kepala {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  border-radius: 8px;
  cursor: pointer;
}

.pohon__kepala--dipilih {
  background: color-mix(in srgb, var(--utama) 15%, transparent);
}

.pohon__kepala--incar {
  outline: 2px dashed var(--utama);
  outline-offset: 2px;
}

.pohon__panah {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--tinta-redup);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.15s;
}

.pohon__panah--buka {
  transform: rotate(90deg);
}

.pohon__judul {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 2px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.pohon__judul[draggable="true"] {
  cursor: grab;
}

.pohon__pegangan {
  flex: none;
  width: 18px;
  min-width: 18px;
  height: 36px;
  padding: 0;
  border-radius: 6px;
  cursor: grab;
}

.pohon__pegangan .ikon {
  width: 13px;
  height: 13px;
}

.pohon__pegangan:active {
  cursor: grabbing;
}

.pohon__pegangan--aktif {
  background: color-mix(in srgb, var(--utama) 15%, transparent);
  color: var(--utama);
}

.pohon__geser {
  display: flex;
  flex: none;
  gap: 2px;
}

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

.pohon__isi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 14px;
  padding-left: 13px;
  border-left: 1px solid var(--garis);
}

.pohon__kartu {
  margin: 3px 0 5px;
}

.pohon__celah {
  height: 5px;
  margin: 0 4px;
  border-radius: 999px;
}

.pohon__celah--incar {
  height: 7px;
  background: var(--utama);
}

/* Saat pegangan folder sedang diseret, semua titik sisip yang sah diberi
   ruang cukup besar untuk dituju. Sebelumnya tingginya 5px, sehingga fitur
   urut terasa hilang walau sebenarnya masih ada. */
.pohon--menyeret .pohon__celah:not(.pohon__celah--tidak-boleh) {
  height: 18px;
  margin: 1px 4px;
  border: 1px dashed color-mix(in srgb, var(--utama) 55%, var(--garis));
  background: color-mix(in srgb, var(--utama) 7%, transparent);
}

.pohon--menyeret .pohon__celah--tidak-boleh {
  display: none;
}

.pohon--menyeret .pohon__celah--incar {
  border-style: solid;
  background: color-mix(in srgb, var(--utama) 25%, transparent);
}

.folder-terpilih {
  min-height: 34px;
  padding: 5px 9px;
  border: 1px solid var(--garis);
  border-radius: 999px;
  background: var(--netral);
  color: inherit;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}

/* Toolbar bukan lagi anak dari area yang bergulir. Ia adalah saudara tetap
   .halaman__gulir, sehingga daftar tidak dapat muncul di antara toolbar dan
   kepala aplikasi saat daftar itu digulir. */
.halaman__toolbar {
  flex: none;
  padding: var(--sela);
  padding-bottom: 10px;
  background: var(--kertas);
}

.halaman__toolbar .tab {
  margin-bottom: 8px;
}

/* Subtab menempel pada tab di atasnya, bukan berdiri sebagai blok ketiga: ia
   bagian dari tab yang sedang menyala. Jarak ke bawahnya tetap ada supaya
   daftarnya tidak menyentuh garis bawahnya. */
.halaman__toolbar .tab:has(+ .subtab) {
  margin-bottom: 2px;
}

.halaman__toolbar .subtab + * {
  margin-top: 8px;
}

.halaman__toolbar > .filekepala + * {
  margin-top: 8px;
}

/* Media Library memberi jatah lebar ke hasil, bukan ke kepalanya: pencarian
   dan sumber selalu berdiri satu baris sampai layar 360 px. */
.saring--media {
  flex-wrap: nowrap;
}

.saring--media .saring__cari {
  flex: 1 1 0;
}

.saring--media .saring__pilih {
  flex: 0 1 136px;
  max-width: 136px;
}

/* Toolbar daftar kerja menaruh pencarian dan kedua tindakan tambah di satu
   baris. Labelnya sengaja pendek; ruang yang diselamatkan kembali ke daftar. */
.saring--utama {
  flex-wrap: nowrap;
}

.saring--utama .saring__cari {
  flex: 1 1 0;
}

.saring--utama .saring__aksi {
  flex: 0 0 auto;
  gap: 4px;
}

.saring--utama .tombol-tambah {
  padding: 5px 8px 5px 7px;
  font-size: 0.8125rem;
}

/* Rentang tanggal adalah satu kontrol, bukan tiga kolom pencarian yang kebetulan
   berdampingan. Di layar yang cukup lebar ia selalu satu baris; di HP sempit
   preset berdiri sendiri agar kedua tanggal tetap mudah disentuh. */
.saring--rentang {
  display: grid;
  grid-template-columns: minmax(84px, 0.8fr) repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.saring--rentang .turun,
.saring__tanggal-bungkus,
.saring__tanggal {
  min-width: 0;
}

.saring__tanggal-bungkus {
  position: relative;
  display: block;
}

.saring__tanggal {
  width: 100%;
}

/* Placeholder bawaan type=date berbeda-beda per browser dan tidak bisa diatur
   andal. Label ini menutupnya hanya saat kosong, sambil membiarkan ikon kalender
   dan seluruh interaksi native tetap dapat dipakai. */
.saring__tanggal-label {
  position: absolute;
  z-index: 1;
  top: 1px;
  right: 34px;
  bottom: 1px;
  left: 1px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--latar);
  color: var(--tinta-redup);
  pointer-events: none;
}

@media (max-width: 340px) {
  .saring--rentang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .saring--rentang .turun {
    grid-column: 1 / -1;
  }
}

@media (max-width: 420px) {
  .saring:not(.saring--rentang):not(.saring--media):not(.saring--utama) .saring__cari {
    flex-basis: 100%;
  }

  .saring:not(.saring--rentang):not(.saring--utama) .saring__aksi {
    width: 100%;
    justify-content: flex-end;
  }
}

/* ---------- garis waktu perubahan ---------- */

.waktu + .waktu {
  margin-top: 14px;
}

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

/* Barisnya BUKAN satu tombol besar lagi melainkan petak berisi dua tombol
   bersebelahan: badannya membuka Filenya, ujungnya membuka task yang menulisnya.
   Tombol di dalam tombol tidak sah di halaman web - browser membongkarnya
   sendiri jadi bentuk yang tidak pernah sama di dua browser. */
.waktu__butir {
  display: flex;
  gap: 10px;
  width: 100%;
  padding: 8px 0;
  border-top: 1px solid var(--garis);
  text-align: left;
}

.waktu__jam {
  flex: 0 0 46px;
  color: var(--tinta-redup);
  font-size: 0.75rem;
  padding-top: 2px;
}

.waktu__teks {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.waktu__buka {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.waktu__judul {
  font-weight: 400;
  font-size: 0.875rem;
}

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

/* Yang tebal cuma tiga: nama File & kolomnya, nilai lama, nilai baru. Ketiganya
   yang dicari mata saat menelusuri daftar panjang; sisanya kalimat penghubung. */
.waktu__judul b,
.waktu__baris b {
  color: var(--tinta);
  font-weight: 600;
}

/* Ujung baris ketiga: "by [orang] – [task]". Ia bergaris bawah karena ia menuju
   TEMPAT LAIN daripada sisa barisnya - tanpa tanda itu, tak ada yang menduga
   sepotong kalimat di tengah baris bisa ditekan sendiri. */
.waktu__tugas {
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinta-redup);
  font: inherit;
  font-size: 0.8125rem;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.waktu__tugas:hover {
  color: var(--tinta);
}

/* Settings → Changelog: daftar versi, bukan garis waktu per-sel. */
.changelog__daftar {
  display: grid;
  gap: 8px;
}

.changelog__baris {
  display: grid;
  grid-template-columns: minmax(118px, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--garis);
  font-size: 0.875rem;
}

.changelog__waktu,
.changelog__isi {
  min-width: 0;
}

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

.changelog__versi {
  display: flex;
  align-items: center;
  gap: 5px;
}

.changelog__versi button {
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--utama);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.changelog__detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.changelog__detail div {
  padding: 7px 9px;
  border: 1px solid var(--garis);
  border-radius: var(--sudut);
}

.changelog__detail dt,
.changelog__detail dd {
  margin: 0;
}

.changelog__detail dt {
  color: var(--tinta-redup);
  font-size: 0.75rem;
}

.changelog__detail dd {
  margin-top: 2px;
  font-size: 0.875rem;
}

.changelog__subjudul {
  margin: 14px 0 7px;
  font-size: 0.875rem;
}

@media (max-width: 560px) {
  .changelog__baris {
    grid-template-columns: 1fr auto;
  }
  .changelog__waktu {
    grid-column: 1 / -1;
  }
}