/* SILA v2 — gaya dasar. Token warna memenuhi kontras WCAG 2.2 AA pada kedua tema. */
:root{
  --bg:#f5f6f2; --surface:#fff; --surface-2:#eef1ea;
  --ink:#16201a; --ink-2:#4a5a50;
  --line:#dce2d8; --field:#808d85;      /* 3,43:1 di atas putih — batas isian benar-benar terlihat */
  --green:#014123; --gold:#ad9c73; --gold-nav:#cbbb92;
  /* Latar menu dipisahkan dari --green. Di tema terang keduanya sama; di tema gelap
     tidak boleh sama, dan tanpa token tersendiri satu-satunya cara menggelapkannya
     adalah menggelapkan --green — yang juga mewarnai garis grafik, tombol bergaris,
     dan lencana. Lihat keterangannya di blok tema gelap. */
  --nav:#014123;
  /* Tombol utama dan cincin fokus TIDAK memakai --green dan --gold langsung.
     Keduanya diukur terhadap LATARNYA, dan latarnya berbeda di tiap tema:
     - --btn: hijau tua 11,79:1 di atas putih, tetapi hanya 1,41:1 di atas kartu
       gelap — tombolnya kehilangan bentuknya dan hanya tersisa tulisannya.
     - --fokus: emas 2,70:1 di atas putih, di bawah 3,0 yang diminta WCAG 2.2 untuk
       penanda fokus. Emas yang digelapkan sedikit lulus di ketiga latar sekaligus:
       putih 3,50 · latar halaman 3,22 · hijau menu 3,37. */
  --btn:#014123; --fokus:#9b8759;
  --minus:#8c2f2f;   /* merah uang, lebih tenang daripada --bad yang dipakai peringatan */
  --ok:#1d6b3f; --bad:#a32020; --warn:#835a00; --warn-bg:#fbf0d4; --info:#1c5b8a; --info-bg:#eaf2f8;
}
@media (prefers-color-scheme: dark){ :root{
  /* TANGGA PERMUKAAN DI TEMA GELAP DINAIKKAN, 4 Oktober 2026.
     Rasio kontras bukan ukuran yang cukup di sini: --line lama 1,41:1 terhadap kartu,
     sementara --line tema TERANG hanya 1,32:1 — lebih rendah, namun terlihat jelas.
     Sebabnya mata: pada luminans rendah, selisih yang sama terbaca jauh lebih samar.
     Karena itu tema gelap perlu tangga yang lebih lebar daripada tema terang untuk
     memberi kesan pemisahan yang setara. Kartu dinaikkan satu anak tangga dari latar,
     dan garisnya dinaikkan ke 1,86:1 — cukup untuk membuat bingkai kartu dan garis
     baris tabel kembali terbaca, tanpa menjadi kisi yang berisik. */
  --bg:#0e1410; --surface:#1b241e; --surface-2:#232e27;
  --ink:#e8efe9; --ink-2:#a9b8ae; --line:#3f4e44; --field:#78877e;
  --minus:#e59b9b;
  --ok:#5fd18c; --bad:#ff8d8d; --warn:#e9be5e; --warn-bg:#2b2413; --info:#7cc0f0; --info-bg:#15232d;
  /* 3,36:1 terhadap kartu gelap — tombolnya kembali terbaca sebagai tombol —
     sementara teks putih di atasnya tetap 4,95:1. Hijau yang lebih terang lagi
     membuat teks putihnya gagal, jadi inilah titik tengahnya. */
  --btn:#2a7f4d; --fokus:#ad9c73;
  /* MENU LEBIH GELAP DI TEMA GELAP.
     Dengan #014123 di kedua tema, urutan terangnya terbalik: di tema terang menu
     adalah benda paling gelap di layar (jangkar yang benar), di tema gelap ia menjadi
     yang paling TERANG — 1,58:1 di atas latar halaman dan 1,35:1 di atas kartu —
     sehingga navigasi bersinar lebih kuat daripada isi yang dilayaninya.
     #0a2419 mengembalikan urutannya: menu tidak lagi lebih terang daripada kartu,
     tetapi tetap jelas hijau, bukan hitam. Menggelapkannya sampai benar-benar gelap
     sempat dicoba dan ditolak — di situ panel hijaunya hilang sama sekali, dan itu
     justru satu-satunya unsur yang membuat aplikasi ini langsung dikenali.
     Teks putih di atasnya naik 11,79 → 16,42:1; emas menu 6,21 → 8,65:1. */
  --nav:#0a2419;
}}
/* SAKELAR TEMA MANUAL DIBUANG, 4 Oktober 2026.
   Berkas ini dulu memuat sembilan aturan `:root[data-theme="dark"]` — padahal tidak
   ada satu baris PHP pun yang pernah menyetel atribut itu. Seluruhnya kode mati, dan
   yang lebih buruk: TIDAK LENGKAP. `.alert` dan `.btn.danger` tidak punya
   padanannya, sehingga begitu sakelarnya benar-benar dibuat suatu hari, kotak
   peringatan akan tetap berlatar hijau muda di halaman gelap — dan tidak ada yang
   menyadarinya sampai ada yang mengeluh.
   SILA sekarang mengikuti setelan perangkat saja. Itu cukup untuk aplikasi sekolah,
   dan separuh aturan tema yang menganggur justru yang membuat berkas ini sulit
   dirawat. */

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:grid;grid-template-columns:230px minmax(0,1fr);overflow-x:clip}
body.bare{display:block}

/* Tautan lewati navigasi: 24 kali Tab sebelum isi halaman bukan navigasi yang bisa dipakai */
.lewati{position:absolute;left:-9999px}
.lewati:focus{left:8px;top:8px;z-index:99;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:10px;padding:8px 16px}

a{color:var(--info);text-underline-offset:2px}
:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:6px}

/* MENU TIDAK BOLEH MENENTUKAN TINGGI HALAMAN.
   Dulu `min-height:100vh` saja. Karena body adalah grid dua kolom, baris grid setinggi
   kolom TERPANJANG — dan menu berisi 48 tautan, ±1.300 px. Akibatnya SETIAP halaman
   setinggi 2.655 px, sama persis, berapa pun isinya: halaman Daftar Pendaftar yang
   isinya satu kotak saring 90 px diikuti 2.400 px latar kosong, dengan bilah gulir
   yang menjanjikan ada sesuatu di bawah sana. Tidak ada.
   align-self:start melepas menu dari tinggi baris, lalu ia menempel dan bergulir
   sendiri. Tinggi halaman kini ditentukan isinya. */
nav{background:var(--nav);color:#fff;padding:16px 12px;
  align-self:start;position:sticky;top:0;height:100vh;overflow-y:auto;
  /* Tanpa ini, gulir yang mentok di dasar menu diteruskan ke halaman di belakangnya —
     guru menggulir menu dan halamannya yang bergerak. */
  overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.28) transparent}
