/* ============================================================
   PETA SENSORI TEMAN MANIS — sistem tampilan aplikasi
   ============================================================

   Aplikasi ini kelanjutan dari arumanis.cloud, bukan produk lain. Palet,
   sudut membulat, dan kehangatannya sengaja dipinjam dari situs itu: orang
   tua yang mengetuk tautan WhatsApp harus merasa sampai di tempat yang sama,
   bukan di portal asing.

   Tapi kehangatan berhenti di tempat data mulai bicara. Grafik, angka, dan
   pernyataan menonjol dibiarkan tenang dan berjarak - ini dokumen tentang
   anak seseorang, bukan dasbor penjualan. Warna dipakai untuk MEMBEDAKAN
   domain sensorik, tidak pernah untuk meriah.

   Semua gerak tunduk pada prefers-reduced-motion. Sebagian orang tua yang
   memakai halaman ini justru sensitif terhadap gerak - dan seluruh alat ini
   tentang menghormati hal semacam itu.

   Tidak ada build step. Tidak ada font dari luar: CSP halaman ini
   font-src 'self', dan tidak satu pun permintaan jaringan boleh keluar dari
   halaman yang memuat nama anak.
   ============================================================ */

/* ---------- 1. font ---------- */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;
  src:url("font/poppins-400.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:500;font-display:swap;
  src:url("font/poppins-500.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:600;font-display:swap;
  src:url("font/poppins-600.woff2") format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:700;font-display:swap;
  src:url("font/poppins-700.woff2") format("woff2")}

/* ---------- 2. lambang ---------- */
:root{
  --pink-1:#ffa7a7; --pink-2:#ffbcbc; --pink-3:#ffcccc; --pink-4:#ffd9d9; --pink-5:#fce6e6;
  --pink-6:#fdf2f2;
  --langit-1:#dceefb; --langit-2:#eef7fd;
  --biru-4:#cad3e5; --biru-5:#d8dfea; --kuning-5:#efe6bf;
  --ar:#8E3F4A; --ar-gelap:#73323B; --ar-terang:#A85462;

  /* --tinta-3 dulu #8A8087: hanya 3,6:1 di atas --kertas, gagal WCAG AA
     padahal dipakai untuk seluruh teks .kecil - patokan skala jawaban,
     keterangan grafik, catatan kaki laporan. Sekarang 5,2:1. */
  --tinta:#241F22; --tinta-2:#5A5158; --tinta-3:#6E656B;

  --garis:#EDE7E9; --garis-kuat:#D6CDD0; --kertas:#FBF9FA; --putih:#FFFFFF;
  --bahaya:#8E3436; --bahaya-latar:#FDF1F1;
  --baik:#1B6F65; --baik-latar:#EAF5F3;

  --d-tak:#B4566B; --d-pro:#9A6B18; --d-ves:#1B6F65; --d-aud:#4F4FA3;
  --d-vis:#1F6C99; --d-orl:#5F7A2A; --d-int:#7C4479; --d-fas:#2B2F6B;

  --r:14px; --r-l:20px; --r-xl:26px; --r-bulat:999px;
  --lebar:1060px;

  /* Bayangan berlapis, bukan satu kotak abu. Yang berlapis membaca sebagai
     kartu yang benar-benar terangkat; yang satu lapis membaca sebagai kotak
     yang digambar. */
  --bayang-1:0 1px 2px rgba(36,31,34,.05), 0 1px 3px rgba(36,31,34,.04);
  --bayang-2:0 2px 4px rgba(36,31,34,.05), 0 6px 16px rgba(36,31,34,.07);
  --bayang-3:0 4px 8px rgba(36,31,34,.06), 0 14px 32px rgba(36,31,34,.10);
  --bayang-fokus:0 0 0 3px var(--pink-3);

  --gerak:180ms cubic-bezier(.2,.7,.3,1);
  --gerak-lambat:420ms cubic-bezier(.2,.7,.3,1);
}

/* ---------- 3. dasar ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6; color:var(--tinta);
  background:var(--kertas);
  /* Pita langit tipis di puncak halaman - kutipan dari situs publik, cukup
     untuk terasa "Arumanis" tanpa mengambil perhatian dari isinya. */
  background-image:linear-gradient(180deg,var(--langit-2) 0,rgba(238,247,253,0) 340px);
  background-repeat:no-repeat;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{line-height:1.25; margin:0 0 .4em; color:var(--tinta); font-weight:700;
  letter-spacing:-.01em}
h1{font-size:1.9rem; letter-spacing:-.02em}
h2{font-size:1.28rem; margin-top:1.7em}
h3{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--ar); text-decoration:none; text-underline-offset:3px}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--ar); outline-offset:2px; border-radius:6px}

.dalam{max-width:var(--lebar); margin:0 auto; padding:0 20px}
main.dalam{padding-top:26px; padding-bottom:64px; min-height:60vh}

.lede{font-size:1.06rem; color:var(--tinta-2); max-width:62ch; margin-bottom:1.3em}
.kecil{font-size:.855rem; color:var(--tinta-3); line-height:1.55}
.angka{font-variant-numeric:tabular-nums}

/* ---------- 4. bilah aplikasi ---------- */
.atas{
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--garis);
  position:sticky; top:0; z-index:40;
}
.atas .dalam{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:12px; padding-bottom:12px}
.merek{font-weight:700; font-size:1.02rem; color:var(--ar); letter-spacing:.05em;
  line-height:1.1; white-space:nowrap}
.merek:hover{text-decoration:none; color:var(--ar-gelap)}
.merek small{display:block; font-weight:400; font-size:.6rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--tinta-3); margin-top:2px}

.atas nav{display:flex; align-items:center; gap:2px; flex-wrap:wrap}
/* Tanpa garis bawah. Menu yang setiap tautannya bergaris bawah membaca
   sebagai dokumen HTML mentah, dan itu sendirian sudah membuat seluruh
   aplikasi terasa kaku. */
.atas nav a{
  color:var(--tinta-2); font-size:.9rem; font-weight:500;
  padding:8px 13px; border-radius:var(--r-bulat); white-space:nowrap;
  transition:background var(--gerak), color var(--gerak);
}
.atas nav a:hover{background:var(--pink-6); color:var(--ar); text-decoration:none}
.atas nav a[aria-current="page"]{background:var(--pink-4); color:var(--ar-gelap); font-weight:600}
.atas nav form{margin:0}
.atas nav button.tautan{
  background:none; border:0; cursor:pointer; font:inherit;
  color:var(--tinta-3); font-size:.9rem; font-weight:500;
  padding:8px 13px; border-radius:var(--r-bulat);
  transition:background var(--gerak), color var(--gerak);
}
.atas nav button.tautan:hover{background:var(--pink-6); color:var(--ar)}
/* Di dalam menu, tombol Keluar harus terlihat sama seperti tautan lain.
   Garis bawah bawaan button.tautan membuatnya menonjol sendirian, dan itu
   persis yang membuat menunya terbaca sebagai dokumen, bukan aplikasi. */
.atas nav button.tautan{text-decoration:none}

/* ---------- 5. kaki ---------- */
.bawah{border-top:1px solid var(--garis); margin-top:40px; padding:24px 0 40px;
  background:var(--putih)}
.bawah p{margin:0; font-size:.8rem; color:var(--tinta-3); max-width:70ch; line-height:1.6}

/* ---------- 6. tombol ---------- */
.tombol{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--ar); color:var(--putih);
  border:2px solid transparent; border-radius:var(--r-bulat);
  padding:12px 26px; font:inherit; font-size:.96rem; font-weight:600;
  cursor:pointer; text-align:center; text-decoration:none;
  box-shadow:var(--bayang-1);
  transition:transform var(--gerak), box-shadow var(--gerak),
             background var(--gerak), border-color var(--gerak);
}
.tombol:hover{background:var(--ar-gelap); color:var(--putih); text-decoration:none;
  transform:translateY(-1px); box-shadow:var(--bayang-2)}
.tombol:active{transform:translateY(0); box-shadow:var(--bayang-1)}
.tombol[disabled],.tombol[aria-busy="true"]{opacity:.6; cursor:not-allowed;
  transform:none; box-shadow:none}
