/* ============================================================
   SCAFOLYA — DASHBOARD GURU (DEC-095)
   ------------------------------------------------------------
   Kerangka dan komposisi halaman dashboard guru: panel samping,
   bilah atas, kepala halaman, kartu angka, tabel, editor, media,
   rubrik, dan halaman masuk guru. Memakai token, komponen, dan
   gerak yang sama dengan sisi siswa; tidak ada nilai mentah.
   Diimpor setelah pages.css dan sebelum animasi.css. Sejak KP-189
   hanya dimuat halaman dashboard dan halaman staf (ui_kepala dengan
   'dashboard' => true); aturan yang juga menata halaman siswa
   tidak ditaruh di sini.
   ============================================================ */

:root {
  --guru-sisi-lebar: 17rem;
  --guru-atas-tinggi: 4rem;
  --guru-laci-lebar: min(19rem, 88vw);
}

@media (min-width: 62rem) {
  :root { --guru-atas-tinggi: 4.5rem; }
}

/* ---------- 1. KERANGKA --------------------------------------- */

.page-guru { background-color: var(--color-bg); }
.page-guru .halaman { min-height: 0; }

.guru-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 62rem) {
  .guru-shell { grid-template-columns: var(--guru-sisi-lebar) minmax(0, 1fr); }
}

.guru-utama {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
}

.guru-isi {
  flex: 1 0 auto;
  padding-block: var(--space-6) var(--space-12);
}

.guru-wadah { padding-inline: var(--container-gutter); }

@media (min-width: 62rem) {
  .guru-isi { padding-block: var(--space-8) var(--space-16); }
}

/* ---------- 2. PANEL SAMPING ---------------------------------- */

.guru-sisi {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-3);
  background-color: var(--glass-chrome-strong);
  border-right: var(--border-thin) solid var(--color-border);
  color: var(--color-text);
  overflow: hidden;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-sisi {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-right-color: var(--glass-border);
  }
}

@media (min-width: 62rem) {
  .guru-sisi {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
  }
}

.guru-sisi-atas {
  display: flex;
  flex: none; /* hanya .guru-nav yang boleh mengecil saat menu tidak muat; merek tidak ikut tertekan */
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--control-height-md);
}

.guru-sisi-merek {
  display: inline-flex;
  min-width: 0;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
}

.guru-sisi-merek .brand { --h: 2rem; }

.guru-sisi-tutup {
  display: none;
  place-items: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-circle);
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .guru-sisi-tutup:hover { background-color: var(--color-bg-muted); color: var(--color-text); }
}

.guru-sisi-peran { flex: none; margin: calc(var(--space-2) * -1) 0 0; }

.guru-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* Menu dashboard bertambah (DEC-143): bagian inilah yang bergulir, sehingga merek di atas dan
     pintasan situs siswa di bawah tetap terlihat pada layar pendek. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* DEC-153: batang gulir tidak digambar. Menu tetap dapat digulir dengan roda tetikus, sentuh,
     dan papan tik (fokus menggulir sendiri); indikatornya saja yang disembunyikan supaya tepi
     panel samping tetap bersih. Sepola dengan bilah tab editor dan bilah pil navigasi bagian. */
  scrollbar-width: none;
  margin-inline: calc(var(--space-1) * -1);
  padding-inline: var(--space-1);
}

/* Peramban WebKit lama yang belum mengenal scrollbar-width. */
.guru-nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

.guru-nav-grup { display: grid; gap: var(--space-1); }

.guru-nav-label {
  padding-inline: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guru-nav-daftar { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }

.guru-nav-tautan {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.625rem;
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-2);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid transparent;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

.guru-nav-ikon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-size: var(--fs-lg);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .guru-nav-tautan:hover { background-color: var(--color-bg-muted); color: var(--color-text); }
  .guru-nav-tautan:hover .guru-nav-ikon { background-color: var(--color-surface); color: var(--color-primary-text); }
}

.guru-nav-tautan:active { transform: scale(var(--press-scale-lg)); }

.guru-nav-tautan.is-aktif,
.guru-nav-tautan[aria-current="page"] {
  background-color: var(--color-primary-softer);
  border-color: var(--color-primary-border);
  color: var(--color-primary-text);
  font-weight: var(--fw-bold);
}

.guru-nav-tautan.is-aktif .guru-nav-ikon {
  background: var(--gradient-biru);
  color: var(--color-on-primary);
}

.guru-sisi-kaki {
  flex: none;
  margin-top: auto;
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

/* Tautan ke situs siswa (DEC-152): satu baris berikon globe tanpa keterangan; nomor versi hanya di footer. */
.guru-sisi-situs {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .guru-sisi-situs:hover { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); color: var(--color-primary-text); }
}

/* Layar laptop pendek (≤ 50rem tinggi): lencana peran disembunyikan agar menu utuh tanpa gulir. */
@media (min-width: 62rem) and (max-height: 50rem) {
  .guru-sisi { gap: var(--space-3); padding-block: var(--space-3); }
  .guru-sisi-peran { display: none; }
  .guru-nav-tautan { min-height: 2.375rem; }
  .guru-nav { gap: var(--space-2); }
  .guru-nav-grup { gap: 0.125rem; }
  .guru-sisi-kaki { gap: var(--space-1); padding-top: var(--space-2); }
}

/* Ponsel dan tablet (< 62rem): panel menjadi laci yang tumbuh dari tombol menu (DEC-088). */
@media (max-width: 61.99rem) {
  .guru-sisi {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: var(--z-modal);
    width: var(--guru-laci-lebar);
    display: none;
    border-right-color: var(--color-border);
    box-shadow: var(--shadow-glass-xl);
    transform-origin: var(--asal-x, 1.5rem) var(--asal-y, 1.5rem);
  }
  .guru-sisi.is-terbuka { display: flex; }
  .guru-sisi-tutup { display: grid; }
}

.guru-tirai {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-modal) - 1);
  background-color: var(--color-overlay);
  animation: sf-modal-redup 220ms var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  .guru-sisi.is-terbuka { animation: sf-laci-masuk var(--dur-pegas-mantul) var(--ease-pegas-mantul); }
  .guru-sisi.is-keluar { animation: sf-laci-keluar 190ms var(--ease-accelerate) forwards; pointer-events: none; }
}

@keyframes sf-laci-masuk {
  from { opacity: 0; transform: scale(0.72); }
  30%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-laci-keluar {
  to { opacity: 0; transform: scale(0.84); }
}

/* ---------- 3. BILAH ATAS ------------------------------------- */

.guru-atas { border-bottom-color: var(--color-border-subtle); }

.guru-atas-inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--guru-atas-tinggi);
  padding-inline: var(--container-gutter);
}

.guru-laci-tombol { flex: 0 0 auto; }

@media (min-width: 62rem) {
  .guru-laci-tombol { display: none; }
}

.guru-atas-judul {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
  flex: 1 1 auto;
}

/* AUD-40 (KP-134): judul kecil tetap satu baris dan dipotong dengan elipsis, supaya tidak membungkus ke bawah pil kelas. */
.guru-atas-eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guru-atas-nama {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guru-atas-aksi {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

/* Tombol pencarian (DEC-163): sekerabat tombol tema di sebelahnya; membuka jendela pencarian kaca. */
.guru-cari-tombol {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  border-radius: var(--radius-circle);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--glass-chrome-strong);
  box-shadow: var(--shadow-glass);
  color: var(--color-primary-text);
  cursor: pointer;
  transition: var(--transition-lift), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-cari-tombol {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

@media (hover: hover) {
  .guru-cari-tombol:hover { border-color: var(--color-primary-border); background-color: var(--glass-card-hover); }
}

.guru-cari-tombol:active { transform: scale(var(--press-scale)); }
.guru-cari-tombol:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.guru-cari-tombol .icon { width: 1.25rem; height: 1.25rem; }

/* Jam bilah atas (DEC-162; dua pil sejak DEC-163): pil jam berdetik yang membuka menu zona waktu (WIB bawaan,
   WITA dan WIT dipilih dari menu dan diingat di peramban) dan pil hari + tanggal yang mengikuti zona terpilih.
   Angka berlebar seragam supaya pil tidak bergetar tiap detik. Ruang bilah atas diukur, bukan ditebak: di bawah
   83,5rem tanggal memakai bentuk pendek, di bawah 72rem tombol akun cukup avatarnya, dan di bawah 62rem bilah atas
   ringkas (tombol menu, pencarian, akun) tidak punya ruang sehingga jamnya disembunyikan. */
.guru-jam {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.guru-jam-pil {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: var(--control-height-sm);
  padding: 0 0.625rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--glass-chrome-strong);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-jam-pil {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight);
  }
}

.guru-jam-pil .icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; color: var(--color-primary); }
.guru-jam-pil time { font-variant-numeric: tabular-nums; }

.guru-jam-tombol {
  cursor: pointer;
  color: var(--color-text);
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.guru-jam-tombol time { font-size: var(--fs-sm); }
.guru-jam-tombol abbr { text-decoration: none; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--color-primary-text); }
.guru-jam-pil .guru-jam-panah { width: 0.8rem; height: 0.8rem; color: var(--color-text-muted); transition: transform var(--dur-fast) var(--ease-out); }
.guru-jam-tombol[aria-expanded="true"] .guru-jam-panah { transform: rotate(180deg); }

@media (hover: hover) {
  .guru-jam-tombol:hover { border-color: var(--color-primary-border); background-color: var(--glass-card-hover); }
}

.guru-jam-tombol:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.guru-jam-tanggal-pendek { display: none; }

/* Menu zona waktu: panel mengambang sepola menu akun (kelas floating dipasang guru.js). */
.guru-jam-menu {
  display: grid;
  gap: var(--space-1);
  min-width: 16rem;
  padding: var(--space-2);
}

.guru-jam-opsi {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  text-align: left;
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.guru-jam-opsi b { font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--color-text); }
.guru-jam-opsi span { font-size: var(--fs-2xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guru-jam-opsi time { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }
.guru-jam-opsi[aria-selected="true"] { background-color: var(--color-primary-softer); color: var(--color-primary-text); }
.guru-jam-opsi[aria-selected="true"] b, .guru-jam-opsi[aria-selected="true"] span { color: inherit; }

@media (hover: hover) {
  .guru-jam-opsi:hover { background-color: var(--color-primary-softer); color: var(--color-primary-text); }
}

.guru-jam-opsi:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Di bawah 90rem ikon kalender dilepas (20 px) supaya judul terpanjang, "Halaman penjaga dan galat" 222 px, tetap utuh.
   KP-172 (pilihan B): tanggal bentuk pendek juga mulai di bawah 90rem, karena sejak tombol Panduan masuk bilah atas,
   bilah itu sesak di jendela 1366 px (viewport 1340 px). */
@media (max-width: 89.99rem) {
  .guru-jam-tanggal .icon { display: none; }
  .guru-jam-tanggal-panjang { display: none; }
  .guru-jam-tanggal-pendek { display: inline; }
}

@media (max-width: 61.99rem) {
  .guru-jam { display: none; }
}


/* ---------- Jendela pencarian (DEC-163) ---------------------- */
/* Jendela kaca di bagian atas layar, sepola Spotlight: satu kolom isian besar, hasil yang disaring sambil
   diketik dan dikelompokkan (Siswa, Halaman, Pengaturan, Tindakan), lalu petunjuk papan tik. Tumbuh dari tombol
   pencarian lewat morph dialog ui.js. */
.modal-cari {
  width: min(100% - var(--space-6), 38rem);
  margin-top: max(3rem, 9vh);
  margin-bottom: auto;
  max-height: calc(100dvh - 4rem);
}

.modal-cari::backdrop { background-color: var(--color-overlay); }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-cari::backdrop { -webkit-backdrop-filter: blur(var(--blur-xs)); backdrop-filter: blur(var(--blur-xs)); }
}

.modal-kotak-cari {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: stretch;
  gap: 0;
  max-height: min(calc(100dvh - 4rem), 34rem);
  padding: 0;
  overflow: hidden;
  border-color: var(--color-border);
  background-color: var(--glass-chrome-strong);
  text-align: start;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .modal-kotak-cari {
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass-xl);
  }
}

.guru-cari-kepala {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.guru-cari-ikon { display: inline-grid; place-items: center; flex: 0 0 auto; color: var(--color-primary); }
.guru-cari-ikon .icon { width: 1.35rem; height: 1.35rem; }

.guru-cari-input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--control-height-md);
  padding: var(--space-2) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  outline: none;
}

.guru-cari-input::placeholder { color: var(--color-text-subtle); font-weight: var(--fw-medium); }
.guru-cari-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.guru-cari-tutup {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-circle);
  color: var(--color-text-muted);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .guru-cari-tutup:hover { background-color: var(--color-bg-muted); color: var(--color-text); }
}

.guru-cari-tutup:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.guru-cari-hasil {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  scrollbar-width: none;
}

.guru-cari-hasil::-webkit-scrollbar { display: none; }

.guru-cari-grup {
  margin: var(--space-2) var(--space-3) var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guru-cari-butir {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-align: left;
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.guru-cari-butir.is-aktif { background-color: var(--color-primary-softer); }
.guru-cari-butir > .icon:last-child { flex: 0 0 auto; color: var(--color-primary); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.guru-cari-butir.is-aktif > .icon:last-child { opacity: 1; }

.guru-cari-butir-ikon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.guru-cari-ikon-siswa { background-color: var(--color-secondary-soft); color: var(--color-secondary-text); }
.guru-cari-ikon-halaman { background-color: var(--color-primary-soft); color: var(--color-primary-text); }
.guru-cari-ikon-pengaturan { background-color: var(--color-info-soft); color: var(--color-info-text); }
.guru-cari-ikon-tindakan { background-color: var(--color-success-soft); color: var(--color-success-text); }

.guru-cari-butir-teks { display: grid; gap: 0.1rem; flex: 1 1 auto; min-width: 0; }
.guru-cari-butir-judul { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guru-cari-butir-judul mark { background: transparent; color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-primary-border); text-underline-offset: 0.15em; }
.guru-cari-butir-ket { font-size: var(--fs-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.guru-cari-kosong {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-5) var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.guru-cari-kaki {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-2) var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.guru-cari-kaki-kanan { margin-left: auto; }

.guru-cari-kaki kbd {
  display: inline-block;
  min-width: 1.4em;
  margin-right: 0.25rem;
  padding: 0.05rem 0.35rem;
  border: var(--border-thin) solid var(--color-border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  font-family: var(--font-display);
  font-size: inherit;
  text-align: center;
  color: var(--color-text-secondary);
}

@media (max-width: 47.99rem) {
  .modal-cari { width: calc(100% - var(--space-4)); margin-top: var(--space-3); }
  .guru-cari-kaki { display: none; }
  .guru-cari-input { font-size: var(--fs-base); }
}

/* Avatar guru dan menu akun */
.guru-avatar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--glass-chrome-strong);
  color: var(--color-text);
  font-family: var(--font-display);
  text-align: left;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
  touch-action: manipulation;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-avatar { background-color: var(--glass-chrome); border-color: var(--glass-border); box-shadow: var(--glass-highlight); }
}

@media (hover: hover) {
  .guru-avatar:hover { border-color: var(--color-primary-border); background-color: var(--glass-card-hover); }
}

.guru-avatar:active { transform: scale(var(--press-scale)); }
.guru-avatar[aria-expanded="true"] { border-color: var(--color-primary); }
.guru-avatar:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

.guru-avatar-inisial {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-circle);
  background: var(--gradient-biru);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  line-height: 1;
}

.guru-avatar-kecil { width: 2rem; height: 2rem; font-size: var(--fs-2xs); }

.guru-avatar-teks {
  display: grid;
  line-height: 1.15;
  max-width: 11rem; /* DEC-163: 16 px dilepas untuk pil jam; nama pengelola masih utuh, jabatannya memang sudah dipotong elipsis */
}

.guru-avatar-teks > span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.guru-avatar-teks small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* KP-175 (TS-11): di bawah 72rem avatar hanya lingkaran inisial. Aturan ini dulu ditulis sebelum aturan dasar .guru-avatar
   dan .guru-avatar-teks yang kekhususannya sama, sehingga kalah: di 576–1151 px bantalan pil dan teks nama (selebar nol)
   tetap berlaku dan inisial bergeser 4 sampai 8 px dari tengah tombol. Kini ditulis sesudahnya. */
@media (max-width: 71.99rem) {
  .guru-avatar-teks, .guru-avatar > .icon { display: none; }
  .guru-avatar { padding: 0; width: var(--control-height-md); justify-content: center; border-radius: var(--radius-circle); }
}

.guru-menu-akun,
.guru-menu-baris {
  display: grid;
  gap: var(--space-1);
  min-width: 15rem;
  padding: var(--space-2);
}

.guru-menu-akun-kepala {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  line-height: 1.2;
}

.guru-menu-akun-kepala b { display: block; font-family: var(--font-display); font-size: var(--fs-sm); }
.guru-menu-akun-kepala small { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.guru-menu-akun-butir {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-align: left;
  text-decoration: none;
  transition: var(--transition-colors);
  touch-action: manipulation;
}

.guru-menu-akun-butir .icon { color: var(--color-text-muted); }

@media (hover: hover) {
  .guru-menu-akun-butir:hover { background-color: var(--color-primary-softer); color: var(--color-primary-text); }
  .guru-menu-akun-butir:hover .icon { color: inherit; }
}

.guru-menu-akun-butir:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.guru-menu-bahaya { color: var(--color-danger-text); }
.guru-menu-bahaya .icon { color: inherit; }

@media (hover: hover) {
  .guru-menu-bahaya:hover { background-color: var(--color-danger-soft); color: var(--color-danger-text); }
}

/* ---------- 4. KEPALA HALAMAN, KAKI --------------------------- */

/* DEC-159: tombol kembali menempel tepat pada label kecil di bawahnya (jarak 0 px), sehingga
   keduanya terbaca menumpuk. Dibatasi ke dashboard: sisi siswa memakai kelas .bilah-kembali yang
   sama di dalam bilah kerjanya sendiri, dan jaraknya sudah diatur di sana. */
.page-guru .bilah-kembali { margin-bottom: var(--space-4); }

.guru-kepala { margin-bottom: var(--space-6); }

.guru-kepala .breadcrumb { margin-bottom: var(--space-3); }

.guru-kepala-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
}

.guru-kepala-teks {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  max-width: var(--measure-wide);
}

.guru-kepala-teks h1 {
  font-size: clamp(var(--fs-2xl), 1.3rem + 1.4vw, var(--fs-3xl));
  letter-spacing: var(--ls-tight);
}

.guru-kepala-teks p {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.guru-kepala-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.guru-pratinjau-catatan { margin-bottom: var(--space-6); }

.guru-kaki {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--container-gutter);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.guru-kaki-kanan { display: inline-flex; align-items: center; gap: var(--space-3); }

/* ---------- 5. BERANDA: SAPAAN, ANGKA, BILAH, UMPAN ----------- */

.guru-sapa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
  padding: clamp(var(--space-6), 1rem + 2vw, var(--space-8));
  margin-bottom: var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--sapa-latar);
  box-shadow: var(--sapa-bayangan);
  color: var(--color-text-inverse);
  --partikel-titik: var(--sapa-partikel-titik);
  --partikel-garis: var(--sapa-partikel-garis);
}

.guru-sapa > .latar-hidup { z-index: 0; }
.guru-sapa > .latar-hidup .partikel { opacity: 0.5; }
.guru-sapa-teks, .guru-sapa-paket { position: relative; z-index: 1; min-width: 0; }

@media (min-width: 62rem) {
  .guru-sapa { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); column-gap: var(--space-8); align-items: center; }
}

.guru-sapa-teks { display: grid; gap: var(--space-3); justify-items: start; }
.guru-sapa .eyebrow { color: var(--amber-300); }

.guru-sapa h1 {
  font-size: clamp(var(--fs-2xl), 1.4rem + 1.6vw, var(--fs-4xl));
  line-height: var(--lh-tight);
  color: var(--color-text-inverse);
  text-wrap: balance;
}

.guru-sapa-pesan {
  max-width: 40rem;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--sapa-teks-redup);
}

.guru-sapa-pesan strong { color: var(--color-text-inverse); }

.guru-sapa-aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }

@media (max-width: 35.99rem) {
  .guru-sapa { padding: var(--space-5); border-radius: var(--radius-lg); }
  .guru-sapa-aksi .btn { min-height: var(--control-height-sm); padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
}

.guru-sapa-paket {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: var(--border-thin) solid var(--sapa-kaca-garis);
  border-radius: var(--radius-lg);
  background-color: var(--sapa-kaca);
  box-shadow: var(--glass-highlight-dark);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-sapa-paket { -webkit-backdrop-filter: blur(var(--blur-sm)); backdrop-filter: blur(var(--blur-sm)); }
}

.guru-sapa-paket-label {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--amber-300);
}

.guru-sapa-paket b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-text-inverse); line-height: var(--lh-snug); }
.guru-sapa-paket-meta { font-size: var(--fs-xs); color: var(--biru-100); }
.guru-sapa-paket .status { background-color: var(--status-kaca-latar); }

.guru-stat-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  margin-bottom: var(--space-6);
}

.guru-stat {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5);
}

.guru-stat-ikon { flex: 0 0 auto; }
.guru-stat-isi { display: grid; gap: 0.15rem; min-width: 0; }

.guru-stat-angka {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.guru-stat-angka small { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.guru-stat-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text-secondary); }
.guru-stat-catatan { font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-snug); }

@media (max-width: 35.99rem) {
  .guru-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .guru-stat { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); }
  .guru-stat-angka { font-size: var(--fs-2xl); }
  .guru-stat-catatan { display: none; }
}

