/* ==========================================================================
 *  style.css — Papan Progres Belajar
 * ==========================================================================
 *  DUNIA VISUAL: "Papan Keberangkatan".
 *  Hari sekolah dibaca seperti papan informasi stasiun — satu baris menyala
 *  SEKARANG, sisanya menunggu giliran, angka berbaris di kolom tetap.
 *
 *  Tiga aturan yang mengikat seluruh file ini:
 *
 *  1. ATURAN KUNING HANYA BERARTI SEKARANG.
 *     --sekarang (#FFC400) tidak pernah dipakai sebagai warna merek, tombol,
 *     atau hiasan. Ia hanya menandai hal yang sedang berlangsung: kelas yang
 *     sedang jalan dan tampilan yang sedang dibuka. Aksi utama memakai plat
 *     tinta pekat, bukan kuning.
 *
 *  2. ATURAN SATU TANGGA NETRAL.
 *     Seluruh abu di aplikasi ini berasal dari --n-0 … --n-90. Tidak ada
 *     rgba() abu-abu dadakan, tidak ada #ccc di tengah komponen.
 *
 *  3. ATURAN JARAK MILIK INDUK.
 *     Jarak antar bagian selalu berasal dari `gap` milik induknya, tidak
 *     pernah dari margin anaknya. Ini yang mencegah aturan padding/margin
 *     saling membatalkan saat komponen dipindah.
 *
 *  Urutan berkas:
 *    1. Token          6. Pita & kepala pita
 *    2. Dasar & reset  7. Baris papan
 *    3. Primitif       8. Jalur mapel (elemen signature)
 *    4. Cangkang       9. Modul isi
 *    5. Navigasi      10. Keadaan · 11. Halaman masuk · 12. Gerak
 * ========================================================================== */


/* ==========================================================================
 *  1. TOKEN
 * ========================================================================== */

:root {

  /* ---- Tangga netral: SATU-SATUNYA sumber abu di aplikasi ini ---------- */
  --n-0:  #FFFFFF;
  --n-05: #F6F8F9;
  --n-10: #EDF0F2;
  --n-20: #E7EAEC;
  --n-30: #DBE0E3;
  --n-40: #C4CBD0;
  --n-50: #77828C;
  --n-60: #55636D;
  --n-70: #354049;
  --n-80: #24313B;
  --n-90: #0D1721;

  /* ---- Peran permukaan ------------------------------------------------ */
  --papan:        var(--n-20);   /* latar halaman — panel baja berlapis bubuk */
  --papan-dalam:  var(--n-30);   /* lapisan tertanam: kepala tabel, alur bilah */
  --lembar:       var(--n-05);   /* permukaan yang dibaca */
  --lembar-atas:  var(--n-0);    /* permukaan yang menempel (kepala, bilah bawah) */
  --garis:        var(--n-40);   /* garis rambut 1px — pemisah utama */
  --garis-tegas:  var(--n-50);   /* garis yang perlu lebih terbaca */
  --tinta:        var(--n-90);   /* teks utama */
  --tinta-sedang: var(--n-70);   /* teks pendukung */
  --tinta-samar:  var(--n-60);   /* label mikro & metadata */

  /* ---- Aksen tunggal: HANYA berarti "sedang berlangsung" ---------------
     Kuning adalah bidang tetap, bukan peran permukaan: ia sama pekatnya di
     terang maupun gelap. Karena itu teks dan garis di atasnya ditulis
     sebagai nilai tetap, bukan var(--n-90) yang ikut berbalik — kalau ikut
     berbalik, di mode gelap tulisannya jadi tulang di atas kuning (1,4:1). */
  --sekarang:        #FFC400;
  --sekarang-teks:   #0D1721;
  --sekarang-teks-2: #3F464E;
  --sekarang-tepi:   #0D1721;

  /* ---- Semantik. Setiap warna di sini selalu ditemani label teks. ------ */
  --tepat:     #0A6E4E;  --tepat-bid:  #DBEFE6;   /* hadir · selesai · nilai baik */
  --tunda:     #8F4E00;  --tunda-bid:  #F6E7D2;   /* izin · segera · nilai cukup  */
  --lewat:     #B3221F;  --lewat-bid:  #F7DEDD;   /* alpa · belum · nilai kurang  */
  --kabar:     #10577E;  --kabar-bid:  #DAE9F2;   /* sakit · info · pengumuman    */

  /* ---- Cincin fokus. Tinta di terang, tulang di gelap. ----------------- */
  --fokus: var(--n-90);

  /* ---- Nilai yang tidak punya tempat di tangga netral ------------------ */
  --kilau: rgba(255, 255, 255, .38);   /* sapuan pada rangka memuat */
  --tirai: rgba(13, 23, 33, .55);      /* latar di belakang dialog  */
  --bayang-dialog: 0 12px 32px rgba(13, 23, 33, .22), 0 2px 6px rgba(13, 23, 33, .12);

  /* ---- Tipografi ------------------------------------------------------ */
  --f-papan: 'Barlow Condensed', 'Roboto Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-isi:   'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Tangga modular 1,25× berangkat dari 16px. Tujuh langkah, tidak lebih. */
  --t-xs:   12px;   /* label mikro berhuruf kapital */
  --t-sm:   14px;   /* metadata, sel padat */
  --t-base: 16px;   /* teks isi — lantai baca, tidak pernah mengecil */
  --t-md:   20px;   /* judul baris & angka sedang */
  --t-lg:   25px;   /* nama pita */
  --t-xl:   31px;   /* angka besar */
  --t-2xl:  39px;   /* angka papan utama */

  --l-rapat:  1.15;
  --l-judul:  1.25;
  --l-isi:    1.6;

  --j-papan:  0.06em;   /* jarak huruf untuk label kapital */
  --j-judul: -0.01em;

  /* ---- Ruang: basis 4, irama 8 ---------------------------------------- */
  --s-1:  4px;   --s-2:  8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;   --s-6: 24px;   --s-8: 32px;  --s-10: 40px;
  --s-12: 48px;  --s-16: 64px;

  /* ---- Bentuk: tiga tingkat, semuanya bersudut rapat ------------------- */
  /* Papan informasi tidak punya pil. Yang bisa disentuh dibedakan oleh
     ukuran target dan reaksi tekan, bukan oleh sudut membulat penuh. */
  --r-1:  3px;   /* plat kode, tanda status */
  --r-2:  6px;   /* baris, tombol, kotak isian */
  --r-3: 10px;   /* pita bersisi (tablet ke atas) */
  --r-siku: 0;   /* tepi yang menyentuh tepi layar */
  --r-bulat: 99px; /* bukan langkah tangga — ini lingkaran sungguhan */

  /* ---- Ukuran tetap --------------------------------------------------- */
  --tinggi-kepala: 56px;
  --tinggi-bawah:  60px;
  --lebar-rel:     72px;
  --lebar-bilah:  232px;
  --lebar-isi:   1440px;
  --sentuh:        44px;   /* target sentuh minimum */

  /* ---- Gerak ---------------------------------------------------------- */
  --e-masuk: cubic-bezier(.16, .84, .44, 1);   /* cepat di awal, melambat  */
  --e-keluar: cubic-bezier(.55, 0, .85, .35);
  --d-kecil:  160ms;
  --d-sedang: 220ms;
  --d-tata:   320ms;

  --lapis-kepala: 40;
  --lapis-bawah:  45;
  --lapis-modal:  60;

  color-scheme: light;
}