.tombol.garis{background:transparent; color:var(--ar); border-color:var(--ar); box-shadow:none}
.tombol.garis:hover{background:var(--pink-6); color:var(--ar-gelap); border-color:var(--ar-gelap)}
.tombol.bahaya{background:var(--bahaya); border-color:transparent}
.tombol.bahaya:hover{background:#742A2C}
.tombol.kecil-tombol{padding:8px 16px; font-size:.86rem}
button.tautan{background:none; border:0; padding:0; font:inherit; color:var(--ar);
  cursor:pointer; text-decoration:underline}

.aksi{margin:22px 0}
.aksi-baris{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.aksi-baris form{margin:0}

/* ---------- 7. permukaan ---------- */
.kartu{
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:26px; margin:0 0 20px; box-shadow:var(--bayang-1);
}
.kartu.tengah{max-width:520px; margin-left:auto; margin-right:auto}
.kartu.anak h2{margin-top:0}

.bingkai{
  background:var(--pink-6); border:1px solid var(--pink-4);
  border-radius:var(--r-l); padding:18px 22px; margin:20px 0;
}
.bingkai h2,.bingkai h3{margin-top:0}
.bingkai p{margin-bottom:.7em} .bingkai p:last-child{margin-bottom:0}
.bingkai.polos{background:var(--kertas); border-color:var(--garis)}
.bingkai.sorot{background:var(--kuning-5); border-color:#ddd0a0}

/* ---------- 8. pesan ---------- */
.kabar{
  border-radius:var(--r-l); padding:14px 20px; margin:0 0 20px;
  border:1px solid var(--garis); background:var(--putih);
  box-shadow:var(--bayang-1);
  animation:masuk var(--gerak-lambat) both;
}
.kabar p{margin:0; font-size:.94rem}
/* Tanda tekstual, bukan hanya warna. Warna saja tidak sampai ke pembaca
   layar dan hilang bagi sebagian orang di layar ponsel yang kena matahari. */
.kabar p::before{font-weight:700; margin-right:8px}
.kabar.baik{background:var(--baik-latar); border-color:#bfe0d9}
.kabar.baik p::before{content:"Berhasil:"; color:var(--baik)}
.kabar.salah{background:var(--bahaya-latar); border-color:var(--pink-3)}
.kabar.salah p::before{content:"Perlu diperbaiki:"; color:var(--bahaya)}
@keyframes masuk{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ---------- 9. formulir ---------- */
.tumpuk{display:flex; flex-direction:column; gap:16px; margin-top:18px}
.tumpuk label{font-weight:600; font-size:.94rem; display:block}
.tumpuk label .kecil{font-weight:400; display:block; margin-top:2px}
/* font-weight:400 disebut TERANG-TERANGAN. Medan isian ini bersarang di
   dalam <label> yang font-weight-nya 600, dan font:inherit tadi menurunkan
   ketebalan itu ke isinya - jadi setiap kalimat yang diketik orang tua di
   jurnal, tiap catatan harian, tiap jawaban, tampil setebal judul. Yang
   diketik orang bukan judul. */
.tumpuk input,.tumpuk select,.tumpuk textarea{
  display:block; width:100%; margin-top:7px;
  font:inherit; font-size:1rem; font-weight:400; color:var(--tinta);
  padding:12px 14px; background:var(--putih);
  border:1.5px solid var(--garis-kuat); border-radius:var(--r);
  transition:border-color var(--gerak), box-shadow var(--gerak);
}
.tumpuk input:focus,.tumpuk select:focus,.tumpuk textarea:focus{
  outline:none; border-color:var(--ar); box-shadow:var(--bayang-fokus);
}
.tumpuk .tombol{align-self:flex-start}
.tumpuk .centang{display:flex; gap:12px; align-items:flex-start; font-weight:400;
  cursor:pointer; padding:12px 14px; border-radius:var(--r);
  border:1.5px solid var(--garis); background:var(--kertas);
  transition:border-color var(--gerak), background var(--gerak)}
.tumpuk .centang:hover{border-color:var(--pink-2); background:var(--pink-6)}
.tumpuk .centang input{width:20px; height:20px; margin:2px 0 0; flex:none; accent-color:var(--ar)}
.tumpuk .centang span{font-size:.94rem; line-height:1.55}

.sebaris{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:0}
.sebaris label{margin:0; font-weight:500}
.sebaris select{width:auto; margin:0; padding:8px 12px}

.lipat{margin:16px 0; border:1px solid var(--garis); border-radius:var(--r);
  background:var(--kertas)}
.lipat summary{cursor:pointer; padding:12px 16px; font-weight:600; font-size:.93rem;
  border-radius:var(--r); transition:background var(--gerak)}
.lipat summary:hover{background:var(--pink-6)}
.lipat[open] summary{border-bottom:1px solid var(--garis); border-radius:var(--r) var(--r) 0 0}
.lipat .tumpuk{padding:0 16px 18px}

/* ---------- 10. keping pilihan (catatan harian) ---------- */
.keping{border:1px solid var(--garis); border-radius:var(--r-l); padding:16px 18px;
  margin:0; background:var(--putih)}
.keping legend{font-weight:600; font-size:.94rem; padding:0 6px}
.keping-baris{display:flex; flex-wrap:wrap; gap:9px; margin-top:6px}
.keping-item{position:relative; cursor:pointer}
.keping-item input{position:absolute; opacity:0; width:0; height:0}
.keping-item span{
  display:block; padding:9px 16px; border-radius:var(--r-bulat);
  border:1.5px solid var(--garis-kuat); background:var(--putih);
  font-size:.9rem; font-weight:500; color:var(--tinta-2); user-select:none;
  transition:transform var(--gerak), background var(--gerak),
             border-color var(--gerak), color var(--gerak);
}
.keping-item:hover span{border-color:var(--pink-2); background:var(--pink-6)}
.keping-item input:checked + span{
  background:var(--ar); border-color:var(--ar); color:var(--putih); font-weight:600;
}
.keping-item input:active + span{transform:scale(.96)}
.keping-item input:focus-visible + span{box-shadow:var(--bayang-fokus)}

.keping-tanda{display:inline-block; padding:4px 12px; border-radius:var(--r-bulat);
  font-size:.78rem; font-weight:600; background:var(--pink-5); color:var(--ar-gelap);
  white-space:nowrap}
.keping-tanda.baik{background:var(--baik-latar); color:var(--baik)}
.keping-tanda.netral{background:var(--garis); color:var(--tinta-2)}

/* ---------- 11. tabel ---------- */
.tabel-gulir{overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid var(--garis); border-radius:var(--r-l); background:var(--putih);
  box-shadow:var(--bayang-1)}
.tabel-gulir:focus-visible{outline:3px solid var(--ar); outline-offset:2px}
.tabel{width:100%; border-collapse:collapse; font-size:.94rem}
.tabel thead th{
  background:var(--pink-6); color:var(--ar-gelap); text-align:left;
  font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; font-weight:700;
  padding:12px 16px; border-bottom:1px solid var(--garis); white-space:nowrap;
}
.tabel td{padding:13px 16px; border-bottom:1px solid var(--garis); vertical-align:middle}
.tabel tbody tr{transition:background var(--gerak)}
.tabel tbody tr:hover{background:var(--pink-6)}
.tabel tbody tr:last-child td{border-bottom:0}
.tabel .angka{white-space:nowrap}

/* ---------- 12. daftar ---------- */
.daftar{list-style:none; margin:14px 0; padding:0}
.daftar li{
  border:1px solid var(--garis); border-left:4px solid var(--dc,var(--garis-kuat));
  border-radius:0 var(--r) var(--r) 0; background:var(--putih);
  padding:12px 16px; margin-bottom:8px; box-shadow:var(--bayang-1);
  transition:transform var(--gerak), box-shadow var(--gerak);
}
.daftar li:hover{transform:translateX(2px); box-shadow:var(--bayang-2)}
.daftar.rapat li{padding:10px 14px; margin-bottom:6px}
.daftar .tanda{display:block; font-size:.7rem; letter-spacing:.09em;
  text-transform:uppercase; font-weight:700; color:var(--dc,var(--tinta-3)); margin-bottom:2px}

/* ---------- 13. grafik profil ---------- */
.grafik{border:1px solid var(--garis); border-radius:var(--r-l); background:var(--putih);
  padding:20px 22px; box-shadow:var(--bayang-1); margin:14px 0}
.baris{display:flex; align-items:center; gap:10px; padding:5px 0}
.baris .nama{width:118px; flex:none; font-size:.86rem; color:var(--tinta-2)}
.baris .kutub{width:26px; flex:none; font-size:.76rem; text-align:right; color:var(--dc)}
.baris .jalur{flex:1; height:12px; border-radius:var(--r-bulat); background:var(--kertas);
  border:1px solid var(--garis); overflow:hidden}
.baris .isi{display:block; height:100%; border-radius:var(--r-bulat); background:var(--dc);
  /* Lebar diberi dari atribut style oleh server; transisi ini yang membuatnya
     TUMBUH saat halaman muncul, bukan tiba-tiba ada. Nilainya sendiri tidak
     pernah dihitung di peramban - layar dan PDF harus identik. */
  transition:width var(--gerak-lambat)}
.baris .nilai{width:52px; flex:none; text-align:right; font-size:.86rem;
  color:var(--tinta-2); font-variant-numeric:tabular-nums}
.baris.teratas .nama,.baris.teratas .nilai{font-weight:700; color:var(--tinta)}
.baris.teratas .jalur{border-color:var(--dc)}

/* Saat JS hidup, semua batang mulai dari nol lalu tumbuh. Kalau JS mati,
   kelas ini tidak pernah dipasang dan batangnya langsung tampil penuh -
   grafiknya tetap benar tanpa JavaScript. */
.grafik.animasi .isi{width:0 !important}

.kunci-grafik{display:flex; flex-direction:column; gap:8px; margin:14px 0 0;
  padding:16px 18px; background:var(--kertas); border:1px solid var(--garis);
  border-radius:var(--r-l)}
.kunci-grafik>div{display:flex; gap:12px; align-items:baseline}
.kunci-grafik dt{flex:none; width:26px; font-weight:700; font-size:.9rem; color:var(--tinta)}
.kunci-grafik dd{margin:0; font-size:.87rem; color:var(--tinta-2)}

.saran{border:1px solid var(--garis); border-left:4px solid var(--dc,var(--garis-kuat));
  border-radius:0 var(--r-l) var(--r-l) 0; background:var(--putih);
  padding:18px 22px; margin:14px 0; box-shadow:var(--bayang-1)}
.saran ul{margin:8px 0 0; padding-left:20px}
.saran li{margin:6px 0}

.domain{margin-top:34px}
.cap{font-size:.87rem; color:var(--tinta-2); margin:0 0 10px}

/* ---------- 14. kuesioner ---------- */
.kemajuan{
  position:sticky; top:62px; z-index:30;
  background:rgba(251,249,250,.94); backdrop-filter:blur(8px);
  padding:14px 0 12px; margin-bottom:8px;
  border-bottom:1px solid var(--garis);
}
.kemajuan p{margin:6px 0 0}
.bilah{height:10px; border-radius:var(--r-bulat); background:var(--garis); overflow:hidden}
.bilah span{display:block; height:100%; border-radius:var(--r-bulat);
  background:linear-gradient(90deg,var(--pink-1),var(--ar));
  transition:width var(--gerak-lambat)}

.lompat{display:flex; flex-wrap:wrap; gap:7px; margin:16px 0 26px}
.lompat a{font-size:.83rem; padding:7px 14px; border-radius:var(--r-bulat);
  background:var(--putih); border:1px solid var(--garis); color:var(--tinta-2);
  transition:background var(--gerak), border-color var(--gerak), color var(--gerak)}
.lompat a:hover{background:var(--ar); border-color:var(--ar); color:var(--putih);
  text-decoration:none}

.soal{
  border:1px solid var(--garis); border-radius:var(--r-l); background:var(--putih);
  padding:18px 20px; margin:0 0 14px; box-shadow:var(--bayang-1);
  transition:border-color var(--gerak), box-shadow var(--gerak), background var(--gerak);
}
.soal legend{font-weight:600; font-size:1rem; padding:0; margin-bottom:12px; line-height:1.45}
.soal.menyimpan{border-color:var(--pink-2)}
.soal.belum,.soal.gagal{border-color:var(--bahaya); background:var(--bahaya-latar)}
.soal-tanda{display:inline-block; margin-top:10px; font-size:.82rem; font-weight:600;
  color:var(--bahaya)}
.soal.gagal .soal-tanda,.soal.belum .soal-tanda{color:var(--bahaya)}

.pilihan{display:flex; flex-wrap:wrap; gap:8px}
.pilihan label{flex:1 1 150px; cursor:pointer; position:relative}
.pilihan input{position:absolute; opacity:0; width:0; height:0}
.pilihan span{
  display:block; padding:11px 14px; border-radius:var(--r);
  border:1.5px solid var(--garis-kuat); background:var(--putih);
  font-size:.9rem; font-weight:500; text-align:center; color:var(--tinta-2);
  transition:transform var(--gerak), background var(--gerak),
             border-color var(--gerak), color var(--gerak);
}
.pilihan small{display:block; font-size:.72rem; font-weight:400; opacity:.8; margin-top:2px}
.pilihan label:hover span{border-color:var(--pink-2); background:var(--pink-6)}
.pilihan input:checked + span{background:var(--ar); border-color:var(--ar); color:var(--putih)}
.pilihan input:active + span{transform:scale(.97)}
.pilihan input:focus-visible + span{box-shadow:var(--bayang-fokus)}
.peringatan{color:var(--bahaya); font-weight:600}

/* ---------- 15. catatan harian ---------- */
.harian{margin-top:20px}
.harian .keping{margin-bottom:16px}
.harian .tombol{align-self:flex-start}
.harian-tanggal{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:14px 18px; margin-bottom:18px; box-shadow:var(--bayang-1)}
.harian-tanggal label{font-weight:600; font-size:.9rem}
.harian-tanggal input{font:inherit; padding:9px 12px; border:1.5px solid var(--garis-kuat);
  border-radius:var(--r)}
.harian-tanggal .tombol{padding:9px 18px}
.harian-catatan{border:1px solid var(--garis); border-radius:var(--r-l); padding:16px 18px;
  background:var(--putih)}
.harian-catatan label{font-weight:600; font-size:.94rem; display:block}
.harian-catatan textarea{width:100%; margin-top:8px; font:inherit; font-size:.98rem;
  padding:12px 14px; border:1.5px solid var(--garis-kuat); border-radius:var(--r);
  resize:vertical; transition:border-color var(--gerak), box-shadow var(--gerak)}
.harian-catatan textarea:focus{outline:none; border-color:var(--ar); box-shadow:var(--bayang-fokus)}
.harian-catatan .hitung{margin:8px 0 0; transition:color var(--gerak)}
.harian-catatan .hitung.hampir-penuh{color:var(--bahaya); font-weight:600}
.harian-catatan-sel{max-width:34ch; font-size:.87rem; color:var(--tinta-2)}
.harian-tabel td{vertical-align:top}
.harian-tabel tr[class*="suasana-"] td:first-child{border-left:4px solid var(--dc,var(--garis-kuat))}

.suasana-tenang{--dc:var(--d-ves)}
.suasana-bersemangat{--dc:var(--d-pro)}
.suasana-rewel{--dc:var(--d-tak)}
.suasana-kewalahan{--dc:var(--d-aud)}

/* strip tujuh hari */
.strip{display:flex; gap:6px; list-style:none; margin:16px 0 8px; padding:0}
/* Tiap hari mengambil lebar yang SAMA.
   Tanpa flex:1 pada <li>, tiap kotak menyusut ke lebar isinya - dan karena
   hari yang belum dicatat hanya berisi satu titik, strip tujuh hari berakhir
   sebagai enam kotak sempit di sebelah satu kotak besar yang kosong. */
.strip li{flex:1 1 0; min-width:0; display:flex}
.strip-hari{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; padding:10px 2px; width:100%; min-height:52px; border-radius:var(--r);
  background:var(--kertas); border:1px solid var(--garis); color:var(--tinta-3);
  font-size:.72rem; text-decoration:none;
  transition:transform var(--gerak), box-shadow var(--gerak), border-color var(--gerak);
}
.strip-hari:hover{transform:translateY(-2px); box-shadow:var(--bayang-2);
  text-decoration:none; border-color:var(--pink-2)}
.strip-hari.ini{border-color:var(--ar); border-width:2px}
.strip-hari[class*="suasana-"]{background:var(--dc); border-color:var(--dc); color:var(--putih)}
.strip-huruf{font-size:1rem; font-weight:700; line-height:1}
.strip-tgl{opacity:.85}
.strip-kunci{display:flex; flex-wrap:wrap; gap:12px; margin-top:8px}
.strip-kunci span{display:inline-flex; align-items:center; gap:5px}
.strip-kunci b{display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:5px; font-size:.72rem;
  background:var(--dc,var(--garis)); color:var(--putih)}
.strip-kunci span:last-child b{background:var(--garis); color:var(--tinta-2)}

/* linimasa */
.linimasa{list-style:none; margin:14px 0; padding:0}
.linimasa-hari{border:1px solid var(--garis); border-left:4px solid var(--dc,var(--garis-kuat));
  border-radius:0 var(--r) var(--r) 0; background:var(--putih); padding:13px 17px;
  margin-bottom:9px; box-shadow:var(--bayang-1);
  transition:transform var(--gerak), box-shadow var(--gerak)}
.linimasa-hari:hover{transform:translateX(2px); box-shadow:var(--bayang-2)}
.linimasa-kepala{display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap}
.linimasa-hari p{margin:5px 0 0}
.linimasa-catatan{border-top:1px dashed var(--garis); padding-top:8px; margin-top:8px;
  font-size:.9rem; color:var(--tinta-2)}

/* ---------- 16. kelola ---------- */
.ortu-kartu{padding:22px 24px}
.ortu-kepala{display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap}
.ortu-kepala h3{margin:0}
.anak-baris{display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; padding:13px 0; border-top:1px solid var(--garis)}
.anak-baris .kecil{display:block}
.anak-aksi{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.anak-aksi .tombol{flex:0 0 auto}
.tautan-kotak{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem; word-break:break-all; background:var(--putih);
  border:1px dashed var(--garis-kuat); border-radius:var(--r);
  padding:12px 14px; margin:12px 0;
}

/* ---------- 17. bagian baru ---------- */

/* Kotak ringkasan. Fasilitator membuka aplikasi ini sebelum kelas dan butuh
   satu pandangan, bukan daftar yang harus dibaca satu per satu. */
.ringkas{display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr));
  gap:12px; margin:0 0 24px}
.ringkas-kotak{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-l); padding:16px 18px; box-shadow:var(--bayang-1);
  transition:transform var(--gerak), box-shadow var(--gerak)}
.ringkas-kotak:hover{transform:translateY(-2px); box-shadow:var(--bayang-2)}
.ringkas-angka{font-size:1.85rem; font-weight:700; line-height:1.1; color:var(--ar);
  font-variant-numeric:tabular-nums}
.ringkas-label{font-size:.8rem; color:var(--tinta-3); margin-top:2px; line-height:1.4}

/* Kartu anak. Menggantikan baris tabel yang setiap anaknya terlihat sama. */
.anak-kisi{display:grid; grid-template-columns:repeat(auto-fill,minmax(268px,1fr));
  gap:14px; margin:16px 0}
.anak-kartu{
  display:flex; flex-direction:column; gap:10px;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:18px; box-shadow:var(--bayang-1); text-decoration:none; color:inherit;
  transition:transform var(--gerak), box-shadow var(--gerak), border-color var(--gerak);
}
.anak-kartu:hover{transform:translateY(-3px); box-shadow:var(--bayang-3);
  border-color:var(--pink-2); text-decoration:none}
.anak-atas{display:flex; align-items:center; gap:12px}
/* Inisial berwarna. Warnanya diturunkan dari nama di sisi server, jadi tiap
   anak selalu mendapat warna yang sama - itu yang membuatnya bisa dikenali
   sekilas, bukan sekadar hiasan. */
.awal{
  flex:none; width:46px; height:46px; border-radius:var(--r-bulat);
  display:flex; align-items:center; justify-content:center;
  font-size:1.12rem; font-weight:700; color:var(--putih);
  background:var(--dc,var(--ar)); letter-spacing:.02em;
}
.anak-nama{display:block; font-weight:700; font-size:1.05rem; line-height:1.25}
.anak-meta{display:block; font-size:.82rem; color:var(--tinta-3); line-height:1.4}
.anak-sorot{font-size:.85rem; color:var(--tinta-2); border-top:1px solid var(--garis);
  padding-top:10px; margin-top:2px}
.anak-kosong{font-size:.85rem; color:var(--tinta-3); border-top:1px solid var(--garis);
  padding-top:10px; margin-top:2px; font-style:italic}

/* Pencarian seketika. Dengan tiga puluh anak, daftar tanpa pencarian berhenti
   berguna justru saat paling dibutuhkan - sesaat sebelum kelas mulai. */
.saring{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:12px 16px; margin-bottom:18px; box-shadow:var(--bayang-1)}
.saring input[type="search"]{flex:1 1 220px; font:inherit; font-size:.96rem;
  padding:10px 14px; border:1.5px solid var(--garis-kuat); border-radius:var(--r-bulat);
  transition:border-color var(--gerak), box-shadow var(--gerak)}
.saring input[type="search"]:focus{outline:none; border-color:var(--ar);
  box-shadow:var(--bayang-fokus)}
.saring select{font:inherit; font-size:.92rem; padding:10px 14px;
  border:1.5px solid var(--garis-kuat); border-radius:var(--r-bulat); background:var(--putih)}
.saring-jumlah{font-size:.85rem; color:var(--tinta-3); margin-left:auto}

/* Nama kelasnya TIDAK boleh "kosong" saja.
   Ia pernah begitu, dan langsung bertabrakan dengan .strip-hari.kosong yang
   sudah dipakai strip tujuh hari untuk menandai hari yang belum dicatat -
   padding 46px di sini membuat satu kotak hari melar jadi 130 piksel dan
   menyeret enam kotak lain ikut meregang. Nama umum di stylesheet bersama
   selalu berakhir begini. */
.pesan-kosong{text-align:center; padding:46px 24px; color:var(--tinta-3)}
.pesan-kosong p{margin:0 0 .4em}

/* ---------- 18. gerak ---------- */
@media (prefers-reduced-motion:reduce){
  /* Sebagian orang tua yang memakai halaman ini justru sensitif terhadap
     gerak, dan seluruh alat ini tentang menghormati hal semacam itu. */
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .grafik.animasi .isi{width:auto !important}
}

/* ---------- 19. layar kecil ---------- */
@media (max-width:820px){
  h1{font-size:1.55rem}
  main.dalam{padding-top:18px}
  .atas .dalam{flex-wrap:wrap; gap:8px}
  .atas nav{width:100%; overflow-x:auto; padding-bottom:4px; flex-wrap:nowrap;
    -webkit-overflow-scrolling:touch; scrollbar-width:none}
  .atas nav::-webkit-scrollbar{display:none}
  .kemajuan{top:0}
  .kartu{padding:20px}
  .baris .nama{width:88px; font-size:.8rem}
  .baris .nilai{width:44px}
  .pilihan label{flex:1 1 100%}
  .anak-kisi{grid-template-columns:1fr}
  .saring-jumlah{margin-left:0; width:100%}
}

/* ---------- 20. cetak ---------- */
@media print{
  .atas,.bawah,.aksi,.lompat,.saring,.kemajuan{display:none !important}
  body{background:#fff}
  .kartu,.grafik,.bingkai,.soal{box-shadow:none; break-inside:avoid}
  a{color:inherit; text-decoration:none}
}

/* ---------- 18. Pusat Kelola ----------

   Lima halaman pengelola di bawah satu bilah tab. Yang membedakannya dari
   halaman orang tua: di sini kepadatan justru berguna. Pengelola membuka
   halaman ini untuk MEMUTUSKAN - siapa yang belum punya PIN, pertemuan mana
   yang kosong - dan keputusan butuh banyak hal terlihat sekaligus. Halaman
   orang tua kebalikannya: satu hal per layar, tanpa yang perlu dibandingkan. */

.halaman-kepala{display:flex; justify-content:space-between; align-items:flex-end;
  gap:16px; flex-wrap:wrap; margin-bottom:18px}
.halaman-kepala h1{margin-bottom:4px}
.halaman-kepala .lede{margin:0}

/* Bilah tab. Dulu bergulir mendatar di ponsel supaya tetap satu baris; itu
   keliru - yang tergulir keluar layar tidak meninggalkan jejak apa pun bahwa
   ia ada, dan tiga tab terakhir (termasuk Jurnal) jadi tak pernah terlihat.
   Sekarang ia membungkus, dan dua tab pengaturan diberi rupa yang lebih
   tenang supaya lima tab kerja harian tetap terbaca sebagai satu kelompok. */
.pusat-tab{
  display:flex; gap:6px; margin:0 0 26px; padding:6px;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  box-shadow:var(--bayang-1); flex-wrap:wrap;
}
.pusat-tab-item{
  flex:0 0 auto; padding:9px 18px; border-radius:var(--r-bulat);
  font-size:.92rem; font-weight:500; color:var(--tinta-2); text-decoration:none;
  white-space:nowrap; transition:background var(--gerak), color var(--gerak);
}
.pusat-tab-item:hover{background:var(--pink-6); color:var(--ar); text-decoration:none}
.pusat-tab-item.kini{background:var(--ar); color:var(--putih); box-shadow:var(--bayang-1)}
.pusat-tab-item.kini:hover{background:var(--ar-gelap); color:var(--putih)}

.bagian-judul{margin:34px 0 12px; font-size:1.18rem}

/* Yang menunggu keputusan. Tiga tingkat, dibedakan warna DAN kata: warna saja
   tidak sampai ke pembaca layar, dan tiap baris sudah menjelaskan akibatnya
   sendiri dalam kalimat penuh. */
.perhatian{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-l); padding:18px 22px; margin-bottom:26px;
  box-shadow:var(--bayang-1)}
.perhatian .bagian-judul{margin:0 0 12px}
.perhatian-daftar{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.perhatian-baris{display:flex; gap:11px; align-items:flex-start;
  font-size:.92rem; line-height:1.55; color:var(--tinta-2)}
.perhatian-baris a{margin-left:6px; white-space:nowrap}
.perhatian-titik{flex:none; width:9px; height:9px; border-radius:var(--r-bulat);
  margin-top:7px; background:var(--garis-kuat)}
.perhatian-baris.genting .perhatian-titik{background:var(--bahaya)}
.perhatian-baris.perlu .perhatian-titik{background:var(--d-pro)}
.perhatian-baris.ringan .perhatian-titik{background:var(--biru-4)}
.perhatian-lega{margin:0; font-size:.94rem; color:var(--tinta-2); line-height:1.6}

/* Angka pembanding di dalam angka besar: 6/8 - yang kecil adalah dari berapa.
   Dibedakan ukurannya supaya yang dibaca lebih dulu adalah angka 6. */
.ringkas-angka small{font-size:.5em; font-weight:500; color:var(--tinta-3)}
.ringkas-angka.ringkas-tanggal{font-size:1.15rem; padding-top:8px}
.ringkas-kaki{font-size:.74rem; color:var(--tinta-3); margin-top:7px; line-height:1.45;
  border-top:1px solid var(--garis); padding-top:7px}
.ringkas-kotak.sorot-kotak{border-color:var(--pink-2); background:var(--pink-6)}

/* Kartu staf. Angka bebannya yang paling besar - itu satu-satunya alasan
   halaman ini dibuka: memutuskan siapa yang kelebihan muatan. */
.staf-kisi{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr));
  gap:14px; margin:14px 0 4px}
.staf-kartu{display:flex; flex-direction:column; gap:9px; background:var(--putih);
  border:1px solid var(--garis); border-radius:var(--r-l); padding:18px;
  box-shadow:var(--bayang-1); transition:transform var(--gerak), box-shadow var(--gerak)}
.staf-kartu:hover{transform:translateY(-2px); box-shadow:var(--bayang-2)}
.staf-kartu.mati{opacity:.62; background:var(--kertas)}
.staf-atas{display:flex; align-items:center; gap:12px}
.staf-nama{display:block; font-weight:700; font-size:1.02rem; line-height:1.25}
.staf-meta{display:block; font-size:.79rem; color:var(--tinta-3); line-height:1.4}
.staf-beban{display:flex; align-items:baseline; gap:8px; border-top:1px solid var(--garis);
  padding-top:11px}
.beban-angka{font-size:1.7rem; font-weight:700; color:var(--ar); line-height:1;
  font-variant-numeric:tabular-nums}
.beban-teks{font-size:.82rem; color:var(--tinta-3)}
.staf-kelas{margin:0}
.keping-baris{display:flex; flex-wrap:wrap; gap:6px}
.keping-tanda.salah{background:var(--bahaya-latar); color:var(--bahaya)}

/* Jalur pertemuan di ringkasan: enam keping yang bisa digulir mendatar. */
.sesi-jalur{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch}
.sesi-keping{flex:0 0 202px; display:flex; flex-direction:column; gap:5px;
  background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:15px 17px; text-decoration:none; color:inherit; box-shadow:var(--bayang-1);
  transition:transform var(--gerak), box-shadow var(--gerak), border-color var(--gerak)}
.sesi-keping:hover{transform:translateY(-3px); box-shadow:var(--bayang-3);
  border-color:var(--pink-2); text-decoration:none}
.sesi-keping.kosong{border-color:var(--kuning-5); background:#FEFCF3}
.sesi-keping.penuh{border-color:var(--baik); background:var(--baik-latar)}
.sesi-tanggal{font-size:.76rem; color:var(--tinta-3); text-transform:uppercase;
  letter-spacing:.04em; font-weight:600}
.sesi-judul{font-weight:700; font-size:.98rem; line-height:1.3}
.sesi-jam{font-size:.8rem; color:var(--tinta-3)}
.sesi-isi{font-size:.8rem; color:var(--tinta-2); font-variant-numeric:tabular-nums}

/* Bilah kursi. Sengaja BUKAN merah saat penuh: penuh adalah kabar baik di
   sini, bukan galat. Yang diberi warna peringatan justru yang melewati kuota. */
.sesi-bar{display:block; height:7px; border-radius:var(--r-bulat);
  background:var(--garis); overflow:hidden; margin-top:2px}
.sesi-bar > span{display:block; height:100%; background:var(--ar-terang);
  border-radius:var(--r-bulat); transition:width var(--gerak-lambat)}
.sesi-bar.besar{height:10px; margin:14px 0 4px}
.sesi-bar.lewat > span{background:var(--d-pro)}

/* Kartu pertemuan di halaman jadwal. */
.sesi-kartu{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-l); padding:20px 22px; margin-bottom:14px;
  box-shadow:var(--bayang-1)}
.sesi-kartu.hari-ini{border-color:var(--pink-2); box-shadow:var(--bayang-2)}
.sesi-kartu.dibatalkan{opacity:.66; background:var(--kertas)}
.sesi-kepala{display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap}
/* Keping kalender. Tanggal yang berdiri sendiri terbaca lebih cepat daripada
   tanggal di tengah kalimat - dan halaman ini dipindai, bukan dibaca. */
.sesi-kal{flex:none; width:56px; text-align:center; background:var(--pink-6);
  border:1px solid var(--pink-4); border-radius:var(--r); padding:7px 0 9px}
.sesi-kal-bulan{display:block; font-size:.68rem; font-weight:700; color:var(--ar);
  text-transform:uppercase; letter-spacing:.06em}
.sesi-kal-hari{display:block; font-size:1.5rem; font-weight:700; color:var(--ar);
  line-height:1.1; font-variant-numeric:tabular-nums}
.sesi-judul-blok{flex:1 1 220px; min-width:0}
.sesi-judul-blok h3{margin:0 0 3px; display:flex; align-items:center; gap:9px;
  flex-wrap:wrap; font-size:1.06rem}
.sesi-judul-blok p{margin:0}
.sesi-catatan{margin-top:6px !important; color:var(--tinta-2)}
.sesi-hitung{flex:none; text-align:right; margin-left:auto}
.sesi-hitung-angka{display:block; font-size:1.7rem; font-weight:700; color:var(--ar);
  line-height:1.1; font-variant-numeric:tabular-nums}
.sesi-hitung-angka small{font-size:.5em; font-weight:500; color:var(--tinta-3)}
.sesi-hitung-angka.lewat{color:var(--d-pro)}
.sesi-hitung .kecil{display:block}

.pendaftar-daftar{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:7px}
.pendaftar{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:9px 13px; border-radius:var(--r); background:var(--kertas);
  border-left:4px solid var(--garis-kuat)}
.pendaftar a{font-weight:500}
.pendaftar form{margin-left:auto}
.pendaftar select{font:inherit; font-size:.84rem; padding:6px 11px;
  border:1.5px solid var(--garis-kuat); border-radius:var(--r-bulat); background:var(--putih)}
.pendaftar.status-hadir{border-left-color:var(--baik); background:var(--baik-latar)}
.pendaftar.status-batal{border-left-color:var(--garis-kuat); opacity:.6}
.pendaftar.status-absen{border-left-color:var(--d-pro); background:#FEFCF3}
.pendaftar-kosong{margin:14px 0 0; font-style:italic}

/* Baris medan yang berdampingan di layar lebar dan bertumpuk di ponsel. */
/* Dasar 140px dulu berarti dua medan MUAT berdampingan di layar 375px -
   masing-masing 141px. Muat, tapi tidak nyaman: "PIN baru" dan "Ulangi"
   berdesakan, dan label sepanjang "Nomor WhatsApp" terpotong. 220px membuat
   keduanya menumpuk sendirinya di ponsel dan tetap berdampingan sejak lebar
   tablet - tanpa perlu media query yang menebak lebar wadahnya. */
.sejajar{display:flex; gap:12px; flex-wrap:wrap}
.sejajar > label{flex:1 1 220px; min-width:0}
.centang{display:flex; align-items:center; gap:9px; font-size:.92rem}
.centang input{width:auto; margin:0}

/* Nama anak di dalam tabel ringkasan. */
.anak-tautan{display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit}
.anak-tautan:hover{text-decoration:none; color:var(--ar)}
.anak-tautan .kecil{display:block}
.awal.kecil-awal{width:34px; height:34px; font-size:.85rem}

/* Baris tabel yang disembunyikan penyaring. Tanpa !important, display bawaan
   tr/td di sebagian peramban bisa mengalahkan [hidden] - dan baris yang
   seharusnya tersaring tetap terlihat. */
[hidden]{display:none !important}

@media (prefers-reduced-motion:reduce){
  .pusat-tab-item,.staf-kartu,.sesi-keping,.sesi-bar > span{transition:none}
  .staf-kartu:hover,.sesi-keping:hover{transform:none}
}

/* ---------- 19. kalender jadwal dan cerita tumbuh ---------- */

.kalender-blok{margin:22px 0 30px}
.kalender-kepala{display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin-bottom:12px}
.kalender-judul{margin:0; font-size:1.2rem; text-align:center; flex:1 1 auto}
.kalender-saring{margin-bottom:12px}
.kalender-saring label{margin-right:2px}

/* Tujuh kolom tetap. Di ponsel kisinya digulir mendatar, bukan dipadatkan
   jadi satu kolom: kalender satu kolom bukan kalender lagi - ia daftar, dan
   daftar sudah ada di bawah. */
.kalender{display:grid; grid-template-columns:repeat(7,minmax(118px,1fr));
  gap:5px; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.kalender-nama-hari{font-size:.72rem; font-weight:700; color:var(--tinta-3);
  text-transform:uppercase; letter-spacing:.05em; text-align:center; padding:3px 0}
.kalender-sel{min-height:88px; background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r); padding:7px 8px; transition:background var(--gerak),
  border-color var(--gerak)}
.kalender-sel.luar{background:var(--kertas); opacity:.55}
.kalender-sel.kini{border-color:var(--pink-2); background:var(--pink-6)}
.kalender-sel.disorot{border-color:var(--ar); background:#FFF6F6;
  box-shadow:0 0 0 1.5px var(--ar) inset}
.kalender-angka{display:block; font-size:.82rem; font-weight:700; color:var(--tinta-2);
  font-variant-numeric:tabular-nums; margin-bottom:4px}
.kalender-sel.kini .kalender-angka{color:var(--ar)}

.kalender-sesi{border-top:1px solid var(--garis); padding-top:5px; margin-top:5px}
.kalender-sesi:first-of-type{border-top:0; margin-top:0; padding-top:0}
.kalender-sesi.batal{opacity:.5; text-decoration:line-through}
.kalender-jam{font-size:.7rem; font-weight:700; color:var(--ar)}
.kalender-judul-sesi{display:block; font-size:.74rem; line-height:1.3;
  color:var(--tinta-2)}
.kalender-isi{font-size:.68rem; color:var(--tinta-3); font-variant-numeric:tabular-nums}
.kalender-nama{display:flex; flex-wrap:wrap; gap:3px; margin-top:4px}
.nama-keping{font-size:.66rem; padding:2px 6px; border-radius:var(--r-bulat);
  background:var(--garis); color:var(--tinta-2); line-height:1.35;
  transition:background var(--gerak), color var(--gerak), opacity var(--gerak)}
.nama-keping.redup{opacity:.32}
.nama-keping.terang{background:var(--ar); color:var(--putih); font-weight:600; opacity:1}

/* Keping pilihan pada formulir cerita: radio dan centang yang berbentuk
   kancing. Kotak centang bawaan berderet sepuluh butir terbaca sebagai
   formulir pajak; ini dibaca sebagai pilihan. */
.keping-pilih{display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  padding:7px 13px; border-radius:var(--r-bulat); background:var(--putih);
  border:1.5px solid var(--garis-kuat); font-size:.88rem; line-height:1.3;
  transition:background var(--gerak), border-color var(--gerak), color var(--gerak)}
.keping-pilih:hover{border-color:var(--pink-2); background:var(--pink-6)}
.keping-pilih input{width:auto; margin:0; accent-color:var(--ar)}
.keping-pilih:has(input:checked){background:var(--pink-6); border-color:var(--ar);
  color:var(--ar); font-weight:500}
/* Peramban tanpa :has() tetap terbaca - fokusnya yang menandai posisi. */
.keping-pilih:focus-within{box-shadow:var(--bayang-fokus)}

fieldset.kartu{border:1px solid var(--garis); margin-bottom:16px}
fieldset.kartu legend{padding:0 8px; margin:0}
fieldset.kartu .bagian-judul{margin:0}
fieldset[disabled]{opacity:.72}

.foto-pratinjau{display:block; max-width:280px; width:100%; border-radius:var(--r);
  border:1px solid var(--garis); margin:8px 0}

@media (prefers-reduced-motion:reduce){
  .kalender-sel,.nama-keping,.keping-pilih{transition:none}
}

/* ---------- 20. paragraf naratif laporan ----------

   Kalimat sebelum gambar. Grafik menuntut orang menerjemahkan panjang batang
   jadi kalimat sendiri, dan yang paling sering terjadi adalah orang tua
   membacanya sebagai peringkat: batang terpanjang dikira "yang paling
   bermasalah". Kalimat yang sudah jadi menutup celah itu.

   Isinya datang dari Laporan::rakit() yang sama dengan PDF - layar dan berkas
   tidak boleh menyimpang. */
.naratif{background:var(--pink-6); border:1px solid var(--pink-4);
  border-radius:var(--r-l); padding:20px 22px; margin:14px 0 18px}
.naratif > p{margin:0; font-size:1.02rem; line-height:1.65; color:var(--tinta)}
.naratif-rinci{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px}
.naratif-rinci li{border-left:4px solid var(--dc,var(--garis-kuat));
  background:var(--putih); border-radius:0 var(--r) var(--r) 0;
  padding:10px 14px; font-size:.94rem; line-height:1.5}
.naratif-rinci .kecil{display:block; margin-top:2px}

/* Kata frekuensi di dalam grafik. Ia mendahului angka karena memakai kata
   yang sama dengan pilihan jawaban - tidak menuntut penerjemahan apa pun. */
.baris .kata{width:106px; flex:none; text-align:right; font-size:.82rem;
  color:var(--tinta-3)}
.baris.teratas .kata{font-weight:600; color:var(--tinta-2)}

/* Di ponsel kolom kata dibuang, bukan dibungkus: baris grafik yang membungkus
   jadi dua baris membuat batangnya tidak lagi bisa dibandingkan sekilas -
   dan perbandingan sekilas itu satu-satunya guna grafik ini. Katanya tetap
   terbaca di daftar naratif di atas. */
@media (max-width:560px){
  .baris .kata{display:none}
  .baris .nama{width:88px; font-size:.8rem}
  .baris .nilai{width:44px; font-size:.8rem}
}

/* ---------- 21. perapian ----------

   Hal-hal yang baru terlihat setelah halaman-halaman baru berdiri berdampingan.
   Semuanya soal SATU makna satu bentuk: dua hal yang berbeda tidak boleh
   terlihat sama, dan satu hal yang sama tidak boleh terlihat berbeda. */

/* 21.1 — Kotak naratif TIDAK boleh seperti kotak peringatan.
   Keduanya sempat sama-sama merah muda. "Yang perlu dibaca lebih dulu" adalah
   batasan yang harus menahan orang sejenak; paragraf naratif adalah isi
   laporan itu sendiri. Dua nada suara yang berbeda tidak boleh punya satu
   bentuk - orang akan berhenti membedakannya, dan yang pertama kehilangan
   gunanya. */
.naratif{background:var(--putih); border:1px solid var(--garis);
  border-left:5px solid var(--ar); box-shadow:var(--bayang-1)}

/* 21.2 — Menu atas bergulir, bukan terpotong.
   Menu staf kini enam butir. Di layar 360px yang terakhir ("Keluar") terpotong
   separuh dan tidak ada tanda bahwa masih ada isinya. flex-wrap membuatnya
   jatuh ke baris kedua dan menutupi isi halaman; menggulir mendatar menjaga
   tingginya tetap satu baris. */
.atas .dalam{gap:10px}
.atas nav{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
  -webkit-overflow-scrolling:touch; margin-right:-4px; padding-right:4px}
.atas nav::-webkit-scrollbar{display:none}
.atas nav > *{flex:0 0 auto}
@media (max-width:600px){
  .merek small{display:none}
  .atas nav a,.atas nav button.tautan{padding:8px 10px; font-size:.86rem}
}

/* 21.3 — Kepala halaman yang seragam.
   Beberapa halaman memakai <h1> telanjang dan beberapa memakai .halaman-kepala;
   jaraknya jadi berbeda-beda antar tab padahal keduanya halaman sederajat. */
main.dalam > h1:first-child{margin-bottom:4px}
.halaman-kepala + .pusat-tab{margin-top:0}

/* 21.4 — Kartu ringkasan tidak melompat saat angkanya berubah panjang.
   Angka tabular sudah dipakai, tapi tinggi kotaknya masih ditentukan panjang
   labelnya - satu kotak berlabel dua baris membuat tetangganya ikut tinggi
   dan barisnya terlihat tidak rata. */
.ringkas{align-items:stretch}
.ringkas-kotak{display:flex; flex-direction:column}
.ringkas-kaki{margin-top:auto}

/* 21.5 — Tombol di dalam .aksi-baris rata tengah secara vertikal.
   Formulir sebaris dan tombol biasa punya tinggi berbeda, jadi barisnya
   sempat terlihat naik-turun. */
.aksi-baris{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px}
.aksi-baris form{margin:0}
.aksi-baris > details{width:100%}

/* 21.6 — Keadaan kosong punya satu bentuk.
   Sebelumnya sebagian memakai .kartu.tengah, sebagian paragraf telanjang. */
.pesan-kosong{text-align:center; padding:26px 22px}
.pesan-kosong p{margin:0 0 6px}
.pesan-kosong p:last-child{margin-bottom:0}
.pesan-kosong .tombol{margin-top:12px}

/* 21.7 — Maskot untuk keadaan kosong.
   Halaman kosong yang cuma berisi kalimat terbaca sebagai kegagalan. Aru dan
   Uni membuatnya terbaca sebagai "belum ada", yang memang keadaannya. */
.pesan-kosong .maskot{width:118px; height:auto; margin:0 auto 10px; display:block;
  opacity:.9}

/* 21.8 — Fokus keyboard terlihat di SELURUH kendali, bukan sebagian.
   Sebelumnya hanya input dan .tabel-gulir yang punya cincin fokus; tab, kartu
   anak, dan keping pertemuan tidak - dan itu membuat halaman ini tidak bisa
   dipakai tanpa tetikus. */
a:focus-visible,button:focus-visible,summary:focus-visible,
select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ar); outline-offset:2px; border-radius:var(--r);
}

/* 21.9 — Kartu yang bisa diketuk memberi tanda bahwa ia bisa diketuk. */
.anak-kartu,.sesi-keping,.pusat-tab-item{cursor:pointer}
.anak-kartu:active,.sesi-keping:active{transform:translateY(-1px)}

@media (prefers-reduced-motion:reduce){
  .anak-kartu:active,.sesi-keping:active{transform:none}
}

/* ---------- 22. petunjuk gulir mendatar ----------

   Kelasnya dipasang JavaScript (bagian 8 psaud.js); bentuknya digambar di sini.
   Tanpa JavaScript tidak ada bayangan sama sekali dan isinya tetap tergulir -
   yang hilang cuma petunjuknya, bukan isinya. */
.atas nav,.pusat-tab,.sesi-jalur,.kalender,.tabel-gulir{position:relative}

.gulir-kanan{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent 100%);
}
.gulir-kiri{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px);
  mask-image:linear-gradient(to right,transparent 0,#000 34px);
}
/* Kedua sisi sekaligus: di tengah gulungan. Ditulis terpisah karena
   mask-image tidak bisa ditumpuk dari dua aturan - yang terakhir menang. */