.guru-dua {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@media (min-width: 62rem) {
  .guru-dua { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .guru-dua-rata { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guru-dua-detail { grid-template-columns: minmax(0, 1fr) 19rem; }
}

/* Blok dua kolom yang masih diikuti blok lain (mis. ringkasan rekap di atas tabel) memberi jarak
   seperti .guru-kepala, .guru-sapa, dan .guru-stat-grid; tanpa ini kartunya menempel (DEC-099). */
.guru-dua:not(:last-child) { margin-bottom: var(--space-6); }

/* Kartu Uji Pemahaman per tahap di Rekap nilai disisipkan di antara ringkasan dua kolom dan tabel, jadi berjarak ke tabel
   di bawahnya sama seperti ringkasan di atasnya; sebelumnya kedua kartu menempel (KP-143). */
.guru-rekap-uji:not(:last-child) { margin-bottom: var(--space-6); }

/* Pemberitahuan setingkat halaman di atas kartu statistik kelas, misalnya kunci masuk siswa (AUD-43) dan kata sandi yang
   belum tersimpan, berjarak seperti blok halaman lain supaya tidak menempel pada kartu di bawahnya. */
.guru-kabar-halaman { margin-bottom: var(--space-6); }

/* DEC-157: rak kanan menempel saat halaman digulir. Bila layar terlalu pendek untuk memuat seluruh
   kartunya, mis. laptop 1366x768 yang tinggi jendelanya hanya sekitar 612 px, rak ini yang bergulir
   sendiri sehingga kartu terbawah tidak pernah terpotong tepi bawah jendela. Batang gulirnya tidak
   digambar, sepola dengan menu samping (DEC-153). Jarak tepi kecil memberi ruang bagi bayangan kartu,
   yang kalau tidak akan terpotong oleh overflow. */
.guru-samping-lengket {
  position: sticky;
  top: calc(var(--guru-atas-tinggi) + var(--space-6));
  max-height: calc(100dvh - var(--guru-atas-tinggi) - var(--space-6) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  margin-inline: calc(var(--space-2) * -1);
  padding-inline: var(--space-2);
}

.guru-samping-lengket::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Rak ini flex kolom (.stack). Tanpa ini, kartunya menyusut mengikuti max-height sehingga isinya
   terpotong di dalam kartu; yang diinginkan justru kartu tetap seukuran isinya dan rak yang bergulir. */
.guru-samping-lengket > * { flex: none; }

@media (max-width: 61.99rem) {
  .guru-samping-lengket {
    position: static;
    max-height: none;
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
}

.guru-kartu-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
}

.guru-kartu-kepala h2, .guru-kartu-kepala h3, .guru-kartu-kepala h4 { font-size: var(--fs-xl); }
.guru-kartu-kepala .card-title { font-size: var(--fs-xl); }

.guru-bar-daftar { display: grid; gap: var(--space-4); margin-top: var(--space-2); }
.guru-bar-baris { display: grid; gap: var(--space-2); }

.guru-bar-kepala {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.guru-bar-kepala b { font-size: var(--fs-base); font-variant-numeric: tabular-nums; }
.guru-bar-kepala small { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-text-muted); }

.guru-bar {
  display: flex;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.guru-bar > span { display: block; height: 100%; }
.guru-bar-selesai { background: var(--gradient-selesai); }
.guru-bar-aktif { background: var(--gradient-biru); }

.guru-bar-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.guru-bar-legenda span { display: inline-flex; align-items: center; gap: var(--space-2); }

.guru-bar-titik {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-border-strong);
}

.guru-bar-titik-selesai { background: var(--gradient-selesai); }
.guru-bar-titik-aktif { background: var(--gradient-biru); }

.guru-daftar { display: grid; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; }

.guru-daftar-baris {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border-subtle);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .guru-daftar-baris:hover { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); color: var(--color-primary-text); }
  .guru-daftar-baris:hover .guru-daftar-panah { transform: translateX(3px); }
}

.guru-daftar-teks { display: grid; gap: 0.1rem; min-width: 0; flex: 1; line-height: 1.25; }
.guru-daftar-teks b { font-family: var(--font-display); font-size: var(--fs-sm); color: var(--color-text); }
.guru-daftar-teks small { font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-daftar-panah { color: var(--color-text-subtle); transition: transform var(--dur-fast) var(--ease-out); }

.guru-umpan { display: grid; margin: var(--space-2) 0 0; padding: 0; list-style: none; }

.guru-umpan-butir {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding-block: var(--space-3);
}

.guru-umpan-butir + .guru-umpan-butir { border-top: var(--border-thin) solid var(--color-border-subtle); }

.guru-umpan-ikon {
  display: grid;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
  font-size: var(--fs-base);
}

.guru-umpan-isi { display: grid; gap: 0.15rem; font-size: var(--fs-sm); color: var(--color-text-secondary); line-height: var(--lh-snug); }
.guru-umpan-isi a { font-weight: var(--fw-bold); text-decoration: none; }
.guru-umpan-isi time { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Bilah paginasi daftar kartu (DEC-160): dipakai umpan beranda, perlu perhatian, riwayat
   pengerjaan, dan riwayat masuk. Satu tampilan untuk semuanya. */
.guru-daftar-paginasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.guru-daftar-paginasi-kanan {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

/* DEC-161: mulai 48rem bilahnya wajib satu baris. Sebelumnya ringkasan yang memanjang dari
   "1–5" menjadi "11–14" mendorong tombol halaman ke baris kedua, sehingga kartunya ikut meninggi
   28 px hanya karena berpindah halaman. Ringkasan boleh dipotong elipsis; tombolnya tidak menyusut. */
@media (min-width: 48rem) {
  .guru-daftar-paginasi { flex-wrap: nowrap; }
  .guru-daftar-paginasi [data-daftar-ringkas] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .guru-daftar-paginasi-kanan { flex: none; }
}

.guru-daftar-paginasi .guru-paginasi-ukuran { display: flex; align-items: center; gap: var(--space-2); }
.guru-daftar-paginasi .guru-paginasi-ukuran .label { margin: 0; white-space: nowrap; }
.guru-daftar-paginasi .select-custom { min-width: 5rem; }

/* KP-175 (TS-13): di kartu sempit, misalnya kolom kanan Beranda dashboard pada 1024–1100 px, bilah satu baris (DEC-161) tidak
   muat sehingga tombolnya keluar dari kartu sampai melewati tepi layar. Pembungkusnya wadah kueri: di bawah 25rem ringkasan
   menempati baris sendiri dan tombol di baris bawah. Dua baris itu tetap untuk setiap halaman daftar, jadi tinggi kartu
   tetap tidak berubah saat berpindah halaman. Di bawah 19rem label Tampilkan hanya untuk pembaca layar. */
.guru-daftar-paginasi-wadah { container-type: inline-size; }
@container (max-width: 24.99rem) {
  .guru-daftar-paginasi { flex-wrap: wrap; }
  .guru-daftar-paginasi [data-daftar-ringkas] { flex: 1 1 100%; }
  .guru-daftar-paginasi-kanan { flex: 1 1 100%; justify-content: space-between; }
}
@container (max-width: 18.99rem) {
  .guru-daftar-paginasi .guru-paginasi-ukuran .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

/* Butir yang disembunyikan paginasi tidak boleh meninggalkan garis pemisah menggantung:
   garis hanya digambar pada butir tampak yang didahului butir tampak lain. */
.guru-umpan-butir[hidden], .guru-daftar > li[hidden] { display: none; }
.guru-umpan-butir:not([hidden]) ~ .guru-umpan-butir:not([hidden]) { border-top: var(--border-thin) solid var(--color-border-subtle); }
.guru-umpan-butir + .guru-umpan-butir { border-top: 0; }

/* DEC-156: Riwayat pengerjaan di kolom utama yang lebar. Daftarnya dipecah dua lajur supaya tidak
   melompong; urutannya tetap terbaca kiri ke kanan lalu ke bawah, dan garis pemisahnya mengikuti baris. */
@media (min-width: 62rem) {
  .guru-riwayat-lebar .guru-umpan { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-6); }
  /* Dua lajur: garis dilewatkan pada dua butir TAMPAK pertama, bukan dua butir pertama di DOM,
     karena paginasi menyembunyikan sebagian butir (DEC-160). Rantai saudara dipakai agar
     kekhususannya melampaui aturan garis umum di atas. */
  .guru-riwayat-lebar .guru-umpan-butir:not([hidden]) ~ .guru-umpan-butir:not([hidden]) { border-top: 0; }
  .guru-riwayat-lebar .guru-umpan-butir:not([hidden]) ~ .guru-umpan-butir:not([hidden]) ~ .guru-umpan-butir:not([hidden]) { border-top: var(--border-thin) solid var(--color-border-subtle); }
}

/* DEC-158: tombol Simpan catatan berubah sejenak menjadi kabar hijau lalu kembali, sehingga
   guru tahu catatannya tersimpan tanpa halaman perlu dimuat ulang. */
.btn.is-tersimpan,
.btn.is-tersimpan:disabled {
  border-color: var(--color-success-border);
  background-color: var(--color-success-soft);
  color: var(--color-success-text);
  opacity: 1;
}

.guru-pintasan { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.guru-pintasan a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--control-height-md);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-primary-border);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-text);
  text-decoration: none;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .guru-pintasan a:hover { background-color: var(--color-primary-soft); }
}

/* ---------- 6. DAFTAR DEFINISI, FORMULIR ---------------------- */

.guru-dl {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  font-size: var(--fs-sm);
}

.guru-dl > div { display: grid; gap: 0.1rem; }
.guru-dl dt { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.guru-dl dd { margin: 0; color: var(--color-text); overflow-wrap: anywhere; }
/* Varian mendatar (Keamanan akun, DEC-096): tiga angka berdampingan bila muat. */
.guru-dl-baris { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-4) var(--space-6); }
/* Varian padat (Profil pada rak kanan, DEC-157): nilainya pendek-pendek, jadi dua lajur bila muat.
   Ambang 7,5rem membuatnya dua lajur di rak selebar 19rem dan kembali satu lajur di ruang sempit. */
.guru-dl-padat { grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: var(--space-3) var(--space-4); }
.guru-keamanan-aksi .btn { max-width: 100%; white-space: normal; text-align: center; }

.guru-form-baris {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2) var(--space-6);
  padding-block: var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.guru-form-baris:first-child { border-top: 0; padding-top: 0; }

/* Pembatas di dalam kartu (DEC-152) mengikuti irama kartu, bukan jarak pembatas halaman (space-10). */
.page-guru .card-body > .divider { margin-block: var(--space-3); }

@media (min-width: 48rem) {
  .guru-form-baris { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); align-items: start; }
}

.guru-form-label { display: grid; gap: var(--space-1); }
.guru-form-kontrol { display: grid; gap: var(--space-2); min-width: 0; }
.guru-form-kontrol.cluster { display: flex; }
/* Tombol tunggal di kolom kontrol memakai lebar wajarnya, tidak melebar sekolom (DEC-152). */
.guru-form-kontrol > .btn { justify-self: start; }
.guru-form-baris-bahaya { border-top-color: var(--color-danger-border); }

/* Kelompok pilihan radio berbentuk kartu, misalnya bentuk kartu pengembang (KP-136). Kartu berlabel dua baris
   meratakan lingkaran pilihannya ke baris judul, bukan ke tengah kartu. */
.guru-pilihan { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.guru-pilihan > legend { float: left; width: 100%; margin-bottom: var(--space-1); padding: 0; }
.guru-pilihan > legend + * { clear: both; }
.guru-pilihan > .field-help { margin: 0; }
.guru-pilihan-daftar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-2); }
.guru-pilihan-opsi { align-items: flex-start; padding: var(--space-3) var(--space-4); }
.guru-pilihan-opsi .control-box { margin-top: 0.15rem; }
.guru-pilihan-opsi .control-label { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
.guru-pilihan-opsi .control-hint { font-family: var(--font-body); font-weight: var(--fw-regular); line-height: var(--lh-snug); }

.guru-form-aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.guru-form-aksi-lengket {
  position: sticky;
  bottom: 0;
  z-index: var(--z-sticky);
  margin-inline: calc(-1 * var(--container-gutter));
  padding: var(--space-3) var(--container-gutter);
  padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
  border-top: var(--border-thin) solid var(--color-border);
  background-color: var(--glass-chrome-strong);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-form-aksi-lengket { -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); background-color: var(--glass-chrome); }
}

.guru-sakelar { justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); text-align: left; }
.guru-sakelar .switch-track { flex: 0 0 auto; }
.guru-sakelar-teks { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.1rem; min-width: 0; font-size: var(--fs-sm); color: var(--color-text); }
/* KP-183: di ponsel berhuruf besar, kata yang lebih panjang dari ruangnya dipatahkan alih-alih keluar dari kartu. */
.guru-sakelar-teks > span { overflow-wrap: break-word; }
.guru-sakelar + .guru-sakelar { border-top: var(--border-thin) solid var(--color-border-subtle); }

.guru-unggah { position: relative; cursor: pointer; }
.guru-unggah input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.guru-unggah:focus-within { box-shadow: var(--shadow-focus); }

.guru-unggah-zona {
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  padding: var(--space-8) var(--space-6);
  margin-bottom: var(--space-8);
  border: var(--border-base) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--glass-panel);
  text-align: center;
  transition: var(--transition-colors);
}

.guru-unggah-zona-kecil { padding: var(--space-4); margin-bottom: 0; border-radius: var(--radius-md); }
.guru-unggah-zona-kecil p { margin: 0; }

.guru-gambar-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-5);
}

.guru-gambar-pratinjau {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-sunken);
}

.guru-gambar-pratinjau picture, .guru-gambar-pratinjau img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Video latar hero (DEC-148): bingkai 16:9 selebar gambar soal, video diputar tanpa suara dengan kontrol. */
.guru-gambar-video { width: min(100%, 26rem); background-color: #0A1220; }
.guru-gambar-pratinjau video { display: block; width: 100%; height: 100%; object-fit: cover; }
.guru-gambar-soal { width: 100%; }
.guru-gambar-potret { width: min(100%, 12rem); aspect-ratio: 3 / 4; flex: 0 0 auto; }
/* Keterangan berkas di bawah tombol ganti gambar (DEC-146): ukuran, format, WebP, Unduh. */
.guru-gambar-info { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--fs-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.guru-gambar-info .btn-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-2xs); }
.guru-gambar-info .icon { width: 0.9rem; height: 0.9rem; }
.guru-gambar-potret img { object-position: center 18%; }

.guru-gambar-kosong {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 6rem;
  color: var(--color-text-subtle);
  font-size: 2rem;
}

.guru-kunci-tertutup {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  border: var(--border-thin) dashed var(--color-border-strong);
  background-color: var(--color-bg-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-muted);
}

.guru-kunci-tertutup .icon { flex: 0 0 auto; margin-top: 0.1em; }
.guru-kunci-sel { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); white-space: nowrap; }

/* ---------- 7. AKTIVITAS & EDITOR ----------------------------- */

.guru-akt-grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
}

.guru-kartu-akt { overflow: hidden; }

.guru-kartu-akt-sampul {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--gradient-soft);
}

.guru-kartu-akt-sampul picture, .guru-kartu-akt-sampul img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

.guru-kartu-akt-sampul::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--sampul-selubung);
  pointer-events: none;
}

.guru-kartu-akt-nomor {
  position: absolute;
  left: var(--gap-card);
  bottom: var(--space-3);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  background: var(--gradient-biru);
  box-shadow: 0 0 0 var(--border-thick) var(--color-surface), var(--shadow-md);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
}

/* KP-175 (TS-13): pil status (Sedang dibuka, Nonaktif, Arsip) boleh turun ke bawah tahun ajaran di kartu yang sempit. */
.guru-kartu-akt-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.guru-kartu-akt .card-title { font-size: var(--fs-lg); }

/* DEC-164: Sunting dan Lihat sebagai siswa sejajar sebagai dua pil kecil tanpa ikon, rata kiri. Diukur di 1366 px:
   kaki kartu menyisakan 270 px, dua tombol berikon butuh 288 px sehingga membungkus; tanpa ikon 240 px. Kotak judul
   soal dihapus karena kartu kini menonjolkan tingkat bimbingan seperti kartu siswa. */
.guru-kartu-akt .card-footer { justify-content: flex-start; gap: var(--space-2); }
.guru-kartu-akt .card-footer .btn { white-space: nowrap; }

/* Kartu Uji Pemahaman (KP-137) adalah sel keempat di kisi kartu aktivitas dan tersusun seperti kartu aktivitas (KP-141).
   Jumlah kolom kisi ini mengikuti lebar wadahnya, bukan auto-fill, supaya kartu Uji Pemahaman tahu kapan kisi tiga
   kolom. Titik pindahnya sama dengan rumus auto-fill .guru-akt-grid, yaitu saat setiap kolom mencapai 19rem ditambah
   celah kisi pada lebar itu: dua kolom mulai 39.2rem dan tiga kolom mulai 60.375rem. Di kisi dua kolom kartu Uji
   Pemahaman mengisi sel di samping Aktivitas 3. */
.guru-akt-wadah { container: aktivitas / inline-size; }
.guru-akt-wadah > .guru-akt-grid { grid-template-columns: minmax(0, 1fr); }
.guru-kartu-uji-sampul .guru-kartu-akt-nomor .icon { width: 1.35rem; height: 1.35rem; }

@container aktivitas (min-width: 39.2rem) {
  .guru-akt-wadah > .guru-akt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Di kisi tiga kolom kartu Uji Pemahaman memenuhi baris kedua sepola kartu Uji Pemahaman di beranda siswa (DEC-193):
   sampul selebar satu kartu aktivitas di kiri dengan tepi kanan segaris tepi kanan kartu Aktivitas 1, lalu teks dan
   tombol di kolom sisanya, di tengah tinggi sampul. Sampul setinggi paling sedikit rasio 16:9 dan ikut memanjang bila
   teks di sebelahnya lebih tinggi. */
@container aktivitas (min-width: 60.375rem) {
  .guru-akt-wadah > .guru-akt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .guru-kartu-uji {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--gap-grid);
  }

  .guru-kartu-uji-sampul { grid-column: 1; grid-row: 1 / -1; min-width: 0; aspect-ratio: auto; }
  .guru-kartu-uji-sampul::before { content: ""; display: block; aspect-ratio: 16 / 9; }
  .guru-kartu-uji-sampul > picture, .guru-kartu-uji-sampul > img { position: absolute; inset: 0; }

  .guru-kartu-uji-badan { grid-column: 2 / -1; grid-row: 2; gap: var(--space-2); min-width: 0; padding: var(--gap-card) var(--gap-card) 0 0; }
  .guru-kartu-uji-badan .cluster { margin-top: var(--space-1); }

  .guru-kartu-uji-kaki {
    grid-column: 2 / -1;
    grid-row: 3;
    padding: calc(var(--space-2) + var(--space-1)) var(--gap-card) var(--gap-card) 0;
    border-top: 0;
    background: none;
  }
}

/* Kolom naskah yang tingginya mengikuti isi (KP-137): teks panjang terlihat utuh dan kolom ikut tumbuh saat diketik.
   Peramban tanpa field-sizing memakai jumlah baris yang dihitung server dari panjang isinya. */
@supports (field-sizing: content) {
  .guru-area-isi { field-sizing: content; min-block-size: 5.5rem; }
}

/* Angka yang dijaga tetap di naskah Uji Pemahaman (KP-137). */
.guru-uji-angka { display: grid; gap: var(--space-2); }
.guru-uji-angka .guru-chip-daftar { margin: 0; }

/* Kartu Kerangka yang tetap (DEC-162): dua daftar pendek berjudul kecil, bukan paragraf panjang. */
.guru-tetap-kolom {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4) var(--space-6);
  margin-top: var(--space-4);
}

.guru-tetap-judul {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.guru-tetap-judul .icon { color: var(--color-primary); }

.guru-tetap-daftar {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.guru-tetap-daftar li { position: relative; padding-left: var(--space-4); }

.guru-tetap-daftar li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-border);
}

.guru-tetap-catatan {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin: var(--space-5) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

.guru-tetap-catatan .icon { flex: 0 0 auto; margin-top: 0.1rem; }

.guru-tablist {
  position: sticky;
  top: var(--guru-atas-tinggi);
  z-index: var(--z-sticky);
  gap: var(--space-1);
  margin: 0 calc(-1 * var(--container-gutter)) var(--space-6);
  padding-inline: var(--container-gutter);
  background-color: var(--glass-chrome-strong);
  scrollbar-width: none;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-tablist { -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); background-color: var(--glass-chrome); }
}

.guru-tablist .tab { display: inline-flex; align-items: center; gap: var(--space-2); }
.guru-tablist .tab .icon { font-size: var(--fs-base); }
.guru-panel > .stack > .card { overflow: visible; }

/* DEC-166: panel tab menyusun anaknya berjarak. Di tab Soal 1, baris Simpan teks soal dan Batalkan adalah akhir
   formulir teks soal, sedangkan kartu Butir per tahap adalah saudara berikutnya di luar formulir; tanpa jarak
   panel, kartu itu menempel pada tombol (diukur 0 px). :not([hidden]) menjaga panel tersembunyi tetap tersembunyi. */
.guru-panel:not([hidden]) { display: grid; gap: var(--space-6); }

.guru-soal-grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: minmax(0, 1fr);
  margin-top: var(--space-2);
}

@media (min-width: 62rem) {
  .guru-soal-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.guru-tahap-daftar { display: grid; gap: var(--space-6); margin-top: var(--space-2); }
.guru-tahap-blok { display: grid; gap: var(--space-3); }
.guru-tahap-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.guru-butir-daftar { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

.guru-butir {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
}

@media (min-width: 48rem) {
  .guru-butir { grid-template-columns: auto minmax(0, 1fr) auto; }
}

.guru-butir-nomor {
  display: grid;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-circle);
  border: var(--border-base) solid var(--color-border-control);
  background-color: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
}

.guru-butir-isi { display: grid; gap: var(--space-2); min-width: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }

.guru-butir-jenis {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-primary-text);
}

.guru-butir-teks { font-size: var(--fs-base); line-height: 1.8; color: var(--color-text); overflow-wrap: anywhere; }
.guru-butir-pengantar { font-size: var(--fs-sm); color: var(--color-text-muted); }
.guru-butir-meta, .guru-butir-petunjuk { font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-butir-petunjuk { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-petunjuk-text); }
.guru-butir-petunjuk .icon { flex: 0 0 auto; margin-top: 0.15em; }
.guru-butir-opsi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guru-butir-opsi li { padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); border: var(--border-thin) solid var(--color-border); background-color: var(--color-surface); font-size: var(--fs-sm); }

.guru-kotak-tanda {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  vertical-align: middle;
  margin: 0 0.15em;
  padding: 0.1em 0.55em;
  border: var(--border-thin) dashed var(--color-primary-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-primary-softer);
  font-family: var(--font-display);
  font-size: 0.8em;
  font-weight: var(--fw-semibold);
  color: var(--color-primary-text);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.guru-kotak-tanda .icon { flex: 0 0 auto; }

.guru-butir-aksi { display: flex; align-items: flex-start; gap: var(--space-2); grid-column: 2; }

@media (min-width: 48rem) {
  .guru-butir-aksi { grid-column: auto; }
}

.guru-tambah-butir { justify-self: start; }

/* Bantuan Soal 1 di satu tempat (DEC-147): aturan per tingkat di kartu Butir per tahap, dan petunjuk tahap
   Bimbingan Terbatas di atas butir tahapnya, sama dengan urutan layar siswa. */
.guru-aturan-bantuan { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-aturan-bantuan .icon { flex: 0 0 auto; margin-top: 0.2em; color: var(--color-petunjuk); }
.guru-petunjuk-tahap {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-petunjuk-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-petunjuk-soft);
}
.guru-petunjuk-tahap-ikon { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-circle); background-color: var(--color-surface); color: var(--color-petunjuk); }
.guru-petunjuk-tahap-isi { display: grid; gap: 2px; min-width: 0; }
.guru-petunjuk-tahap-label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide, 0.02em); color: var(--color-petunjuk-text); }
.guru-petunjuk-tahap-isi p { margin: 0; color: var(--color-text); }
.guru-petunjuk-tahap-kosong { display: flex; gap: var(--space-2); align-items: center; margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-petunjuk-tahap-kosong .icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
/* Ponsel: ikon tetap di samping teks, tombol Sunting turun di bawah teks. */
@media (max-width: 35.99rem) {
  .guru-petunjuk-tahap { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .guru-petunjuk-tahap > .btn { grid-column: 2; justify-self: start; }
}
/* Paket versi 3: bagian tahap yang tidak disunting di sini (Ringkasan Jawabanku, daftar periksa, pilihan alat, Papan
   Ide), sepola kartu petunjuk tahap tetapi netral, lalu pratinjau butir yang dirender seperti layar siswa. */
.guru-tahap-bagian {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}
.guru-tahap-bagian .guru-petunjuk-tahap-ikon { background-color: var(--color-surface-alt); color: var(--color-primary-text); }
.guru-tahap-bagian-label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide, 0.02em); color: var(--color-primary-text); }
.guru-tahap-bagian p { margin: 0; }
.guru-tahap-bagian .guru-petunjuk-tahap-isi { gap: var(--space-2); }
.guru-daftar-periksa { display: grid; gap: var(--space-3); }
.guru-cek-teks { display: grid; gap: var(--space-1); color: var(--color-text); }
.guru-cek-teks p { margin: 0; }
.guru-cek-teks .badge { margin-right: var(--space-1); }
.guru-cek .guru-butir-nomor { border-style: dashed; color: var(--color-primary-text); }
.guru-cek .guru-butir-nomor .icon { width: 1rem; height: 1rem; }
.guru-cek .guru-butir-meta { display: flex; align-items: center; gap: var(--space-1); }
.guru-cek .guru-butir-meta .icon { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
/* Lencana jalur di samping jenis butir tidak ikut berhuruf kapital. */
.guru-butir-jenis .badge { text-transform: none; letter-spacing: normal; }
.guru-butir-pratinjau { min-width: 0; font-size: var(--fs-sm); }
.guru-butir-pratinjau > .butir { display: block; }
.guru-butir-pratinjau > .butir > .butir-nomor { display: none; }
.guru-butir-pratinjau .tokoh { margin: 0; }
/* Kolom Tahap pada tabel kunci tidak dipatahkan menjadi dua baris. */
.guru-sel-tahap { white-space: nowrap; text-wrap: nowrap; }
.guru-rubrik-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); padding-top: var(--space-2); }

/* ---------- 8. SEKSI BERJUDUL -------------------------------- */
/* Blok berjudul di dalam satu layar (modul Logo). Layar Media & ilustrasi dihapus (DEC-146);
   kartu medianya ikut dihapus, keterangan berkas pindah ke kolom gambar (.guru-gambar-info). */

.guru-seksi { margin-bottom: var(--space-10); }
.guru-seksi .guru-kartu-kepala { margin-bottom: var(--space-4); }
.guru-seksi .guru-kartu-kepala h2 { font-size: var(--fs-xl); }

/* ---------- 9. DAFTAR SISWA & TABEL --------------------------- */

.guru-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.guru-filter-cari { flex: 1 1 16rem; max-width: 24rem; }
.guru-filter-chip { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.guru-tabel-kartu { overflow: visible; }

.guru-tabel-kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--gap-card);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.guru-tabel-kepala > p { margin: 0; }
/* Kotak cari dan ringkasan jumlah di sisi kanan kepala kartu tabel (DEC-169). */
.guru-tabel-alat { display: grid; gap: var(--space-2); justify-items: stretch; min-width: 0; flex: 1 1 16rem; max-width: 24rem; }
.guru-tabel-alat .guru-filter-cari { flex: none; max-width: none; }
.guru-tabel-alat [data-saring-ringkas] { margin: 0; }

@media (min-width: 48rem) {
  .guru-tabel-alat { justify-items: end; }
  .guru-tabel-alat .guru-filter-cari { width: 100%; }
}
.guru-terpilih { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-secondary); }

.guru-tabel-wrap { border: 0; border-radius: 0; background: transparent; }
.guru-tabel { min-width: 52rem; }
.guru-tabel td { vertical-align: middle; }
.guru-tabel tbody tr { transition: background-color var(--dur-fast) var(--ease-out); }