/* --------------------------------------------------------------------------
 *  Mode gelap. Hanya token yang ditulis ulang — tidak ada satu pun kelas
 *  komponen yang di-override di sini. Itu syarat sistem token yang jujur.
 *  Nada terang dibalik perannya: --n-0 menjadi yang paling gelap.
 * ------------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --n-0:  #070D13;
    --n-05: #0D1720;
    --n-10: #132029;
    --n-20: #0A1219;
    --n-30: #16232D;
    --n-40: #2B3A45;
    --n-50: #55697A;
    --n-60: #8698A4;
    --n-70: #B3C2CC;
    --n-80: #D6E0E7;
    --n-90: #EEF3F6;

    --papan:       #0A1219;
    --papan-dalam: #16232D;
    --lembar:      #0F1A23;
    --lembar-atas: #131F29;

    --tepat: #45C298;  --tepat-bid: #0C2B22;
    --tunda: #DFA149;  --tunda-bid: #2E210E;
    --lewat: #F0817A;  --lewat-bid: #331617;
    --kabar: #64B0DC;  --kabar-bid: #0D2432;

    --fokus: var(--n-90);
    --kilau: rgba(255, 255, 255, .07);
    --tirai: rgba(0, 0, 0, .7);
    --bayang-dialog: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);

    color-scheme: dark;
  }
}


/* ==========================================================================
 *  2. DASAR & PERMUKAAN PERAMBAN
 * ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Jangkar tidak boleh mendarat di balik kepala yang menempel. */
  scroll-padding-top: calc(var(--tinggi-kepala) + var(--s-4));
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--papan);
  color: var(--tinta);
  font-family: var(--f-isi);
  font-size: var(--t-base);
  line-height: var(--l-isi);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

img, svg { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

/* Elemen yang disembunyikan lewat atribut tidak boleh dihidupkan
   kembali oleh aturan display mana pun di bawahnya. */
[hidden] { display: none !important; }

/* --- Permukaan yang tidak kita gambar sendiri, tetap milik sistem ini --- */

::selection { background: var(--sekarang); color: var(--sekarang-teks); }

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}
/* Di atas plat tinta pekat, cincin tinta tidak terlihat — dibalik jadi
   permukaan. Tokennya sudah berbalik sendiri di mode gelap, jadi tidak ada
   blok gelap tambahan di sini. */
.tombol--tinta:focus-visible { --fokus: var(--n-05); }

* { scrollbar-width: thin; scrollbar-color: var(--garis-tegas) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--garis-tegas);
  border: 3px solid var(--papan);
  border-radius: var(--r-bulat);
}

/* Angka yang mungkin dibandingkan antar baris TIDAK BOLEH bergoyang. */
.angka,
table, .baris-jam, .nilai-besar, .jalur-nilai, .kel-skor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* --- Utilitas ---------------------------------------------------------- */

.khusus-pembaca {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.lompat {
  position: absolute; left: var(--s-3); top: var(--s-3);
  z-index: 100;
  transform: translateY(calc(-100% - var(--s-6)));
  background: var(--tinta); color: var(--n-05);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-2);
  font-weight: 700; font-size: var(--t-sm);
  text-decoration: none;
  transition: transform var(--d-kecil) var(--e-masuk);
}
.lompat:focus-visible { transform: translateY(0); }


/* ==========================================================================
 *  3. PRIMITIF
 * ========================================================================== */

/* --- Label mikro: suara papan, huruf kapital, berjarak ------------------ */
.label {
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  line-height: var(--l-rapat);
  color: var(--tinta-samar);
}

/* --- Plat kode mapel: identitas jalur yang tidak bergantung warna ------- */
.plat {
  --warna-render: var(--warna, var(--tinta-sedang));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  padding: 0 var(--s-2);
  border: 1.5px solid var(--warna-render);
  border-radius: var(--r-1);
  color: var(--warna-render);
  background: transparent;
  font-family: var(--f-papan);
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
}
.plat--isi {
  background: var(--warna-render);
  color: var(--n-0);
  border-color: var(--warna-render);
}

