/*
 * AkseleraSync — Portal Guru
 * Additive styles layered on top of the Portal Wali design system in index.html.
 * Every component is teacher-prefixed to keep future portals isolated.
 */

/* Kepadatan Portal Guru.
   Guru memakai portal ini sepanjang hari untuk memindai kelas lalu bertindak,
   sehingga kepadatannya berada di antara Portal Wali dan Portal Pimpinan.
   Nilainya diambil dari tokens.css; tidak ada angka mentah di sini. */
[data-active-portal="guru"] {
  /* Preferensi "Kecil" menyetel --font-scale ke .94, yang akan menarik teks
     caption ke 11,3px. Kontrak audit melarang teks informasi di bawah 12px,
     jadi ukuran terkecil diberi lantai; ukuran lain tetap ikut skala. */
  --fs-caption: max(12px, calc(12px * var(--font-scale, 1)));
  /* Override --d-section-gap 24px yang lama DIHAPUS (26 Agu 2026):
     Guru mengikuti pemetaan --d-section-gap -> --sec-gap 40px dari
     tokens.css (ritme section Opsi B). Portal yang butuh nilai lain
     menimpa --sec-gap, bukan --d-section-gap. */
  --d-card-pad: var(--sp-4);
  --d-card-gap: var(--sp-3);
  --d-row-pad: var(--sp-3);
  --d-card-radius: var(--r-lg);
  --d-body-size: var(--fs-body);
}

/* ---------- Portal frame and common helpers ---------- */

.teacher-page {
  position: relative;
  min-width: 0;
  animation: teacher-page-enter .3s cubic-bezier(.32, .72, 0, 1) both;
}

.teacher-stack {
  display: grid;
  gap: 10px;
}

.teacher-inline {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 10px;
}

.teacher-inline > :where(.teacher-grow, .list-main) {
  min-width: 0;
  flex: 1;
}

.teacher-scroll {
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.teacher-scroll::-webkit-scrollbar { display: none; }

.teacher-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .075em;
  line-height: 1.35;
  text-transform: uppercase;
}

.teacher-title {
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.teacher-copy {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.teacher-divider {
  width: 100%;
  height: 1px;
  margin: 12px 0;
  border: 0;
  background: var(--sand);
}

.teacher-icon-image,
.teacher-icon-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 2px 3px rgba(21, 36, 74, .12));
}

.teacher-icon-image[aria-hidden="true"],
.teacher-icon-img[aria-hidden="true"] { pointer-events: none; }

