/* ═══════════════════════════════════════════════════════════════════════
   Sistem desain SCMS — disetujui 29 Agustus 2026.

   Aturan yang mengikat (jangan dilonggarkan tanpa alasan tertulis):
   1. Warna area kurikulum hanya boleh muncul sebagai penanda <= 16px.
      TIDAK PERNAH jadi latar baris, kartu, atau sel tabel.
   2. Tiap makna dikodekan bentuk DAN warna, supaya tetap terbaca saat
      dicetak hitam-putih dan oleh pengguna buta warna.
   3. Isi minimal 18px, kontras teks minimal 7:1.
   4. Sasaran ketuk minimal 44px — guru memakainya sambil berdiri.
   5. Istilah Montessori tidak diterjemahkan; terjemahan mendampingi.

   Dasar sengaja BUKAN krem: tembok kelas Montessori netral, kehangatan
   datang dari kayu beech materialnya. Itu sebabnya --rak berdiri sendiri.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --dasar:      #F3F4EF;
  --permukaan:  #FCFCFA;
  --tinta:      #262B26;   /* 13,05:1 di atas dasar */
  --tinta-lembut: #5A6058; /*  5,85:1 */
  --tinta-samar:  #868C82; /*  3,12:1 — hanya untuk label, bukan isi */
  --rak:        #C6B393;
  --rak-tipis:  #E1D7C4;
  --emas:       #8C6418;   /*  4,81:1 — digelapkan dari #9C7020 yang gagal ambang */

  /* Warna area kurikulum — dari kode warna kelas Montessori nyata */
  --area-practical:  #8A6A42;
  --area-sensorial:  #B85E75;
  --area-language:   #A07C10;
  --area-math:       #A93B33;
  --area-culture:    #2F5F8A;
  --area-character:  #5F4278;
  --area-enrichment: #2E6A61;

  --bahaya: #A93B33;
  --baik:   #3F6E45;

  --huruf-judul: Optima, "Gill Sans", "Gill Sans MT", "Trebuchet MS", system-ui, sans-serif;
  --huruf-isi: "Avenir Next", Avenir, "Segoe UI", Roboto, system-ui, sans-serif;
  --huruf-data: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--dasar);
  color: var(--tinta);
  font-family: var(--huruf-isi);
  font-size: 18px;              /* aturan 3 */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--huruf-judul); font-weight: 500; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: 34px; line-height: 1.15; }
h2 { font-size: 25px; }
p { margin: 0 0 1em; max-width: 66ch; }
a { color: var(--emas); text-underline-offset: 3px; }

/* Fokus keyboard harus selalu terlihat — guru sering pakai tab di komputer
   sekolah yang tetikusnya bermasalah. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--emas);
  outline-offset: 3px;
}

/* ── Rak: pita horizontal dipisah garis kayu tipis ────────────────────── */
.rak { border-bottom: 1px solid var(--rak-tipis); padding-bottom: 24px; margin-bottom: 32px; }

/* ── Nampan: didefinisikan garis dasar + udara, bukan kotak berbayang ─── */
.nampan { padding-bottom: 18px; border-bottom: 2px solid var(--rak-tipis); }

.label {
  font-family: var(--huruf-data);
  font-size: 11.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-lembut); margin: 0 0 6px; display: block;
}

/* ── Kendali ──────────────────────────────────────────────────────────── */
.kolom {
  width: 100%;
  min-height: 48px;                /* aturan 4 */
  padding: 11px 14px;
  font: inherit;
  color: var(--tinta);
  background: var(--permukaan);
  border: 1px solid var(--rak);
  border-radius: 4px;
}
.kolom:focus { border-color: var(--emas); }
.kolom[aria-invalid="true"] { border-color: var(--bahaya); border-width: 2px; }