nav::-webkit-scrollbar{width:8px}
nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.28);border-radius:999px}
nav::-webkit-scrollbar-track{background:transparent}
nav .brand{color:#fff;font-size:17px;margin:4px 8px 16px}
/* Logo sekolah di kepala menu. Lebarnya yang dibatasi, bukan tingginya, supaya
   proporsinya tetap apa pun ukuran berkasnya kelak. Atribut width/height pada <img>
   wajib ada: tanpa keduanya menu melompat turun saat logonya selesai dimuat. */
nav .brand-logo{display:block;width:124px;height:auto;margin:0 0 8px}
/* Di ponsel menu dilipat, jadi kepala halaman harus pendek: logo 124 px menambah
   62 px sebelum judul halaman, lebih dari seperempat layar sebelum guru melihat apa
   pun yang bisa dikerjakan. Di sana logo berdampingan dengan namanya, bukan di atasnya. */
@media (max-width:760px){
nav .brand{display:flex;align-items:center;gap:8px;margin:0 2px 8px}
nav .brand-logo{width:64px;margin:0;flex:0 0 auto}
}
nav .brand span{color:var(--gold-nav);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
nav ul{list-style:none;margin:0;padding:0}
nav a{display:block;padding:8px 12px;border-radius:10px;color:#e8efe9;text-decoration:none;min-height:24px}
nav a:hover{background:rgba(255,255,255,.08)}
nav a[aria-current="page"]{background:var(--gold);color:#14210f;font-weight:600}
nav .akun{margin-top:16px;padding:8px;border-top:1px solid rgba(255,255,255,.18);
  color:var(--gold-nav);font-size:13px}
.tautan{background:none;border:0;color:#fff;text-decoration:underline;cursor:pointer;
  padding:4px 0;min-height:24px;font:inherit}

/* Lebar baca dibatasi. Di layar 1600 px, satu baris isian meregang sampai 1.500 px
   dan barisan kolom berisi kata pendek meninggalkan rongga besar di kanan — halaman
   terlihat belum selesai, bukan lapang. Tabel lebar tetap boleh menggulir di dalam
   .tbl, jadi batas ini tidak memotong data. */
main{padding:24px 24px 60px;min-width:0;max-width:1180px}
body.bare main{max-width:420px;margin:8vh auto}
/* Halaman keterangan: cukup lebar untuk tabel jadwal lima kolom dan dua kartu syarat
   berdampingan, tetapi tetap jauh di bawah lebar layar supaya barisnya tidak
   meregang. Jarak atasnya dikurangi: halaman panjang tidak perlu didorong 8vh. */
body.bare.lega main{max-width:860px;margin:32px auto}
h1{font-size:22px;margin:0 0 16px}
/* Satu irama untuk seluruh aplikasi: 32 px di atas judul bagian, 12 px di bawahnya.
   Sebelumnya jaraknya ditentukan per tempat, sehingga jarak judul ke kartunya
   berbeda-beda antar halaman — perbedaan yang tidak disadari orang tetapi membuat
   halaman terasa tidak disusun. */
h2{font-size:17px;margin:32px 0 12px}
h2:first-child,h1 + h2{margin-top:0}
/* TIGA JENJANG, BUKAN DUA. Judul bagian (di luar kartu) dan judul kartu (di dalamnya)
   dulu sama-sama 17 px semibold, jadi tidak ada yang menunjukkan mana yang memayungi
   mana. Di Beranda "Saldo kas & bank" (bagian) dan "Tugas saya" (judul kartu) terbaca
   setara, padahal yang satu menaungi yang lain. Judul kartu diturunkan satu langkah
   pada skala yang sudah ada — 15 px — sehingga jenjangnya menjadi 22 / 17 / 15 tanpa
   menambah satu pun ukuran baru. */
.kartu h2{font-size:15px;margin-bottom:12px}

.kartu{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:16px;margin:0 0 16px}
.kartu.sempit{max-width:380px}
/* Dokumen cetak: MoU dan Tata Tertib. Lebar baca dibatasi, dan ukurannya mengikuti
   skala yang sudah ada — dokumen resmi tidak perlu ukuran huruf tersendiri. */
.dokumen{max-width:46em;margin:0 auto}
.dokumen h2{margin:24px 0 8px}
.dokumen h3{margin:16px 0 8px}
.dokumen ol,.dokumen ul{margin:0 0 12px;padding-left:24px}
.dokumen li{margin:0 0 4px}
.dokumen p{margin:0 0 12px}
.dokumen table.ttd{width:100%;margin:24px 0 0}
.dokumen table.ttd td{vertical-align:top;padding:12px}
.isian-kosong{color:var(--bad);letter-spacing:1px}
.opsional{color:var(--ink-2);font-weight:400}
.cetak-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
@media print{
  /* Di atas kertas tidak ada layar yang perlu dibatasi lebarnya; margin halaman
     yang mengatur. Tanpa baris ini dokumen tercetak sebagai kolom sempit di tengah
     A4 dan panjangnya berlipat. */
  body.bare.lega main{max-width:none;margin:0}
  .dokumen{max-width:none}
  /* Pasal tidak dipotong di tengah bila masih muat satu halaman. */
  .dokumen h2,.dokumen h3{break-after:avoid-page}
  .dokumen table.ttd{break-inside:avoid-page}
}
/* Hitung mundur halaman depan SPMB. Angkanya memakai ukuran judul terbesar yang
   sudah ada (26px) — bukan ukuran baru: yang membuat halaman terasa ramai adalah
   jumlah ukuran yang berbeda, bukan besarnya satu angka. Ia dipusatkan karena
   berdiri sendiri; seluruh halaman lainnya rata kiri. */
.hitung-mundur{text-align:center}
.hitung-mundur .angka{margin:0 0 4px;line-height:1.1}
.hitung-mundur .angka strong{font-size:26px;display:block}
.hitung-mundur .angka span{color:var(--ink-2)}
.hitung-mundur .petunjuk{margin:0}
.petunjuk{color:var(--ink-2);margin:0 0 12px}
.kotak{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.angka{font-size:22px;font-weight:600}
.label{color:var(--ink-2);font-size:13px}

label{display:block;margin:8px 0 4px;font-size:13px;color:var(--ink-2)}
/* Tambahan singkat di dalam label, untuk keterangan yang terlalu kecil untuk pantas
   bersembunyi di balik tanda tanya. Lebih ringan daripada labelnya supaya tetap
   terbaca sebagai keterangan, bukan sebagai bagian dari namanya. */
label .label-ket{font-weight:400;opacity:.8}
input,select,textarea{width:100%;padding:8px 12px;border:1px solid var(--field);
  border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;min-height:38px}
/* Kotak centang tidak boleh ikut aturan width:100% di atas — kalau ikut, ia menjadi
   kotak selebar kolom yang mengambang di tengah, terpisah dari tulisannya. */
input[type="checkbox"],input[type="radio"]{width:auto;min-height:0;margin:0;padding:0}
/* Kotak centang dan tulisannya adalah satu kesatuan yang dibaca menyamping, bukan
   label di atas isian seperti label lainnya. */
label.centang{display:flex;align-items:flex-start;gap:8px;margin:12px 0;
  font-size:15px;color:var(--ink);cursor:pointer}
label.centang input{margin-top:4px;flex:0 0 auto}

/* text-decoration:none wajib: tombol yang sebenarnya <a> (tab Rapor, Unduh CSV,
   Batal) mewarisi garis bawah tautan, sehingga tombol aktif tampak hijau pekat SEKALIGUS
   bergaris bawah — dua penanda yang saling bertabrakan. */
/* [hidden] milik peramban adalah aturan berprioritas paling rendah, jadi setiap
   display: milik kelas penata mengalahkannya. Akibatnya tombol yang disembunyikan
   JavaScript — "Muat bank", "Terapkan penyaring" — tetap terlihat di seluruh halaman
   ber-data-auto, dan guru menekannya padahal penyaringnya sudah berlaku. Satu baris
   ini yang membuat .hidden benar-benar menyembunyikan. */
[hidden]{display:none !important}

.btn{margin-top:16px;padding:8px 16px;border:0;border-radius:10px;background:var(--btn);
  color:#fff;font:inherit;font-weight:600;cursor:pointer;min-height:38px;
  text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.btn.kecil{margin:0;padding:4px 12px;min-height:32px;font-size:13px}
/* Di layar sentuh, target 28 px terlalu kecil — WCAG 2.2 meminta minimal 24 px
   dan menganjurkan 44. Tombol Ubah dan Hapus bersebelahan di tabel sesi, jadi
   salah sentuh berarti menghapus honor, bukan sekadar salah halaman. */
@media (pointer: coarse){
  .btn.kecil{min-height:44px;padding:8px 16px}
  input.nilai4,input.nilai100,input.angka{min-height:44px}
}
/* Jarak antartombol sebaris: tanpa ini keduanya menempel dan jempol tidak punya
   ruang meleset. */
.sebaris{margin-right:8px}
.sebaris+.sebaris{margin-left:0}
.inline{display:inline}

.alert{padding:8px 12px;border-radius:10px;margin:0 0 12px}
.alert.ok{background:#e6f3ea;color:#14532d}
.alert.bad{background:#fbe6e6;color:#7a1414}
@media (prefers-color-scheme: dark){.alert.ok{background:#12301f;color:#a7e6c0}
  .alert.bad{background:#3a1616;color:#ffb4b4}}

/* Jarak bawah 16 px, sama dengan .kartu. Tanpa ini tabel yang diikuti kartu menempel
   tanpa celah sama sekali — di Beranda tabel saldo dan kartu grafik berimpit, dan
   keduanya terbaca sebagai satu benda yang bingkainya rusak di tengah. :last-child
   dikecualikan supaya tabel di dasar sebuah kartu tidak menyisakan ruang menggantung. */
.tbl{position:relative;overflow-x:auto;border:1px solid var(--line);border-radius:10px;
  background:var(--surface);margin:0 0 16px}
.tbl:last-child{margin-bottom:0}
/* position:relative wajib: label .sr di dalam sel memakai position:absolute, dan tanpa
   induk yang diposisikan ia lepas dari kotak gulir lalu melebarkan halaman — luapan
   mendatar yang hanya muncul di layar sempit dan tidak terlihat dari kodenya. */
table{border-collapse:collapse;width:100%;min-width:520px}
/* Tabel dua kolom — akun dan nilai — tidak perlu 520 px. Dipaksa selebar itu, kolom
   nilainya terdorong ke luar layar 390 px, dan laporan keuangan tanpa angkanya tidak
   ada gunanya. Dipakai pada Laporan ISAK 35. */
.tbl.sempit table{min-width:0}
th,td{padding:8px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
/* Kepala tabel ditandai GARIS, bukan blok warna. Isian abu penuh di setiap tabel
   membuat halaman terbaca sebagai tumpukan kotak; garis bawah 2 px memberi batas yang
   sama tegasnya dengan jauh lebih sedikit tinta. Huruf kapital kecil dan warna redup
   tetap membedakannya dari isi tabel. */
thead th{background:transparent;color:var(--ink-2);font-size:12px;font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;border-bottom:2px solid var(--field)}
th[scope="row"]{font-size:inherit;text-transform:none;letter-spacing:0;font-weight:600;
  background:var(--surface);position:sticky;left:0}
/* Garis bawah baris terakhir berimpit dengan bingkai .tbl — dua garis sejajar
   berjarak satu piksel, yang terbaca sebagai cacat, bukan sebagai batas. */
tbody tr:last-child > th,tbody tr:last-child > td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}

/* TABEL ANGKA — penekanannya terbalik tanpa ini.
   Pada tabel keuangan, kolom pertamanya hanyalah PENANDA barisnya ("2026-07",
   "110102 · Kas Operasional") sementara yang dicari mata adalah ANGKANYA. Dengan
   aturan umum di atas, penandanya tercetak tebal dan angkanya tidak — persis
   terbalik. Di Beranda itu membuat enam nama akun berteriak dan enam saldo berbisik.
   Dipakai sebagai .tbl.angka, bukan diterapkan ke semua tabel: pada daftar pendaftar
   atau daftar guru, nama orang memang penanda yang pantas ditebalkan. */
.tbl.angka th[scope="row"]{font-weight:400;color:var(--ink-2)}
.tbl.angka td.n{font-weight:600}
/* Warna uang negatif ditangani .neg yang sudah ada, dipasang money_html() —
   lihat di bawah. Kelas kedua untuk hal yang sama sempat ditulis di sini dan dibuang:
   dua nama untuk satu maksud persis itulah yang membuat berkas ini sulit dirawat. */
caption{text-align:left;padding:8px;color:var(--ink-2);font-size:13px}
.pill{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600}
.pill.tunai{background:var(--warn-bg);color:var(--warn)}
/* Latar ini dulu dipaku keras #e6eef5 sementara warna teksnya memakai token yang
   ikut berubah tema — di tema gelap hasilnya biru muda di atas biru muda, 1,68:1.
   Latarnya sekarang ikut token. */
.pill.transfer{background:var(--info-bg);color:var(--info)}
/* Penanda keadaan pada ATP. Latar dan teksnya memakai token yang sama dengan .alert,
   yang kontrasnya sudah diukur pada kedua tema — bukan warna baru yang ditebak. */
.pill.ok{background:#e6f3ea;color:#14532d}
.pill.bad{background:#fbe6e6;color:#7a1414}
@media (prefers-color-scheme: dark){.pill.ok{background:#12301f;color:#a7e6c0}
  .pill.bad{background:#3a1616;color:#ffb4b4}}
/* Penanda netral — dipakai untuk label yang menerangkan, bukan menilai (mis. "kelas 5"
   di Bank CP & TP). .pill sendiri tidak punya latar, jadi tanpa varian ia tak terlihat. */
.pill.netral{background:var(--line);color:var(--ink-2)}

/* Penjelasan tetap halaman: terlipat, bukan terpampang.
   Dua puluh halaman membawa tiga sampai lima paragraf penjelasan permanen di atas
   pekerjaannya, sehingga kepala sekolah membaca setengah layar sebelum sampai ke
   tombol. Kalimat-kalimatnya tidak dibuang — tiap satunya menjelaskan satu keputusan
   yang mahal bila salah — tetapi yang terlihat sekarang hanya satu barisnya.
   Peringatan BERSYARAT (.alert.bad / .alert.ok) tidak ikut dilipat: ia hanya muncul
   ketika keadaannya benar-benar terjadi, dan pada saat itu ia memang harus dibaca. */
details.ket{margin:0 0 16px;color:var(--ink-2);font-size:13px}
details.ket > summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;
  gap:8px;min-height:24px;padding:4px 0;color:var(--ink-2);font-weight:600}
details.ket > summary::-webkit-details-marker{display:none}
details.ket > summary::after{content:"▾";font-weight:400}
details.ket[open] > summary::after{content:"▴"}
details.ket > summary:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;border-radius:6px}
details.ket[open]{border-left:2px solid var(--line);padding-left:12px}
details.ket > *:not(summary){margin-top:4px}
/* Ikut tercetak dalam keadaan terbuka: di kertas tidak ada yang bisa mengkliknya,
   dan lembar rapat yang kehilangan keterangannya menjadi lembar angka tanpa konteks. */
@media print{ details.ket{display:block} details.ket > summary{display:none} }

/* Keterangan kecil di dalam sel tabel atau butir daftar. Berbeda dari .petunjuk, yang
   adalah paragraf tersendiri dan membawa jarak bawah. */
.hint{color:var(--ink-2);font-size:12px}

/* Kode CP (mis. PAI-A01) tidak boleh terpotong di tanda hubungnya — "PAI-" di satu
   baris dan "A01" di baris berikutnya terbaca seperti dua hal. */
.kode-cp{white-space:nowrap}

/* Daftar tujuan pembelajaran di bawah satu butir CP. */
ol.tp{margin:8px 0 0;padding-left:16px}
ol.tp li{margin-bottom:8px}

/* Beberapa tombol aksi dalam satu sel tabel: tetap sebaris, tetap boleh turun baris
   di layar sempit, dan tidak melebarkan tabelnya. */
.sebaris{display:inline-block;margin:0 2px 2px 0}
.kosong{padding:16px;color:var(--ink-2)}

/* KEADAAN KOSONG YANG BERDIRI SENDIRI.
   Dua belas halaman SPMB menjawab "belum ada yang bisa ditampilkan" dengan SATU BARIS
   teks kecil yang mengambang langsung di atas latar halaman, di bawah kotak saring,
   dengan ruang kosong luas di bawahnya. Halaman Jurnal menjawab hal yang sama dengan
   kartu bergaris. Keadaan yang sama, dua perlakuan — dan yang telanjang terbaca
   seolah sisa halamannya gagal dimuat, bukan seolah memang belum ada isinya.
   Satu bentuk untuk semuanya: kartu yang sama dengan kartu lain, tulisan dipusatkan,
   ruang nafas vertikal yang cukup untuk mengatakan "ini memang kosong, bukan rusak".
   Tingginya sengaja sederhana: tanpa ikon, tanpa ilustrasi — yang dibutuhkan
   panitia adalah jawaban, bukan hiasan. */
/* KELOMPOK ISIAN PADA FORMULIR PANJANG.
   Formulir Gelombang punya 18 isian bertumpuk dalam satu kolom, dengan empat lebar
   berbeda — teks selebar kartu, tanggal ±200 px, angka ±160 px, lalu satu isian uang
   kembali selebar kartu. Tepi kanannya berkelok turun sepanjang halaman, dan itu yang
   membuat formulir tampak dirakit, bukan dirancang. Tidak ada satu pun lebar itu
   dipilih; semuanya warisan lebar bawaan jenis isiannya.
   Sekarang lebarnya ditentukan GRID, jadi tidak ada lagi angka lebar yang diketik:
   kolom seragam, menyusut sendiri menjadi satu kolom di ponsel. <fieldset>/<legend>
   dipakai, bukan div+h3, karena itu yang membuat pembaca layar mengumumkan "Jendela
   waktu" saat fokus masuk ke tanggalnya. */
fieldset.grup{border:0;margin:0 0 24px;padding:0;min-width:0}
fieldset.grup:last-of-type{margin-bottom:16px}
fieldset.grup > legend{padding:0;font-size:13px;font-weight:600;color:var(--ink-2);
  text-transform:uppercase;letter-spacing:.04em}
/* Jumlah kolom DITETAPKAN, bukan auto-fit. Dengan auto-fit, tiap kelompok menjadi
   grid tersendiri dan jumlah kolomnya mengikuti jumlah isiannya: kelompok berisi 3
   isian mendapat kolom 312 px, yang berisi 5 mendapat 160 px, yang berisi 1 mendapat
   230 px. Hasilnya tepi kanan yang berkelok lagi — persis cacat yang sedang
   diperbaiki, hanya berpindah dari antar-isian ke antar-kelompok.
   Dengan jumlah kolom tetap, setiap isian di seluruh formulir punya lebar yang sama,
   dan kelompok yang isiannya sedikit sekadar menyisakan kolom kosong. */
.isian{display:grid;grid-template-columns:1fr;gap:0 16px;align-items:start}
@media (min-width:560px){.isian{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.isian{grid-template-columns:repeat(4,1fr)}}
/* Anak grid punya min-width:auto — isian bertulisan panjang akan melebarkan kolomnya
   dan merusak keseragaman yang baru saja dibuat. */
.isian > *{min-width:0}
/* Keterangan di bawah isian: selebar seluruh grup, tetapi dibatasi panjang barisnya.
   Sebelumnya keterangan jendela undangan membentang 980 px di bawah isian 200 px. */
.isian .petunjuk,.grup > .petunjuk{grid-column:1/-1;max-width:62ch;font-size:13px;
  margin:4px 0 12px}

/* BAGIAN YANG DILIPAT pada halaman keterangan SPMB.
   Halaman itu 2.783 px: lengkap, tetapi menuntut orang tua menggulir melewati syarat
   dan tahapan untuk sampai ke biaya. Tiap bagian kini dilipat, KECUALI jadwal —
   tanggal adalah hal yang paling dicari, dan menyembunyikannya hanya memindahkan
   pekerjaan ke orang yang membukanya.
   <details>, bukan JavaScript: bisa dibuka papan ketik, terbaca pembaca layar, dan
   tetap bekerja bila skrip gagal dimuat. Ringkasan satu baris di sebelah judulnya
   supaya orang tahu isinya tanpa membuka — daftar judul telanjang hanya memindahkan
   tebakan, bukan menghilangkannya. */
details.bagian{border-top:1px solid var(--line);margin:0 0 8px}
details.bagian > summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
  padding:16px 24px 16px 0;cursor:pointer;list-style:none;position:relative;
  min-height:24px}
details.bagian > summary::-webkit-details-marker{display:none}
.bagian-judul{font-size:17px;font-weight:600;color:var(--ink)}
.bagian-ringkas{font-size:13px;color:var(--ink-2)}
details.bagian > summary::after{content:"▾";position:absolute;right:4px;top:16px;
  color:var(--ink-2)}
details.bagian[open] > summary::after{content:"▴"}
details.bagian > summary:hover .bagian-judul{color:var(--btn)}
details.bagian > summary:focus-visible{outline:2px solid var(--fokus);outline-offset:2px;
  border-radius:6px}
/* Judul di dalam bagian turun satu jenjang: judul bagiannya kini ada di summary. */
details.bagian > :not(summary){margin-bottom:16px}
/* Begitu dibuka, ringkasannya mubazir — judulnya sudah terbaca di atas isinya. */
details.bagian[open] .bagian-ringkas{display:none}
/* SAAT DICETAK, SEMUANYA TERBUKA.
   Dibuktikan dengan mencetak PDF sungguhan: dengan <details> tertutup, "Akta
   kelahiran", "Trial class", dan "Pemeliharaan sarana" NOL kemunculan di dalam
   PDF-nya. Orang tua yang mencetak halaman ini mendapat lembar berisi judul tanpa
   isi — lebih buruk daripada halaman panjang yang hendak diperbaiki lipatan ini.
   ::details-content adalah pemilih yang benar di peramban baru; display dan
   content-visibility dipasang bersamanya untuk peramban yang belum mengenalnya. */
@media print{
  details.bagian > summary::after{content:""}
  details.bagian > summary{padding:8px 0}
  details.bagian .bagian-ringkas{display:none}
  details.bagian::details-content{content-visibility:visible;display:block}
  details.bagian > :not(summary){display:block!important;content-visibility:visible}
}

/* Sepuluh tahap seleksi. Dinomori dan diberi jarak supaya orang tua bisa menjawab
   "sekarang saya di mana" — alur sepanjang ini yang ditulis mengalir dalam satu
   paragraf tidak bisa dipakai untuk itu. */
ol.tahapan{margin:0 0 16px;padding-left:24px;color:var(--ink)}
ol.tahapan li{margin:0 0 8px;padding-left:4px}

.hampa{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:32px 24px;margin:0 0 16px;text-align:center;color:var(--ink-2)}
@media (max-width:760px){.hampa{padding:24px 16px}}

/* Judul kelompok menu. Mengikuti pengelompokan SILA v1 supaya letak menunya
   tidak perlu dipelajari ulang. */
/* Judul kelompok menu LEBIH REDUP daripada butirnya. Sebelumnya ia tebal dan
   kontrasnya lebih tinggi daripada tautan di bawahnya, sehingga tujuh judul kelompok
   bersaing dengan 35 tautan dan mata tidak punya tempat istirahat — padahal yang
   dicari orang selalu butirnya, bukan judulnya. Jaraknya yang memisahkan kelompok,
   bukan ketebalan hurufnya. */
nav .grp{color:var(--gold-nav);opacity:.72;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;padding:16px 8px 4px;margin:0;font-weight:400}
nav .grp:first-of-type{padding-top:0}

/* Menu lipat dengan kotak centang. Kotaknya disembunyikan secara visual tetapi tetap
   bisa difokus papan ketik, supaya menu bisa dibuka tanpa tetikus. */
/* display:none, bukan opacity:0. Dengan opacity:0 kotaknya tetap bisa difokus Tab,
   sementara satu-satunya labelnya tidak dirender di layar lebar — pengguna papan ketik
   kehilangan fokus ke kendali tak terlihat, dan pembaca layar mengumumkan kotak centang
   tanpa nama. Di ponsel ia disembunyikan secara visual tetapi TETAP bisa difokus,
   karena di sana labelnya ada dan menunya memang perlu dibuka. */
nav .menu-centang{display:none}
nav .menu-tombol{display:none}
nav .menu-isi{display:block}

@media (max-width:760px){
  body{grid-template-columns:minmax(0,1fr)}
  /* Di ponsel menu adalah bilah lipat di ATAS isi halaman, bukan kolom. Aturan
     menempel dan tinggi 100vh dari layar lebar harus dibatalkan seluruhnya; kalau
     tidak, bilah menu yang tertutup tetap memakan satu layar penuh. */
  nav{min-height:0;height:auto;position:static;overflow-y:visible}
  /* Menu tertutup secara bawaan. Tanpa ini tujuh kelompok dan sampai 35 tautan
     melipat di atas isi halaman, dan guru menggulir dua layar penuh sebelum
     melihat apa pun — setiap kali, termasuk saat mencatat presensi tiap pagi. */
  nav .menu-centang{display:block;position:absolute;opacity:0;width:1px;height:1px;margin:0}
  nav .menu-tombol{display:block;cursor:pointer;padding:8px 12px;min-height:44px;
    border-radius:10px;color:#e8efe9;background:rgba(255,255,255,.08);font-weight:600;
    line-height:24px}
  nav .menu-tombol::after{content:"▾";float:right}
  nav .menu-centang:checked ~ .menu-tombol::after{content:"▴"}
  nav .menu-centang:focus-visible ~ .menu-tombol{outline:2px solid var(--fokus);outline-offset:2px}
  nav .menu-isi{display:none}
  nav .menu-centang:checked ~ .menu-isi{display:block}
  nav ul{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
  nav a{min-height:44px;display:flex;align-items:center}
  nav .grp{width:100%;padding:8px 2px 0}
}

/* ---- Menu yang berbeda antara ponsel dan komputer ------------------------------
   Butir bertanda .hp-tidak hilang dari menu di layar sempit, dan catatan .hp-saja
   hanya muncul di sana. Keputusan Unang 4 Oktober 2026.

   display:none, BUKAN sekadar disembunyikan secara visual: butir yang tetap bisa
   difokus Tab tetapi tidak terlihat membuat pengguna papan ketik di ponsel kehilangan
   fokus ke tautan yang tak tampak — persis kekeliruan yang dulu terjadi pada kotak
   centang menu lipat.

   Sekali lagi: ini mengurangi yang perlu DIPINDAI, bukan yang boleh DIBUKA.
   Pembatasan yang sesungguhnya adalah izin peran di sisi server. */
.hp-saja{display:none}
@media (max-width:760px){
  /* Berlaku di SELURUH halaman, bukan hanya di menu: pintasan di kaki Beranda
     menunjuk halaman yang sama, dan menyembunyikannya di menu saja berarti
     menawarkannya lagi dua layar di bawah. */
  .hp-tidak{display:none}
  .hp-saja{display:block}
  nav .menu-catatan{margin:12px 2px 0;padding-top:12px;font-size:12px;line-height:1.45;
    color:var(--gold-nav);opacity:.8;border-top:1px solid rgba(255,255,255,.15)}
}
/* Di kertas pun tidak perlu: menu tidak ikut tercetak sama sekali. */
@media print{ .hp-saja{display:none!important} }

/* Kaki halaman pendaftaran. Dibedakan dari isi halaman dengan garis dan warna
   redup, bukan dengan kotak: ia dibaca saat orang berhenti, bukan saat bekerja. */
.kaki-spmb{margin:32px 0 0;padding-top:16px;border-top:1px solid var(--line);
  color:var(--ink-2);font-size:13px;line-height:1.6}
.kaki-spmb p{margin:0 0 8px}
.kaki-spmb p:last-child{margin-bottom:0}

/* Label yang hanya dibaca pembaca layar — dipakai pada kontrol di dalam baris tabel,
   yang secara visual sudah dijelaskan oleh header barisnya. */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* align-items:end, bukan center. Sel yang labelnya menjadi dua baris (karena ada
   keterangan "(freelance / pengganti)" atau tombol tanda tanya) jadi lebih tinggi;
   dengan center, isiannya terangkat belasan piksel di atas tetangganya dan barisnya
   tampak pecah. Dengan end, semua isian duduk pada garis yang sama. */
.baris-bayar{display:flex;gap:8px;align-items:end;flex-wrap:wrap}
/* Anak flex punya min-width:auto, yang berarti "selebar isi terpanjang". Pada <select>
   berisi "Seni Budaya dan Prakarya (SBdP)" itu memaksa lebar 439 px dan meluapkan
   halaman di layar ponsel. min-width:0 mengembalikannya agar boleh menyusut. */
.baris-bayar > div{min-width:0;flex:1 1 180px}
select{max-width:100%;text-overflow:ellipsis}
/* max-width:100% wajib. width:auto membuat isian selebar isinya — pada kolom
   "Kegiatan" itu 216 px di dalam sel 183 px, sehingga isiannya MENIMPA sel di
   sebelahnya. Tidak terlihat sampai dirender dan dilihat. */
.baris-bayar input,.baris-bayar select{width:100%;max-width:100%;min-width:0}
tfoot th,tfoot td{border-top:2px solid var(--line)}

fieldset.peran{border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin:12px 0}
fieldset.peran legend{font-size:13px;color:var(--ink-2);padding:0 8px}
.ceklis{display:inline-flex;align-items:center;gap:8px;margin:0 16px 8px 0;min-height:24px;color:var(--ink)}
.ceklis input{width:18px;height:18px;min-height:18px}

.btn.danger{background:var(--bad);color:#fff}
@media (prefers-color-scheme: dark){.btn.danger{color:#2a0d0d}}

.daftar-cp{padding:8px;max-height:420px;overflow-y:auto}
.butir{padding:8px 12px;border-bottom:1px solid var(--line)}
.butir:last-child{border-bottom:0}
.ceklis.kecil{display:flex;margin:4px 0 4px 24px;font-size:13px;align-items:flex-start}
.ceklis.kecil input{margin-top:4px;flex:0 0 auto}
/* min-height JANGAN menyeragamkan tinggi. Dengan 92px, textarea rows="2" dan rows="5"
   sama-sama 92px — ukuran kotak berhenti memberi petunjuk seberapa panjang jawaban
   yang diharapkan, dan "Penutup" diberi ruang sebanyak "Kegiatan inti". Sekarang
   tingginya mengikuti rows; min-height hanya menjaga agar tidak lebih kecil dari satu
   target sentuh. */
textarea{min-height:44px;resize:vertical}
h3{font-size:15px;margin:16px 0 8px}

/* Petak bulan pada Kalender Pendidikan. Hari sekolah dan bukan hari sekolah dibedakan
   latar, bukan hanya warna teks, supaya terbaca sekilas dan tetap terbaca saat dicetak
   hitam putih. */
table.bulan{table-layout:fixed}
table.bulan td{vertical-align:top;height:74px;padding:6px}
table.bulan td.sekolah{background:var(--surface)}
table.bulan td.libur{background:var(--line)}
table.bulan td.luar{background:var(--line);opacity:.45}
table.bulan .tgl{font-weight:600;font-size:13px}
table.bulan .acara{font-size:11px;margin-top:3px;padding:1px 4px;border-radius:4px;
  background:var(--warn-bg);color:var(--warn);word-break:break-word}
table.bulan .acara.jenis-masuk{background:#e6f3ea;color:#14532d}
table.bulan .acara.jenis-ujian,table.bulan .acara.jenis-kegiatan{background:var(--info-bg);color:var(--info)}
@media (prefers-color-scheme: dark){
  table.bulan .acara.jenis-masuk{background:#12301f;color:#a7e6c0}}
/* Di ponsel, SELURUH tujuh hari harus terlihat. Aturan sebelumnya memaksa lebar 640 px
   dan menggulung mendatar, sehingga di layar 390 px hanya Senin sampai Kamis yang
   tampak — Jumat, Sabtu, dan Minggu di luar layar, tanpa tanda apa pun bahwa mereka
   ada. Kalender yang tidak memperlihatkan satu minggu penuh bukan kalender.
   Judul acara diringkas menjadi pita warna; daftar lengkapnya tetap ada di bagian
   "Catatan bulan ini" di bawah petak. */
@media (max-width:760px){
  table.bulan{min-width:0}
  table.bulan td{height:46px;padding:3px 2px}
  table.bulan th{font-size:10px;padding:4px 2px}
  table.bulan .tgl{font-size:12px}
  table.bulan .acara{height:5px;margin-top:3px;padding:0;border-radius:3px;
    overflow:hidden;text-indent:-999em}
}

/* Daftar hadir murid di halaman Sesi: banyak kotak centang, dikelompokkan per kelas.
   Dibuat mengalir menyamping supaya satu kelas tidak menjadi 24 baris. */
details fieldset{border:1px solid var(--line);border-radius:10px;margin:8px 0;padding:8px 12px}
details legend{font-size:13px;color:var(--ink-2);padding:0 8px}
details fieldset label.centang{display:inline-flex;margin:4px 16px 4px 0}
details summary{cursor:pointer;padding:8px 0;font-size:15px}

/* Kolom isian angka di dalam tabel: rata kanan dan tidak melebar memenuhi sel,
   supaya tabel Anggaran tidak menjadi deretan kotak selebar layar. */
input.angka{width:130px;text-align:right;display:inline-block;min-height:30px;padding:4px 8px}

/* Sel nilai 1–4 pada grid penilaian harian: cukup untuk satu angka, tidak melebar
   memenuhi sel sehingga grid berisi 8 sasaran tetap muat dibaca. */
input.nilai4{width:44px;text-align:center;min-height:30px;padding:4px}

/* Isian nilai 0–100 di dalam tabel. */
input.nilai100{width:64px;text-align:right;min-height:30px;padding:4px 8px}
/* Tab yang tidak aktif: tetap tombol, tapi tidak bersaing perhatian dengan yang aktif. */
/* Tombol sekunder. Sebelumnya hanya latar transparan, sehingga <a class="btn pudar">
   mewarisi garis bawah tautan dan terbaca sebagai teks biasa di antara dua tombol
   penuh — tiga bobot visual untuk tiga aksi yang setara. Tepinya dipertegas memakai
   warna hijau, bukan garis abu, supaya ia terbaca sebagai tombol. */
.btn.pudar{background:var(--surface);color:var(--green);border:1px solid var(--green);
  text-decoration:none}
@media (prefers-color-scheme: dark){.btn.pudar{
  background:transparent;color:var(--gold-nav);border-color:var(--gold-nav)}}

/* Kartu login: dipotong dan dibagikan, jadi ukurannya tetap dan batasnya jelas. */
.kartu-pin-lembar{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.kartu-pin{border:1px dashed var(--ink-2);border-radius:10px;padding:12px;background:var(--surface)}
.kartu-pin .kp-nama{font-weight:600;font-size:15px}
.kartu-pin .kp-sub{color:var(--ink-2);font-size:12px;margin-bottom:8px}
.kartu-pin .kp-pin{font-size:26px;font-weight:700;letter-spacing:.18em;font-variant-numeric:tabular-nums}
.kartu-pin .kp-ket{color:var(--ink-2);font-size:12px;margin-top:8px}
@media print{
  .noprint{display:none!important}
  nav,.akun{display:none!important}
  .kartu-pin-lembar{grid-template-columns:repeat(3,1fr)}
  .kartu-pin{break-inside:avoid;background:#fff}
}

/* Grafik SVG di sisi server. Warnanya memakai token tema, jadi ikut berubah pada
   tema gelap tanpa aturan tersendiri. */
/* max-width:680px dibuang. Di dalam kartu selebar 1.018 px, grafik berhenti di 680 px
   dan menyisakan sepertiga kartu kosong di kanannya — kartu tampak separuh terisi.
   Lebar kartu sudah dibatasi main{max-width:1180px}, jadi tidak ada yang perlu
   ditahan lagi di sini. Nisbahnya tetap terjaga oleh preserveAspectRatio. */
.grafik{width:100%;height:auto;display:block;margin:8px 0}
.grafik .g-bar{fill:var(--green)}
.grafik .g-bar.g-neg{fill:#7a1414}
.grafik .g-label{font-size:12px;fill:var(--ink-2)}
.grafik .g-nilai{font-size:12px;fill:var(--ink);font-variant-numeric:tabular-nums}
.grafik .g-sumbu{font-size:12px;fill:var(--ink-2)}
.grafik .g-garis{fill:none;stroke:var(--green);stroke-width:2}
.grafik .g-titik{fill:var(--green)}
.grafik .g-nol{stroke:var(--line);stroke-width:1}
@media (prefers-color-scheme: dark){
  .grafik .g-bar,
  .grafik .g-titik{fill:var(--gold)}
  .grafik .g-garis{stroke:var(--gold)}}
/* Daftar tugas di beranda. */
ul.tugas{list-style:none;padding:0;margin:0}
ul.tugas li{padding:8px 0;border-bottom:1px solid var(--line)}
ul.tugas li:last-child{border-bottom:0}

/* Baris jumlah pada laporan keuangan. */
tr.tot td,tr.tot th{background:var(--line)}
/* Jangan sembunyikan <form>: seluruh tabel nilai, grid sumatif, dan daftar absensi
   berada DI DALAM form, sehingga aturan lama membuat Cetak menghasilkan kertas
   berisi judul saja. Yang disembunyikan cukup kontrolnya. Isian dicetak sebagai
   teks biasa supaya nilai yang sudah terisi ikut terbaca di kertas. */
@media print{
  nav,.akun,button,.btn,input[type=submit],input[type=file],.noprint{display:none!important}
  body{grid-template-columns:1fr}
  input,select,textarea{border:0;background:none;appearance:none;-webkit-appearance:none;
    padding:0;color:#000;font:inherit}
  .tbl{overflow:visible}
  table{min-width:0}
  /* Lembar rekap rapat penentuan dibaca di atas meja, satu anak per lembar. Tanpa
     aturan ini satu tabel terbelah dua halaman dan separuh nilai wawancara berpindah
     ke lembar anak berikutnya — persis saat orang sedang membandingkan angka. */
  table,tr,.alert{break-inside:avoid;page-break-inside:avoid}
  h2,h3{break-after:avoid;page-break-after:avoid}
  a[href]{text-decoration:none;color:#000}
}

/* ---- Keterangan kolom isian ---------------------------------------------------
   Pola dari SILA v1: tanda tanya kecil di sebelah label, mengembangkan satu kotak
   penjelasan. Bedanya, v1 memakai JavaScript; di sini <details> yang mengerjakannya,
   jadi tetap bekerja tanpa skrip dan bisa dibuka dengan papan ketik.

   Tanda tanya v1 berukuran 17 px. Di sini 24 px — batas minimum WCAG 2.2 untuk target
   sentuh — dan 44 px di layar sentuh. Target 17 px di ponsel berarti guru menekan
   tiga kali sebelum kena, lalu berhenti memakainya. */
/* Label di SILA adalah block, jadi tanpa aturan ini tombolnya turun ke baris sendiri —
   terlihat seperti kontrol tersendiri, bukan keterangan untuk kolom di bawahnya.
   :has() tidak ada di peramban sangat lama; kalau begitu tombolnya turun satu baris,
   jelek tetapi tetap berfungsi. */
label:has(+ .hlp){display:inline-block;vertical-align:middle}
.hlp{display:inline-block;margin-left:8px;vertical-align:middle}
/* TANDA TANYA DITENANGKAN, 4 Oktober 2026.
   Dulu lingkaran 24 px bergaris --field (kontras 3,43:1) dengan "?" tebal. Pada satu
   atau dua tempat itu pas; pada formulir RPP ada DUA PULUH TIGA, dan kerapatan itu
   membuatnya berhenti terbaca sebagai bantuan dan berubah menjadi bintik yang
   ditebar di sepanjang halaman — justru mengganggu pembacaan yang hendak dibantunya.
   Sekarang: lebih kecil, bergaris --line yang tipis, "?"-nya tidak tebal. Ia menjadi
   mencolok hanya saat disentuh kursor, difokus papan ketik, atau dibuka — yaitu saat
   seseorang memang sedang mencarinya.
   Tombolnya tetap 24 px bidang sentuhnya (padding tak terlihat) supaya tetap mudah
   ditekan di ponsel; yang mengecil hanya yang terlihat. */
.hlp > summary{display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border:1px solid var(--line);border-radius:999px;
  background:transparent;color:var(--ink-2);font-size:12px;font-weight:600;line-height:1;
  cursor:pointer;list-style:none;user-select:none;
  outline-offset:2px;box-sizing:content-box;padding:4px}
.hlp > summary::-webkit-details-marker{display:none}
.hlp > summary:hover{border-color:var(--info);color:var(--info);font-weight:700}
.hlp > summary:focus-visible{outline:2px solid var(--info);outline-offset:2px}
.hlp[open] > summary{background:var(--info);border-color:var(--info);color:var(--surface)}
/* Kotak penjelasan punya DUA bentuk.

   Tanpa JavaScript ia tetap di dalam aliran halaman: muncul di bawah label dan
   mendorong isian ke bawah. Jelek, tetapi terbaca dan bisa ditutup kembali — itu
   yang penting kalau skrip gagal dimuat.

   Dengan JavaScript (html.js-hlp), ia MENGAMBANG di atas halaman seperti di SILA v1:
   posisinya dihitung skrip, memakai position:fixed. fixed dipilih bukan absolute
   karena beberapa tanda tanya berada di dalam kepala tabel yang bergulir mendatar
   (Anggaran, Gaji) — kotak absolute di sana akan terpotong oleh overflow kotak
   gulirnya, dan guru hanya melihat separuh kalimat. */
.hlp-isi{display:block;margin:8px 0 2px;padding:8px 12px;
  border:1px solid var(--line);border-left:3px solid var(--info);
  border-radius:0 8px 8px 0;background:var(--info-bg);color:var(--ink);
  font-size:13px;font-weight:400;line-height:1.5;white-space:normal;max-width:60ch}
/* Kotaknya mewarisi gaya selnya. Tujuh tanda tanya berada di dalam <th> tabel, yang
   HURUF KAPITAL SEMUA, rata kanan, dan berjarak huruf lebar — kalimat penjelasan di
   sana terbaca seperti teriakan dan rata kanan. Terlihat hanya setelah dirender. */
.hlp-isi{text-transform:none;letter-spacing:normal;text-align:left;
  font-weight:400;font-variant-numeric:normal;vertical-align:baseline}
.hlp[open]{display:inline-block}
/* display:inline-block, BUKAN block. Dengan block, membuka keterangan membuat tanda
   tanya turun ke barisnya sendiri di bawah label — labelnya satu baris, tanda tanya
   baris berikutnya, lalu kotaknya. Tiga baris untuk satu kolom isian. */

html.js-hlp .hlp-isi{position:fixed;z-index:60;margin:0;
  width:320px;max-width:calc(100vw - 24px);
  border:1px solid var(--line);border-left:3px solid var(--info);
  border-radius:0 10px 10px 0;padding:12px 12px;
  box-shadow:0 6px 24px rgba(0,0,0,.18)}
@media (prefers-color-scheme: dark){html.js-hlp .hlp-isi{
  box-shadow:0 6px 24px rgba(0,0,0,.6)}}
/* Di ponsel kotak mengambang 320 px yang menempel pada tanda tanya mudah menutupi
   isian yang justru sedang dijelaskan, dan posisinya berubah-ubah. Di sana ia
   menjadi satu panel tetap di bawah layar — tempatnya selalu sama. */
@media (max-width:760px){
  html.js-hlp .hlp-isi{left:12px;right:12px;bottom:12px;top:auto;width:auto;
    max-width:none;border-radius:10px;border-left-width:3px;padding:16px 16px;font-size:15px}
  /* Tanda tanyanya ada di atas layar, panelnya di bawah — tanpa petunjuk ini
     guru tidak tahu cara menutupnya selain menggulir mencari tanda tanyanya. */
  html.js-hlp .hlp-isi::after{content:"Ketuk untuk menutup";display:block;
    margin-top:8px;color:var(--ink-2);font-size:12px}
}
@media (pointer: coarse){ .hlp > summary{width:44px;height:44px;font-size:15px} }
/* Tidak ikut tercetak: keterangan untuk mengisi, bukan untuk arsip. */
@media print{ .hlp{display:none!important} }

/* ---- Perbaikan desain 1 Okt: kepala halaman, baris jumlah, angka negatif ----------- */

/* Nama pengguna dan tombol Keluar pindah ke dalam menu lipat di ponsel. Sebagai baris
   tersendiri di kepala halaman, keduanya memakan 55 px sebelum judul halaman muncul —
   seperlima layar 844 px untuk informasi yang tidak dibutuhkan saat bekerja. */
nav .akun{margin-top:16px;padding-top:12px;border-top:1px solid rgba(255,255,255,.15)}

/* Baris jumlah pada laporan harus terbaca sebagai tingkatan, bukan sebagai baris biasa
   yang kebetulan tebal. Pada tabel 30+ baris, tebal saja tidak tertangkap mata. */
tfoot th,tfoot td,tr.tot th,tr.tot td{border-top:2px solid var(--ink-2);
  background:var(--surface-2);font-weight:700}
/* Subtotal satu tingkat di bawah jumlah besar: ditandai, tetapi tidak setebal itu. */
tr.sub td,tr.sub th{border-top:1px solid var(--ink-2);background:var(--surface-2)}

/* Angka negatif. Minus tipis di awal angka mudah terlewat saat membaca cepat di ponsel,
   dan akibatnya nyata: surplus terbaca sebagai defisit. Dipasang di tempat yang
   mencetaknya lewat kelas .neg, bukan otomatis — otomatis berarti menebak. */
/* Merah uang, bukan merah peringatan: --bad dipakai spanduk galat, dan nominal
   negatif yang rutin muncul tiap bulan tidak boleh sekeras pesan kesalahan.
   Aturan @media gelap yang dulu ada di sini dibuang — isinya persis sama dengan
   aturan terangnya, jadi ia tidak pernah mengubah apa pun; tokennya yang berganti
   nilai menurut tema. --minus diuji 4,5:1 di kedua tema. */
.neg{color:var(--minus)}

/* Kartu angka di ponsel. Empat kartu @ 110 px untuk empat angka — sering nol —
   memakan 440 px, lebih dari separuh layar 844 px, sebelum guru melihat apa pun yang
   bisa dikerjakan. Dua kolom membuat keempatnya muat dalam ~190 px. */
@media (max-width:760px){
  .kotak{grid-template-columns:1fr 1fr;gap:8px}
  .kotak > .kartu{padding:8px 12px;margin:0}
  .kotak .angka{font-size:17px}
  .kotak .label{font-size:12px}
  /* Formulir tetap satu kolom: dua kolom isian di 390 px tidak terbaca. */
  .kotak:has(input,select,textarea){grid-template-columns:1fr}
}

/* ---- Tabel yang berubah menjadi kartu di ponsel --------------------------------
   Dipakai pada tabel yang kolomnya terlalu banyak untuk digulung mendatar dengan
   berguna. KPI punya delapan kolom; di 390 px hanya dua yang terbaca, dan guru tidak
   punya petunjuk bahwa sisanya ada. Satu baris menjadi satu kartu, tiap sel memakai
   label dari atribut data-l.

   Tanpa JavaScript: hanya CSS dan satu atribut HTML. Di layar lebar tabelnya tetap
   tabel, karena membandingkan 40 guru berdampingan memang butuh tabel. */
@media (max-width:760px){
  .tbl.kartu-hp table{min-width:0}
  .tbl.kartu-hp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl.kartu-hp tr{display:block;border:1px solid var(--line);border-radius:10px;
    margin:0 0 8px;padding:8px 12px;background:var(--surface)}
  .tbl.kartu-hp td,.tbl.kartu-hp th{display:flex;justify-content:space-between;
    align-items:baseline;gap:12px;border:0;border-bottom:1px solid var(--line);
    padding:8px 0;text-align:left}
  .tbl.kartu-hp tr > *:last-child{border-bottom:0}
  .tbl.kartu-hp th[scope="row"]{font-size:17px;font-weight:700;padding-bottom:8px;
    border-bottom:1px solid var(--ink-2)}
  .tbl.kartu-hp td[data-l]::before{content:attr(data-l);color:var(--ink-2);
    font-size:12px;flex:1 1 auto}
  .tbl.kartu-hp td[data-l]{flex-direction:row}
  .tbl.kartu-hp td .hint{font-size:12px}
}


/* ---- Logo pada halaman masuk --------------------------------------------------
Halaman masuk adalah satu-satunya halaman yang dilihat sebelum orang tahu sistem
sekolah mana yang sedang dibuka, jadi logonya berwarna penuh dan berdiri sendiri
di atas formulir. */
.logo-masuk{text-align:center;margin:0 0 16px}
/* Judul "Masuk" rata kiri di atas logo yang di tengah membuat halaman tampak miring.
   Pada halaman telanjang (hanya login dan portal wali) semuanya dipusatkan. */
body.bare h1{text-align:center}
.logo-masuk img{width:220px;height:auto;max-width:100%}
.logo-masuk-sub{margin:8px 0 0;color:var(--ink-2);font-size:13px;
letter-spacing:.06em;text-transform:uppercase}
/* KOTAK PUTIH DI BELAKANG LOGO DIBUANG, 4 Oktober 2026.
   Dulu mode gelap ditambal begini:
       @media (prefers-color-scheme: dark){.logo-masuk img{background:#fff;...}}
   karena wordmark "LINIMASA" pada logo-warna berwarna hijau tua dan lenyap di atas
   latar gelap. Tambalan itu menukar satu cacat dengan cacat lain: kartu putih
   terang mengambang di halaman gelap, satu-satunya benda putih di layar, dan justru
   logonya yang paling menyilaukan.
   Sekarang berkasnya yang diganti — logo-putih di mode gelap — lewat logo_sekolah()
   di inc/bootstrap.php. Jangan mengembalikan latar putih di sini. */
/* Di ponsel, 220 px logo di atas formulir mendorong isian turun; 150 px cukup untuk
   mengenali sekolahnya. */
@media (max-width:760px){.logo-masuk img{width:150px}}

/* ---- Logo pada halaman publik SPMB --------------------------------------------
Orang tua tidak melihat menu, jadi tanpa ini tidak ada satu pun tanda sekolah pada
halaman yang meminta data anaknya. Lebih kecil daripada halaman masuk: di sini logo
mengiringi judul, bukan berdiri sendiri — yang ditunggu orang adalah formulirnya. */
.kepala-spmb{margin:0 0 16px}
/* Halaman publik SPMB memakai tata letak terpusat (body.bare: lebar 420 px, judul di
   tengah). Logo rata kiri di atas judul yang di tengah membuat kepala halaman tampak
   miring — kesalahan yang sama yang dulu diperbaiki pada halaman masuk. Dipusatkan
   hanya di sana; kalau suatu saat halaman SPMB dipakai dalam tata letak bermenu,
   logonya ikut rata kiri seperti judulnya. */
body.bare .kepala-spmb{text-align:center}
.kepala-spmb img{width:180px;height:auto;max-width:100%}
@media (max-width:760px){.kepala-spmb img{width:132px}}

/* Logo menu tidak boleh muncul di kertas laporan. Logo halaman masuk dan halaman
   SPMB justru harus ikut tercetak: orang tua mencetak bukti pendaftaran dan status
   seleksinya, dan lembar tanpa kop tidak ada gunanya sebagai bukti. */
@media print{nav .brand-logo{display:none!important}}


/* ---- Tahap pada formulir panjang -----------------------------------------------
Form RPP punya empat tahap dan 25 isian. Tanpa penanda, guru tidak bisa tahu apakah
kolom yang sedang diisi masih milik bagian yang sama — satu-satunya pembedanya hanya
judul yang sedikit lebih tebal, dan judul itu hilang dari pandangan begitu digulir.

Tiga penanda dipakai bersama supaya tetap terbaca walau satu di antaranya tidak
tersampaikan: garis kiri berwarna (menyatukan seluruh tinggi bagian), latar sedikit
berbeda, dan nomor tahap pada judulnya. Nomor penting karena urutannya bermakna —
backward design: tujuan, bukti, baru kegiatan. */
.tahap{border-left:3px solid var(--gold);background:var(--surface-2);
border-radius:0 10px 10px 0;padding:16px 16px;margin:0 0 24px;
border-top:1px solid var(--line);border-right:1px solid var(--line);
border-bottom:1px solid var(--line)}
/* Jarak 22px dan garis keliling memberi tahap sebuah PENUTUP, bukan hanya pembuka.
   Tanpa itu guru yang sedang mengisi kolom terakhir sebuah tahap tidak punya tanda
   bahwa tahapnya sudah berakhir. */
.tahap > h3:first-child{margin-top:0;display:flex;align-items:center;gap:8px;
font-size:17px;letter-spacing:.01em}
.tahap-no{display:inline-flex;align-items:center;justify-content:center;
width:24px;height:24px;flex:0 0 auto;border-radius:999px;
background:var(--green);color:#fff;font-size:13px;font-weight:700;line-height:1}
@media (prefers-color-scheme: dark){.tahap-no{
background:var(--gold);color:#14210f}}
/* Sub-judul di dalam tahap dibuat jelas BERBEDA jenisnya dari judul tahap, bukan
   sekadar lebih kecil. Sebelumnya 14px/700 melawan 16px/700 — beda dua piksel dengan
   ketebalan yang sama, sehingga satu-satunya pembeda adalah lingkaran angka, dan
   lingkaran itu mudah terlewat. Sekarang: huruf kapital kecil, berjarak huruf, warna
   lebih redup, dan garis tipis di atasnya sebagai pemisah antar sub-bagian. */
.tahap h4{margin:16px 0 8px;font-size:12px;font-weight:700;color:var(--ink-2);
text-transform:uppercase;letter-spacing:.08em;
border-top:1px solid var(--line);padding-top:12px}
.tahap > h4:first-of-type{border-top:0;padding-top:0;margin-top:12px}
.tahap > h4:first-of-type{margin-top:8px}
/* Isian di dalam tahap berlatar putih supaya terbaca di atas latar bagiannya. */
.tahap input,.tahap select,.tahap textarea{background:var(--surface)}

/* Bagian yang bisa dilipat di dalam formulir: rubrik indikator delapan isian, dan
   bagian lain yang tidak selalu diisi. Dilipat berarti 8 kotak menjadi satu baris
   sampai dibutuhkan. */
details.lipat{border:1px solid var(--line);border-radius:10px;background:var(--surface);
margin:12px 0;padding:0 12px}
details.lipat > summary{cursor:pointer;padding:8px 0;font-weight:600;min-height:44px;
display:flex;align-items:center;gap:8px;flex-wrap:wrap}
details.lipat[open] > summary{border-bottom:1px solid var(--line);margin-bottom:8px}
details.lipat > summary .hint{font-weight:400}
details.lipat > *:last-child{margin-bottom:12px}

/* Dua kolom untuk isian pendek di layar lebar. Dua puluh lima kotak satu per baris
   membuat form RPP setinggi 3.800 px; separuhnya muat berdampingan tanpa mengurangi
   keterbacaan, karena isiannya memang pendek. Di bawah 900 px tetap satu kolom. */
@media (min-width:900px){
  .duo{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
}
/* min-width:0 wajib pada anak grid: tanpa itu kolomnya melebar mengikuti isi
   terpanjang dan tabel/select di dalamnya meluapkan halaman. */
.duo > div{min-width:0}

/* Tahap yang dilipat: ringkasannya memuat judul tahap, jadi tidak boleh membawa
   bingkai sendiri seperti details.lipat — bingkai .tahap sudah ada di luarnya. */
details.polos > summary{cursor:pointer;display:flex;align-items:center;gap:8px;
flex-wrap:wrap;min-height:44px;list-style:none}
details.polos > summary::-webkit-details-marker{display:none}
details.polos > summary h3{margin:0}
details.polos > summary::after{content:"▾";color:var(--ink-2)}
details.polos[open] > summary::after{content:"▴"}
details.polos > summary:focus-visible{outline:2px solid var(--fokus);outline-offset:3px;border-radius:10px}

/* Kotak berisi satu kendali saja. Tanpa batas lebar, satu dropdown meregang
   selebar halaman dan terbaca sebagai kolom isian utama, bukan penyaring. */
.kotak-satu > div{max-width:420px}

/* Baris penyaring di kepala halaman (pilih gelombang, pilih kelas, pilih bulan).
   Tanpa wadah ia berdiri telanjang di atas latar halaman tepat di bawah judul,
   sementara seluruh isi lainnya duduk di dalam kartu putih — halaman yang paling
   kosong justru yang paling tampak belum jadi. Kendalinya juga dibatasi lebarnya:
   <select> selebar 1.000 px untuk kata "Gelombang 2" terbaca sebagai kolom isian
   utama, bukan penyaring.
   flex-wrap wajib: baris penyaring tumbuh tiap kali satu pilihan ditambahkan, dan
   tanpa pembungkusan ia meluapkan halaman di layar sempit. */
form.saring{background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:12px 16px;margin:0 0 16px}
/* Kendalinya dibatasi lebarnya, TETAPI tata letaknya dibiarkan apa adanya. Versi
   pertama aturan ini memakai flex supaya label dan isian berjajar — dan karena label
   di SILA adalah elemen block yang berdiri SEBELUM isiannya, flex memisahkan keduanya
   menjadi dua kotak bersebelahan di 40 halaman sekaligus. Perubahan yang benar di sini
   adalah yang paling sedikit: wadah dan batas lebar. */
form.saring select,form.saring input:not([type=checkbox]):not([type=radio]){max-width:280px}
form.saring .btn{margin-top:12px}

/* Lebar kolom isian mengikuti ISINYA, bukan lebar halaman.
   Kotak tanggal selebar 1.000 px untuk delapan angka, dan kotak "60" selebar itu
   untuk dua angka, membuat formulir terbaca sebagai deretan palang kosong — dan
   membuat orang ragu apakah ia salah membaca kolomnya. Batas ini TIDAK berlaku di
   dalam sel tabel (di sana lebarnya sudah diatur kolomnya) maupun pada textarea,
   yang memang perlu selebar mungkin. */
main form input[type=date],main form input[type=time],main form input[type=month]{max-width:200px}
main form input[type=number]{max-width:160px}
/* :not([type]) WAJIB ada. Hampir seluruh isian teks di SILA ditulis tanpa atribut
   type — peramban memperlakukannya sebagai text, tetapi pemilih [type=text] TIDAK
   mencocokkannya. Tanpa baris ini aturan di bawah tampak berlaku padahal tidak satu
   pun kolom nama atau tahun ajaran yang terkena, dan itu ketahuan hanya setelah
   halamannya dirender dan dilihat. */
main form input:not([type]),main form input[type=text],main form input[type=email],
main form input[type=tel],main form input[type=password],main form select{max-width:520px}
main form td input,main form td select,main form th input,main form th select{max-width:none}
/* ...dan TIDAK berlaku di dalam .isian. Di sana lebarnya sudah ditentukan sel grid,
   dan batas menurut jenis isian justru mengembalikan cacat yang dibereskan grid itu:
   tanggal berhenti di 200 px dan angka di 160 px di dalam sel selebar 230 px,
   sehingga tepi kanannya berkelok lagi. Batas di atas tetap berguna pada formulir
   yang belum dikelompokkan — karena itu dibatasi cakupannya, bukan dibuang. */
main form .isian input,main form .isian select{max-width:none}

/* Jam tiap sesi di formulir RPP. Tabel sempit, tidak perlu selebar halaman. */
.jam-sesi table{max-width:620px}
.jam-sesi input[type=time]{min-width:7.5em}
.jam-sesi input[type=number]{max-width:7em}

/* Sub-judul yang dulunya <summary> lipatan. Diberi garis atas supaya tetap terbaca
   sebagai awal bagian baru sekarang setelah lipatannya hilang — tanpa itu ia hanya
   satu baris tebal di tengah barisan kolom isian. */
h4.pemisah{margin:24px 0 8px;padding-top:12px;border-top:1px solid var(--line)}
h4.pemisah .hint{text-transform:none;letter-spacing:0;font-weight:400}

/* ---- Jadwal Pelajaran Mingguan -------------------------------------------------
   Tabel kelas x hari. table-layout:fixed supaya tujuh kolom hari berbagi lebar
   secara merata: tanpa itu satu hari yang kebetulan punya judul kegiatan panjang
   melebar sendiri dan enam hari lainnya menyusut jadi sekolom-sekolom sempit. */
.tombol-baris{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 16px}
.tombol-baris .petunjuk{margin:0;flex:1 1 240px}

.jadwal-minggu{margin-bottom:24px}
.jadwal-minggu h2{margin:4px 0 2px}
table.jadwal{table-layout:fixed;min-width:860px}
table.jadwal th,table.jadwal td{vertical-align:top;padding:6px;border:1px solid var(--line)}
table.jadwal thead th{font-size:12px;text-align:center}
table.jadwal tbody th{width:74px;font-size:13px}
.jadwal-butir{display:block;padding:6px;margin-bottom:6px;border-radius:6px;
  background:var(--line);text-decoration:none;color:inherit;font-size:12px;line-height:1.35}
.jadwal-butir:last-child{margin-bottom:0}
.jadwal-butir b{font-variant-numeric:tabular-nums}
.jadwal-butir span{display:block;font-weight:600}
.jadwal-butir em{display:block;font-style:normal}
.jadwal-butir small{display:block;color:var(--ink-2)}

/* Di ponsel tabel tujuh kolom tidak terbaca betapapun digeser. Dipecah jadi daftar
   per hari memakai data-l yang sudah ada di tiap sel. */
@media (max-width:640px){
  table.jadwal{min-width:0;display:block}
  table.jadwal thead{display:none}
  table.jadwal tbody,table.jadwal tr,table.jadwal th,table.jadwal td{display:block;width:auto}
  /* width:auto wajib diulang di sini: aturan .jadwal tbody th{width:74px} di atas
     lebih spesifik daripada pengelompokan display:block di baris sebelumnya, jadi
     tanpa ini nama kelas tampil sebagai kotak 74px di tengah baris kosong. */
  table.jadwal tbody th{border-bottom:0;background:var(--line);font-weight:700;width:auto}
  table.jadwal td:empty{display:none}
  table.jadwal td::before{content:attr(data-l);display:block;font-size:11px;
    text-transform:uppercase;letter-spacing:.06em;color:var(--ink-2);margin-bottom:4px}
}

@media print{
  @page{size:A4 landscape;margin:10mm}
  .jadwal-minggu{break-after:page}
  .jadwal-minggu:last-child{break-after:auto}
  table.jadwal{min-width:0;font-size:9px}
  .jadwal-butir{background:none;border:1px solid #bbb;break-inside:avoid}
}

/* Keterangan yang menempati posisi kolom isian tetapi bukan isian — "Guru penyusun"
   bagi guru biasa. Diberi tinggi yang sama dengan kotak isian di sebelahnya supaya
   barisnya tidak jadi miring. */
.label-mati{display:block;font-size:13px;color:var(--ink-2);margin-bottom:4px}
.nilai-mati{margin:0;min-height:38px;display:flex;align-items:center;font-weight:600}

/* Teks mesin — jalur berkas, nama tag, perintah.
   `overflow-wrap:anywhere` WAJIB, bukan kosmetik: jalur seperti
   /home/u627748860/domains/linimasa.sch.id/pembangun/masuk/ adalah satu kata tanpa
   spasi, dan di layar ponsel ia mendorong seluruh halaman melebar 256 px — seluruh
   halaman ikut bergeser mendatar, bukan hanya kotak itu. Ketahuan hanya karena
   pengukuran scrollWidth di 390 px; dengan mata di layar lebar ia tidak terlihat. */
code{overflow-wrap:anywhere;word-break:break-word}
/* .alert kerap memuat pesan dari sistem — jalur berkas, nama berkas, galat — yang
   juga satu kata panjang tanpa spasi. Alasannya sama persis. */
.alert{overflow-wrap:anywhere}