/* =============================================================================
   components.css — komponen bersama untuk seluruh halaman
   -----------------------------------------------------------------------------
   Dimuat setelah tokens.css dan shell.css, sebelum style.css.

   Berisi hal-hal yang sebelumnya ditulis berulang di setiap modul halaman
   dengan hasil yang sedikit berbeda: kisi responsif, panel berjudul, tab,
   tabel padat, dan bilah aksi halaman. Ditulis sekali agar susunannya sama di
   mana pun — itu yang membuat aplikasi terasa satu kesatuan, bukan kumpulan
   halaman yang mirip.

   Aturan yang dipegang (docs/08 §C):
     - satu warna aksen; warna lain hanya untuk status
     - pemisah utama garis tepi 1px, bayangan maksimal dua tingkat
     - tanpa gradien dekoratif, tanpa kartu di dalam kartu
     - gerak <= 180ms dan hanya untuk menjelaskan perubahan
   ========================================================================== */

/* ============================== KISI ================================= */

/*
 * Kisi otomatis: jumlah kolom mengikuti ruang yang ada, bukan media query
 * berlapis. Satu deklarasi melayani 320px sampai 1280px, dan komponen yang
 * dipakai di dalam sidebar maupun di konten utama tetap benar.
 */
.grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
}

.grid--auto { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid { gap: var(--sp-4); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /*
   * Susunan kerja: kolom utama dua kali lebar kolom samping.
   * Di bawah 1024px keduanya menumpuk, dengan kolom utama tetap di atas —
   * itulah yang paling sering dipakai guru saat memegang HP.
   */
  .layout-kerja {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--sp-5);
    align-items: start;
  }
  .layout-kerja__utama,
  .layout-kerja__samping { display: flex; flex-direction: column; gap: var(--sp-5); }
}

/* ============================== PANEL ================================ */

/*
 * Satuan dasar isi halaman. Menggantikan pemakaian `.section` + `.card` yang
 * bertumpuk (kartu di dalam kartu) di beberapa halaman.
 */
.panel {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
}

.panel__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
}

.panel__judul {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.panel__judul span { font-weight: var(--fw-normal); color: var(--text-muted); }

.panel__aksi { display: flex; align-items: center; gap: var(--sp-2); flex: none; }

.panel__isi { padding: var(--sp-4); }
.panel__isi--rapat { padding: 0; }

.panel__kaki {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border);
}

/* Tautan "Semua ›" pada judul panel */
.panel__link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
}
.panel__link [data-lucide] { width: 15px; height: 15px; }

/* ========================= BILAH AKSI HALAMAN ======================== */

/*
 * Aksi utama halaman diletakkan di dalam konten, bukan di topbar: topbar
 * dipakai bersama seluruh halaman, dan menaruh tombol khas halaman di sana
 * membuat isinya berganti-ganti setiap pindah menu.
 */
.pagebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}
.pagebar__isi { flex: 1; min-width: 200px; }
.pagebar__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/*
 * Pemilih penyaring yang berdiri sendiri di luar formulir.
 *
 * UI.field() dipakai untuk isian yang dikirim ke server; penyaring hanya
 * mengubah tampilan, jadi ia tidak perlu label di atasnya maupun nama field —
 * tetapi tetap harus setinggi tombol di sebelahnya agar barisnya rata.
 */