.gulir-kiri.gulir-kanan{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 34px,
    #000 calc(100% - 34px),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 34px,
    #000 calc(100% - 34px),transparent 100%);
}

/* Cincin fokus TIDAK boleh ikut dipudarkan maskernya. Masker berlaku pada
   seluruh yang digambar elemen, termasuk outline - dan tabel yang sedang
   difokus keyboard jadi terlihat setengah berbingkai. Saat difokus, petunjuk
   gulirnya dilepas: yang sedang memakai keyboard sudah tahu ia bisa menggulir. */
.tabel-gulir:focus-visible,.kalender:focus-visible{
  -webkit-mask-image:none; mask-image:none;
}

/* ---------- 23. rincian formulir pendaftaran ---------- */

.rinci-daftar{margin:0; display:grid; gap:0}
.rinci-daftar > div{display:flex; gap:16px; flex-wrap:wrap; padding:11px 0;
  border-bottom:1px solid var(--garis)}
.rinci-daftar > div:last-child{border-bottom:0}
.rinci-daftar dt{flex:0 0 180px; font-weight:600; font-size:.9rem; color:var(--tinta-2)}
.rinci-daftar dd{flex:1 1 220px; margin:0; font-size:.95rem}
.rinci-daftar dd .kecil{display:block; margin-top:2px}
@media (max-width:520px){ .rinci-daftar dt{flex-basis:100%} }