.teacher-icon-box {
  width: 42px;
  height: 42px;
  flex: none;
  padding: 5px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: linear-gradient(145deg, #f2f4fa, #d9e1f2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62);
}

.teacher-icon-box.green { color: var(--emerald); background: linear-gradient(145deg, #f0f9f6, #cde9df); }
.teacher-icon-box.gold { color: var(--gold-dark); background: linear-gradient(145deg, #fff9e9, #f5e4b5); }
.teacher-icon-box.warm { color: var(--terracotta); background: linear-gradient(145deg, #fff7f3, #f3d6c9); }
.teacher-icon-box.rose { color: var(--danger); background: linear-gradient(145deg, #fff5f6, #f5d6db); }
.teacher-icon-box.sky { color: #2679a9; background: linear-gradient(145deg, #f1f9fd, #cfe8f5); }
.teacher-icon-box.purple { color: #7551a6; background: linear-gradient(145deg, #f7f2fb, #e4d6f2); }

/* ---------- Teacher home hero ---------- */

.teacher-hero {
  min-height: 250px;
  padding: calc(17px + env(safe-area-inset-top, 0px)) 16px 34px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff;
  border-radius: 0 0 28px 28px;
  background:
    radial-gradient(ellipse at 94% 112%, rgba(41, 218, 222, .35) 0%, rgba(41, 218, 222, .08) 38%, transparent 64%),
    radial-gradient(circle at 6% -20%, rgba(103, 139, 232, .35) 0%, transparent 48%),
    linear-gradient(142deg, #0f1935 0%, #1a346b 54%, #0b5369 100%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .1), 0 10px 32px rgba(15, 31, 66, .15);
}

.teacher-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 56px;
  height: 56px;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: auto;
  bottom: auto;
  left: 59%;
  border: 0;
  border-radius: 0;
  background: url("/presentasi/storage/brand/ibnuhajar-ih-mark.webp?v=20260802") center / contain no-repeat;
  box-shadow: none;
  opacity: .58;
  filter: saturate(1.16) brightness(1.32) drop-shadow(0 6px 14px rgba(3, 15, 40, .25));
  transform: translate3d(-50%, 0, 0);
}

.teacher-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02) 28%, transparent 49%);
}

.teacher-hero__top {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  position: relative;
  z-index: 3;
}

.teacher-hero__brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: rgba(255, 255, 255, .84);
  font-size: var(--fs-caption);
  font-weight: 700;
}

.teacher-hero__brand img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.teacher-hero__actions,
.teacher-hero__action {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.teacher-hero__actions .round-btn,
.teacher-hero__action .round-btn {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.teacher-hero__body {
  min-height: 154px;
  padding-top: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 118px;
  align-items: end;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.teacher-hero__content {
  min-width: 0;
  padding: 0 0 6px;
}

.teacher-hero__eyebrow {
  margin-bottom: var(--sp-1);
  color: rgba(255, 255, 255, .72);
  font-size: var(--fs-caption);
  font-weight: 600;
}

.teacher-hero__content h1,
.teacher-hero__name {
  max-width: 260px;
  margin: 0;
  color: #fff;
  font-size: var(--fs-metric-md);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.18;
  text-wrap: balance;
}

.teacher-hero__role,
.teacher-hero__meta {
  margin: 6px 0 0;
  color: rgba(255, 255, 255, .78);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.teacher-hero__badges {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.teacher-hero__badge {
  min-height: 27px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.25;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.teacher-hero__badge .material-symbols-rounded { font-size: 15px; }

.teacher-hero__avatar {
  width: 118px;
  height: 142px;
  margin: 0 0 -34px auto;
  position: relative;
  align-self: end;
  filter: drop-shadow(0 15px 20px rgba(3, 15, 40, .27));
  animation: teacher-avatar-enter .55s cubic-bezier(.32, .72, 0, 1) both;
}

.teacher-hero__avatar::before {
  content: "";
  position: absolute;
  inset: 20px -5px -1px;
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 58px 58px 23px 23px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .055));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2);
}

.teacher-hero__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.teacher-avatar {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-radius: var(--r-lg);
  background: linear-gradient(145deg, var(--indigo), #5f79b7);
  box-shadow: 0 5px 14px rgba(21, 36, 74, .16);
  font-weight: 800;
}

.teacher-avatar.round { border-radius: 50%; }
.teacher-avatar.large { width: 62px; height: 62px; border-radius: var(--r-xl); }

.teacher-mini-avatar {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--emerald), #20a588);
  box-shadow: 0 3px 10px rgba(21, 36, 74, .13);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.teacher-avatar img,
.teacher-mini-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.teacher-avatar-stack {
  display: flex;
  align-items: center;
  padding-left: 6px;
}

.teacher-avatar-stack .teacher-mini-avatar { margin-left: -7px; }
.teacher-avatar-stack .teacher-mini-avatar:first-child { margin-left: 0; }

/* ---------- Active assignment and mode switching ---------- */

.teacher-profile-card {
  margin: -18px 16px 0;
  padding: 13px 14px;
  position: relative;
  z-index: 5;
  background: #fff;
  border: 1px solid rgba(231, 227, 217, .92);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow);
}

.teacher-profile-card__top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.teacher-profile-card__main {
  min-width: 0;
  flex: 1;
}

.teacher-profile-card__name {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.35;
}

.teacher-profile-card__meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.teacher-mode-switcher {
  margin-top: 11px;
  padding-top: 11px;
  display: flex;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  border-top: 1px solid var(--sand);
  scrollbar-width: none;
}

.teacher-mode-switcher::-webkit-scrollbar { display: none; }

.teacher-mode-chip {
  min-height: 34px;
  flex: none;
  padding: 7px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease;
}

.teacher-mode-chip:active { transform: scale(.96); }

.teacher-mode-chip.active,
.teacher-mode-chip[aria-pressed="true"] {
  color: #fff;
  background: var(--indigo);
  border-color: var(--indigo);
  box-shadow: 0 5px 12px rgba(36, 59, 114, .18);
}

.teacher-mode-chip .material-symbols-rounded { font-size: 16px; }

.teacher-mode-banner {
  margin-bottom: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  position: relative;
  overflow: hidden;
  color: var(--indigo);
  background: linear-gradient(135deg, #f2f5fb, #e4ebf7);
  border: 1px solid #d8e0ef;
  border-radius: 17px;
}

.teacher-mode-banner::after {
  content: "";
  width: 74px;
  height: 74px;
  position: absolute;
  right: -23px;
  bottom: -31px;
  border-radius: 50%;
  background: rgba(36, 59, 114, .06);
}

.teacher-mode-banner > .material-symbols-rounded { flex: none; font-size: 23px; }
.teacher-mode-banner > div { min-width: 0; flex: 1; position: relative; z-index: 1; }
.teacher-mode-banner strong { display: block; font-size: var(--fs-small); line-height: 1.4; }
.teacher-mode-banner span:not(.material-symbols-rounded) { display: block; margin-top: 2px; color: var(--text); font-size: var(--fs-caption); line-height: 1.5; }

/* ---------- Summary, metrics, services ---------- */

.teacher-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.teacher-metric {
  min-width: 0;
  min-height: 88px;
  padding: 12px 10px;
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}

.teacher-metric::after {
  content: "";
  width: 38px;
  height: 38px;
  position: absolute;
  right: -16px;
  bottom: -16px;
  border-radius: 50%;
  background: var(--indigo-soft);
}

.teacher-metric.good::after { background: var(--emerald-soft); }
.teacher-metric.gold::after { background: var(--gold-soft); }
.teacher-metric.warn::after { background: var(--terracotta-soft); }

.teacher-metric__value,
.teacher-metric-value {
  color: var(--ink);
  font-size: var(--fs-title);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.teacher-metric__label,
.teacher-metric-label {
  margin-top: 5px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.teacher-metric__trend {
  margin-top: 5px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--emerald);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.teacher-service-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 7px;
}

.teacher-service-button,
.teacher-service-btn {
  min-width: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.teacher-service-icon {
  width: 50px;
  height: 50px;
  padding: 5px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: visible;
  color: var(--indigo);
  border-radius: 17px;
  background: linear-gradient(145deg, #f2f4fa, #d9e1f2);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), 0 4px 10px rgba(21, 36, 74, .08);
  transition: transform .18s ease;
}

.teacher-service-icon.green { color: var(--emerald); background: linear-gradient(145deg, #f0f9f6, #cde9df); }
.teacher-service-icon.gold { color: var(--gold-dark); background: linear-gradient(145deg, #fff9e9, #f5e4b5); }
.teacher-service-icon.warm { color: var(--terracotta); background: linear-gradient(145deg, #fff7f3, #f3d6c9); }
.teacher-service-icon.rose { color: var(--danger); background: linear-gradient(145deg, #fff5f6, #f5d6db); }
.teacher-service-icon.sky { color: #2679a9; background: linear-gradient(145deg, #f1f9fd, #cfe8f5); }
.teacher-service-icon.purple { color: #7551a6; background: linear-gradient(145deg, #f7f2fb, #e4d6f2); }

.teacher-service-icon .material-symbols-rounded { font-size: 26px; }
.teacher-service-icon .teacher-icon-image { width: 42px; height: 42px; }
.teacher-service-button:active .teacher-service-icon,
.teacher-service-btn:active .teacher-service-icon { transform: scale(.92); }

.teacher-service-name {
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.teacher-pill {
  min-height: 25px;
  padding: var(--sp-1) var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--indigo);
  background: var(--indigo-soft);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.teacher-pill.good { color: var(--emerald-dark); background: var(--emerald-soft); }
.teacher-pill.gold { color: var(--gold-dark); background: var(--gold-soft); }
.teacher-pill.warn { color: var(--terracotta-dark); background: var(--terracotta-soft); }
.teacher-pill.danger { color: var(--danger); background: var(--danger-soft); }
.teacher-pill.neutral { color: var(--muted); background: var(--sand); }
.teacher-pill .material-symbols-rounded { font-size: 13px; }

/* ---------- Schedule and agenda ---------- */

.teacher-schedule {
  padding: 4px 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-schedule-row {
  min-width: 0;
  padding: 12px 0;
  display: grid;
  grid-template-columns: 50px 13px minmax(0, 1fr) auto;
  align-items: start;
  gap: 7px;
  border-bottom: 1px solid var(--sand);
}

.teacher-schedule-row:last-child { border-bottom: 0; }

.teacher-schedule-time {
  color: var(--indigo);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.4;
}

.teacher-schedule-line { min-height: 44px; position: relative; }

.teacher-schedule-line::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  left: 2px;
  top: 4px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 4px var(--emerald-soft);
}

.teacher-schedule-line::after {
  content: "";
  width: 1px;
  position: absolute;
  left: 5px;
  top: 17px;
  bottom: -19px;
  background: var(--line);
}

.teacher-schedule-row:last-child .teacher-schedule-line::after { display: none; }
.teacher-schedule-row.current .teacher-schedule-line::before { background: var(--gold); box-shadow: 0 0 0 4px var(--gold-soft); }
.teacher-schedule-row.cancelled { opacity: .62; }
.teacher-schedule-row.cancelled .teacher-schedule-line::before { background: var(--muted); box-shadow: 0 0 0 4px var(--sand); }

.teacher-schedule-main { min-width: 0; }

.teacher-schedule-title {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.4;
}

.teacher-schedule-meta {
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.teacher-schedule-action {
  min-width: 34px;
  min-height: 34px;
  padding: 6px 8px;
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 0;
  border-radius: 11px;
  cursor: pointer;
}

.teacher-schedule-action .material-symbols-rounded { font-size: 19px; }

.teacher-day-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(54px, 1fr);
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
}

.teacher-day-strip::-webkit-scrollbar { display: none; }

.teacher-day {
  min-height: 67px;
  padding: 8px 7px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 2px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  font-size: var(--fs-caption);
  font-weight: 700;
  cursor: pointer;
}

.teacher-day strong { color: var(--ink); font-size: var(--fs-subhead); }
.teacher-day.active { color: rgba(255, 255, 255, .76); background: var(--indigo); border-color: var(--indigo); box-shadow: 0 7px 16px rgba(36, 59, 114, .2); }
.teacher-day.active strong { color: #fff; }

/* ---------- Classes and roster ---------- */

.teacher-class-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.teacher-class-card {
  min-width: 0;
  padding: 14px;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

button.teacher-class-card { width: 100%; cursor: pointer; }

/* Lingkaran dekoratif kartu kelas. Ditarik lebih jauh ke sudut dan diberi
   z-index 0 supaya hanya menyisakan seperempat busur tipis di pojok dan
   tidak pernah menyentuh chip status ("1 belum") di baris atas kartu. */
.teacher-class-card::after {
  content: "";
  width: 66px;
  height: 66px;
  position: absolute;
  z-index: 0;
  right: -44px;
  top: -44px;
  border-radius: 50%;
  background: var(--indigo-soft);
  pointer-events: none;
}

.teacher-class-card.good::after { background: var(--emerald-soft); }
.teacher-class-card.gold::after { background: var(--gold-soft); }

.teacher-class-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}

.teacher-class-card__icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: var(--indigo-soft);
  border-radius: 13px;
}

.teacher-class-card__icon .material-symbols-rounded { font-size: 22px; }

.teacher-class-card__name {
  margin-top: 11px;
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.3;
}

.teacher-class-card__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.teacher-class-card__footer {
  margin-top: 11px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: 1px solid var(--sand);
  color: var(--muted);
  font-size: var(--fs-caption);
}

.teacher-roster {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-roster-row {
  width: 100%;
  min-height: 68px;
  padding: 10px 13px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--sand);
}

button.teacher-roster-row { cursor: pointer; }
.teacher-roster-row:last-child { border-bottom: 0; }
.teacher-roster-row:active { background: #fbfaf6; }

.teacher-roster-main {
  min-width: 0;
  flex: 1;
}

.teacher-roster-name {
  display: block;
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.teacher-roster-meta {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.teacher-roster-flags {
  max-width: 42%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--sp-1);
}

/* ---------- Attendance ---------- */

.teacher-attendance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-2);
}

.teacher-attendance-cell {
  min-width: 0;
  min-height: 76px;
  padding: 10px 8px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 3px;
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
  font-size: var(--fs-caption);
  font-weight: 700;
}

button.teacher-attendance-cell { cursor: pointer; }
.teacher-attendance-cell .material-symbols-rounded { color: var(--indigo); font-size: 22px; }
.teacher-attendance-cell strong { color: var(--ink); font-size: var(--fs-subhead); line-height: 1.2; }
.teacher-attendance-cell.present { color: var(--emerald-dark); background: var(--emerald-soft); border-color: #c6e4da; }
.teacher-attendance-cell.late { color: var(--gold-dark); background: var(--gold-soft); border-color: #efdcaa; }
.teacher-attendance-cell.excused { color: var(--indigo); background: var(--indigo-soft); border-color: #d8e0ef; }
.teacher-attendance-cell.absent { color: var(--danger); background: var(--danger-soft); border-color: #f0cfd5; }
.teacher-attendance-cell.active,
.teacher-attendance-cell[aria-pressed="true"] { box-shadow: 0 0 0 2px currentColor inset, 0 6px 14px rgba(21, 36, 74, .1); }

.teacher-attendance-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  scrollbar-width: thin;
}

.teacher-attendance-table {
  width: 100%;
  min-width: 410px;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-caption);
}

.teacher-attendance-table th,
.teacher-attendance-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--sand);
  text-align: center;
  vertical-align: middle;
}

.teacher-attendance-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  color: var(--muted);
  background: #faf9f5;
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.teacher-attendance-table th:first-child,
.teacher-attendance-table td:first-child {
  width: 150px;
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  background: #fff;
}

.teacher-attendance-table th:first-child { z-index: 3; background: #faf9f5; }
.teacher-attendance-table tr:last-child td { border-bottom: 0; }

.teacher-attendance-action {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}

.teacher-attendance-action .material-symbols-rounded { font-size: 18px; }
.teacher-attendance-action.present,
.teacher-attendance-action[aria-label*="Hadir"][aria-pressed="true"] { color: var(--emerald-dark); background: var(--emerald-soft); border-color: #c6e4da; }
.teacher-attendance-action.late { color: var(--gold-dark); background: var(--gold-soft); border-color: #efdcaa; }
.teacher-attendance-action.absent { color: var(--danger); background: var(--danger-soft); border-color: #f0cfd5; }

.teacher-attendance-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  color: var(--muted);
  font-size: var(--fs-caption);
}

.teacher-attendance-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.teacher-attendance-legend i {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: var(--emerald);
}

/* ---------- Work queue and task cards ---------- */

.teacher-work-queue {
  display: grid;
  gap: 9px;
}

.teacher-work-item {
  width: 100%;
  min-width: 0;
  padding: 13px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 11px;
  position: relative;
  overflow: hidden;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--indigo);
  border-radius: 17px;
  box-shadow: var(--shadow-soft);
}

button.teacher-work-item { cursor: pointer; }
.teacher-work-item.urgent { border-left-color: var(--terracotta); }
.teacher-work-item.good { border-left-color: var(--emerald); }
.teacher-work-item.gold { border-left-color: var(--gold); }
.teacher-work-item.waiting { border-left-color: #8d76ad; }
.teacher-work-item.done { opacity: .7; border-left-color: var(--emerald); }

.teacher-work-item__main { min-width: 0; }
.teacher-work-item__title { color: var(--ink); font-size: var(--fs-small); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.teacher-work-item__meta { margin-top: 3px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; overflow-wrap: anywhere; }
.teacher-work-item__footer { margin-top: var(--sp-2); display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.teacher-work-item__side { display: grid; justify-items: end; gap: 7px; }
.teacher-work-item__due { color: var(--terracotta-dark); font-size: var(--fs-caption); font-weight: 800; white-space: nowrap; }

/* ---------- Learning progress, character and evidence ---------- */

.teacher-progress-card,
.teacher-evidence-card,
.teacher-evaluation-card {
  min-width: 0;
  padding: 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-progress-card__head,
.teacher-evidence-card__head,
.teacher-evaluation-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.teacher-progress-card__head > div,
.teacher-evidence-card__head > div,
.teacher-evaluation-card__head > div { min-width: 0; flex: 1; }

.teacher-progress-card__title,
.teacher-evidence-card__title,
.teacher-evaluation-card__title {
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.teacher-progress-card__meta,
.teacher-evidence-card__meta,
.teacher-evaluation-card__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

.teacher-progress-track {
  height: 8px;
  margin-top: var(--sp-3);
  overflow: hidden;
  background: var(--sand);
  border-radius: var(--r-pill);
}

.teacher-progress-track > span {
  width: var(--progress, 0%);
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--emerald), #27a98c);
  transition: width .55s cubic-bezier(.32, .72, 0, 1);
}

.teacher-progress-card.gold .teacher-progress-track > span { background: linear-gradient(90deg, var(--gold), #e5bd58); }
.teacher-progress-card.warm .teacher-progress-track > span { background: linear-gradient(90deg, var(--terracotta), #df8b69); }

.teacher-progress-card__footer,
.teacher-evidence-card__footer,
.teacher-evaluation-card__footer {
  margin-top: 11px;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  border-top: 1px solid var(--sand);
}

.teacher-evidence-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 11px;
}

.teacher-evidence-card__preview {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--indigo);
  background: var(--indigo-soft);
  border-radius: 15px;
}

.teacher-evidence-card__preview img { width: 100%; height: 100%; object-fit: cover; }
.teacher-evidence-card__body { min-width: 0; }
.teacher-evidence-card__footer { grid-column: 1 / -1; }

.teacher-rubric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.teacher-rubric-item {
  min-width: 0;
  min-height: 96px;
  padding: 11px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-2);
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 15px;
}

button.teacher-rubric-item { cursor: pointer; }
.teacher-rubric-item.active,
.teacher-rubric-item[aria-pressed="true"] { color: var(--indigo); background: var(--indigo-soft); border-color: #c5d0e6; box-shadow: 0 0 0 1px rgba(36, 59, 114, .12) inset; }

.teacher-rubric-item__label { font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.teacher-rubric-item__score { color: var(--ink); font-size: var(--fs-title); font-weight: 800; line-height: 1; }
.teacher-rubric-item__score small { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; }

.teacher-sensitive {
  padding: 13px;
  position: relative;
  color: var(--text);
  background: linear-gradient(145deg, #fff9fa, var(--danger-soft));
  border: 1px solid #f0cfd5;
  border-radius: var(--r-lg);
}

.teacher-sensitive__head {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--danger);
}

.teacher-sensitive__head .material-symbols-rounded { flex: none; font-size: 21px; }
.teacher-sensitive strong { display: block; font-size: var(--fs-caption); line-height: 1.45; }
.teacher-sensitive p { margin: 4px 0 0; color: var(--text); font-size: var(--fs-caption); line-height: 1.55; }

/* ---------- Resources, checklist and files ---------- */

.teacher-resource-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.teacher-resource-card {
  min-width: 0;
  min-height: 138px;
  padding: 13px;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: var(--shadow-soft);
}

button.teacher-resource-card { cursor: pointer; }
.teacher-resource-card > .teacher-icon-box { margin-bottom: 10px; }
.teacher-resource-card__title { font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.teacher-resource-card__meta { margin-top: 3px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
.teacher-resource-card__footer { margin-top: auto; padding-top: 9px; display: flex; align-items: center; justify-content: space-between; gap: 6px; }

.teacher-checklist {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-checklist-item {
  min-height: 58px;
  padding: 11px 13px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid var(--sand);
}

.teacher-checklist-item:last-child { border-bottom: 0; }

.teacher-check {
  width: 24px;
  height: 24px;
  flex: none;
  padding: 0;
  display: grid;
  place-items: center;
  color: transparent;
  background: #fff;
  border: 1.5px solid #c9c4b8;
  border-radius: var(--r-sm);
  cursor: pointer;
}

.teacher-check.checked,
.teacher-check[aria-checked="true"] { color: #fff; background: var(--emerald); border-color: var(--emerald); }
.teacher-check .material-symbols-rounded { font-size: 17px; }
.teacher-checklist-item__main { min-width: 0; flex: 1; }
.teacher-checklist-item__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; }
.teacher-checklist-item__meta { margin-top: 2px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }
.teacher-checklist-item.done .teacher-checklist-item__title { color: var(--muted); text-decoration: line-through; }

/* ---------- Messages ---------- */

.teacher-thread {
  padding: 14px 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.teacher-thread-date {
  align-self: center;
  padding: 5px 9px;
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.teacher-message {
  max-width: 84%;
  padding: 10px 12px;
  align-self: flex-start;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px 17px 17px 5px;
  box-shadow: 0 2px 7px rgba(21, 36, 74, .04);
  font-size: var(--fs-caption);
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.teacher-message.mine {
  align-self: flex-end;
  color: #fff;
  background: var(--indigo);
  border-color: var(--indigo);
  border-radius: 17px 17px 5px 17px;
}

.teacher-message__author { display: block; margin-bottom: 3px; color: var(--emerald-dark); font-size: var(--fs-caption); font-weight: 800; }
.teacher-message.mine .teacher-message__author { color: rgba(255, 255, 255, .74); }
.teacher-message__time { display: block; margin-top: var(--sp-1); opacity: .62; font-size: var(--fs-caption); text-align: right; }

.teacher-thread-composer {
  position: sticky;
  z-index: 20;
  bottom: calc(72px + var(--safe-bottom));
  padding: 9px 12px;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 44px;
  align-items: end;
  gap: 7px;
  background: rgba(252, 251, 247, .97);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.teacher-thread-composer textarea,
.teacher-thread-composer input {
  width: 100%;
  min-height: 44px;
  max-height: 120px;
  padding: 11px 13px;
  resize: none;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
}

.teacher-composer-action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
}

.teacher-composer-action.send { width: 44px; height: 44px; color: #fff; background: var(--emerald); border-radius: 50%; }

/* ---------- Portfolio and evaluation ---------- */

.teacher-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

.teacher-portfolio-card {
  min-width: 0;
  min-height: 156px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

button.teacher-portfolio-card { width: 100%; padding: 0; text-align: left; cursor: pointer; }

.teacher-portfolio-card__art {
  height: 78px;
  padding: var(--sp-3);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  color: var(--indigo);
  background:
    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, .65), transparent 42px),
    linear-gradient(145deg, #e8eef9, #d0daef);
}

.teacher-portfolio-card__art.green { color: var(--emerald); background: linear-gradient(145deg, #eff9f5, #cde8df); }
.teacher-portfolio-card__art.gold { color: var(--gold-dark); background: linear-gradient(145deg, #fff9ea, #f2db9e); }
.teacher-portfolio-card__art.warm { color: var(--terracotta); background: linear-gradient(145deg, #fff5f0, #eecdbf); }
.teacher-portfolio-card__art .material-symbols-rounded { font-size: 34px; }

.teacher-portfolio-card__body { padding: 11px 12px 12px; }
.teacher-portfolio-card__title { color: var(--ink); font-size: var(--fs-caption); font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.teacher-portfolio-card__meta { margin-top: 3px; color: var(--muted); font-size: var(--fs-caption); line-height: 1.45; }

.teacher-evaluation-score {
  width: 54px;
  height: 54px;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--indigo);
  background: var(--indigo-soft);
  border-radius: 18px;
  font-size: var(--fs-heading);
  font-weight: 800;
}

.teacher-evaluation-score.good { color: var(--emerald-dark); background: var(--emerald-soft); }
.teacher-evaluation-score.gold { color: var(--gold-dark); background: var(--gold-soft); }

.teacher-evaluation-state {
  margin-top: 11px;
  padding: 10px 11px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
  background: var(--sand);
  border-radius: 13px;
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.teacher-evaluation-state .material-symbols-rounded { flex: none; color: var(--indigo); font-size: 19px; }

/* ---------- Search, forms and empty states ---------- */

.teacher-search {
  position: relative;
}

.teacher-search > .material-symbols-rounded {
  position: absolute;
  left: 13px;
  top: 50%;
  color: var(--muted);
  font-size: 21px;
  transform: translateY(-50%);
  pointer-events: none;
}

.teacher-search input {
  width: 100%;
  min-height: 48px;
  padding: 11px 42px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: 0 3px 10px rgba(21, 36, 74, .04);
}

.teacher-search-clear {
  width: 34px;
  height: 34px;
  position: absolute;
  right: 7px;
  top: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.teacher-search-results {
  margin-top: 9px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 10px;
}

.teacher-field-group {
  margin-bottom: 15px;
  padding: 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
}

.teacher-field-group legend,
.teacher-field-group__title {
  margin: 0 0 10px;
  padding: 0;
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.teacher-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.teacher-choice {
  min-width: 0;
  min-height: 48px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  text-align: left;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  cursor: pointer;
}

.teacher-choice.active,
.teacher-choice[aria-pressed="true"],
.teacher-choice:has(input:checked) {
  color: var(--indigo);
  background: var(--indigo-soft);
  border-color: #c5d0e6;
  box-shadow: 0 0 0 1px rgba(36, 59, 114, .1) inset;
}

.teacher-choice input { accent-color: var(--emerald); }

.teacher-empty {
  padding: 28px 18px;
  display: grid;
  justify-items: center;
  text-align: center;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow-soft);
}

.teacher-empty .teacher-icon-box {
  width: 58px;
  height: 58px;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-xl);
}

.teacher-empty h2 { margin: 0; color: var(--ink); font-size: var(--fs-heading); }
.teacher-empty p { max-width: 300px; margin: 7px 0 16px; font-size: var(--fs-caption); line-height: 1.55; }

/* ---------- Footer switch, teacher nav and teacher sheets ---------- */

.teacher-footer-switch {
  width: min(100%, 280px);
  min-height: 42px;
  margin: 4px auto 0;
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--indigo);
  background: transparent;
  border: 1px solid #d8e0ef;
  border-radius: 14px;
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.35;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.teacher-footer-switch:hover { background: var(--indigo-soft); }
.teacher-footer-switch:active { transform: scale(.98); }
.teacher-footer-switch .material-symbols-rounded { font-size: 18px; }

.teacher-bottom-nav {
  /* Duplikat murni dari .bottom-nav dasar di index.html (perlu class
     sendiri di sini karena portal-teacher.css dimuat belakangan dan
     beberapa nilai lain di bawah memang berbeda). Lebar memakai token
     bersama --portal-frame-width (tokens.css) — Guru TIDAK menimpanya
     di desktop, jadi nilainya tetap 480px di lebar berapa pun. */
  position: fixed;
  z-index: 80;
  left: 50%;
  bottom: 0;
  width: min(100%, var(--portal-frame-width, 480px));
  min-height: calc(72px + var(--safe-bottom));
  padding: 7px 8px calc(7px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  align-items: end;
  overflow: visible;
  isolation: isolate;
  background: rgba(255, 255, 255, .98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(21, 36, 74, .07);
  transform: translateX(-50%);
}

.teacher-bottom-nav .nav-btn.active { color: var(--indigo); }
.teacher-bottom-nav .nav-indicator { background: var(--indigo-soft); }

.teacher-sheet {
  width: min(100%, 480px);
  max-height: 86dvh;
  overflow-y: auto;
  padding: 10px 16px calc(20px + var(--safe-bottom));
  background: #fff;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 -18px 55px rgba(21, 36, 74, .22);
  animation: teacher-sheet-up .34s cubic-bezier(.32, .72, 0, 1);
  overscroll-behavior: contain;
}

.teacher-sheet__head {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}

.teacher-sheet__head > div { min-width: 0; flex: 1; }
.teacher-sheet__title { margin: 0; color: var(--ink); font-size: var(--fs-heading); line-height: 1.3; }
.teacher-sheet__sub { margin: 3px 0 0; color: var(--muted); font-size: var(--fs-caption); line-height: 1.5; }

/* ---------- Compatibility with shared Portal Wali primitives ---------- */

/* The runtime composes the teacher hero with the existing .hero/.hero-row shell. */
.hero.teacher-hero > .teacher-hero__content {
  min-height: 142px;
  padding: 0;
  align-items: center;
}

.hero.teacher-hero .hero-actions { flex: none; }

.hero.teacher-hero img.teacher-hero__avatar {
  width: 112px;
  height: 142px;
  margin: 0 0 -24px;
  display: block;
  flex: none;
  object-fit: cover;
  object-position: center top;
  border: 2px solid rgba(255, 255, 255, .34);
  border-radius: 58px 58px 22px 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .06));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 14px 26px rgba(3, 15, 40, .25);
}

.hero.teacher-hero > .teacher-mode-switcher {
  margin-top: var(--sp-1);
  padding: 9px 0 0;
  position: relative;
  z-index: 4;
  border-top-color: rgba(255, 255, 255, .11);
}

.hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip {
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip.active,
.hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip[aria-pressed="true"] {
  color: var(--ink);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 5px 14px rgba(3, 15, 40, .17);
}

.family-strip.teacher-profile-card { margin: -38px 16px 0; }
.page-pad > .teacher-profile-card { margin: 0; }

/* Summary is used both with rich metric classes and lightweight statistic children. */
.teacher-summary-grid > :not(.teacher-metric) {
  min-width: 0;
  padding: 4px 7px;
  text-align: center;
  border-right: 1px solid var(--sand);
}

.teacher-summary-grid > :not(.teacher-metric):last-child { border-right: 0; }

.teacher-summary-grid > :not(.teacher-metric) > strong {
  display: block;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: 800;
  line-height: 1.2;
}

.teacher-summary-grid > :not(.teacher-metric) > span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.teacher-class-card > .teacher-summary-grid,
.teacher-profile-card > .teacher-summary-grid {
  margin-top: var(--sp-3);
  padding-top: 11px;
  border-top: 1px solid var(--sand);
}

/* Runtime schedule rows retain the parent's flex row and optionally insert an icon. */
.teacher-schedule > .teacher-schedule-row {
  min-height: 66px;
  padding: 11px 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.teacher-schedule > .teacher-schedule-row > .time {
  width: 47px;
  flex: none;
}

.teacher-schedule > .teacher-schedule-row > .icon-tile {
  width: 38px;
  height: 38px;
  border-radius: 13px;
}

.teacher-student-avatar {
  width: 52px;
  height: 52px;
  flex: none;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--indigo), #5f79b7);
  border: 2px solid #fff;
  border-radius: 17px;
  box-shadow: 0 5px 14px rgba(21, 36, 74, .15);
  font-size: var(--fs-small);
  font-weight: 800;
}

[data-teacher-input] { min-width: 0; }

/* The full footer remains vertical; only its final action gets button treatment. */
.brand-footer.teacher-footer-switch {
  width: 100%;
  min-height: 0;
  margin: 0;
  /* var(--sp-5) menggantikan 22px mentah: jarak dari section terakhir
     sebelumnya jadi kelipatan 4px sesuai skala spacing, bukan angka
     yang kebetulan. */
  padding: var(--sp-5) 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: #8a93a6;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.brand-footer.teacher-footer-switch > button {
  width: min(100%, 280px);
  min-height: 42px;
  margin-top: var(--sp-2);
  padding: 8px 13px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--indigo);
  background: #fff;
  border: 1px solid #d8e0ef;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(21, 36, 74, .05);
  font-size: var(--fs-caption);
  font-weight: 800;
}

.brand-footer.teacher-footer-switch > button:hover { background: var(--indigo-soft); }

/* ---------- Interaction and accessibility ---------- */

:where(
  .teacher-mode-chip,
  .teacher-service-button,
  .teacher-service-btn,
  .teacher-class-card,
  .teacher-roster-row,
  .teacher-attendance-cell,
  .teacher-attendance-action,
  .teacher-work-item,
  .teacher-rubric-item,
  .teacher-resource-card,
  .teacher-check,
  .teacher-portfolio-card,
  .teacher-choice,
  .teacher-footer-switch,
  .teacher-composer-action,
  .teacher-day,
  .teacher-schedule-action,
  .teacher-search-clear
):focus-visible {
  outline: 3px solid rgba(215, 165, 46, .55);
  outline-offset: 2px;
}

:where(
  .teacher-mode-chip,
  .teacher-service-button,
  .teacher-service-btn,
  .teacher-class-card,
  .teacher-roster-row,
  .teacher-attendance-cell,
  .teacher-work-item,
  .teacher-rubric-item,
  .teacher-resource-card,
  .teacher-portfolio-card,
  .teacher-choice,
  .teacher-day
):disabled {
  cursor: not-allowed;
  opacity: .55;
}

.teacher-sr-only {
  width: 1px;
  height: 1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes teacher-page-enter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes teacher-avatar-enter {
  from { opacity: 0; transform: translate3d(10px, 12px, 0) scale(.96); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes teacher-sheet-up {
  from { transform: translateY(102%); }
  to { transform: translateY(0); }
}

/* Compact mobile reflow. */
@media (max-width: 380px) {
  .teacher-hero { min-height: 242px; }
  .teacher-hero__body { grid-template-columns: minmax(0, 1fr) 102px; }
  .teacher-hero__avatar { width: 102px; height: 126px; }
  .teacher-hero__content h1,
  .teacher-hero__name { font-size: var(--fs-title); }
  .teacher-summary-grid { gap: 6px; }
  .teacher-metric { min-height: 83px; padding-inline: var(--sp-2); }
  .teacher-service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .teacher-schedule-row { grid-template-columns: 44px 12px minmax(0, 1fr); }
  .teacher-schedule-action { grid-column: 3; justify-self: start; margin-top: var(--sp-1); }
  .teacher-class-grid,
  .teacher-resource-grid,
  .teacher-portfolio-grid { grid-template-columns: 1fr; }
}

@media (max-width: 330px) {
  .teacher-hero__body { grid-template-columns: minmax(0, 1fr) 86px; }
  .teacher-hero__avatar { width: 90px; height: 112px; }
  .teacher-hero__badges { gap: var(--sp-1); }
  .teacher-hero__badge { padding-inline: 7px; }
  .teacher-summary-grid,
  .teacher-attendance-grid { grid-template-columns: 1fr; }
  .teacher-metric { min-height: 68px; }
  .teacher-choice-grid,
  .teacher-rubric-grid { grid-template-columns: 1fr; }
  .teacher-work-item { grid-template-columns: auto minmax(0, 1fr); }
  .teacher-work-item__side { grid-column: 2; justify-items: start; }
}

/* Match the framed desktop shell used by the parent portal. */
@media (min-width: 620px) {
  .teacher-bottom-nav { bottom: 18px; border-radius: 0 0 30px 30px; }
  .teacher-sheet { margin-bottom: 0; border-radius: 26px; }
}

/* Ukuran tulisan "Besar" adalah preferensi kelas satu.
   Runtime menyetel --font-scale: 1.12 pada elemen <html>, jadi selektornya
   harus mengikuti nilai itu, bukan kelas yang tidak pernah dipasang. */
html[data-active-portal="guru"][style*="--font-scale: 1.12"] .teacher-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html[data-active-portal="guru"][style*="--font-scale: 1.12"] :where(.teacher-class-grid, .teacher-resource-grid, .teacher-portfolio-grid) {
  grid-template-columns: 1fr;
}

html[data-active-portal="guru"][style*="--font-scale: 1.12"] :where(.teacher-pill, .teacher-mode-chip) {
  white-space: normal;
}

/* Empat kolom layanan menyisakan 84px per sel. Pada tulisan Besar nama
   layanan naik ke 13,4px dan kata tunggal seperti "Pemberitahuan" butuh
   92px, sehingga huruf terakhirnya terpotong. Memotong kata di tengah
   membuatnya lebih sulit dibaca, jadi barisnya yang dilonggarkan menjadi
   tiga kolom — sama seperti yang sudah berlaku pada layar di bawah 360px. */
html[data-active-portal="guru"][style*="--font-scale: 1.12"] :where(.teacher-service-grid, .service-grid) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html[data-active-portal="guru"][style*="--font-scale: 1.12"] .teacher-hero__body {
  grid-template-columns: minmax(0, 1fr) 96px;
}

@media (prefers-reduced-motion: reduce) {
  .teacher-page,
  .teacher-hero__avatar,
  .teacher-sheet,
  .teacher-progress-track > span {
    animation: none !important;
    transition: none !important;
  }
}

.reduce-motion :where(
  .teacher-page,
  .teacher-hero__avatar,
  .teacher-sheet,
  .teacher-mode-chip,
  .teacher-service-icon,
  .teacher-footer-switch,
  .teacher-progress-track > span
) {
  animation: none !important;
  transition: none !important;
}

/* ---------- Visual quality pass: dense workflows and small viewports ---------- */

/* Search is emitted by the shared portal shell; make it feel like a first-class
   control when it appears inside the teacher experience. */
/* Kolom pencarian adalah SARINGAN daftar, bukan tombol. Bentuknya
   dibuat sama dengan kontrol lain (radius --r-md) supaya tidak terbaca
   sebagai pil berteks; tombol cari yang sesungguhnya berada di kepala
   halaman sebagai tombol bundar berisi ikon. */
[data-active-portal="guru"] .page-pad > .search-box {
  min-height: var(--touch-min);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="guru"] .page-pad > .search-box .material-symbols-rounded {
  flex: none;
  font-size: 21px;
  color: var(--indigo);
}

[data-active-portal="guru"] .page-pad > .search-box input {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  outline: 0;
}

[data-active-portal="guru"] .page-pad > .search-box input::placeholder { color: #8c9ab5; }

/* Filter controls may be numerous. Wrapping avoids a hidden final choice and
   keeps every choice above the minimum practical touch target. */
[data-active-portal="guru"] .chips {
  flex-wrap: wrap;
  gap: var(--sp-2);
  overflow: visible;
  padding: 0;
  scroll-snap-type: none;
}

[data-active-portal="guru"] .chips .chip,
[data-active-portal="guru"] .segmented .segment {
  min-height: 44px;
}

/* Chip mengikuti isinya. flex-grow lama membuat chip yang turun baris
   (mis. "Pelatihan" di Agenda, "Sertifikat" di Dokumen) melar selebar
   layar sendirian. */
[data-active-portal="guru"] .chips .chip {
  flex: 0 1 auto;
  padding-inline: var(--sp-3);
  white-space: normal;
}

[data-active-portal="guru"] .teacher-mode-switcher {
  flex-wrap: wrap;
  overflow: visible;
  gap: var(--sp-2);
}

[data-active-portal="guru"] .teacher-mode-chip {
  min-height: 44px;
  white-space: normal;
}

[data-active-portal="guru"] .section-head > .text-btn {
  min-height: var(--touch-min);
  padding: var(--sp-2);
  border-radius: 10px;
}

/* Attendance is a dense decision surface. Statuses are now plain-language,
   sufficiently large controls instead of unlabeled micro chips.
   Bentuk baris chip-nya didefinisikan satu kali di bagian
   "Baris status kehadiran" lebih jauh di bawah. */
[data-active-portal="guru"] .teacher-attendance-student {
  display: block;
  min-height: 0;
  padding: var(--sp-3);
  text-align: left;
}

[data-active-portal="guru"] .teacher-attendance-cell__student {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  /* var(--sp-2) (8px) mendarat tepat di ambang minimum teks->kartu (12px)
     dan terbaca menempel pada baris status kehadiran di bawahnya. */
  margin-bottom: var(--sp-3);
}

[data-active-portal="guru"] .teacher-attendance-cell__student .list-main { min-width: 0; }

[data-active-portal="guru"] .teacher-attendance-cell__student strong {
  display: block;
  font-size: var(--fs-small);
}

[data-active-portal="guru"] .teacher-attendance-cell__student small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 700;
}

[data-active-portal="guru"] .teacher-attendance-cell__student .status {
  flex: none;
  margin-left: auto;
}

[data-active-portal="guru"] .teacher-attendance-statuses {
  display: grid;
  font: inherit;
}

[data-active-portal="guru"] .teacher-attendance-action {
  font: inherit;
  cursor: pointer;
}

[data-active-portal="guru"] .teacher-attendance-action:focus-visible,
[data-active-portal="guru"] .teacher-mode-chip:focus-visible {
  outline: 3px solid rgba(35, 91, 174, .35);
  outline-offset: 2px;
}

/* The previous certificate card inherited an evidence-card grid though its DOM
   was different. A dedicated card prevents the facts and CTA from clipping. */
[data-active-portal="guru"] .teacher-certification-card {
  min-width: 0;
  padding: var(--sp-4);
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

[data-active-portal="guru"] .teacher-certification-card__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 10px;
}

[data-active-portal="guru"] .teacher-certification-card__head > div { min-width: 0; }

[data-active-portal="guru"] .teacher-certification-card__title {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-active-portal="guru"] .teacher-certification-card__meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

[data-active-portal="guru"] .teacher-certification-card__facts {
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

[data-active-portal="guru"] .teacher-certification-card__facts > div {
  min-width: 0;
  padding: 9px;
  background: #faf8f3;
  border: 1px solid var(--sand);
  border-radius: var(--r-md);
}

[data-active-portal="guru"] .teacher-certification-card__facts dt {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.3;
}

[data-active-portal="guru"] .teacher-certification-card__facts dd {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

[data-active-portal="guru"] .teacher-certification-card__facts dd.good { color: var(--emerald-dark); }
[data-active-portal="guru"] .teacher-certification-card .secondary-btn { width: 100%; min-height: 48px; }

/* Compact stepper: a readable stage name is more useful than a squeezed line
   that leaks out of the mobile canvas. */
[data-active-portal="guru"] .teacher-progress-steps {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  list-style: none;
  counter-reset: teacher-step;
}

[data-active-portal="guru"] .teacher-progress-steps li {
  min-width: 0;
  min-height: 58px;
  padding: 7px 3px;
  display: grid;
  place-content: center;
  gap: 3px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.18;
  text-align: center;
  overflow-wrap: anywhere;
  counter-increment: teacher-step;
}

[data-active-portal="guru"] .teacher-progress-steps li::before {
  content: counter(teacher-step);
  width: 16px;
  height: 16px;
  margin: 0 auto;
  display: grid;
  place-items: center;
  color: var(--muted);
  background: var(--sand);
  border-radius: 50%;
  font-size: var(--fs-caption);
}

[data-active-portal="guru"] .teacher-progress-steps li.done { color: var(--emerald-dark); background: var(--emerald-soft); border-color: #c6e4da; }
[data-active-portal="guru"] .teacher-progress-steps li.done::before { color: #fff; background: var(--emerald); }
[data-active-portal="guru"] .teacher-progress-steps li.active { color: var(--indigo); background: var(--indigo-soft); border-color: #bcc9e4; }
[data-active-portal="guru"] .teacher-progress-steps li.active::before { color: #fff; background: var(--indigo); }

/* Native checkboxes were visually tiny and difficult to hit on three separate
   workflows. Their labels now form a consistent selectable card. */
[data-active-portal="guru"] .teacher-version-grid {
  margin: 16px 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  border: 0;
}

[data-active-portal="guru"] .teacher-version-grid legend {
  width: 100%;
  margin-bottom: var(--sp-3);
  color: var(--ink);
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="guru"] .teacher-version-grid label,
[data-active-portal="guru"] .teacher-sensitive {
  min-width: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
}

[data-active-portal="guru"] .teacher-version-grid label {
  padding: 10px;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-size: var(--fs-caption);
  font-weight: 800;
}

[data-active-portal="guru"] .teacher-version-grid input,
[data-active-portal="guru"] .teacher-sensitive > input,
[data-active-portal="guru"] .teacher-checklist input[type="checkbox"] {
  width: 22px;
  height: 22px;
  flex: none;
  margin: 0;
  accent-color: var(--indigo);
}

[data-active-portal="guru"] .teacher-sensitive {
  padding: 13px;
  align-items: flex-start;
}

[data-active-portal="guru"] .teacher-sensitive > input { margin-top: 2px; accent-color: var(--danger); }
[data-active-portal="guru"] .teacher-sensitive small { display: block; margin-top: var(--sp-1); color: var(--text); font-size: var(--fs-caption); font-weight: 600; line-height: 1.45; }

/* Close remaining hierarchy gaps in portfolio and appraisal cards. */
[data-active-portal="guru"] .teacher-portfolio-card__art > strong {
  max-width: 72%;
  font-size: var(--fs-caption);
  font-weight: 800;
  line-height: 1.25;
  text-align: right;
}

[data-active-portal="guru"] .teacher-rubric-item { min-height: 134px; }
[data-active-portal="guru"] .teacher-rubric-item .progress { margin: 0; }
[data-active-portal="guru"] .teacher-rubric-item__meta { color: var(--muted); font-size: var(--fs-caption); font-weight: 700; line-height: 1.35; }
[data-active-portal="guru"] .teacher-rubric-item.insufficient { background: #fff9eb; border-color: #ead49a; }
[data-active-portal="guru"] .teacher-rubric-item.insufficient .progress > span { background: linear-gradient(90deg, var(--gold), #e5bd58); }

/* A relative mini badge is correct for service icons but wrong for a list row:
   there it could sit beyond the viewport. */
[data-active-portal="guru"] .list-row > .mini-badge {
  position: static;
  flex: none;
  margin-left: auto;
}

[data-active-portal="guru"] .list-row .text-btn { min-height: var(--touch-min); padding-inline: 10px; }

/* Timeline copy is a two-level unit, not a run-on sentence. The final grid
   column owns a vertical text stack so the title and its location/detail never
   collide on either narrow or high-density displays. */
[data-active-portal="guru"] .timeline .time-row > :last-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

[data-active-portal="guru"] .timeline .time-title,
[data-active-portal="guru"] .timeline .time-meta {
  display: block;
  overflow-wrap: anywhere;
}

[data-active-portal="guru"] .timeline .time-title {
  color: var(--ink);
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.32;
}

[data-active-portal="guru"] .timeline .time-meta {
  margin-top: 3px;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.42;
}

/* Home hero: one identity, one workspace card, and deliberate ownership for
   the school mark, notification, portrait, and mode control.

   Padding bawah hero dan margin negatif kartu "Ruang kerja aktif" adalah
   sepasang angka: jarak nyata antara chip mode dan kartu = padding-bawah
   dikurangi margin negatif. Sebelumnya 46px - 50px = -4px, artinya kartu
   putih benar-benar MENIMPA chip aktif yang juga putih, sehingga keduanya
   terbaca sebagai satu bentuk. Sekarang 56px - 32px = 24px: kartu tetap
   mengambang di atas tepi hero, tetapi chip aktif berdiri sendiri. */
[data-active-portal="guru"] .hero.teacher-hero {
  min-height: 260px;
  padding: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4) var(--sp-9);
}

[data-active-portal="guru"] .hero.teacher-hero::before {
  width: 48px;
  height: 48px;
  top: calc(env(safe-area-inset-top, 0px));
  right: auto;
  bottom: auto;
  left: 59%;
  opacity: .58;
  transform: translate3d(-50%, 0, 0);
  filter: saturate(1.16) brightness(1.32) drop-shadow(0 6px 14px rgba(3, 15, 40, .25));
}

[data-active-portal="guru"] .hero.teacher-hero > .teacher-hero__content {
  min-height: 138px;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: end;
  gap: var(--sp-3);
}

[data-active-portal="guru"] .hero.teacher-hero .teacher-hero__copy {
  min-width: 0;
  padding: 22px 0 13px;
}

[data-active-portal="guru"] .hero.teacher-hero .teacher-hero__copy h1 {
  max-width: 250px;
  font-size: var(--fs-metric-md);
}

[data-active-portal="guru"] .hero.teacher-hero .teacher-hero__portrait {
  min-width: 0;
  height: 138px;
  position: relative;
  align-self: end;
  padding-top: 38px;
}

/* Lonceng beranda. Ukuran dan bentuknya diambil dari token bersama
   (--bell-size / --bell-radius di assets/css/tokens.css), bukan ditulis
   sebagai angka di sini. Dulu baris ini mengunci 40px dan radius 13px,
   dan selama angka itu ada ia menang atas token — itulah sebabnya
   lonceng Portal Guru tidak pernah sebentuk dengan portal lain. */
[data-active-portal="guru"] .hero.teacher-hero .teacher-hero__portrait .round-btn {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  border-radius: var(--bell-radius);
}

/* PENANDA BELUM DIBACA ADALAH PSEUDO-ELEMENT, BUKAN ANAK KEDUA.
   Baku topbar portal mewajibkan tombol bundar berisi TEPAT SATU anak,
   yaitu ikonnya; anak kedua membuat tinggi tombol berbeda antar portal.
   Dulu titik kuning di sini berupa span.notif-dot sebagai anak kedua.
   Sekarang titik yang sama digambar ::after dan dinyalakan atribut
   data-unread, persis seperti Portal Wali dan Portal Pimpinan. Rupanya
   tidak berubah, dan jumlah yang belum dibaca tetap dibacakan pembaca
   layar lewat aria-label tombolnya. */
[data-active-portal="guru"] .hero.teacher-hero .teacher-hero__portrait .round-btn[data-unread]::after {
  content: "";
  width: 9px;
  height: 9px;
  position: absolute;
  top: var(--sp-2);
  right: 9px;
  border: 2px solid #2A4784;
  border-radius: 50%;
  background: #FFCD4D;
}

[data-active-portal="guru"] .hero.teacher-hero img.teacher-hero__avatar {
  width: 112px;
  height: 126px;
  margin: 0;
  position: absolute;
  right: 0;
  bottom: 0;
  border-radius: 52px 52px 20px 20px;
}

[data-active-portal="guru"] .hero.teacher-hero > .teacher-mode-switcher {
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  gap: var(--sp-2);
}

[data-active-portal="guru"] .hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip {
  min-height: 34px;
  padding: 5px 11px;
  color: rgba(255, 255, 255, .96);
  background: rgba(255, 255, 255, .16);
  border-color: rgba(255, 255, 255, .29);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

[data-active-portal="guru"] .hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip.active,
[data-active-portal="guru"] .hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip[aria-pressed="true"] {
  color: var(--indigo);
  background: #fff;
  border-color: #fff;
  box-shadow: 0 4px 12px rgba(3, 15, 40, .18);
}

/* Lihat catatan pada .hero.teacher-hero: -32px berpasangan dengan
   padding-bawah hero var(--sp-9), menyisakan jarak nyata var(--sp-6)
   antara chip mode aktif dan tepi atas kartu ini. */
[data-active-portal="guru"] .family-strip.teacher-profile-card {
  margin: calc(-1 * var(--sp-7)) var(--sp-4) 0;
  padding: var(--sp-4);
  box-shadow: var(--shadow);
}

[data-active-portal="guru"] .teacher-workspace-card__head {
  min-height: 54px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

[data-active-portal="guru"] .teacher-workspace-card__head > div { min-width: 0; }
[data-active-portal="guru"] .teacher-workspace-card__eyebrow { margin-bottom: 3px; color: var(--emerald-dark); font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
[data-active-portal="guru"] .teacher-workspace-card__head .status { flex: none; margin-top: 2px; }

@media (max-width: 360px) {
  [data-active-portal="guru"] .teacher-certification-card__facts { grid-template-columns: 1fr; }
  [data-active-portal="guru"] .teacher-progress-steps { gap: var(--sp-1); }
  [data-active-portal="guru"] .teacher-progress-steps li { min-height: 62px; font-size: var(--fs-caption); }
  [data-active-portal="guru"] .teacher-attendance-action { font-size: var(--fs-caption); }
  [data-active-portal="guru"] .teacher-version-grid { grid-template-columns: 1fr; }
  [data-active-portal="guru"] .hero.teacher-hero::before { right: 128px; }
  [data-active-portal="guru"] .hero.teacher-hero > .teacher-hero__content { grid-template-columns: minmax(0, 1fr) 102px; }
  [data-active-portal="guru"] .hero.teacher-hero img.teacher-hero__avatar { width: 102px; height: 116px; }
}

/* Keep compact summary cards informative rather than turning three simple
   metrics into a long, vertically repetitive stack on narrow phones. */
@media (max-width: 330px) {
  [data-active-portal="guru"] .teacher-profile-card > .teacher-summary-grid,
  [data-active-portal="guru"] .teacher-class-card > .teacher-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  [data-active-portal="guru"] .hero.teacher-hero::before { display: none; }
  [data-active-portal="guru"] .hero.teacher-hero > .teacher-hero__content { grid-template-columns: minmax(0, 1fr) 90px; }
  [data-active-portal="guru"] .hero.teacher-hero img.teacher-hero__avatar { width: 90px; height: 108px; }
}

@media (forced-colors: active) {
  .teacher-hero,
  .teacher-mode-chip.active,
  .teacher-attendance-cell.active,
  .teacher-choice.active,
  .teacher-check.checked {
    border: 2px solid CanvasText;
  }

  .teacher-progress-track > span { background: Highlight; }
}

/* =====================================================================
   Kepala halaman — mengikuti STANDAR TOPBAR PORTAL
   ---------------------------------------------------------------------
   Standarnya dirancang di Portal Staf dan tertulis lengkap di puncak
   assets/css/portal-staff.css. Di sini prefiks [data-active-portal="staf"]
   diganti "guru" dan prefiks class staff- diganti teacher-. Seluruh angka
   berasal dari tokens.css.

   Yang berubah dari versi lama Portal Guru:
   - judul tunggal 18px tanpa konteks -> eyebrow KONTEKS + judul LAYAR;
   - bobot judul 800 -> 700, karena 800 pada judul pendek terbaca berat;
   - aksi kanan yang berupa kotak bergaris atau pil berteks "Baca semua"
     -> tombol bundar 44px berisi ikon, sekeluarga dengan tombol lonceng
     di beranda.
   ===================================================================== */
html[data-active-portal="guru"] .teacher-topbar {
  gap: var(--sp-3);
  min-height: 76px;
  align-items: center;
  padding-block: calc(var(--sp-4) + env(safe-area-inset-top, 0px)) var(--sp-4);
  padding-inline: var(--d-page-pad);
  border-bottom: 1px solid rgba(231, 227, 217, .82);
}

/* Pada route akar slot kembali disembunyikan penuh — bukan dibiarkan
   kosong — supaya judul rata dengan tepi kartu pertama. */
html[data-active-portal="guru"] .teacher-topbar .teacher-back-placeholder {
  display: none;
}

html[data-active-portal="guru"] .teacher-topbar__titles {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

html[data-active-portal="guru"] .teacher-topbar__eyebrow {
  margin: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

html[data-active-portal="guru"] .teacher-topbar__title {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-bold);
  letter-spacing: -.02em;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

@media (min-width: 480px) {
  html[data-active-portal="guru"] .teacher-topbar__title { font-size: var(--fs-title); }
}

/* Tombol kembali dan tombol aksi adalah satu keluarga bentuk dengan
   lonceng. Ukuran dan radiusnya diambil dari --bell-size/--bell-radius,
   bukan ditulis ulang di sini; perbedaannya hanya warna isian. */
html[data-active-portal="guru"] .teacher-topbar__back {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  padding: 0;
  flex: none;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #fff;
  border: 1px solid rgba(231, 227, 217, .94);
  border-radius: var(--bell-radius);
  box-shadow: var(--elev-1);
  cursor: pointer;
}

html[data-active-portal="guru"] .teacher-topbar__back:active { background: #f4f2ec; }

/* .top-action pada shell bersama adalah kotak 44px bergaris. Di sini ia
   hanya pembungkus tanpa rupa; yang terlihat adalah tombol bundar. */
html[data-active-portal="guru"] .teacher-topbar .top-action {
  width: auto;
  height: auto;
  min-height: var(--touch-min);
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 0;
  background: transparent;
  box-shadow: none;
}

html[data-active-portal="guru"] .teacher-topbar .top-action:empty { display: none; }

html[data-active-portal="guru"] .teacher-round-action {
  width: var(--bell-size);
  min-width: var(--bell-size);
  height: var(--bell-size);
  min-height: var(--bell-size);
  padding: 0;
  flex: none;
  display: inline-grid;
  place-items: center;
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 1px solid #d8e0ef;
  border-radius: var(--bell-radius);
  box-shadow: var(--elev-1);
  cursor: pointer;
}

html[data-active-portal="guru"] .teacher-round-action:active { background: #dfe7f5; }

html[data-active-portal="guru"] .teacher-topbar :is(.teacher-topbar__back, .teacher-round-action):focus-visible {
  outline: 3px solid rgba(35, 91, 174, .35);
  outline-offset: 2px;
}

/* Ikon di dalam tombol: 22px pada aksi, 20px pada tombol kembali. */
html[data-active-portal="guru"] .teacher-round-action .custom-icon {
  width: 22px;
  height: 22px;
}

html[data-active-portal="guru"] .teacher-topbar__back .custom-icon {
  width: 20px;
  height: 20px;
}

/* Jarak kepala halaman ke kartu pertama. */
html[data-active-portal="guru"] .teacher-topbar + .page-pad,
html[data-active-portal="guru"] .teacher-topbar + .page-hero {
  padding-top: var(--sp-5);
}

/* Blok yang dulu memaksa lonceng beranda menjadi 44px dengan angka mentah
   sudah dihapus: ukurannya kini datang dari --bell-size pada aturan
   .teacher-hero__portrait .round-btn di atas, satu sumber saja. */

html[data-active-portal="guru"] .hero.teacher-hero > .teacher-mode-switcher .teacher-mode-chip {
  min-height: 44px;
}

/* =====================================================================
   Lapisan token Portal Guru
   ---------------------------------------------------------------------
   Bagian ini memindahkan keputusan tampilan yang sebelumnya ditulis
   sebagai atribut style di JavaScript menjadi class, dan mengunci
   ukuran teks minimum pada --fs-caption (12px) sesuai kontrak audit.
   ===================================================================== */

/* ---------- Aset ikon ----------------------------------------------
   Sebelumnya setiap ikon membawa style="--icon-asset:url(...)" dari JS.
   Peta di bawah membuat berkas ikon menjadi urusan CSS, dan markup cukup
   menyebut data-icon. */

[data-active-portal="guru"] .custom-icon[data-icon="home"] { --icon-asset: url("/presentasi/storage/icons/home.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="tasks"] { --icon-asset: url("/presentasi/storage/icons/tasks.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="agenda"] { --icon-asset: url("/presentasi/storage/icons/agenda.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="profile"] { --icon-asset: url("/presentasi/storage/icons/profile.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="notifications"] { --icon-asset: url("/presentasi/storage/icons/notifications.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="school"] { --icon-asset: url("/presentasi/storage/icons/school.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="teacher-classes"] { --icon-asset: url("/presentasi/storage/icons/teacher-classes.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="attendance"] { --icon-asset: url("/presentasi/storage/icons/attendance.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="news"] { --icon-asset: url("/presentasi/storage/icons/news.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="growth"] { --icon-asset: url("/presentasi/storage/icons/growth.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="messages"] { --icon-asset: url("/presentasi/storage/icons/messages.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="activities"] { --icon-asset: url("/presentasi/storage/icons/activities.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="hub"] { --icon-asset: url("/presentasi/storage/icons/hub.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="receipt"] { --icon-asset: url("/presentasi/storage/icons/receipt.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="documents"] { --icon-asset: url("/presentasi/storage/icons/documents.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="success"] { --icon-asset: url("/presentasi/storage/icons/success.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="info"] { --icon-asset: url("/presentasi/storage/icons/info.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="back"] { --icon-asset: url("/presentasi/storage/icons/back.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="next"] { --icon-asset: url("/presentasi/storage/icons/next.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="close"] { --icon-asset: url("/presentasi/storage/icons/close.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="upload"] { --icon-asset: url("/presentasi/storage/icons/upload.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="settings"] { --icon-asset: url("/presentasi/storage/icons/settings.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="add"] { --icon-asset: url("/presentasi/storage/icons/add.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="share"] { --icon-asset: url("/presentasi/storage/icons/share.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="download"] { --icon-asset: url("/presentasi/storage/icons/download.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="camera"] { --icon-asset: url("/presentasi/storage/icons/camera.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="announcement"] { --icon-asset: url("/presentasi/storage/icons/announcement.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="help"] { --icon-asset: url("/presentasi/storage/icons/help.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="search"] { --icon-asset: url("/presentasi/storage/icons/search.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="privacy"] { --icon-asset: url("/presentasi/storage/icons/privacy.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="teacher-portfolio"] { --icon-asset: url("/presentasi/storage/icons/teacher-portfolio.webp?v=20260802"); }
[data-active-portal="guru"] .custom-icon[data-icon="teacher-appraisal"] { --icon-asset: url("/presentasi/storage/icons/teacher-appraisal.webp?v=20260802"); }
/* Ikon netral (siluet tanpa gender) untuk Profil Pegawai; ikon figur
   berhijab tidak dipakai untuk orang yang bukan perempuan berhijab. */
[data-active-portal="guru"] .custom-icon[data-icon="leadership-account"] { --icon-asset: url("/presentasi/storage/icons/leadership-account.webp?v=20260802"); }

/* ---------- Progress: lebar sebagai class, bukan style inline ------- */
[data-active-portal="guru"] .teacher-progress > span { width: 0; }
[data-active-portal="guru"] .teacher-progress--45 > span { width: 45%; }
[data-active-portal="guru"] .teacher-progress--68 > span { width: 68%; }
[data-active-portal="guru"] .teacher-progress--70 > span { width: 70%; }
[data-active-portal="guru"] .teacher-progress--72 > span { width: 72%; }
[data-active-portal="guru"] .teacher-progress--78 > span { width: 78%; }
[data-active-portal="guru"] .teacher-progress--85 > span { width: 85%; }
[data-active-portal="guru"] .teacher-progress--90 > span { width: 90%; }
[data-active-portal="guru"] .teacher-progress--95 > span { width: 95%; }

/* ---------- Jarak vertikal ------------------------------------------ */
[data-active-portal="guru"] .teacher-section--spaced { margin-top: var(--sp-5); }
[data-active-portal="guru"] .teacher-section--tight { margin-top: var(--sp-4); }
[data-active-portal="guru"] .teacher-cta--spaced { margin-top: var(--sp-4); }

/* =====================================================================
   Jarak antar-blok halaman — mengikuti STANDAR JARAK ANTAR-BLOK HALAMAN
   (puncak assets/css/portal-staff.css)
   ---------------------------------------------------------------------
   Pada shell bersama HANYA .section yang punya margin-bottom. Blok lain
   — .card, .notice, .btn-row, .chips, .segmented, .search-box, banner —
   tidak punya jarak sama sekali. Begitu salah satunya diikuti section,
   jaraknya nol atau nyaris nol dan keduanya terbaca menyatu. Ini akar
   yang sama di seluruh portal, jadi diperbaiki sekali di KONTAINER
   halaman, bukan ditambal per layar.

   Ritme yang berlaku setelah ini:
     blok    -> blok            var(--sp-5)                 20px
     blok    -> judul section   var(--sp-5) + var(--sp-3)   32px
     section -> section         var(--d-section-gap)        40px
   Jarak section -> section digenapkan elemen .sec-divider yang
   disisipkan render() di antara dua <section> bertetangga (lihat blok
   RITME SECTION OPSI B di ujung berkas): dua gap kontainer ditambah
   tinggi divider = var(--d-section-gap).

   .content ikut ditata di sini karena beranda Guru memakai kontainer
   itu (bukan .page-pad) untuk keempat section-nya. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--sp-5);
}

/* Margin lama dinolkan supaya jaraknya hanya punya SATU sumber: gap. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) > .section { margin-bottom: 0; }

[data-active-portal="guru"] .screen > :is(.page-pad, .content) > :is(.teacher-section--spaced, .teacher-section--tight, .teacher-cta--spaced) {
  margin-top: 0;
}

/* Batas "blok selesai, bagian baru dimulai" butuh lebih banyak udara
   daripada jarak antar dua blok biasa. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) > :not(.section) + .section {
  margin-top: var(--sp-3);
}

/* Beranda menutup dengan .content yang padding bawahnya 0 dari shell
   bersama. Margin section terakhir baru saja dinolkan, jadi tanpa
   baris ini kaki halaman hanya berjarak padding-top-nya sendiri (20px)
   dari section terakhir. Padding bawah menggenapkannya ke ritme 40px. */
[data-active-portal="guru"] .screen > .content { padding-bottom: var(--sp-5); }
[data-active-portal="guru"] .teacher-note-title { margin-top: var(--sp-2); }

/* ---------- Warna aksen yang dulu ditulis inline -------------------- */
[data-active-portal="guru"] .teacher-eyebrow--muted { color: var(--muted); }
[data-active-portal="guru"] .teacher-fact--good { color: var(--emerald-dark); }
[data-active-portal="guru"] .teacher-insight-cta {
  margin-top: var(--sp-2);
  color: #fff;
}

/* ---------- Kehadiran: satu kartu per siswa ------------------------- */
[data-active-portal="guru"] .teacher-attendance-grid--single {
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}

[data-active-portal="guru"] .teacher-attendance-flag {
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: flex-start;
}

/* =====================================================================
   Baris status kehadiran — satu baris, lima chip
   ---------------------------------------------------------------------
   AKAR MASALAH yang diperbaiki di sini.

   .teacher-attendance-cell (kartu ringkas tiga kolom) memasang
   `place-items: center`. Kartu siswa memakai class yang sama lalu
   menimpa `display` menjadi block, tetapi `justify-items: center`
   tetap tertinggal. Chrome menerapkan justify-self pada kotak block,
   sehingga baris chip diukur fit-content — lebarnya menyusut ke
   88px. Di lebar sesempit itu `repeat(auto-fit, minmax(88px, 1fr))`
   hanya sanggup membentuk SATU kolom, dan kelima tombol menumpuk ke
   bawah: ±330px per siswa, ±10.900px untuk 30 siswa.

   Dua hal yang menyembuhkannya:
   1. kartu siswa berhenti memusatkan anaknya (place-items: stretch);
   2. barisnya dikunci lima kolom sama lebar — bukan auto-fit, yang
      selalu bisa runtuh lagi ketika ruangnya sempit.

   Bentuk akhirnya satu track tersegmentasi: chip rapat di dalam alas
   pasir, sehingga terbaca sebagai SATU kontrol "pilih satu" dan bukan
   lima tombol yang kebetulan berjajar. Label "Terlambat" dipendekkan
   menjadi "Telat" (nama penuh tetap dibawa aria-label) agar lima chip
   muat pada lebar 390 tanpa menurunkan ukuran teks di bawah 12px.
   ===================================================================== */
[data-active-portal="guru"] .teacher-attendance-student {
  place-items: stretch;
}

[data-active-portal="guru"] .teacher-attendance-statuses {
  width: 100%;
  justify-self: stretch;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

[data-active-portal="guru"] .teacher-attendance-action {
  /* Lapisan dasar (.teacher-attendance-action) adalah tombol ikon 34x34
     untuk tabel kehadiran. Di kartu siswa ia harus melar mengisi kolom. */
  width: 100%;
  height: auto;
  min-height: var(--touch-min);
  padding: var(--sp-1) 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-1);
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  box-shadow: none;
}

[data-active-portal="guru"] .teacher-attendance-action:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, .6);
}

/* Chip terpilih dibedakan oleh EMPAT hal sekaligus — alas putih yang
   terangkat, garis tepi, bobot huruf, dan tanda centang — sehingga
   statusnya tetap terbaca tanpa mengandalkan warna. */
[data-active-portal="guru"] .teacher-attendance-action.active,
[data-active-portal="guru"] .teacher-attendance-action[aria-pressed="true"] {
  color: var(--ink);
  background: #fff;
  border-color: rgba(36, 59, 114, .22);
  font-weight: var(--fw-heavy);
  box-shadow: var(--elev-1);
}

/* Centang digambar dari dua sisi kotak 5x9 lalu diputar 45 derajat.
   Perputaran itu melebarkan kotak pembatasnya menjadi ~10x10, sehingga
   gap var(--sp-1) termakan habis dan glif menempel pada huruf pertama.
   Jaraknya dinaikkan satu langkah supaya centang dan label tetap
   terbaca sebagai dua hal; lebar chip 61px masih cukup menampungnya. */
[data-active-portal="guru"] .teacher-attendance-action[aria-pressed="true"] {
  gap: var(--sp-2);
}

[data-active-portal="guru"] .teacher-attendance-action[aria-pressed="true"]::before {
  content: "";
  width: 5px;
  height: 9px;
  flex: none;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

/* Warna adalah lapisan KEDUA di atas penanda bentuk, bukan penanda tunggal. */
[data-active-portal="guru"] .teacher-attendance-action--hadir[aria-pressed="true"] { color: var(--emerald-dark); border-color: #a8d5c6; }
[data-active-portal="guru"] .teacher-attendance-action--terlambat[aria-pressed="true"] { color: var(--gold-dark); border-color: #e2c87f; }
[data-active-portal="guru"] .teacher-attendance-action--izin[aria-pressed="true"],
[data-active-portal="guru"] .teacher-attendance-action--sakit[aria-pressed="true"] { color: var(--indigo); border-color: #aab8da; }
[data-active-portal="guru"] .teacher-attendance-action--absen[aria-pressed="true"] { color: var(--danger); border-color: #e3adb8; }

/* ---------- Stepper dan fakta sertifikasi --------------------------- */
[data-active-portal="guru"] .teacher-progress-steps {
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="guru"] .teacher-progress-steps li {
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
}

[data-active-portal="guru"] .teacher-progress-steps li::before {
  width: 18px;
  height: 18px;
  font-size: var(--fs-caption);
}

/* Tiga fakta, dua kolom. Dengan auto-fit fakta ketiga tertinggal
   sendirian selebar setengah baris dan barisnya terlihat pincang;
   dikunci dua kolom lalu fakta ganjil terakhir melebar penuh. Gap 12px
   (bukan 8px) karena ketiga kotak berlatar sama persis (#faf8f3) — tanpa
   jarak penuh, baris pertama dan baris "Verifikasi" di bawahnya terbaca
   sebagai satu permukaan. */
[data-active-portal="guru"] .teacher-certification-card__facts {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

[data-active-portal="guru"] .teacher-certification-card__facts > div:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

[data-active-portal="guru"] .teacher-certification-card__facts dd { font-size: var(--fs-small); }

/* ---------- Ringkasan angka ----------------------------------------- */
[data-active-portal="guru"] .teacher-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
  gap: var(--sp-2);
}

[data-active-portal="guru"] .teacher-summary-grid > :not(.teacher-metric) > span {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

[data-active-portal="guru"] .teacher-empty p { font-size: var(--fs-small); }

/* Kartu pratinjau kondisi layar (Pengaturan → Kondisi Layar) memakai
   .state-card polos (bukan varian .teacher-empty). Kontennya sengaja
   ringkas — satu ikon, satu judul, satu kalimat — sehingga di layar
   pendek sisa ruang di bawah kartu terlihat seperti halaman berhenti
   dimuat. Kartu dibuat lebih lapang (bukan konten dipaksa lebih
   panjang) supaya kelonggarannya terasa disengaja, bukan kosong. */
[data-active-portal="guru"] .state-card:not(.teacher-empty) {
  padding: var(--sp-8) var(--sp-5);
}

[data-active-portal="guru"] .state-card:not(.teacher-empty) .icon-tile {
  width: 72px;
  height: 72px;
  margin-bottom: var(--sp-4);
}

/* ---------- Target sentuh minimum 44px ------------------------------ */
[data-active-portal="guru"] :is(
  .chip,
  .segment,
  .teacher-mode-chip,
  .teacher-attendance-action,
  .teacher-footer-switch,
  .teacher-choice,
  .teacher-composer-action,
  .teacher-schedule-action,
  .teacher-search-clear,
  .teacher-check
) {
  min-height: var(--touch-min);
}

[data-active-portal="guru"] :is(.teacher-composer-action, .teacher-schedule-action, .teacher-search-clear) {
  min-width: var(--touch-min);
}

[data-active-portal="guru"] .teacher-check {
  width: var(--touch-min);
  height: var(--touch-min);
  border-radius: var(--r-md);
}

[data-active-portal="guru"] .section-head > .text-btn,
[data-active-portal="guru"] .list-row .text-btn {
  min-height: var(--touch-min);
  padding-inline: var(--sp-3);
  border-radius: var(--r-sm);
}

[data-active-portal="guru"] .brand-footer.teacher-footer-switch > button {
  min-height: var(--touch-min);
  border-radius: var(--r-md);
  font-size: var(--fs-caption);
}

/* .teacher-portfolio-card TIDAK ikut di sini. Kartu itu sudah punya
   lantai tingginya sendiri (156px); menuliskannya ulang sebagai 44px
   justru MENURUNKAN lantai itu — aturan ini berada lebih belakang di
   berkas sehingga menang, dan kartunya menyusut di bawah isinya. */
[data-active-portal="guru"] .teacher-class-card,
[data-active-portal="guru"] .teacher-roster-row,
[data-active-portal="guru"] .teacher-work-item,
[data-active-portal="guru"] .list-row,
[data-active-portal="guru"] .service-btn {
  min-height: var(--touch-min);
}

/* =====================================================================
   Kartu bukti karya — berhenti memotong barisnya sendiri
   ---------------------------------------------------------------------
   <button> pada Chrome membungkus isinya dalam kotak anonim yang tidak
   menyumbang tinggi intrinsik seperti kotak block biasa. Akibatnya kartu
   ini diukur lebih pendek daripada isinya (125px untuk isi 134px), lalu
   `overflow: hidden` — yang memang diperlukan agar gradasi kepala kartu
   ikut lengkung sudut — memotong baris terakhir keterangan.

   Menjadikan tombol wadah flex kolom membuat tingginya dihitung dari
   kepala + badan, sehingga kartu tumbuh mengikuti keterangan terpanjang
   dan tidak ada teks yang hilang. align-content: start menjaga kepala
   kartu tetap menempel di atas saat baris grid lebih tinggi.
   ===================================================================== */
[data-active-portal="guru"] button.teacher-portfolio-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
}

[data-active-portal="guru"] .teacher-portfolio-card__art { flex: none; }

/* =====================================================================
   Jarak antar-blok DI DALAM section
   ---------------------------------------------------------------------
   STANDAR JARAK ANTAR-BLOK HALAMAN sudah menata anak langsung halaman.
   Satu tingkat lebih dalam akarnya sama: di dalam .section hanya .field
   yang punya margin-bottom. Blok lain — kotak centang sensitif, btn-row —
   tidak punya jarak, sehingga kartu merah "Catatan sensitif/terbatas"
   menempel nol piksel pada label bidang berikutnya dan pada baris tombol
   di layar wawancara; keduanya terbaca sebagai satu bentuk.

   Diperbaiki pada hubungan antar-saudaranya, bukan pada tiap layar, dan
   memakai ritme yang sama dengan .field supaya tidak ada dua sumber jarak.
   ===================================================================== */
[data-active-portal="guru"] .teacher-sensitive + * { margin-top: var(--sp-4); }

/* Keterangan tepat di bawah bilah kemajuan adalah label bilah itu, bukan
   blok baru — 4px membuatnya terbaca menempel, 12px baru terbaca sebagai
   jarak yang disengaja. */
[data-active-portal="guru"] .teacher-progress + .field-help { margin-top: var(--sp-3); }

/* Keterangan di bawah kotak isian (textarea/input/select) yang punya
   permukaan sendiri: tanpa jarak ini tepi kotak mendarat langsung pada
   badan huruf keterangan. Ritme yang sama dengan pola field-help lain. */
[data-active-portal="guru"] .field :is(input, select, textarea) + .field-help { margin-top: var(--sp-2); }

/* =====================================================================
   Kotak unggah di dalam .field — kehilangan susunannya sendiri
   ---------------------------------------------------------------------
   Shell bersama memberi label bidang aturan `.field label { display:block }`.
   Kotak unggah juga sebuah <label>, dan begitu ia berada di dalam field()
   aturan itu — yang lebih spesifik (0,1,1 melawan 0,1,0) — mengalahkan
   `display:flex` miliknya. Susunan kolom berpusatnya hilang, sehingga ikon,
   judul, dan keterangan mengalir menjadi satu paragraf:
   "Tambah bukti bila relevanBukti tidak wajib untuk apresiasi sederhana…".
   Judul dan keterangannya tidak lagi terbaca sebagai dua hal berbeda.

   Susunannya dikembalikan dengan spesifisitas yang cukup, tetap di dalam
   lingkup portal guru supaya portal lain tidak ikut berubah.
   ===================================================================== */
[data-active-portal="guru"] .field label.upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: 0;
}

[data-active-portal="guru"] .upload-zone > strong { font-size: var(--fs-small); }
[data-active-portal="guru"] .upload-zone > .field-help { margin-top: 0; }

/* =====================================================================
   Kartu ruangan & alat — lantai tinggi yang tidak lagi berlaku
   ---------------------------------------------------------------------
   min-height 138px pada .teacher-resource-card dirancang untuk kartu
   petak dua kolom di .teacher-resource-grid, yang tidak pernah dipakai
   Portal Guru. Yang dirender adalah kartu selebar halaman berisi dua
   baris teks, sehingga lantai itu menyisakan ±55px ruang kosong di bawah
   setiap kartu dan halaman terbaca seperti gagal memuat isinya.
   Kartu dikembalikan mengikuti isinya; kartu yang memang punya tombol
   alternatif tetap tumbuh sendiri.
   ===================================================================== */
[data-active-portal="guru"] .card.teacher-resource-card { min-height: 0; }

/* Judul dan keterangan ditulis sebagai <span>, jadi keduanya inline dan
   mengalir dalam satu paragraf: "Perangkat ajarRPP, modul, dan alat
   peraga". margin-top pada elemen inline juga diabaikan, sehingga jarak
   yang dimaksud tidak pernah muncul. Keduanya dijadikan blok. */
[data-active-portal="guru"] .teacher-portfolio-card__body { display: grid; gap: var(--sp-1); }
[data-active-portal="guru"] .teacher-portfolio-card__title,
[data-active-portal="guru"] .teacher-portfolio-card__meta { display: block; margin-top: 0; }

/* ---------- Sisa nilai mentah yang diganti token -------------------- */
[data-active-portal="guru"] .teacher-sheet__sub,
[data-active-portal="guru"] .teacher-mode-banner span:not(.material-symbols-rounded) {
  line-height: var(--lh-normal);
}

[data-active-portal="guru"] .teacher-version-grid label { border-radius: var(--r-md); }

/* Lantai ukuran teks: <small> bawaan peramban adalah 0.83em, sehingga teks
   12px akan turun ke ~10px tanpa aturan eksplisit. Kontrak audit melarangnya. */
[data-active-portal="guru"] small { font-size: var(--fs-caption); }

/* ---------- Kotak centang: kecil dilihat, 44px disentuh --------------
   Sebelumnya kontrol asli dibiarkan 24x24 dengan alasan "area aktivasinya
   label pembungkus". Alasan itu tidak cukup: kontrak produk mengukur
   kontrolnya sendiri, dan pada empat route (character, activity-report,
   interviewer, committee) plus dua lembar ada dua belas kotak centang yang
   berhenti di 24x24. Jari yang meleset beberapa piksel tidak mengaktifkan
   apa pun, dan pada lembar penilaian PPDB kesalahan itu mahal.

   Kotak centangnya sekarang berukuran penuh 44x44, tetapi:

     - border: 10px solid transparent  -> kotak padding tinggal 24x24
     - background-clip: padding-box     -> cat hanya mengisi 24x24 itu
     - box-shadow: inset                -> garis tepi mengikuti kotak padding
     - margin: -10px                    -> jejak tata letak kembali 24x24

   Jadi yang terlihat tetap kotak 24px pada posisi yang sama persis seperti
   sebelumnya, sementara yang tersentuh 44x44. Karena appearance:none
   mematikan gambar bawaan peramban, centangnya digambar ulang sebagai satu
   background-image putih yang dipakai bersama semua warna. */
[data-active-portal="guru"] :is(.teacher-version-grid, .teacher-sensitive, .teacher-checklist, .card.list-card) label {
  min-height: var(--touch-min);
}

[data-active-portal="guru"] .teacher-version-grid input[type="checkbox"],
[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"],
[data-active-portal="guru"] .teacher-checklist input[type="checkbox"],
[data-active-portal="guru"] .card.list-card label > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  flex: none;
  width: var(--touch-min);
  height: var(--touch-min);
  margin: -10px;
  padding: 0;
  border: 10px solid transparent;
  border-radius: 17px;                 /* luar 17 - tebal 10 = dalam 7 */
  background-color: #fff;
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  /* --line (#E7E3D9) hanya 1,2:1 terhadap putih: kotak yang belum dicentang
     praktis tidak terlihat. Batas kontrol non-teks minimal 3:1, jadi
     garisnya memakai --muted (4,9:1). */
  box-shadow: inset 0 0 0 2px var(--muted);
  cursor: pointer;
  transition: background-color var(--motion-fast, .16s) ease, box-shadow var(--motion-fast, .16s) ease;
}

/* Setiap aturan keadaan mengulang KEEMPAT pemilih dasar, tidak memakai
   :is() atau :where() yang lebih ringkas. Alasannya kekhususan: pemilih
   dasar ".card.list-card label > input[type=checkbox]" bernilai (0,4,2),
   jauh di atas bentuk berkelompok, sehingga background putihnya sempat
   mengalahkan warna tercentang — kotak centang pada lembar "bukti
   penilaian" tampil kosong padahal atributnya checked. Mengulang pemilih
   membuat setiap aturan keadaan selalu satu tingkat di atas dasarnya. */
[data-active-portal="guru"] .teacher-version-grid input[type="checkbox"]:checked,
[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"]:checked,
[data-active-portal="guru"] .teacher-checklist input[type="checkbox"]:checked,
[data-active-portal="guru"] .card.list-card label > input[type="checkbox"]:checked {
  background-color: var(--indigo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='M5 12.4l4.6 4.6L19 7.4'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 2px var(--indigo);
}

/* Kotak "catatan sensitif" tetap memakai warna bahaya: di sini merah memang
   berarti pembatasan akses, bukan sekadar penghitung. */
[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"] {
  margin-top: -8px;                    /* -10px + offset 2px yang lama */
}

[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"]:checked {
  background-color: var(--danger);
  box-shadow: inset 0 0 0 2px var(--danger);
}

/* Versi laporan yang wajib terbit (mis. "Sekolah") dikunci, bukan dihapus:
   guru tetap melihat bahwa versi itu ada. */
[data-active-portal="guru"] .teacher-version-grid input[type="checkbox"]:disabled,
[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"]:disabled,
[data-active-portal="guru"] .teacher-checklist input[type="checkbox"]:disabled,
[data-active-portal="guru"] .card.list-card label > input[type="checkbox"]:disabled {
  background-color: var(--muted);
  box-shadow: inset 0 0 0 2px var(--muted);
  cursor: default;
  opacity: .65;
}

/* Cincin fokus mengikuti kotak yang TERLIHAT, bukan kotak sentuh 44px —
   kalau tidak, cincin 48px akan menabrak tetangganya. */
[data-active-portal="guru"] .teacher-version-grid input[type="checkbox"]:focus-visible,
[data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"]:focus-visible,
[data-active-portal="guru"] .teacher-checklist input[type="checkbox"]:focus-visible,
[data-active-portal="guru"] .card.list-card label > input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(215, 165, 46, .55);
  outline-offset: -8px;
}

@media (prefers-reduced-motion: reduce) {
  [data-active-portal="guru"] .teacher-version-grid input[type="checkbox"],
  [data-active-portal="guru"] .teacher-sensitive > input[type="checkbox"],
  [data-active-portal="guru"] .teacher-checklist input[type="checkbox"],
  [data-active-portal="guru"] .card.list-card label > input[type="checkbox"] {
    transition: none;
  }
}

/* ---------- Lencana penghitung ---------------------------------------
   Cacat yang sama dengan yang dikeluhkan pemilik produk di Portal Wali:
   lingkaran merah berisi angka telanjang. Merah disimpan untuk yang benar
   benar mendesak; penghitung memakai kertas tenang dan membawa katanya
   sendiri ("5 tugas"), sehingga lebarnya mengikuti isi.

   Portal Wali menggerbangi aturannya dengan [data-active-portal="wali"]
   justru supaya rupa Portal Guru tidak berubah diam-diam; giliran portal
   ini yang menentukan rupanya sendiri, dengan bentuk yang sama supaya
   kedua portal terbaca satu keluarga. */
[data-active-portal="guru"] .count-badge {
  min-width: auto;
  padding: var(--sp-1) var(--sp-3);
  color: var(--ink);
  background: var(--sand);
  border: 1px solid var(--line);
  white-space: nowrap;
}

/* Lencana kecil pada baris daftar sekarang berisi kata, jadi ia tidak lagi
   dipaksa menjadi lingkaran 20px. */
[data-active-portal="guru"] .list-row > .mini-badge {
  position: static;
  flex: none;
  width: auto;
  min-width: auto;
  height: auto;
  min-height: 24px;
  margin-left: auto;
  padding: var(--sp-1) 10px;
  color: var(--indigo);
  background: var(--indigo-soft);
  border: 1px solid #c8d2e6;
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  line-height: 1.3;
  white-space: nowrap;
}

/* Lencana sudut pada ubin layanan tetap berupa lingkaran — di sana tidak ada
   ruang untuk kata, dan katanya dibawa aria-label tombol induknya. Warnanya
   diturunkan ke biru tenang karena isinya menghitung, bukan memperingatkan. */
[data-active-portal="guru"] .service-icon > .mini-badge {
  color: #fff;
  background: var(--indigo);
}

/* ---------- Avatar inisial netral pada navigasi bawah ----------------
   Tombol "Akun" milik Ustadz Faisal memakai lingkaran berhuruf, bukan
   ikon figur bergender. Ukurannya mengisi slot ikon nav 28px dan warnanya
   mengikuti keadaan tombol (redup/aktif), sama seperti ikon lain. */
[data-active-portal="guru"] .teacher-bottom-nav .teacher-nav-avatar {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

/* ---------- Figur berlabel pada banner mode ---------------------------
   Foto orang di banner wawancara membawa keterangan namanya sendiri,
   sehingga tidak lagi tertukar dengan calon siswa yang disebut judul. */
[data-active-portal="guru"] .teacher-banner-person {
  max-width: 96px;
  margin: 0;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Foto adalah permukaan, keterangan hanya huruf: pasangan kartu-ke-teks
     butuh jarak terlihat 12px. Dengan --sp-1 tinta foto dan tinta huruf
     hanya berjarak ±3px dan terbaca menempel; --sp-4 memberi jarak tinta
     ±15px, satu tangga token di atas ambang. */
  gap: var(--sp-4);
  position: relative;
  z-index: 1;
}

[data-active-portal="guru"] .teacher-banner-person > figcaption {
  color: var(--text);
  font-size: var(--fs-caption);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}

/* ---------- Teks yang tidak boleh patah di tengah --------------------
   Alamat email dijaga utuh satu baris; patah "ibnuhajar. sch.id"
   membuatnya terbaca seperti dua alamat. Pada kartu profil 390px alamat
   penuh tidak muat di samping chip status dan menindihnya, jadi alamat
   dibelah dua span nowrap dengan <wbr> tepat sebelum "@": satu-satunya
   titik patah yang tetap terbaca sebagai satu alamat. */
[data-active-portal="guru"] .teacher-nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* ---------- Ringkasan empat sel: dua kolom seimbang ------------------
   Empat angka pada ringkasan Absensi dibagi 2x2, bukan 3+1 yang timpang.
   Sel genap menutup garis pembatas kanannya karena berada di tepi baris. */
[data-active-portal="guru"] .teacher-summary-grid--pairs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  row-gap: var(--sp-3);
}

[data-active-portal="guru"] .teacher-summary-grid--pairs > :nth-child(2n) {
  border-right: 0;
}

/* ---------- Kartu QR siswa -------------------------------------------
   Kotak QR-nya gambar pengganti (bukan kode sungguhan); token dan
   kalimat privasinya yang menjadi isi sebenarnya. */
[data-active-portal="guru"] .teacher-qr {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

[data-active-portal="guru"] .teacher-qr__art {
  width: 92px;
  height: 92px;
  flex: none;
  padding: var(--sp-2);
  display: block;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}

[data-active-portal="guru"] .teacher-qr__body { min-width: 0; flex: 1; }

[data-active-portal="guru"] .teacher-qr__token {
  color: var(--ink);
  font-size: var(--fs-subhead);
  font-weight: 800;
  letter-spacing: .05em;
}

[data-active-portal="guru"] .teacher-qr__note {
  margin: var(--sp-1) 0 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.5;
}

/* ---------- Nilai contoh yang panjang boleh turun baris --------------
   Textarea dua baris menggantikan input satu baris yang memotong contoh
   pada Catatan Pembelajaran dan Pelatihan; tinggi bawaannya dilonggarkan
   supaya atribut rows yang menentukan. */
[data-active-portal="guru"] textarea.teacher-input--wrap {
  min-height: 0;
  resize: none;
}

/* =====================================================================
   RITME SECTION OPSI B — anatomi header dan divider bermerek
   ---------------------------------------------------------------------
   Token --sec-head-gap dan warna --kick-* datang dari tokens.css dan
   hanya DIPAKAI lewat var() di sini. Seluruh aturan digerbangi
   [data-active-portal="guru"] karena .section-title, .section-head, dan
   kontainer halaman dipakai juga oleh portal lain.
   ===================================================================== */

/* Blok judul -> konten memakai token bersama, bukan angka lokal. */
[data-active-portal="guru"] .section-head { margin-bottom: var(--sec-head-gap); }

/* Judul section: sudah 18px dari aturan dasarnya di shell bersama,
   di sini hanya dinaikkan bobot dan dirapatkan jarak hurufnya. */
[data-active-portal="guru"] .section-title {
  font-weight: var(--fw-heavy);
  letter-spacing: -.012em;
}

/* Bar aksen 14x3px pil di atas judul. Pseudo ::before pada
   .section-title belum dipakai selektor mana pun di berkas ini,
   diperiksa dengan grep sebelum diklaim. */
[data-active-portal="guru"] .section-title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo);
}

/* Bila section punya kicker, bar pindah menempel di kiri kicker;
   bar bawaan judul dipadamkan supaya tidak dobel. */
[data-active-portal="guru"] .sec-kicker + .section-title::before { display: none; }

[data-active-portal="guru"] .sec-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}

[data-active-portal="guru"] .sec-kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}

[data-active-portal="guru"] .sec-kicker.kick-indigo { color: var(--kick-indigo); }
[data-active-portal="guru"] .sec-kicker.kick-emerald { color: var(--kick-emerald); }
[data-active-portal="guru"] .sec-kicker.kick-gold { color: var(--kick-gold); }
[data-active-portal="guru"] .sec-kicker.kick-terra { color: var(--kick-terra); }

/* ---- Divider bermerek antar section level halaman -------------------
   Section Guru memakai .list-card ber-overflow:hidden, sehingga pseudo
   bertop negatif pada section berikutnya akan terpangkas. Karena itu
   dipakai jalur injeksi elemen .sec-divider (pola cadangan yang
   diizinkan spesifikasi) lewat loop kecil di render() portal-teacher.js
   — pola yang sama dengan Portal Wali.

   Elemen dititipkan di antara dua <section> sebagai baris grid.
   Tingginya calc di bawah: dua gap kontainer (2 x 20px) ditambah tinggi
   elemen genap var(--d-section-gap), jadi divider TIDAK menambah tinggi
   di luar jarak section yang memang dituju. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) > .sec-divider {
  position: relative;
  height: calc(var(--d-section-gap) - 2 * var(--sp-5));
  pointer-events: none;
}

/* Menetralkan aturan "blok bukan section -> section" di atas supaya
   jarak tidak membengkak 12px setelah divider disisipkan. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) > .sec-divider + .section { margin-top: 0; }

[data-active-portal="guru"] .screen > :is(.page-pad, .content) > .sec-divider::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 84%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
}

/* Piring bulat berwarna kanvas memutus garis; mark 13px di atasnya.
   Keredupan .55 pada mark ditiru lewat lapisan cuci warna kanvas 45%
   supaya piringnya sendiri tetap pekat menutup garis. */
[data-active-portal="guru"] .screen > :is(.page-pad, .content) > .sec-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    linear-gradient(rgba(252, 251, 247, .45), rgba(252, 251, 247, .45)),
    url(/presentasi/storage/brand/akselerasync-mark-1x1.webp?v=20260802h) center / 13px 13px no-repeat,
    var(--canvas);
  filter: grayscale(1);
}