.tombol {
  min-height: 48px;                /* aturan 4 */
  padding: 12px 22px;
  font: inherit; font-weight: 600;
  color: var(--dasar); background: var(--tinta);
  border: 1px solid var(--tinta); border-radius: 4px;
  cursor: pointer;
}
.tombol:hover { background: #000; }

.tombol-teks {
  min-height: 44px; padding: 10px 4px;
  font: inherit; color: var(--tinta-lembut);
  background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.tombol-teks:hover { color: var(--tinta); }

/* ── Galat: warna SAJA tidak cukup, selalu disertai kata ──────────────── */
.galat {
  color: var(--bahaya);
  font-size: 16px;
  /* margin bawah perlu: peringatan alergi berdiri tepat di atas judul area,
     dan tanpa jarak keduanya terlihat menempel. */
  margin: 8px 0 22px;
  padding-left: 14px;
  border-left: 3px solid var(--bahaya);
}

/* ── Halaman masuk ────────────────────────────────────────────────────── */
.masuk-bingkai {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 28px;
}
.masuk-kartu { width: 100%; max-width: 420px; }
.masuk-merek {
  font-family: var(--huruf-data); font-size: 11.5px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--tinta-lembut);
  padding-bottom: 18px; margin-bottom: 26px;
  border-bottom: 2px solid var(--rak);
}
.masuk-baris { margin-bottom: 18px; }
.masuk-kaki {
  margin-top: 26px; padding-top: 18px;
  border-top: 1px solid var(--rak-tipis);
  font-size: 15px; color: var(--tinta-lembut);
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}

/* ── Kerangka halaman dalam ───────────────────────────────────────────── */
.bingkai { max-width: 980px; margin: 0 auto; padding: 0 24px 72px; }
.kepala {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  padding: 20px 0; margin-bottom: 34px;
  border-bottom: 2px solid var(--rak);
}
.kepala-merek { font-family: var(--huruf-judul); font-size: 20px; }
.kepala-alat { display: flex; align-items: center; gap: 16px; }

/* ── Penanda area kurikulum (aturan 1: kecil, tidak pernah jadi latar) ── */
.penanda { width: 14px; height: 14px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── Daftar anak di kelas ─────────────────────────────────────────────── */
.kid-baris {
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  min-height: 56px;                /* aturan 4: sasaran ketuk lapang */
  padding: 10px 0;
  border-bottom: 1px solid var(--rak-tipis);
  color: var(--tinta); text-decoration: none;
}
.kid-baris:last-child { border-bottom: 0; }
.kid-baris:hover .kid-nama { text-decoration: underline; text-underline-offset: 3px; }
.kid-nama { font-size: 18px; font-weight: 600; }
.kid-usia { font-family: var(--huruf-data); font-size: 13px; color: var(--tinta-lembut); }

/* ── Baris pelajaran ──────────────────────────────────────────────────── */
.grup-nama {
  font-size: 15px; font-weight: 600; margin: 22px 0 2px; color: var(--tinta);
}
.grup-nama span { font-weight: 400; color: var(--tinta-lembut); }

.pelajaran {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rak-tipis);
}
.pelajaran:last-child { border-bottom: 0; }
.pelajaran-teks { flex: 1; min-width: 0; }

/* display:block WAJIB — kalau inline, nama Inggris dan Indonesia menempel
   jadi satu baris ("Pink TowerMenara Merah Muda"). Sudah kejadian sekali. */
.pelajaran-en { display: block; font-size: 17px; font-weight: 600; line-height: 1.25; }
.pelajaran-id { display: block; font-size: 14px; color: var(--tinta-lembut); }

.pelajaran-aksi { display: flex; gap: 2px; margin: 0; flex: none; }

/* Tombol status: 44px penuh supaya bisa diketuk sambil berdiri. */
.ketuk {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; border-radius: 50%;
  cursor: pointer; opacity: .34;
}
.ketuk:hover { opacity: .72; background: var(--permukaan); }
.ketuk.terpilih { opacity: 1; background: var(--permukaan); box-shadow: inset 0 0 0 1px var(--rak); }

/* ── Chip pilihan (status presensi) ───────────────────────────────────── */
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.chip {
  min-height: 44px;                /* aturan 4 */
  padding: 10px 16px;
  font: inherit; font-size: 15.5px;
  color: var(--tinta-lembut);
  background: transparent;
  border: 1px solid var(--rak);
  border-radius: 999px;
  cursor: pointer;
}
.chip:hover { color: var(--tinta); border-color: var(--tinta-lembut); }
.chip.on { background: var(--tinta); color: var(--dasar); border-color: var(--tinta); font-weight: 600; }

/* Varian chip berbasis radio — dipakai saat satu form perlu beberapa
   kategori sekaligus (catatan harian: suasana hati, makan, minum, toilet
   dalam satu kiriman). Tombol auto-submit ala presensi tidak cukup di
   sini karena tiap kiriman akan menghapus pilihan kategori lain. */
label.chip { position: relative; user-select: none; }
label.chip input[type="radio"] {
  position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer;
}
label.chip:has(input:checked) { background: var(--tinta); color: var(--dasar); border-color: var(--tinta); font-weight: 600; }
label.chip:has(input:focus-visible) { outline: 2px solid var(--emas); outline-offset: 3px; }

/* ── Tabel ────────────────────────────────────────────────────────────── */
.tbl-gulir { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 17px; }
th, td { text-align: left; padding: 12px 8px 12px 0; border-bottom: 1px solid var(--rak-tipis); }
td.num { font-family: var(--huruf-data); font-variant-numeric: tabular-nums; }

/* select & textarea ikut gaya kolom, termasuk tinggi ketuk 48px */
select.kolom { appearance: none; background-image: none; }
textarea.kolom { min-height: 88px; resize: vertical; }

/* ── Menu beranda ─────────────────────────────────────────────────────── */
.menu { display: grid; gap: 16px; margin: 0 0 34px; }
@media (min-width: 720px) { .menu { grid-template-columns: repeat(2, 1fr); } }
.menu-kartu {
  display: block;
  min-height: 56px;
  padding: 16px 18px;
  background: var(--permukaan);
  border: 1px solid var(--rak-tipis);
  border-left: 3px solid var(--rak);
  color: var(--tinta);
  text-decoration: none;
}
.menu-kartu:hover { border-left-color: var(--emas); }
.menu-judul { display: block; font-size: 18px; font-weight: 600; }
.menu-ket { display: block; font-size: 15px; color: var(--tinta-lembut); margin-top: 2px; }

/* ── Album pelajaran (material, presentasi, panduan di rumah) ─────────── */
.pelajaran-metrik {
  display: block; margin-top: 3px;
  font-family: var(--huruf-data); font-size: 12.5px; color: var(--tinta-lembut);
}
.album { margin: -4px 0 10px; }
.album > summary {
  min-height: 44px;                /* aturan 4 */
  display: flex; align-items: center;
  font-family: var(--huruf-data); font-size: 12px; letter-spacing: .08em;
  color: var(--tinta-lembut); cursor: pointer;
}
.album > summary:hover { color: var(--tinta); }
.album-isi {
  padding: 4px 0 14px 16px;
  border-left: 2px solid var(--rak-tipis);
}
.album-isi p { font-size: 16px; margin: 0 0 12px; }
.album-isi .label { margin-bottom: 2px; }
.metrik-isi form { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.metrik-isi span { display: block; }
.metrik-isi .kolom { min-width: 140px; }

/* ═══════════════════════════════════════════════════════════════════════
   KERANGKA APLIKASI — "Rak Kerja"
   Ditambahkan 30 Agustus 2026 setelah Papi Mika menilai tampilannya
   "seperti blog pribadi". Penilaian itu benar: riset desainnya dibuat untuk
   sebuah DOKUMEN, lalu tata letaknya dipakai untuk sebuah APLIKASI.
   Dokumen dibaca dari atas ke bawah; aplikasi dipindai dan dioperasikan.

   Yang berubah HANYA tata letaknya. Palet, huruf, penanda bentuk, sasaran
   ketuk 44px, dan aturan kontras tetap persis seperti yang disetujui.

   Sidebar gelap bukan sekadar gaya admin: ia rak kayu yang membingkai
   nampan-nampan terang tempat pekerjaan sesungguhnya terjadi.
   ═══════════════════════════════════════════════════════════════════════ */

body.app {
  display: grid;
  grid-template-columns: 252px 1fr;
  min-height: 100vh;
}

/* ── Rak samping ──────────────────────────────────────────────────────── */
.rak-samping {
  background: var(--tinta);
  color: var(--dasar);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 22px 0 16px;
}

.rak-merek {
  display: flex; align-items: center; gap: 11px;
  padding: 0 20px 20px;
  margin-bottom: 8px;
  color: var(--dasar); text-decoration: none;
  border-bottom: 1px solid rgba(243, 244, 239, .13);
}
/* Manik emas di atas garis rak — lambang yang sama dengan ikon aplikasinya. */
.rak-merek-tanda {
  width: 26px; height: 26px; flex: none; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #C8933A 0 42%, transparent 43%),
              linear-gradient(to bottom, transparent 0 68%, var(--rak) 68% 78%, transparent 78%);
}
.rak-merek b { display: block; font-family: var(--huruf-judul); font-size: 18px; font-weight: 500; letter-spacing: .01em; }
.rak-merek em {
  display: block; font-style: normal;
  font-family: var(--huruf-data); font-size: 10.5px;
  letter-spacing: .17em; text-transform: uppercase;
  color: rgba(243, 244, 239, .55);
}

.rak-nav { flex: 1; overflow-y: auto; padding: 6px 12px; }

.rak-label {
  font-family: var(--huruf-data);
  font-size: 10px; letter-spacing: .17em; text-transform: uppercase;
  color: rgba(243, 244, 239, .42);
  margin: 18px 0 6px; padding: 0 8px;
}
.rak-label:first-child { margin-top: 4px; }

.rak-tautan {
  display: flex; align-items: center; gap: 11px;
  min-height: 44px;                       /* aturan 4 tetap berlaku */
  padding: 9px 10px;
  margin-bottom: 1px;
  border-radius: 5px;
  color: rgba(243, 244, 239, .82);
  text-decoration: none;
  font-size: 15.5px;
  position: relative;
}
.rak-tautan svg { width: 18px; height: 18px; flex: none; fill: currentColor; opacity: .8; }
.rak-tautan:hover { background: rgba(243, 244, 239, .07); color: var(--dasar); }

/* Halaman yang sedang dibuka ditandai batang emas DAN latar — bukan warna
   saja, sejalan dengan aturan 2 sistem desain. */
.rak-tautan.kini {
  background: rgba(243, 244, 239, .1);
  color: #fff;
  font-weight: 600;
}
.rak-tautan.kini::before {
  content: ""; position: absolute; left: -10px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 0 3px 3px 0; background: #D9AC55;
}
.rak-tautan:focus-visible { outline: 2px solid #D9AC55; outline-offset: 2px; }

.rak-kaki { padding: 14px 12px 0; border-top: 1px solid rgba(243, 244, 239, .13); margin: 8px 12px 0; }
.rak-orang {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 6px 8px; border-radius: 5px;
  color: var(--dasar); text-decoration: none;
}
.rak-orang:hover { background: rgba(243, 244, 239, .07); }
.rak-inisial {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: #D9AC55; color: var(--tinta);
  font-family: var(--huruf-judul); font-size: 16px;
}
.rak-orang-teks { min-width: 0; }
.rak-orang-teks b {
  display: block; font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rak-orang-teks em {
  display: block; font-style: normal; font-size: 12px;
  color: rgba(243, 244, 239, .55);
}
.rak-kaki-aksi {
  display: flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0 8px;
}
.rak-kaki-aksi a, .rak-kaki-aksi button {
  min-height: 40px; padding: 8px 10px;
  font: inherit; font-size: 13px;
  background: none; border: 0; cursor: pointer;
  color: rgba(243, 244, 239, .6); text-decoration: none;
}
.rak-kaki-aksi a:hover, .rak-kaki-aksi button:hover { color: var(--dasar); }
.rak-kaki-aksi form { margin: 0; }

/* ── Ruang kerja ──────────────────────────────────────────────────────── */
.isi { min-width: 0; padding: 0 0 72px; }
.isi-kepala {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  padding: 30px 36px 20px;
  border-bottom: 1px solid var(--rak-tipis);
  background: var(--dasar);
}
.isi-induk {
  font-family: var(--huruf-data); font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-lembut); margin: 0 0 4px;
}
.isi-kepala h1 { font-size: 30px; margin: 0; }
.isi-badan { padding: 28px 36px 0; max-width: 1180px; }

.kabar {
  margin: 20px 36px 0;
  padding: 12px 16px;
  background: var(--permukaan);
  border-left: 3px solid var(--baik);
  color: var(--baik);
  font-size: 16px;
}

/* ── Ubin ringkasan ───────────────────────────────────────────────────── */
.ubin-baris {
  display: grid; gap: 16px; margin-bottom: 32px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.ubin {
  background: var(--permukaan);
  border: 1px solid var(--rak-tipis);
  border-top: 3px solid var(--rak);
  padding: 16px 18px 18px;
}
.ubin-judul {
  font-family: var(--huruf-data); font-size: 10.5px;
  letter-spacing: .15em; text-transform: uppercase;
  color: var(--tinta-lembut); margin: 0 0 8px;
}
.ubin-angka {
  font-family: var(--huruf-data); font-variant-numeric: tabular-nums;
  font-size: 34px; line-height: 1; color: var(--tinta); margin: 0;
}
.ubin-ket { font-size: 14px; color: var(--tinta-lembut); margin: 6px 0 0; }
.ubin.sorot { border-top-color: #C8933A; }

/* ── Panel ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--permukaan);
  border: 1px solid var(--rak-tipis);
  margin-bottom: 26px;
}
.panel-kepala {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 15px 20px;
  border-bottom: 1px solid var(--rak-tipis);
}
.panel-kepala h2 { font-size: 19px; margin: 0; }
.panel-badan { padding: 6px 20px 14px; }
.panel-kosong { padding: 26px 20px; color: var(--tinta-lembut); }

/* align-items:start supaya panel kosong tidak ikut memanjang mengikuti
   tetangganya — kolom kosong setinggi layar terlihat seperti halaman rusak. */
.dua-kolom { display: grid; gap: 26px; align-items: start; }
@media (min-width: 1000px) { .dua-kolom { grid-template-columns: 3fr 2fr; } }

/* ── Ponsel: rak jadi pita atas yang bisa digeser ─────────────────────── */
@media (max-width: 899px) {
  body.app { grid-template-columns: 1fr; }
  .rak-samping { position: static; height: auto; padding: 14px 0 10px; }
  .rak-merek { padding: 0 16px 12px; margin-bottom: 4px; }
  .rak-nav {
    display: flex; gap: 4px; overflow-x: auto; padding: 4px 12px;
    -webkit-overflow-scrolling: touch;
  }
  .rak-label { display: none; }
  .rak-tautan { white-space: nowrap; margin-bottom: 0; }
  .rak-tautan.kini::before { left: 0; right: 0; top: auto; bottom: -4px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
  .rak-kaki { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .isi-kepala { padding: 22px 20px 16px; }
  .isi-badan { padding: 20px 20px 0; }
  .kabar { margin: 16px 20px 0; }
}

/* ── Baris di dalam panel ─────────────────────────────────────────────── */
.baris-kelas {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; min-height: 58px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--rak-tipis);
}
.baris-kelas:last-child { border-bottom: 0; }
.baris-kelas-teks { min-width: 0; }
.baris-kelas-teks b { display: block; font-size: 16.5px; font-weight: 600; }
.baris-kelas-teks em {
  display: block; font-style: normal; font-size: 14px; color: var(--tinta-lembut);
}

.tombol-kecil {
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 8px 14px;
  font-size: 14.5px; font-weight: 600;
  color: var(--tinta); background: var(--dasar);
  border: 1px solid var(--rak); border-radius: 4px;
  text-decoration: none; white-space: nowrap;
}
.tombol-kecil:hover { border-color: var(--tinta-lembut); background: #fff; }

/* Panel yang dipakai sebagai pembungkus area kurikulum tidak perlu garis
   bawah ganda dari .rak lama. */
.panel > .grup-nama:first-child { margin-top: 14px; }

/* Di layar HP, minmax(190px) membuat dua kolom ubin melebihi lebar layar dan
   memicu geser horizontal — cacat yang langsung terasa murahan. Di bawah
   520px ubin dipaksa satu kolom. */
@media (max-width: 520px) {
  .ubin-baris { grid-template-columns: 1fr; }
  .isi-kepala h1 { font-size: 26px; }
}

/* Jaring pengaman: badan halaman tidak boleh pernah bergeser mendatar. */
body.app { overflow-x: hidden; }
.isi-badan > * { max-width: 100%; }

/* min-width:0 WAJIB pada anak grid.
   Bawaannya `auto`, sehingga strip navigasi ponsel yang panjang MEMAKSA lebar
   kolom grid melebihi layar. Digabung dengan overflow-x:hidden, akibatnya
   tombol "Presensi" terpotong dan tidak bisa disentuh sama sekali. */
.rak-samping { min-width: 0; }
.rak-nav { min-width: 0; max-width: 100%; }