/* Kotak kondisi anak. Diberi tanda tegas dengan SENGAJA: yang membukanya perlu
   tahu bahwa ia sedang membuka data kesehatan, bukan sekadar satu kolom lagi
   di formulir. Warnanya bukan merah bahaya - anaknya tidak sedang dalam
   masalah - tapi juga bukan warna netral yang membuatnya terbaca sambil lalu. */
.kondisi-kotak{border-left:5px solid var(--d-int); background:var(--putih)}
.kondisi-isi{font-size:1rem; line-height:1.6; white-space:pre-line;
  background:var(--kertas); border:1px solid var(--garis); border-radius:var(--r);
  padding:14px 16px; margin:10px 0 12px}

/* ---------- 24. tren catatan harian ----------

   Tiga puluh kotak, satu per hari, hari terlama di kiri. Tanpa angka tanggal
   di dalam kotaknya: pada tiga puluh kotak angkanya jadi terlalu kecil untuk
   dibaca dan hanya membuat stripnya terlihat penuh. Tanggalnya ada di title. */
.tren{background:var(--putih); border:1px solid var(--garis); border-radius:var(--r-l);
  padding:20px 22px; margin:16px 0; box-shadow:var(--bayang-1)}
.tren-kepala{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap; margin-bottom:14px}
.tren-kepala h3{margin:0; font-size:1.05rem}