@media (hover: hover) {
  .guru-tabel tbody tr:hover { background-color: var(--color-primary-softer); }
}

.guru-sel-pilih { width: 3rem; padding-right: 0 !important; }
.guru-centang { min-height: 0; padding: 0; }
.guru-centang .control-box { margin-top: 0; }
.guru-sel-aksi { width: 1%; white-space: nowrap; }

/* Tombol Lihat dan titik tiga selalu sebaris (DEC-144). Sel aksi sengaja sesempit isinya (width 1%),
   jadi wadah .cluster yang boleh pindah baris membuat titik tiga terdorong ke bawah Lihat.
   Pil penilaian juga dikunci satu baris; .status memakai text-wrap: pretty yang menimpa white-space. */
@media (min-width: 48rem) {
  /* Sel dirapatkan sedikit supaya kedua kolom yang kini tidak pindah baris tetap muat mulai lebar 1280. */
  .guru-tabel-siswa th, .guru-tabel-siswa td { padding-inline: var(--space-3); }
  .guru-tabel-siswa .guru-sel-aksi .cluster { flex-wrap: nowrap; }
  .guru-tabel-siswa td[data-label="Penilaian"] { width: 1%; white-space: nowrap; }
  .guru-tabel-siswa td[data-label="Penilaian"] .status { text-wrap: nowrap; }
}

.guru-siswa-nama {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  line-height: 1.2;
}

.guru-siswa-nama > span:last-child { display: grid; gap: 0.1rem; }
.guru-siswa-nama b { font-family: var(--font-display); font-size: var(--fs-sm); }
.guru-siswa-nama small { font-size: var(--fs-2xs); color: var(--color-text-muted); }

@media (hover: hover) {
  .guru-siswa-nama:hover b { color: var(--color-primary-text); }
}

.guru-mini { display: grid; gap: var(--space-1); min-width: 9rem; }
.guru-mini-bar { display: flex; gap: 0.2rem; }

.guru-mini-langkah {
  position: relative;
  display: block;
  flex: 1 1 0;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.guru-mini-langkah::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--isi, 0) * 100%);
  border-radius: inherit;
  background: var(--gradient-biru);
}

.guru-mini-langkah[data-state="selesai"]::after { background: var(--gradient-selesai); }
.guru-mini-langkah[data-state="terkunci"] { opacity: 0.55; }
.guru-mini-teks { font-size: var(--fs-2xs); color: var(--color-text-muted); }

.guru-kosong-saring { padding: var(--gap-card); }
.guru-tabel-catatan { padding: var(--space-3) var(--gap-card); }

/* ---------- Paginasi daftar (DEC-100) ------------------------- */

.guru-paginasi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--gap-card);
  border-top: var(--border-thin) solid var(--color-border-subtle);
}

.guru-paginasi[hidden], .guru-paginasi-nav[hidden] { display: none; }
.guru-paginasi-ukuran { display: flex; align-items: center; gap: var(--space-3); }
.guru-paginasi-ukuran .label { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); white-space: nowrap; }
.guru-paginasi-ukuran .select-custom { min-width: 6.5rem; }
.guru-paginasi-nav { display: flex; align-items: center; gap: var(--space-2); }
.guru-paginasi-nomor { display: flex; align-items: center; gap: var(--space-1); }

.guru-paginasi-tombol {
  min-width: 2.25rem;
  height: 2.25rem;
  padding-inline: var(--space-2);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .guru-paginasi-tombol:hover { background-color: var(--color-primary-softer); color: var(--color-primary-text); }
}

.guru-paginasi-tombol:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.guru-paginasi-tombol.is-aktif { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.guru-paginasi-jeda { padding-inline: var(--space-1); color: var(--color-text-muted); }

@media (max-width: 47.99rem) {
  .guru-paginasi { justify-content: center; }
  .guru-paginasi-ukuran { width: 100%; justify-content: space-between; }
}

@media print {
  .guru-paginasi { display: none !important; }
}

/* Ponsel: tabel siswa menjadi kartu bertumpuk, setiap sel berlabel. */
@media (max-width: 47.99rem) {
  .guru-tabel-siswa { min-width: 0; }
  .guru-tabel-siswa thead { display: none; }
  .guru-tabel-siswa, .guru-tabel-siswa tbody, .guru-tabel-siswa tr, .guru-tabel-siswa td { display: block; }
  .guru-tabel-siswa tr { position: relative; padding: var(--space-4) var(--gap-card) var(--space-4) calc(var(--gap-card) + 2rem); border-bottom: var(--border-thin) solid var(--color-border-subtle); }
  .guru-tabel-siswa tr[hidden] { display: none; }
  .guru-tabel-siswa td { padding: var(--space-1) 0; border-bottom: 0; }
  .guru-tabel-siswa td[data-label]:not(:first-of-type)::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
  .guru-tabel-siswa td[data-label="Siswa"] { padding-bottom: var(--space-2); }
  /* :not(:first-of-type) disertakan agar kekhususannya menyamai aturan label di atas, sehingga
     label "SISWA" benar-benar tersembunyi (namanya sudah tampil di bawahnya). */
  .guru-tabel-siswa td[data-label="Siswa"]:not(:first-of-type)::before { display: none; }
  .guru-tabel-siswa .guru-sel-pilih { position: absolute; left: var(--gap-card); top: var(--space-4); width: auto; padding: 0; }
  .guru-tabel-siswa .guru-sel-aksi { width: auto; white-space: normal; padding-top: var(--space-3); }
  .guru-tabel-siswa .guru-sel-aksi .cluster { justify-content: flex-start; }
  /* K-44, K-45: tabel tanpa kolom centang (Semua kelas, Guru pengganti) tidak menyisakan ruang centang di kiri kartunya. */
  .guru-tabel-siswa.guru-tabel-tanpa-pilih tr { padding-left: var(--gap-card); }
  .guru-mini { min-width: 0; }
}

/* Rekap: kolom siswa dan kepala tabel lengket, sel skor berwarna. */
/* Rekap memuat 3 aktivitas x 5 kolom skor. Sel dirapatkan dan lebar minimumnya diturunkan supaya
   seluruh kolom muat di layar laptop tanpa digeser mendatar; di layar sempit tetap bisa digeser (DEC-099). */
.guru-tabel-rekap { min-width: 40rem; }
.guru-tabel-rekap th, .guru-tabel-rekap td { padding-inline: var(--space-2); }
.guru-tabel-rekap .guru-sel-skor,
.guru-tabel-rekap thead tr:nth-child(2) th { min-width: 2.25rem; padding-inline: var(--space-1); }
/* AUD-39: di layar sempit tabel memang digeser, jadi sel skor dilebarkan agar "oto" beserta ikonnya tidak keluar sel. */
@media (max-width: 63.99rem) {
  .guru-tabel-rekap .guru-sel-skor,
  .guru-tabel-rekap thead tr:nth-child(2) th { min-width: 3.5rem; }
}
.guru-tabel-rekap .guru-th-kelompok { padding-inline: var(--space-1); }
/* Kolom status: pil tetap satu baris supaya tinggi barisnya rata (.status memakai text-wrap: pretty
   yang menimpa white-space, jadi ditimpa balik di sini). Kolom nama menyerap sisa ruang (width 100%)
   dan kolom status menyempit ke isinya (width 1%), sehingga saringan satu aktivitas tidak
   membuat kolom status melebar. */
.guru-tabel-rekap thead tr:first-child th:last-child,
.guru-tabel-rekap tbody td:last-child { width: 1%; white-space: nowrap; }
.guru-tabel-rekap tbody td:last-child .status { text-wrap: nowrap; }
.guru-tabel-rekap thead th { position: sticky; top: 0; z-index: 2; text-align: center; }
.guru-tabel-rekap thead tr:nth-child(2) th { top: 2.4rem; }
.guru-tabel-rekap .guru-th-kelompok { border-left: var(--border-thin) solid var(--color-border); font-size: var(--fs-2xs); }
.guru-tabel-rekap .guru-sel-lengket { position: sticky; left: 0; z-index: 3; min-width: 10rem; width: 16rem; text-align: left; background-color: var(--color-surface); box-shadow: inset -1px 0 0 var(--color-border); }
.guru-tabel-rekap thead .guru-sel-lengket { z-index: 4; background-color: var(--color-surface-alt); }
.guru-tabel-rekap .guru-sel-lengket a { color: var(--color-text); text-decoration: none; }
.guru-sel-skor { text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.guru-sel-skor[data-skor="4"], .guru-sel-skor[data-skor="3"] { color: var(--color-success-text); background-color: var(--color-success-soft); }
.guru-sel-skor[data-skor="2"] { color: var(--color-secondary-text); background-color: var(--color-secondary-softer); }
.guru-sel-skor[data-skor="1"], .guru-sel-skor[data-skor="0"] { color: var(--color-warning-text); background-color: var(--color-warning-soft); }
.guru-sel-kosong { color: var(--color-text-subtle); font-weight: var(--fw-regular); }
.guru-tabel-rekap td[data-akt]:nth-child(5n+2), .guru-tabel-rekap thead tr:nth-child(2) th[data-akt]:nth-child(5n+1) { border-left: var(--border-thin) solid var(--color-border); }

.guru-rata-daftar { display: grid; gap: var(--space-3); margin-top: var(--space-2); }
.guru-rata-baris { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); align-items: center; }

@media (min-width: 36rem) {
  .guru-rata-baris { grid-template-columns: minmax(11rem, 16rem) minmax(0, 1fr) 3rem; }
}

.guru-rata-bar { display: block; height: 0.625rem; border-radius: var(--radius-pill); background-color: var(--color-surface-sunken); overflow: hidden; }
.guru-rata-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--gradient-biru); }
.guru-rata-baris b { font-family: var(--font-display); font-variant-numeric: tabular-nums; text-align: right; }

/* ---------- 10. DETAIL SISWA & RUBRIK ------------------------- */

.guru-stat-grid-empat { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }

@media (max-width: 35.99rem) {
  .guru-stat-grid-empat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guru-akt-detail-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.guru-akt-detail-kepala .card-title { font-size: var(--fs-lg); }

.guru-akt-detail-nomor {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-md);
  background: var(--gradient-biru);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
}

.guru-akt-detail-isi { gap: var(--space-6); }
.guru-akt-detail-isi[hidden] { display: none; }
.guru-akt-detail-kepala [aria-expanded="true"] .icon { transform: rotate(180deg); }
.guru-akt-detail-kepala [data-accordion] .icon { transition: transform var(--dur-base) var(--ease-out); }

.guru-jawab-grid { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }

@media (min-width: 62rem) {
  .guru-jawab-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.guru-jawab-soal { min-width: 0; align-self: start; }
.guru-jawab-soal .kartu-soal-judul { font-size: var(--fs-lg); }
.guru-jawab-soal .kartu-soal-teks { font-size: var(--fs-sm); }
.guru-jawab-soal .kartu-soal-tanya { font-size: var(--fs-sm); padding: var(--space-3) var(--space-4); }
.guru-jawab-soal .kartu-soal-ilustrasi { max-width: 16rem; }
/* DEC-155: blok jawaban memakai seluruh lebar, tidak lagi terkurung di kolom kartu soalnya. */
.guru-jawab-isi { display: grid; gap: var(--space-5); grid-column: 1 / -1; min-width: 0; }

.guru-jawab-judul {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
}
.guru-jawab-tahap { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) solid var(--color-border-subtle); background-color: var(--color-surface-alt); }
.guru-jawab-tahap .butir + .butir { margin-top: var(--space-4); padding-top: var(--space-4); }
.guru-jawab-tahap .butir-isi { font-size: var(--fs-sm); }
.guru-jawab-tahap .rumpang { font-size: var(--fs-base); }
.guru-jawab-tahap-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* Revisi validasi (spesifikasi 3.2, 3.5, 3.8, 3.14): pil jalur di samping judul soal, butir yang menunggu jalur, lencana
   isian yang diperbaiki dari Tahap 4, jawaban sebelum perbaikan (buka-tutup), pilihan alat Aktivitas 3, daftar periksa,
   dan jawaban soal versi lama (KS-35) di jawaban per tahap. */
.guru-jawab-judul-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.guru-jawab-tahap-pil { justify-content: flex-end; }
.guru-jawab-tunggu,
.guru-jawab-alat-pilih { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; }
.guru-jawab-tunggu .icon,
.guru-jawab-alat-pilih .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; }
.guru-jawab-alat { display: grid; gap: var(--space-2); font-size: var(--fs-sm); }
.guru-butir-lencana { margin: 0 0 var(--space-2); }
.guru-butir-lencana .badge .icon { width: 0.9rem; height: 0.9rem; }
.guru-sebelum { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) dashed var(--color-border); background-color: var(--color-surface); }
.guru-sebelum > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.guru-sebelum > summary .icon { flex: none; width: 1rem; height: 1rem; }
.guru-sebelum > summary small { font-weight: var(--fw-regular); color: var(--color-text-muted); }
.guru-sebelum[open] > summary { margin-bottom: var(--space-3); }
.guru-sebelum-isi { display: grid; gap: var(--space-3); }
.guru-sebelum-isi > p { margin: 0; }
.guru-daftar-jawab { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); margin: 0; }
.guru-daftar-perbaiki { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-daftar-perbaiki .icon { width: 0.9rem; height: 0.9rem; }
.guru-versi-lama { display: grid; gap: var(--space-3); }
.guru-versi-lama > p { margin: 0; }
.guru-tabel-versi-lama code { font-size: var(--fs-xs); white-space: nowrap; }

.guru-penilaian {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-primary-border);
  background-color: var(--color-primary-softer);
}

.guru-penilaian h4 { font-size: var(--fs-lg); }
.guru-rubrik-daftar { display: grid; }
.guru-rubrik-daftar[data-nonaktif] { opacity: 0.6; pointer-events: none; }

.guru-rubrik-baris {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-3);
  border-top: var(--border-thin) solid var(--color-primary-border);
}

.guru-rubrik-baris:first-child { border-top: 0; padding-top: 0; }
.guru-rubrik-label { flex: 1 1 14rem; }

.guru-skor { display: inline-flex; gap: var(--space-1); }
.guru-skor-pil { position: relative; cursor: pointer; }
.guru-skor-pil input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }

.guru-skor-pil span {
  display: grid;
  place-items: center;
  width: var(--control-height-sm);
  height: var(--control-height-sm);
  border-radius: var(--radius-circle);
  border: var(--border-base) solid var(--color-border-control);
  background-color: var(--color-surface);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-secondary);
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .guru-skor-pil:hover span { border-color: var(--color-primary); color: var(--color-primary-text); }
}

.guru-skor-pil input:checked + span { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-sm); }
.guru-skor-pil input:focus-visible + span { box-shadow: var(--shadow-focus); border-color: var(--color-primary); }
.guru-skor-pil:active span { transform: scale(var(--press-scale)); }

.guru-rubrik-kaki { display: grid; gap: var(--space-4); }
/* DEC-173: total dan tombol berbagi satu baris, catatan selebar kartu supaya tepinya lurus dengan baris rubrik. */
.guru-rubrik-kaki-baris { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.guru-rubrik-kaki-baris .guru-form-aksi { margin: 0; }
.guru-rubrik-total { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-rubrik-total b { font-family: var(--font-display); font-size: var(--fs-2xl); color: var(--color-primary-text); }
.guru-rubrik-catatan { max-width: none; }
.guru-rubrik-catatan .textarea { width: 100%; }

@media (min-width: 48rem) {
  .guru-rubrik-total { margin: 0; }
}

.guru-tombol-bahaya { color: var(--color-danger-text); }

@media (hover: hover) {
  .guru-tombol-bahaya:hover { background-color: var(--color-danger-soft); color: var(--color-danger-text); }
}

/* ---------- 11. NAVIGASI BAGIAN DALAM HALAMAN ------------------ */
/* DEC-152: bilah pil lengket di bawah bilah atas, selebar isi halaman, sepola dengan tab editor aktivitas dan
   pil pindah section. Menggantikan kartu daftar isi kecil di kolom kanan (Header & footer, Pengaturan, Akun saya)
   yang terasa terselip di tepi; kartu memakai seluruh lebar isi, dan di ponsel bilahnya bergulir mendatar. */

.page-guru { --guru-nav-halaman-tinggi: 3.75rem; }

.guru-nav-halaman {
  position: sticky;
  top: var(--guru-atas-tinggi);
  z-index: var(--z-sticky);
  margin: 0 calc(-1 * var(--container-gutter)) var(--space-6);
  padding: var(--space-3) var(--container-gutter);
  background-color: var(--glass-chrome-strong);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .guru-nav-halaman { -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); background-color: var(--glass-chrome); }
}

.guru-nav-halaman ul {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.guru-nav-halaman ul::-webkit-scrollbar { display: none; }
.guru-nav-halaman li { flex: none; }

.guru-nav-halaman a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-colors);
}

.guru-nav-halaman a .icon { font-size: var(--fs-base); }

@media (hover: hover) {
  .guru-nav-halaman a:hover { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); color: var(--color-primary-text); }
}

.guru-nav-halaman a.is-active { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-on-primary); }

/* Kartu yang dituju jangkar berhenti tepat di bawah bilah atas. Peramban menjumlahkan margin ini dengan
   scroll-padding-top html selebar --sticky-offset (base.css), jadi selisihnya saja yang dipasang di sini; sebelum
   KP-152 keduanya terhitung dua kali, kartu mendarat sekitar 104 piksel terlalu rendah, dan pil yang menyala masih
   bagian sebelumnya. */
.page-guru .card[id] { scroll-margin-top: max(0px, calc(var(--guru-atas-tinggi) + var(--space-6) - var(--sticky-offset))); }
/* Di bawah bilah pil, kartu yang dituju berhenti di bawah bilahnya, bukan di baliknya. */
.guru-nav-halaman ~ * .card[id] { scroll-margin-top: max(0px, calc(var(--guru-atas-tinggi) + var(--guru-nav-halaman-tinggi) + var(--space-4) - var(--sticky-offset))); }

/* ---------- 12. HALAMAN MASUK GURU ---------------------------- */

/* DEC-194: panel masuk tepat di tengah layar dan utuh tanpa digulir di layar laptop.
   - Bilah tombol pojok (Situs siswa dan tema) menumpang di atas halaman, jadi tidak mendorong panel ke bawah.
   - Panel diapit dua pengganjal lentur yang sama tinggi, sehingga tepat di tengah bila ruangnya cukup. Lebar panel
     selalu menyisakan ruang 8,75rem di kiri dan kanannya untuk tombol pojok (tombol Situs siswa 7,75rem ditambah jarak
     1rem), jadi mulai lebar 56rem pengganjal atasnya cukup berjarak tepi. Di bawah 56rem panel selebar layar dan dapat
     bersinggungan dengan tombol pojok, jadi pengganjal atasnya tidak pernah lebih pendek dari bilah pojok. Bila ruang
     kurang, panel mulai di bawah bilah pojok, dan halaman baru digulir bila panel memang lebih tinggi dari layar.
   - Dua kolom mulai 75rem; di bawahnya kartu tampil sendiri selebar paling banyak 34rem.
   - Isi kartu merapat bertahap mengikuti tinggi layar (lihat akhir bagian ini). */
.page-guru-masuk {
  --masuk-bilah: calc(var(--space-4) * 2 + var(--control-height-md));
  --masuk-sela-atas: var(--masuk-bilah);
  --masuk-sela-bawah: var(--space-6);
  --masuk-pad-blok: clamp(var(--space-6), 4vw, var(--space-10));
  --masuk-pad-sisi: clamp(var(--space-6), 4vw, var(--space-10));
  --masuk-jarak: var(--space-5);
  --masuk-jarak-form: var(--space-4);
  min-height: 100vh;
  min-height: 100dvh;
}

@media (min-width: 56rem) {
  .page-guru-masuk { --masuk-sela-atas: var(--space-6); }
}

.page-guru-masuk .halaman { position: relative; min-height: 100vh; min-height: 100dvh; }

.guru-masuk-bilah {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--container-gutter);
  /* Hanya tombolnya yang menangkap klik; bidang kosong bilah tidak menghalangi panel di bawahnya. */
  pointer-events: none;
}

.guru-masuk-bilah > * { pointer-events: auto; }
/* KP-166: tombol Panduan Guru merapat ke tombol tema di kanan. Mulai 56rem panel berada tepat di tengah dan hanya menyisakan
   ruang pojok terbatas (KP-127), jadi tombolnya tinggal ikon (namanya tetap dibacakan) kecuali ruang pojoknya cukup untuk
   tulisannya: 64rem sampai 75rem untuk panel selebar 34rem, dan mulai 96rem untuk panel dua kolom. Kartu pendaftaran yang
   lebar (tanpa panel samping) memakai ikon saja sampai 75rem. */
.guru-masuk-bilah > .guru-masuk-panduan { margin-left: auto; }
@media (min-width: 56rem) and (max-width: 63.99rem), (min-width: 75rem) and (max-width: 95.99rem) {
  .guru-masuk-bilah > .guru-masuk-panduan { width: var(--control-height-sm); padding-inline: 0; justify-content: center; }
  .guru-masuk-bilah > .guru-masuk-panduan > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}
/* KP-175 (TS-12): kabar status halaman masuk dashboard (Masuk dulu, Anda sudah keluar, dan seterusnya) tidak boleh tertutup
   tombol pojok yang berada di atasnya. Mulai 64rem kabar tetap di tengah bilah pojok, selebar ruang di antara kedua kelompok
   tombol (paling lebar 15rem di tiap sisi). Di bawah 64rem ruang itu tidak cukup, jadi kabar turun tepat di bawah bilah
   pojok, yang tingginya bantalan 2 × space-4 ditambah tombol tema 44 px. */
.page-guru-masuk .modal-kabar { max-width: calc(100vw - 30rem); }
@media (max-width: 63.99rem) {
  .page-guru-masuk .modal-kabar { top: calc(var(--space-4) * 2 + var(--control-height-md) + var(--space-2)); max-width: calc(100vw - var(--space-8)); }
}
/* Di 56rem sampai 60rem pojok di samping kartu lebar lebih sempit dari tombol Panduan dan tombol tema, jadi kartu halaman
   panjang itu (yang memang digulir) mulai di bawah bilah pojok. */
@media (min-width: 56rem) and (max-width: 59.99rem) {
  .page-daftar-tunggal { --masuk-sela-atas: 5rem; }
}
@media (min-width: 64rem) and (max-width: 74.99rem) {
  .page-daftar-tunggal .guru-masuk-bilah > .guru-masuk-panduan { width: var(--control-height-sm); padding-inline: 0; justify-content: center; }
  .page-daftar-tunggal .guru-masuk-bilah > .guru-masuk-panduan > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
}

.guru-masuk-utama {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 var(--container-gutter);
}

.guru-masuk-utama::before,
.guru-masuk-utama::after {
  content: "";
  flex: 1 1 0;
}

.guru-masuk-utama::before { min-height: var(--masuk-sela-atas); }
.guru-masuk-utama::after { min-height: var(--masuk-sela-bawah); }

.guru-masuk-panel {
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: minmax(0, 1fr);
  width: min(100%, 34rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-glass-lg);
}

@media (min-width: 75rem) {
  .guru-masuk-panel {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    width: min(100% - 2 * 8.75rem, 62rem);
    border-radius: var(--radius-2xl);
  }
}

.guru-masuk-samping {
  position: relative;
  isolation: isolate;
  display: none;
  overflow: hidden;
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  background: var(--sapa-latar);
  color: var(--color-text-inverse);
  --partikel-titik: var(--sapa-partikel-titik);
  --partikel-garis: var(--sapa-partikel-garis);
}

@media (min-width: 75rem) {
  .guru-masuk-samping { display: grid; align-content: center; }
}

.guru-masuk-samping > .latar-hidup { z-index: 0; }
.guru-masuk-samping-isi { position: relative; z-index: 1; display: grid; gap: var(--space-5); }
.guru-masuk-samping .eyebrow { color: var(--amber-300); }
.guru-masuk-samping h2 { font-size: clamp(var(--fs-2xl), 1.2rem + 1.6vw, var(--fs-3xl)); color: var(--color-text-inverse); text-wrap: balance; }
.guru-masuk-poin { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.guru-masuk-poin li { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--sapa-teks-redup); }
.guru-masuk-poin .icon { flex: 0 0 auto; margin-top: 0.15em; padding: 0.35rem; box-sizing: content-box; border-radius: var(--radius-circle); background-color: var(--sapa-kaca-kuat); color: var(--amber-300); }

.guru-masuk-kartu { width: 100%; max-width: none; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-xl); box-shadow: none; }
.guru-masuk-kartu .card-body { gap: var(--masuk-jarak); padding: var(--masuk-pad-blok) var(--masuk-pad-sisi); }
.guru-masuk-merek .brand { --h: 2.5rem; }
.guru-masuk-judul { font-size: var(--fs-2xl); }
.guru-masuk-form { gap: var(--masuk-jarak-form); }
.guru-masuk-ingat { padding-block: 0; min-height: 0; font-size: var(--fs-sm); }