/* Di mode gelap garis jalur perlu dinaikkan supaya tetap lolos kontras. */
@media (prefers-color-scheme: dark) {
  .plat, .jalur-baris { --warna-render: color-mix(in srgb, var(--warna, #888) 55%, #FFFFFF); }
  .plat--isi { color: var(--n-0); }
}
@supports not (color: color-mix(in srgb, red 50%, white)) {
  @media (prefers-color-scheme: dark) {
    .plat, .jalur-baris { --warna-render: var(--warna, #888); }
  }
}

/* --- Tanda status: warna SELALU berpasangan dengan teks ----------------- */
.tanda {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}
.tanda::before {
  content: '';
  width: 7px; height: 7px;
  flex: none;
  background: currentColor;
}
/* Bentuk penanda berbeda per status — kanal kedua di samping warna. */
.tanda--tepat  { background: var(--tepat-bid); color: var(--tepat); }
.tanda--tepat::before  { border-radius: var(--r-bulat); }
.tanda--tunda  { background: var(--tunda-bid); color: var(--tunda); }
.tanda--tunda::before  { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tanda--lewat  { background: var(--lewat-bid); color: var(--lewat); }
.tanda--lewat::before  { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.tanda--kabar  { background: var(--kabar-bid); color: var(--kabar); }
.tanda--kabar::before  { border-radius: var(--r-siku); }
.tanda--diam   { background: var(--papan-dalam); color: var(--tinta-samar); }
.tanda--diam::before   { background: none; border: 1.5px solid currentColor; border-radius: var(--r-bulat); }
.tanda--sekarang {
  background: var(--sekarang);
  color: var(--sekarang-teks);
  border: 1px solid var(--sekarang-tepi);
}
.tanda--sekarang::before { border-radius: var(--r-bulat); }

/* --- Tombol ------------------------------------------------------------ */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: var(--sentuh);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--garis);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
  color: var(--tinta-sedang);
  font-size: var(--t-sm);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--d-kecil) var(--e-masuk),
    border-color var(--d-kecil) var(--e-masuk),
    color var(--d-kecil) var(--e-masuk),
    transform 100ms var(--e-masuk);
}
.tombol:hover { background: var(--papan-dalam); color: var(--tinta); border-color: var(--garis-tegas); }
.tombol:active { transform: scale(.985); }
.tombol:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.tombol svg { width: 18px; height: 18px; flex: none; }

/* Aksi utama = plat tinta pekat. Sengaja BUKAN kuning: lihat Aturan Kuning. */
.tombol--tinta {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--n-05);
}
.tombol--tinta:hover { background: var(--n-80); border-color: var(--n-80); color: var(--n-05); }

.tombol--bahaya { color: var(--lewat); }
.tombol--bahaya:hover { background: var(--lewat-bid); border-color: var(--lewat); color: var(--lewat); }

.tombol--ikon { min-width: var(--sentuh); padding: var(--s-2); }

.tombol--halus { }   /* alias yang dipakai login.js — gaya dasar sudah cukup */

/* --- Kotak isian ------------------------------------------------------- */
.isian {
  min-height: var(--sentuh);
  padding: var(--s-2) var(--s-8) var(--s-2) var(--s-3);
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-2);
  background-color: var(--lembar-atas);
  color: var(--tinta);
  font-size: var(--t-sm);
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6D77' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-3) center;
  background-size: 16px;
  cursor: pointer;
}
.isian:hover { border-color: var(--tinta-samar); }


/* ==========================================================================
 *  4. CANGKANG
 * ========================================================================== */

.cangkang {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'kepala'
    'papan';
  min-height: 100vh;
  min-height: 100dvh;
}

.papan-kepala {
  grid-area: kepala;
  position: sticky;
  top: 0;
  z-index: var(--lapis-kepala);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: calc(var(--tinggi-kepala) + env(safe-area-inset-top));
  padding:
    env(safe-area-inset-top)
    max(var(--s-4), env(safe-area-inset-right))
    0
    max(var(--s-4), env(safe-area-inset-left));
  background: var(--lembar-atas);
  border-bottom: 1px solid var(--garis);
}

.papan {
  grid-area: papan;
  min-width: 0;
  padding-bottom: calc(var(--tinggi-bawah) + env(safe-area-inset-bottom) + var(--s-6));
}

/* Arus utama dan kolom samping adalah dua wadah nyata, bukan penempatan
   grid yang berpindah-pindah. Di ponsel dan tablet keduanya menumpuk; di
   desktop kolom samping pindah ke kanan. Cara ini tidak pernah meninggalkan
   sel grid kosong seperti penempatan eksplisit per-pita. */
.arus, .samping { display: grid; gap: 0; min-width: 0; align-content: start; }


/* ==========================================================================
 *  5. NAVIGASI
 * ========================================================================== */

/* Satu elemen <nav> saja. Di ponsel ia jadi bilah bawah dalam jangkauan
   ibu jari; di tablet jadi rel ikon; di desktop jadi bilah sisi berlabel.
   Menduplikasi navigasi jadi dua elemen berarti pembaca layar mendengarnya
   dua kali — jadi yang berubah adalah tata letaknya, bukan jumlahnya. */
.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--lapis-bawah);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  height: calc(var(--tinggi-bawah) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--lembar-atas);
  border-top: 1px solid var(--garis-tegas);
}

.nav-butir {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: var(--sentuh);
  padding: var(--s-1) 2px;
  border: 0;
  background: none;
  color: var(--tinta-samar);
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: color var(--d-kecil) var(--e-masuk);
}
.nav-butir svg { width: 21px; height: 21px; stroke-width: 1.75; }
.nav-butir:hover { color: var(--tinta-sedang); }

/* Kuning = sedang aktif. Satu-satunya pemakaian selain kelas berjalan. */
.nav-butir[aria-current="page"] { color: var(--tinta); }
.nav-butir[aria-current="page"]::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  width: 28px; height: 3px;
  transform: translateX(-50%);
  background: var(--sekarang);
}