.tren-strip{display:flex; gap:3px; flex-wrap:wrap; margin-bottom:14px}
.tren-kotak{flex:0 0 auto; width:20px; height:20px; border-radius:5px;
  background:var(--garis); display:inline-block}
.tren-kotak.kosong{background:var(--kertas); border:1px dashed var(--garis-kuat)}
/* Warna suasana dipinjam dari strip tujuh hari yang sudah ada, supaya satu
   warna berarti satu hal di seluruh aplikasi. */
.tren-kotak.suasana-tenang{background:var(--d-ves)}
.tren-kotak.suasana-bersemangat{background:var(--d-pro)}
.tren-kotak.suasana-rewel{background:var(--d-tak)}
.tren-kotak.suasana-kewalahan{background:var(--d-aud)}

.tren-kunci{display:flex; flex-wrap:wrap; gap:14px; padding:12px 0;
  border-top:1px solid var(--garis); border-bottom:1px solid var(--garis)}
.tren-kunci-butir{display:flex; align-items:center; gap:7px; font-size:.84rem;
  color:var(--tinta-2)}
.tren-kunci-butir .tren-kotak{width:14px; height:14px; border-radius:4px}
.tren-kunci-butir b{font-variant-numeric:tabular-nums}

.tren-kisi{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:18px; margin:16px 0 4px}
.tren-blok h4{margin:0 0 7px; font-size:.9rem}
.tren-daftar{list-style:none; margin:0; padding:0; display:grid; gap:5px}
.tren-daftar li{display:flex; justify-content:space-between; gap:12px;
  font-size:.88rem; color:var(--tinta-2)}
.tren-daftar b{white-space:nowrap; font-variant-numeric:tabular-nums; color:var(--tinta)}

@media (max-width:420px){ .tren-kotak{width:16px; height:16px} }

/* ---------- 25. pengingat H-1, daftar tunggu, pustaka tema ---------- */

.pengingat{background:var(--kuning-5); border:1px solid #E3D5A0;
  border-radius:var(--r-l); padding:18px 22px; margin:0 0 24px}
.pengingat-kepala{display:flex; justify-content:space-between; align-items:baseline;
  gap:12px; flex-wrap:wrap}
.pengingat .bagian-judul{margin:0}
.pengingat-sesi{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r); padding:14px 16px; margin-top:12px}
.pengingat-atas{display:flex; justify-content:space-between; align-items:flex-start;
  gap:12px; flex-wrap:wrap}
.pengingat-atas .kecil{display:block}
.pengingat-naskah{white-space:pre-line; font-family:inherit; font-size:.86rem;
  margin:10px 0 12px}
.pengingat-orang{display:flex; flex-wrap:wrap; gap:8px}
.pengingat-anak{display:inline-flex; align-items:center; gap:8px;
  background:var(--kertas); border:1px solid var(--garis);
  border-radius:var(--r-bulat); padding:5px 7px 5px 13px; font-size:.86rem}

/* Daftar tunggu. Kursinya BELUM dipegang - warnanya sengaja bukan warna
   pendaftar biasa, supaya tidak ada yang mengiranya sudah punya tempat. */
.tunggu-blok{margin-top:14px; padding-top:12px; border-top:1px dashed var(--garis-kuat)}
.tunggu-blok h4{margin:0 0 8px; font-size:.9rem; display:flex; align-items:center;
  gap:9px; flex-wrap:wrap}
.pendaftar.status-daftar-tunggu{border-left-color:var(--biru-4);
  background:var(--langit-2)}
.kursi-tunggu{color:var(--d-vis)}

.tema-daftar{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:8px}
.tema-daftar li{display:flex; justify-content:space-between; align-items:center;
  gap:14px; flex-wrap:wrap; padding:11px 14px; border-radius:var(--r);
  background:var(--kertas); border:1px solid var(--garis)}
.tema-daftar li.mati{opacity:.6}
.tema-daftar li .kecil{display:block}
.tema-daftar form{margin:0}

/* ---------- 26. paket kunjungan ---------- */

.paket-kisi{display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:14px; margin:14px 0}
.paket-kartu{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-l); padding:18px; box-shadow:var(--bayang-1)}
.paket-kartu.mati{opacity:.65; background:var(--kertas)}
.paket-atas{display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; margin-bottom:12px}
.paket-atas .kecil{display:block; margin-top:3px}
/* Angka SISA yang besar, bukan yang terpakai. Pertanyaannya selalu "sisa
   berapa" - dan angka yang paling besar di kartu sebaiknya angka yang
   ditanyakan, bukan angka yang harus dikurangkan dulu. */
.paket-sisa{flex:none; font-size:1.8rem; font-weight:700; color:var(--ar);
  line-height:1; font-variant-numeric:tabular-nums}
.paket-sisa small{font-size:.48em; font-weight:500; color:var(--tinta-3)}
.paket-kartu .sesi-bar{margin:0 0 6px}
.paket-kartu .lipat{margin-top:12px}

/* Pemilih bulan rangkuman. Sengaja tidak sebesar tombol utama - ia berguna
   tapi bukan hal pertama yang dicari orang di halaman ini. */
.rangkuman-pilih{margin-top:14px; padding-top:14px; border-top:1px solid var(--garis);
  display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.rangkuman-pilih select{font:inherit; font-size:.88rem; padding:8px 12px;
  border:1.5px solid var(--garis-kuat); border-radius:var(--r-bulat);
  background:var(--putih)}

/* Naskah pengingat memakai kotak yang sama dengan tautan, tapi ia PROSA.
   .tautan-kotak memutus di tengah kata (word-break:break-all) karena
   dirancang untuk URL panjang - pada kalimat, hasilnya "*K / elas Sensori"
   dan naskah yang mau disalin orang terlihat rusak. */
.pengingat-naskah{word-break:normal; overflow-wrap:anywhere;
  border-style:solid; background:var(--kertas)}

/* ---------- 27. jadwal dan akun orang tua ---------- */

/* Sisa paket didahulukan: "sisa berapa pertemuan?" salah satu dari dua
   pertanyaan yang paling sering masuk ke WhatsApp. */
.paket-ringkas{display:grid; gap:9px; margin:14px 0 4px}
.paket-baris{display:flex; align-items:center; gap:14px; padding:12px 15px;
  background:var(--pink-6); border:1px solid var(--pink-4); border-radius:var(--r)}
.paket-baris .paket-sisa{font-size:1.5rem}
.paket-baris .kecil{display:block; margin-top:2px}

.jadwal-saya{display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap;
  padding:14px 0; border-top:1px solid var(--garis)}
.jadwal-saya.hari-ini{background:var(--pink-6); border-radius:var(--r);
  padding:14px 15px; border-top-color:transparent}
.jadwal-saya.menunggu{opacity:.82}
.jadwal-saya-kal{flex:none; width:52px; text-align:center; background:var(--kertas);
  border:1px solid var(--garis); border-radius:var(--r); padding:6px 0 8px}
.jadwal-saya-kal span{display:block; font-size:.66rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--ar)}
.jadwal-saya-kal b{display:block; font-size:1.35rem; line-height:1.1; color:var(--ar);
  font-variant-numeric:tabular-nums}