@media (min-width: 75rem) {
  .guru-masuk-kartu { border: 0; border-radius: 0; }
}

/* Kartu merapat bertahap mengikuti tinggi layar. Ambang tiap tingkat = tinggi kartu tingkat sebelumnya ditambah kedua
   pengganjal: 3rem mulai lebar 56rem; di bawahnya 9,5rem, yaitu dua kali tinggi bilah pojok, supaya panel tetap tepat
   di tengah. Ponsel di bawah 36rem memakai ambang lebih tinggi karena teksnya terlipat lebih banyak. Semua ambang
   dibulatkan ke atas supaya aman terhadap perbedaan fon, dan semua kontrol tetap setinggi paling sedikit 44 piksel. */
@media (max-height: 49rem), (max-width: 55.99rem) and (max-height: 55.5rem), (max-width: 35.99rem) and (max-height: 60rem) {
  .page-guru-masuk { --masuk-pad-blok: var(--space-6); --masuk-jarak: var(--space-4); }
  .guru-masuk-kartu .demo-pil-blok { margin-top: 0; padding-top: var(--space-3); }
}

@media (max-height: 45rem), (max-width: 55.99rem) and (max-height: 51.25rem), (max-width: 35.99rem) and (max-height: 57rem) {
  .page-guru-masuk { --masuk-jarak-form: var(--space-3); }
  .guru-masuk-merek .brand { --h: 2rem; }
  .guru-masuk-judul { font-size: var(--fs-xl); }
  .guru-masuk-kartu .stack-xs > p { font-size: var(--fs-xs); }
  .guru-masuk-kartu :is(.input, .select) { padding-block: var(--space-2); }
  .guru-masuk-kartu .btn-lg { min-height: var(--control-height-md); padding-block: var(--space-2); }
  .guru-masuk-kartu .demo-pil-judul { margin-bottom: var(--space-2); }
}

/* Ponsel selebar 360 piksel ke atas: pada tingkat rapat kedua tombol demo berjajar, tidak bertumpuk. */
@media (min-width: 22.5rem) and (max-width: 35.99rem) and (max-height: 57rem) {
  .guru-masuk-kartu .demo-pil-baris { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .guru-masuk-kartu .demo-pil { padding-inline: var(--space-2); }
}

@media (max-height: 40.75rem), (max-width: 55.99rem) and (max-height: 46.75rem), (max-width: 35.99rem) and (max-height: 49.75rem) {
  .page-guru-masuk { --masuk-pad-blok: var(--space-5); }
  .guru-masuk-merek .brand { --h: 1.75rem; }
  .guru-masuk-kartu .stack-xs > p,
  .guru-masuk-kartu .demo-pil-judul { display: none; }
}

/* ---------- 12b. HALAMAN PERGI (transisi keluar, DEC-095) -----
   Saat seluruh halaman ikut bergerak (keluar dari dashboard), panel samping dan bilah atas
   ikut terpotret di lapisan akar. Kaca buram (backdrop-filter) pada potret itu membuat Chrome
   menggambar lapisan halaman lama sebagai bidang putih; transisi.js memasang atribut ini
   tepat sebelum potret diambil. */
html[data-transisi-pergi] .guru-sisi,
html[data-transisi-pergi] .guru-atas {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: var(--glass-chrome-strong);
}

/* ---------- 12c. MODUL HALAMAN DEPAN (DEC-143) ---------------- */

.guru-section-grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.guru-kartu-section .card-body { gap: var(--space-4); }

.guru-kartu-section-kepala {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.guru-kartu-section-kepala > div { flex: 1 1 8rem; min-width: 0; }
.guru-kartu-section-kepala .card-title { font-size: var(--fs-lg); }

.guru-kartu-section-nomor {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  border-radius: var(--radius-md);
  background: var(--gradient-biru);
  color: var(--color-on-primary);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
}

.guru-kartu-section-jangkar { flex: 0 0 auto; font-size: var(--fs-2xs); color: var(--color-text-muted); }
.guru-kartu-section-aksi { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }

.guru-chip-daftar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.chip-statis { cursor: default; background-color: var(--color-surface-alt); }

/* KP-159: Hiasan musiman. Kartunya di bawah kisi section dan selebar kisi, supaya tidak menyisakan ruang kosong, dengan
   contoh untaian di atas potongan langit hero. Penyuntingnya enam kartu momen dalam kisi yang selalu genap. */
.guru-kartu-hiasan { margin-top: var(--gap-grid); }
.guru-kartu-hiasan .card-body { gap: var(--space-4); }
.guru-kartu-hiasan-isi { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 48rem) {
  .guru-kartu-hiasan-isi { grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem); }
}
.guru-hiasan-contoh { display: grid; gap: var(--space-2); margin: 0; }
.guru-hiasan-contoh p { margin: 0; }
.guru-hiasan-contoh-langit { height: 3rem; overflow: hidden; border-radius: var(--radius-md); background: var(--gradient-biru); }
.guru-hiasan-untaian { display: block; width: 100%; height: 34px; }
.guru-hiasan-keadaan { display: flex; align-items: center; gap: var(--space-2); margin: 0; }
.guru-hiasan-keadaan .icon { flex: 0 0 auto; }
.guru-hiasan-judul { margin: 0; font-size: var(--fs-xl); }
/* Paling banyak tiga kolom, jadi keenam kartu selalu mengisi baris penuh. */
.guru-hiasan-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(auto-fill, minmax(min(100%, max(21rem, calc((100% - 2 * var(--gap-grid)) / 3))), 1fr)); }
.guru-hiasan-tanggal { display: grid; grid-template-columns: 7.25rem minmax(0, 1fr); gap: var(--space-2); }

@media (hover: hover) {
  .chip-statis:hover { border-color: var(--color-border); background-color: var(--color-surface-alt); color: var(--color-text-secondary); }
}

/* Pindah cepat antar section tanpa kembali ke daftar. */
.guru-lompat {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.guru-lompat-butir {
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .guru-lompat-butir:hover { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); color: var(--color-primary-text); }
}

.guru-lompat-butir.is-aktif { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }

/* Nilai yang sumbernya modul lain atau memang tidak dapat diubah. */
.guru-nilai-terkunci {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.guru-nilai-terkunci .icon { flex: 0 0 auto; color: var(--color-text-muted); }

/* Baris tile angka pada hero. */
.guru-tile-baris { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.guru-tile-baris .input { flex: 1 1 10rem; }

.guru-tile-ikon {
  display: grid;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  flex: 0 0 auto;
  border-radius: var(--radius-circle);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
}

.guru-tile-angka {
  min-width: 2.5rem;
  flex: 0 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* Tiga butir "yang kami jaga" pada section Tentang. */
.guru-jaga-baris {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.guru-jaga-baris + .guru-jaga-baris { border-top: var(--border-thin) solid var(--color-border-subtle); }
.guru-jaga-baris > .icon-tile { flex: 0 0 auto; margin-top: var(--space-2); }
.guru-jaga-baris > .stack { flex: 1 1 auto; min-width: 0; }

/* ---------- 12d. MODUL LOGO & IKON SITUS (DEC-145) ------------- */
/* Papan dan adegan memakai warna TETAP (tidak ikut tema dashboard): yang dipratinjau adalah
   logo di atas latar tempat aslinya, jadi latarnya tidak boleh berubah saat guru memakai tema gelap. */

.guru-logo-pengantar { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.guru-logo-aturan { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-2); }
.guru-logo-aturan li { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-logo-aturan .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.2em; color: var(--color-success-text); }

.guru-logo-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr));
}
.guru-logo-slot { display: flex; flex-direction: column; overflow: hidden; transition: border-color 150ms ease, box-shadow 150ms ease; }
.guru-logo-slot > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; }
.guru-logo-slot.is-baru { border-color: var(--color-warning-border); box-shadow: 0 0 0 3px var(--color-warning-soft); }