.pilih-ringkas {
  height: var(--tap);
  max-width: 100%;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

@media (max-width: 639px) {
  /* Di HP aksi utama melebar penuh — lebih mudah dijangkau jempol */
  .pagebar__aksi { width: 100%; }
  .pagebar__aksi > .btn { flex: 1; }
}

/* =============================== TAB ================================= */

/*
 * Tab halaman. Di HP bergulir mendatar dengan snap; di layar lebar seluruh tab
 * terlihat sekaligus. Yang aktif ditandai garis bawah, bukan latar penuh —
 * supaya tidak bersaing dengan tombol aksi di dekatnya.
 */
.tabs {
  display: flex;
  gap: var(--sp-1);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  border-bottom: 1px solid var(--border);
}
.tabs::-webkit-scrollbar { display: none; }

.tabs__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 42px;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: start;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tabs__btn [data-lucide] { width: 16px; height: 16px; }
.tabs__btn:hover { color: var(--text); }

.tabs__btn.is-active {
  color: var(--primary);
  border-bottom-color: var(--primary);
  font-weight: var(--fw-semibold);
}

/* Lencana angka di dalam tab (mis. jumlah siswa) */
.tabs__n {
  padding: 1px 6px;
  border-radius: var(--r-full);
  background: var(--surface-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.tabs__btn.is-active .tabs__n { background: var(--primary-soft); color: var(--primary); }

@media (min-width: 768px) {
  .tabs { gap: var(--sp-2); }
  .tabs__btn { padding: 0 var(--sp-4); }
}

/* ============================ TABEL PADAT ============================ */

/*
 * Daftar data pada layar lebar.
 *
 * Di HP, daftar berbentuk kartu (satu baris = satu kartu) karena 40 baris ×
 * 6 kolom tidak terbaca di 360px. Di >= 1024px bentuk tabel jauh lebih padat:
 * 40 siswa terlihat sekaligus tanpa menggulir, dan itulah keunggulan layar
 * lebar yang sebelumnya tidak dipakai sama sekali.
 *
 * Keduanya dibangun dari SATU sumber data; yang berganti hanya kelasnya.
 */
.tabelku { width: 100%; overflow-x: auto; }

.tabelku table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tabelku th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: left;
  white-space: nowrap;
}

.tabelku td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.tabelku tbody tr:last-child td { border-bottom: 0; }
.tabelku tbody tr:hover { background: var(--surface-2); }

.tabelku .kolom-angka { text-align: right; font-variant-numeric: tabular-nums; }
.tabelku .kolom-sempit { width: 1%; white-space: nowrap; }
.tabelku .kolom-aksi { width: 1%; white-space: nowrap; text-align: right; }

/* Baris tabel yang dapat diklik seluruhnya */
.tabelku tr[data-href] { cursor: pointer; }

/* Lencana di dalam sel tidak boleh membungkus: "Kurang aktif" yang terbelah
   dua baris membuat tinggi baris tabel tidak seragam. */
.tabelku .badge { white-space: nowrap; }

/*
 * Pengalih bentuk. `.hanya-kartu` dan `.hanya-tabel` bukan sekadar
 * menyembunyikan: bentuk yang tidak dipakai tidak dirender sama sekali oleh
 * modul halaman, sehingga tidak ada 40 baris ganda di DOM.
 */
.hanya-tabel { display: none; }

@media (min-width: 1024px) {
  .hanya-kartu { display: none; }
  .hanya-tabel { display: block; }
}

/* ============================== METRIK =============================== */

/*
 * Angka ringkas. Tanpa bayangan dan tanpa warna latar: yang perlu menonjol
 * angkanya, bukan kotaknya.
 */
.metrik {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.metrik__label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.metrik__label [data-lucide] { width: 13px; height: 13px; }

.metrik__nilai {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.metrik__sub { font-size: var(--fs-xs); color: var(--text-muted); }

.metrik--primary .metrik__nilai { color: var(--primary); }
.metrik--success .metrik__nilai { color: var(--success); }
.metrik--warning .metrik__nilai { color: var(--warning); }
.metrik--danger .metrik__nilai { color: var(--danger); }

@media (max-width: 400px) {
  .metrik { padding: var(--sp-2) var(--sp-3); }
  .metrik__nilai { font-size: var(--fs-h1); }
}

/* ============================ BARIS DATA ============================= */

/*
 * Baris daftar versi baru: tinggi tetap, satu garis pemisah, tanpa bayangan.
 * Dipakai bersama `.panel__isi--rapat` supaya daftar menempel ke tepi panel.
 */
.baris {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--border);
  color: inherit;
}
.baris:last-child { border-bottom: 0; }
.baris:hover { background: var(--surface-2); }

.baris__utama { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.baris__utama strong { font-size: var(--fs-h3); font-weight: var(--fw-semibold); }
.baris__utama p { font-size: var(--fs-sm); color: var(--text-muted); }

.baris__chev { width: 16px; height: 16px; color: var(--text-muted); flex: none; }

/* Kolom waktu pada baris jadwal: angka disejajarkan agar mudah dibaca menurun */
.baris__waktu {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 52px;
  padding-right: var(--sp-3);
  border-right: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}
.baris__waktu strong { font-size: var(--fs-h3); font-weight: var(--fw-bold); }
.baris__waktu span { font-size: var(--fs-xs); color: var(--text-muted); }

/* ====================== KELOMPOK KELAS (PANEL) ====================== */


/* ==================== SECTION LAMA SEBAGAI PANEL ==================== */

/*
 * Halaman Pengaturan dan Rekap tersusun dari `.section` — judul kecil di atas
 * isi yang mengambang tanpa wadah. Di layar lebar, bentuk itu membuat batas
 * antar bagian tidak terlihat: satu kolom panjang berisi belasan judul.
 *
 * `.section--panel` memberinya wadah panel tanpa menyentuh struktur HTML
 * setiap bagian — judul yang sudah ada (`.section__title`) menjadi judul
 * panelnya.
 */
.section--panel {
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.section--panel > .section__title,
.section--panel > .section__head {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.section--panel > .section__title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
  color: var(--text);
}

/* Seluruh isi selain judul diberi jarak dalam */
.section--panel > *:not(.section__title):not(.section__head) {
  margin-left: var(--sp-4);
  margin-right: var(--sp-4);
}
.section--panel > *:not(.section__title):not(.section__head):first-child { margin-top: var(--sp-4); }
.section--panel > *:last-child { margin-bottom: var(--sp-4); }

/* Baris pengaturan menempel ke tepi panel agar pemisahnya melebar penuh */
.section--panel > .setting-row {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--sp-4);
  padding-right: var(--sp-4);
}

@media (min-width: 1024px) {
  /* Dua kolom: panel-panel pengaturan pendek-pendek, satu kolom memboroskan
     ruang dan memaksa menggulir jauh. */
  .pengaturan-kolom {
    column-count: 2;
    column-gap: var(--sp-5);
  }
  .pengaturan-kolom > .section--panel {
    break-inside: avoid;
    margin-bottom: var(--sp-5);
  }
}

/* ===================== JEMBATAN KE KOMPONEN LAMA ===================== */

/*
 * `.list-item` adalah komponen daftar generasi sebelumnya: kartu terpisah
 * dengan garis tepi dan sudut membulat sendiri. Di dalam panel, bentuk itu
 * menjadi kartu di dalam kartu — persis yang dilarang arah desain.
 *
 * Alih-alih menyunting sepuluh modul dengan perubahan yang nyaris identik
 * (tempat paling mudah menyisipkan kesalahan), bentuknya disesuaikan di sini:
 * di dalam `.panel__isi--rapat`, `.list-item` berperilaku seperti `.baris`.
 *
 * Pemakaian di luar panel tidak berubah, sehingga halaman yang belum
 * dipindahkan tetap tampil seperti sebelumnya.
 */
.panel__isi--rapat > .list,
.panel__isi--rapat > .list--compact { gap: 0; }

.panel__isi--rapat .list-item,
.panel__isi--rapat > .list-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  padding: var(--sp-2) var(--sp-4);
  min-height: 56px;
  background: none;
}
.panel__isi--rapat .list-item:last-child { border-bottom: 0; }
.panel__isi--rapat a.list-item:hover { background: var(--surface-2); }
.panel__isi--rapat a.list-item:active { transform: none; }

/* Keadaan kosong lama (`UI.kosong`) di dalam panel: buang garis tepinya */
.panel__isi--rapat .empty-state,
.panel__isi .empty-state { border: 0; background: none; }

/* =========================== KEADAAN KOSONG ========================== */

.kosong {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-4);
  text-align: center;
  color: var(--text-muted);
}
.kosong [data-lucide] { width: 30px; height: 30px; opacity: .55; }
.kosong p { font-size: var(--fs-sm); max-width: 34ch; }

/* ====================== KARTU "KELAS BERIKUTNYA" ===================== */

/*
 * Satu-satunya blok di aplikasi yang memakai warna aksen penuh.
 *
 * Kebalikan dari aturan "satu aksen, sisanya netral"? Bukan — justru itu
 * penerapannya: karena hanya satu blok yang berwarna, mata langsung tertuju
 * ke sana. Kalau setiap kartu berwarna, tidak ada yang menonjol.
 */
.next {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background: var(--primary);
  color: var(--text-invert);
}

.next__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 4px var(--sp-3);
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, .18);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.next__badge [data-lucide] { width: 13px; height: 13px; }

.next__judul {
  font-size: var(--fs-display);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}
.next__sub { font-size: var(--fs-h3); opacity: .9; }

.next__waktu {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  font-size: var(--fs-sm);
  opacity: .9;
}
.next__waktu span { display: inline-flex; align-items: center; gap: 5px; }
.next__waktu [data-lucide] { width: 14px; height: 14px; }

.next__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.next__aksi .btn { flex: 1; min-width: 150px; }

/* Tombol di atas latar aksen: putih pekat untuk aksi utama, garis tepi untuk
   aksi kedua. Memakai .btn--primary di sini akan hilang ditelan latarnya. */
.btn--terang { background: #fff; color: var(--primary-strong); border-color: #fff; }
.btn--terang:hover { background: rgba(255, 255, 255, .9); }

.btn--samar {
  background: rgba(255, 255, 255, .14);
  color: var(--text-invert);
  border-color: rgba(255, 255, 255, .45);
}
.btn--samar:hover { background: rgba(255, 255, 255, .24); }

/* Tidak ada kelas berikutnya: netral, tidak perlu menarik perhatian */
.next--kosong {
  flex-direction: row;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}
.next--kosong [data-lucide] { width: 26px; height: 26px; color: var(--text-muted); }
.next--kosong strong { font-size: var(--fs-h3); }
.next--kosong p { font-size: var(--fs-sm); color: var(--text-muted); }

/* Piket bukan mengajar: dibedakan warnanya agar tidak tertukar */
.next--piket { background: var(--surface-3); color: var(--text); }
.next--piket .next__badge { background: var(--surface); color: var(--text-2); }

:root[data-theme="dark"] .next { background: var(--primary-soft); color: var(--text); }
:root[data-theme="dark"] .btn--terang { background: var(--primary); color: var(--text-invert); border-color: var(--primary); }

/* ============================ AKSI CEPAT ============================ */

/*
 * Tiga kolom di HP (6 aksi = 2 baris yang terjangkau jempol), dua kolom di
 * kolom samping desktop yang lebarnya hanya sekitar 330px.
 *
 * Tidak memakai `grid--auto-sm`: lebar kolom samping jatuh persis di bawah
 * ambang dua kolom, sehingga hasilnya satu kolom memanjang.
 */
.aksi-grid { gap: var(--sp-2); grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (min-width: 1024px) {
  .aksi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.aksi {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 76px;
  padding: var(--sp-3) var(--sp-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-2);
  text-align: center;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.aksi [data-lucide] { width: 21px; height: 21px; color: var(--primary); }
.aksi:hover { border-color: var(--primary); color: var(--text); }

.aksi--utama { background: var(--primary); border-color: var(--primary); color: var(--text-invert); }
.aksi--utama [data-lucide] { color: var(--text-invert); }
.aksi--utama:hover { background: var(--primary-strong); color: var(--text-invert); }

/* ============================ KARTU KELAS =========================== */

.kkelas {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast) var(--ease);
}
.kkelas:hover { border-color: var(--primary); }

.kkelas__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.kkelas__head strong { font-size: var(--fs-h2); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tight); }
.kkelas__head [data-lucide] { width: 16px; height: 16px; color: var(--text-muted); flex: none; }

.kkelas__mapel { font-size: var(--fs-sm); color: var(--primary); }

.kkelas__stat {
  display: flex;
  gap: var(--sp-4);
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.kkelas__stat span { display: inline-flex; align-items: center; gap: 4px; }
.kkelas__stat [data-lucide] { width: 13px; height: 13px; }

/* ====================== TAMPIL MENURUT LEBAR ======================== */

/* Elemen yang hanya ada di layar lebar / hanya di HP. Dipakai untuk pasangan
   tombol atas vs FAB, bukan untuk menyembunyikan fitur. */
.hanya-lebar { display: none; }

@media (min-width: 1024px) {
  .hanya-lebar { display: inline-flex; }
  .fab--hp { display: none; }
}

.pagebar--jadwal { margin-top: var(--sp-1); }

/* ============================ KEAKTIFAN ============================= */

/*
 * Halaman keaktifan.
 *
 * Di HP satu kolom, urutannya sama dengan urutan kerja: konteks, siswa
 * terpilih, kolom ketik, papan skor, lalu riwayat. Di layar lebar riwayat
 * dipindah ke kolom kanan supaya papan skor tidak melebar sia-sia dan guru
 * bisa melihat apa yang baru dicatat tanpa menggulir.
 *
 * Urutan DOM tidak dibalik — hanya letaknya yang digeser lewat grid.
 */
.keaktifan { display: flex; flex-direction: column; gap: var(--sp-4); }
.keaktifan__utama { display: flex; flex-direction: column; gap: var(--sp-3); }

@media (min-width: 1024px) {
  .keaktifan {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: var(--sp-5);
    align-items: start;
  }

  /* Papan skor tidak perlu melebar penuh: tombol sebesar setengah layar tidak
     lebih mudah ditekan, hanya lebih jauh dari kursor. */
  .keaktifan__utama .score-pad,
  .keaktifan__utama .quick-input { max-width: 100%; }

  /* Riwayat menempel saat papan skor digulir */
  .keaktifan__samping { position: sticky; top: calc(var(--topbar-h) + 56px); }
  .keaktifan__riwayat { max-height: calc(100vh - 240px); overflow-y: auto; }
}

.baris--sisa {
  justify-content: center;
  min-height: 40px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* ========================== TAB KELAS =============================== */

/* Menempel di bawah topbar: pada halaman kelas yang panjang (40 siswa),
   berpindah bagian tidak perlu menggulir kembali ke atas. */
.tabs--kelas {
  position: sticky;
  top: var(--topbar-h);
  z-index: 6;
  margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) 0;
  padding: 0 var(--sp-4);
  background: var(--background);
}

@media (min-width: 768px) {
  .tabs--kelas { margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0; padding: 0 var(--sp-5); }
}
@media (min-width: 1024px) {
  .tabs--kelas { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0; padding: 0 var(--sp-6); }
}

/* ====================== KARTU KELAS: KELOLA ========================= */

.kkelas--kelola { padding: 0; }
.kkelas__link { display: flex; flex-direction: column; gap: var(--sp-1); padding: var(--sp-3) var(--sp-4); }
.kkelas__aksi {
  display: flex;
  justify-content: flex-end;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-top: 1px solid var(--border);
}

/* ============================ BARIS META ============================ */

/* Label di atas, nilai di bawah: saat dibaca menurun, label yang sejajar
   membuat matanya mudah menemukan baris yang dicari. */
.baris--meta { align-items: flex-start; padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.baris--meta:hover { background: none; }
.baris__ikon { width: 17px; height: 17px; color: var(--text-muted); flex: none; margin-top: 2px; }
.baris--meta .baris__utama p {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: var(--fw-semibold);
}
.baris--meta .baris__utama strong { font-size: var(--fs-body); font-weight: var(--fw-medium); }

/* ======================== PENANDA BARIS JADWAL ====================== */

/* Jam yang sedang berjalan: garis aksen di tepi kiri, bukan latar penuh —
   barisnya tetap terbaca sebagai bagian dari daftar. */
.baris--sekarang { box-shadow: inset 3px 0 0 var(--primary); background: var(--primary-soft-2); }
.baris--lewat { opacity: .55; }

.tanda-sekarang {
  flex: none;
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  background: var(--primary);
  color: var(--text-invert);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

:root[data-theme="dark"] .baris--sekarang { background: var(--primary-soft-2); }

/* ============================== QR CODE ============================= */

.qr-wadah { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }

/* Latar putih selalu, juga di mode gelap: pemindai membaca kontras hitam di
   atas putih, dan QR yang dibalik warnanya tidak terbaca sebagian kamera. */
.qr-kotak {
  width: 100%;
  max-width: 260px;
  padding: var(--sp-2);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.qr-kotak svg { display: block; width: 100%; height: auto; }

.qr-slug {
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}
.qr-aksi { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

/* ---------------------------- layar penuh ---------------------------- */

.qr-layar {
  position: fixed;
  inset: 0;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: #fff;
  cursor: zoom-out;
}

/* min(80vh, 80vw): QR harus persegi dan sebesar mungkin tanpa terpotong,
   baik di proyektor melebar maupun di layar tegak. */
.qr-layar svg { width: min(80vh, 80vw); height: auto; }
.qr-layar__slug {
  font-family: var(--font-mono);
  font-size: clamp(20px, 4vw, 40px);
  font-weight: var(--fw-extrabold);
  color: #0f172a;
}
.qr-layar__petunjuk { font-size: var(--fs-sm); color: #475569; }

/* ============================== CETAK =============================== */

/* Cetak QR saja: satu lembar berisi kode besar untuk ditempel di kelas. */
:root[data-cetak="qr"] body > *:not(.modal-backdrop) { display: none !important; }
:root[data-cetak="qr"] .modal-backdrop {
  position: static;
  background: none;
}
:root[data-cetak="qr"] .modal { box-shadow: none; border: 0; max-height: none; }
:root[data-cetak="qr"] .modal__head,
:root[data-cetak="qr"] .modal__foot,
:root[data-cetak="qr"] .qr-aksi { display: none !important; }
:root[data-cetak="qr"] .qr-kotak { max-width: 15cm; border: 0; }


@media print {
  .panel { border-color: #999; break-inside: avoid; }
  .panel__head { border-bottom-color: #999; }
  .tabs, .pagebar__aksi { display: none !important; }

  /* Saat dicetak, tabel selalu dipakai — bentuk kartu memboroskan kertas */
  .hanya-kartu { display: none !important; }
  .hanya-tabel { display: block !important; }
  .tabelku th { background: #eee; }
}

/* =============================================================================
   ABSENSI
   -----------------------------------------------------------------------------
   Diisi SAAT MENGAJAR, dengan satu tangan, sambil berdiri. Itu satu-satunya
   hal yang menentukan ukuran dan jarak di bawah ini: setiap target sentuh
   minimal setinggi --tap, dan tidak ada kontrol kecil di mana pun.
   ========================================================================== */

.abs-konteks {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.abs-konteks__isi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
/* Nomor pertemuan hanya 1-2 angka; memberinya setengah layar membuat kolom
   tanggal terjepit padahal tanggal yang lebih sering dibaca. */
.abs-konteks__isi--kecil { flex: 0 0 116px; }
.abs-konteks__isi > span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.abs-konteks input {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
  outline: none;
}

/* ------------------------------ ringkasan ---------------------------- */

/*
 * Bilah jumlah per status. Bisa disentuh untuk menyaring — guru yang ingin
 * memeriksa ulang "siapa saja yang alfa" tidak perlu menggulir 36 baris.
 */
.abs-ringkas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.abs-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-2);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.abs-chip span {
  font-variant-numeric: tabular-nums;
  opacity: .75;
}
.abs-chip.is-active {
  border-color: currentColor;
  box-shadow: inset 0 0 0 1px currentColor;
}

.abs-aksi {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
}
.abs-tanda {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.abs-tanda [data-lucide] { width: 14px; height: 14px; }
.abs-tanda--baru { color: var(--warning); }

/* ------------------------------ daftar ------------------------------- */

.abs-daftar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* Bilah simpan mengalir di bawah daftar (sticky), jadi tidak perlu ruang
     sebesar tinggi bilah — cukup jarak antar keduanya. */
  padding-bottom: var(--sp-3);
}

.abs-baris {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 56px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.abs-baris__teks { flex: 1; min-width: 0; }
.abs-baris__teks strong {
  display: block;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.abs-baris__teks span { font-size: var(--fs-xs); color: var(--text-muted); }

/*
 * Tombol status berlebar TETAP, bukan mengikuti panjang labelnya.
 * "Hadir" dan "Terlambat" berbeda jauh panjangnya; tombol yang ikut berubah
 * lebar membuat posisi sasaran bergeser tiap baris, dan jari sering meleset.
 */
.abs-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: none;
  width: 116px;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.abs-status [data-lucide] { width: 15px; height: 15px; flex: none; }

/* --------------------------- warna status ---------------------------- */

.st--hadir { background: var(--success-soft); color: var(--success); }
.st--terlambat { background: var(--warning-soft); color: var(--warning); }
.st--izin { background: var(--primary-soft); color: var(--primary-strong); }
.st--sakit { background: var(--primary-soft-2); color: var(--primary-strong); }
.st--dispen { background: var(--surface-3); color: var(--text-2); }
.st--pulang { background: var(--surface-3); color: var(--text-2); }
.st--alfa { background: var(--danger-soft); color: var(--danger); }

:root[data-theme="dark"] .st--izin,
:root[data-theme="dark"] .st--sakit { color: var(--text); }

/* --------------------------- lembar pilihan -------------------------- */

.abs-pilih {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.abs-pilih__btn {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  /* Lebih tinggi daripada --tap: dipakai sambil berdiri, sering terburu-buru */
  min-height: 52px;
  padding: 0 var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  text-align: left;
  cursor: pointer;
}
.abs-pilih__btn [data-lucide] { width: 20px; height: 20px; flex: none; }
.abs-pilih__btn.is-active { border-color: currentColor; }
.abs-pilih__tanda { margin-left: auto; }

.abs-lanjut {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.abs-lanjut__isi { display: flex; flex-direction: column; gap: 5px; }
.abs-lanjut__isi > span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.abs-lanjut input {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-input);   /* 16px mencegah iOS memperbesar halaman saat fokus */
  outline: none;
}

/* --------------------------- bilah simpan ---------------------------- */

/*
 * Menempel di bawah layar. Guru mengisi absensi sambil berjalan di kelas;
 * tombol simpan yang harus dicari dengan menggulir adalah tombol yang
 * akhirnya tidak ditekan.
 */
/*
 * STICKY, bukan FIXED.
 *
 * Sidebar aplikasi ini `position: sticky` di dalam flex, bukan fixed dengan
 * konten yang digeser. Bilah `fixed` akan membentang selebar viewport dan
 * menindih sidebar di desktop. `sticky` mengikuti kolom isinya sendiri,
 * sehingga benar di HP maupun desktop tanpa satu pun penyesuaian lebar.
 */
.abs-simpan {
  position: sticky;
  /* Di HP tabbar menempel di bawah; bilah ini berhenti tepat di atasnya. */
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-2));
  z-index: 35;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md, 0 6px 20px rgba(0, 0, 0, .12));
}
.abs-simpan__ket { flex: 1; min-width: 0; font-size: var(--fs-sm); color: var(--text-muted); }
.abs-simpan__ket strong { color: var(--text); }
.abs-simpan .btn { flex: none; min-height: var(--tap); }

/* Ada perubahan tertahan: bilahnya ditegaskan agar terlihat bahwa pekerjaan
   belum tersimpan. */
.abs-simpan.is-berubah { border-color: var(--primary); }

@media (min-width: 1024px) {
  /* Tabbar tidak ada di desktop, jadi bilah berhenti di dasar layar. */
  .abs-simpan { bottom: var(--sp-4); }
}

/* =============================================================================
   RUANG PERTEMUAN
   -----------------------------------------------------------------------------
   Enam kartu keadaan, bukan enam pintasan. Guru harus dapat menjawab "apa yang
   masih kurang pada pertemuan ini" tanpa membuka satu halaman pun.
   ========================================================================== */

.ruang-kepala {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.ruang-kepala__baris { display: flex; gap: var(--sp-2); }
.ruang-kepala__isi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.ruang-kepala__isi > span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.ruang-kepala__isi select,
.ruang-kepala__isi input {
  min-height: var(--tap);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-body);
  outline: none;
}
.ruang-kepala__ket {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.ruang-kepala__ket [data-lucide] { width: 15px; height: 15px; flex: none; }
.ruang-kepala__judul {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  overflow-wrap: anywhere;
}

/* ------------------------------- kartu ------------------------------- */

/*
 * Satu kolom di HP. Di layar lebar dua-tiga kolom, TETAPI urutannya tetap
 * urutan mengajar (absensi -> materi -> keaktifan -> tugas -> nilai ->
 * jurnal), bukan urutan yang paling rapi secara visual.
 */
.ruang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
}

.ruang-kartu {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

/* Bagian yang belum dikerjakan diberi tepi kiri: guru memindai kartu mana
   yang masih menuntut perhatian tanpa membaca isinya. */
.ruang-kartu.is-perhatian { border-left: 3px solid var(--warning); }

.ruang-kartu__kepala {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.ruang-kartu__kepala h3 {
  flex: 1;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
}
.ruang-kartu__ikon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--primary-soft);
  color: var(--primary-strong);
}
:root[data-theme="dark"] .ruang-kartu__ikon { color: var(--text); }
.ruang-kartu__ikon [data-lucide] { width: 17px; height: 17px; }

.ruang-kartu__isi { display: flex; flex-direction: column; gap: 6px; }

.ruang-angka { font-size: var(--fs-body); color: var(--text-2); }
.ruang-angka strong {
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
/* Judul panjang (nama materi, judul jurnal) tidak boleh memecah tata letak */
.ruang-kartu__isi .ruang-angka strong { overflow-wrap: anywhere; }

.ruang-kosong {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.ruang-ket { font-size: var(--fs-xs); color: var(--text-muted); }

.ruang-kartu__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-1);
}

@media (min-width: 720px) {
  .ruang-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruang-kepala__baris { max-width: 420px; }
}
@media (min-width: 1280px) {
  .ruang-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Peringatan penghapusan pada pratinjau impor. Diletakkan di dalam ringkasan
   karena keputusan "lanjut atau batal" diambil tepat di situ. */
.impor__peringatan {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.impor__peringatan [data-lucide] { width: 16px; height: 16px; flex: none; }

/* Jalur cepat "buat soal dengan AI lalu impor". */
.soal-cepat {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

/*
 * Kotak instruksi AI. Dapat digulir sendiri dan tidak memanjangkan modal:
 * instruksi 20 baris akan mendorong tombol salinnya keluar layar HP.
 */
.prompt-kotak {
  max-height: 260px;
  overflow: auto;
  margin-bottom: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text-2);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--fs-meta);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =============================================================================
   KUMPULAN NILAI (gradebook)
   -----------------------------------------------------------------------------
   Dua bentuk, bukan satu yang dipaksa mengecil: tabel di layar lebar, kartu di
   HP. Tabel 8 kolom yang diperas ke 375px tidak terbaca oleh siapa pun.
   ========================================================================== */

.nilai-bobot {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.nilai-bobot [data-lucide] { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--success); }
/* Peringatan, BUKAN galat: guru tetap boleh menyimpan bobot yang belum genap. */
.nilai-bobot.is-timpang { border-color: var(--warning); background: var(--warning-soft); color: var(--warning); }
.nilai-bobot.is-timpang [data-lucide] { color: var(--warning); }

/* ------------------------------- tabel ------------------------------- */

.nilai-tabel { display: none; }

.nilai-kartu-wadah { display: flex; flex-direction: column; gap: var(--sp-2); }

.nilai-kartu {
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.nilai-kartu__kepala {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.nilai-kartu__kepala strong {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nilai-kartu__akhir {
  flex: none;
  font-size: var(--fs-h2);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.nilai-kartu__sel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.nilai-kartu__butir {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 5px 9px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  font-size: var(--fs-xs);
}
.nilai-kartu__butir span { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nilai-kartu__butir em { font-style: normal; opacity: .7; }
.nilai-kartu__butir strong { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
/* Sel kosong dibuat pudar, dan isinya "—" bukan 0. */
.nilai-kartu__butir.is-kosong strong { color: var(--text-muted); font-weight: var(--fw-normal); }

.nilai-kartu__ket { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--warning); }

/* ---------------------------- isian nilai ---------------------------- */

.nilai-isi { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
.nilai-isi__baris {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 0;
}
.nilai-isi__nama {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nilai-isi input {
  flex: none;
  width: 76px;
  min-height: var(--tap);
  padding: 0 var(--sp-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  /* 16px mencegah iOS memperbesar halaman saat isian difokuskan */
  font-size: var(--fs-input);
  text-align: center;
  outline: none;
}

@media (min-width: 900px) {
  /* Layar lebar: tabel menggantikan kartu sepenuhnya. */
  .nilai-kartu-wadah { display: none; }
  .nilai-tabel {
    display: block;
    overflow-x: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
  }
  .nilai-tabel table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .nilai-tabel th, .nilai-tabel td {
    padding: var(--sp-2) var(--sp-3);
    border-bottom: 1px solid var(--border);
    text-align: center;
  }
  .nilai-tabel thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--surface-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
  }
  .nilai-tabel td:first-child, .nilai-tabel th:first-child { width: 44px; }
  .nilai-td__nama, .nilai-tabel th:nth-child(2) { text-align: left; white-space: nowrap; }

  .nilai-th__btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
  }
  .nilai-th__nama { font-weight: var(--fw-bold); color: var(--text); }
  .nilai-th__bobot { font-size: var(--fs-xs); color: var(--text-muted); }
  .nilai-th__galat { font-size: var(--fs-xs); color: var(--warning); }

  .nilai-td { font-variant-numeric: tabular-nums; }
  .nilai-td.is-kosong { color: var(--text-muted); }
  .nilai-td__lama { color: var(--primary); font-weight: 700; }
  .nilai-td__akhir { background: var(--surface-2); }
  .nilai-td__akhir strong { font-size: var(--fs-body); }
  .nilai-td__sebagian {
    display: block;
    font-size: var(--fs-xs);
    color: var(--warning);
    font-variant-numeric: tabular-nums;
  }
  .nilai-th__akhir { background: var(--surface-3); }
}

/* =============================================================================
   LAPISAN INTERAKSI — "Buku Kerja"
   Gerak yang MENJELASKAN, bukan menghias: halaman baru masuk, yang dapat
   ditekan terangkat di bawah kursor, yang ditekan tertekan. Semuanya tunduk
   pada aturan global `prefers-reduced-motion` di style.css.
   ========================================================================== */

/* Masuk halaman: anak langsung #view naik 6px dan memudar masuk, berurutan.
   Hanya anak LANGSUNG — FAB yang `position: fixed` memang anak langsung, dan
   transform pada leluhurnya akan menggeser posisinya selama animasi. */
@keyframes masukHalaman {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.view.is-masuk > * {
  animation: masukHalaman 220ms var(--ease) backwards;
}
.view.is-masuk > :nth-child(2) { animation-delay: 30ms; }
.view.is-masuk > :nth-child(3) { animation-delay: 60ms; }
.view.is-masuk > :nth-child(4) { animation-delay: 90ms; }
.view.is-masuk > :nth-child(5) { animation-delay: 120ms; }
.view.is-masuk > :nth-child(n+6) { animation-delay: 150ms; }

/* Angkat di bawah kursor — HANYA perangkat berkursor. Di layar sentuh, hover
   "menempel" setelah diketuk dan kartu tampak terangkat tanpa alasan. */
@media (hover: hover) and (pointer: fine) {
  a.list-item, a.class-card, .menu-card, .quick, .jawab-kartu,
  .ruang-kartu, .kkelas, .slanjut__kartu {
    transition: transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease),
      border-color var(--t-fast) var(--ease);
  }
  a.list-item:hover, a.class-card:hover, .menu-card:hover, .quick:hover,
  .jawab-kartu:hover, .kkelas:hover, .slanjut__kartu:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .btn--primary:hover { box-shadow: 0 4px 14px rgba(61, 79, 214, .28); }
}

/* Cincin fokus satu bentuk di seluruh aplikasi, dari token */
.btn:focus-visible, .icon-btn:focus-visible, a.list-item:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Teks yang dipilih memakai stabilo — kecil, tetapi terasa "buku kerja" */
::selection { background: var(--stabilo-soft); color: var(--text); }

/* ------------------------- Lintasan alur pertemuan ------------------------ */

/* Enam langkah mengajar dalam satu baris. Batang di atasnya terisi stabilo —
   satu-satunya tempat di halaman ini yang memakai warna sorot, sehingga mata
   langsung tahu seberapa jauh pertemuan ini sudah berjalan. */
.lintasan {
  padding: var(--sp-3) var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}
.lintasan__kepala {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--text-muted);
}
.lintasan__kepala strong { font-size: var(--fs-sm); color: var(--text); letter-spacing: 0; text-transform: none; }

.lintasan__batang {
  position: relative;
  height: 6px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-full);
  background: var(--surface-3);
  overflow: hidden;
}
/* Diisi dengan `transform: scaleX`, bukan `width`: animasi `width` memaksa
   peramban menghitung ulang tata letak di setiap bingkai, sedangkan
   transform dikerjakan kompositor (web.dev, "High-performance CSS
   animations"). Lebarnya tetap penuh; yang berubah hanya skalanya. */
.lintasan__batang::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--stabilo);
  transform-origin: left center;
  transform: scaleX(var(--maju, 0));
  transition: transform var(--t-slow) var(--ease);
  animation: lintasanIsi 600ms var(--ease-tegas) backwards 120ms;
}
@keyframes lintasanIsi { from { transform: scaleX(0); } }

.lintasan__langkah {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-1);
  margin: 0; padding: 0; list-style: none;
}
.lintasan__item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 4px 2px;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  text-align: center;
  transition: background var(--t-fast) var(--ease);
}
.lintasan__item:active { background: var(--surface-2); }
.lintasan__titik {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1.5px dashed var(--border-strong);
  background: var(--surface);
}
.lintasan__titik [data-lucide] { width: 16px; height: 16px; }
.lintasan__label {
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.lintasan__item.is-selesai { color: var(--text); }
.lintasan__item.is-selesai .lintasan__titik {
  border: 0;
  background: var(--success);
  color: #fff;
}
:root[data-theme="dark"] .lintasan__item.is-selesai .lintasan__titik { color: var(--text-invert); }

/* Langkah berikutnya: tinta, berdenyut pelan — "di sini selanjutnya" */
.lintasan__item.is-berikut { color: var(--primary); }
.lintasan__item.is-berikut .lintasan__titik {
  border: 2px solid var(--primary);
  background: var(--primary-soft-2);
  animation: lintasanDenyut 2.4s var(--ease) infinite;
}
@keyframes lintasanDenyut {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61, 79, 214, 0); }
  50%      { box-shadow: 0 0 0 5px rgba(61, 79, 214, .14); }
}

/* Kartu yang dituju dari lintasan berkedip sorot sekali */
.ruang-kartu.is-sorot { animation: kartuSorot 900ms var(--ease); }
@keyframes kartuSorot {
  0%   { box-shadow: 0 0 0 0 rgba(245, 193, 61, 0); }
  30%  { box-shadow: 0 0 0 4px rgba(245, 193, 61, .55); }
  100% { box-shadow: 0 0 0 0 rgba(245, 193, 61, 0); }
}
.ruang-kartu { scroll-margin-top: calc(var(--topbar-h) + var(--sp-3)); }

/* Di HP enam kolom hanya ±44 px: "Keaktifan" butuh 51 px dan terpotong.
   Merapatkan tepi dalam kartu memberi tiap kolom cukup ruang tanpa
   menyingkat label (singkatan seperti "Aktif" tidak lagi berarti hal yang
   sama dengan menu Keaktifan). */
@media (max-width: 420px) {
  .lintasan { padding-left: var(--sp-2); padding-right: var(--sp-2); }
  .lintasan__langkah { gap: 0; }
  .lintasan__item { padding-left: 0; padding-right: 0; }
}

/* Pengumuman tebakan nomor pertemuan */
.ruang-tebak {
  display: flex; align-items: flex-start; gap: 6px;
  margin-top: var(--sp-2);
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--stabilo-soft);
  color: var(--stabilo-ink);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.ruang-tebak [data-lucide] { width: 15px; height: 15px; flex: none; margin-top: 1px; }

/* ---------------------------- Tugas berjalan ----------------------------- */

/* Beranda: kemajuan tugas yang sedang dibuka. Batangnya stabilo — sorotan
   untuk sesuatu yang sedang terjadi sekarang. */
.tberjalan .panel__isi { display: flex; flex-direction: column; gap: var(--sp-2); }
.tberjalan__item {
  display: flex; flex-direction: column; gap: 6px;
  padding: var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: inherit;
}
.tberjalan__item:active { transform: scale(.99); }
.tberjalan__baris { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.tberjalan__baris strong {
  min-width: 0; font-size: var(--fs-h3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tberjalan__angka {
  flex: none;
  font-size: var(--fs-h2); font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
}
.tberjalan__angka small { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-muted); }
.tberjalan__batang {
  height: 6px; border-radius: var(--r-full);
  background: var(--surface-3); overflow: hidden;
}
.tberjalan__batang span {
  display: block; height: 100%;
  border-radius: inherit; background: var(--stabilo);
  transform-origin: left center;
  transform: scaleX(var(--maju, 0));
  animation: lintasanIsi 700ms var(--ease-tegas) backwards 150ms;
}
.tberjalan__meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--sp-3);
  font-size: var(--fs-meta); color: var(--text-muted);
}
.tberjalan__meta span { display: inline-flex; align-items: center; gap: 4px; }
.tberjalan__meta [data-lucide] { width: 13px; height: 13px; }
.tberjalan__sisa--mendesak { color: var(--danger); font-weight: var(--fw-bold); }

/* Ringkasan beranda: empat angka dalam 2×2 di HP, bukan empat baris penuh
   yang menghabiskan satu layar untuk empat angka. */
.layout-kerja__samping .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------------------- "Ada data terbaru" ------------------------------- */

/* Muncul bila data terbaru tiba saat guru sedang bekerja di halaman itu:
   halamannya tidak diubah di bawah jarinya, tetapi ia diberi tahu. */
.pil-baru {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-h) + var(--safe-bottom) + var(--sp-3));
  z-index: var(--z-toast);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  border: 0; border-radius: var(--r-full);
  background: var(--text); color: var(--background);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transform: translateX(-50%);
  animation: pilMasuk 280ms var(--ease-pegas) backwards;
}
.pil-baru [data-lucide] { width: 15px; height: 15px; }
@keyframes pilMasuk {
  from { opacity: 0; transform: translate(-50%, 12px) scale(.96); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
@media (min-width: 1024px) { .pil-baru { bottom: var(--sp-6); } }

/* ------------------------- Transisi antarhalaman ------------------------- */

/* View Transitions API: hanya isi halaman dan judulnya yang bergerak.
   Sidebar dan bilah bawah tidak berubah antarhalaman, jadi tidak diberi nama
   dan tidak tampak bergerak sama sekali — yang diam tetap diam.
   Durasi mengikuti NN/g (keluar ±120 ms, masuk ±280 ms). */
@media (prefers-reduced-motion: no-preference) {
  #view { view-transition-name: isi-halaman; }
  #pageTitle { view-transition-name: judul-halaman; }

  ::view-transition-old(isi-halaman) {
    animation: transKeluar 120ms var(--ease-keluar) both;
  }
  ::view-transition-new(isi-halaman) {
    animation: transMasuk 280ms var(--ease-tegas) both;
  }
  ::view-transition-old(judul-halaman),
  ::view-transition-new(judul-halaman) {
    animation-duration: 200ms;
    animation-timing-function: var(--ease);
    /* Teks judul berbeda panjang: tanpa ini peramban meregangkannya. */
    height: 100%;
    object-fit: none;
    object-position: left center;
  }
}
@keyframes transKeluar { to { opacity: 0; transform: translateY(-4px); } }
@keyframes transMasuk { from { opacity: 0; transform: translateY(10px); } }

/* ----------------------- Muncul saat digulir ----------------------------- */

/* Kartu dan baris daftar naik pelan ke tempatnya saat memasuki layar.
   CSS scroll-driven animation: dikerjakan peramban tanpa JavaScript dan tanpa
   pendengar gulir. Hanya di peramban yang mendukung (@supports), hanya bila
   gerak tidak diminta dikurangi; yang lain melihat semuanya langsung. Elemen
   yang sudah terlihat saat halaman dibuka tidak bergerak sama sekali. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .list > .list-item, .ruang-kartu, .kkelas, .tberjalan__item,
    .jawab-kartu, .skartu, .detail-soal, .tugas-kartu {
      animation: munculGulir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes munculGulir {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
}

/* ------------------------ Bilah bawah: tab aktif -------------------------- */

/* Ikon tab yang baru dipilih memantul kecil sekali — umpan balik bahwa
   ketukannya diterima, ±100 ms menurut NN/g untuk umpan balik sederhana,
   diperpanjang sedikit oleh pegasnya. */
.tab.is-active [data-lucide] { animation: tabPantul 360ms var(--ease-pegas); }
@keyframes tabPantul {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18) translateY(-1px); }
  100% { transform: scale(1); }
}

/* ===========================================================================
 * ALUR PEMBELAJARAN  (js/alur.js, docs/17)
 * ---------------------------------------------------------------------------
 * Satu rel vertikal = urutan pertemuan. Setiap pemberhentian menunjukkan di
 * mana tiap kelas berada. Gerak hanya transform/opacity (dikerjakan GPU) dan
 * ikut prefers-reduced-motion lewat aturan global.
 * ======================================================================== */

.alur-kepala {
  position: relative;
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--stabilo-soft) 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--border);
  overflow: hidden;
}
/* Garis buku tulis — motif "Buku Kerja", samar di belakang teks. */
.alur-kepala::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(transparent 0 27px, var(--border) 27px 28px);
  opacity: .35;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
          mask-image: linear-gradient(90deg, transparent, #000 70%);
}
.alur-kepala > * { position: relative; z-index: 1; }
.alur-kepala__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--primary);
}
.alur-kepala__eyebrow [data-lucide] { width: 15px; height: 15px; }
.alur-kepala__judul {
  font-size: var(--fs-xl); font-weight: var(--fw-extrabold);
  letter-spacing: var(--tracking-tight); line-height: var(--lh-tight);
}
.alur-kepala__ket { color: var(--text-muted); font-size: var(--fs-sm); max-width: 60ch; }
.alur-kepala__ket strong { color: var(--text); }
.alur-kepala__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.alur-angka {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--stabilo);
  color: #2b2100;   /* tetap gelap di kedua tema: latarnya selalu kuning stabilo */
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
@media (min-width: 768px) {
  .alur-kepala { grid-template-columns: 1fr auto; align-items: end; }
  .alur-mapel { grid-column: 1 / -1; }
}

.alur-mapel { display: flex; flex-wrap: wrap; gap: 6px; }
.alur-mapel__chip {
  min-height: 34px; padding: 0 14px;
  border-radius: var(--r-full); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); font: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer;
  transition: background var(--t-base) var(--ease), color var(--t-base) var(--ease), transform var(--t-fast) var(--ease);
}
.alur-mapel__chip:active { transform: scale(.96); }
.alur-mapel__chip.is-on { background: var(--text); color: var(--background); border-color: var(--text); }

/* ------------------------------ lajur kelas ------------------------------ */

.alur-lajur {
  display: flex; gap: var(--sp-3);
  margin-top: var(--sp-4);
  /* Ruang di atas untuk lencana "mundur" yang menonjol keluar kartu. */
  padding: 12px 2px var(--sp-2);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.alur-lajur__semua, .alur-lajur__kartu {
  scroll-snap-align: start;
  flex: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface);
  border-radius: var(--r-md);
  transition: transform var(--t-base) var(--ease-tegas), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.alur-lajur__semua {
  display: grid; place-items: center; gap: 4px;
  width: 92px; padding: var(--sp-3);
  font-size: var(--fs-meta); font-weight: var(--fw-semibold); color: var(--text-muted);
}
.alur-lajur__kartu {
  position: relative;
  display: grid; grid-template-columns: 44px 1fr; gap: var(--sp-3); align-items: center;
  width: 252px; padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-3);
}
.alur-lajur__semua.is-on, .alur-lajur__kartu.is-on {
  border-color: var(--primary);
  box-shadow: var(--ring);
}
.alur-lajur__semua.is-on { color: var(--primary); }
@media (hover: hover) {
  .alur-lajur__kartu:hover, .alur-lajur__semua:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
}
.alur-lajur__isi { display: grid; gap: 1px; min-width: 0; }
.alur-lajur__isi strong { font-size: var(--fs-body); }
.alur-lajur__p { font-size: var(--fs-meta); color: var(--text-muted); }
.alur-lajur__ket {
  font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.alur-lajur__ket.is-redup { color: var(--text-muted); }
.alur-lajur__tanda {
  position: absolute; top: -8px; right: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-muted);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.alur-lajur__tanda [data-lucide] { width: 12px; height: 12px; }
.alur-lajur__tanda.is-mundur { background: var(--warning-soft); color: var(--warning); }
.alur-kini { color: var(--primary); font-weight: var(--fw-bold); }

/* Cincin kemajuan: berapa materi alur yang sudah sampai di kelas ini. */
.alur-cincin { grid-row: 1; grid-column: 1; width: 44px; height: 44px; transform: rotate(-90deg); }
.alur-cincin__dasar { fill: none; stroke: var(--surface-3); stroke-width: 4; }
.alur-cincin__isi {
  fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: var(--keliling);
  stroke-dashoffset: calc(var(--keliling) * (1 - var(--maju)));
  animation: cincinIsi var(--t-panjang) var(--ease-tegas) both;
}
@keyframes cincinIsi { from { stroke-dashoffset: var(--keliling); } }
.alur-cincin__angka {
  grid-row: 1; grid-column: 1; justify-self: center;
  font-size: var(--fs-meta); font-weight: var(--fw-extrabold);
}
.alur-cincin__angka small { font-weight: var(--fw-medium); color: var(--text-muted); }

/* ------------------------------ peringatan mundur ------------------------ */

.alur-mundur {
  margin-top: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--warning-soft);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.alur-mundur__kepala { display: flex; gap: var(--sp-3); }
.alur-mundur__kepala > [data-lucide] { flex: none; color: var(--warning); margin-top: 2px; }
.alur-mundur__kepala p { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; }
.alur-mundur__daftar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.alur-mundur__tgl {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 4px 4px 4px 12px; border-radius: var(--r-md);
  background: var(--surface); font-size: var(--fs-sm); font-weight: var(--fw-semibold);
}
.alur-luar { margin-top: var(--sp-4); }

/* ---------------------------------- rel ---------------------------------- */

.alur-rel { margin-top: var(--sp-5); }
.alur-rel__daftar {
  position: relative;
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--sp-4);
}
/* Rel: satu garis putus-putus di belakang semua titik. */
.alur-rel__daftar::before {
  content: "";
  position: absolute; left: 19px; top: 20px; bottom: -40px; width: 2px;
  background: repeating-linear-gradient(var(--border-strong) 0 6px, transparent 6px 11px);
  transform-origin: top;
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .alur-rel__daftar::before {
      animation: relTumbuh linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 50%;
    }
    .alur-simpul {
      animation: munculGulir linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes relTumbuh { from { transform: scaleY(0); } }

.alur-simpul { position: relative; padding-left: 56px; }
.alur-simpul__titik {
  position: absolute; left: 0; top: 10px;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border-strong);
  font-weight: var(--fw-extrabold); font-size: var(--fs-body);
  color: var(--text-muted);
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.alur-simpul__titik [data-lucide] { width: 18px; height: 18px; }
.alur-simpul.is-selesai .alur-simpul__titik { background: var(--success); border-color: var(--success); color: #fff; }
.alur-simpul.is-sebagian .alur-simpul__titik {
  background: linear-gradient(90deg, var(--success-soft) 50%, var(--surface) 50%);
  border-color: var(--success); color: var(--success);
}
.alur-simpul.is-hari_ini .alur-simpul__titik { background: var(--primary); border-color: var(--primary); color: var(--text-invert); }
.alur-simpul.is-hari_ini .alur-simpul__titik::after {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--primary);
  animation: titikDenyut 1.8s var(--ease) infinite;
}
@keyframes titikDenyut { to { transform: scale(1.6); opacity: 0; } }

.alur-simpul__tgl {
  display: inline-flex; align-items: baseline; gap: 8px;
  margin: 2px 0 6px;
  font-size: var(--fs-sm);
}
.alur-simpul__tgl b { font-weight: var(--fw-extrabold); }
.alur-simpul__tgl small { color: var(--text-muted); font-size: var(--fs-meta); }
.alur-simpul.is-hari_ini .alur-simpul__tgl b { color: var(--primary); }

.alur-kartu {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease-tegas), box-shadow var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
@media (hover: hover) {
  .alur-kartu:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
}
.alur-simpul.is-hari_ini .alur-kartu { border-color: var(--primary); box-shadow: var(--ring); }
.alur-simpul.is-selesai .alur-kartu { background: var(--surface-2); }

.alur-kartu__kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.alur-kartu__no {
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.alur-kartu__geser { display: flex; align-items: center; gap: 2px; margin: -6px -8px -6px 0; }
.alur-kartu__geser .icon-btn:disabled { opacity: .3; pointer-events: none; }
.alur-pegangan {
  display: grid; place-items: center; width: 34px; height: 34px;
  color: var(--text-muted); cursor: grab; touch-action: none; border-radius: var(--r-sm);
}
.alur-pegangan:active { cursor: grabbing; background: var(--surface-3); }
.alur-pegangan [data-lucide] { width: 18px; height: 18px; }

/* Judul materi digaris stabilo — gores sekali saat muncul. */
.alur-kartu__judul, .ruang-alur__judul {
  justify-self: start;
  font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight);
  color: var(--text); text-decoration: none;
  background: linear-gradient(transparent 62%, var(--stabilo-soft) 62%, var(--stabilo-soft) 92%, transparent 92%) no-repeat;
  background-size: 100% 100%;
  animation: stabiloGores 700ms var(--ease-tegas) 120ms both;
}
@keyframes stabiloGores { from { background-size: 0% 100%; } }
.alur-kartu__judul:hover { text-decoration: underline; text-decoration-color: var(--stabilo); text-underline-offset: 3px; }

.alur-kartu__rinci {
  color: var(--text-muted); font-size: var(--fs-sm);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alur-kartu__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.alur-meta {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--r-full);
  background: var(--surface-3); color: var(--text-muted);
  font-size: var(--fs-meta); font-weight: var(--fw-semibold); text-decoration: none;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.alur-meta [data-lucide] { width: 13px; height: 13px; flex: none; }
.alur-meta--siap { background: var(--success-soft); color: var(--success); }

.alur-kelas { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--sp-1); transition: opacity var(--t-base) var(--ease); }
.alur-chip {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; padding: 0 10px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none;
  font-size: var(--fs-meta); white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-base) var(--ease);
}
.alur-chip:active { transform: scale(.96); }
.alur-chip b { font-weight: var(--fw-bold); }
.alur-chip [data-lucide] { width: 13px; height: 13px; }
.alur-chip.is-selesai { background: var(--success-soft); border-color: transparent; color: var(--success); }
.alur-chip.is-selesai b { color: var(--text); }
.alur-chip.is-perkiraan { border-style: dashed; }
.alur-chip.is-hari_ini { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); }
.alur-chip.is-tanpa_jadwal { color: var(--text-muted); border-style: dashed; }
.alur-denyut {
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
  animation: denyutTitik 1.4s var(--ease) infinite;
}
@keyframes denyutTitik { 50% { opacity: .25; transform: scale(.7); } }

.alur-kartu__aksi { display: flex; flex-wrap: wrap; gap: 6px; padding-top: var(--sp-1); border-top: 1px dashed var(--border); }
.alur-kartu__aksi .btn { margin-top: var(--sp-2); }

/* Mengurutkan: kartu terangkat, tempatnya ditandai, sisanya menunggu server. */
.alur-simpul.is-diseret { pointer-events: none; }
.alur-simpul.is-diseret .alur-kartu { box-shadow: var(--shadow-lg); border-color: var(--primary); }
.alur-bayangan {
  list-style: none; margin-left: 56px;
  border: 2px dashed var(--primary); border-radius: var(--r-md);
  background: var(--primary-soft); opacity: .6;
}
.alur-rel__daftar.is-menyeret { user-select: none; -webkit-user-select: none; }
.alur-rel.is-menunggu .alur-kelas,
.alur-rel.is-menunggu .alur-simpul__tgl { opacity: .35; }
.alur-simpul.is-dipindah .alur-simpul__titik { animation: titikPindah 420ms var(--ease-pegas); }
@keyframes titikPindah { 40% { transform: scale(1.2); } }

/* ----------------------------- tambah cepat ------------------------------ */

.alur-tambah { position: relative; padding-left: 56px; margin-top: var(--sp-4); }
.alur-tambah__titik { border-style: dashed; color: var(--primary); border-color: var(--primary); background: var(--surface); }
.alur-tambah__isi {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4);
  border: 2px dashed var(--border-strong); border-radius: var(--r-md);
  background: var(--surface-2);
  transition: border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.alur-tambah:focus-within .alur-tambah__isi { border-color: var(--primary); background: var(--surface); }
.alur-tambah__isi input, .alur-tambah__isi textarea {
  width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 0;
  background: transparent; padding: 8px 0; font: inherit; font-size: var(--fs-input); color: var(--text);
  resize: vertical;
}
.alur-tambah__isi input:focus, .alur-tambah__isi textarea:focus { outline: none; border-bottom-color: var(--primary); }
.alur-tambah__judul { font-weight: var(--fw-bold); }
.alur-tambah__aksi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-1); }

.alur-kosong {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-4); margin-left: 56px;
  border-radius: var(--r-md); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-sm);
}
.alur-kosong strong { color: var(--text); }

/* ------------------------------- hari libur ------------------------------ */

.libur-daftar { display: grid; gap: 6px; margin-bottom: var(--sp-3); }
.libur-baris {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  padding: 8px 8px 8px 12px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
}
.libur-baris.is-lewat { opacity: .55; }
.libur-baris__tgl { font-weight: var(--fw-bold); font-size: var(--fs-sm); white-space: nowrap; }
.libur-baris__isi { display: grid; min-width: 0; }
.libur-baris__isi small { color: var(--text-muted); font-size: var(--fs-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* -------------------------- Ruang Pertemuan: alur ------------------------- */

.ruang-alur {
  position: relative;
  display: grid; gap: var(--sp-2);
  margin-bottom: var(--sp-4); padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 100% 0%, var(--primary-soft) 0%, transparent 60%),
    var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.ruang-alur::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--primary);
}
.ruang-alur.is-mundur::before { background: var(--warning); }
.ruang-alur.is-kosong::before { background: var(--border-strong); }
.ruang-alur__eyebrow {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--primary);
}
.ruang-alur__eyebrow [data-lucide] { width: 14px; height: 14px; }
.ruang-alur__judul { font-size: var(--fs-xl); }
.ruang-alur__rinci { color: var(--text-muted); font-size: var(--fs-body); max-width: 70ch; }
/* Bentuk KALIMAT, bukan flex: dengan flex setiap <strong> menjadi kolom
   sendiri dan "Tugas siap: Tugas 3 — …" terpecah jadi tiga kolom di HP. */
.ruang-alur__tujuan, .ruang-alur__tugas, .ruang-alur__mundur {
  position: relative; display: block; padding-left: 24px; font-size: var(--fs-sm);
}
.ruang-alur__tujuan [data-lucide], .ruang-alur__tugas [data-lucide], .ruang-alur__mundur [data-lucide] {
  position: absolute; left: 0; top: 2px; width: 16px; height: 16px; color: var(--text-muted);
}
.ruang-alur__mundur {
  padding: 8px 10px 8px 34px; border-radius: var(--r-sm);
  background: var(--warning-soft); color: var(--warning);
}
.ruang-alur__mundur [data-lucide] { color: var(--warning); left: 10px; top: 10px; }
.ruang-alur__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-1); }
.ruang-alur--ajak {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  color: var(--text); text-decoration: none; border-style: dashed; box-shadow: none;
}
.ruang-alur--ajak::before { display: none; }
.ruang-alur--ajak > [data-lucide]:first-child { color: var(--primary); }
.ruang-alur--ajak span { display: grid; font-size: var(--fs-sm); color: var(--text-muted); }
.ruang-alur--ajak strong { color: var(--text); font-size: var(--fs-body); }