.jadwal-saya-isi{flex:1 1 200px; min-width:0}
.jadwal-saya-isi .kecil{display:block; margin:2px 0 5px}
.jadwal-saya-batal{flex:0 0 auto; width:100%}

/* Tautan yang akibatnya tidak bisa ditarik kembali. Dibedakan bentuknya,
   bukan hanya warnanya - warna saja tidak sampai ke pembaca layar dan tidak
   terbaca oleh yang sulit membedakan merah. */
.tautan-bahaya{color:var(--bahaya); font-weight:600; text-decoration:underline;
  text-decoration-thickness:2px; text-underline-offset:3px}
.tautan-bahaya:hover{color:var(--bahaya)}

/* ---------- 28. pesan orang tua, kalender, cerita baru ---------- */

/* Pesan yang dititipkan orang tua untuk satu pertemuan. Dibedakan bentuknya
   dari catatan sistem: yang ini tulisan manusia, dan fasilitator perlu tahu
   bedanya sekilas. */
.pesan-ortu{display:block; margin-top:5px; padding:7px 11px; font-size:.84rem;
  line-height:1.45; color:var(--tinta-2); background:var(--langit-2);
  border-left:3px solid var(--d-vis); border-radius:0 var(--r) var(--r) 0}
.pengingat-anak.ada-pesan{align-items:flex-start; border-color:var(--d-vis)}
.pengingat-anak .pesan-ortu{max-width:340px}

.jadwal-saya-pesan{width:100%}
.kalender-tombol{display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--garis)}
.kalender-tombol .tombol{flex:0 0 auto}
.kalender-tombol span{flex:1 1 220px}

/* Cerita yang belum pernah dibuka. Bukan tanda baca-belum-baca yang bisa
   dimatikan-dinyalakan - hanya stempel pertama kali, dan itu cukup: yang
   dicari orang tua saat masuk adalah "ada yang baru untuk saya?". */
.daftar li.belum-dibuka{border-left:4px solid var(--ar); padding-left:12px;
  background:var(--pink-6); border-radius:0 var(--r) var(--r) 0}

/* ---------- 29. jurnal, menenangkan diri, pesan penyemangat ---------- */

/* Pesan harian. Kartu di atas beranda, BUKAN modal yang menghalangi: orang
   tua membuka beranda untuk mengerjakan sesuatu, dan apa pun yang menghalangi
   jalan itu ditutup tanpa dibaca dalam dua hari. */
.semangat{display:flex; gap:14px; align-items:flex-start;
  background:linear-gradient(135deg,var(--langit-2),var(--pink-6));
  border:1px solid var(--pink-4); border-radius:var(--r-xl);
  padding:18px 20px; margin:0 0 22px}
.semangat-maskot{flex:none; width:52px; height:auto}
.semangat-teks{flex:1 1 auto; font-size:1rem; line-height:1.6; color:var(--tinta)}
.semangat-teks small{display:block; margin-top:6px; font-size:.76rem;
  color:var(--tinta-3)}
.semangat-tutup{flex:none; background:none; border:0; cursor:pointer;
  font-size:1.1rem; line-height:1; color:var(--tinta-3); padding:6px 8px;
  border-radius:var(--r-bulat)}
.semangat-tutup:hover{background:var(--putih); color:var(--tinta)}

/* Janji privasi jurnal. Sengaja tenang, bukan mencolok - kotak peringatan
   merah pada halaman yang dibuka orang kelelahan menambah beban, bukan
   menenangkan. */
.jurnal-janji{border-left:5px solid var(--baik); background:var(--baik-latar)}
.jurnal-janji h2{margin-top:0}

/* Kotak nomor bantuan. Ini yang paling penting terlihat di halaman ini, jadi
   ia diberi bentuk yang tidak bisa dilewatkan mata - tapi tetap bukan merah
   bahaya: yang membacanya sedang tidak butuh ditakuti. */
.bantuan-kotak{border-left:5px solid var(--d-pro); background:#FEFCF3}
.bantuan-kotak h2{margin-top:0}
.bantuan-daftar{list-style:none; margin:12px 0; padding:0; display:grid; gap:10px}
.bantuan-daftar li{padding:12px 15px; background:var(--putih);
  border:1px solid var(--garis); border-radius:var(--r)}
.bantuan-daftar li.segera{border-color:var(--bahaya); background:var(--bahaya-latar)}
.bantuan-daftar .kecil{display:block; margin-top:3px}
.bantuan-daftar a{font-variant-numeric:tabular-nums}

.jurnal-catatan{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-l); padding:18px 20px; margin-bottom:14px;
  box-shadow:var(--bayang-1)}
.jurnal-catatan.dibagikan{border-left:4px solid var(--d-vis)}
.jurnal-kepala{display:flex; justify-content:space-between; gap:12px;
  flex-wrap:wrap; align-items:center; margin-bottom:10px}
/* white-space:pre-line: yang menulis dalam keadaan berat memakai baris baru
   sebagai jeda napas, dan meratakannya jadi satu paragraf menghapus itu. */
.jurnal-isi{white-space:pre-line; font-size:1rem; line-height:1.7; margin:0}
.jurnal-balasan{margin-top:14px; padding:14px 16px; background:var(--langit-2);
  border-left:4px solid var(--d-vis); border-radius:0 var(--r) var(--r) 0}
.jurnal-balasan b{display:block}
.jurnal-balasan .kecil{display:block; margin-bottom:6px}
.jurnal-balasan p{margin:0; white-space:pre-line; line-height:1.65}

/* ---------- latihan napas ---------- */

.napas-blok{background:var(--putih); border:1px solid var(--garis);
  border-radius:var(--r-xl); padding:32px 24px; margin:16px 0; text-align:center;
  box-shadow:var(--bayang-1)}
.napas-lingkaran{width:180px; height:180px; margin:0 auto 22px;
  border-radius:var(--r-bulat); background:var(--pink-6);
  border:2px solid var(--pink-3); display:flex; align-items:center;
  justify-content:center}
.napas-inti{display:block; width:70px; height:70px; border-radius:var(--r-bulat);
  background:var(--ar-terang);
  /* Empat detik, sama dengan satu hitungan fase. Transisinya yang membesar
     dan mengecil, bukan animasi berulang - supaya ia selalu sinkron dengan
     hitungan di JavaScript walau tab sempat tidak aktif. */
  transition:transform 4s cubic-bezier(.4,0,.4,1), background-color 4s linear}
.napas-lingkaran.tarik .napas-inti{transform:scale(2.1); background:var(--d-ves)}
.napas-lingkaran.tahan .napas-inti{transform:scale(2.1); background:var(--d-ves)}
.napas-lingkaran.buang .napas-inti{transform:scale(1); background:var(--ar-terang)}
.napas-lingkaran.jeda .napas-inti{transform:scale(1); background:var(--ar-terang)}
.napas-lingkaran.jalan{border-color:var(--ar)}

.napas-aba{font-size:1.15rem; font-weight:600; margin:0 0 4px; color:var(--tinta)}
.napas-hitung{font-size:2.4rem; font-weight:700; color:var(--ar); margin:0;
  line-height:1.1; font-variant-numeric:tabular-nums; min-height:1.1em}
.napas-kendali{justify-content:center}

.tambat{margin:12px 0 0; padding-left:22px; display:grid; gap:7px}
.tambat li{line-height:1.6}

@media (prefers-reduced-motion:reduce){
  /* Lingkarannya berhenti bergerak; hitungannya tetap jalan. Halaman
     menenangkan diri yang bikin pusing adalah kegagalan yang paling ironis. */
  .napas-inti{transition:none}
  .napas-lingkaran.tarik .napas-inti,.napas-lingkaran.tahan .napas-inti,
  .napas-lingkaran.buang .napas-inti,.napas-lingkaran.jeda .napas-inti{
    transform:none; background:var(--ar-terang)}
}

/* ---------- 30. perampingan ----------

   Aplikasi ini sempat memuat hampir tiga ribu kata prosa penjelas di dalam
   antarmukanya - sepuluh halaman A4 tulisan kecil. Sebagian besar adalah
   ALASAN di balik keputusan, dan alasan itu tempatnya di komentar kode dan
   di RENCANA-LARAVEL.md, bukan di layar orang tua yang membuka aplikasi jam
   sembilan malam.

   Yang tetap terlihat: janji yang harus dipercaya, dan batasan yang menjaga
   orang. Sisanya dilipat ke sini. */
.kenapa{margin:8px 0 0; font-size:.84rem}
.kenapa > summary{cursor:pointer; color:var(--tinta-3); list-style:none;
  display:inline-flex; align-items:center; gap:5px; padding:3px 0;
  border-bottom:1px dotted var(--garis-kuat); width:auto}
.kenapa > summary::-webkit-details-marker{display:none}
.kenapa > summary::before{content:"?"; flex:none; width:15px; height:15px;
  border-radius:var(--r-bulat); background:var(--garis); color:var(--tinta-2);
  font-size:.66rem; font-weight:700; display:flex; align-items:center;
  justify-content:center}
.kenapa > summary:hover{color:var(--ar)}
.kenapa[open] > summary{margin-bottom:7px}
.kenapa p{margin:0 0 6px; color:var(--tinta-3); line-height:1.6;
  padding-left:20px; border-left:2px solid var(--garis)}
.kenapa p:last-child{margin-bottom:0}

/* Penghitung huruf pada kotak tulis. Muncul saat mendekati batas, bukan
   selalu - penghitung yang selalu terlihat membuat orang menulis pendek
   sejak kalimat pertama. */
.hitung-huruf{display:block; text-align:right; font-size:.78rem;
  color:var(--tinta-3); margin-top:4px; opacity:0; transition:opacity var(--gerak)}
.hitung-huruf.tampak{opacity:1}
.hitung-huruf.hampir{color:var(--d-pro); font-weight:600}
.hitung-huruf.penuh{color:var(--bahaya); font-weight:600}

@media (prefers-reduced-motion:reduce){ .hitung-huruf{transition:none} }

/* Janji privasi jurnal - satu baris, bukan kartu penuh. Ia yang menentukan
   apakah orang menulis jujur, jadi tidak boleh dilipat; tapi ia juga tidak
   perlu tiga paragraf. */
.janji-privat{background:var(--baik-latar); border-left:4px solid var(--baik);
  border-radius:0 var(--r) var(--r) 0; padding:12px 16px; margin:0 0 18px;
  font-size:.94rem; line-height:1.55}

.rasa-baris{display:grid; gap:7px}
.rasa-baris > .kecil{margin:0}

/* Nomor bantuan jadi tombol yang bisa langsung diketuk, bukan tautan teks.
   Yang membukanya sedang tidak dalam keadaan memilih-milih tautan kecil. */
.bantuan-daftar li{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center}
.bantuan-daftar li > b{flex:0 0 auto}
.bantuan-daftar li > .kecil{flex:1 1 100%; margin:0}
.bantuan-daftar .tombol{background:var(--baik); border-color:var(--baik);
  font-variant-numeric:tabular-nums}