.nav-hitung {
  position: absolute;
  top: 2px;
  left: calc(50% + 8px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--r-bulat);
  background: var(--lewat);
  color: var(--n-0);
  font-size: var(--t-xs);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.nav-kbd { display: none; }


/* ==========================================================================
 *  6. PITA & KEPALA PITA
 * ========================================================================== */

/* Papan ini SATU LEMBAR MENERUS. Bagian adalah pita dari lembar yang sama,
   bukan kartu yang mengambang di atasnya. Karena itu tidak ada bayangan,
   dan di ponsel pita melebar penuh sampai tepi layar. */
.pita {
  display: grid;
  gap: var(--s-4);
  align-content: start;
  background: var(--lembar);
  border-bottom: 1px solid var(--garis);
  padding: var(--s-5) max(var(--s-4), env(safe-area-inset-left)) var(--s-6)
                     max(var(--s-4), env(safe-area-inset-right));
}

/* Judul dan kalimat pengantarnya adalah satu kelompok dengan jaraknya
   sendiri — lebih rapat ke judul daripada ke isi di bawahnya. */
.pita-atas { display: grid; gap: var(--s-2); }
.pita--dalam { background: var(--papan); }

.pita-kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

/* Nama pita adalah judulnya sendiri — tidak ada label kecil di atasnya. */
.pita-nama {
  font-family: var(--f-papan);
  font-size: var(--t-lg);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  line-height: var(--l-rapat);
  text-transform: uppercase;
  color: var(--tinta);
}

.pita-hitung {
  font-family: var(--f-papan);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tinta-samar);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.pita-ket {
  color: var(--tinta-sedang);
  font-size: var(--t-sm);
  max-width: 68ch;
}

/* Baris kendali di dalam pita (mis. penyaring mapel). */
.pita-alat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.filter-wadah {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex: 1 1 auto;
  max-width: 320px;
}
.filter-wadah .isian { flex: 1 1 auto; }
.filter-reset {
  padding: var(--s-1) var(--s-3);
  min-height: var(--sentuh);
  font-size: var(--t-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--j-papan);
}

.pita-isi { display: grid; gap: var(--s-3); }


/* ==========================================================================
 *  7. BARIS PAPAN
 * ========================================================================== */

/* Unit dasar seluruh antarmuka: satu baris keberangkatan.
   [ jam ] [ plat ] [ nama + keterangan ] [ tanda ] */
.baris {
  display: grid;
  /* minmax(0, 1fr), bukan 1fr: 1fr berarti minmax(auto, 1fr) dan kolomnya
     tidak boleh lebih sempit dari isinya — itu yang mendorong halaman
     melebar begitu nama tugas atau label statusnya panjang. */
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  min-height: var(--sentuh);
  padding: var(--s-3);
  border: 1px solid var(--garis);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
  text-align: left;
  text-decoration: none;
  color: inherit;
  transition:
    background var(--d-kecil) var(--e-masuk),
    border-color var(--d-kecil) var(--e-masuk),
    transform 100ms var(--e-masuk);
}
a.baris, button.baris { cursor: pointer; }
a.baris:hover, button.baris:hover { background: var(--papan-dalam); border-color: var(--garis-tegas); }
a.baris:active, button.baris:active { transform: scale(.99); }

.baris-jam {
  font-family: var(--f-papan);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  color: var(--tinta);
  white-space: nowrap;
}
.baris-jam small {
  display: block;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--tinta-samar);
  letter-spacing: var(--j-papan);
  margin-top: 2px;
}

.baris-isi { display: grid; gap: 3px; align-content: center; min-width: 0; }
.baris-atas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.baris-judul {
  font-size: var(--t-base);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  overflow-wrap: anywhere;
}
.baris-ket {
  font-size: var(--t-sm);
  color: var(--tinta-sedang);
  overflow-wrap: anywhere;
}

/* --- Baris SEKARANG: satu-satunya bidang kuning di seluruh papan -------- */
.baris--sekarang {
  background: var(--sekarang);
  border: 1px solid var(--sekarang-tepi);
  border-left-width: 1px;
  color: var(--sekarang-teks);
  padding: var(--s-4);
  align-items: start;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-3) var(--s-4);
}
.baris--sekarang .baris-jam,
.baris--sekarang .baris-judul { color: var(--sekarang-teks); }
.baris--sekarang .baris-jam { font-size: var(--t-2xl); }
.baris--sekarang .baris-jam small { color: var(--sekarang-teks-2); }
.baris--sekarang .baris-judul { font-size: var(--t-md); }
.baris--sekarang .baris-ket { color: var(--sekarang-teks-2); font-weight: 600; }
.baris--sekarang .plat { --warna-render: var(--sekarang-teks); }

/* --- Baris yang sudah lewat: diredupkan, dan dicoret jamnya ------------- */
.baris--lewat { background: var(--papan); border-style: dashed; }
.baris--lewat .baris-jam { color: var(--tinta-samar); text-decoration: line-through; }
.baris--lewat .baris-judul { color: var(--tinta-sedang); font-weight: 500; }

/* --- Daftar baris ------------------------------------------------------ */
/* Baris tanpa kolom jam: nilai, catatan belum dikerjakan. */
.baris--tanpa-jam { grid-template-columns: auto minmax(0, 1fr) auto; }

.daftar-baris { display: grid; gap: var(--s-2); }

/* Kepala hari di jadwal mingguan — garis yang membelah sisa lebarnya. */
.hari-kepala {
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.hari-kepala::after { content: ''; flex: 1; height: 1px; background: var(--garis); }
.hari-kepala--ini .label { color: var(--tinta); }

/* Bagian yang dilipat: yang sudah lewat, dan sisa daftar yang panjang. */
.lipat { display: grid; gap: var(--s-2); }
.lipat > summary { list-style: none; }
.lipat > summary::-webkit-details-marker { display: none; }
.lipat > summary::after {
  content: '';
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--d-kecil) var(--e-masuk);
}
.lipat[open] > summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.daftar-sisa {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  min-height: var(--sentuh);
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r-2);
  background: none;
  color: var(--tinta-sedang);
  font-size: var(--t-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--d-kecil) var(--e-masuk), color var(--d-kecil) var(--e-masuk);
}
.daftar-sisa:hover { background: var(--papan-dalam); color: var(--tinta); }