/* --------------------------------- agenda --------------------------------- */

.agenda-mundur {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0 var(--sp-4) var(--sp-2); padding: 8px 10px; border-radius: var(--r-sm);
  background: var(--warning-soft); color: var(--warning); font-size: var(--fs-sm);
}
.agenda-mundur [data-lucide] { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.agenda-hari + .agenda-hari { margin-top: var(--sp-3); }
.agenda-hari__label {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 6px; font-size: var(--fs-sm);
}
.agenda-hari__label span { color: var(--text-muted); font-size: var(--fs-meta); }
.agenda-item {
  position: relative;
  display: grid; grid-template-columns: 52px 1fr auto; gap: var(--sp-3); align-items: center;
  padding: 10px 12px 10px 14px; margin-top: 6px;
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-decoration: none;
  transition: transform var(--t-base) var(--ease-tegas), box-shadow var(--t-base) var(--ease);
}
.agenda-item::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--primary);
}
@media (hover: hover) { .agenda-item:hover { transform: translateX(3px); box-shadow: var(--shadow-sm); } }
.agenda-item__jam { font-weight: var(--fw-extrabold); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.agenda-item__isi { display: grid; min-width: 0; }
.agenda-item__isi strong { font-size: var(--fs-body); }
.agenda-item__isi small { color: var(--text-muted); font-weight: var(--fw-medium); }
.agenda-item__isi span { font-size: var(--fs-sm); color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-item > [data-lucide] { width: 18px; height: 18px; color: var(--text-muted); }
.agenda-item.is-sudah { background: var(--surface-2); }
.agenda-item.is-sudah::before { background: var(--success); }
.agenda-item.is-sudah > [data-lucide] { color: var(--success); }
.agenda-item.is-kosong .agenda-item__isi span { font-style: italic; }
.agenda-item.is-kosong::before { background: var(--border-strong); }

/* Materi hari ini di kartu "kelas berikutnya" (latar aksen). */
.next__materi {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  justify-self: start;
  padding: 5px 12px; border-radius: var(--r-full);
  background: rgba(255, 255, 255, .16);
  font-size: var(--fs-sm);
  animation: transMasuk var(--t-sedang) var(--ease-tegas) both;
}
.next__materi [data-lucide] { width: 15px; height: 15px; }
.next__materi[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .alur-cincin__isi, .alur-kartu__judul, .ruang-alur__judul, .next__materi,
  .alur-simpul.is-hari_ini .alur-simpul__titik::after, .alur-denyut { animation: none; }
}

/* ===========================================================================
 * MEJA TUGAS — daftar Pengumpulan Tugas (js/submission.js, docs/17 §B)
 * ---------------------------------------------------------------------------
 * Tiga keadaan yang langsung terbaca dari bentuknya: DIBUKA (tiket kode +
 * hitung mundur), BELUM DIBUKA (garis putus-putus, satu ketukan untuk
 * membuka), SELESAI (redup). Gerak hanya transform/opacity.
 * ======================================================================== */

.meja-kepala { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.meja-kepala__aksi { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
@media (min-width: 768px) {
  .meja-kepala { grid-template-columns: 1fr auto; align-items: center; }
}
.meja-statistik { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.meja-stat {
  position: relative;
  display: grid; gap: 2px; align-content: start;
  padding: var(--sp-3);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface);
  overflow: hidden;
}
.meja-stat strong { font-size: var(--fs-xl); font-weight: var(--fw-extrabold); line-height: 1; font-variant-numeric: tabular-nums; }
.meja-stat > span:last-child { font-size: var(--fs-meta); color: var(--text-muted); line-height: var(--lh-tight); }
.meja-stat__ikon {
  position: absolute; right: 10px; top: 10px; color: var(--text-muted); opacity: .5;
}
.meja-stat__ikon [data-lucide] { width: 18px; height: 18px; }
.meja-stat.is-hidup { border-color: color-mix(in srgb, var(--success) 40%, var(--border)); }
.meja-stat.is-hidup strong { color: var(--success); }
.meja-stat.is-baru strong { color: var(--primary); }
.meja-stat.is-perhatian strong { color: var(--warning); }

/* minmax(0, 1fr): tanpa ini kolom grid selebar isinya, dan tab + pemilih
   kelas mendorong halaman melebihi layar HP (gulir ke samping). */
.meja-kendali { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-4); }
.meja-kendali .segmented--tugas { margin-bottom: 0; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.meja-kendali .segmented--tugas::-webkit-scrollbar { display: none; }
.meja-kendali__cari { display: flex; gap: var(--sp-2); min-width: 0; }
.meja-kendali__cari .search-inline { flex: 1; min-width: 0; }
.meja-kendali__cari .pilih-ringkas { flex: none; max-width: 42%; }
@media (min-width: 1024px) {
  .meja-kendali { grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); align-items: center; }
}

.meja-daftar { display: grid; gap: var(--sp-3); }
@media (min-width: 1100px) { .meja-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }

.meja-kartu {
  position: relative;
  display: grid;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform var(--t-base) var(--ease-tegas), box-shadow var(--t-base) var(--ease);
}
@media (hover: hover) { .meja-kartu:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } }
.meja-kartu.is-buka { border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.meja-kartu.is-buka::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--success), var(--primary));
}
.meja-kartu.is-draf { border-style: dashed; border-width: 2px; background: var(--surface-2); box-shadow: none; }
.meja-kartu.is-selesai .meja-kartu__judul { color: var(--text-muted); }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .meja-kartu { animation: munculGulir linear both; animation-timeline: view(); animation-range: entry 0% entry 30%; }
  }
}