.bantuan-daftar .tombol:hover{background:#155A52}
.bantuan-daftar li.segera .tombol{background:var(--bahaya); border-color:var(--bahaya)}
.bantuan-daftar li.segera .tombol:hover{background:#742A2C; border-color:#742A2C}

/* Suasana hari ini, satu ketukan dari beranda. Kepingnya berwarna sesuai
   suasananya - warna yang sama dengan strip tujuh hari di atasnya, supaya
   satu warna berarti satu hal di seluruh aplikasi. */
.suasana-cepat{display:grid; gap:8px; margin:14px 0 4px; padding-top:14px;
  border-top:1px solid var(--garis)}
.suasana-cepat > .kecil{margin:0}
.suasana-tombol{display:flex; flex-wrap:wrap; gap:8px}
.suasana-keping{
  flex:1 1 auto; min-width:96px; font:inherit; font-size:.88rem; font-weight:600;
  padding:11px 14px; border-radius:var(--r-bulat); cursor:pointer;
  border:1.5px solid transparent; color:var(--putih);
  transition:transform var(--gerak), box-shadow var(--gerak), filter var(--gerak);
}
.suasana-keping:hover{transform:translateY(-2px); box-shadow:var(--bayang-2);
  filter:saturate(115%)}
.suasana-keping:active{transform:translateY(0)}
.suasana-keping.suasana-tenang{background:var(--d-ves)}
.suasana-keping.suasana-bersemangat{background:var(--d-pro)}
.suasana-keping.suasana-rewel{background:var(--d-tak)}
.suasana-keping.suasana-kewalahan{background:var(--d-aud)}

@media (prefers-reduced-motion:reduce){
  .suasana-keping{transition:none}
  .suasana-keping:hover{transform:none}
}

/* Medan berdampingan yang salah satunya punya keterangan tambahan jadi tidak
   sejajar - labelnya setinggi dua baris, tetangganya satu. Kotak isiannya
   didorong ke dasar supaya keduanya tetap segaris apa pun panjang labelnya. */
.sejajar > label{display:flex; flex-direction:column}
.sejajar > label > input,
.sejajar > label > select,
.sejajar > label > textarea{margin-top:auto}

/* ---------- 31. perapian untuk layar ponsel ----------

   Diperiksa di 375px dengan mengukur, bukan dengan melihat: luapan mendatar,
   tinggi sasaran ketuk, dan ukuran huruf. */

/* 31.1 — <legend> berhenti menumpuk garis kartu.
   Legend bawaan peramban "duduk" DI ATAS garis fieldset dan memotongnya. Itu
   masih terbaca saat labelnya satu baris pendek; begitu ia membungkus jadi dua
   baris - "Ada yang terjadi hari ini? boleh lebih dari satu" di layar 375px -
   baris keduanya jatuh ke LUAR kartu dan halamannya terlihat rusak.

   float:left memaksa legend dirender sebagai blok biasa di dalam alirannya.
   Itu teknik lama dan masih satu-satunya yang bekerja di semua peramban. */
.keping > legend,
fieldset.kartu > legend{
  float:left; width:100%; padding:0; margin:0 0 10px; clear:both;
}
.keping > legend + *,
fieldset.kartu > legend + *{clear:both}
.keping > legend .kecil,
fieldset.kartu > legend .kecil{display:inline; font-weight:400}

/* 31.2 — sasaran ketuk minimal 44px.
   Bukan kerewelan: jari orang dewasa yang sedang menggendong anak tidak
   setepat tetikus, dan keping yang meleset membuat orang berhenti mencatat. */
.keping-item span{padding:12px 17px}
.keping-pilih{padding:11px 15px}
.semangat-tutup{width:44px; height:44px; display:flex; align-items:center;
  justify-content:center}

@media (max-width:640px){
  /* Menu bawaan peramban, medan isian, dan pelipat: 44px penuh.
     Disebut lewat elemen, bukan lewat kelas - satu menu tanpa kelas di dalam
     .sebaris terlewat dua kali saat aturan ini masih menyebut kelas satu per
     satu, dan yang terlewat justru menu status pendaftar yang paling sering
     disentuh fasilitator di lapangan. */
  main select,main input[type="date"],main input[type="time"],
  main input[type="number"],main input[type="search"],main input[type="tel"],
  main input[type="text"],main input[type="email"],main input[type="password"]{
    min-height:44px}
  /* min-height saja, TANPA display:flex. display:flex membuang segitiga
     pelipat bawaan peramban, dan dua pelipat di halaman Jadwal langsung
     berubah jadi kotak yang tidak memberi tanda apa pun bahwa ia bisa dibuka. */
  main summary{min-height:44px; padding-top:12px; padding-bottom:12px}
  .kenapa > summary{padding-top:0; padding-bottom:0}
  /* Pelipat penjelasan berdiri sendiri di barisnya sendiri, bukan tautan di
     tengah kalimat - jadi ia tetap perlu 44px. inline-flex-nya sudah ada di
     aturan dasarnya dan menjaga lebarnya seukuran teks; di sini tinggal
     tingginya. */
  .kenapa > summary{min-height:44px}

  /* Butir daftar yang seluruhnya tautan diberi ruang ketuk penuh.
     Ini tautan UTAMA - yang dibuka orang untuk membaca laporan anaknya -
     bukan tautan di tengah kalimat. Tautan dalam kalimat sengaja dibiarkan
     setinggi barisnya: membesarkannya akan merusak alur kalimatnya, dan
     pedoman sasaran ketuk memang mengecualikannya. */
  .daftar li > a:first-child{display:inline-flex; align-items:center;
    min-height:44px; padding:0}
  .daftar li{padding:2px 0}

  /* Tombol jadi selebar kartu: dua tombol setengah lebar berdampingan di
     layar 375px selalu berakhir dengan salah satunya terpotong. */
  .aksi-baris .tombol,.aksi-baris form,.aksi-baris form .tombol{width:100%}
  .aksi-baris{gap:8px}

  /* Kepala halaman: judul dan tombolnya menumpuk, tombolnya penuh. */
  .halaman-kepala{align-items:stretch}
  .halaman-kepala > .tombol{width:100%; text-align:center}

  /* Keping tanda tidak boleh mengecil lagi - 12,5px sudah batas bawah yang
     masih terbaca di layar ponsel dengan cahaya matahari. */
  .keping-tanda{font-size:.8rem; padding:5px 12px}

  /* Kartu diberi napas lebih sedikit di tepi supaya isinya dapat lebar. */
  .kartu,.jurnal-catatan,.sesi-kartu,.ortu-kartu{padding:16px 15px}
  .tren,.napas-blok,.perhatian{padding:16px 15px}
}

/* 31.3 — layar sangat sempit (320px, iPhone SE lama). */
@media (max-width:360px){
  .ringkas{grid-template-columns:1fr}
  .suasana-keping{min-width:0; flex:1 1 46%}
  .jadwal-saya-kal{width:46px}
}

/* 32 - Bilah bawah ponsel, penanda angka, dan teks khusus pembaca layar.
   ------------------------------------------------------------------ */

/* 32.1 - Teks yang hanya dibacakan pembaca layar. Angka "3" di tab tidak
   berarti apa-apa kalau dibacakan sendirian; kata "menunggu" di sebelahnya
   yang membuatnya kalimat. */
.hanya-baca{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}

/* 32.2 - Penanda angka di tab. */
.tab-angka{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:19px; height:19px; margin-left:6px; padding:0 5px;
  border-radius:999px; background:var(--ar); color:var(--putih);
  font-size:.72rem; font-weight:700; line-height:1; vertical-align:1px;
}
.pusat-tab-item.kini .tab-angka{background:var(--putih); color:var(--ar)}

/* 32.3 - Dua tab pengaturan dipisahkan dari lima tab kerja harian.
   Di layar lebar cukup garis tipis. Di ponsel bilahnya membungkus, dan garis
   yang jatuh di awal baris tidak memisahkan apa pun - jadi di sana pemisahnya
   berupa rupa yang lebih tenang: latar abu, bukan putih. */
.pusat-tab-item.pisah{margin-left:10px; padding-left:17px; position:relative}
.pusat-tab-item.pisah::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:20px; background:var(--garis);
}
@media (max-width:760px){
  .pusat-tab-item.pisah,.pusat-tab-item.pisah ~ .pusat-tab-item{
    background:var(--kertas); color:var(--tinta-3); font-size:.86rem;
  }
  .pusat-tab-item.pisah{margin-left:0; padding-left:14px}
  .pusat-tab-item.pisah::before{display:none}
  .pusat-tab-item.pisah.kini,.pusat-tab-item.pisah ~ .pusat-tab-item.kini{
    background:var(--ar); color:var(--putih);
  }
}

/* 32.4 - Bilah bawah: menu utama pindah ke jangkauan ibu jari.
   Menu atas dulu bergulir mendatar di ponsel, dan butir terakhirnya - Keluar -
   terpotong di tepi layar. Menu yang harus digulir dulu bukan menu.
   Di layar lebar bilah ini tidak ada; menu atas yang bekerja. */
.bilah-bawah{display:none}
@media (max-width:640px){
  .bilah-bawah{
    display:flex; position:fixed; left:0; right:0; bottom:0; z-index:40;
    background:var(--putih); border-top:1px solid var(--garis);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 12px rgba(31,26,34,.06);
  }
  .bilah-bawah a{
    flex:1 1 0; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:3px; min-height:52px; padding:5px 2px;
    border-radius:12px; color:var(--abu); font-size:.68rem; font-weight:600;
    letter-spacing:.01em; text-align:center; line-height:1.15;
  }
  .bilah-bawah a:hover{text-decoration:none}
  .bilah-bawah a svg{width:22px; height:22px; flex:0 0 auto}
  .bilah-bawah a[aria-current="page"]{background:var(--pink-6); color:var(--ar)}
  /* Menu atas disembunyikan supaya tidak ada dua menu yang sama di satu
     layar - merek tetap ada sebagai penanda tempat. */
  .atas nav{display:none}
  .atas .dalam{justify-content:center}
  /* Ruang supaya isi halaman tidak tertutup bilahnya. */
  body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
}
@media print{.bilah-bawah{display:none !important}}

/* 32.5 - Kartu penyemangat di ponsel.
   Diukur di layar 375px: teksnya cuma dapat 170px karena maskot dan tombol
   tutup memakan sisanya, jadi dua kalimat berdiri setinggi 289px dan
   mendorong seluruh isi halaman keluar layar pertama. Yang membacanya Ayah
   Bunda yang baru pulang - kalimat penyemangat yang menghalangi jalan justru
   jadi beban.

   Tombol tutup keluar dari aliran (posisinya di pojok), maskot mengecil, dan
   teksnya memakai lebar penuh. Tinggi kartunya turun kira-kira separuh tanpa
   satu kata pun dibuang. */
@media (max-width:640px){
  .semangat{position:relative; gap:11px; padding:15px 16px; margin-bottom:16px}
  .semangat-maskot{width:38px}
  .semangat-teks{font-size:.95rem; line-height:1.5; padding-right:30px}
  .semangat-teks small{margin-top:5px; line-height:1.45}
  .semangat-tutup{position:absolute; top:5px; right:5px}
}

/* 32.6 - Teks contoh di medan isian.
   Ia mewarisi ketebalan labelnya dan tampil sama persis dengan tulisan
   sungguhan - di halaman jurnal, tujuh puluh huruf teks contoh yang semi-tebal
   terbaca seperti draf yang sudah pernah ditulis Ayah Bunda. Sekarang ia
   lebih tipis dan lebih pudar: jelas sebagai contoh, masih terbaca. */
input::placeholder,textarea::placeholder{
  font-weight:400; color:var(--tinta-3); opacity:1;
}

/* 32.7 - Jarak di kartu jadwal orang tua.
   .jadwal-saya adalah flex ber-gap 14px, dan margin 16px milik .lipat tidak
   runtuh di dalam flex - ia DITAMBAHKAN. Jarak antar dua pelipat jadi 46px
   sementara jarak lain 14px, dan kartunya terbaca berlubang. Di sini gap
   wadahnya yang memutuskan, bukan margin anaknya.

   "Akan datang" juga menempel persis di bawah nama anak; satu baris jeda
   memisahkan "siapa" dari "kapan". */
.jadwal-saya > .lipat{margin-top:0; margin-bottom:0}
.jadwal-saya > h3{margin-top:6px}

/* 33 - Aru dan Uni yang hidup.
   ---------------------------------------------------------------
   Gerak di sini dijaga tetap kecil dengan sengaja. Yang membuka halaman ini
   sering Ayah Bunda yang baru pulang, dan sebagian anak yang ikut melihat
   layarnya peka terhadap gerak. Simpangannya beberapa piksel, satu putaran
   enam sampai tujuh detik - cukup untuk terasa hidup, tidak cukup untuk
   menarik mata dari kalimat di sebelahnya.

   Seluruhnya dimatikan oleh prefers-reduced-motion di bawah. */
.maskot-sambut{
  display:block; width:150px; height:auto; margin:2px auto 6px;
  animation:maskot-apung 6.4s ease-in-out infinite;
}
.pesan-kosong .maskot{animation:maskot-apung 7.1s ease-in-out infinite}
/* Jeda negatif berbeda supaya maskot penyemangat dan maskot keadaan kosong
   tidak pernah naik-turun serempak kalau kebetulan satu layar. */
.semangat-maskot{animation:maskot-apung 6.8s ease-in-out infinite -2.3s}
@keyframes maskot-apung{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-7px) rotate(-1.4deg)}
}

/* 33.1 - Awan hanyut di pita langit puncak halaman.
   Pitanya sudah ada sejak lama tapi rata dan diam. Dua awan yang lewat
   pelan membuatnya terbaca sebagai langit, bukan sebagai kotak biru.

   Digambar dengan radial-gradient, bukan berkas gambar: tidak ada permintaan
   jaringan tambahan, dan bentuknya ikut menyesuaikan lebar layar sendiri.
   pointer-events:none supaya ia tidak pernah menghalangi ketukan. */