/* ==========================================================================
 *  8. JALUR MAPEL — elemen signature
 * ========================================================================== */

/* Setiap mata pelajaran adalah satu jalur. Stasiunnya adalah catatan
   C1…Cn dari sheet Catatan_Siswa — urutan sungguhan, bukan penomoran hias.
   Titik terisi = sudah dikerjakan, titik berongga = belum, kotak = posisimu.
   Tidak ada satu pun piksel di sini yang bukan data. */
.jalur {
  position: relative;
  display: grid;
  gap: var(--s-2);
}

.jalur-baris {
  --warna-render: var(--warna, var(--tinta-sedang));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3);
  border: 1px solid var(--garis);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
}

.jalur-peta { min-width: 0; overflow: hidden; }
.jalur-peta svg { width: 100%; height: 26px; overflow: visible; }

.jalur-rel { stroke: var(--papan-dalam); stroke-width: 4; stroke-linecap: round; }
.jalur-lewat {
  stroke: var(--warna-render);
  stroke-width: 4;
  stroke-linecap: round;
}
.jalur-stasiun { fill: var(--warna-render); transition: stroke .12s, stroke-width .12s; }
.jalur-stasiun--belum {
  fill: var(--lembar-atas);
  stroke: var(--garis-tegas);
  stroke-width: 2;
}
.jalur-disini {
  fill: var(--lembar-atas);
  stroke: var(--warna-render);
  stroke-width: 3.5;
  transition: stroke .12s, stroke-width .12s;
}

.jalur-sentuh {
  cursor: pointer;
  outline: none;
}
.jalur-sentuh:hover + .jalur-stasiun,
.jalur-sentuh:focus-visible + .jalur-stasiun {
  stroke: var(--tinta);
  stroke-width: 2.5px;
}
.jalur-sentuh:hover + .jalur-disini,
.jalur-sentuh:focus-visible + .jalur-disini {
  stroke: var(--tinta);
  stroke-width: 4px;
}

.jalur-tip {
  position: absolute;
  pointer-events: none;
  padding: var(--s-1) var(--s-3);
  border-radius: var(--r-1);
  background: var(--tinta);
  color: var(--n-05);
  font-family: var(--f-isi);
  font-size: var(--t-xs);
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -135%);
  opacity: 0;
  z-index: 15;
  transition: opacity var(--d-kecil) var(--e-masuk);
  box-shadow: 0 4px 12px rgba(13, 23, 33, .22);
}
.jalur-tip[data-tampil="ya"] { opacity: 1; }

.jalur-ujung { text-align: right; line-height: 1.1; }
.jalur-nilai {
  font-family: var(--f-papan);
  font-size: var(--t-xl);
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
}
.jalur-tren {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
}
.jalur-tren svg { width: 12px; height: 12px; }
.jalur-tren--naik  { color: var(--tepat); }
.jalur-tren--turun { color: var(--lewat); }
.jalur-tren--rata  { color: var(--tinta-samar); }

.jalur-kaki {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  padding-top: var(--s-2);
  border-top: 1px dashed var(--garis);
  font-size: var(--t-sm);
  color: var(--tinta-sedang);
}


/* ==========================================================================
 *  9. MODUL ISI
 * ========================================================================== */

/* --- Identitas di kepala papan ----------------------------------------- */
.kepala-plat {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex: none;
  border-radius: var(--r-1);
  background: var(--tinta);
  color: var(--n-05);
}
.kepala-plat svg { width: 20px; height: 20px; }

.kepala-teks { min-width: 0; flex: 1; line-height: 1.2; }
.kepala-nama {
  display: block;
  font-size: var(--t-base);
  font-weight: 700;
  letter-spacing: var(--j-judul);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kepala-waktu {
  display: block;
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  color: var(--tinta-samar);
  font-variant-numeric: tabular-nums;
}
.kepala-aksi { display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* --- Pita peringatan data basi / luring -------------------------------- */
.pita-siaga {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) max(var(--s-4), env(safe-area-inset-left));
  background: var(--tunda-bid);
  color: var(--tunda);
  border-bottom: 1px solid var(--garis);
  font-size: var(--t-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.pita-siaga svg { width: 17px; height: 17px; flex: none; }
.pita-siaga span { min-width: 0; }

/* --- Ringkasan nilai --------------------------------------------------- */
.nilai-utama {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.nilai-besar {
  font-family: var(--f-papan);
  font-size: var(--t-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--tinta);
}
.nilai-ket { font-size: var(--t-sm); color: var(--tinta-sedang); }

/* --- Ambang batas nilai (KKM / rentang predikat) ---------------------- */
.nilai-ambang {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  padding: var(--s-2) var(--s-3);
  background: var(--papan);
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r-2);
}
.ambang-butir {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
}
.ambang-butir .nilai-plat {
  min-width: 42px;
  padding: 1px var(--s-2);
  font-size: var(--t-sm);
}
.ambang-label {
  font-size: var(--t-xs);
  font-family: var(--f-isi);
  color: var(--tinta-sedang);
  font-weight: 500;
}

/* --- Bilah presensi tersegmen ------------------------------------------
   Menggantikan donat: di 360px sebuah donat memakan 200px tinggi untuk
   menyampaikan satu angka. Bilah menyampaikan proporsi DAN muat di 44px. */
.presensi-bilah {
  display: flex;
  height: 14px;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-1);
  overflow: hidden;
  background: var(--papan-dalam);
}
.presensi-seg { height: 100%; }
.presensi-seg--hadir { background: var(--tepat); }
.presensi-seg--izin  { background: var(--tunda); }
.presensi-seg--sakit { background: var(--kabar); }
.presensi-seg--alpa  { background: var(--lewat); }

.presensi-kunci {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
}
.presensi-kunci li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-sm);
  color: var(--tinta-sedang);
}
.presensi-kunci b {
  font-family: var(--f-papan);
  font-size: var(--t-md);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.kunci-titik { width: 10px; height: 10px; flex: none; border-radius: var(--r-1); }

/* --- Grafik tren nilai (SVG buatan sendiri, tanpa pustaka) ------------- */
.tren-bingkai { position: relative; }
.tren-bingkai svg { width: 100%; height: 168px; overflow: visible; }
.tren-kisi { stroke: var(--garis); stroke-width: 1; }
.tren-sumbu {
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 600;
  fill: var(--tinta-samar);
  letter-spacing: .04em;
}
.tren-garis {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity var(--d-kecil) var(--e-masuk), stroke-width var(--d-kecil) var(--e-masuk);
}
.tren-garis--redup { opacity: .18; stroke-width: 1.5; }
.tren-garis--sorot { stroke-width: 3.5; opacity: 1; }

.tren-titik {
  stroke: var(--lembar-atas);
  stroke-width: 2;
  transition: opacity var(--d-kecil) var(--e-masuk), r var(--d-kecil) var(--e-masuk);
  cursor: pointer;
}
.tren-titik--redup { opacity: .2; }
.tren-titik--sorot { stroke-width: 2.5; opacity: 1; }
.tren-tip {
  position: absolute;
  pointer-events: none;
  padding: var(--s-2) var(--s-3);
  border-radius: var(--r-1);
  background: var(--tinta);
  color: var(--n-05);
  font-size: var(--t-sm);
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -125%);
  opacity: 0;
  transition: opacity var(--d-kecil) var(--e-masuk);
}
.tren-tip[data-tampil="ya"] { opacity: 1; }