.meja-kartu__utama { display: grid; grid-template-columns: 1fr auto; gap: var(--sp-3); padding: var(--sp-4); }
.meja-kartu__isi { display: grid; gap: 6px; min-width: 0; color: inherit; text-decoration: none; }
.meja-kartu__status {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
}
.meja-kartu__status [data-lucide] { width: 14px; height: 14px; }
.meja-kartu.is-buka .meja-kartu__status { color: var(--success); }
.meja-kartu.is-buka .meja-kartu__status [data-lucide] { animation: denyutTitik 1.6s var(--ease) infinite; }
.meja-kartu.is-draf .meja-kartu__status { color: var(--primary); }
.meja-kartu__judul { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-tight); }
.meja-kartu__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--fs-meta); color: var(--text-muted); }
.meja-kartu__meta span { display: inline-flex; align-items: center; gap: 4px; }
.meja-kartu__meta [data-lucide] { width: 13px; height: 13px; }

.meja-baru {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 1px 8px; border-radius: var(--r-full);
  background: var(--primary-soft); color: var(--primary);
  text-transform: none; letter-spacing: 0;
}
.meja-baru__titik { position: relative; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.meja-baru__titik::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: currentColor;
  animation: titikDenyut 1.6s var(--ease) infinite;
}

/* Cincin: total yang sudah mengumpulkan, digambar saat muncul. */
.meja-cincin { position: relative; display: grid; place-items: center; width: 60px; height: 60px; align-self: start; }
.meja-cincin svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.meja-cincin__dasar { fill: none; stroke: var(--surface-3); stroke-width: 5; }
.meja-cincin__isi {
  fill: none; stroke: var(--success); stroke-width: 5; stroke-linecap: round;
  stroke-dasharray: var(--keliling);
  stroke-dashoffset: calc(var(--keliling) * (1 - var(--maju)));
  animation: cincinIsi var(--t-panjang) var(--ease-tegas) both;
}
.meja-cincin__angka { position: relative; display: grid; justify-items: center; line-height: 1; }
.meja-cincin__angka b { font-size: var(--fs-body); font-weight: var(--fw-extrabold); }
.meja-cincin__angka small { font-size: var(--fs-xs); color: var(--text-muted); }