/* absolute, BUKAN fixed. Pita langitnya sendiri adalah background-image di
   body dan ikut menggulir; awan yang fixed akan tertinggal menempel di layar
   dan berakhir sebagai gumpalan putih di atas kertas putih begitu halaman
   digulir sedikit saja.

   right:60px, bukan 0. Kotak ini dihanyutkan sejauh 38px ke kanan, dan kotak
   yang tepinya sudah di 0 lalu digeser ke kanan MELEBARKAN halaman - waktu
   diukur, penggulir mendatar yang muncul itu selisihnya persis sebesar
   translate-nya saat itu. Ruang 60px di tepi kanan selalu lebih besar
   daripada simpangannya, jadi tidak ada yang pernah keluar. */
body::before{
  content:""; position:absolute; left:0; right:60px; top:0; height:210px; z-index:0;
  pointer-events:none; opacity:.75;
  background:
    radial-gradient(42px 21px at 14% 52px, #fff 98%, transparent 100%),
    radial-gradient(30px 15px at 21% 44px, #fff 98%, transparent 100%),
    radial-gradient(34px 17px at 80% 96px, #fff 98%, transparent 100%),
    radial-gradient(24px 12px at 87% 88px, #fff 98%, transparent 100%);
  animation:awan-psaud 44s ease-in-out infinite;
}
@keyframes awan-psaud{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(38px)}
}
/* Isi halaman berdiri DI ATAS pita itu. Tanpa ini awannya menutupi teks.

   .bilah-bawah SENGAJA tidak ikut di sini. Ia sudah position:fixed z-index:40,
   dan menyebutnya di sini justru menimpanya jadi relative - selektor
   "body > .bilah-bawah" lebih kuat daripada ".bilah-bawah" di dalam media
   query, karena media query tidak menambah kekuatan selektor. Diukur:
   bilahnya berhenti menempel dan ikut menggulir pergi ke y=2007. */
body > header,body > main,body > footer{position:relative; z-index:1}

@media (prefers-reduced-motion:reduce){
  .maskot-sambut,.pesan-kosong .maskot,.semangat-maskot,body::before{animation:none}
}
@media print{body::before{display:none}}

/* 34 - Baris yang patah di tempat yang salah, dan kartu yang terlalu tinggi.
   =====================================================================
   Keluhannya "tumpang tindih". Diukur, tidak ada satu pun kotak teks yang
   benar-benar bertindih - yang terjadi baris patah di tempat yang salah:
   remah seperti "4,00" dan "- subtema Gotong Royong" terlempar sendirian ke
   baris baru, dan mata membacanya sebagai tulisan yang menimpa. */

/* 34.1 - Tidak ada lagi satu kata yang ditinggal sendirian di baris terakhir.
   text-wrap:pretty menyuruh peramban mengorbankan sedikit kerapian baris di
   atas demi tidak meninggalkan remah di bawah; balance meratakan judul
   pendek. Peramban yang belum mengenalnya mengabaikannya begitu saja. */
main p,main li,main dd,main figcaption,.lede,.kecil{text-wrap:pretty}
main h1,main h2,main h3,.halaman-kepala h1{text-wrap:balance}

/* 34.2 - Angka dan satuannya tidak pernah dipisah.
   "rata-rata 3,75 dari 4,00" dulu patah tepat sebelum "4,00", dan angka
   pembanding yang berdiri sendiri di baris baru kehilangan artinya. */
.utuh{white-space:nowrap}

/* 34.3 - Butir daftar: judul di barisnya sendiri, keterangan di bawahnya.
   Dulu ketiganya - tautan, penanda "baru", dan tanggal - mengalir sebagai
   satu paragraf dan patah di mana saja. Sekarang barisnya ditentukan
   strukturnya, bukan sisa lebar layar. */
.daftar li{display:grid; gap:3px}
.daftar li > .kecil{display:block}
.daftar-judul{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
/* Penanda kecil sebaris dengan keterangan di sebelahnya. */
.daftar li > .kecil > .keping-tanda{margin-right:6px; vertical-align:1px}
.daftar-judul > a{font-weight:600}

/* 34.4a - Bilah atas menempel (sticky) setinggi 108px, dan scroll-padding-top
   masih "auto" - jadi tiap lompatan tautan-dalam-halaman dan tiap
   scrollIntoView mendaratkan isinya DI BAWAH bilah itu. Terukur: judul
   halaman tertutup 15px. Ini tumpang tindih yang sungguhan, bukan artefak
   alat ukur. */
html{scroll-padding-top:118px}
@media (max-width:640px){
  /* Di ponsel menunya pindah ke bilah bawah, jadi bilah atasnya tinggal satu
     baris merek saja. */
  html{scroll-padding-top:70px}
}

/* 34.4 - "Paling menonjol" di kartu anak: nilainya turun ke barisnya sendiri. */
.anak-sorot > .kecil{display:block; margin-top:2px}

/* 34.5 - Kartu anak di beranda orang tua: 685px jadi jauh lebih pendek.
   Diukur di layar 390px, satu kartu 685px - dua anak berarti separuh halaman
   habis sebelum apa pun yang lain terlihat. Yang dipangkas ruang dan susunan,
   bukan isinya: tidak ada satu pun tombol yang dibuang. */

/* Empat suasana dalam kisi 2x2 tetap. Sebagai flex yang membungkus, susunannya
   berubah-ubah menurut lebar layar - di 390px jadi 2+2, di 685px jadi 3+1
   dengan satu tombol melar sendirian selebar kartu. Kisi tidak pernah ragged. */
.suasana-tombol{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.suasana-keping{min-width:0; padding:10px 12px}

/* Tombol aksi berpasangan dua-dua, bukan menumpuk satu-satu. */
.anak-aksi{display:grid; grid-template-columns:1fr 1fr; gap:9px}
.anak-aksi .tombol{
  flex:none; padding:12px 10px; font-size:.9rem; text-align:center;
  display:flex; align-items:center; justify-content:center; min-height:46px;
}
/* Tombol ganjil terakhir mengisi lebar penuh - lebih baik daripada tombol
   setengah lebar yang menggantung di sebelah ruang kosong. */
.anak-aksi .tombol:last-child:nth-child(odd){grid-column:1 / -1}

/* Arti huruf dilipat. Ia berguna sekali, lalu jadi kebisingan - dan sampai
   sekarang ia dicetak ulang di kartu SETIAP anak, mengulang hal yang sama
   dua kali dalam satu layar. */
.arti-huruf{margin:8px 0 0; font-size:.84rem}
.arti-huruf > summary{
  color:var(--tinta-3); cursor:pointer; list-style:none; width:max-content;
  display:inline-flex; align-items:center; gap:5px; min-height:34px;
  border-bottom:1px dotted var(--garis-kuat);
}
.arti-huruf > summary::-webkit-details-marker{display:none}
.arti-huruf > summary::before{content:"?"; flex:none; width:15px; height:15px;
  border-radius:var(--r-bulat); background:var(--garis); color:var(--tinta-2);
  font-size:.66rem; font-weight:700; display:flex; align-items:center;
  justify-content:center}
.arti-huruf[open] > summary{margin-bottom:6px}
.arti-huruf .strip-kunci{margin-top:0}
/* Bukan perbaikan tampilan - <details> yang tertutup memang sudah tidak
   menggambar isinya, dan diuji dengan memaksa display:flex pun
   checkVisibility() tetap false dan isi di bawahnya tidak bergeser sepiksel
   pun. (Alat ukur saya sempat melaporkannya sebagai tumpang tindih; yang
   keliru alat ukurnya - getClientRects() tetap mengembalikan kotak untuk
   subtree ber-content-visibility:hidden.)

   Aturan ini tetap dipasang supaya geometrinya jujur: kotak 319x54 yang
   dilaporkan untuk sesuatu yang tidak tergambar akan menyesatkan pengukuran
   berikutnya, milik siapa pun yang mengukur halaman ini nanti. */
.arti-huruf:not([open]) .strip-kunci{display:none}

/* Ambang 340px, bukan 400px. Percobaan pertama memakai 400px dan itu
   mencakup hampir seluruh ponsel yang dipakai orang - 375px dan 390px
   keduanya di bawahnya - jadi susunan dua kolomnya tidak pernah sekali pun
   muncul di layar sungguhan. Yang benar-benar butuh satu kolom cuma layar
   yang sangat sempit. */
@media (max-width:340px){
  .anak-aksi{grid-template-columns:1fr}
  .anak-aksi .tombol:last-child:nth-child(odd){grid-column:auto}
}

/* 34.6 - Rangkuman bulanan: label, pilihan bulan, dan tombol dalam satu
   baris yang membungkus - bukan tiga baris bertumpuk.

   Labelnya SENGAJA flex:1 1 100%, memakan satu baris penuh, dengan pilihan
   bulan dan tombol berbagi baris kedua: 87px. Dicoba flex:0 0 auto supaya
   ketiganya sebaris - labelnya 147px + pilihan 163px sudah persis selebar
   kartu, jadi tombolnya justru terlempar ke baris ketiga dan tingginya naik
   ke 108px. Ketiganya memang tidak muat sebaris di layar ponsel. */
.rangkuman-sebaris{display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--garis)}
.rangkuman-sebaris > .kecil{flex:1 1 100%; margin:0}
.rangkuman-sebaris select{flex:1 1 120px; width:auto; min-width:0; margin:0}
.rangkuman-sebaris .tombol{flex:0 0 auto}

/* 35 - Layar lebar.
   =====================================================================
   Kolom isinya dibatasi 1060px, tapi APA YANG ADA DI DALAMNYA tidak pernah
   dibatasi apa pun - jadi di layar 1440px semuanya sekadar melar sampai tepi
   kolom. Terukur di sana: tombol "Tenang" selebar 479px, "Ide bermain di
   rumah" 967px, medan tanggal 477px, textarea 967px, dan enam paragraf lebih
   lebar dari 760px.

   Melar bukan tata letak. Tombol satu kata selebar paragraf terbaca sebagai
   halaman rusak, dan baris teks 967px membuat mata kehilangan awal baris
   berikutnya.

   SELURUH bagian ini di dalam min-width:760px. Tampilan ponsel tidak
   tersentuh satu piksel pun. */
@media (min-width:760px){

  /* 35.1 - Panjang baris. Sekitar 68 huruf: batas nyaman yang sama dipakai
     buku sejak lama. Yang dibatasi prosanya saja - tabel, kisi, dan daftar
     tetap memakai lebar penuh karena memang itu gunanya. */
  main > p,.lede,.kartu > p,.bingkai > p,.kabar p,.janji-privat{max-width:68ch}
  .kenapa > p,.lipat > p{max-width:72ch}

  /* 35.2 - Medan isian dibatasi menurut ISI yang diharapkannya, bukan menurut
     sisa ruang. Tanggal tidak pernah butuh 477px. */
  .tumpuk input[type="date"],.tumpuk input[type="time"],
  .tumpuk input[type="number"],.sejajar input[type="date"],
  .sejajar input[type="time"],.sejajar input[type="number"]{max-width:230px}
  .tumpuk input[type="text"],.tumpuk input[type="email"],
  .tumpuk input[type="tel"],.tumpuk input[type="password"],
  .tumpuk input[type="search"],.tumpuk input:not([type]),
  .sejajar input[type="text"],.sejajar input[type="email"]{max-width:460px}
  .tumpuk select,.sejajar select,.sebaris select{max-width:340px}
  .tumpuk textarea,.sejajar textarea{max-width:680px}
  .tumpuk input[type="file"]{max-width:460px}

  /* 35.3 - Tombol selebar isinya, bukan selebar kartunya. */
  .suasana-tombol{grid-template-columns:repeat(4,minmax(0,168px))}
  .anak-aksi{grid-template-columns:repeat(2,minmax(0,232px))}
  /* Tombol ganjil terakhir berhenti membentang selebar kartu: 967px untuk
     "Ide bermain di rumah" adalah bentuk paling mencolok dari soal ini. */
  .anak-aksi .tombol:last-child:nth-child(odd){grid-column:auto}
  .rangkuman-sebaris > .kecil{flex:0 0 auto}
  .rangkuman-sebaris select{flex:0 1 240px}

  /* 35.4 - Keping tujuh hari berhenti melar. Isinya dua huruf; di layar
     1440px tiap keping jadi 133px dan barisnya terbaca seperti tabel kosong.
     Lebar tetap 62px, rapat ke kiri. */
  /* Yang melar itu <li> pembungkusnya (flex:1 1 0), bukan <a> di dalamnya -
     percobaan pertama membatasi <a>-nya dan kepingnya tetap berjarak 133px
     satu sama lain. */
  .strip{justify-content:flex-start}
  .strip > li{flex:0 0 62px}

  /* 35.5 - Kalimat penyemangat 855px terlalu panjang untuk satu tarikan mata. */
  .semangat-teks{max-width:70ch}

  /* 35.6 - Butir daftar: judul di kiri, keterangan di kanan pada satu baris.
     Di ponsel ia tetap dua baris - lebarnya memang tidak cukup di sana. */
  .daftar li{grid-template-columns:1fr auto; align-items:baseline; gap:16px}
  .daftar li > .kecil{text-align:right}
}