/* --- Tabel: penuh di lebar besar, daftar kartu di ponsel --------------- */
.tabel-bingkai { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabel {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-sm);
}
.tabel th {
  position: sticky; top: 0;
  padding: var(--s-2) var(--s-3);
  background: var(--papan-dalam);
  border-bottom: 1px solid var(--garis-tegas);
  text-align: left;
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  color: var(--tinta-sedang);
  white-space: nowrap;
}
.tabel td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--garis);
  vertical-align: top;
  color: var(--tinta-sedang);
}
.tabel tbody tr:last-child td { border-bottom: 0; }
.tabel tbody tr:hover td { background: var(--papan-dalam); }
.tabel .kanan { text-align: right; }
.tabel .taknormal { white-space: nowrap; }

.nilai-plat {
  display: inline-block;
  min-width: 46px;
  padding: 2px var(--s-2);
  border-radius: var(--r-1);
  text-align: center;
  font-family: var(--f-papan);
  font-size: var(--t-md);
  font-weight: 700;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
}
.nilai-plat--baik   { background: var(--tepat-bid); color: var(--tepat); }
.nilai-plat--cukup  { background: var(--tunda-bid); color: var(--tunda); }
.nilai-plat--kurang { background: var(--lewat-bid); color: var(--lewat); }

/* --- Kabar (catatan guru) --------------------------------------------- */
.kabar-butir {
  padding: var(--s-4);
  border: 1px solid var(--garis);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
}
.kabar-atas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.kabar-tanggal {
  font-family: var(--f-papan);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  color: var(--tinta-samar);
}
.kabar-teks { color: var(--tinta); max-width: 68ch; overflow-wrap: anywhere; }
.kabar-guru {
  margin-top: var(--s-2);
  font-size: var(--t-sm);
  color: var(--tinta-samar);
  font-style: italic;
}

/* --- Buku catatan: stasiun sebagai daftar ------------------------------ */
.buku-grup {
  padding: var(--s-4);
  border: 1px solid var(--garis);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
}
.buku-kepala {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.buku-judul { font-size: var(--t-base); font-weight: 700; flex: 1; min-width: 0; }
.kel-skor {
  font-family: var(--f-papan);
  font-size: var(--t-md);
  font-weight: 700;
  color: var(--tinta-sedang);
}
.buku-daftar { display: grid; gap: 1px; background: var(--garis); border: 1px solid var(--garis); border-radius: var(--r-1); overflow: hidden; }
.buku-butir {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--lembar-atas);
  font-size: var(--t-sm);
}
.buku-butir--belum { background: var(--lewat-bid); }
.buku-no {
  font-family: var(--f-papan);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--tinta-samar);
  font-variant-numeric: tabular-nums;
  min-width: 22px;
}
.buku-nama { min-width: 0; color: var(--tinta); overflow-wrap: anywhere; }


/* ==========================================================================
 *  10. KEADAAN
 * ========================================================================== */

/* --- Memuat: rangka yang mengikuti bentuk isi sebenarnya --------------- */
.rangka {
  background: var(--papan-dalam);
  border-radius: var(--r-1);
  position: relative;
  overflow: hidden;
}
.rangka::after {
  content: '';
  position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, var(--kilau), transparent);
  animation: sapu 1.4s infinite;
}
@keyframes sapu { 100% { transform: translateX(100%); } }

.rangka--jam    { width: 58px; height: 38px; }
.rangka--judul  { width: 62%;  height: 18px; }
.rangka--ket    { width: 40%;  height: 13px; margin-top: 7px; }
.rangka--tanda  { width: 74px; height: 20px; }
.rangka--plat   { width: 38px; height: 22px; }
.rangka--peta   { width: 100%; height: 22px; }
.rangka--nilai  { width: 54px; height: 30px; }

/* --- Kosong: ajakan bertindak, bukan pengumuman kegagalan -------------- */
.kosong {
  display: grid;
  gap: var(--s-2);
  justify-items: start;
  padding: var(--s-5);
  border: 1px dashed var(--garis-tegas);
  border-radius: var(--r-2);
  background: var(--papan);
}
.kosong-judul {
  font-family: var(--f-papan);
  font-size: var(--t-md);
  font-weight: 700;
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
  line-height: var(--l-rapat);
  color: var(--tinta);
}
.kosong-teks { font-size: var(--t-sm); color: var(--tinta-sedang); max-width: 60ch; }