/* Gambar diletakkan absolut supaya ukuran aslinya (simbol 1086 x 1448) tidak meninggikan kotak 16:9. */
.guru-logo-slot-gambar {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border-subtle);
}
.guru-logo-slot-gambar > img {
  position: absolute;
  inset: var(--space-5);
  width: calc(100% - 2 * var(--space-5));
  height: calc(100% - 2 * var(--space-5));
  object-fit: contain;
}
/* Papan kotak-kotak: bagian tembus pandang logo terlihat jelas. */
.guru-logo-papan-terang { background: #FFFFFF conic-gradient(#EDF0F4 25%, transparent 0 50%, #EDF0F4 0 75%, transparent 0) 0 0 / 16px 16px; }
.guru-logo-papan-gelap  { background: #0A1220 conic-gradient(#121E34 25%, transparent 0 50%, #121E34 0 75%, transparent 0) 0 0 / 16px 16px; }

.guru-logo-status { position: absolute; top: var(--space-3); left: var(--space-3); line-height: 0; }
.guru-logo-slot-judul { margin: 0; font-size: var(--fs-base); }
.guru-logo-slot-meta { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.guru-logo-slot .card-text { font-size: var(--fs-sm); }
.guru-logo-peringatan { margin: 0; color: var(--color-warning-text); }

.guru-logo-baru {
  padding: var(--space-3);
  border: 1px dashed var(--color-warning-border);
  border-radius: var(--radius-md);
  background-color: var(--color-warning-soft);
  font-size: var(--fs-sm);
}
.guru-logo-baru[hidden] { display: none; }
.guru-logo-baru-judul { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font-weight: 600; color: var(--color-warning-text); overflow-wrap: anywhere; }
.guru-logo-baru-judul .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.1em; }
.guru-logo-baru-catatan { margin: var(--space-2) 0 0; padding-left: 1.1rem; color: var(--color-text-secondary); }
.guru-logo-baru-catatan:empty { display: none; }
.guru-logo-baru .btn-link { display: inline-block; margin-top: var(--space-2); }

.guru-logo-form { margin-top: auto; padding-top: var(--space-2); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.guru-logo-form-aksi { display: inline-flex; gap: var(--space-2); }
.guru-logo-form-aksi[hidden] { display: none; }
.guru-logo-pilih { cursor: pointer; }
.guru-logo-slot.is-baru .guru-logo-pilih { display: none; }
.guru-logo-pilih.is-disabled { opacity: 0.5; pointer-events: none; }
/* Masukan berkas tersembunyi secara visual; cincin fokusnya dipindah ke tombol label. */
.guru-logo-form input[type="file"]:focus-visible + .guru-logo-pilih {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

/* Kartu ikon situs */
.guru-logo-ikon-deret { display: flex; align-items: flex-end; justify-content: center; gap: var(--space-5); flex-wrap: wrap; }
.guru-logo-ikon-butir { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.guru-logo-ikon-butir small { font-size: var(--fs-2xs); color: #5B6472; }
.guru-logo-ikon-ios { border-radius: 22.5%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22); }

/* Adegan pratinjau */
.guru-logo-adegan-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 25rem), 1fr));
}
.guru-logo-adegan {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.guru-logo-adegan.is-baru { border-color: var(--color-warning-border); box-shadow: 0 0 0 3px var(--color-warning-soft); }
.guru-logo-adegan figcaption { display: grid; gap: 2px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.guru-logo-adegan-judul { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; font-size: var(--fs-sm); font-weight: 600; }
.guru-logo-adegan-ket { font-size: var(--fs-xs); color: var(--color-text-muted); }

.guru-logo-panggung {
  --mock-bilah: #FFFFFF;
  --mock-tepi: #E4E7EC;
  --mock-garis: #D8DDE4;
  --mock-teks: #1D1D1A;
  --mock-tombol: #012A6A;
  min-height: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
  overflow: hidden;
  background-color: #F3F5F8;
}
.guru-logo-panggung-gelap {
  --mock-bilah: #111E35;
  --mock-tepi: #1F2E4A;
  --mock-garis: #2B3B58;
  --mock-teks: #E9EEF7;
  --mock-tombol: #3D7BE0;
  background-color: #0A1220;
}
.guru-logo-panggung-biru { --mock-garis: rgba(255, 255, 255, 0.26); background-color: #012A6A; }
.guru-logo-panggung-kertas { --mock-garis: #E3E6EA; background-color: #E6E9EE; }
.guru-logo-panggung-peramban { align-items: flex-end; padding-bottom: 0; background-color: #DDE2EA; }
.guru-logo-panggung-layar-utama { background: linear-gradient(140deg, #173A73 0%, #2F66B0 55%, #E2930C 140%); }

.guru-logo-garis { display: block; flex: none; max-width: 100%; height: 0.5rem; border-radius: var(--radius-pill); background-color: var(--mock-garis); }
.guru-logo-bilah {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--mock-tepi);
  border-radius: var(--radius-md);
  background-color: var(--mock-bilah);
}
.guru-logo-menu { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; justify-content: flex-end; gap: var(--space-3); overflow: hidden; }
.guru-logo-tombol { flex: none; width: 4.5rem; height: 2.25rem; border-radius: var(--radius-pill); background-color: var(--mock-tombol); }
.guru-logo-ponsel { width: min(100%, 22.5rem); }
.guru-logo-ponsel .guru-logo-bilah { padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); }
.guru-logo-burger { flex: none; display: grid; place-content: center; gap: 4px; width: 2.5rem; height: 2.5rem; border: 1px solid var(--mock-tepi); border-radius: var(--radius-pill); }
.guru-logo-burger i { display: block; width: 1.1rem; height: 2px; border-radius: 2px; background-color: var(--mock-teks); }
.guru-logo-kaki { width: 100%; display: grid; gap: var(--space-3); justify-items: start; }
.guru-logo-kaki .brand { margin-bottom: var(--space-1); }
.guru-logo-lembar {
  width: 100%;
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(1, 29, 73, 0.12);
}
.guru-logo-lembar-kepala { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.guru-logo-lembar-judul { display: grid; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.guru-logo-pita { display: block; height: 4px; margin-bottom: var(--space-1); border-radius: var(--radius-pill); background: linear-gradient(90deg, #012A6A, #1556B8 45%, #E2930C); }
.guru-logo-tab {
  width: min(100%, 17rem);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  border-radius: 10px 10px 0 0;
  background-color: #FFFFFF;
  color: #1D1D1A;
  font-size: var(--fs-2xs);
}
.guru-logo-tab img { flex: none; }
.guru-logo-tab span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.guru-logo-tab i { flex: none; font-style: normal; color: #6B7280; }
.guru-logo-beranda-hp { display: flex; gap: var(--space-8); }
.guru-logo-beranda-hp > span { display: grid; justify-items: center; gap: 6px; }
.guru-logo-beranda-hp small { font-size: 11px; color: #FFFFFF; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }

/* Kartu sempit (ponsel, kolom tunggal): adegan selebar layar lebar diperkecil utuh, bukan terpotong.
   Kebutuhan terlebar = bilah atas layar lebar, sekitar 394 px (logo 272 + tombol 72 + jarak dan bantalan). */
.guru-logo-panggung { container-type: inline-size; }
@container (max-width: 25rem) {
  .guru-logo-lebar { zoom: 0.8; }
}
@container (max-width: 19.6rem) {
  .guru-logo-lebar { zoom: 0.66; }
}
@media (max-width: 35.99rem) {
  .guru-logo-panggung { padding: var(--space-4) var(--space-3); }
  .guru-logo-panggung-peramban { padding-bottom: 0; }
}

/* ---------- Modul Teks layar siswa (DEC-149) ---------- */
.guru-teks-aturan-kartu { margin-bottom: var(--space-6); }
.guru-teks-aturan { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-teks-aturan li { display: flex; gap: var(--space-2); align-items: flex-start; }
.guru-teks-aturan .icon { flex: 0 0 auto; width: 1rem; height: 1rem; margin-top: 0.2em; color: var(--color-primary-text); }
.guru-teks-form { margin-top: var(--space-4); }

/* ---------- Akun saya (DEC-151): foto profil pada tombol akun dan pratinjaunya ---------- */
.guru-avatar-inisial { overflow: hidden; }
.guru-avatar-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.guru-gambar-avatar { width: min(100%, 10rem); aspect-ratio: 1; border-radius: var(--radius-circle); }
.guru-avatar-besar { width: 100%; height: 100%; border-radius: 0; font-size: var(--fs-2xl); }

/* ---------- Editor isi menyimpan (DEC-150): kotak media, kolom kunci tulis-saja ---------- */
.guru-media-aksi { display: inline-flex; gap: var(--space-2); }
.guru-media-aksi[hidden] { display: none; }
.guru-media-form { display: none; }
.guru-kunci-baris .label { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* KP-189: aturan kartu pilihan yang dinonaktifkan pindah ke akhir pages.css, karena berlaku juga di halaman siswa. */

/* Logo kecil di baris Logo layar Header & footer. */
.guru-kerangka-logo { display: inline-flex; align-items: center; }
.guru-kerangka-logo .brand { --h: 1.75rem; }

/* ---------- 13. CETAK & KURANGI GERAK ------------------------- */

@media print {
  .guru-sisi, .guru-atas, .guru-tirai, .guru-kaki, .guru-kepala-aksi, .guru-pratinjau-catatan, .guru-form-aksi, .guru-filter, .guru-tablist, .guru-nav-halaman, .guru-daftar-paginasi { display: none !important; }
  .guru-shell { display: block; }
  .guru-isi { padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .guru-sisi.is-terbuka, .guru-sisi.is-keluar, .guru-tirai { animation: none; }
  .guru-daftar-panah, .guru-nav-tautan, .guru-skor-pil span, .guru-logo-slot, .guru-logo-adegan, .guru-nav-halaman a { transition: none; }
}

/* ---------- Batang gulir dokumen dashboard (DEC-165) ---------- */
/* Batang gulir halaman ikut gaya kaca yang sama dengan komponen, hanya di dashboard; situs siswa tidak disentuh. */
@supports selector(::-webkit-scrollbar) {
  html:has(> body.page-guru)::-webkit-scrollbar { width: 12px; }
  html:has(> body.page-guru)::-webkit-scrollbar-track { background: transparent; }
  html:has(> body.page-guru)::-webkit-scrollbar-thumb {
    background-color: var(--gulir-jempol);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
  }
  html:has(> body.page-guru)::-webkit-scrollbar-thumb:hover { background-color: var(--gulir-jempol-hover); }
  html:has(> body.page-guru)::-webkit-scrollbar-button { width: 0; height: 0; display: none; }
}

@supports not selector(::-webkit-scrollbar) {
  html:has(> body.page-guru) { scrollbar-width: thin; scrollbar-color: var(--gulir-jempol) transparent; }
}


/* ---------- Pil kelas aktif (DEC-167) ---------------------------- */
/* Memakai rupa pil dan menu jam (DEC-163) supaya bilah atas tetap satu bahasa; nama kelas dipotong bila sempit. */
.guru-kelas { display: inline-flex; align-items: center; flex: 0 0 auto; min-width: 0; }
.guru-kelas-tombol { max-width: 16rem; }
/* AUD-40 (KP-134): pil kelas boleh menyusut. Bila bilah atas sesak, nama kelas di pil dipotong dengan elipsis lebih dulu,
   baru sesudah itu judul halaman ikut dipotong; sebelumnya judul yang terpotong lebih dulu dan judul kecilnya tertimpa pil.
   Nama kelas menempati lajur grid minmax(1.75em, max-content), jadi lebar terkecil pil dihitung peramban sendiri: ikon,
   kode, panah, dan satu huruf nama beserta elipsisnya, tanpa potongan huruf. Lajur lain selebar isinya (max-content),
   karena svg ber-max-width 100% (base.css) akan menyusut sampai nol di lajur auto. Bobot susut yang sangat besar membuat
   judul tidak ikut menanggung pecahan piksel selama pil masih dapat menyusut. */
@media (min-width: 62rem) {
  .guru-kelas { flex-shrink: 10000; min-width: auto; }
  .guru-kelas-tombol {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: max-content minmax(1.75em, max-content);
    grid-auto-columns: max-content;
  }
}
.guru-kelas-tombol .icon:first-child { color: var(--color-secondary, var(--color-primary)); }
.guru-kelas-nama { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.guru-kelas-tombol abbr { text-decoration: none; font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.guru-kelas-kosong { color: var(--color-primary-text); border-style: dashed; }
.guru-kelas-menu { min-width: 16rem; }
.guru-kelas-menu form { display: contents; }
.guru-kelas-menu .guru-jam-opsi {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "nama tanda" "ket tanda";
  row-gap: 0.15rem;
  width: 100%;
  text-align: start;
  text-decoration: none;
}
.guru-kelas-menu .guru-jam-opsi b { grid-area: nama; letter-spacing: normal; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guru-kelas-menu .guru-jam-opsi span { grid-area: ket; }
.guru-kelas-opsi[aria-selected="true"]::after { content: "✓"; grid-area: tanda; align-self: center; font-weight: var(--fw-bold); }
.guru-kelas-kelola { border-top: var(--border-thin) solid var(--color-border-subtle); border-radius: 0 0 var(--radius-sm) var(--radius-sm); margin-top: var(--space-1); padding-top: calc(var(--space-2) + 2px); }

@media (max-width: 61.99rem) {
  .guru-kelas-nama { display: none; }
  .guru-kelas-tombol { max-width: none; }
}

@media (max-width: 35.99rem) {
  .guru-kelas-tombol abbr { display: none; }
  /* AUD-40 (KP-134): di ponsel pil kelas menyusut menjadi tombol ikon bundar sekerabat tombol pencarian, dan celah bilah
     atas dirapatkan, supaya judul halaman mendapat ruang. Menunya tetap sama. */
  .guru-kelas-tombol .guru-jam-panah { display: none; }
  .guru-kelas-tombol { justify-content: center; width: var(--control-height-md); height: var(--control-height-md); padding: 0; }
  .guru-atas-inner,
  .guru-atas-aksi { gap: var(--space-2); }
}

/* ---------- Kelas saya dan detail kelas (DEC-167) ---------------- */
.guru-kelas-grid .card-body { gap: var(--space-3); }
.guru-kartu-kelas.is-aktif { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset, var(--shadow-sm); }
.guru-kode-kelas-label { margin: 0; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.guru-kode-kelas { display: inline-flex; align-items: center; gap: var(--space-1); }
.guru-kode-kelas code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.18em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-md);
  background-color: var(--color-primary-softer);
  color: var(--color-primary-text);
}
.guru-kode-kelas-besar code { font-size: var(--fs-xl); padding: 0.35rem 0.8rem; }
.guru-nomor { font-weight: var(--fw-bold); letter-spacing: 0.08em; }
.guru-terkunci-nilai { margin: 0; min-height: var(--control-height-md); display: flex; align-items: center; color: var(--color-text-secondary); }
/* ol.guru-langkah: mengalahkan reset ol[class] di base.css, yang membuang nomor langkah. */
ol.guru-langkah { margin: 0; padding-inline-start: 1.25rem; list-style: decimal; display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-secondary); }
ol.guru-langkah > li { padding-inline-start: var(--space-1); }
ol.guru-langkah > li::marker { font-weight: var(--fw-bold); color: var(--color-primary-text); }
.guru-langkah b { color: var(--color-text); }
.guru-foto-akun { align-items: center; }
.guru-foto-akun > .stack { flex: 1 1 18rem; min-width: 0; }
.guru-foto-akun .guru-gambar-pratinjau { width: 7rem; height: 7rem; border-radius: var(--radius-circle); overflow: hidden; }
.guru-tabel-kelas td[data-label="Nama"] { min-width: 12rem; }

/* ---------- Kata sandi tersimpan, tindakan massal, pilihan sekolah (DEC-168) ---------- */
/* Kartu sorotan akun yang baru dibuat atau direset; ikut jarak tumpukan kartu supaya tidak menempel pada kartu di bawahnya. */
.guru-kabar-akun { border-color: var(--color-success-border, var(--color-border)); }
.guru-sandi-besar { font-size: var(--fs-lg); letter-spacing: 0.12em; }

/* Pil kata sandi: tertutup sampai diklik; tombol salin di sampingnya. */
.guru-sandi { display: inline-flex; align-items: center; gap: var(--space-1); }
.guru-sandi-pil {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0 0.6rem;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface-alt);
  cursor: pointer;
  transition: var(--transition-colors);
  touch-action: manipulation;
}
.guru-sandi-pil code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  line-height: 1;
  color: var(--color-text-secondary);
}
.guru-sandi-pil[aria-pressed="true"] { border-color: var(--color-primary-border); background-color: var(--color-primary-softer); }
.guru-sandi-pil[aria-pressed="true"] code { color: var(--color-primary-text); }
.guru-sandi-pil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (hover: hover) {
  .guru-sandi-pil:hover { border-color: var(--color-primary-border); }
}

/* Bilah tindakan massal di bawah kepala tabel: muncul saat ada baris dicentang. */
.guru-massal {
  justify-content: space-between;
  padding: var(--space-3) var(--gap-card);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  background-color: var(--color-primary-softer);
}
.guru-massal > span { font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.guru-tabel-kaki { border-top: var(--border-thin) solid var(--color-border-subtle); }
.guru-tabel-sekolah td[data-label="Sekolah"] { min-width: 14rem; }
.guru-tabel-guru td[data-label="Kata sandi"], .guru-tabel-guru td[data-label="Masuk terakhir"] { white-space: nowrap; }
.guru-sel-dua { display: grid; gap: 0.1rem; }
.guru-sel-dua b { font-weight: var(--fw-semibold); white-space: nowrap; }
.guru-sel-dua small { font-size: var(--fs-2xs); color: var(--color-text-muted); }

/* Pilihan berketerangan (sekolah): tiap pilihan dua baris dengan jarak, bukan tumpukan teks rapat. */
.page-guru .select-list { display: grid; gap: var(--space-1); }
.page-guru .select-option-kaya { min-height: var(--control-height-md); padding-block: var(--space-2); }
.select-option-teks { display: grid; gap: 0.15rem; min-width: 0; }
.select-option-teks b { font-weight: var(--fw-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-option-teks small { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.select-option[aria-selected="true"] .select-option-teks small { color: inherit; opacity: 0.8; }

/* ---------- Kartu login cetak (DEC-167) --------------------------- */
/* Halaman terang tanpa kerangka dashboard; kisi kartu seukuran kartu nama (85,6 × 54 mm) untuk digunting. */
.page-kartu { background-color: var(--color-bg); }
.kartu-alat { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6) var(--space-4); }
.kartu-alat-judul { margin: 0; font-size: var(--fs-xl); }
.kartu-lembar { padding-bottom: var(--space-10); }
.kartu-kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(85.6mm, 1fr)); gap: 6mm; }
.kartu-akun {
  box-sizing: border-box;
  width: 85.6mm;
  height: 54mm;
  padding: 4mm 5mm;
  border: 1px solid #B5BCC6;
  border-radius: 3mm;
  background: #fff;
  color: #1f2937;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 1mm;
  break-inside: avoid;
  page-break-inside: avoid;
  font-family: var(--font-body, system-ui, sans-serif);
}
.kartu-akun-kepala { display: flex; align-items: center; gap: 2mm; font-size: 8pt; color: #556; }
.kartu-akun-logo { width: 6mm; height: 6mm; object-fit: contain; }
.kartu-akun-merek { font-family: var(--font-display); font-weight: 800; letter-spacing: 0.08em; color: #012A6A; }
.kartu-akun-sekolah { margin-inline-start: auto; text-align: end; max-width: 45mm; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-akun-nama { margin: 0; font-family: var(--font-display); font-size: 12pt; font-weight: 800; line-height: 1.15; color: #0F4597; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kartu-akun-kelas { margin: 0; font-size: 8.5pt; color: #444; }
.kartu-akun-data { display: grid; grid-template-columns: 1.4fr 0.8fr 1.2fr; gap: 2mm; margin: 0; align-self: center; }
.kartu-akun-data dt { font-size: 6.5pt; text-transform: uppercase; letter-spacing: 0.06em; color: #667; }
.kartu-akun-data dd { margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12pt; font-weight: 700; letter-spacing: 0.1em; color: #111; }
.kartu-akun-kaki { margin: 0; font-size: 7pt; color: #667; }
/* Kartu akun guru (DEC-168): dua kolom (email, kata sandi); kartu tanpa sandi tersimpan diberi keterangan. */
.kartu-akun-data-dua { grid-template-columns: 1.7fr 1fr; }
.kartu-akun-data .kartu-akun-surel { font-size: 9pt; letter-spacing: 0; overflow-wrap: anywhere; }
.kartu-akun-kosong { font-family: var(--font-body, system-ui, sans-serif); font-size: 8pt; font-weight: 600; letter-spacing: 0; color: #a33; }
.kartu-akun-nonaktif { opacity: 0.75; }

/* ------------------------------------------------------------------ Tombol tambah di kepala daftar (DEC-172) */

/* Dengan tombol tambah, kepala kartu tetap dua kolom: judul boleh menyusut supaya alatnya tidak turun baris. */
.guru-tabel-kepala > .stack { flex: 1 1 18rem; min-width: 0; }
.guru-tabel-alat-plus { flex: 0 1 28rem; max-width: 28rem; }
.guru-tabel-alat-baris { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.guru-tabel-alat-baris .guru-filter-cari { flex: 1 1 auto; min-width: 0; }
.guru-tabel-tambah { flex: 0 0 auto; white-space: nowrap; }
.empty-state .guru-tabel-tambah { margin-top: var(--space-2); }

@media (max-width: 575.98px) {
  .guru-tabel-alat-baris { flex-wrap: wrap; }
  .guru-tabel-alat-baris .guru-filter-cari { flex-basis: 100%; }
  .guru-tabel-tambah { width: 100%; justify-content: center; }
}

/* Formulir di dalam modal: rata kiri dan selebar kotaknya. */
.guru-modal-form { width: 100%; text-align: start; }
.guru-modal-form .field { text-align: start; }
/* Guru pengganti dan pendamping: tanggal selesai hanya untuk guru pengganti, jadi disembunyikan selama peran pendamping
   dipilih. Peramban tanpa :has() tetap menampilkannya, dan server mengabaikan tanggal itu untuk pendamping. */
.guru-modal-form:has(input[name="peran"][value="pendamping"]:checked) .guru-tamu-tanggal { display: none; }

/* ------------------------------------------------------------------ Pemotong foto profil (DEC-172) */

.guru-foto-aksi { align-items: center; row-gap: var(--space-2); }
.guru-foto-aksi form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }

.foto-potong { display: grid; justify-items: center; gap: var(--space-4); width: 100%; }

.foto-potong-panggung {
  position: relative;
  width: min(18rem, 72vw);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-sunken, var(--color-surface-2, #0b1220));
  background-image: linear-gradient(45deg, rgba(127, 127, 127, 0.16) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, 0.16) 75%),
    linear-gradient(45deg, rgba(127, 127, 127, 0.16) 25%, transparent 25%, transparent 75%, rgba(127, 127, 127, 0.16) 75%);
  background-position: 0 0, 10px 10px;
  background-size: 20px 20px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.foto-potong-panggung.is-geser { cursor: grabbing; }
.foto-potong-panggung:focus-visible { outline: var(--border-thick, 2px) solid var(--color-primary); outline-offset: 2px; }

.foto-potong-gambar {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: none;
  transform: translate(-50%, -50%);
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Topeng: lingkaran bening dengan bayangan melebar ke luar, jadi bagian yang tidak ikut disimpan meredup. */
.foto-potong-topeng {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-circle);
  pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 12, 24, 0.55), inset 0 0 0 2px rgba(255, 255, 255, 0.85);
}

.foto-potong-kendali { display: grid; gap: var(--space-2); width: min(18rem, 72vw); justify-items: stretch; text-align: start; }
.foto-potong-kendali p { margin: 0; }

.foto-potong-zoom {
  width: 100%;
  height: 1.5rem;
  margin: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .foto-potong-gambar { transition: none; }
}

/* ------------------------------------------------------------------ Umpan balik tombol salin (DEC-173) */

.is-tersalin {
  color: var(--color-success-text);
  border-color: var(--color-success-border);
  background-color: var(--color-success-soft);
}

.is-tersalin .icon { transform: scale(1.12); }

@media (prefers-reduced-motion: no-preference) {
  [data-salin] .icon { transition: transform var(--dur-fast) var(--ease-spring); }
  .is-tersalin .icon { animation: salin-centang var(--dur-base) var(--ease-spring); }
}

@keyframes salin-centang {
  0% { transform: scale(0.6); opacity: 0.4; }
  60% { transform: scale(1.25); opacity: 1; }
  100% { transform: scale(1.12); opacity: 1; }
}

@media print {
  .page-kartu { background: #fff !important; }
  .page-kartu .kartu-alat, .page-kartu .footer, .page-kartu .toast-wadah { display: none !important; }
  .page-kartu .kartu-lembar { padding: 0; max-width: none; }
  .kartu-kisi { grid-template-columns: repeat(2, 85.6mm); gap: 5mm; justify-content: start; }
  .kartu-akun { border-style: dashed; }
  @page { size: A4; margin: 10mm; }
}

/* ---------- Revisi pasca-bimbingan: kedua soal, skor otomatis, penanda, dan Uji Pemahaman di dashboard ---------- */

/* Satu blok per soal di detail siswa: kartu soal dan skor otomatis berdampingan, jawaban selebar penuh, lalu skor guru. */
.guru-soal-blok { display: grid; gap: var(--space-5); }
.guru-soal-blok + .guru-soal-blok { padding-top: var(--space-6); border-top: var(--border-thin) solid var(--color-border); }
.guru-penilaian h5 { margin: 0; font-size: var(--fs-lg); }

.guru-otomatis {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface-alt);
  min-width: 0;
}

.guru-otomatis-kosong { align-content: center; }
.guru-otomatis-kepala p { margin: var(--space-1) 0 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-otomatis-kepala b { font-family: var(--font-display); font-size: var(--fs-xl); color: var(--color-text); }
/* K-47 (V-13): hasil Periksa pertama di bawah skor otomatis, angkanya lebih kecil dari skor. */
.guru-otomatis-kepala .guru-otomatis-pertama b { font-size: var(--fs-base); }
/* REVISI 01 (K10): banyak Periksa dan tanggapan pertama satu butir, di samping pil statusnya di Detail siswa. */
.guru-periksa-butir {
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--color-text-secondary);
}

ol.guru-otomatis-daftar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.guru-otomatis-daftar li {
  display: grid;
  grid-template-columns: 2.5rem 1.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2);
  font-size: var(--fs-sm);
}

.guru-otomatis-tahap { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.guru-otomatis-daftar b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-text); }
.guru-otomatis-daftar li[data-skor="0"] b, .guru-otomatis-daftar li[data-skor="1"] b, .guru-otomatis-daftar li[data-skor="2"] b { color: var(--color-warning-text); }
.guru-otomatis-daftar small { color: var(--color-text-muted); }
.guru-otomatis-contoh { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-otomatis-contoh .icon { flex: none; width: 1.1em; height: 1.1em; margin-top: 0.15em; color: var(--color-info-text); }
/* Spesifikasi revisi validasi 3.5: isian yang dicatat tetapi tidak diskor, dan banyak isian yang diperbaiki dari Tahap 4. */
.guru-otomatis-lain { display: grid; gap: var(--space-1); font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-otomatis-lain p { margin: 0; }
.guru-otomatis-lain ul { margin: 0; padding-left: var(--space-4); }
.guru-otomatis-lain b { color: var(--color-text-secondary); }
.guru-otomatis-diperbaiki { display: flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.guru-otomatis-diperbaiki .icon { flex: none; width: 1rem; height: 1rem; }

.guru-penanda {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.guru-penanda .icon { width: 1em; height: 1em; }
.guru-penanda-tinjau { background-color: var(--color-info-soft); color: var(--color-info-text); }
.guru-penanda-perhatian { background-color: var(--color-warning-soft); color: var(--color-warning-text); }
.guru-penanda-aman { background-color: var(--color-success-soft); color: var(--color-success-text); }
.guru-penanda-kecil { padding: 1px 6px; }

.guru-rubrik-saran { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-rubrik-riwayat summary { cursor: pointer; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-rubrik-riwayat ol { margin: var(--space-2) 0 0; padding-left: 1.25rem; font-size: var(--fs-xs); color: var(--color-text-muted); display: grid; gap: var(--space-1); }

/* KP-175 (TS-13): "oto 4" tetap sebaris lewat spasi tak terputus, sedangkan ikon tinjau boleh turun ke baris berikutnya bila
   kolom sel sempit (1024–1100 px dengan sembilan kolom skor), supaya tidak keluar dari selnya. */
.guru-rekap-otomatis { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); }
.guru-rekap-otomatis .icon { width: 0.9em; height: 0.9em; vertical-align: -0.1em; }

/* Uji Pemahaman di detail siswa. */
.guru-uji-percobaan { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) solid var(--color-border-subtle); background-color: var(--color-surface-alt); }
.guru-uji-percobaan h4 { margin: 0; font-size: var(--fs-base); }
/* Revisi validasi 3.12: percobaan yang sedang dikerjakan, cukup soal terakhir dan waktu simpannya, tanpa drafnya. */
.guru-uji-berjalan { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) solid var(--color-info-border); background-color: var(--color-info-soft); color: var(--color-info-text); font-weight: var(--fw-semibold); }
.guru-uji-berjalan .icon { margin-top: 0.2em; }
.guru-tabel-uji td, .guru-tabel-uji th { text-align: center; }
.guru-tabel-uji tbody th { text-align: left; }
.guru-tabel-uji td[data-skor="0"], .guru-tabel-uji td[data-skor="1"], .guru-tabel-uji td[data-skor="2"] { color: var(--color-warning-text); font-weight: var(--fw-bold); }
.guru-uji-detail summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.guru-uji-jawab h5 { margin: var(--space-3) 0 var(--space-1); font-size: var(--fs-sm); }

/* ---------- 14. ANALITIK SITUS (KP-138) ------------------------- */

/* Jawaban besar: memakai panel sapaan Beranda. Angka besar di kaca kanan, lajur tiga kelompok pengunjung, dan rinciannya. */
.analitik-jawab { margin-bottom: var(--space-5); }
.analitik-jawab h1 { max-width: 32ch; }
.analitik-jawab-panel { align-content: start; }
.analitik-jawab-panel .analitik-jawab-angka {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 2rem + 2.6vw, 4rem);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-text-inverse);
  font-variant-numeric: tabular-nums;
}
.analitik-jawab-lajur {
  display: flex;
  gap: 2px;
  height: 6px;
  margin-top: var(--space-2);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: rgba(255, 255, 255, 0.14);
}
.analitik-jawab-lajur i { display: block; width: 0; height: 100%; background-color: var(--c); transition: width var(--dur-slower) var(--ease-out); }
.analitik-jawab-rinci { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-1) 0 0; }
.analitik-jawab-rinci div { display: grid; gap: 2px; min-width: 0; }
.analitik-jawab-rinci dt { display: flex; align-items: center; gap: 6px; font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--biru-100); }
.analitik-jawab-rinci dt::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: var(--radius-circle); background-color: var(--c); }
.analitik-jawab-rinci dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--color-text-inverse); font-variant-numeric: tabular-nums; }
/* Warna terang di atas panel navy; urutannya umum, siswa, demo. */
.analitik-jawab-rinci div:nth-child(1) dt, .analitik-jawab-lajur i:nth-child(1) { --c: #86ADEB; }
.analitik-jawab-rinci div:nth-child(2) dt, .analitik-jawab-lajur i:nth-child(2) { --c: #5FD4C4; }
.analitik-jawab-rinci div:nth-child(3) dt, .analitik-jawab-lajur i:nth-child(3) { --c: #C9A4F0; }

/* Bilah alat lengket: pilihan rentang, jumlah yang sedang membuka situs, dan unduhan. */
.analitik-alat {
  position: sticky;
  top: var(--guru-atas-tinggi);
  z-index: var(--z-sticky);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 calc(-1 * var(--container-gutter)) var(--space-5);
  padding: var(--space-3) var(--container-gutter);
  background-color: var(--glass-chrome-strong);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .analitik-alat { -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate)); background-color: var(--glass-chrome); }
}
.analitik-unduh { margin-left: auto; }

.analitik-rentang {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  max-width: 100%;
  padding: 3px;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-muted);
}
.analitik-rentang-pil {
  position: relative;
  z-index: 1;
  min-height: calc(var(--control-height-sm) - 6px);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--dur-base) var(--ease-out);
}
.analitik-rentang-pil[aria-checked="true"] { color: var(--color-on-primary); }
.analitik-rentang-pil:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
@media (hover: hover) {
  .analitik-rentang-pil[aria-checked="false"]:hover { color: var(--color-primary-text); }
}
/* Sebelum skrip siap, pil terpilih berlatar sendiri; sesudahnya jempol yang meluncur di antara pil. */
.analitik-rentang:not(.is-siap) .analitik-rentang-pil[aria-checked="true"] { background-color: var(--color-primary); }
.analitik-rentang-jempol {
  position: absolute;
  z-index: 0;
  top: 3px;
  bottom: 3px;
  left: 0;
  width: 0;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  box-shadow: 0 6px 14px -6px rgba(21, 86, 184, 0.65);
  opacity: 0;
}
.analitik-rentang.is-siap .analitik-rentang-jempol { opacity: 1; }
.analitik-rentang.is-gerak .analitik-rentang-jempol { transition: transform var(--dur-pegas-halus) var(--ease-pegas-halus), width var(--dur-pegas-halus) var(--ease-pegas-halus); }

.analitik-langsung {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  white-space: nowrap;
}
.analitik-langsung b { font-family: var(--font-display); color: var(--color-text); font-variant-numeric: tabular-nums; }
.analitik-denyut { position: relative; flex: none; width: 8px; height: 8px; border-radius: var(--radius-circle); background-color: var(--neutral-400); }
.analitik-langsung.is-ada .analitik-denyut { background-color: var(--color-success); }
.analitik-langsung.is-ada .analitik-denyut::after {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid var(--color-success);
  border-radius: var(--radius-circle);
  animation: analitik-denyut 1.8s var(--ease-out) infinite;
}
@keyframes analitik-denyut { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

/* Angka ringkas dengan garis kecil di dasar kartu. */
/* Kartu angka: label di atas, angka besar, pembanding dan catatan, lalu garis kecil di pita sendiri di dasar kartu
   sehingga tidak pernah menimpa teks. Ikon menepi ke pojok kanan atas supaya teks memakai seluruh lebar kartu. */
.analitik-stat { position: relative; overflow: hidden; isolation: isolate; flex-direction: column; align-items: stretch; gap: 0; padding-bottom: calc(var(--space-5) + 2.5rem); }
.analitik-stat .guru-stat-ikon { position: absolute; z-index: 1; top: var(--space-4); right: var(--space-4); }
.analitik-stat .guru-stat-isi { position: relative; z-index: 1; gap: var(--space-1); }
.analitik-stat .guru-stat-label { order: -1; min-height: 2.5rem; padding-right: 3.25rem; display: flex; align-items: center; line-height: var(--lh-snug); }
.analitik-stat .guru-stat-angka { font-size: var(--fs-3xl); }
.analitik-stat .guru-stat-angka.is-panjang { font-size: var(--fs-xl); line-height: 1.2; min-height: calc(var(--fs-3xl) * 1); display: flex; align-items: flex-end; }
.analitik-garis { position: absolute; z-index: 0; inset: auto 0 0 0; height: 2.5rem; pointer-events: none; }
.analitik-garis svg { display: block; width: 100%; height: 100%; }
.analitik-banding {
  display: inline-flex;
  align-items: center;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.analitik-banding:empty { display: none; }
.analitik-banding.is-naik { background-color: var(--color-success-soft); color: var(--color-success-text); }
.analitik-banding.is-turun { background-color: var(--color-danger-soft); color: var(--color-danger-text); }
.analitik-banding.is-sama { background-color: var(--color-bg-muted); color: var(--color-text-secondary); }

/* Kisi kartu grafik. */
/* Jawaban besar dua lajur, empat angka sebaris, dan kisi dua lajur hanya bila area isi cukup lebar. Menu samping ikut
   memakan ruang, jadi yang diukur area isinya, bukan layar. Pemilahan yang panjang menempati dua baris, berdampingan
   dengan peta jam dan wilayah. */
.analitik { container: analitik / inline-size; }
.guru-sapa.analitik-jawab { grid-template-columns: minmax(0, 1fr); }
.analitik-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.analitik-kisi { display: grid; gap: var(--gap-grid); grid-template-columns: minmax(0, 1fr); }
@container analitik (min-width: 56rem) {
  .guru-sapa.analitik-jawab { grid-template-columns: minmax(0, 1fr) minmax(16rem, 20rem); column-gap: var(--space-8); align-items: center; }
  .analitik-stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .analitik-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .analitik-kartu-lebar { grid-column: 1 / -1; }
  .analitik-kartu-tinggi { grid-row: span 2; }
}
.analitik-kartu { container-type: inline-size; }
.analitik-kartu .card-body { display: grid; gap: var(--space-4); align-content: start; }
.analitik-kartu-kepala { align-items: flex-start; }
.analitik-kartu-judul { display: grid; gap: 2px; min-width: 0; }
.analitik-kartu-judul p { margin: 0; }
.analitik-catatan-kaki { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); line-height: var(--lh-relaxed); }
.analitik-kosong {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--space-5);
  border: var(--border-thin) dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-align: center;
}

.analitik-legenda { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.analitik-legenda-butir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2rem;
  padding: 0 var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: var(--transition-colors), opacity var(--dur-base) var(--ease-out);
}
.analitik-legenda-butir i { flex: none; width: 10px; height: 10px; border-radius: 3px; background-color: var(--warna); transition: background-color var(--dur-base) var(--ease-out); }
.analitik-legenda-butir[aria-pressed="false"] { opacity: 0.6; }
.analitik-legenda-butir[aria-pressed="false"] i { background-color: transparent; box-shadow: inset 0 0 0 2px var(--warna); }
.analitik-legenda-butir:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* Grafik SVG buatan analitik.js. */
.analitik-tren, .analitik-bulan { position: relative; border-radius: var(--radius-md); outline: none; touch-action: pan-y; }
.analitik-tren { min-height: 13.75rem; }
.analitik-bulan { min-height: 12.5rem; }
.analitik-tren:focus-visible, .analitik-bulan:focus-visible { box-shadow: var(--shadow-focus); }
.analitik-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font-body); }
.analitik-svg .kisi line { stroke: var(--grafik-kisi); stroke-width: 1; shape-rendering: crispEdges; }
.analitik-svg .sumbu text { fill: var(--grafik-sumbu); font-size: 11px; font-variant-numeric: tabular-nums; }
.analitik-svg .garis { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.analitik-svg .garis-putus { stroke-width: 2; stroke-dasharray: 5 4; }
.analitik-svg .silang { stroke: var(--grafik-sumbu); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.analitik-svg .titik { stroke: var(--color-surface); stroke-width: 2; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.analitik-svg.is-sorot .silang, .analitik-svg .titik.is-sorot { opacity: 1; }
.analitik-svg .titik-diam { stroke: var(--color-surface); stroke-width: 1.5; }
.analitik-svg .batang { transition: opacity var(--dur-fast) var(--ease-out); }
.analitik-svg.is-sorot .batang:not(.is-sorot) { opacity: 0.45; }

.analitik-tip {
  position: fixed;
  z-index: var(--z-toast);
  top: 0;
  left: 0;
  max-width: 17rem;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--grafik-tip-latar);
  color: var(--grafik-tip-teks);
  font-size: var(--fs-xs);
  line-height: 1.45;
  box-shadow: var(--shadow-lg);
  pointer-events: none;
  opacity: 0;
  transform: translate(var(--x, 0), var(--y, 0)) scale(0.97);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.analitik-tip.is-tampil { opacity: 1; transform: translate(var(--x, 0), var(--y, 0)); }
.analitik-tip-judul { display: block; margin-bottom: 4px; font-family: var(--font-display); font-weight: var(--fw-bold); }
.analitik-tip-baris { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.analitik-tip-baris span { display: inline-flex; align-items: center; gap: 6px; }
.analitik-tip-baris i { flex: none; width: 8px; height: 8px; border-radius: var(--radius-circle); background-color: var(--warna); }
/* Angka mengikuti warna teks tip; aturan dasar b memberinya warna teks halaman yang gelap di atas latar tip. */
.analitik-tip-baris b { color: inherit; font-variant-numeric: tabular-nums; }
.analitik-tip-catatan { display: block; margin-top: 4px; opacity: 0.8; }

/* Pemilahan halaman: bilah bertumpuk dan daftar kelompok. */
.analitik-saringan-bilah { display: flex; gap: 2px; height: 1.125rem; overflow: hidden; border-radius: var(--radius-pill); background-color: var(--color-bg-muted); }
.analitik-saringan-ruas { flex: none; width: 0; height: 100%; background-color: var(--warna); transition: width var(--dur-slower) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.analitik-saringan-bilah.is-sorot .analitik-saringan-ruas:not(.is-sorot) { opacity: 0.35; }
.analitik-saringan-daftar { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.analitik-saringan-daftar li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px var(--space-3); padding: var(--space-2); border-radius: var(--radius-sm); transition: background-color var(--dur-fast) var(--ease-out); }
.analitik-saringan-daftar li.is-sorot { background-color: var(--color-bg-subtle); }
.analitik-saringan-daftar li > i { width: 10px; height: 10px; border-radius: 3px; background-color: var(--warna); }
.analitik-saringan-nama { display: grid; min-width: 0; font-size: var(--fs-sm); color: var(--color-text); }
.analitik-saringan-nama small { font-size: var(--fs-2xs); color: var(--color-text-muted); line-height: var(--lh-snug); }
.analitik-saringan-angka { font-family: var(--font-display); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; text-align: right; }
.analitik-saringan-angka small { display: block; font-family: var(--font-body); font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--color-text-muted); }
.analitik-saringan-daftar li.analitik-saringan-pisah { display: block; padding: var(--space-3) var(--space-2) var(--space-1); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.analitik-mini { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.analitik-cip-daftar { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.analitik-cip-daftar li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill); background-color: var(--color-bg-muted); font-size: var(--fs-xs); color: var(--color-text-secondary); }
.analitik-cip-daftar li b { font-variant-numeric: tabular-nums; color: var(--color-text); }
.analitik-cip-kosong { font-size: var(--fs-xs); color: var(--color-text-muted); }

/* Peta jam ramai: tujuh hari kali dua puluh empat jam. */
.analitik-panas-wadah { display: grid; gap: var(--space-3); }
.analitik-panas { display: grid; grid-template-columns: 2.4rem repeat(24, minmax(0, 1fr)); gap: 3px; outline: none; border-radius: var(--radius-sm); }
.analitik-panas:focus-visible { box-shadow: var(--shadow-focus); }
.analitik-panas-hari { align-self: center; font-size: 11px; color: var(--grafik-sumbu); }
.analitik-panas-jam { font-size: 10px; color: var(--grafik-sumbu); white-space: nowrap; }
.analitik-panas-sel {
  aspect-ratio: 1;
  border-radius: 3px;
  background-color: rgba(var(--grafik-panas), var(--a, 0));
  transition: background-color var(--dur-slower) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.analitik-panas-sel.is-kosong { background-color: var(--grafik-panas-0); }
.analitik-panas-sel.is-fokus { position: relative; z-index: 1; outline: 2px solid var(--color-text); outline-offset: 1px; transform: scale(1.18); }
.analitik-panas-bawah { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.analitik-panas-skala { display: flex; align-items: center; gap: 4px; font-size: var(--fs-2xs); color: var(--color-text-muted); }
.analitik-panas-skala i { width: 14px; height: 10px; border-radius: 2px; }
.analitik-panas-ringkas { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }

/* Donat dan daftar berwarna. */
.analitik-donat-wadah { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; }
@container (min-width: 30rem) {
  .analitik-donat-wadah { grid-template-columns: 10.5rem minmax(0, 1fr); justify-items: stretch; }
}
.analitik-donat { position: relative; width: 10.5rem; max-width: 100%; aspect-ratio: 1; }
.analitik-donat svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.analitik-donat .alas { fill: none; stroke: var(--color-bg-muted); stroke-width: 5.2; }
.analitik-donat .ruas {
  fill: none;
  stroke: var(--warna);
  stroke-width: 5.2;
  transition: stroke-dasharray var(--dur-reveal) var(--ease-out), stroke-dashoffset var(--dur-reveal) var(--ease-out), stroke-width var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.analitik-donat.is-sorot .ruas:not(.is-sorot) { opacity: 0.3; }
.analitik-donat .ruas.is-sorot { stroke-width: 6.6; }
.analitik-donat-tengah { position: absolute; inset: 18%; display: grid; place-content: center; gap: 2px; text-align: center; pointer-events: none; }
.analitik-donat-tengah b { font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); line-height: 1.05; font-variant-numeric: tabular-nums; }
.analitik-donat-tengah span { font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.analitik-daftar-warna { display: grid; gap: 2px; width: 100%; margin: 0; padding: 0; list-style: none; }
.analitik-daftar-warna button {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 6px var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  text-align: left;
  cursor: default;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.analitik-daftar-warna button.is-sorot, .analitik-daftar-warna button:focus-visible { outline: none; background-color: var(--color-bg-subtle); }
.analitik-daftar-warna i { width: 10px; height: 10px; border-radius: 3px; background-color: var(--warna); }
.analitik-daftar-warna span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analitik-daftar-warna b { font-variant-numeric: tabular-nums; }
.analitik-daftar-warna small { min-width: 3.2em; color: var(--color-text-muted); font-size: var(--fs-xs); text-align: right; font-variant-numeric: tabular-nums; }
.analitik-dua { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.analitik-subjudul { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }

/* Batang berperingkat. */
.analitik-batang { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
/* Daftar panjang di kartu lebar mengalir ke bawah dahulu lalu ke lajur kedua. */
@container (min-width: 44rem) {
  .analitik-batang-dua { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(var(--baris, 5), auto); grid-auto-flow: column; column-gap: var(--space-8); }
}
.analitik-batang li { display: grid; gap: 6px; }
.analitik-batang-kepala { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.analitik-batang-nama { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; color: var(--color-text); }
.analitik-batang-nama span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analitik-batang-nama small { flex: none; min-width: 1.4em; color: var(--color-text-subtle); font-family: var(--font-display); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.analitik-batang-kepala b { flex: none; font-variant-numeric: tabular-nums; }
.analitik-batang-kepala b small { margin-left: 4px; font-weight: var(--fw-regular); color: var(--color-text-muted); }
.analitik-batang-jalur { height: 8px; overflow: hidden; border-radius: var(--radius-pill); background-color: var(--color-bg-muted); }
.analitik-batang-isi { display: block; height: 100%; border-radius: inherit; background-color: var(--warna, var(--grafik-k1)); transform: scaleX(var(--s, 0)); transform-origin: left center; transition: transform var(--dur-reveal) var(--ease-out); }

/* Kunjungan terbaru. */
.analitik-sesi-daftar { display: grid; margin: 0; padding: 0; list-style: none; }
.analitik-sesi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--space-2) var(--space-3); padding: var(--space-3) 0; border-top: var(--border-thin) solid var(--color-border-subtle); }
.analitik-sesi:first-child { border-top: 0; padding-top: 0; }
.analitik-sesi-isi { min-width: 0; }
.analitik-sesi-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; }
.analitik-sesi-kepala b { font-family: var(--font-display); }
.analitik-sesi-meta { margin: 2px 0 var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.analitik-jejak { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-2xs); }
.analitik-jejak li { position: relative; padding: 2px 8px; border-radius: var(--radius-pill); background-color: var(--color-bg-muted); color: var(--color-text-secondary); }
.analitik-jejak li + li::before { content: ""; position: absolute; top: 50%; left: -12px; width: 10px; border-top: 1.5px solid var(--color-border-strong); }
.analitik-jejak li.analitik-jejak-lebih { background-color: transparent; color: var(--color-text-muted); }
.analitik-sesi-waktu { display: grid; justify-items: end; gap: 2px; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: right; }
.analitik-sesi-waktu time { font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.analitik-sesi-diam { color: var(--color-warning-text); }
@media (max-width: 35.99rem) {
  .analitik-sesi { grid-template-columns: auto minmax(0, 1fr); }
  .analitik-sesi-waktu { grid-column: 2; justify-items: start; text-align: left; }
}

/* Tabel angka tren. */
.analitik-tabel summary { cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.analitik-tabel .table-wrap { max-height: 18rem; margin-top: var(--space-3); overflow: auto; }
.analitik-tabel table { width: 100%; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.analitik-tabel td, .analitik-tabel th { text-align: right; }
.analitik-tabel td:first-child, .analitik-tabel th:first-child { text-align: left; }

/* Pencatatan dan privasi. */
.analitik-pencatatan { display: grid; gap: var(--space-6); }
@container (min-width: 44rem) {
  .analitik-pencatatan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.analitik-pencatatan h3 { margin: 0; }
.analitik-perangkat-ini { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-4); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-md); background-color: var(--color-surface-alt); }
.analitik-perangkat-ini p { margin: 0; }
/* KP-175 (TS-13): tombol Hitung perangkat ini untuk mencoba tidak lebih lebar dari kotaknya di ponsel 320–360 px. */
.analitik-perangkat-ini .btn { max-width: 100%; }
.analitik-perangkat-ini-kepala { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.analitik-privasi-daftar { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.analitik-privasi-daftar li { display: flex; align-items: flex-start; gap: var(--space-2); }
.analitik-privasi-daftar .icon { flex: none; margin-top: 3px; color: var(--color-success); }
.analitik-privasi-tidak .icon { color: var(--color-danger); }

/* Kartu ringkas di Beranda super admin. */
.analitik-beranda-angka { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin-top: var(--space-3); }
.analitik-beranda-angka b { font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-extrabold); line-height: 1; font-variant-numeric: tabular-nums; }
.analitik-beranda-angka span { font-size: var(--fs-sm); color: var(--color-text-secondary); }
.analitik-beranda-garis { display: block; width: 100%; height: 2.75rem; margin: var(--space-3) 0; overflow: visible; }
.analitik-beranda-garis path { fill: none; stroke: var(--grafik-pengunjung); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 35.99rem) {
  .analitik-stat { padding-bottom: calc(var(--space-4) + 2rem); }
  .analitik-stat .guru-stat-ikon { top: var(--space-3); right: var(--space-3); width: 2rem; height: 2rem; }
  .analitik-stat .guru-stat-label { min-height: 2rem; padding-right: 2.5rem; font-size: var(--fs-xs); }
  .analitik-stat .guru-stat-angka { font-size: var(--fs-2xl); }
  .analitik-stat .guru-stat-angka.is-panjang { font-size: var(--fs-lg); }
  /* Di ponsel catatan kartu disembunyikan (guru-stat), tetapi pil pembanding tetap tampil. */
  .analitik-stat .guru-stat-catatan { display: block; }
  .analitik-stat [data-stat-catatan] { display: none; }
  .analitik-garis { height: 2rem; }
}

/* KP-175 (TS-13): di bawah 360 px label kartu angka (Pengunjung, Kunjungan) tidak muat di samping ikon hiasannya; ikon
   dilepas dan ruangnya dipakai label. */
@media (max-width: 22.49rem) {
  .analitik-stat .guru-stat-ikon { display: none; }
  .analitik-stat .guru-stat-label { padding-right: 0; }
}
@media (max-width: 47.99rem) {
  /* Di ponsel bilah alat tidak menempel: bersama bilah atas ia akan menutupi seperlima layar. */
  .analitik-alat { position: static; }
  .analitik-unduh span { display: none; }
  .analitik-unduh { padding-inline: var(--space-3); }
}
@media (max-width: 35.99rem) {
  .analitik-alat { gap: var(--space-2); }
  .analitik-rentang { flex: 1 1 100%; }
  .analitik-rentang-pil { flex: 1 1 0; padding: 0 var(--space-2); }
  .analitik-jawab-rinci dd { font-size: var(--fs-lg); }
  .analitik-panas { grid-template-columns: 1.9rem repeat(24, minmax(0, 1fr)); gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .analitik-rentang.is-gerak .analitik-rentang-jempol, .analitik-saringan-ruas, .analitik-batang-isi, .analitik-donat .ruas, .analitik-panas-sel, .analitik-jawab-lajur i { transition: none; }
  .analitik-langsung.is-ada .analitik-denyut::after { animation: none; }
}

@media print {
  .analitik-alat, .analitik-legenda, .analitik-tabel, .analitik-pencatatan form { display: none !important; }
  .analitik-kartu { break-inside: avoid; }
}

/* ---------- 15. JEJAK AKTIVITAS (KP-145) ------------------------- */

/* Saringan: lima kolom yang menyempit sendiri mengikuti lebar area isi. */
.guru-jejak-saring-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3); }
.guru-jejak-saring .field { margin: 0; }
.guru-jejak-saring .cluster .text-xs { margin-left: var(--space-1); }

.guru-tabel-jejak { min-width: 50rem; }
.guru-tabel-jejak td { vertical-align: top; }
.guru-jejak-waktu { white-space: nowrap; }
.guru-jejak-waktu time, .guru-jejak-waktu small { display: block; }
.guru-jejak-waktu time { font-size: var(--fs-sm); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.guru-jejak-waktu small { font-size: var(--fs-2xs); color: var(--color-text-muted); }
.guru-jejak-tindakan { display: grid; gap: 0.2rem; min-width: 18rem; }
.guru-jejak-jenis { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.guru-jejak-jenis .icon { width: 0.95rem; height: 0.95rem; flex: none; }
.guru-jejak-teks { margin: 0; font-size: var(--fs-sm); line-height: 1.4; }
.guru-jejak-teks b { font-weight: var(--fw-semibold); }
.guru-jejak-teks .badge { vertical-align: 0.1em; }
.guru-jejak-sasaran { margin: 0; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.guru-jejak-rinci { margin: 0; font-size: var(--fs-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.guru-jejak-asal .guru-sel-dua small { max-width: 14rem; overflow-wrap: anywhere; }
/* Catatan gagal ditandai garis merah di tepi kiri barisnya, tanpa mewarnai seluruh baris. */
.guru-tabel-jejak tr.guru-jejak-gagal td:first-child { box-shadow: inset 3px 0 0 var(--color-danger); }

/* Ponsel: tiap catatan menjadi kartu ringkas. Waktu dan tindakan lebih dulu, lalu pelaku dan asal masing-masing sebaris. */
@media (max-width: 47.99rem) {
  .guru-tabel-jejak { min-width: 0; }
  .guru-tabel-jejak thead { display: none; }
  .guru-tabel-jejak, .guru-tabel-jejak tbody, .guru-tabel-jejak td { display: block; }
  .guru-tabel-jejak tr { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4) var(--gap-card); border-bottom: var(--border-thin) solid var(--color-border-subtle); }
  .guru-tabel-jejak tr[hidden] { display: none; }
  .guru-tabel-jejak td { padding: 0; border-bottom: 0; }
  .guru-tabel-jejak td[data-label="Tindakan"] { order: 2; padding-block: var(--space-1); }
  .guru-tabel-jejak td[data-label="Pelaku"] { order: 3; }
  .guru-tabel-jejak td[data-label="Asal"] { order: 4; }
  .guru-tabel-jejak td[data-label="Pelaku"] .guru-sel-dua, .guru-tabel-jejak td[data-label="Asal"] .guru-sel-dua { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
  .guru-tabel-jejak td[data-label="Pelaku"] .guru-sel-dua b::before { content: "Oleh "; font-weight: var(--fw-regular); color: var(--color-text-muted); }
  .guru-tabel-jejak td[data-label="Asal"] .guru-sel-dua b { font-size: var(--fs-2xs); font-weight: var(--fw-regular); color: var(--color-text-muted); }
  .guru-jejak-asal .guru-sel-dua small { max-width: none; }
  .guru-jejak-asal .guru-sel-dua small::before { content: "· "; }
  .guru-tabel-jejak tr.guru-jejak-gagal td:first-child { box-shadow: none; }
  .guru-tabel-jejak tr.guru-jejak-gagal { box-shadow: inset 3px 0 0 var(--color-danger); }
  .guru-jejak-waktu { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-2); }
  .guru-jejak-tindakan { min-width: 0; }
  .guru-jejak-saring .cluster .text-xs { flex-basis: 100%; margin-left: 0; }
}
/* Ponsel lebar: jenis, pelaku, dan hasil selebar kartu; kedua tanggal berjajar. Di bawah 26rem kotak tanggal
   terlalu sempit untuk teks contohnya, jadi semuanya tetap bertumpuk. */
@media (min-width: 26rem) and (max-width: 35.99rem) {
  .guru-jejak-saring-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guru-jejak-saring-kisi > .field:nth-child(-n+3) { grid-column: 1 / -1; }
}

@media print {
  .guru-jejak-saring { display: none !important; }
}

/* ---------- 16. CADANGAN SITUS (KP-147) --------------------------- */

/* Penjelasan di kiri, formulir di kanan; bertumpuk bila area isi sempit. */
.guru-cadangan-dua { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 62rem) {
  .guru-cadangan-dua { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.guru-cadangan-subjudul { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text); }
.guru-cadangan-daftar { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-cadangan-daftar li { display: flex; align-items: flex-start; gap: var(--space-2); }
.guru-cadangan-daftar .icon { flex: none; margin-top: 3px; color: var(--color-success); }
.guru-cadangan-tidak .icon { color: var(--color-text-muted); }
.guru-cadangan-nama { font-family: var(--font-mono); font-size: var(--fs-xs); white-space: normal !important; overflow-wrap: anywhere; }
.guru-cadangan-versi { display: block; font-size: var(--fs-2xs); color: var(--color-text-muted); }
.guru-tabel-cadangan { min-width: 44rem; }
.guru-tabel-cadangan td { vertical-align: middle; }

@media (max-width: 47.99rem) {
  .guru-tabel-cadangan { min-width: 0; }
  .guru-tabel-cadangan thead { display: none; }
  .guru-tabel-cadangan, .guru-tabel-cadangan tbody, .guru-tabel-cadangan tr, .guru-tabel-cadangan td { display: block; }
  .guru-tabel-cadangan tr { padding: var(--space-4) var(--gap-card); border-bottom: var(--border-thin) solid var(--color-border-subtle); }
  .guru-tabel-cadangan tr[hidden] { display: none; }
  .guru-tabel-cadangan td { padding: var(--space-1) 0; border-bottom: 0; }
  .guru-tabel-cadangan td[data-label="Dibuat"]::before, .guru-tabel-cadangan td[data-label="Ukuran"]::before { content: attr(data-label) " "; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
  .guru-tabel-cadangan .guru-sel-aksi { width: auto; padding-top: var(--space-2); }
  .guru-tabel-cadangan .guru-sel-aksi .cluster { justify-content: flex-start; }
}

/* ---------- 17. KESEHATAN SITUS (KP-148) --------------------------- */

.guru-sehat-kepala { align-items: flex-start; }
.guru-sehat-daftar { display: grid; margin: 0; padding: 0; list-style: none; }
.guru-sehat-butir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) 0; border-top: var(--border-thin) solid var(--color-border-subtle); }
.guru-sehat-butir:first-child { border-top: 0; }
.guru-sehat-teks { display: grid; gap: 0.15rem; min-width: 0; }
.guru-sehat-teks b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text); overflow-wrap: anywhere; }
.guru-sehat-teks small { font-size: var(--fs-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.guru-sehat-nilai { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-secondary); text-align: right; font-variant-numeric: tabular-nums; }
.guru-sehat-butir .status { justify-self: end; white-space: nowrap; }
.guru-sehat-butir[data-tingkat="masalah"] .guru-sehat-nilai { color: var(--color-danger-text); }
.guru-sehat-galat-daftar { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.guru-sehat-galat { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background-color: var(--color-surface-sunken); }
.guru-sehat-galat time { font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--color-text-muted); }
.guru-sehat-galat code { font-family: var(--font-mono); font-size: var(--fs-xs); white-space: pre-wrap; overflow-wrap: anywhere; background: none; padding: 0; color: var(--color-text-secondary); }

@media (max-width: 47.99rem) {
  .guru-sehat-butir { grid-template-columns: minmax(0, 1fr) auto; }
  .guru-sehat-nilai { grid-column: 1; grid-row: 2; text-align: left; }
  .guru-sehat-butir .status { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}

/* KP-175 (TS-13): di bawah 24rem pil status yang panjang (Terbuka di komputer lokal) memeras kolom teks sampai jalur seperti
   storage/pengumuman keluar dari barisnya. Pil dan nilai turun ke bawah teks. */
@media (max-width: 23.99rem) {
  .guru-sehat-butir { grid-template-columns: minmax(0, 1fr); }
  .guru-sehat-nilai { grid-row: auto; }
  .guru-sehat-butir .status { grid-column: 1; grid-row: auto; justify-self: start; }
}

/* ---------- 18. VERIFIKASI DUA LANGKAH (KP-149) ------------------- */

/* Kotak kode: angka besar berjarak supaya mudah dicocokkan dengan aplikasi. */
.guru-kode-input { font-family: var(--font-mono); font-size: var(--fs-lg); letter-spacing: 0.2em; text-align: center; }
.guru-kode-input::placeholder { font-family: var(--font-body); font-size: var(--fs-sm); letter-spacing: normal; }
.guru-kode-batal { display: flex; justify-content: center; margin-top: var(--space-2); }

/* Langkah, kode QR, lalu formulir. Di layar lebar kode QR menempati kolom kanan setinggi keduanya; di layar sempit kode QR
   tampil sebelum kotak kode, sesuai urutan kerjanya. */
.guru-dua-langkah-pasang { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); grid-template-areas: "langkah" "qr" "form"; align-items: start; }
.guru-dua-langkah-pasang > .guru-langkah { grid-area: langkah; gap: var(--space-3); }
.guru-dua-langkah-pasang > .guru-qr { grid-area: qr; }
.guru-dua-langkah-pasang > form { grid-area: form; }
@media (min-width: 62rem) {
  .guru-dua-langkah-pasang { grid-template-columns: minmax(0, 1fr) 17rem; grid-template-rows: auto 1fr; grid-template-areas: "langkah qr" "form qr"; column-gap: var(--space-8); }
}
/* Kotak kode 6 angka di kartu lebar tidak perlu selebar kolom. */
.guru-kode-pendek { max-width: 18rem; }
/* Kode QR selalu di atas latar putih, juga pada tema gelap, supaya kamera ponsel membacanya. */
.guru-qr { display: grid; gap: var(--space-3); justify-items: center; margin: 0; padding: var(--space-4); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-lg); background-color: var(--color-surface); }
.guru-qr .qr { display: block; width: min(100%, 15rem); height: auto; border-radius: var(--radius-md); background-color: #fff; }
.guru-qr figcaption { display: grid; gap: var(--space-1); justify-items: center; text-align: center; }
.guru-qr-kunci { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); letter-spacing: 0.06em; overflow-wrap: anywhere; color: var(--color-text); background: none; padding: 0; }

.guru-kode-cadangan { border: var(--border-thin) solid var(--color-warning-border); }
/* Sepuluh kode: dua kolom di ponsel, lima kolom (dua baris sama panjang) di layar lebar. */
ol.guru-kode-cadangan-daftar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 48rem) {
  ol.guru-kode-cadangan-daftar { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.guru-kode-cadangan-daftar code { display: block; padding: var(--space-2) var(--space-1); border-radius: var(--radius-md); background-color: var(--color-bg-subtle); font-family: var(--font-mono); font-size: var(--fs-base); font-weight: var(--fw-semibold); letter-spacing: 0.06em; text-align: center; white-space: nowrap; color: var(--color-text); }
.guru-dua-langkah-kelola { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 62rem) {
  .guru-dua-langkah-kelola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guru-dua-langkah-aksi { padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-subtle); }

@media print {
  .page-guru .guru-kode-cadangan .cluster { display: none !important; }
}

/* ---------- 19. ANTREAN PENILAIAN (KP-150) ------------------------ */

/* Siswa yang sedang dinilai: hanya nomornya sampai Tampilkan nama ditekan, supaya kesan terhadap siswa tidak memengaruhi
   skor final. */
.guru-antrean-siswa { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-lg); background-color: var(--color-bg-subtle); }
.guru-antrean-siswa-teks { display: grid; gap: 0.1rem; min-width: 0; margin-inline-end: auto; }
.guru-antrean-siswa-teks p { margin: 0; }
.guru-antrean-nomor { font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--color-text); }
.guru-antrean-nama { font-size: var(--fs-sm); color: var(--color-text); }

/* Kemajuan per soal: soal yang sedang dinilai ditandai, soal yang sudah lengkap bercentang. */
ol.guru-antrean-soal { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.guru-antrean-soal li { display: grid; gap: 0.15rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-antrean-soal li[data-state="aktif"] { background-color: var(--color-primary-softer); color: var(--color-primary-text); font-weight: var(--fw-semibold); }
.guru-antrean-soal-angka { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; font-size: var(--fs-xs); }
.guru-antrean-soal li[data-state="selesai"] .guru-antrean-soal-angka { color: var(--color-success-text); }
.guru-antrean-soal .icon { width: 0.9rem; height: 0.9rem; }

@media (max-width: 30rem) {
  .guru-antrean-siswa { flex-wrap: wrap; }
}

/* ---------- 20. PAPAN KELAS (KP-151) ------------------------------ */

/* Tanda pembaruan otomatis: titik hijau berdenyut pelan; berhenti saat gerak dikurangi atau pembaruan dihentikan. */
.guru-papan-segar { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-papan-titik { flex: none; width: 0.55rem; height: 0.55rem; border-radius: var(--radius-circle); background-color: var(--color-success); animation: papan-denyut 2s ease-in-out infinite; }
.guru-papan-segar.is-berhenti .guru-papan-titik { background-color: var(--color-text-muted); animation: none; }
@keyframes papan-denyut { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
  .guru-papan-titik { animation: none; }
}

/* Kartu siswa berurutan nomor supaya letaknya tetap di antara pembaruan. */
ul.guru-papan-kisi { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); margin: 0; padding: 0; list-style: none; }
.guru-papan-kartu[hidden] { display: none; }
.guru-papan-tautan { display: grid; align-content: start; gap: var(--space-2); height: 100%; padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-lg); background-color: var(--color-surface); color: inherit; text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.guru-papan-tautan:hover { border-color: var(--color-primary-border); box-shadow: var(--shadow-sm); }
.guru-papan-kartu[data-keadaan="diam"] .guru-papan-tautan,
.guru-papan-kartu[data-petunjuk="1"] .guru-papan-tautan { border-color: var(--color-warning-border); }
.guru-papan-kartu[data-keadaan="belum"] .guru-papan-tautan,
.guru-papan-kartu[data-keadaan="selesai"] .guru-papan-tautan { background-color: var(--color-bg-subtle); }
/* K-46: sudah masuk hari ini tetapi belum mengetik. */
.guru-papan-kartu[data-keadaan="masuk"] .guru-papan-tautan { border-color: var(--color-info-border); }

/* K-46: kartu Riwayat masuk dan perangkat di Detail siswa: daftar Masuk dan daftar Perangkat berdampingan di layar lebar. */
.guru-masuk-dua { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); margin-top: var(--space-4); }
.guru-masuk-dua > section > h3 { margin: 0 0 var(--space-2); }
.guru-masuk-akhiri { margin-top: var(--space-2); }
.guru-masuk-kartu > .card-body > .feedback { margin-top: var(--space-3); }
.guru-masuk-tinjau { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-warning-border); border-radius: var(--radius-lg); background-color: var(--color-warning-soft); color: var(--color-warning-text); }
.guru-masuk-tinjau summary { cursor: pointer; font-weight: var(--fw-semibold); }
.guru-masuk-tinjau ul { margin: var(--space-2) 0 0; padding-inline-start: 1.25em; font-size: var(--fs-sm); }
.guru-masuk-tinjau li + li { margin-top: var(--space-1); }
.guru-masuk-kartu > .card-body > .field-help { margin-top: var(--space-4); }
@media (max-width: 63.99rem) {
  .guru-masuk-dua { grid-template-columns: minmax(0, 1fr); }
}
.guru-papan-kepala { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.guru-papan-nama { display: grid; min-width: 0; margin-inline-end: auto; }
.guru-papan-nama b { overflow-wrap: anywhere; color: var(--color-text); }
.guru-papan-nama small { font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-papan-posisi { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }
ul.guru-papan-rinci { display: grid; gap: 0.2rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.guru-papan-rinci li { display: flex; align-items: center; gap: var(--space-1); }
.guru-papan-rinci .icon { flex: none; width: 0.9rem; height: 0.9rem; }
.guru-papan-rinci .guru-papan-banyak { font-weight: var(--fw-semibold); color: var(--color-warning-text); }

/* ---------- 21. PENGUMUMAN KELAS (KP-152) ------------------------- */

/* Isi pengumuman tampil utuh seperti yang dilihat siswa: baris baru dipertahankan, alamat panjang dipatahkan. */
.guru-pengumuman-teks { max-width: 42rem; margin: 0; white-space: pre-line; overflow-wrap: anywhere; color: var(--color-text); }
.guru-pengumuman-waktu { display: grid; gap: 0.15rem; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-pengumuman-waktu span { white-space: nowrap; }
.guru-tabel-pengumuman td:first-child { min-width: 16rem; }
[data-hitung-huruf].is-hampir { font-weight: var(--fw-semibold); color: var(--color-warning-text); }
/* Ponsel: setiap pengumuman menjadi kartu bertumpuk berlabel, tombol aksinya di sudut kanan atas (sepola tabel siswa). */
@media (max-width: 47.99rem) {
  .guru-tabel-pengumuman { min-width: 0; }
  .guru-tabel-pengumuman thead { display: none; }
  .guru-tabel-pengumuman, .guru-tabel-pengumuman tbody, .guru-tabel-pengumuman tr, .guru-tabel-pengumuman td { display: block; }
  .guru-tabel-pengumuman tr { position: relative; padding: var(--space-4) calc(var(--gap-card) + 2.75rem) var(--space-4) var(--gap-card); border-bottom: var(--border-thin) solid var(--color-border-subtle); }
  .guru-tabel-pengumuman tr[hidden] { display: none; }
  .guru-tabel-pengumuman td { padding: var(--space-1) 0; border-bottom: 0; }
  .guru-tabel-pengumuman td:first-child { min-width: 0; padding-bottom: var(--space-2); }
  .guru-tabel-pengumuman td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
  .guru-tabel-pengumuman .guru-sel-aksi { position: absolute; top: var(--space-3); right: var(--gap-card); width: auto; padding: 0; }
  .guru-pengumuman-waktu span { white-space: normal; }
}
/* Cuplikan pengumuman di dialog hapus: kutipan di kotak lembut, terpisah dari kalimat penjelasnya. */
.guru-pengumuman-kutip { margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background-color: var(--color-bg-subtle); font-style: italic; color: var(--color-text); overflow-wrap: anywhere; }

/* ---------- 21a. PENGUMUMAN SITUS (KP-179) ------------------------ */

/* Sel Pengumuman memakai tabel pengumuman kelas di atas: jenis berikon sewarna halaman depan, judul, cuplikan isi, dan
   tombolnya bila ada. */
/* KP-183: kolomnya boleh lebih sempit dari label jenis yang paling lebar, dan label itu turun ke bawah ikonnya bila tidak
   muat, supaya isi sel tidak keluar dari kartunya di ponsel berhuruf besar. */
.guru-ps-sel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; justify-items: start; max-width: 36rem; }
.guru-ps-jenis { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-secondary); }
.guru-ps-judul { color: var(--color-text); overflow-wrap: anywhere; }
/* Layar yang sangat sempit dibanding ukuran hurufnya: jarak huruf label jenis dirapatkan satu tingkat supaya kata
   terpanjangnya (PENDAFTARAN) tetap muat tanpa dipatahkan. */
@media (max-width: 23.99rem) {
  .guru-ps-jenis { letter-spacing: var(--ls-wide); }
}
.guru-ps-cuplikan { font-size: var(--fs-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.guru-ps-tombol { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.guru-ps-tombol .icon { flex: none; width: 0.9rem; height: 0.9rem; }
/* Bagian jadwal pembaruan di formulir: kotak lembut sewarna kotak jadwal di halaman depan, hanya untuk jenis itu. */
/* Empat jenis pengumuman tersusun 2 × 2 di jendela lebar, bukan 3 + 1. */
[data-ps-jenis] .guru-pilihan-daftar { grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.guru-ps-jadwal { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: var(--space-4); border: 0; border-radius: var(--radius-md); background-color: var(--color-warning-soft); }
.guru-ps-jadwal > legend { float: left; width: 100%; margin-bottom: var(--space-1); padding: 0; }
.guru-ps-jadwal > legend + * { clear: both; }
.guru-ps-jadwal > .field-help { margin: 0; }
.guru-ps-jadwal[hidden] { display: none; }
/* KP-181: keadaan lonceng di halaman depan di bawah keterangan kartu Daftar pengumuman, supaya lonceng yang tidak tampil
   tidak terbaca sebagai rusak. Ikonnya hijau selama lonceng tampil. */
.guru-ps-lonceng { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 46rem; margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-ps-lonceng > .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.2em; color: var(--color-text-muted); }
.guru-ps-lonceng.is-tampil > .icon { color: var(--color-success-text); }
.guru-ps-lonceng b { font-weight: var(--fw-semibold); color: var(--color-text); }

/* ---------- 22. ANALISIS BUTIR (KP-153) --------------------------- */

/* Pemilih aktivitas dan soal berupa tautan berpil; pil halaman yang sedang dibuka memakai aria-current. */
.guru-analisis-pilih { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-5); }
a.chip { text-decoration: none; }
.guru-analisis-soal { margin: 0 0 var(--space-4); font-size: var(--fs-xl); }
.guru-analisis-tahap-petunjuk { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-analisis-tahap-petunjuk .icon { flex: none; color: var(--color-warning-text); }

ol.guru-analisis-daftar { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.guru-analisis-butir { display: grid; gap: var(--space-3); padding: var(--space-4); border: var(--border-thin) solid var(--color-border-subtle); border-radius: var(--radius-lg); background-color: var(--color-surface); }
.guru-analisis-kepala { display: flex; align-items: flex-start; gap: var(--space-3); }
.guru-analisis-nomor { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: var(--radius-md); background-color: var(--color-primary-soft); color: var(--color-primary-text); font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.guru-analisis-judul { flex: 1 1 auto; min-width: 0; }
.guru-analisis-judul h3 { margin: 0; font-size: var(--fs-base); }
.guru-analisis-judul p { margin: 0.1rem 0 0; font-size: var(--fs-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* Ukuran tiap butir: angka besar, keterangan, dan bilah tipis di bawahnya. Banyak kolom mengikuti lebar kartu butir:
   enam sebaris bila muat, tiga bila sedang, dua bila sempit. Empat kotak di lebar sedang disusun dua kali dua, jadi di
   layar laptop tidak ada kotak yang sendirian di baris terakhir. Kotak tersempit 136 px, judulnya paling banyak dua baris. */
.guru-analisis-butir { container-type: inline-size; }
dl.guru-analisis-ukuran { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; }
@container (min-width: 26.5rem) {
  dl.guru-analisis-ukuran { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dl.guru-analisis-ukuran[data-banyak="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 53.5rem) {
  dl.guru-analisis-ukuran, dl.guru-analisis-ukuran[data-banyak="4"] { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.guru-analisis-ukuran-butir { display: grid; grid-template-rows: auto 1fr; gap: 0.2rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background-color: var(--color-bg-subtle); }
/* Judul menyediakan dua baris supaya angka di kotak-kotak sebaris tetap sejajar walau judulnya berbeda panjang. */
.guru-analisis-ukuran-butir dt { min-height: 2.7em; font-size: var(--fs-xs); line-height: 1.35; color: var(--color-text-muted); }
/* Ponsel tersempit, sekitar 320 px: kotak selebar kira-kira 106 px melipat judul terpanjang menjadi tiga baris. */
@container (max-width: 16rem) {
  .guru-analisis-ukuran-butir dt { min-height: 4.05em; }
}
/* Bilah didorong ke dasar kotak supaya bilah kotak-kotak sebaris juga sejajar. */
.guru-analisis-ukuran-butir dd { display: flex; flex-direction: column; gap: 0.1rem; margin: 0; }
.guru-analisis-ukuran-butir b { font-family: var(--font-display); font-size: var(--fs-lg); color: var(--color-text); }
.guru-analisis-ukuran-butir small { margin-bottom: 0.35rem; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.guru-analisis-bilah { order: 1; flex: none; height: 0.3rem; margin-top: auto; border-radius: var(--radius-pill); background-color: var(--color-border-subtle); overflow: hidden; }
.guru-analisis-bilah > span { display: block; width: calc(var(--isi, 0) * 100%); height: 100%; border-radius: inherit; background-color: var(--color-primary); }

/* Jawaban salah tersering: pil per jawaban, dikelompokkan per kotak bila butirnya berkotak banyak. */
.guru-analisis-salah h4 { margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
ul.guru-analisis-kotak-daftar { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.guru-analisis-kotak { margin: 0 0 0.25rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
ol.guru-analisis-jawaban { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: 0; padding: 0; list-style: none; }
ol.guru-analisis-jawaban li { display: inline-flex; align-items: baseline; gap: var(--space-2); max-width: 100%; padding: 0.15rem var(--space-3); border: var(--border-thin) solid var(--color-danger-border); border-radius: var(--radius-pill); background-color: var(--color-danger-soft); font-size: var(--fs-sm); }
ol.guru-analisis-jawaban li.guru-analisis-kosong { border-color: var(--color-border); background-color: var(--color-bg-subtle); }
.guru-analisis-jawab { min-width: 0; overflow-wrap: anywhere; font-weight: var(--fw-semibold); color: var(--color-text); }
.guru-analisis-kosong .guru-analisis-jawab { font-weight: var(--fw-medium); color: var(--color-text-secondary); }
.guru-analisis-banyak { flex: none; font-size: var(--fs-xs); color: var(--color-text-secondary); }
/* Ponsel: kartu butir lebih rapat supaya dua kotak ukuran per baris tetap lega. */
@media (max-width: 47.99rem) {
  .guru-analisis-butir { padding: var(--space-3); }
}

/* ---------- 23. SEBARAN SKOR (KP-154) ------------------------------ */

/* Kartu sebaran berada di antara kartu Uji Pemahaman dan tabel rekap, jadi berjarak ke tabel seperti kartu di atasnya
   (sepola KP-143); tanpa ini kedua kartu menempel. */
.guru-sebaran:not(:last-child) { margin-bottom: var(--space-6); }

/* Tiga kelompok pil berperan radio: aktivitas, soal, dan skor yang digambar. Bila muat sebaris, pilihan skor menepi ke
   kanan supaya terbaca sebagai kelompok tersendiri; bila tidak muat, kelompok itu turun ke baris baru dari kiri. */
.guru-sebaran-alat { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); container-type: inline-size; }
@container (min-width: 58rem) {
  .guru-sebaran-alat > :last-child { margin-inline-start: auto; }
}
.chip[aria-checked="true"] { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-on-primary); }
.guru-sebaran-kisi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--space-5) var(--space-5); }
/* Judul tahap yang terlipat dua baris tidak menggeser grafiknya: plot didorong ke dasar sehingga garis dasar sebaris sejajar. */
.guru-sebaran-grafik { display: grid; grid-template-rows: auto 1fr; gap: var(--space-2); margin: 0; }
.guru-sebaran-grafik figcaption { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); }

/* Satu skala tinggi untuk keempat tahap; angka menempel di atas batang dan ikut bergerak bersamanya. */
.guru-sebaran-plot { position: relative; align-self: end; height: 9.5rem; margin-bottom: 1.5rem; }
ol.guru-sebaran-batang { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: var(--space-2); height: 100%; margin: 0; padding: 1.4rem 0 0; list-style: none; border-bottom: var(--border-thin) solid var(--grafik-sumbu); }
ol.guru-sebaran-batang li { position: relative; display: flex; align-items: flex-end; justify-content: center; height: 100%; }
.guru-sebaran-isi { display: block; width: 100%; max-width: 2.25rem; height: calc(var(--tinggi, 0) * 100%); border-radius: 6px 6px 0 0; background-color: var(--grafik-k1); transition: height var(--dur-slower) var(--ease-out), background-color var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out); }
.guru-sebaran.is-otomatis .guru-sebaran-isi { background-color: var(--grafik-k2); }
ol.guru-sebaran-batang li.is-belum .guru-sebaran-isi { background-color: var(--grafik-tanpa); }
.guru-sebaran-angka { position: absolute; bottom: calc(var(--tinggi, 0) * 100% + 0.2rem); left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--color-text); transition: bottom var(--dur-slower) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.guru-sebaran-label { position: absolute; top: calc(100% + 0.35rem); left: 50%; transform: translateX(-50%); font-size: var(--fs-xs); white-space: nowrap; color: var(--color-text-muted); }
.guru-sebaran-plot.is-sorot li:not(.is-sorot) .guru-sebaran-isi { opacity: 0.45; }
/* Keterangan skor guru, skor otomatis, dan keadaan kosong menumpuk di satu sel: tinggi kartu mengikuti yang terpanjang di
   lebar layar saat itu, jadi tabel di bawahnya tidak melompat saat pil berganti. */
.guru-sebaran-catatan { display: grid; }
.guru-sebaran-catatan > span { grid-area: 1 / 1; visibility: hidden; }
.guru-sebaran-catatan > span.is-berlaku { visibility: visible; }

/* Grafik digambar utuh sejak dimuat, lalu batangnya tumbuh saat kartu terlihat. */
html.js-aktif .guru-sebaran:not(.is-tampak) .guru-sebaran-isi { height: 0; }
html.js-aktif .guru-sebaran:not(.is-tampak) .guru-sebaran-angka { bottom: 0.2rem; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .guru-sebaran-isi, .guru-sebaran-angka { transition: none; }
}
/* Cetak rekap: batang selalu setinggi hitungannya walau kartu belum sempat terlihat, warnanya ikut tercetak, dan hanya
   pil terpilih yang tercetak sebagai keterangan grafik. */
@media print {
  .guru-sebaran { break-inside: avoid; }
  .guru-sebaran-alat .chip[aria-checked="false"] { display: none; }
  .guru-sebaran-alat .chip { border-color: currentColor; background: none; color: inherit; box-shadow: none; }
  .guru-sebaran-alat > :last-child { margin-inline-start: 0; }
  .guru-sebaran-kisi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js-aktif .guru-sebaran:not(.is-tampak) .guru-sebaran-isi { height: calc(var(--tinggi, 0) * 100%); }
  html.js-aktif .guru-sebaran:not(.is-tampak) .guru-sebaran-angka { bottom: calc(var(--tinggi, 0) * 100% + 0.2rem); opacity: 1; }
  .guru-sebaran-isi { -webkit-print-color-adjust: exact; print-color-adjust: exact; transition: none; }
  .guru-sebaran-angka { transition: none; }
}

/* ---------- 24. ARSIP KELAS DAN TAHUN AJARAN (KP-155) ------------- */

/* Pil kelas di bilah atas saat kelas arsip sedang dilihat: tanda kecil Arsip, ikon arsip, dan garis putus-putus. */
.guru-kelas-tombol.is-arsip { border-style: dashed; }
.guru-kelas-tanda-arsip { padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background-color: var(--color-bg-subtle); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--color-text-secondary); }
/* K-44: kelas milik guru lain yang dibuka super admin. */
.guru-kelas-tombol.is-lain { border-color: var(--color-info-border); }
.guru-kelas-tanda-lain { background-color: var(--color-info-soft); color: var(--color-info-text); }
@media (max-width: 61.99rem) {
  .guru-kelas-tanda-arsip { display: none; }
}

/* Kelas saya: satu bagian per tahun ajaran, lalu bagian Arsip. Kartu arsip bergaris putus-putus dan sedikit redup. */
.guru-kelas-tahun > .guru-kartu-kepala { margin-bottom: var(--space-3); }
.guru-kelas-tahun > .guru-kartu-kepala h2 { margin: 0; font-size: var(--fs-lg); }
.guru-kelas-arsip-teks { margin: 0 0 var(--space-3); max-width: 46rem; }
.guru-kartu-kelas.is-arsip { border-style: dashed; background-color: var(--color-bg-subtle); }
.guru-kartu-kelas.is-arsip .guru-kode-kelas code { background-color: var(--color-surface); color: var(--color-text-secondary); }
.guru-kartu-kelas-arsip { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); color: var(--color-text-secondary); }
.guru-kartu-kelas-arsip .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.05rem; }
.guru-kelas-beranda-arsip { margin: var(--space-3) 0 0; }

/* Daftar siswa kelas arsip: tanpa lajur centang dan kata sandi. */
.guru-tabel-kelas-arsip td[data-label="Nama"] { min-width: 12rem; }

/* Tabel tahun ajaran di Pengaturan. */
.guru-tabel-tahun th[scope="row"] { white-space: nowrap; }
.guru-tabel-tahun td { font-variant-numeric: tabular-nums; }

/* Kotak isian hanya-baca di kelas arsip: tetap terbaca, tetapi jelas tidak dapat diubah. */
.guru-isi .textarea[readonly] { border-style: dashed; background-color: var(--color-bg-subtle); cursor: default; }

/* ---------- 25. BUKA KEMBALI SOAL (KP-156) --------------------- */

/* Keterangan waktu dikumpulkan dengan tombol Buka kembali, atau alasan soal itu belum dapat dibuka, di sampingnya. */
.guru-kiriman { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.guru-kiriman > p { margin: 0; }
.guru-kiriman-hambatan { display: flex; align-items: flex-start; gap: var(--space-2); max-width: 36rem; font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-kiriman-hambatan .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.1rem; }

/* Riwayat percobaan sebelumnya: kartu sepola percobaan Uji Pemahaman di dalam lipatan. */
.guru-percobaan > summary { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-primary-text); }
.guru-percobaan > summary .icon { width: 1rem; height: 1rem; }
.guru-percobaan[open] > summary { margin-bottom: var(--space-3); }
.guru-percobaan-butir h5 { margin: 0; font-size: var(--fs-base); }
.guru-percobaan-butir p { margin: 0; }
.guru-percobaan-butir .guru-uji-detail > .guru-jawab-isi { margin-top: var(--space-3); }

/* Dialog Buka kembali: tiga alasan sebagai kartu radio yang berjajar di layar lebar dan bertumpuk di ponsel. */
.guru-buka-alasan { margin: 0; padding: 0; border: 0; min-width: 0; }
.guru-buka-alasan > legend { margin-bottom: var(--space-2); padding: 0; }
.guru-buka-alasan-pilihan { display: grid; gap: var(--space-2); }
.guru-buka-alasan-pilihan .control-card { padding: var(--space-3) var(--space-4); }
@media (min-width: 40rem) {
  .guru-buka-alasan-pilihan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* KP-163: catatan di bawah tombol Buka kembali soal kartu Profil bila belum ada soal yang dapat dibuka kembali. */
.guru-buka-profil-catatan { margin: 0; text-align: center; }

/* ---------- 26. PENDAFTARAN GURU (KP-160) --------------------- */

/* Angka permintaan baru di samping menu Pendaftaran guru, rata kanan di baris menunya. */
.guru-nav-hitung {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-width: 1.5rem;
  height: 1.375rem;
  margin-inline-start: auto;
  padding: 0 0.45rem;
  border: var(--border-thin) solid var(--color-warning-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-warning-soft);
  color: var(--color-warning-text);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.guru-pendaftaran-tiket { white-space: nowrap; font-size: var(--fs-xs); }
/* Waktu kiriman dan kelas satu baris: kolom sempit tidak terlipat menjadi "37 / menit / lalu" atau "Kelas / VI". */
.guru-tabel-pendaftaran td[data-label="Dikirim"], .guru-tabel-pendaftaran td[data-label="Kelas"] small { white-space: nowrap; }
/* KP-183: nama, email, dan sekolah boleh terlipat, supaya tabel muat di kartunya di laptop tanpa digeser dan nama pemohon
   tidak keluar dari kartunya di ponsel berhuruf besar. Nomor tiket terlipat sesudah tanda hubung hanya di ponsel dan saat
   kolom dirapatkan (di bawah). */
.guru-tabel-pendaftaran td[data-label="Pemohon"] .guru-siswa-nama { display: flex; align-items: flex-start; }
.guru-tabel-pendaftaran td[data-label="Pemohon"] .guru-siswa-nama > span:last-child { min-width: 0; }
.guru-tabel-pendaftaran td[data-label="Pemohon"] b,
.guru-tabel-pendaftaran td[data-label="Pemohon"] small { overflow-wrap: anywhere; }
@media (max-width: 47.99rem) {
  .guru-tabel-pendaftaran .guru-pendaftaran-tiket { white-space: normal; }
}
@media (min-width: 48rem) {
  .guru-tabel-pendaftaran { min-width: 0; }
  .guru-tabel-pendaftaran td[data-label="Pemohon"] { min-width: 11rem; }
  .guru-tabel-pendaftaran td[data-label="Sekolah"] { min-width: 9rem; }
  .guru-tabel-pendaftaran td[data-label="Sekolah"] .guru-sel-dua b { white-space: normal; }
}
/* Bila kartunya lebih sempit dari yang dibutuhkan tabel (laptop kecil atau huruf diperbesar), kolom Kelas dan Dikirim
   dirapatkan menjadi baris kecil di sel Sekolah dan Pemohon, dan tombol Buka tinggal ikonnya (namanya tetap terbaca
   pembaca layar), sehingga tabel tidak perlu digeser dan Pilih semua tetap ada. Di ponsel tabel tetap kartu berlabel. */
.guru-pendaftaran-ringkas { display: none; }
.guru-tabel-wrap-daftar { container: daftar / inline-size; }
@media (min-width: 48rem) {
  @container daftar (max-width: 56.99rem) {
    .guru-tabel-pendaftaran .guru-kolom-kelas,
    .guru-tabel-pendaftaran .guru-kolom-dikirim,
    .guru-tabel-pendaftaran td[data-label="Kelas"],
    .guru-tabel-pendaftaran td[data-label="Dikirim"] { display: none; }
    .guru-tabel-pendaftaran .guru-pendaftaran-ringkas { display: block; }
    .guru-tabel-pendaftaran .guru-pendaftaran-tiket { white-space: normal; }
    .guru-tabel-pendaftaran .guru-sel-aksi .btn { width: var(--control-height-sm); min-width: var(--control-height-sm); padding: var(--space-2); }
    .guru-tabel-pendaftaran .guru-sel-aksi .btn > span {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }
}
.guru-pendaftaran-sub { margin: var(--space-2) 0 0; font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-primary-text); }
.guru-pendaftaran-pesan { margin: 0; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary-border); border-radius: var(--radius-sm); background-color: var(--color-surface-alt); font-size: var(--fs-sm); color: var(--color-text-secondary); overflow-wrap: anywhere; }

/* Pemeriksaan: satu baris per temuan; yang perlu diperhatikan berlatar kuning. */
.guru-pendaftaran-periksa { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guru-pendaftaran-periksa li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface-alt); font-size: var(--fs-sm); color: var(--color-text-secondary); }
.guru-pendaftaran-periksa li > .icon { flex: none; margin-top: 0.15em; }
.guru-pendaftaran-periksa b { color: var(--color-text); }
.guru-pendaftaran-periksa .is-baik > .icon { color: var(--color-success); }
.guru-pendaftaran-periksa .is-info > .icon { color: var(--color-primary); }
.guru-pendaftaran-periksa .is-perhatian { border-color: var(--color-warning-border); background-color: var(--color-warning-soft); color: var(--color-warning-text); }
.guru-pendaftaran-periksa .is-perhatian > .icon { color: var(--color-warning-text); }
.guru-pendaftaran-periksa .is-perhatian b { color: inherit; }

/* Alasan penolakan yang sering dipakai: kartu kecil yang mengisi kolom alasan saat diklik; kalimatnya boleh terlipat. */
.guru-alasan-pilihan { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); text-align: left; }
.guru-alasan-pilihan .chip { width: 100%; height: auto; justify-content: flex-start; white-space: normal; text-align: left; border-radius: var(--radius-md); font-weight: var(--fw-medium); line-height: var(--lh-normal); }

/* Akun terhubung di kartu Tindakan (KP-161): ringkas seperti baris akun guru, dipisah garis dari kabar status di atasnya
   dan tombol di bawahnya, supaya tombol utama tetap terlihat di layar laptop. */
.guru-pendaftaran-akun { display: grid; gap: var(--space-2); padding-block: var(--space-3); border-block: var(--border-thin) solid var(--color-border-subtle); }
.guru-pendaftaran-akun .guru-pendaftaran-sub { margin: 0; }
.guru-pendaftaran-akun .guru-siswa-nama { align-items: flex-start; }
.guru-pendaftaran-akun .guru-siswa-nama small { overflow-wrap: anywhere; }
.guru-pendaftaran-akun-sandi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); font-size: var(--fs-xs); color: var(--color-text-muted); }
.guru-pendaftaran-akun-tautan { margin: 0; }

/* Kesiapan di bawah pil status daftar (KP-180): keadaannya di baris pertama, hijau bila dapat langsung dijalankan Buat
   akun & kirim dan kuning bila perlu dicek, lalu rinciannya. Boleh terlipat supaya kolom Status tidak melebarkan tabel. */
.guru-pendaftaran-status { display: grid; justify-items: start; gap: var(--space-1); }
.guru-pendaftaran-siap { display: grid; max-width: 12rem; font-size: var(--fs-2xs); line-height: var(--lh-snug); color: var(--color-text-muted); }
.guru-pendaftaran-siap b { font-weight: var(--fw-semibold); }
.guru-pendaftaran-siap.is-siap b, .guru-pendaftaran-siap.is-kirim b { color: var(--color-success-text); }
.guru-pendaftaran-siap.is-perhatian b, .guru-pendaftaran-siap.is-cek b { color: var(--color-warning-text); }

/* Jendela tinjau Buat akun & kirim: satu kotak per permintaan yang dicentang, sepola daftar Pemeriksaan. Keterangan
   sejajar nama, di kanan kotak centang. Yang perlu dicek bergaris putus-putus karena tidak ikut dijalankan. */
.guru-tinjau-daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); text-align: left; }
.guru-tinjau-butir { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-4) var(--space-3); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface-alt); }
.guru-tinjau-butir .control-label { display: grid; gap: 0.1rem; }
.guru-tinjau-butir .control-label b { font-weight: var(--fw-semibold); }
.guru-tinjau-butir .control-input:not(:disabled) ~ .control-label b { color: var(--color-text); }
.guru-tinjau-butir .control-label small { font-size: var(--fs-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
.guru-tinjau-ket { display: grid; gap: var(--space-1); padding-left: calc(var(--choice-size) + var(--space-3)); }
.guru-tinjau-ket:empty { display: none; }
.guru-tinjau-ket p { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-secondary); }
.guru-tinjau-ket .icon { flex: none; margin-top: 0.1em; }
.guru-tinjau-rencana .icon { color: var(--color-primary); }
.guru-tinjau-butir.is-perhatian { border-color: var(--color-warning-border); background-color: var(--color-warning-soft); }
.guru-tinjau-butir.is-perhatian .guru-tinjau-alasan, .guru-tinjau-butir.is-cek .guru-tinjau-alasan, .guru-tinjau-butir.is-lewat .guru-tinjau-alasan { color: var(--color-warning-text); }
.guru-tinjau-butir.is-cek, .guru-tinjau-butir.is-lewat { border-style: dashed; background-color: transparent; }
.guru-tinjau-ringkas { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.guru-tinjau-ringkas.is-lebih { color: var(--color-danger-text); }

/* Kartu section Untuk guru di Section halaman depan: dua angka ringkas di sisi kanan. */
.guru-untuk-guru-ringkas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); margin: 0; }
.guru-untuk-guru-ringkas > div { display: grid; gap: 0.15rem; padding: var(--space-3) var(--space-4); border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background-color: var(--color-surface-alt); }
.guru-untuk-guru-ringkas dt { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.guru-untuk-guru-ringkas dd { margin: 0; font-family: var(--font-display); font-size: var(--fs-2xl); font-weight: var(--fw-extrabold); font-variant-numeric: tabular-nums; color: var(--color-text); }
/* KP-166: satuan di samping angka kartu Panduan penggunaan. */
.guru-untuk-guru-ringkas dd small { font-family: var(--font-body); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); }

/* Berkas PDF di penyunting section Panduan penggunaan: ikon, keterangan, dan tombol Buka PDF di bawah garis. */
.guru-panduan-berkas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-subtle); }
.guru-panduan-berkas p { margin: 0; }
.guru-panduan-berkas-judul { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-text); font-variant-numeric: tabular-nums; }
.guru-panduan-berkas-ket { font-size: var(--fs-xs); color: var(--color-text-muted); }
@media (max-width: 35.99rem) { .guru-panduan-berkas { grid-template-columns: auto minmax(0, 1fr); } .guru-panduan-berkas > .btn { grid-column: 1 / -1; justify-self: start; } }

/* ---------- 27. PANDUAN PENGGUNAAN (KP-165) ------------------------ */

/* Tombol Panduan di bilah atas: sepola tombol cari, berupa tautan ke bagian yang menjelaskan halaman yang sedang dibuka. */
.guru-panduan-tombol { text-decoration: none; }
/* Ponsel dan laptop sempit (bilah atas memuat pil kelas, jam, dan tanggal): tombol Panduan pindah ke menu akun supaya
   judul halaman tetap terbaca. Tablet tanpa pil dan layar lebar menampilkan tombolnya. */
.guru-menu-akun-panduan { display: none; }
@media (max-width: 35.99rem), (min-width: 62rem) and (max-width: 79.99rem) {
  .guru-panduan-tombol { display: none; }
  .guru-menu-akun-panduan { display: flex; }
}
.guru-cari-ikon-panduan { background-color: var(--color-petunjuk-ikon); color: var(--color-petunjuk-text); }

/* Nomor bab dan subbab (4 dan 4.3) di daftar isi, judul, dan kartu bab lain. */
.panduan-nomor { flex: none; margin-inline-end: 0.5em; font-variant-numeric: tabular-nums; color: var(--color-primary-text); font-weight: var(--fw-bold); }

/* Daftar isi lengkap: kartu tiap bagian, lalu setiap bab beserta subbabnya. */
.panduan-bagian-grid { display: grid; gap: var(--gap-grid); grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-10); }
@media (min-width: 48rem) { .panduan-bagian-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 80rem) { .panduan-bagian-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.panduan-bagian-kartu .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); height: 100%; }
.panduan-bagian-kartu h2 { margin: 0; font-size: var(--fs-xl); }
.panduan-bagian-kartu p { margin: 0; font-size: var(--fs-sm); color: var(--color-text-secondary); }
.panduan-bagian-kartu .panduan-bagian-hitung { margin-top: auto; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
/* KP-166: ikon bagian dan tombol Unduh PDF sebaris di atas kartu. */
.panduan-bagian-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); align-self: stretch; }
.panduan-isi-judul { margin: 0 0 var(--space-4); font-size: var(--fs-2xl); }
ol.panduan-isi-daftar { display: grid; gap: var(--space-6) var(--space-10); grid-template-columns: minmax(0, 1fr); margin: var(--space-2) 0 0; }
@media (min-width: 70rem) { ol.panduan-isi-daftar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.panduan-isi-bab-judul { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-bold); line-height: var(--lh-snug); color: var(--color-text); text-decoration: none; }
.panduan-isi-bab-judul > span:last-child { display: flex; }
@media (hover: hover) { .panduan-isi-bab-judul:hover { color: var(--color-link); } }
ol.panduan-isi-sub { display: grid; gap: 0.3rem; margin: var(--space-2) 0 0; padding-inline-start: calc(var(--icon-tile-sm) + var(--space-3)); }
.panduan-isi-sub a { display: flex; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--color-text-secondary); text-decoration: none; }
.panduan-isi-sub .panduan-nomor { min-width: 2.4em; color: var(--color-text-muted); font-weight: var(--fw-semibold); }
@media (hover: hover) { .panduan-isi-sub a:hover { color: var(--color-link); text-decoration: underline; } }

/* Halaman bab: daftar isi menempel di samping bila area isi cukup lebar, selain itu lipatan di atas bacaan. Lebar diukur
   dari area isi (kueri kontainer), bukan layar, karena menu samping dashboard ikut memakan lebar. */
.panduan-tata { container-type: inline-size; }
.panduan-tata-isi { display: grid; gap: var(--gap-grid); grid-template-columns: minmax(0, 1fr); align-items: start; }
.panduan-samping { display: none; }
@container (min-width: 58rem) {
  .panduan-tata-isi { grid-template-columns: 16.5rem minmax(0, 1fr); }
  /* Kolom samping setinggi isi bab supaya daftar isi di dalamnya dapat menempel sepanjang bab. */
  .panduan-samping { display: block; align-self: stretch; }
  .panduan-lipat { display: none; }
}
.panduan-samping-lengket {
  position: sticky;
  top: calc(var(--guru-atas-tinggi) + var(--space-6));
  max-height: calc(100dvh - var(--guru-atas-tinggi) - var(--space-6) * 2);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  padding: var(--space-4) var(--space-3);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.panduan-samping-lengket::-webkit-scrollbar { width: 0; height: 0; display: none; }
.panduan-daftar-bagian { margin: var(--space-5) 0 var(--space-2); padding-inline: var(--space-2); font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-text-muted); }
.panduan-daftar-bagian:first-child { margin-top: 0; }
ol.panduan-daftar-bab-daftar { display: grid; gap: 0.1rem; margin: 0; }
.panduan-daftar-bab { display: flex; padding: 0.35rem var(--space-2); border-radius: var(--radius-xs); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-text-secondary); text-decoration: none; }
.panduan-daftar-bab .panduan-nomor { min-width: 1.5em; color: var(--color-text-muted); }
@media (hover: hover) { .panduan-daftar-bab:hover { background-color: var(--color-bg-subtle); color: var(--color-text); } }
.panduan-daftar-bab[aria-current="page"] { background-color: var(--color-primary-softer); color: var(--color-primary-text); }
.panduan-daftar-bab[aria-current="page"] .panduan-nomor { color: var(--color-primary-text); }
ol.panduan-daftar-sub { display: grid; gap: 0.1rem; margin: var(--space-1) 0 var(--space-2) calc(var(--space-2) + 0.35rem); padding-inline-start: var(--space-2); border-inline-start: var(--border-thick) solid var(--color-border); }
.panduan-daftar-sub a { display: flex; padding: 0.3rem var(--space-2); border-radius: var(--radius-xs); font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--color-text-muted); text-decoration: none; transition: var(--transition-colors); }
.panduan-daftar-sub .panduan-nomor { min-width: 2.2em; color: inherit; font-weight: var(--fw-semibold); }
@media (hover: hover) { .panduan-daftar-sub a:hover { color: var(--color-text); background-color: var(--color-bg-subtle); } }
.panduan-daftar-sub a.is-aktif { background-color: var(--color-primary-softer); color: var(--color-primary-text); font-weight: var(--fw-bold); }

/* Lipatan daftar isi bab di area isi yang sempit. */
.panduan-lipat { margin-bottom: var(--space-5); }
.panduan-lipat summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-family: var(--font-display); font-weight: var(--fw-bold); cursor: pointer; list-style: none; }
.panduan-lipat summary::-webkit-details-marker { display: none; }
.panduan-lipat-panah { margin-inline-start: auto; transition: transform var(--dur-fast) var(--ease-out); }
.panduan-lipat[open] .panduan-lipat-panah { transform: rotate(180deg); }
.panduan-lipat-isi { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.panduan-lipat-isi ol { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.panduan-lipat-isi a[data-panduan-sub] { display: flex; padding: 0.4rem var(--space-2); border-radius: var(--radius-xs); font-size: var(--fs-sm); color: var(--color-text-secondary); text-decoration: none; }
.panduan-lipat-isi .panduan-nomor { min-width: 2.4em; color: var(--color-text-muted); }

/* Kartu subbab: judul bernomor dengan tautan jangkar, isi bacaan selebar ukuran baca yang nyaman. */
.panduan-subbab { scroll-margin-top: max(0px, calc(var(--guru-atas-tinggi) + var(--space-6) - var(--sticky-offset))); }
.panduan-subbab-judul { display: flex; align-items: baseline; margin: 0 0 var(--space-4); font-size: var(--fs-xl); line-height: var(--lh-snug); }
.panduan-jangkar { display: inline-grid; place-items: center; flex: none; align-self: center; width: 1.75rem; height: 1.75rem; margin-inline-start: auto; border-radius: var(--radius-circle); color: var(--color-text-subtle); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.panduan-jangkar .icon { width: 1rem; height: 1rem; }
.panduan-subbab:hover .panduan-jangkar, .panduan-jangkar:focus-visible { opacity: 1; }
@media (hover: none) { .panduan-jangkar { opacity: 1; } }
.panduan-jangkar:hover { color: var(--color-link); }
.panduan-teks { display: grid; gap: var(--space-4); max-width: 76ch; font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--color-text-secondary); }
.panduan-teks > * { margin: 0; }
.panduan-teks strong { color: var(--color-text); font-weight: var(--fw-bold); }
.panduan-teks kbd { font-size: 0.85em; }
ol.panduan-langkah { display: grid; gap: var(--space-3); margin: 0; counter-reset: langkah; }
ol.panduan-langkah > li { position: relative; min-height: 1.75rem; padding-inline-start: 2.5rem; counter-increment: langkah; }
ol.panduan-langkah > li::before { content: counter(langkah); position: absolute; left: 0; top: -0.05rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-circle); background-color: var(--color-primary); color: var(--color-on-primary); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
ul.panduan-butir { display: grid; gap: var(--space-2); margin: 0; padding-inline-start: 1.35rem; list-style: disc; }
ul.panduan-butir > li::marker { color: var(--color-primary); }
.panduan-kotak { max-width: 76ch; }
.panduan-kotak .feedback-body p { color: inherit; }
.panduan-tabel { max-width: 100%; }
.panduan-tabel .table { font-size: var(--fs-sm); }
.panduan-tabel th[scope="row"] { font-weight: var(--fw-semibold); color: var(--color-text); }
.panduan-lihat { display: flex; align-items: flex-start; gap: var(--space-2); margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: var(--border-thin) solid var(--color-border-subtle); font-size: var(--fs-sm); color: var(--color-text-muted); }
.panduan-lihat .icon { flex: none; margin-top: 0.2em; }
.panduan-lihat b { color: var(--color-text-secondary); }

/* Gambar layar: penanda bernomor dan bingkai sorotan digambar di atas gambar dalam persen, jadi tetap tepat pada ukuran
   berapa pun. Gambar selalu bertema terang, jadi diberi garis tepi supaya tetap terpisah di tema gelap. */
.panduan-gambar { display: grid; gap: var(--space-3); max-width: 100%; margin: var(--space-2) 0; }
.panduan-gambar-tombol { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-md); background: none; text-align: inherit; cursor: zoom-in; }
.panduan-gambar-tombol:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.panduan-gambar-bingkai { position: relative; width: 100%; border-radius: var(--radius-md); }
.panduan-gambar .panduan-gambar-tombol, .panduan-gambar > .panduan-gambar-bingkai { max-width: var(--lebar-css, 100%); }
.panduan-perbesar .panduan-gambar-bingkai { max-width: var(--lebar-asli, 100%); margin-inline: auto; }
.panduan-gambar-bingkai img { display: block; width: 100%; height: 100%; border: var(--border-thin) solid var(--color-border); border-radius: var(--radius-md); background-color: #FFFFFF; box-shadow: var(--shadow-sm); }
.panduan-gambar-lup { position: absolute; right: var(--space-3); bottom: var(--space-3); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-circle); background-color: rgba(1, 29, 73, 0.72); color: #FFFFFF; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); pointer-events: none; }
.panduan-gambar-lup .icon { width: 1.1rem; height: 1.1rem; }
.panduan-gambar-tombol:hover .panduan-gambar-lup, .panduan-gambar-tombol:focus-visible .panduan-gambar-lup { opacity: 1; }
@media (hover: none) { .panduan-gambar-lup { opacity: 0.85; } }
.panduan-sorot { position: absolute; border: 2px solid var(--amber-400); border-radius: 0.5rem; box-shadow: 0 0 0 3px rgba(248, 174, 26, 0.28); pointer-events: none; }
.panduan-penanda { position: absolute; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; transform: translate(-50%, -50%); border: 2px solid #FFFFFF; border-radius: var(--radius-circle); background-color: var(--amber-500); color: var(--neutral-900); font-family: var(--font-display); font-size: 0.8rem; font-weight: var(--fw-extrabold); line-height: 1; box-shadow: 0 2px 6px rgba(1, 29, 73, 0.35); pointer-events: none; }
.panduan-gambar figcaption { display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }
.panduan-gambar-ket { font-style: italic; }
ol.panduan-legenda { display: grid; gap: 0.35rem var(--space-5); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 0; color: var(--color-text-secondary); }
.panduan-legenda li { display: flex; align-items: flex-start; gap: var(--space-2); }
.panduan-legenda-nomor { flex: none; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-top: 0.05rem; border-radius: var(--radius-circle); background-color: var(--amber-500); color: var(--neutral-900); font-family: var(--font-display); font-size: 0.7rem; font-weight: var(--fw-extrabold); }
.panduan-gambar-ponsel { justify-items: center; }
.panduan-gambar-ponsel .panduan-gambar-tombol { width: min(100%, 20rem); }
.panduan-gambar-ponsel .panduan-gambar-bingkai img { border-radius: 1.25rem; }
.panduan-gambar-ponsel figcaption { width: 100%; }
.panduan-gambar-pengganti { display: grid; place-items: center; gap: var(--space-2); min-height: 10rem; border: var(--border-base) dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); font-size: var(--fs-sm); }
.panduan-gambar-pengganti .icon { width: 1.75rem; height: 1.75rem; }

/* Jendela gambar diperbesar: gambar selebar jendela (gambar ponsel selebar layar ponsel), keterangan di bawahnya. */
/* Dialog selebar kotaknya supaya tetap di tengah layar. */
.modal.modal-panduan-gambar { width: min(100% - var(--space-6), 90rem); }
.modal-panduan-gambar .modal-kotak { width: 100%; max-width: none; padding: var(--space-6); }
.panduan-perbesar { display: grid; gap: var(--space-4); max-height: calc(100dvh - 6rem); overflow: auto; }
.panduan-perbesar.is-ponsel { justify-items: center; }
.panduan-perbesar.is-ponsel .panduan-gambar-bingkai { width: min(100%, 26rem); }
.panduan-perbesar figcaption { display: grid; gap: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); text-align: left; }
.panduan-perbesar .panduan-penanda { width: 1.9rem; height: 1.9rem; font-size: 0.9rem; }

/* Bab sebelum dan sesudah di kaki bacaan. */
.panduan-lanjut { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--space-8); }
.panduan-lanjut-kartu { display: grid; gap: var(--space-1); padding: var(--space-4) var(--space-5); color: var(--color-text); text-decoration: none; transition: var(--transition-lift); }
.panduan-lanjut-sesudah { justify-items: end; text-align: right; }
.panduan-lanjut-label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.panduan-lanjut-sesudah .panduan-lanjut-label { flex-direction: row-reverse; }
.panduan-lanjut-kartu b { font-family: var(--font-display); font-size: var(--fs-sm); line-height: var(--lh-snug); }
@media (hover: hover) { .panduan-lanjut-kartu:hover { border-color: var(--color-primary-border); color: var(--color-link); } }
@media (max-width: 35.99rem) {
  .panduan-lanjut { grid-template-columns: minmax(0, 1fr); }
  .panduan-lanjut-sesudah { justify-items: start; text-align: left; }
  .panduan-lanjut-sesudah .panduan-lanjut-label { flex-direction: row; }
}

/* ---------- 28. KABAR DATA BARU (KP-182) --------------------------- */

/* Pil di bawah bilah atas, di tengah kolom isi. Meluncur turun dari balik bilah atas saat muncul dan naik kembali saat
   disembunyikan; letaknya di bawah bilah atas dan di atas navigasi bagian yang menempel. Dipusatkan dengan margin auto,
   bukan left 50%, supaya lebarnya tidak terbatas separuh layar; tulisannya baru terlipat di layar sempit berhuruf besar. */
.guru-kabar-baru {
  position: fixed;
  z-index: calc(var(--z-navbar) - 1);
  top: calc(var(--guru-atas-tinggi) + var(--space-3));
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 2 * var(--container-gutter));
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-lg);
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
@media (min-width: 62rem) {
  .guru-kabar-baru { left: var(--guru-sisi-lebar); max-width: calc(100% - var(--guru-sisi-lebar) - 2 * var(--container-gutter)); }
}
.guru-kabar-baru[hidden] { display: none; }
.guru-kabar-baru.is-masuk,
.guru-kabar-baru.is-keluar { opacity: 0; transform: translateY(calc(-100% - var(--space-3))); }
.guru-kabar-baru-tombol,
.guru-kabar-baru-tutup {
  border: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.guru-kabar-baru-tombol {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 2.5rem;
  padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  text-align: left;
}
.guru-kabar-baru-isi { display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: var(--space-2); min-width: 0; }
.guru-kabar-baru-isi[hidden] { display: none; }
.guru-kabar-baru-isi .icon { flex: none; width: 1rem; height: 1rem; }
.guru-kabar-baru-isi b { font-weight: var(--fw-semibold); color: inherit; }
.guru-kabar-baru-pisah { opacity: 0.7; }
.guru-kabar-baru-tutup {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-right: var(--space-1);
  border-radius: var(--radius-circle);
}
.guru-kabar-baru-tutup[hidden] { display: none; }
.guru-kabar-baru-tutup .icon { width: 1rem; height: 1rem; }
@media (hover: hover) {
  .guru-kabar-baru-tombol:hover,
  .guru-kabar-baru-tutup:hover { background-color: var(--color-primary-hover); }
}
.guru-kabar-baru-tombol:focus-visible,
.guru-kabar-baru-tutup:focus-visible { outline: var(--focus-ring-width) solid var(--color-on-primary); outline-offset: -4px; }

/* Angka permintaan baru yang baru muncul di menu tumbuh dari tempatnya. */
.guru-nav-hitung { transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.guru-nav-hitung.is-masuk { opacity: 0; transform: scale(0.6); }

/* Papan kelas: tombol Lanjutkan atau Masuk lagi di samping kabar pembaruan yang berhenti. */
.guru-papan-segar.is-berhenti { flex-wrap: wrap; row-gap: var(--space-2); }

/* KP-185: zona angka yang berubah sendiri. Lebar ruas bilah kemajuan bergeser ke nilai barunya bersama angka yang
   dihitung guru.js; pengguna yang memilih kurangi gerak langsung mendapat lebar akhirnya (base.css). */
.guru-bar > span { transition: width var(--dur-slower) var(--ease-out); }
.guru-sapa-pesan strong,
.guru-dl dd,
.analitik-beranda-angka b,
.guru-antrean-soal-angka { font-variant-numeric: tabular-nums; }

/* KP-186: baris yang baru masuk lewat pil Tampilkan disorot lembut lalu memudar dalam 2,4 detik. Sorotnya lapisan gambar
   latar di atas warna latar barisnya sendiri, jadi latar asli baris tidak berubah. Pengguna yang memilih kurangi gerak
   mendapat sorot diam selama baris itu baru. */
@property --guru-sorot {
  syntax: '<color>';
  inherits: false;
  initial-value: transparent;
}
@keyframes guru-kabar-sorot {
  from { --guru-sorot: var(--color-primary-soft); }
  to { --guru-sorot: transparent; }
}
tr.is-kabar-baru > td,
li.is-kabar-baru > .guru-daftar-baris,
li.guru-umpan-butir.is-kabar-baru {
  background-image: linear-gradient(var(--guru-sorot), var(--guru-sorot));
  animation: guru-kabar-sorot 2400ms var(--ease-out) both;
}
@media (prefers-reduced-motion: reduce) {
  tr.is-kabar-baru > td,
  li.is-kabar-baru > .guru-daftar-baris,
  li.guru-umpan-butir.is-kabar-baru { animation: none; --guru-sorot: var(--color-primary-soft); }
}