/* Minda Ceria · Kawasan ibu bapa, pilihan 2 "Senarai + butiran" (owner 29 Okt).
   Telefon: .ib3[data-ib-mod=senarai] tunjuk senarai, [data-ib-mod=butiran] tunjuk panel + butang kembali.
   Tablet >= 900px: senarai kiri (380px), butiran kanan, kedua-duanya kelihatan. Panel lama diguna semula. */
.app:has(.ib3){max-width:none;padding:0}
.ib3{min-height:100dvh;background:#f7f1e8}
.ib3__senarai{padding:calc(var(--atas) + 10px) 0 calc(var(--bawah) + 28px)}
.ib3__atas{display:flex;align-items:center;gap:8px;padding:4px 16px 6px}
.ib3__jenama{display:flex;align-items:center;gap:8px;min-width:0}
.ib3__jenama img{width:36px;height:auto;flex:none}
.ib3__jenama b{font:600 17px var(--f-papar);white-space:nowrap}
@media (max-width:459.98px){.ib3__jenama b{display:none}}
.ib3__ruang{flex:1}
.ib3__atas .km-bunyi{width:44px;height:44px}
.ib3__jud{padding:10px 20px 16px}
.ib3__jud h1{margin:0;font:600 32px/1.1 var(--f-papar);letter-spacing:-.01em}
.ib3__jud p{margin:4px 0 0;font:700 14px var(--f-teks);color:var(--dakwat-3)}
.ib3-kump{padding:0 16px;margin:0 0 18px}
.ib3-kump__h{margin:0 8px 8px;font:900 12px var(--f-teks);letter-spacing:.06em;text-transform:uppercase;color:var(--dakwat-3)}
.ib3-kad{background:#fff;border-radius:22px;box-shadow:inset 0 0 0 2px var(--garis);overflow:hidden}
.ib3-br{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 14px;text-align:left;background:none;border:0;cursor:pointer;color:var(--dakwat)}
.ib3-br+.ib3-br::before{content:'';position:absolute;top:0;left:64px;right:0;height:1.5px;background:#f3eadc}
.ib3-br--anak{min-height:80px}
.ib3-br--anak+.ib3-br::before,.ib3-br--anak+.ib3-br--anak::before{left:76px}
.ib3-br--anak .potret{--s:50px;box-shadow:0 0 0 2px #fff}
.ib3-br:active{background:#fbf5ec}
.ib3-br.on{background:#fff0ea}
.ib3-br.on .ib3-chev{color:var(--utama-gelap)}
.ib3-br:focus-visible{outline:3px solid var(--langit);outline-offset:-3px;border-radius:18px}
.ib3-ik{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--c);color:#fff}
.ib3-ik svg{width:20px;height:20px}
.ib3-br__t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ib3-br__t b{font:800 15px/1.25 var(--f-teks)}
.ib3-br__t small{font:700 12.5px/1.3 var(--f-teks);color:var(--dakwat-3)}
.ib3-mini{display:flex;gap:12px;margin-top:3px;font:800 12px var(--f-teks);color:var(--dakwat-2);min-height:16px}
.ib3-mini i{font-style:normal;display:inline-flex;align-items:center;gap:4px}
.ib3-mini svg{width:14px;height:14px}
.ib3-mini__emas{color:var(--emas-gelap)}
.ib3-chev{flex:none;width:18px;height:18px;color:#c3bcb0}
.ib3-br--balik .ib3-br__t b{color:var(--dakwat)}
/* butiran */
.ib3__butiran{min-width:0;padding:calc(var(--atas) + 10px) 16px calc(var(--bawah) + 30px)}
.ib3__kepala{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.ib3__balik{display:inline-flex;align-items:center;gap:2px;height:44px;padding:0 10px 0 2px;margin-left:-4px;border:0;background:none;border-radius:12px;font:800 15px var(--f-teks);color:var(--utama-gelap);cursor:pointer}
.ib3__balik svg{width:22px;height:22px}
.ib3__kepala .ib2__tajuk{flex-basis:100%;margin:0;font:600 26px/1.15 var(--f-papar)}
.ib3__kepala .ib2__tajuk small{display:block;margin-top:3px;font:700 13.5px var(--f-teks);color:var(--dakwat-3)}
/* anak dipilih dari senarai: cip pilih anak dalam Laporan tidak perlu */
.ib3 [data-tab-kini="laporan"]>.pilih-anak-cip{display:none}
/* telefon: satu halaman pada satu masa */
@media (max-width:899.98px){
  .ib3[data-ib-mod="senarai"] .ib3__butiran{display:none}
  .ib3[data-ib-mod="butiran"] .ib3__senarai{display:none}
  .ib3[data-ib-mod="butiran"] .ib3__butiran{animation:ib3Masuk .24s cubic-bezier(.2,.8,.3,1)}
  .ib3[data-ib-mod="senarai"] .ib3__senarai{animation:ib3Balik .22s cubic-bezier(.2,.8,.3,1)}
}
@keyframes ib3Masuk{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes ib3Balik{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
/* tablet / desktop: senarai kiri + butiran kanan */
@media (min-width:900px){
  .ib3{display:grid;grid-template-columns:380px minmax(0,1fr);height:100dvh;overflow:hidden}
  .ib3__senarai{height:100dvh;overflow-y:auto;overscroll-behavior:contain;background:#fbf6ee;box-shadow:inset -2px 0 0 var(--garis)}
  .ib3__butiran{height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:calc(var(--atas) + 22px) 28px calc(var(--bawah) + 30px)}
  .ib3__balik{display:none}
  .ib3__kepala .ib2__tajuk{font-size:30px}
}
@media (min-width:1300px){.ib3{grid-template-columns:420px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.ib3 *{animation:none!important}}