/* --- Galat ------------------------------------------------------------- */
.galat {
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  max-width: 56ch;
  margin: var(--s-8) auto;
  padding: var(--s-6);
  border: 1px solid var(--lewat);
  border-radius: var(--r-2);
  background: var(--lembar-atas);
}
.galat-judul { font-size: var(--t-md); font-weight: 700; color: var(--tinta); line-height: var(--l-judul); }
.galat-teks { color: var(--tinta-sedang); font-size: var(--t-sm); }
.galat-aksi { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* --- Dialog ------------------------------------------------------------ */
.dialog {
  width: min(400px, calc(100vw - var(--s-8)));
  padding: 0;
  border: 1px solid var(--garis-tegas);
  border-radius: var(--r-3);
  background: var(--lembar-atas);
  color: var(--tinta);
  box-shadow: var(--bayang-dialog);
}
.dialog::backdrop { background: var(--tirai); }
.dialog-isi { display: grid; gap: var(--s-3); padding: var(--s-6); }
.dialog-judul { font-size: var(--t-md); font-weight: 700; line-height: var(--l-judul); }
.dialog-teks { font-size: var(--t-sm); color: var(--tinta-sedang); }
.dialog-aksi { display: flex; gap: var(--s-2); justify-content: flex-end; flex-wrap: wrap; margin-top: var(--s-2); }

/* --- Kaki halaman ------------------------------------------------------ */
.kaki {
  padding: var(--s-6) max(var(--s-4), env(safe-area-inset-left));
  color: var(--tinta-samar);
  font-size: var(--t-xs);
  text-align: center;
}


/* ==========================================================================
 *  11. HALAMAN MASUK
 * ========================================================================== */

.halaman-masuk { display: grid; place-items: center; padding: var(--s-6) var(--s-4); }

.masuk-bungkus { width: 100%; max-width: 420px; display: grid; gap: var(--s-4); }

.masuk-lembar {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-8) var(--s-6);
  border: 1px solid var(--garis);
  border-radius: var(--r-3);
  background: var(--lembar-atas);
}

.masuk-plat {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--r-2);
  background: var(--tinta);
  color: var(--n-05);
}
.masuk-plat svg { width: 28px; height: 28px; }

.masuk-judul {
  font-family: var(--f-papan);
  font-size: var(--t-xl);
  font-weight: 700;
  line-height: var(--l-rapat);
  letter-spacing: var(--j-papan);
  text-transform: uppercase;
}
.masuk-tagline { color: var(--tinta-sedang); font-size: var(--t-sm); }
.masuk-catatan { color: var(--tinta-samar); font-size: var(--t-sm); max-width: 46ch; }
.masuk-kaki { text-align: center; color: var(--tinta-samar); font-size: var(--t-sm); }
.masuk-aksi { display: grid; gap: var(--s-3); justify-items: start; }

.masuk-memuat { display: flex; align-items: center; gap: var(--s-2); font-size: var(--t-sm); color: var(--tinta-sedang); }

.putar {
  width: 17px; height: 17px; flex: none;
  border: 2px solid var(--garis);
  border-top-color: var(--tinta);
  border-radius: var(--r-bulat);
  animation: berputar .7s linear infinite;
}
@keyframes berputar { to { transform: rotate(360deg); } }

/* Kotak pesan — kelas ini dipakai apa adanya oleh login.js.
   Bidang berwarna penuh dengan garis setipis rambut, bukan tepi kiri tebal:
   strip warna di tepi kiri adalah kebiasaan yang justru dilarang Aturan
   Tidak Ada Tepi Berwarna Tebal. */