/* Progres per kelas: scaleX, bukan width. */
.kelas-progres__isi.is-skala {
  width: 100%;
  transform-origin: left;
  transform: scaleX(var(--maju, 0));
  animation: lintasanIsi var(--t-panjang) var(--ease-tegas) both;
}

/* Tiket kode: sobekan berlubang di antara kartu dan kode. */
.meja-tiket {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px var(--sp-3);
  margin: 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-top: 2px dashed var(--border-strong);
  background: var(--stabilo-soft);
  border-radius: 0 0 var(--r-md) var(--r-md);
}
.meja-tiket::before, .meja-tiket::after {
  content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border);
}
.meja-tiket::before { left: -8px; } .meja-tiket::after { right: -8px; }
.meja-tiket__label { grid-column: 1 / -1; font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--stabilo-ink); }
.meja-tiket__kode {
  font: inherit; font-family: var(--font-mono); font-size: 26px; font-weight: var(--fw-extrabold);
  letter-spacing: .18em; color: var(--text);
  background: none; border: 0; padding: 0; cursor: copy; justify-self: start;
  transition: transform var(--t-fast) var(--ease);
}
.meja-tiket__kode:active { transform: scale(.97); }
.meja-tiket__kode.is-tersalin { animation: tersalin 600ms var(--ease-pegas); }
@keyframes tersalin { 30% { transform: scale(1.08); color: var(--success); } }
.meja-tiket__waktu { justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--stabilo-ink); }
.meja-tiket__waktu [data-lucide] { width: 15px; height: 15px; }
.meja-tiket__batang {
  grid-column: 1 / -1; height: 5px; margin-top: 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--stabilo) 30%, transparent); overflow: hidden;
}
.meja-tiket__batang > span {
  display: block; height: 100%; border-radius: inherit; background: var(--stabilo);
  transform-origin: left; transform: scaleX(var(--sisa, 1));
  transition: transform 1s linear;
}
.meja-tiket.is-kritis { background: var(--warning-soft); }
.meja-tiket.is-kritis .meja-tiket__batang > span { background: var(--warning); }
.meja-tiket.is-kritis .meja-tiket__waktu { color: var(--warning); animation: denyutTitik 1.4s var(--ease) infinite; }
.meja-tiket.is-habis { opacity: .55; }

.meja-kartu__aksi {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: var(--sp-3) var(--sp-4);
}
.meja-kartu.is-buka .meja-kartu__aksi { padding-top: var(--sp-3); }
.meja-jumlah {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-full); background: var(--surface-3); font-size: var(--fs-xs); font-weight: var(--fw-bold);
}

@media (max-width: 480px) {
  .meja-stat { padding: var(--sp-2) var(--sp-3); }
  .meja-stat strong { font-size: var(--fs-h2, 18px); }
  .meja-stat__ikon { display: none; }
  .meja-tiket__kode { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .meja-cincin__isi, .kelas-progres__isi.is-skala, .meja-baru__titik::after,
  .meja-kartu.is-buka .meja-kartu__status [data-lucide], .meja-tiket.is-kritis .meja-tiket__waktu { animation: none; }
}
.segmented--tugas button { white-space: nowrap; }