.pesan {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--kabar);
  border-radius: var(--r-2);
  background: var(--kabar-bid);
  color: var(--tinta);
  font-size: var(--t-sm);
}
.pesan--error  { border-color: var(--lewat); background: var(--lewat-bid); }
.pesan--sukses { border-color: var(--tepat); background: var(--tepat-bid); }
.pesan-aksi { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.pesan-email { font-weight: 700; overflow-wrap: anywhere; }


/* ==========================================================================
 *  12. RESPONSIF
 * ========================================================================== */

/* --- Ponsel: satu tampilan sekaligus ----------------------------------
   Menampilkan tujuh bagian sekaligus di 360px menghasilkan halaman
   >3000px. Di ponsel bilah bawah benar-benar MENGGANTI isi, bukan
   menggulirkannya. */
@media (max-width: 767px) {
  .pita:not(.pita--tampil) { display: none; }
  .pita:last-of-type { border-bottom: 0; }
}

/* --- Tablet 768–1279: rel ikon di kiri, dua kolom, semua pita terlihat -- */
@media (min-width: 768px) {
  .cangkang {
    grid-template-columns: var(--lebar-rel) minmax(0, 1fr);
    grid-template-areas:
      'nav kepala'
      'nav papan';
  }

  .papan {
    padding: var(--s-6) var(--s-6) var(--s-12);
    display: grid;
    gap: var(--s-5);
    align-content: start;
  }
  .arus, .samping { gap: var(--s-5); }

  .nav {
    grid-area: nav;
    position: sticky;
    top: 0;
    left: auto; right: auto; bottom: auto;
    align-self: start;
    height: 100vh;
    height: 100dvh;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-auto-rows: max-content;
    align-content: start;
    gap: var(--s-1);
    padding: calc(var(--tinggi-kepala) + var(--s-4)) var(--s-2) var(--s-4);
    border-top: 0;
    border-right: 1px solid var(--garis);
  }

  .nav-butir {
    min-height: 52px;
    border-radius: var(--r-2);
  }
  .nav-butir[aria-current="page"] { background: var(--papan-dalam); }
  .nav-butir[aria-current="page"]::before {
    top: 50%; left: 0;
    width: 3px; height: 26px;
    transform: translateY(-50%);
  }
  .nav-hitung { top: 4px; left: calc(50% + 10px); }

  .pita {
    border: 1px solid var(--garis);
    border-radius: var(--r-3);
    padding: var(--s-5) var(--s-6) var(--s-6);
  }
  /* Nada berselang-seling hanya berguna di ponsel, tempat pita saling
     bersentuhan tanpa jarak. Begitu pita punya sisi dan jarak sendiri,
     pergantian nada berhenti memisahkan dan mulai terlihat acak. */
  .pita--dalam { background: var(--lembar); }


  /* Jumlah kolom mengikuti RUANG yang benar-benar ada, bukan lebar layar.
     Dengan repeat(2/3, 1fr) sebuah daftar yang kebetulan duduk di kolom
     389px akan dipaksa jadi tiga kolom selebar 120px, dan setiap barisnya
     tumbuh jadi lima baris teks. */
  .daftar-baris--kolom { grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
  #isi-buku, #isi-kabar { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); align-items: start; }

  .papan-kepala { padding-left: var(--s-6); padding-right: var(--s-6); }
  .kaki { padding-bottom: var(--s-6); }
}

/* --- Desktop 1280+: bilah sisi berlabel, tiga kolom, kolom samping ----- */
@media (min-width: 1280px) {
  .cangkang {
    grid-template-columns: var(--lebar-bilah) minmax(0, 1fr);
    grid-template-areas:
      'nav kepala'
      'nav papan';
    max-width: var(--lebar-isi);
    margin: 0 auto;
    border-inline: 1px solid var(--garis);
  }

  .papan {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 340px);
    align-items: start;
  }
  /* Pita lebar penuh: peringatan, galat, dan kaki halaman. */
  .pita-siaga, #pita-contoh, .galat, .kaki { grid-column: 1 / -1; }
  .arus    { grid-column: 1; }
  .samping { grid-column: 2; }

  /* Dua kolom isi + satu kolom samping = tiga kolom.
     Yang berpasangan hanya pita yang tingginya sebanding: BELUM DIKERJAKAN
     dengan JALUR MAPEL. Pita yang isinya bisa panjang tak terduga — jadwal
     satu minggu penuh, daftar nilai, daftar catatan — selalu melebar penuh,
     supaya tidak ada pasangan yang tingginya ditarik oleh tetangganya. */
  .arus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pita-sekarang,
  #pita-jadwal,
  #pita-nilai,
  #pita-buku { grid-column: 1 / -1; }

  .nav { padding-inline: var(--s-3); }
  .nav-butir {
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--s-3);
    min-height: var(--sentuh);
    padding-inline: var(--s-3);
    font-size: var(--t-sm);
    letter-spacing: .04em;
  }
  .nav-butir[aria-current="page"]::before { left: 0; }
  .nav-hitung { position: static; margin-left: auto; }

  .nav-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: auto;
    font-family: var(--f-papan);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--tinta-samar);
    background: var(--papan);
    border: 1px solid var(--garis-tegas);
    border-radius: var(--r-1);
    font-variant-numeric: tabular-nums;
  }
  .nav-butir:hover .nav-kbd {
    color: var(--tinta);
    border-color: var(--tinta-samar);
  }

  .tren-bingkai svg { height: 210px; }
}

/* --- Layar sangat sempit ----------------------------------------------- */
@media (max-width: 359px) {
  .baris { gap: var(--s-2); padding: var(--s-2); }
  .baris--sekarang .baris-jam { font-size: var(--t-xl); }
  .nav-butir { letter-spacing: 0; }
}


/* ==========================================================================
 *  13. GERAK
 * ========================================================================== */

/* Satu momen orkestrasi: pita masuk berurutan dengan jeda 45ms, sekali saja
   saat data pertama mendarat. Sisanya diam. */
.pita--masuk {
  animation: pita-naik var(--d-tata) var(--e-masuk) both;
  animation-delay: calc(var(--urut, 0) * 45ms);
}
@keyframes pita-naik {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Jalur mapel menyala seperti arus yang sampai ke lampu (sekali, saat muat) */
.jalur-lewat--gambar {
  stroke-dasharray: var(--panjang, 200);
  stroke-dashoffset: var(--panjang, 200);
  animation: jalur-nyala 760ms var(--e-masuk) 220ms forwards;
}
@keyframes jalur-nyala { to { stroke-dashoffset: 0; } }

/* Baris SEKARANG berdenyut sangat pelan — satu-satunya gerak yang berulang,
   dan ia menandai satu-satunya hal yang memang sedang berlangsung. */
.baris--sekarang .tanda--sekarang::before { animation: denyut 2.4s ease-in-out infinite; }
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  /* Transform dimatikan; perubahan opasitas yang tenang tetap dipertahankan
     supaya pergantian tampilan tidak terasa patah. */
  .pita--masuk { animation: pita-pudar 120ms linear both; }
  @keyframes pita-pudar { from { opacity: 0; } to { opacity: 1; } }

  .jalur-lewat--gambar { stroke-dasharray: none; stroke-dashoffset: 0; animation: none; }
  .rangka::after { animation: none; }
  .baris:active, .tombol:active { transform: none; }
}


/* ==========================================================================
 *  14. CETAK
 * ========================================================================== */

@media print {
  :root { --cetak-kertas: #FFFFFF; --cetak-tinta: #000000; }
  .nav, .papan-kepala, .tombol, .lompat { display: none !important; }
  .pita { display: block !important; border: 0; border-bottom: 1px solid currentColor; page-break-inside: avoid; }
  .lipat > summary { display: none; }
  .lipat > * { display: block !important; }
  body { background: var(--cetak-kertas); color: var(--cetak-tinta); }
}