/*
 * QathApp — komponen & layout. Ukuran dan warna mengikuti Figma "Qath App — UI Batch 1".
 * Hanya memakai token dari tokens.css. Tidak ada style inline (CSP style-src 'self').
 */

/* ---------- Reset & dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font: var(--text-body);
  color: var(--color-text-primary);
  background: var(--color-bg-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--color-text-brand); text-decoration-thickness: 1px; text-underline-offset: 2px; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }

:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
  background: var(--color-bg-brand); color: var(--color-text-on-brand); font: var(--text-body-strong);
}
.skip-link:focus { top: var(--space-4); }

/* ---------- Tipografi ---------- */
.t-display  { font: var(--text-display); letter-spacing: var(--tracking-display); }
.t-h1       { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
.t-h2       { font: var(--text-h2); letter-spacing: var(--tracking-h2); }
.t-h3       { font: var(--text-h3); }
.t-title    { font: var(--text-title); }
.t-body     { font: var(--text-body); }
.t-body-medium { font: var(--text-body-medium); }
.t-body-strong { font: var(--text-body-strong); }
.t-small    { font: var(--text-small); }
.t-small-strong { font: var(--text-small-strong); }
.t-caption  { font: var(--text-caption); }
.t-overline { font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; }
.t-numeric  { font: var(--text-numeric); letter-spacing: var(--tracking-numeric); font-variant-numeric: tabular-nums; }
.text-secondary { color: var(--color-text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-text-brand); }
.text-danger { color: var(--color-text-danger); }

/* ---------- Ikon ---------- */
.icon { width: 20px; height: 20px; flex: none; color: currentColor; }
.icon--16 { width: 16px; height: 16px; }
.icon--18 { width: 18px; height: 18px; }
.icon--22 { width: 22px; height: 22px; }
.icon--24 { width: 24px; height: 24px; }
.icon--32 { width: 32px; height: 32px; }

/* ---------- Tombol (Button / Button SM) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: var(--text-body-strong); text-decoration: none; white-space: nowrap;
  background: var(--color-bg-brand); color: var(--color-text-on-brand);
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:hover { background: var(--color-bg-brand-hover); }
.btn:active { background: var(--color-bg-brand-pressed); }

.btn--secondary { background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.btn--secondary:hover { background: var(--color-bg-brand-soft-hover); }
.btn--secondary:active { background: var(--color-bg-brand-soft-hover); border-color: var(--color-border-brand); }

.btn--outline { background: var(--color-bg-surface); color: var(--color-text-primary); border-color: var(--color-border-strong); }
.btn--outline:hover { background: var(--color-bg-subtle); }
.btn--outline:active { background: var(--color-bg-muted); }

.btn--ghost { background: transparent; color: var(--color-text-brand); }
.btn--ghost:hover { background: var(--color-bg-brand-soft); }
.btn--ghost:active { background: var(--color-bg-brand-soft-hover); }

.btn--danger { background: var(--color-bg-danger); color: var(--color-text-on-brand); }
.btn--danger:hover, .btn--danger:active { background: var(--color-bg-danger-hover); }

.btn:disabled, .btn[aria-disabled="true"] {
  background: var(--color-bg-disabled); color: var(--color-text-disabled);
  border-color: transparent; cursor: not-allowed;
}
.btn--outline:disabled, .btn--outline[aria-disabled="true"] { border-color: var(--color-border-default); }
.btn--ghost:disabled, .btn--ghost[aria-disabled="true"] { background: transparent; }

.btn--sm { min-height: 36px; padding: 0 14px; border-radius: var(--radius-sm); font: var(--text-small-strong); }
.btn--sm .icon { width: 16px; height: 16px; }
.btn--block { width: 100%; }

/* ---------- Icon Button ---------- */
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid transparent; border-radius: var(--radius-md);
  background: transparent; color: var(--color-icon-default);
}
.icon-btn:hover { background: var(--color-bg-muted); }
.icon-btn--outline { background: var(--color-bg-surface); border-color: var(--color-border-default); }
.icon-btn--outline:hover { background: var(--color-bg-subtle); }
.icon-btn--soft { background: var(--color-bg-brand-soft); color: var(--color-icon-brand); }
.icon-btn--soft:hover { background: var(--color-bg-brand-soft-hover); }
.icon-btn--primary { background: var(--color-bg-brand); color: var(--color-icon-on-brand); }
.icon-btn--primary:hover { background: var(--color-bg-brand-hover); }
.icon-btn--32 { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.icon-btn--32 .icon { width: 16px; height: 16px; }

/* ---------- Status Chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-1) 10px; border-radius: var(--radius-full);
  font: var(--text-caption); white-space: nowrap;
  background: var(--color-bg-muted); color: var(--color-text-secondary);
}
.chip__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.chip--hadir    { background: var(--color-attendance-hadir-soft); color: var(--color-status-success-fg); }
.chip--hadir .chip__dot { background: var(--color-attendance-hadir); }
.chip--izin     { background: var(--color-attendance-izin-soft);  color: var(--color-status-info-fg); }
.chip--izin .chip__dot { background: var(--color-attendance-izin); }
.chip--sakit    { background: var(--color-attendance-sakit-soft); color: var(--color-status-warning-fg); }
.chip--sakit .chip__dot { background: var(--color-attendance-sakit); }
.chip--alpa     { background: var(--color-attendance-alpa-soft);  color: var(--color-status-danger-fg); }
.chip--alpa .chip__dot { background: var(--color-attendance-alpa); }
.chip--aktif    { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.chip--menunggu { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.chip--ditolak  { background: var(--color-status-danger-bg);  color: var(--color-status-danger-fg); }
.chip--info     { background: var(--color-status-info-bg);    color: var(--color-status-info-fg); }
.chip--sorot    { background: var(--color-bg-highlight-soft); color: var(--color-text-on-highlight); }
/* nonaktif & netral memakai gaya dasar .chip */

/* ---------- Filter Chip ---------- */
.filter-chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border-strong); background: var(--color-bg-surface);
  color: var(--color-text-primary); font: var(--text-small-strong); text-decoration: none;
}
.filter-chip:hover { background: var(--color-bg-subtle); }
.filter-chip[aria-pressed="true"], .filter-chip[aria-current="true"] {
  background: var(--color-bg-brand); border-color: var(--color-bg-brand); color: var(--color-text-on-brand);
}
.filter-chip__count {
  padding: 0 6px; border-radius: var(--radius-full); font: var(--text-caption);
  background: var(--color-bg-muted); color: var(--color-text-secondary);
}
.filter-chip[aria-pressed="true"] .filter-chip__count,
.filter-chip[aria-current="true"] .filter-chip__count { background: var(--color-bg-brand-pressed); color: var(--color-text-on-brand); }

/* ---------- Input / Select / Date ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: var(--text-small-strong); color: var(--color-text-primary); }
.field__label .opt { font: var(--text-small); color: var(--color-text-muted); }
.field__control {
  position: relative; display: flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 14px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-icon-default);
}
.field__control:focus-within {
  border-color: var(--color-border-focus); box-shadow: inset 0 0 0 1px var(--color-border-focus), var(--focus-ring);
}
.field__input {
  flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; outline: 0; background: transparent;
  font: var(--text-body); color: var(--color-text-primary);
  appearance: none;
}
.field__input::placeholder { color: var(--color-text-muted); opacity: 1; }
.field__input:focus-visible { box-shadow: none; }
select.field__input { padding-right: var(--space-8); cursor: pointer; }
.field__control--select .field__trail { position: absolute; right: 14px; pointer-events: none; }
.field__helper { display: flex; align-items: flex-start; gap: 6px; font: var(--text-caption); color: var(--color-text-muted); }
.field__helper .icon { width: 16px; height: 16px; }

.field--error .field__control { border-color: var(--color-border-danger); box-shadow: inset 0 0 0 1px var(--color-border-danger); }
.field--error .field__helper { color: var(--color-text-danger); }
.field--disabled .field__control { background: var(--color-bg-disabled); border-color: var(--color-border-default); color: var(--color-text-disabled); }
.field--disabled .field__input { color: var(--color-text-disabled); cursor: not-allowed; }

/* Search Field (top bar desktop) */
.search {
  display: flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 var(--space-4) 0 14px;
  border-radius: var(--radius-full); background: var(--color-bg-canvas); color: var(--color-icon-default);
  border: 1px solid transparent;
}
.search:focus-within { border-color: var(--color-border-focus); box-shadow: var(--focus-ring); }
.search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: var(--text-body);
  color: var(--color-text-primary); appearance: none;
}
.search input::placeholder { color: var(--color-text-muted); opacity: 1; }
.search input:focus-visible { box-shadow: none; }

/* Checkbox & Radio (kontrol native, warna brand) */
.check {
  display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min);
  font: var(--text-body); color: var(--color-text-primary); cursor: pointer;
}
.check input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--color-bg-brand); cursor: pointer; }
.check input:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.check--disabled { color: var(--color-text-disabled); cursor: not-allowed; }
.check--disabled input { cursor: not-allowed; }

/* Segmented Control (radio) */
.segmented {
  display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-md); background: var(--color-bg-muted); border: 0; margin: 0;
}
.segmented label { position: relative; }
.segmented input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segmented span {
  display: grid; place-items: center; min-height: 36px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm); font: var(--text-small-strong); color: var(--color-text-secondary);
}
.segmented input:checked + span { background: var(--color-bg-surface); color: var(--color-text-brand); box-shadow: var(--shadow-1); }
.segmented input:focus-visible + span { box-shadow: var(--focus-ring); }

/* Tabs */
.tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--color-border-default); overflow-x: auto; }
.tab {
  position: relative; display: block; padding: var(--space-3) var(--space-4) 13px;
  font: var(--text-body-strong); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
}
.tab[aria-selected="true"], .tab[aria-current="page"] { color: var(--color-text-brand); }
.tab[aria-selected="true"]::after, .tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: var(--radius-full); background: var(--color-bg-brand);
}

/* ---------- Kartu & umpan balik ---------- */
.card {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default);
  border-radius: var(--radius-lg); padding: var(--space-5);
}
.card--flush { padding: 0; overflow: hidden; }

.section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.section-header__title { font: var(--text-title); }
.section-header__action { font: var(--text-small-strong); color: var(--color-text-brand); text-decoration: none; }

.stat-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--bento-bg); color: var(--bento-fg); }
.stat-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.stat-card__label { font: var(--text-small-strong); color: var(--color-text-secondary); }
.stat-card .icon-tile { background: var(--color-bg-surface); color: var(--bento-fg); }
.stat-card__value { font: var(--text-numeric); letter-spacing: var(--tracking-numeric); font-variant-numeric: tabular-nums; color: var(--bento-fg); }
.stat-card__caption { font: var(--text-caption); color: var(--color-text-muted); }
.icon-tile {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px;
  border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-icon-brand);
}

.alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: 14px var(--space-4) 14px 14px; border-radius: var(--radius-md);
  background: var(--color-status-info-bg); color: var(--color-status-info-fg);
}
.alert__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.alert__title { font: var(--text-body-strong); }
.alert__body { font: var(--text-small); color: var(--color-text-primary); }
.alert--warning { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.alert--success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.alert--danger  { background: var(--color-status-danger-bg);  color: var(--color-status-danger-fg); }

.toast-region {
  position: fixed; z-index: 60; left: 50%; bottom: calc(var(--bottom-nav-height) + var(--space-6));
  transform: translateX(-50%); width: min(358px, calc(100% - var(--space-8)));
  display: flex; flex-direction: column; gap: var(--space-2);
}
.toast {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-3) 14px var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-2);
  font: var(--text-body-medium);
}
.toast__msg { flex: 1; min-width: 0; }
.toast--success .toast__icon { color: var(--color-attendance-hadir); }
.toast--error .toast__icon { color: var(--color-bg-danger); }
.toast--info .toast__icon { color: var(--color-attendance-izin); }
.toast-region--static { position: static; transform: none; width: 358px; max-width: 100%; }

.empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-6); text-align: center;
}
.empty-state__title { font: var(--text-title); }
.empty-state__body { font: var(--text-small); color: var(--color-text-secondary); max-width: 310px; }
.empty-state__art { width: 120px; height: 96px; }

.avatar {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px;
  border-radius: 50%; background: var(--color-bg-brand-soft); color: var(--color-text-brand); font: var(--text-caption);
}
.avatar--md { width: 40px; height: 40px; font: var(--text-small-strong); }
.avatar--lg { width: 64px; height: 64px; font: var(--text-title); }
.avatar--xl { width: 88px; height: 88px; font: var(--text-h2); }

.skeleton {
  display: block; height: 16px; border-radius: var(--radius-xs); background: var(--color-bg-skeleton);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
.skeleton--title { height: 24px; width: 60%; }
.skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
@keyframes skeleton-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { transition: none !important; }
}

/* ---------- Modal (<dialog>) ---------- */
.modal {
  width: min(520px, calc(100% - var(--space-8))); max-height: calc(100dvh - var(--space-12));
  padding: 0; border: 0; border-radius: var(--radius-xl);
  background: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-3);
}
.modal::backdrop { background: var(--scrim); }
.modal__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-4) var(--space-2) var(--space-6); }
.modal__title { flex: 1; font: var(--text-h3); }
.modal__content { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-6) var(--space-4); color: var(--color-text-secondary); }
.modal__footer {
  display: flex; justify-content: flex-end; gap: var(--space-3);
  padding: var(--space-4) var(--space-6) var(--space-6); border-top: 1px solid var(--color-border-default);
}

/* ---------- Tabel & daftar ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.table th {
  height: 44px; padding: 0 var(--space-3); text-align: left; white-space: nowrap;
  font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase;
  color: var(--color-text-muted); background: var(--color-bg-subtle); border-bottom: 1px solid var(--color-border-default);
}
.table td { height: 56px; padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border-default); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table { min-width: 720px; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .actions { width: 1%; white-space: nowrap; text-align: right; }
.cell-person { display: flex; align-items: center; gap: 10px; }
.cell-person__name { font: var(--text-body-strong); }
.cell-sub { display: block; font: var(--text-caption); color: var(--color-text-muted); }

.pagination { display: flex; align-items: center; gap: var(--space-2); min-height: 56px; padding: 0 var(--space-4); }
.pagination__summary { flex: 1; font: var(--text-small); color: var(--color-text-secondary); }
.page-btn {
  display: inline-grid; place-items: center; min-width: 32px; height: 32px; padding: 0 var(--space-2);
  border-radius: var(--radius-sm); font: var(--text-small-strong); color: var(--color-text-secondary); text-decoration: none;
}
.page-btn:hover { background: var(--color-bg-muted); }
.page-btn[aria-current="page"] { background: var(--color-bg-brand); color: var(--color-text-on-brand); }

.list { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); overflow: hidden; }
.list-row {
  display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3);
  color: inherit; text-decoration: none; border-bottom: 1px solid var(--color-border-default);
}
.list-row:last-child { border-bottom: 0; }
a.list-row:hover { background: var(--color-bg-subtle); }
.list-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-row__title { font: var(--text-body-strong); }
.list-row__sub { font: var(--text-caption); color: var(--color-text-muted); }
.list-row__trail { color: var(--color-icon-default); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__mark { height: 40px; width: auto; }
.logo__word { height: 24px; width: auto; }

/* ---------- Bingkai aplikasi (semua peran) ----------
 * Satu struktur HTML (layouts/app.html). Laptop >= 1024 px: menu samping + bilah atas.
 * HP < 1024 px: app bar + navigasi bawah seperti aplikasi Android (Figma 03–05: Bilah atas,
 * Navigasi Bawah); menu samping menjadi laci. */
.app { min-height: 100dvh; }
.sidebar {
  position: fixed; z-index: 40; inset: 0 auto 0 0; width: var(--sidebar-width);
  display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-5) var(--space-4) var(--space-4);
  background: var(--color-bg-surface); border-right: 1px solid var(--color-border-default);
  overflow-y: auto; overscroll-behavior: contain;
}
.sidebar__brand { display: flex; align-items: center; min-height: 40px; padding: 0 var(--space-2); }
.sidebar__group { display: flex; flex-direction: column; gap: var(--space-1); }
.sidebar__group-label { padding: 0 var(--space-3) var(--space-1); font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-muted); }
.sidebar-item {
  display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); font: var(--text-body-medium); color: var(--color-text-secondary); text-decoration: none;
}
.sidebar-item:hover { background: var(--color-bg-subtle); color: var(--color-text-primary); }
.sidebar-item[aria-current="page"] { background: var(--color-bg-brand-soft); color: var(--color-text-brand); font: var(--text-body-strong); }
.sidebar-item__label { flex: 1; min-width: 0; }
.sidebar-item__badge {
  padding: 2px var(--space-2); border-radius: var(--radius-full); font: var(--text-caption);
  background: var(--color-bg-highlight); color: var(--color-text-on-highlight);
}
.sidebar__spacer { flex: 1; }
.sidebar__user { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-lg); background: var(--color-bg-canvas); }
.sidebar__who { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--radius-xs); }
.sidebar__who:hover .sidebar__name { color: var(--color-text-brand); }
.sidebar__name { font: var(--text-small-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__role { font: var(--text-caption); color: var(--color-text-muted); }

.app__main { margin-left: var(--sidebar-width); min-width: 0; }
.d-topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--space-4);
  min-height: var(--topbar-desktop-height); padding: 0 var(--space-8);
  background: var(--color-bg-surface); border-bottom: 1px solid var(--color-border-default);
}
.d-topbar .search { width: 420px; max-width: 100%; }
.d-topbar__spacer { flex: 1; }
.app__content { padding: 28px var(--space-8) var(--space-10); display: flex; flex-direction: column; gap: var(--space-6); max-width: 1440px; }
.app--hero .app__content { padding-top: 0; }
.appbar { display: none; }
.bottom-nav { display: none; }

.page-header { display: flex; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; }
.page-header__titles { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: var(--space-1); }
.page-header__crumb { font: var(--text-small); color: var(--color-text-muted); }
.page-header__crumb a { color: inherit; text-decoration: none; }
.page-header__title { font: var(--text-h1); letter-spacing: var(--tracking-h1); }
.page-header__desc { font: var(--text-body); color: var(--color-text-secondary); }
.page-header__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.grid { display: grid; gap: var(--space-6); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

.page-header__actions:empty { display: none; }
.sheet { background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); padding: var(--space-5); }
@media (max-width: 1023.98px) { .sheet { padding: 0; border: 0; border-radius: 0; background: none; } }
.laptop-hint { display: none; }
@media (min-width: 1024px) { .mobile-only { display: none !important; } }
@media (max-width: 1023.98px) { .laptop-only { display: none !important; } }

/* Laci menu (checkbox, tanpa JS): dipakai di HP oleh tab "Menu" Yayasan dan oleh tombol menu. */

@media (max-width: 1023.98px) {
  body { background: var(--color-bg-surface); }
  /* Tanpa laci di HP: isi menu samping ada di tab "Menu" (/menu). */
  .sidebar { display: none; }
  .app__main { margin-left: 0; }
  .d-topbar { display: none; }

  /* App bar (Figma: Bilah atas). Halaman tab: judul besar 24/32 Bold rata kiri.
     Halaman turunan: tombol kembali 40 px + judul 16/24 SemiBold, garis bawah. */
  .appbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: var(--space-1);
    min-height: 52px; padding: env(safe-area-inset-top) var(--space-6) 0 var(--space-3);
    background: var(--color-bg-surface); border-bottom: 1px solid var(--color-bg-muted);
  }
  .appbar__title { flex: 1; min-width: 0; font: var(--text-title); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .appbar__actions { display: flex; align-items: center; gap: var(--space-1); margin-right: calc(-1 * var(--space-3)); }
  .appbar__back { color: var(--color-text-primary); }
  .appbar--large { min-height: 60px; padding-left: var(--space-6); border-bottom-color: transparent; }
  .appbar--large .appbar__title { font: 700 24px/32px var(--font-sans); letter-spacing: -.2px; }
  .appbar.is-scrolled { border-bottom-color: var(--color-bg-muted); }

  /* Isi selebar ponsel; kepala halaman laptop disembunyikan (judulnya sudah di app bar). */
  .app__content {
    max-width: var(--content-max-mobile); margin: 0 auto;
    padding: var(--space-2) var(--space-6) calc(var(--space-10) + env(safe-area-inset-bottom));
    gap: var(--space-5);
  }
  .app--tab .app__content { padding-bottom: calc(80px + var(--space-6) + env(safe-area-inset-bottom)); }
  .app--child .app__content { padding-top: var(--space-5); }
  /* Judul & jejak sudah di app bar. Keterangan dan tombol aksi tetap tampil (fitur sama). */
  /* h1 tetap ada untuk pembaca layar (judul visualnya di app bar). */
  .page-header__titles > .page-header__title {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .page-header__crumb { display: none; }
  .page-header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .page-header__titles { min-width: 0; }
  .page-header:not(:has(.page-header__desc)):not(:has(.page-header__actions > *)) { margin-bottom: calc(-1 * var(--space-5)); }
  .page-header__actions { gap: var(--space-2); }
  .page-header__actions > .btn, .page-header__actions > form { flex: 1 1 auto; }
  .page-header__actions > form > .btn { width: 100%; }
  .laptop-hint { display: flex; align-items: center; gap: var(--space-2); color: var(--color-status-info-fg); font: var(--text-small); }

  /* Navigasi bawah (Figma: Navigasi Bawah 390x80, pad 0/8/16/8, penanda 28x3 di atas ikon). */
  .bottom-nav {
    position: fixed; z-index: 30; left: 0; right: 0; bottom: 0;
    display: flex; justify-content: center; align-items: flex-start;
    padding: 0 var(--space-2) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--color-bg-surface); border-top: 1px solid var(--color-border-default);
  }
  .nav-item {
    position: relative; flex: 1; max-width: 120px;
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    min-height: 64px; padding: 10px var(--space-1) 0;
    font: var(--text-caption); color: var(--color-text-muted); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-item[aria-current="page"] { color: var(--color-text-brand); font-weight: 600; }
  .nav-item[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 3px; margin-left: -14px;
    border-radius: 0 0 2px 2px; background: var(--color-bg-brand);
  }
  .nav-item:active { background: var(--color-bg-subtle); }

  .toast-region { bottom: calc(80px + var(--space-4) + env(safe-area-inset-bottom)); }
  .app--child .toast-region { bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); }
}

/* ---------- Halaman publik sederhana (beranda sementara, error) ---------- */
.center-page { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-6); }
.center-card { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-4); text-align: center; align-items: center; }
.center-card .logo__mark { height: 56px; }
.error-code { font: var(--text-overline); letter-spacing: var(--tracking-overline); color: var(--color-text-muted); }

/* ---------- Styleguide (khusus development) ---------- */
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.sg-swatch { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-surface); }
.sg-swatch__color { width: 100%; height: 56px; }
.sg-swatch__meta { padding: var(--space-2) var(--space-3); font: var(--text-caption); }
.sg-swatch__meta code { display: block; color: var(--color-text-muted); font-size: 11px; }
.sg-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--space-2); }
.sg-icon { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-2); border-radius: var(--radius-md); background: var(--color-bg-subtle); font: var(--text-caption); color: var(--color-text-secondary); text-align: center; word-break: break-word; }
.sg-icon .icon { color: var(--color-text-primary); }
.sg-section { display: flex; flex-direction: column; gap: var(--space-4); }
.sg-section > h2 { font: var(--text-h2); letter-spacing: var(--tracking-h2); }


/* =====================================================================
   Fase 1 — layar akun (A01–A11), profil, dan halaman Yayasan pengguna
   ===================================================================== */

.btn--lg { min-height: 52px; border-radius: var(--radius-md); font: var(--text-title); }
.btn--danger-text { color: var(--color-text-danger); }
.btn--danger-text:hover { background: var(--color-status-danger-bg); }
.muted { color: var(--color-text-muted); }
.overline { font: var(--text-overline); letter-spacing: .8px; text-transform: uppercase; color: var(--color-text-muted); margin: 0; }
.row--tight { gap: var(--space-2); }
.narrow { max-width: 640px; }

/* Kata sandi: tombol tampilkan */
.field__toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 32px; height: 32px; margin-right: -6px; padding: 0;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-icon-default); cursor: pointer;
}
.field__toggle:hover { background: var(--color-bg-muted); }
.field__toggle:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Halaman tamu (Figma 01/02 Tamu) ---------- */
/* Bingkai Mushaf yang dipakai bersama: garis ganda, pola khatam, bintang emas. */
.bingkai { position: absolute; inset: 0; pointer-events: none; }
.bingkai::before, .bingkai::after { content: ""; position: absolute; border: 1px solid; }
.bingkai::before { inset: 12px; border-color: rgb(254 254 254 / .30); }
.bingkai::after { inset: 17px; border-color: rgb(254 254 254 / .16); }
.bingkai__pola {
  position: absolute; inset: 18px;
  background: url("/static/img/pola-khatam.svg") repeat;
  opacity: .10;
  mask-image: linear-gradient(to bottom, #000 0 55%, transparent 85%);
}
.bingkai__orn { position: absolute; width: 14px; height: 14px; }
.bingkai__orn--tl { top: 5px; left: 5px; }
.bingkai__orn--tr { top: 5px; right: 5px; }
.bingkai__orn--bl { bottom: 5px; left: 5px; }
.bingkai__orn--br { bottom: 5px; right: 5px; }

.guest { min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg-surface); }
.guest__panel {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center;
  min-height: calc(100px + env(safe-area-inset-top));
  padding: calc(env(safe-area-inset-top) + 18px) 32px 18px;
  background: var(--color-bg-brand); color: var(--color-text-on-brand);
  box-shadow: 0 4px 12px rgb(0 0 0 / .08);
}
.guest__panel .bingkai { top: env(safe-area-inset-top); }
.guest__panel .bingkai__pola { mask-image: none; opacity: .08; }
.guest__logo { position: relative; }
.guest__panel-copy { display: none; }
.guest__side { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.guest__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) var(--space-6) 0;
}
.guest__bar:not(:has(.guest__back)):not(:has(.guest__aside-link > *)) { display: none; }
.guest__back {
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; margin-left: -6px; padding: 0 6px;
  border: 0; background: none; border-radius: var(--radius-sm);
  font: var(--text-small-strong); font-size: 14px; color: var(--color-text-primary); text-decoration: none; cursor: pointer;
}
.guest__back:hover { color: var(--color-text-brand); }
.guest__back:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.guest__back-form { margin-left: auto; }
.guest__back--end { color: var(--color-text-brand); margin: 0 -6px 0 0; }
.guest__aside-link { display: none; margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.guest__aside-link a { margin-left: var(--space-1); font-weight: 600; color: var(--color-text-brand); text-decoration: none; }
.guest__aside-link a:hover { text-decoration: underline; }
.guest__main {
  flex: 1; display: flex; flex-direction: column;
  width: 100%; max-width: 480px; margin: 0 auto;
  padding: var(--space-6) var(--space-6) calc(var(--space-8) + env(safe-area-inset-bottom));
}
.guest__foot { display: none; }
.guest-mobile { display: block; }

.auth-eyebrow { margin: 0 0 var(--space-2); font: var(--text-small); font-size: 14px; color: var(--color-text-brand); }
.auth-title { margin: 0 0 var(--space-3); font: var(--text-h1); letter-spacing: -.4px; }
.auth-desc { margin: 0 0 var(--space-6); color: var(--color-text-secondary); }
.auth-desc strong { color: var(--color-text-primary); }
.auth-form { display: flex; flex-direction: column; gap: var(--space-5); }
.auth-submit { width: 100%; }
.auth-link { font: var(--text-small-strong); color: var(--color-text-brand); text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-link--end { align-self: flex-end; margin-top: calc(-1 * var(--space-2)); }
.auth-foot { margin: 0; padding-top: var(--space-8); text-align: center; color: var(--color-text-secondary); }
.auth-foot a { font-weight: 600; color: var(--color-text-brand); text-decoration: none; margin-left: var(--space-1); }
.auth-foot--tight { padding-top: var(--space-6); }
.auth-actions { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-6); }

/* Langkah 1–3 lupa kata sandi */
.guest-step { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-5); font: var(--text-overline); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-secondary); }
.guest-step__bars { display: flex; gap: 4px; }
.guest-step__bars i { width: 28px; height: 4px; border-radius: 2px; background: var(--color-border-default); }
.guest-step__bars i.on { background: var(--color-bg-brand); }

.guest-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-5) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.guest-note .icon { flex: none; margin-top: 1px; }
.guest-note--plain { display: block; padding-top: var(--space-6); text-align: center; }

/* T01 */
.feature-list { display: none; list-style: none; margin: 0 0 var(--space-8); padding: 0; }
.feature-list__item { display: flex; gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border-default); }
.feature-list__item:first-child { padding-top: 0; }
.feature-list__item:last-child { border-bottom: 0; }
.feature-list__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.feature-list__item strong { display: block; font: var(--text-body-strong); }
.feature-list__item strong + span { display: block; margin-top: 2px; font: var(--text-small); color: var(--color-text-secondary); }
.welcome-actions { display: flex; flex-direction: column; gap: var(--space-3); }
.field-row { display: flex; flex-direction: column; gap: var(--space-4); }

/* T01 HP: pita hijau tinggi dengan semboyan */
.guest:has(.welcome-actions) .guest__panel { min-height: calc(420px + env(safe-area-inset-top)); align-items: stretch; flex-direction: column; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 32px) 36px 36px; box-shadow: none; }
.guest:has(.welcome-actions) .guest__panel-copy { display: block; position: relative; }
.guest:has(.welcome-actions) .guest__panel-desc { display: none; }
.guest__tagline { margin: 0; font: var(--text-display); font-size: 28px; line-height: 1.25; letter-spacing: -.3px; max-width: 320px; }
.guest__panel-desc { margin: var(--space-4) 0 0; font: var(--text-small); font-size: 14px; color: rgb(254 254 254 / .85); max-width: 440px; }

@media (min-width: 1024px) {
  .guest { flex-direction: row; }
  .guest__panel {
    position: sticky; top: 0; align-self: flex-start;
    flex: 0 0 600px; height: 100dvh; min-height: 640px;
    flex-direction: column; align-items: stretch; justify-content: space-between;
    padding: 72px 72px 72px; box-shadow: none;
  }
  .guest:has(.welcome-actions) .guest__panel { min-height: 640px; padding: 72px; }
  .guest__panel .bingkai { top: 0; }
  .guest__panel .bingkai__pola { mask-image: linear-gradient(to bottom, #000 0 50%, transparent 72%); opacity: .10; }
  .guest__panel-copy, .guest:has(.welcome-actions) .guest__panel-copy { display: block; position: relative; }
  .guest:has(.welcome-actions) .guest__panel-desc { display: block; }
  .guest__tagline { font-size: 34px; max-width: 380px; }
  .guest__side { background: linear-gradient(to right, var(--color-bg-canvas), var(--color-bg-surface) 48px); }
  .guest__bar { padding: 28px 48px 0; min-height: 72px; }
  .guest__bar:not(:has(.guest__back)):not(:has(.guest__aside-link > *)) { display: flex; }
  .guest__aside-link { display: block; margin-left: auto; }
  .guest__main { justify-content: center; max-width: 560px; padding: var(--space-10) 48px; }
  .guest__main:has(.auth-form--wide), .guest__main:has(.prose) { max-width: 656px; justify-content: flex-start; padding-top: var(--space-8); }
  .guest__main > .guest-note--plain { text-align: left; }
  .guest__foot {
    display: flex; justify-content: space-between; gap: var(--space-4);
    padding: 0 48px 28px; font: var(--text-small); color: var(--color-text-secondary);
  }
  .guest__foot a { font-weight: 600; color: var(--color-text-primary); text-decoration: none; }
  .guest__foot a:hover { text-decoration: underline; }
  .guest-mobile { display: none; }
  .guest__back-form { margin-left: 0; }
  .guest__back--end { margin: 0 0 0 -6px; }
  .auth-submit { width: auto; align-self: flex-start; min-width: 104px; }
  .auth-actions--inline { flex-direction: row; }
  .feature-list { display: block; }
  .welcome-actions { flex-direction: row; }
  .welcome-actions > .btn { flex: 1; }
  .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); align-items: start; }

  .choice-grid.choice-grid--roles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .choice-grid--roles .choice { padding: 0 var(--space-3); white-space: nowrap; }
}
@media (max-width: 1023.98px) {
  .choice-grid.choice-grid--roles { grid-template-columns: 1fr; }
}

/* Beranda */
.greeting { display: flex; align-items: center; gap: var(--space-3); }
.greeting__hello { margin: 0; font: var(--text-caption); color: var(--color-text-muted); }
.greeting__name { margin: 0; font: var(--text-title); }
.alert--link { text-decoration: none; color: inherit; }
.alert--link:hover { filter: brightness(.98); }

/* A09 Akun */
.profile-head { display: flex; align-items: center; gap: var(--space-4); }
.profile-head__texts { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.profile-head__name { margin: 0; font: var(--text-h3); overflow-wrap: anywhere; }
.kv { margin: 0; padding: 0 var(--space-4); }
.kv__row { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-default); }
.kv__row:last-child { border-bottom: 0; }
.kv dt { font: var(--text-caption); color: var(--color-text-muted); }
.kv dd { margin: 0; font: var(--text-body); overflow-wrap: anywhere; }
.kv__line { display: block; }
.profile-actions { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding-top: var(--space-2); }

/* A03 */
.auth-section { border: 0; margin: 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border-default); min-width: 0; }
.auth-section legend { padding: 0; margin-bottom: var(--space-4); float: left; width: 100%; }
.auth-section > legend + * { clear: both; }
.auth-section > .field + .field, .auth-section > .field-row + .field, .auth-section > .field + .field-row { margin-top: var(--space-4); }
.alert--info-strong .alert__title { color: var(--color-status-info-fg); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.choice {
  display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: 0 var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-surface); font: var(--text-body-medium); cursor: pointer;
}
.choice input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--color-bg-brand); }
.choice:has(input:checked) { border-color: var(--color-border-brand); background: var(--color-bg-brand-soft); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.choice:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.field--error .choice { border-color: var(--color-border-danger); }
.check--top { align-items: flex-start; }
.check--top input { margin-top: 2px; }
.check a { color: var(--color-text-brand); font-weight: 600; }

/* A04 */
.status-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); padding: var(--space-6) 0 var(--space-6); }
.status-hero__icon {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--color-bg-highlight-soft); color: var(--color-text-on-highlight);
  box-shadow: 0 0 0 12px rgb(255 214 10 / .12);
}
.status-hero__icon--danger { background: var(--color-status-danger-bg); color: var(--color-text-danger); box-shadow: 0 0 0 12px rgb(192 43 43 / .08); }
.status-hero__title { margin: var(--space-3) 0 0; font: var(--text-h2); letter-spacing: -.2px; }
.status-hero__desc { margin: 0; color: var(--color-text-secondary); }
.status-card { padding-bottom: var(--space-2); }
.status-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.status-card__title { margin: 0; font: var(--text-body-strong); }
.kv--flush { padding: 0; }

/* Teks panjang (kebijakan privasi) */
.prose { display: flex; flex-direction: column; gap: var(--space-3); }
.prose h2 { margin: var(--space-4) 0 0; font: var(--text-title); }
.prose--numbered h2 { display: flex; align-items: baseline; gap: var(--space-3); padding-top: var(--space-5); border-top: 1px solid var(--color-border-default); }
.prose--numbered h2:first-of-type { border-top: 0; }
.prose--numbered ul { list-style: none; padding-left: 0; }
.prose--numbered h2 ~ ul, .prose--numbered h2 ~ p { padding-left: calc(2ch + var(--space-3)); }
.prose__num { font: var(--text-small-strong); color: var(--color-text-brand); }
.prose p, .prose ul { margin: 0; color: var(--color-text-secondary); }
.prose ul { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }

/* A05–A08 */
.icon-tile--lg { width: 48px; height: 48px; border-radius: var(--radius-md); }
.otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); border: 0; margin: 0; padding: 0; min-width: 0; }
.otp__box {
  width: 100%; height: 56px; padding: 0; text-align: center;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-text-primary);
  font: var(--text-h2); font-variant-numeric: tabular-nums;
}
.otp__box:focus { outline: none; border-color: var(--color-border-brand); box-shadow: var(--focus-ring); }
.otp--error .otp__box { border-color: var(--color-border-danger); }
.otp__error { color: var(--color-text-danger); margin-top: calc(-1 * var(--space-2)); }
.otp-resend { display: flex; justify-content: center; align-items: center; gap: var(--space-1); flex-wrap: wrap; margin-top: var(--space-5); font: var(--text-small); color: var(--color-text-secondary); }
.link-btn { border: 0; background: none; padding: 4px 2px; font: var(--text-small-strong); color: var(--color-text-brand); cursor: pointer; border-radius: var(--radius-xs); }
.link-btn:hover:not(:disabled) { text-decoration: underline; }
.link-btn:disabled { color: var(--color-text-secondary); cursor: default; }
.status-hero__icon--success { background: var(--color-status-success-bg); color: var(--color-status-success-fg); box-shadow: 0 0 0 12px rgb(42 177 140 / .1); }

/* A10 & ganti kata sandi */
.edit-form { gap: var(--space-5); }
.edit-form__actions { padding-top: var(--space-2); }
@media (max-width: 1023px) {
  .app__content .edit-form__actions {
    position: sticky; bottom: 0; margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom));
    background: var(--color-bg-canvas); border-top: 1px solid var(--color-border-default);
  }
}

/* ---------- Fase 1: Yayasan (D01–D03, Pengaturan) ---------- */
.card__title { margin: 0; font: var(--text-title); }
.card__desc { margin: var(--space-1) 0 0; font: var(--text-small); color: var(--color-text-secondary); }
.row--end { justify-content: flex-end; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.nojs-only { }
.js .nojs-only { display: none; }

.alert__trail { margin-left: auto; align-self: center; }

.users-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5) var(--space-4); }
.users-toolbar .chip-row { flex: 1 1 520px; }
.users-filter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.users-filter__role { width: 176px; }
.users-filter .search--field { width: 248px; }
.table .actions .row { flex-wrap: nowrap; }
.users-table td:nth-child(2), .users-table td:nth-child(5) { white-space: nowrap; }
.search--field { height: 48px; background: var(--color-bg-surface); border: 1px solid var(--color-border-strong); width: 280px; max-width: 100%; }
.table-wrap--flat { border-width: 1px 0; border-radius: 0; }
.users-table td { height: 64px; }
.users-table .cell-person__name { color: var(--color-text-primary); text-decoration: none; }
.users-table .cell-person__name:hover { color: var(--color-text-brand); text-decoration: underline; }
.cell-main { display: block; font: var(--text-body); }
.page-btn--outline { border: 1px solid var(--color-border-strong); background: var(--color-bg-surface); }
.page-btn--gap { min-width: 24px; }
.users-card .pagination { padding: var(--space-2) var(--space-5); }

/* Dialog setujui/tolak */
.modal--md { width: min(560px, calc(100% - var(--space-8))); }
.modal--static { display: block; position: static; margin: 0 auto; box-shadow: var(--shadow-1); border: 1px solid var(--color-border-default); }
.modal__content--form { gap: var(--space-4); color: var(--color-text-primary); overflow-y: auto; }
.modal__note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.modal__note .icon { margin-top: 2px; flex: none; }
.applicant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.applicant p { margin: 0; }
.applicant__name { font: var(--text-body-strong); }
.applicant__meta { font: var(--text-caption); color: var(--color-text-secondary); }
.field--group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.field--group > legend { padding: 0; margin-bottom: var(--space-2); }
.field--inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.field--inline .field__label { margin: 0; white-space: nowrap; }
.field--inline .field__control { flex: 1; }
.field__textarea { height: auto; min-height: 96px; padding: var(--space-3) var(--space-4); resize: vertical; line-height: 1.5; }
.field__helper--error { color: var(--color-text-danger); }
.student-list { display: flex; flex-direction: column; gap: var(--space-2); }
.student-list:empty { display: none; }
.student-option {
  display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); cursor: pointer;
}
.student-option input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--color-bg-brand); }
.student-option:has(input:checked) { border-color: var(--color-border-brand); background: var(--color-bg-brand-soft); box-shadow: inset 0 0 0 1px var(--color-border-brand); }
.student-option:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.student-option__texts { display: flex; flex-direction: column; min-width: 0; }
.student-option__name { font: var(--text-body-medium); }
.student-option__meta { font: var(--text-caption); color: var(--color-text-secondary); }
.student-empty { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.student-empty--box { padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); text-align: center; }
.add-child > summary { display: inline-flex; align-items: center; gap: var(--space-2); list-style: none; padding: var(--space-2) var(--space-1); }
.add-child > summary::-webkit-details-marker { display: none; }
.add-child[open] > summary { margin-bottom: var(--space-2); }
.add-child__search { display: flex; gap: var(--space-2); align-items: center; }
.add-child__search .search--field { flex: 1; width: auto; }
.add-child .student-list { margin-top: var(--space-2); }

/* D03 */
.detail-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(320px, 2fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1100px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
.form-grid { gap: var(--space-5) var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field--short .field__control { max-width: 240px; }
.panel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-subtle); }
.panel__texts { flex: 1; min-width: 240px; }
.panel__title { margin: 0; font: var(--text-body-strong); }
.panel__desc { margin: var(--space-1) 0 0; font: var(--text-small); color: var(--color-text-secondary); }
.panel__actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); }
.linked-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.linked-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.linked-list__row + .linked-list__row { border-top: 1px solid var(--color-border-default); }
.linked-list__texts { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.linked-list__name { font: var(--text-body-strong); }
.linked-list__meta { font: var(--text-caption); color: var(--color-text-secondary); }
.narrow-wide { max-width: 800px; }
.status-hero--left { align-items: flex-start; text-align: left; padding: 0; }
.status-hero__icon--sm { width: 64px; height: 64px; box-shadow: none; }
.guest .status-hero--left { padding: var(--space-6) 0 var(--space-6); gap: var(--space-2); }
.guest .status-hero--left .status-hero__title { margin-top: var(--space-4); font: var(--text-h1); letter-spacing: -.4px; }
.status-hero--done { padding-top: var(--space-10); }
.temp-pass { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px dashed var(--color-border-brand); border-radius: var(--radius-md); background: var(--color-bg-brand-soft); }
.temp-pass__value { flex: 1; font: 600 24px/1.2 ui-monospace, "SFMono-Regular", Menlo, monospace; letter-spacing: .12em; color: var(--color-text-primary); }

/* ===== Fase 2: Data master (D04–D10) ===== */
/* Tab tautan bergaya Segmented Control (filter sekolah). */
.seg-links {
  display: inline-flex; gap: var(--space-1); padding: var(--space-1);
  border-radius: var(--radius-md); background: var(--color-bg-muted);
}
.seg-links a {
  display: grid; place-items: center; min-height: 36px; min-width: 88px; padding: 0 var(--space-4);
  border-radius: var(--radius-sm); font: var(--text-small-strong); color: var(--color-text-secondary);
  text-decoration: none;
}
.seg-links a:hover { color: var(--color-text-primary); }
.seg-links a[aria-current] { background: var(--color-bg-surface); color: var(--color-text-brand); box-shadow: var(--shadow-1); }
.seg-links a:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.segmented--block { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
.users-toolbar__spacer { flex: 1; }
.users-filter__year { width: 200px; }
.users-filter__class { width: 220px; }
.grid--3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.cell-link { color: inherit; text-decoration: none; font-weight: 500; }
.cell-link:hover { color: var(--color-text-brand); text-decoration: underline; }
.classes-table td:nth-child(4) strong { font-weight: 600; }

.year-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.year-list__row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.year-list__row + .year-list__row { border-top: 1px solid var(--color-border-default); }
.year-list__texts { flex: 1; min-width: 0; }

/* Pilihan tingkat mengikuti tombol SDTQ/PAUD (server tetap memeriksa pasangan unit & tingkat). */
.class-form:has(input[data-level-switch][value="SD"]:checked) optgroup[data-level="PAUD"],
.class-form:has(input[data-level-switch][value="PAUD"]:checked) optgroup[data-level="SD"],
.level-form:has(input[data-level-switch][value="SD"]:checked) optgroup[data-level="PAUD"],
.level-form:has(input[data-level-switch][value="PAUD"]:checked) optgroup[data-level="SD"] { display: none; }

/* Fieldset sebagai grup kolom (radio/segmented) tanpa bingkai bawaan browser. */
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field > legend { padding: 0; margin-bottom: var(--space-2); }

/* D06 Siswa */
.users-filter--grow { flex: 1 1 560px; }
.users-filter--grow .search--field { width: 280px; }
.select-col { width: 44px; padding-right: 0 !important; }
.select-col .check { min-height: 0; }
.cell-muted { color: var(--color-text-muted); }
.chip-link { text-decoration: none; }
.students-table { min-width: 980px; }
.students-table td:nth-child(3) { white-space: nowrap; }
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5); background: var(--color-bg-brand-soft, var(--color-bg-muted));
  border-top: 1px solid var(--color-border-default);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font: var(--text-small-strong); color: var(--color-text-brand); }
.bulk-bar__select { width: 240px; min-height: 40px; }

/* D07 Tambah / ubah siswa */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
@media (max-width: 1100px) { .form-layout { grid-template-columns: 1fr; } }
.form-layout__aside { position: sticky; top: var(--space-6); }
.segmented--fixed { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 152px; width: max-content; max-width: 100%; }
.form-footer { display: flex; justify-content: flex-end; gap: var(--space-3); }
.radio-row { display: flex; gap: var(--space-6); flex-wrap: wrap; padding-top: var(--space-1); }
.side-link { display: flex; gap: var(--space-3); align-items: flex-start; text-decoration: none; color: inherit; }
.side-link:hover { border-color: var(--color-border-brand, var(--color-bg-brand)); }
.side-link > .icon { flex: none; margin-top: 2px; color: var(--color-text-secondary); }
.side-link__title { display: block; font: var(--text-body-strong); margin-bottom: var(--space-1); }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }

/* D08–D10 Import siswa */
.nowrap { white-space: nowrap; }
.row--center { justify-content: center; }
.import-card { gap: var(--space-6); }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-3); }
.stepper__item { display: flex; align-items: center; gap: var(--space-2); font: var(--text-small-strong); color: var(--color-text-muted); }
.stepper__dot {
  width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center;
  border: 1.5px solid var(--color-border-default); background: var(--color-bg-surface); font: var(--text-small-strong);
}
.stepper__item--current { color: var(--color-text-brand); }
.stepper__item--current .stepper__dot { background: var(--color-bg-brand); border-color: var(--color-bg-brand); color: var(--color-text-on-brand, #FEFEFE); }
.stepper__item--done { color: var(--color-text-primary); }
.stepper__item--done .stepper__dot { background: var(--color-bg-brand-soft); border-color: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.stepper__line { flex: 0 1 72px; height: 2px; background: var(--color-border-default); border-radius: 1px; }
.stepper__line--done { background: var(--color-bg-brand); }
.import-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-6); align-items: start; }
@media (max-width: 1100px) { .import-grid { grid-template-columns: 1fr; } }
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-6); text-align: center; cursor: pointer;
  border: 1.5px dashed var(--color-border-strong, var(--color-border-default)); border-radius: var(--radius-lg);
  background: var(--color-bg-subtle, var(--color-bg-canvas));
  transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone.is-over, .dropzone:focus-within { border-color: var(--color-bg-brand); background: var(--color-bg-brand-soft); }
.dropzone .icon-tile { margin-bottom: var(--space-1); }
.dropzone__title { font: var(--text-body-strong); color: var(--color-text-primary); overflow-wrap: anywhere; }
.dropzone__hint { font: var(--text-small); color: var(--color-text-secondary); }
.dropzone__btn { margin-top: var(--space-2); pointer-events: none; }
.dropzone__input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.import-help {
  display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface);
}
.import-help__label { margin: var(--space-2) 0 0; font: var(--text-small-strong); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); }
.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font: var(--text-small); }
.checklist li { display: flex; align-items: center; gap: var(--space-2); }
.checklist .icon { color: var(--color-text-brand); flex: none; }
.file-strip {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-subtle, var(--color-bg-canvas));
}
.file-strip > .icon { color: var(--color-text-brand); flex: none; }
.file-strip__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.import-summary { gap: var(--space-4); }
.import-table { min-width: 900px; }
.import-table td:first-child { width: 64px; }
.import-row--bad { background: var(--color-status-danger-bg); }
.import-note--bad { color: var(--color-text-danger); font: var(--text-small-strong); }
.import-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.import-actions > p { margin: 0 auto 0 0; }
.import-done { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-8) 0 var(--space-6); }
.import-done__art { width: 132px; height: 132px; }
.import-done__title { margin: 0; font: var(--text-h2); color: var(--color-text-primary); }
.import-done__body { margin: 0; max-width: 560px; color: var(--color-text-secondary); }

/* A11 Profil guru */
.staff-page { max-width: 520px; }
.list-row__link { color: var(--color-text-brand); font: var(--text-small-strong); text-decoration: none; }
.list-row__link:hover { text-decoration: underline; }
.form-section { border: 0; margin: 0; padding: var(--space-4) 0 0; border-top: 1px solid var(--color-border-default); min-width: 0; }
.form-section__title { padding: 0; font: var(--text-body-strong); color: var(--color-text-primary); }
.form-section__desc { margin: calc(var(--space-2) * -1) 0 0; font: var(--text-small); color: var(--color-text-secondary); }
.link-inline { display: inline-flex; align-items: center; gap: var(--space-2); align-self: flex-start; color: var(--color-text-brand); font: var(--text-small-strong); text-decoration: none; padding: var(--space-1) 0; }
.link-inline:hover { text-decoration: underline; }

/* ---------- Fase 3: absensi (B01–B04) & hari sekolah ---------- */
.att-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.att-filter .field { margin: 0; }
.att-filter__class { width: 220px; }
.att-filter__date { width: 220px; }
.att-filter__info { margin-left: auto; align-self: center; }
.att-saved { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-small-strong); color: var(--color-status-success-fg); }

.att-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); }
.att-summary__day { display: flex; align-items: center; gap: var(--space-2); flex-basis: 100%; margin: 0; font: var(--text-small-strong); color: var(--color-text-secondary); }
.att-summary__text { margin: 0; font: var(--text-body-strong); color: var(--color-text-primary); }
.att-summary__all { margin-left: auto; }
.att-counts { display: flex; gap: var(--space-8); margin: 0; }
.att-counts--wide { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.att-count { display: flex; flex-direction: column-reverse; gap: var(--space-1); }
.att-count dt { display: flex; align-items: center; gap: 6px; font: var(--text-small); color: var(--color-text-secondary); }
.att-count dd { margin: 0; font: var(--text-h2); color: var(--color-text-primary); font-variant-numeric: tabular-nums; }
.att-count__dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-attendance-hadir); }
.att-count--izin .att-count__dot, .att-count__dot.att-count--izin { background: var(--color-attendance-izin); }
.att-count--sakit .att-count__dot, .att-count__dot.att-count--sakit { background: var(--color-attendance-sakit); }
.att-count--alpa .att-count__dot, .att-count__dot.att-count--alpa { background: var(--color-attendance-alpa); }

.att-table { min-width: 760px; }
.att-col-no { width: 48px; }
.att-col-note { width: 34%; }
.att-student { min-width: 0; flex-wrap: nowrap; }
.att-student__texts { display: flex; flex-direction: column; min-width: 0; }
.att-student__name { font: var(--text-body-medium); color: var(--color-text-primary); }
.att-student__sub { font: var(--text-caption); color: var(--color-text-muted); }
.att-row--error { background: var(--color-status-danger-bg); }
.att-other { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-caption); color: var(--color-text-secondary); }
.att-row__error { margin-top: var(--space-1); }

.att-toggle { display: inline-flex; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.att-toggle__opt { position: relative; display: block; }
.att-toggle__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.att-toggle__opt span {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--color-border-default); border-radius: var(--radius-sm);
  background: var(--color-bg-surface); font: var(--text-small-strong); color: var(--color-text-secondary);
}
.att-toggle__opt:hover span { border-color: var(--color-border-strong); }
.att-toggle__opt input:focus-visible + span { box-shadow: var(--focus-ring); }
.att-toggle__opt--hadir input:checked + span { background: var(--color-attendance-hadir-soft); border: 2px solid var(--color-border-brand); color: var(--color-text-brand); }
.att-toggle__opt--izin input:checked + span { background: var(--color-attendance-izin); border-color: var(--color-attendance-izin); color: #FFFFFF; }
.att-toggle__opt--sakit input:checked + span { background: var(--color-attendance-sakit); border-color: var(--color-attendance-sakit); color: #FFFFFF; }
.att-toggle__opt--alpa input:checked + span { background: var(--color-attendance-alpa); border-color: var(--color-attendance-alpa); color: #FFFFFF; }
.att-toggle:disabled .att-toggle__opt input { cursor: default; }
.att-toggle:disabled .att-toggle__opt span { opacity: .75; }
.att-toggle:disabled .att-toggle__opt input:checked + span { opacity: 1; }

.att-note {
  width: 100%; min-height: 36px; padding: 0 var(--space-3);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; font: var(--text-small); color: var(--color-text-primary);
}
.att-note:hover { border-color: var(--color-border-default); }
.att-note:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--focus-ring); background: var(--color-bg-surface); }
.att-note[readonly] { border-color: transparent; box-shadow: none; }
.att-note::placeholder { color: var(--color-text-muted); }

.att-footer {
  position: sticky; bottom: var(--space-4); z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin-top: var(--space-4); padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
  background: var(--color-bg-surface); box-shadow: var(--shadow-1);
}
.att-footer__text { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }

/* Mobile (B02): baris jadi kartu, keterangan di bawah. */
@media (max-width: 719px) {
  .att-filter__class, .att-filter__date { width: 100%; }
  .att-filter__units { width: 100%; }
  .att-summary { gap: var(--space-3); }
  .att-summary__all { margin-left: 0; width: 100%; justify-content: center; }
  .att-counts { width: 100%; justify-content: space-between; gap: var(--space-2); }
  .att-table-wrap { border: 0; background: transparent; overflow: visible; }
  .att-table, .att-table tbody { display: block; min-width: 0; }
  .att-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .att-table tr.att-row {
    display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-3); align-items: center;
    padding: var(--space-3); margin-bottom: var(--space-2);
    border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface);
  }
  .att-table tr.att-row td { display: block; height: auto; padding: 0; border: 0; }
  .att-note { display: block; }
  .att-footer__text { font: var(--text-caption); }
  .att-table .att-col-no { display: none !important; }
  .att-table .att-col-note { grid-column: 1 / -1; width: auto; }
  .att-note { border-color: var(--color-border-default); }
  .att-toggle { gap: 4px; }
  .att-toggle__opt span { width: 34px; height: 34px; }
  .att-footer { bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); padding: var(--space-3); }
  .att-footer .btn { width: 100%; }
}

/* B03 */
.child-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.child-card__texts { min-width: 0; }
.child-card__name { margin: 0; font: var(--text-body-strong); color: var(--color-text-primary); }
.child-card__sub { margin: 0; font: var(--text-caption); color: var(--color-text-secondary); }
.month-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.month-nav__texts { text-align: center; }
.month-nav__title { margin: 0; font: var(--text-title); color: var(--color-text-primary); }
.month-nav__sub { margin: 0; font: var(--text-caption); color: var(--color-text-secondary); }
.icon-btn.is-disabled { opacity: .4; pointer-events: none; }
.trend {
  display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); background: var(--color-status-success-bg);
  font: var(--text-small-strong); color: var(--color-status-success-fg);
}
.trend--down { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.att-cal { padding: var(--space-4) var(--space-3); }
.att-cal__grid { display: grid; gap: var(--space-2); }
.att-cal__row { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.att-cal__head span { text-align: center; font: var(--text-caption); color: var(--color-text-secondary); }
.att-cal__day {
  display: grid; place-items: center; aspect-ratio: 1; max-height: 44px;
  border: 1px solid transparent; border-radius: var(--radius-md);
  font: var(--text-small); color: var(--color-text-secondary); font-variant-numeric: tabular-nums;
}
.att-cal__day.is-out { color: var(--color-text-disabled); }
.att-cal__day--hadir { background: var(--color-attendance-hadir-soft); color: var(--color-status-success-fg); font-weight: 700; }
.att-cal__day--izin { background: var(--color-attendance-izin-soft); color: var(--color-status-info-fg); font-weight: 700; }
.att-cal__day--sakit { background: var(--color-attendance-sakit-soft); color: var(--color-status-warning-fg); font-weight: 700; }
.att-cal__day--alpa { background: var(--color-attendance-alpa-soft); color: var(--color-status-danger-fg); font-weight: 700; }
.att-cal__day--belum { border: 1px dashed var(--color-border-strong); color: var(--color-text-primary); }
.att-cal__day--libur { color: var(--color-text-muted); }
.att-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-4) 0 0; padding: 0 var(--space-1); list-style: none; font: var(--text-caption); color: var(--color-text-secondary); }
.att-legend li { display: flex; align-items: center; gap: 6px; }
.att-legend__note { margin: var(--space-2) 0 0; padding: 0 var(--space-1); font: var(--text-caption); color: var(--color-text-muted); }

/* B04 & hari sekolah */
.info-tile { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-bg-subtle); color: var(--color-icon-brand); }
.info-tile__title { margin: 0; font: var(--text-small-strong); color: var(--color-text-primary); }
.info-tile__sub { margin: 0; font: var(--text-caption); color: var(--color-text-secondary); }
.days-grid { align-items: start; margin-bottom: var(--space-6); }
.card__title-pad { padding: var(--space-5) var(--space-5) var(--space-3); margin: 0; }
.table-wrap--flush { border: 0; border-radius: 0; border-top: 1px solid var(--color-border-default); }
.seg-links--block { display: flex; width: 100%; }
.seg-links--block a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Fase 3: beranda (H01–H04) ---------- */
.page-header__desc--chip { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.home-sub { font: var(--text-body); color: var(--color-text-secondary); }
.home-sub:empty { display: none; }
.home-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.home-actions:not(:has(*)) { display: none; }
@media (max-width: 1023.98px) {
  .home-actions > .btn { flex: 1 1 100%; }
}

/* ---------- Layar datar Mushaf (Figma 03–05: Absensi, Nilai) ---------- */
.flat { display: flex; flex-direction: column; gap: var(--space-5); }
.flat__sub { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.flat__sub strong { color: var(--color-text-primary); font-weight: 600; }
.flat__section { padding-top: var(--space-5); border-top: 1px solid var(--color-border-default); }
.tabs-line { display: flex; border-bottom: 1px solid var(--color-border-default); margin-bottom: calc(-1 * var(--space-2)); overflow-x: auto; scrollbar-width: none; }
.tabs-line a {
  flex: 1 0 auto; min-height: 48px; display: grid; place-items: center; padding: 0 var(--space-4);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font: var(--text-body-medium); color: var(--color-text-secondary); text-decoration: none; white-space: nowrap;
}
.tabs-line a:hover { color: var(--color-text-primary); }
.tabs-line a[aria-current] { border-bottom-color: var(--color-bg-brand); color: var(--color-text-primary); font-weight: 600; }
.tabs-line a:focus-visible { box-shadow: inset var(--focus-ring); outline: none; }
.icon-btn--round { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-strong); color: var(--color-text-primary); }
.icon-btn--round.is-disabled { border-color: var(--color-border-default); color: var(--color-text-disabled); }
.big-stat__label { margin: 0; font: var(--text-small); font-weight: 500; color: var(--color-text-secondary); }
.big-stat__value { margin: var(--space-1) 0; font: var(--text-display); font-size: 40px; line-height: 1.15; letter-spacing: -.5px; }
.big-stat__note { margin: 0 0 var(--space-3); font: var(--text-small); color: var(--color-text-secondary); }
.stack-bar { display: block; width: 100%; height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-bg-muted); }
.stack-bar__seg--hadir { fill: var(--color-attendance-hadir); }
.stack-bar__seg--izin { fill: var(--color-attendance-izin); }
.stack-bar__seg--sakit { fill: var(--color-attendance-sakit); }
.stack-bar__seg--alpa { fill: var(--color-attendance-alpa); }
.count-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; padding: 0; list-style: none; font: var(--text-caption); color: var(--color-text-secondary); }
.count-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.count-legend__item.is-on { color: var(--color-text-primary); font-weight: 600; }
.dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-attendance-hadir); }
.dot--izin { background: var(--color-attendance-izin); }
.dot--sakit { background: var(--color-attendance-sakit); }
.dot--alpa { background: var(--color-attendance-alpa); }
.cal__grid { display: grid; row-gap: var(--space-1); }
.cal__row { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__head span { text-align: center; font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); padding-bottom: var(--space-2); }
.cal__day { position: relative; display: grid; place-items: center; height: 50px; font: var(--text-body); color: var(--color-text-primary); }
.cal__day.is-out, .cal__day--libur { color: var(--color-text-disabled); }
.cal__day--hadir, .cal__day--izin, .cal__day--sakit, .cal__day--alpa { font-weight: 600; }
.cal__day--hadir::after, .cal__day--izin::after, .cal__day--sakit::after, .cal__day--alpa::after {
  content: ""; position: absolute; bottom: 7px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
}
.cal__day--hadir::after { background: var(--color-attendance-hadir); }
.cal__day--izin::after { background: var(--color-attendance-izin); }
.cal__day--sakit::after { background: var(--color-attendance-sakit); }
.cal__day--alpa::after { background: var(--color-attendance-alpa); }
.cal__day--belum .cal__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px dashed var(--color-border-strong); font-weight: 600; }
.cal__legend { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.cal__legend-ring { width: 12px; height: 12px; border-radius: 50%; border: 1px dashed var(--color-border-strong); }
.note-status { display: inline-flex; align-items: center; gap: 6px; font: var(--text-caption); font-weight: 600; color: var(--color-status-info-fg); }
.note-status--sakit { color: var(--color-status-warning-fg); }
.note-status--alpa { color: var(--color-status-danger-fg); }
.score-list { list-style: none; margin: 0; padding: 0; }
.score-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
.score-row:first-child { border-top: 0; padding-top: 0; }
a.score-row--link { color: inherit; text-decoration: none; }
.score-list > li:first-child > .score-row { border-top: 0; padding-top: 0; }
.score-list > li + li > .score-row { border-top: 1px solid var(--color-border-default); }
.score-row--link > .icon { flex: none; color: var(--color-text-secondary); }
a.score-row--link:hover .score-row__name { color: var(--color-text-brand); }
.score-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.score-row__name { font: var(--text-body-medium); }
.score-row__sub { font: var(--text-small); color: var(--color-text-secondary); }
.score-row__warn { color: var(--color-text-danger); font-weight: 600; }
.score-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.score-row__score { font: var(--text-h3); font-size: 18px; font-variant-numeric: tabular-nums; }
.score-row.is-below .score-row__score { color: var(--color-text-danger); }
.score-row__delta { font: var(--text-caption); font-weight: 500; color: var(--color-text-secondary); }
.score-row__delta--up { color: var(--color-status-success-fg); }
.score-row__delta--down { color: var(--color-status-warning-fg); }
/* Bagian bersama datar: akun, direktori, profil guru, berita */
.kv--flat { padding: 0; }
.kv--flat .kv__row { padding: var(--space-3) 0; }
.list--flat { background: none; border: 0; border-radius: 0; overflow: visible; }
.list--flat .list-row { padding-left: 0; padding-right: 0; }
.list-row--button { width: 100%; border: 0; border-bottom: 1px solid var(--color-border-default); background: none; text-align: left; cursor: pointer; font: inherit; }
.list--flat form:last-child .list-row--button { border-bottom: 0; }
.list-row--danger .list-row__title { color: var(--color-text-danger); }
.icon-tile--danger { background: var(--color-status-danger-bg); color: var(--color-text-danger); }
.list-row--quiet .list-row__title { font: var(--text-body-medium); color: var(--color-text-secondary); }
.list-row__texts--indent { padding-left: 52px; }
.profile-head__sub { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.verified { display: inline-flex; align-items: center; gap: 4px; font: var(--text-caption); font-weight: 600; color: var(--color-status-success-fg); }
.news-row__photo { flex: none; width: 72px; height: 72px; border-radius: var(--radius-md); object-fit: cover; }
.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-list > li { border-top: 1px solid var(--color-border-default); }
.dir-list > li:first-child { border-top: 0; }
.dir-list .dir-card { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; text-decoration: none; }
.dir-list .dir-card > .icon { flex: none; align-self: center; margin-left: auto; color: var(--color-text-secondary); }
.dir-list .dir-card--link:hover .dir-card__name { color: var(--color-text-brand); }
.staff-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.staff-head__name { margin: var(--space-3) 0 0; font: var(--text-h2); }
.staff-head__sub { margin: 0; font: var(--text-body); color: var(--color-text-secondary); }
.article { gap: var(--space-4); }
.btn--block-mobile { align-self: flex-start; }
.form-overline { padding-top: var(--space-5); border-top: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
@media (max-width: 1023.98px) { .btn--block-mobile { align-self: stretch; width: 100%; } }
.complaint-head { display: flex; flex-direction: column; gap: var(--space-2); }
.complaint-head__title { margin: 0; font: var(--text-h2); }
.thread__avatar { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-bg-muted); font: var(--text-caption); font-weight: 600; color: var(--color-text-primary); }
.thread__msg--school .thread__avatar { background: var(--color-bg-brand); color: var(--color-text-on-brand); }
.thread__body { min-width: 0; flex: 1; }
.att-view { display: flex; flex-direction: column; gap: var(--space-2); }
.att-view .overline { color: var(--color-text-secondary); }
.att-view__value { display: flex; align-items: baseline; gap: var(--space-2); font-size: 16px; }
.att-view__value strong { font: var(--text-display); font-size: 32px; letter-spacing: -.4px; }
.att-view__value span { font: var(--text-body-strong); }
.att-view__empty { margin: 0; font: var(--text-h3); font-size: 20px; }
.student-list { list-style: none; margin: 0; padding: 0; }
.student-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
.student-row:first-child { border-top: 0; padding-top: 0; }
.student-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.student-row__name { font: var(--text-body-medium); }
.student-row__sub { font: var(--text-small); color: var(--color-text-secondary); }
.status-text { flex: none; font: var(--text-caption); font-weight: 600; color: var(--color-status-success-fg); }
.status-text--izin { color: var(--color-status-info-fg); }
.status-text--sakit { color: var(--color-status-warning-fg); }
.status-text--alpa { color: var(--color-status-danger-fg); }
.status-text--belum { color: var(--color-text-secondary); }
.recap-list { display: flex; flex-direction: column; }
.recap-class { border-top: 1px solid var(--color-border-default); }
.recap-class:first-child { border-top: 0; }
.recap-class__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; cursor: pointer; list-style: none; }
.recap-class__head::-webkit-details-marker { display: none; }
.recap-class__head:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.recap-class__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.recap-class__name { font: var(--text-body-strong); }
.recap-class__sub { font: var(--text-small); color: var(--color-text-secondary); }
.recap-class__count { font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.recap-rows { list-style: none; margin: 0 0 var(--space-3); padding: 0 0 0 52px; }
.recap-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; color: inherit; text-decoration: none; }
.recap-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.recap-row__name { font: var(--text-small); font-weight: 500; }
.recap-row__sub { font: var(--text-caption); color: var(--color-text-secondary); }
.recap-row__avg { font: var(--text-small-strong); font-variant-numeric: tabular-nums; }
.recap-row .status-text { width: 64px; text-align: right; }
a.recap-row:hover .recap-row__name { color: var(--color-text-brand); }
@media (max-width: 1023.98px) {
  .users-card:has(.recap-list) { border: 0; background: none; box-shadow: none; overflow: visible; }
  .users-card:has(.recap-list) .users-toolbar { padding: 0 0 var(--space-3); border: 0; }
  .users-card:has(.recap-list) .users-toolbar > p.muted { display: none; }
}
.note-status--hadir { color: var(--color-status-success-fg); }
.note-status--belum { color: var(--color-text-secondary); }
.dot--belum { background: var(--color-border-strong); }
.score-head { display: flex; align-items: baseline; justify-content: space-between; }
.score-head__cols, .score-cols { display: grid; grid-template-columns: 40px 40px; gap: var(--space-2); text-align: right; }
.score-head__cols { font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
.score-cols__prev { font: var(--text-body); color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.score-cols__now { font: var(--text-h3); font-size: 18px; font-variant-numeric: tabular-nums; }
.score-cols__now.is-below { color: var(--color-text-danger); }
.privacy-note--top { border-top: 0; padding-top: 0; }
.privacy-note strong { color: var(--color-text-primary); }
/* Absensi guru (Figma 47:1965, 47:2059, 47:2153) */
.att-pick { display: flex; flex-direction: column; gap: var(--space-4); }
.att-pick .field { margin: 0; }
.att-pick .att-filter__class, .att-pick .att-filter__date { width: 100%; max-width: 360px; }
.att-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.att-item { border-top: 1px solid var(--color-border-default); }
.att-item:first-child { border-top: 0; }
.att-item[hidden] { display: none; }
.att-item[data-status="H"] .status-text { color: var(--color-text-secondary); font-weight: 500; }
.att-row__error { color: var(--color-text-danger); font-weight: 600; }
.privacy-note--plain { border-top: 0; padding-top: var(--space-3); }
.js-only { display: none; }
.js .js-only { display: flex; }
@media (max-width: 1023.98px) {
  .att-form--list .att-footer { bottom: calc(80px + var(--space-2) + env(safe-area-inset-bottom)); }
}
/* Lembar nilai (Figma 48:1969, 48:2046) */
.grade-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.grade-head__avg { margin: 0; font: var(--text-small-strong); color: var(--color-text-secondary); }
.grade-list .grade-row { gap: var(--space-3); }
.grade-list .grade-row[hidden] { display: none; }
.grade-list .grade-input { flex: none; width: 64px; height: 44px; padding: 0; text-align: center; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); font: var(--text-h3); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.grade-list .grade-input:focus { outline: none; border-color: var(--color-border-brand); box-shadow: var(--focus-ring); }
.grade-list .grade-input.is-below { color: var(--color-text-danger); border-color: var(--color-border-danger); }
.grade-list .grade-input.is-invalid { border-color: var(--color-border-danger); background: var(--color-status-danger-bg); }
.grade-list .grade-input[readonly] { border-color: transparent; background: none; }
.grade-sub__below { color: var(--color-text-danger); font-weight: 600; }
.grade-sub__error { color: var(--color-text-danger); font-weight: 600; }
.att-form--list, .grade-form--list { display: flex; flex-direction: column; gap: var(--space-3); }
.grade-footer__btns { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.grade-footer__error { color: var(--color-text-danger); }
@media (max-width: 1023.98px) {
  .grade-form--list .att-footer { bottom: calc(80px + var(--space-2) + env(safe-area-inset-bottom)); }
  .grade-footer__btns { width: 100%; }
  .grade-footer__btns .btn { flex: 1 1 0; }
}
.privacy-note { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border-default); font: var(--text-small); color: var(--color-text-secondary); }
.privacy-note .icon { flex: none; margin-top: 2px; }
@media (min-width: 1024px) {
  .flat { max-width: 720px; }
}

/* ---------- Beranda: lihat "Beranda kartu" di akhir berkas ---------- */
.watch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.watch { display: flex; gap: var(--space-3); padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
.watch:first-child { border-top: 0; padding-top: 0; }
.watch__dot { flex: none; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--color-attendance-hadir); }
.watch--warn .watch__dot { background: var(--color-bg-highlight); }
.watch--info .watch__dot { background: var(--color-attendance-izin); }
.watch__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.watch__texts--link:hover .watch__title { color: var(--color-text-brand); }
.watch__title { font: var(--text-body-strong); }
.watch--ok .watch__title { font-weight: 500; }
.watch__sub { font: var(--text-small); color: var(--color-text-secondary); }
.watch__link { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--space-2); font: var(--text-small-strong); color: var(--color-text-brand); text-decoration: none; }
.watch__link:hover { text-decoration: underline; }
.home-section__meta { font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
.watch__btn { align-self: flex-start; margin-top: var(--space-3); }
.week-strip { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(48px, 1fr)); gap: var(--space-2); }
.week-strip__day { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3); border-radius: var(--radius-md); background: var(--color-status-success-bg); color: var(--color-status-success-fg); }
.week-strip__label { font: var(--text-caption); font-weight: 600; }
.week-strip__value { font: var(--text-h3); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.week-strip__day.is-absent { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.week-strip__day.is-empty { background: var(--neutral-50); color: var(--neutral-600); }
/* ---------- Tugas hari ini (guru): kartu bento ---------- */
.task-progress { list-style: none; display: flex; gap: 4px; margin: calc(var(--space-2) * -1) 0 var(--space-4); padding: 0; }
.task-progress__seg { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--color-bg-muted); }
.task-progress__seg.is-done { background: var(--color-bg-brand); }
.task-note, .task-clear { display: flex; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font: var(--text-small); }
.task-note { background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.task-clear { background: var(--color-status-success-bg); color: var(--color-status-success-fg); font: var(--text-body-strong); }
.task-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; }
.task { --task-bg: var(--color-status-warning-bg); --task-fg: var(--color-status-warning-fg); position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--task-bg); }
.task--danger { --task-bg: var(--color-status-danger-bg); --task-fg: var(--color-status-danger-fg); }
.task--info { --task-bg: var(--color-status-info-bg); --task-fg: var(--color-status-info-fg); }
.task--ok { --task-bg: var(--color-status-success-bg); --task-fg: var(--color-status-success-fg); }
.task:has(.task__title:focus-visible) { box-shadow: var(--focus-ring); }
.task__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--task-fg); }
.task__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.task__head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: var(--space-1); }
.task__title { font: var(--text-body-strong); color: var(--color-text-primary); text-decoration: none; overflow-wrap: anywhere; }
.task__title::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.task__title:focus-visible { outline: none; }
.task__badge { flex: none; padding: 2px 8px; border-radius: var(--radius-full); background: var(--color-bg-surface); color: var(--task-fg); font: var(--text-caption); font-weight: 700; white-space: nowrap; }
.task__sub { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.task__chips { position: relative; z-index: 1; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; }
.task__chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: var(--radius-full); background: var(--color-bg-surface); color: var(--task-fg); font: var(--text-small-strong); text-decoration: none; }
.task__chip:hover { box-shadow: inset 0 0 0 1.5px currentColor; }
.task__chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.task__chip.is-urgent { background: var(--color-status-danger-fg); color: var(--color-text-on-brand); }
.task__btn { align-self: flex-start; margin-top: var(--space-2); pointer-events: none; }
.task__chev { flex: none; align-self: center; color: var(--task-fg); }
.task-done__title { margin: var(--space-5) 0 var(--space-1); font: var(--text-caption); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.task-done { list-style: none; margin: 0; padding: 0; }
.task-done li + li { border-top: 1px solid var(--color-border-default); }
.task-done__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; color: var(--color-text-brand); text-decoration: none; }
.task-done__item > .icon:last-child { color: var(--color-text-muted); }
.task-done__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.task-done__name { font: var(--text-body); font-weight: 600; color: var(--color-text-primary); }
.task-done__sub { font: var(--text-small); color: var(--color-text-secondary); }
.task-done__item:hover .task-done__name { color: var(--color-text-brand); }
@media (min-width: 1024px) {
  .task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
/* ---------- Bento: kotak ringkasan (pill & statistik) ---------- */
.bento, .stat-card { --bento-bg: var(--color-status-success-bg); --bento-fg: var(--color-status-success-fg); }
.bento { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(var(--bento-cols, 4), minmax(0, 1fr)); }
.bento--2 { --bento-cols: 2; gap: var(--space-3); }
.bento--3 { --bento-cols: 3; }
.bento--4 { --bento-cols: 4; }
.bento__tile { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: var(--space-3); border-radius: var(--radius-md); background: var(--bento-bg); color: var(--bento-fg); }
.bento--2 .bento__tile { padding: var(--space-4); border-radius: var(--radius-lg); gap: var(--space-1); }
.bento__tile--hadir, .bento__tile--brand, .stat-card--brand { --bento-bg: var(--color-status-success-bg); --bento-fg: var(--color-status-success-fg); }
.bento__tile--izin, .bento__tile--info, .stat-card--info { --bento-bg: var(--color-status-info-bg); --bento-fg: var(--color-status-info-fg); }
.bento__tile--sakit, .bento__tile--warning, .stat-card--warning { --bento-bg: var(--color-status-warning-bg); --bento-fg: var(--color-status-warning-fg); }
.bento__tile--alpa, .bento__tile--danger, .stat-card--danger { --bento-bg: var(--color-status-danger-bg); --bento-fg: var(--color-status-danger-fg); }
.bento__tile--belum { --bento-bg: var(--neutral-50); --bento-fg: var(--color-text-primary); }
.bento__tile.is-zero { --bento-bg: var(--neutral-50); --bento-fg: var(--neutral-600); }
.bento__value { display: flex; align-items: baseline; gap: 2px; margin: 0; font-variant-numeric: tabular-nums; }
.bento__value strong { font: var(--text-h2); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.3px; }
.bento--2 .bento__value strong { font-size: 32px; letter-spacing: -.5px; }
.bento__unit { font: var(--text-small-strong); opacity: .85; }
.bento__label { display: inline-flex; align-items: center; gap: 2px; margin: 0; font: var(--text-caption); font-weight: 600; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.bento__note { margin: var(--space-1) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.bento__stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bento__stretch:focus-visible { outline: none; }
.bento__tile--link:has(.bento__stretch:focus-visible) { box-shadow: var(--focus-ring); }
.bento__tile--link:hover { filter: brightness(.97); }
.grid:has(> .stat-card) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); align-content: start; }
.bento-caption { margin: var(--space-2) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.big-stat .bento { margin-top: var(--space-3); }
.stat-pair { display: grid; grid-template-columns: 1fr 1fr; }
.stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat + .stat { padding-left: var(--space-5); border-left: 1px solid var(--color-border-default); }
.stat__label { margin: 0 0 var(--space-1); font: var(--text-small); font-weight: 500; color: var(--color-text-secondary); }
.stat__value { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.stat__value strong { font: var(--text-display); font-size: 40px; line-height: 1.1; letter-spacing: -.5px; }
.stat__value span { font: var(--text-body-strong); }
.stat__note { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.stat__link { display: inline-flex; align-items: center; gap: 2px; margin-top: var(--space-3); font: var(--text-small-strong); color: var(--color-text-brand); text-decoration: none; }
.stat__link:hover { text-decoration: underline; }

.banners__track { display: flex; gap: var(--space-8); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.banners__track::-webkit-scrollbar { display: none; }
.notice { position: relative; flex: 0 0 100%; scroll-snap-stop: always; scroll-snap-align: start; display: flex; gap: var(--space-3); color: inherit; text-decoration: none; }
.notice__dot { flex: none; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--color-bg-highlight); }
.notice__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.notice__overline { font: var(--text-overline); letter-spacing: .8px; text-transform: uppercase; color: var(--color-text-brand); }
.notice__title { font: var(--text-body-strong); }
.notice__body { font: var(--text-small); color: var(--color-text-secondary); }
.notice__count { font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
a.notice:hover .notice__title { color: var(--color-text-brand); }

.agenda-list, .news-list { list-style: none; margin: 0; padding: 0; }
.agenda-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; border-top: 1px solid var(--color-border-default); }
.agenda-row:first-child { border-top: 0; padding-top: var(--space-1); }
.agenda-row__date { flex: none; display: flex; flex-direction: column; align-items: center; width: 38px; }
.agenda-row__day { font: var(--text-h3); font-size: 20px; line-height: 1.1; }
.agenda-row__month { font: var(--text-overline); letter-spacing: .6px; text-transform: uppercase; color: var(--color-text-secondary); }
.agenda-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.agenda-row__title { font: var(--text-body-strong); }
.agenda-row__sub { font: var(--text-small); color: var(--color-text-secondary); }
a.agenda-row--link { color: inherit; text-decoration: none; }
li:first-child > .agenda-row--link { border-top: 0; padding-top: var(--space-1); }
.agenda-list > li + li > .agenda-row--link { border-top: 1px solid var(--color-border-default); }
a.agenda-row--link:hover .agenda-row__title { color: var(--color-text-brand); }
.agenda-row__title--small { font: var(--text-small); color: var(--color-text-primary); }
.agenda-row__tag { flex: none; font: var(--text-caption); font-weight: 500; color: var(--color-text-secondary); }
.agenda-row--libur .agenda-row__tag { color: var(--color-status-warning-fg); }

.news-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--color-border-default); color: inherit; text-decoration: none; }
.news-list li:first-child .news-row { border-top: 0; padding-top: var(--space-1); }
.news-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.news-row > .icon { flex: none; color: var(--color-text-secondary); }
.news-row__cat { font: var(--text-overline); letter-spacing: .8px; text-transform: uppercase; color: var(--color-text-brand); }
.news-row__title { font: var(--text-body-strong); }
.news-row:hover .news-row__title { color: var(--color-text-brand); }
.news-row__meta { font: var(--text-small); color: var(--color-text-secondary); }

.menu-list { display: flex; flex-direction: column; }
.menu-list__item { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); color: var(--color-text-secondary); text-decoration: none; }
.menu-list__item:first-child { border-top: 0; }
.menu-list__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.menu-list__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-list__title { font: var(--text-body-strong); color: var(--color-text-primary); }
.menu-list__sub { font: var(--text-small); color: var(--color-text-secondary); }
.menu-list__item:hover .menu-list__title { color: var(--color-text-brand); }


.pick { position: relative; }
.pick__btn {
  display: inline-flex; align-items: center; gap: var(--space-1); min-height: 32px; padding: 0 var(--space-3);
  border-radius: var(--radius-full); background: var(--color-bg-brand-soft); color: var(--color-text-brand);
  font: var(--text-small-strong); cursor: pointer; list-style: none;
}
.pick__btn::-webkit-details-marker { display: none; }
.pick__btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }
.pick__menu {
  position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: 5; min-width: 200px; padding: var(--space-1);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); box-shadow: var(--shadow-1);
}
.pick__menu a { display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-primary); text-decoration: none; font: var(--text-small); }
.pick__menu a:hover { background: var(--color-bg-subtle); }
.pick__menu a[aria-current] { font-weight: 600; color: var(--color-text-brand); }


.meter { display: block; width: 100%; height: 6px; margin: var(--space-1) 0; }
.meter--stack { height: 8px; border-radius: var(--radius-full); overflow: hidden; }
.meter__track { fill: var(--color-bg-muted); }
.meter__fill { fill: var(--color-bg-brand); }
.meter__seg--hadir { fill: var(--color-attendance-hadir); }
.meter__seg--izin { fill: var(--color-attendance-izin); }
.meter__seg--sakit { fill: var(--color-attendance-sakit); }
.meter__seg--alpa { fill: var(--color-attendance-alpa); }

.att-today { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); box-shadow: var(--shadow-1); }
.att-today__title { margin: 0; font: var(--text-body-strong); }
.att-today__value { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; color: var(--color-text-secondary); font: var(--text-small); }
.att-today__value strong { font: var(--text-numeric); letter-spacing: var(--tracking-numeric); color: var(--color-text-primary); }
.att-legend--inline { margin: 0; padding: 0; gap: var(--space-2) var(--space-3); }
.att-legend--inline strong { color: var(--color-text-primary); }

.class-tile {
  display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-md);
  background: var(--color-bg-brand-soft); color: var(--color-text-brand); font: var(--text-small-strong);
}
.list-row--link:hover { background: var(--color-bg-subtle); }
.list-row--link:focus-visible { outline: none; box-shadow: inset var(--focus-ring); }
.list-row--note { min-height: 48px; gap: var(--space-2); font: var(--text-small); color: var(--color-text-secondary); }
.list-row--note .icon { color: var(--color-status-success-fg); }

.services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.services__item {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2) 0;
  border-radius: var(--radius-md); color: var(--color-text-primary); text-decoration: none; font: var(--text-caption); text-align: center;
}
.services__item .icon {
  box-sizing: content-box; width: 22px; height: 22px; padding: 13px; border-radius: var(--radius-md);
  background: var(--color-bg-brand-soft); color: var(--color-icon-brand);
}
.services__item:hover .icon { background: var(--color-bg-brand-soft-hover); }
.services__item:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.home-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
@media (max-width: 1199px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fase 4: nilai (N01, N03–N05) ---------- */
.grade-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.grade-filter .field { margin: 0; }
.grade-filter__class, .grade-filter__month { width: 200px; }
.grade-filter__subject { width: 280px; }
.grade-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); margin-bottom: var(--space-3); }
.grade-summary__title { display: flex; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-body-strong); color: var(--color-text-primary); }
.grade-summary__count { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.grade-summary .att-saved { flex-basis: 100%; margin: 0; }
.grade-table { min-width: 560px; }
.grade-table td { height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.grade-col-prev { width: 120px; text-align: center; color: var(--color-text-secondary); }
.grade-col-score { width: 140px; text-align: center; }
.grade-sub__prev { display: none; }
.grade-sub__error { color: var(--color-text-danger); }
.grade-sub.has-live-error > :not(.grade-sub__live) { display: none; }
.grade-input {
  width: 72px; height: 44px; padding: 0 var(--space-2);
  border: 1px solid var(--color-border-default); border-radius: var(--radius-md);
  background: var(--color-bg-surface); color: var(--color-text-primary);
  font: var(--text-body-strong); text-align: center;
}
.grade-input:focus { outline: none; border-color: var(--color-border-brand); box-shadow: var(--focus-ring); }
.grade-input[readonly] { background: var(--color-bg-subtle); color: var(--color-text-secondary); }
.grade-input.is-below { color: var(--color-status-warning-fg); }
.grade-input.is-invalid { border-color: var(--color-border-danger); background: var(--color-status-danger-bg); color: var(--color-text-danger); }
.grade-row--error .att-student__name { color: var(--color-text-danger); }
.grade-footer { justify-content: flex-end; }
.grade-footer__error { margin-right: auto; color: var(--color-text-danger); }
.grade-footer__error[hidden] { display: none; }

/* N05 mobile: kolom nilai bulan lalu pindah ke bawah nama. */
@media (max-width: 719px) {
  .grade-filter__class, .grade-filter__month { width: calc(50% - var(--space-3) / 2); }
  .grade-filter__subject { width: 100%; }
  .grade-table { min-width: 0; }
  .grade-table thead, .grade-table .att-col-no, .grade-table .grade-col-prev, .grade-avatar, .grade-sub__nis { display: none; }
  .grade-sub__prev { display: inline; }
  .grade-col-score { width: 96px; text-align: right; }
  .grade-input { width: 72px; }
  .grade-footer { flex-direction: column; align-items: stretch; bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); padding: var(--space-3); }
  .grade-footer__error { margin: 0; text-align: center; }
  .grade-footer .btn { width: 100%; }
}

/* N04 wali */
.grade-hero { padding: var(--space-4) var(--space-5); background: var(--color-bg-brand); color: var(--color-text-on-brand); border: 0; }
.grade-hero__label { margin: 0; font: var(--text-small); opacity: .9; }
.grade-hero__value { margin: var(--space-1) 0; font: 700 40px/1.1 var(--font-sans); }
.grade-hero__note, .grade-hero__best { margin: 0; font: var(--text-small); }
.grade-list { padding: 0; margin: 0; list-style: none; }
.grade-line { gap: var(--space-3); }
.grade-line__score { min-width: 40px; text-align: right; font: var(--text-title); color: var(--color-text-primary); }
.grade-line__below { color: var(--color-status-warning-fg); }
.grade-delta { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; font: var(--text-small-strong); color: var(--color-text-secondary); }
.grade-delta--up { color: var(--color-status-success-fg); }
.grade-delta--down { color: var(--color-text-danger); }

/* N01 */
.subject-name { font: var(--text-body-strong); color: var(--color-text-primary); }
.subject-form { padding: var(--space-5); max-width: 880px; }
.subject-classes select { min-width: 240px; }
tr.is-muted td { color: var(--color-text-muted); }
.inline-form { display: inline; }
.grade-month-select { min-width: 230px; }
.field__helper--error { color: var(--color-text-danger); }
.home-grade-tasks { margin-top: var(--space-5); }
.grade-other { display: inline-flex; flex-direction: column; align-items: center; font: var(--text-body-strong); color: var(--color-text-secondary); }
.grade-other__note { font: var(--text-caption); color: var(--color-text-muted); white-space: nowrap; }

/* ---------- Fase 5: konten sekolah ---------- */
/* News Card (Figma 11:392, Compact: 358 lebar, pad 12, gap 12, radius 14, foto 84) */

/* Agenda Item (Figma 11:417: pad 10/12, gap 12, radius 14, tanggal 48x52) */
.agenda-day--event { box-shadow: inset 0 -3px 0 var(--color-bg-brand); }
.agenda-day--ujian { box-shadow: inset 0 -3px 0 var(--color-status-info-fg); }
.agenda-day--libur { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.att-cal__day.is-today { outline: 2px solid var(--color-border-brand); outline-offset: -2px; }
.agenda-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.agenda-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-left: var(--space-2); }
.agenda-legend__dot--event { background: var(--color-bg-brand); }
.agenda-legend__dot--ujian { background: var(--color-status-info-fg); }
.agenda-legend__dot--libur { background: var(--color-status-warning-bg); border: 1px solid var(--color-status-warning-fg); }

/* Head Info Banner (Figma 11:421: pad 18/20/16, radius 20, brand) — geser dengan scroll-snap */
.contact-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.contact-row .list-row__texts { flex: 1; }

/* Baca berita & profil */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.content-narrow { max-width: 760px; }
.content-grid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: var(--space-5); }
@media (max-width: 1100px) { .content-grid { grid-template-columns: 1fr; } }
.article { display: flex; flex-direction: column; gap: var(--space-3); }
.article-card { padding: var(--space-5); background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); }
@media (max-width: 1023.98px) { .article-card { padding: 0; border: 0; border-radius: 0; background: none; } }
.article__photo { width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--radius-lg); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.article__title { margin: 0; font: var(--text-h2, 600 22px/30px var(--font-sans)); color: var(--color-text-primary); }
.article__body p { margin: 0 0 var(--space-3); font: var(--text-body); color: var(--color-text-primary); line-height: 1.7; }
.profile-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5) var(--space-4); text-align: center; }
.profile-hero__name { margin: 0; font: var(--text-title); color: var(--color-text-primary); }
.profile-hero__sub, .info-line { display: flex; align-items: flex-start; gap: var(--space-2); margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.profile-list { margin: 0; padding-left: 1.25em; display: grid; gap: var(--space-1); }
.field__textarea { display: block; width: 100%; height: auto; min-height: 120px; padding: var(--space-3) 14px; resize: vertical; line-height: 1.6;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg-surface); }
.field__textarea:focus, .field__textarea:focus-visible { border-color: var(--color-border-focus); box-shadow: inset 0 0 0 1px var(--color-border-focus), var(--focus-ring); }
.field--error .field__textarea { border-color: var(--color-border-danger); box-shadow: inset 0 0 0 1px var(--color-border-danger); }
.field__file { font: var(--text-small); }
.news-form__photo img { width: 160px; height: 100px; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- Fase 6: pengaduan & direktori ---------- */
.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-5); }
.thread__msg { display: flex; gap: var(--space-3); }
.thread__who { margin: 0 0 var(--space-1); font: var(--text-small); color: var(--color-text-primary); }
.thread__text { margin: 0 0 var(--space-2); font: var(--text-body); color: var(--color-text-primary); line-height: 1.6; }
.thread__status { margin: 0; font: var(--text-small-strong); color: var(--color-text-brand); }
.complaint-head .article__title { font: var(--text-title); }
.complaint-reply { padding: var(--space-4); }
.dir-filter { width: 100%; }
.dir-filter .search { width: 100%; max-width: 420px; }
.dir-card__texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dir-card__name { font: var(--text-body-strong); color: var(--color-text-primary); }
.dir-card__sub { font: var(--text-small); color: var(--color-text-secondary); }
.dir-card__meta { font: var(--text-caption); color: var(--color-text-muted); }

/* Mode kontras tinggi Windows: bayangan (box-shadow) tidak tampil, jadi cincin fokus diganti outline. */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; }
}

/* =====================================================================
   Beranda kartu (Figma "Qath App — UI Batch 1": H01 Wali 82:2202, H02 Pengawas 82:2463)
   Latar kanvas abu muda, kepala hijau polos, kartu putih bergaris tipis.
   ===================================================================== */
.home-hero {
  position: relative; display: flex; flex-direction: column; gap: var(--space-6);
  padding: var(--space-6) var(--space-8); border-radius: var(--radius-xl);
  background: var(--color-bg-brand); color: var(--color-text-on-brand);
}
.home-hero__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.home-hero__brand { display: inline-flex; align-items: center; gap: var(--space-2); }
.home-hero__brand img { display: block; height: auto; }
.home-hero__tools { display: inline-flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.home-hero__avatar {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-bg-brand-soft); color: var(--color-text-brand);
  font: var(--text-small-strong); text-decoration: none;
}
.home-hero__avatar:focus-visible { outline: 2px solid var(--color-text-on-brand); outline-offset: 2px; box-shadow: none; }
.home-hero__texts { display: flex; flex-direction: column; min-width: 0; }
.home-hero__kicker { margin: 0 0 var(--space-2); font: var(--text-small); color: rgb(254 254 254 / .78); }
.home-hero__hello { margin: 0 0 2px; font: var(--text-body); color: rgb(254 254 254 / .9); }
.home-hero__name { margin: 0; font: var(--text-h2); letter-spacing: -.2px; color: inherit; overflow-wrap: anywhere; }

.home-body { display: flex; flex-direction: column; gap: var(--space-8); }
.home-section { display: flex; flex-direction: column; min-width: 0; }
.home-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.home-section__title { margin: 0 0 var(--space-3); font: var(--text-title); }
.home-section__head .home-section__title { margin: 0; }
.home-section__action { flex: none; font: var(--text-small-strong); color: var(--color-text-brand); text-decoration: none; }
.home-section__action:hover { text-decoration: underline; }
.home-empty { margin: 0; padding: var(--space-4); border: 1px dashed var(--color-border-default); border-radius: var(--radius-lg); font: var(--text-small); color: var(--color-text-secondary); text-align: center; }

/* Kartu ringkasan (anak / kehadiran hari ini / tugas) */
.sum-card {
  display: flex; flex-direction: column; gap: var(--space-4); min-width: 0;
  padding: var(--space-4) var(--space-4) var(--space-5); border-radius: var(--radius-xl);
  background: var(--color-bg-surface); box-shadow: var(--shadow-2);
}
.sum-card__head { display: flex; align-items: center; gap: var(--space-3); }
.sum-card__head .avatar { background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.sum-card__who { flex: 1; min-width: 0; }
.sum-card__name { margin: 0; font: var(--text-title); font-size: 17px; }
.sum-card__sub { margin: 2px 0 0; font: var(--text-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text-secondary); }
.sum-card__sub a { color: inherit; text-decoration: none; }
.sum-card__sub a:hover { color: var(--color-text-brand); text-decoration: underline; }
.sum-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.sum-card__title { margin: 0; font: var(--text-body-strong); font-size: 16px; }
.sum-card__meta { flex: none; font: var(--text-small); color: var(--color-text-muted); }
.sum-card__note { margin: calc(-1 * var(--space-2)) 0 0; font: var(--text-small); color: var(--color-text-secondary); }
.sum-card__big { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.sum-card__big strong { font: var(--text-display); font-size: 40px; line-height: 1; letter-spacing: -.5px; color: var(--color-text-brand); }
.sum-card__big strong.is-zero { color: var(--color-text-muted); }
.sum-card__big-note { margin: 0; font: var(--text-body); color: var(--color-text-secondary); }

.today-pill {
  display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg); background: var(--color-bg-subtle); color: var(--color-text-primary); text-decoration: none;
}
.today-pill__icon { flex: none; display: grid; color: var(--color-text-muted); }
.today-pill__title { flex: 1; min-width: 0; font: var(--text-body-strong); }
.today-pill__time { flex: none; font: var(--text-small); color: var(--color-text-secondary); }
.today-pill--hadir { background: var(--color-attendance-hadir-soft); }
.today-pill--hadir .today-pill__icon, .today-pill--hadir .today-pill__title { color: var(--color-status-success-fg); }
.today-pill--izin { background: var(--color-attendance-izin-soft); }
.today-pill--izin .today-pill__icon, .today-pill--izin .today-pill__title { color: var(--color-status-info-fg); }
.today-pill--sakit { background: var(--color-attendance-sakit-soft); }
.today-pill--sakit .today-pill__icon, .today-pill--sakit .today-pill__title { color: var(--color-status-warning-fg); }
.today-pill--alpa { background: var(--color-attendance-alpa-soft); }
.today-pill--alpa .today-pill__icon, .today-pill--alpa .today-pill__title { color: var(--color-status-danger-fg); }
.today-pill--belum { background: var(--color-status-warning-bg); }
.today-pill--belum .today-pill__icon { color: var(--color-status-warning-fg); }

.sum-card__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sum-stat { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; color: inherit; text-decoration: none; }
.sum-stat + .sum-stat { padding-left: var(--space-4); margin-left: var(--space-4); border-left: 1px solid var(--color-border-default); }
.sum-stat__label { font: var(--text-caption); color: var(--color-text-secondary); }
.sum-stat__value { font: var(--text-small); color: var(--color-text-secondary); }
.sum-stat__value strong { margin-right: 2px; font: var(--text-h1); font-size: 26px; line-height: 1.2; letter-spacing: -.3px; color: var(--color-text-primary); }
.sum-stat__value strong.is-zero { color: var(--color-text-muted); }
.sum-stat__note { font: var(--text-caption); color: var(--color-text-secondary); }
a.sum-stat:hover .sum-stat__label { color: var(--color-text-brand); }

/* Batang memakai SVG: CSP melarang atribut style. */
.hbar { display: block; width: 100%; height: 6px; margin: var(--space-1) 0 2px; border-radius: var(--radius-full); overflow: hidden; }
.hbar__track { fill: var(--color-bg-muted); }
.hbar__fill { fill: var(--color-bg-brand); }
.hstack { display: block; width: 100%; height: 8px; border-radius: var(--radius-full); overflow: hidden; background: var(--color-bg-muted); }
.hstack__seg--hadir { fill: var(--color-attendance-hadir); }
.hstack__seg--izin { fill: var(--color-attendance-izin); }
.hstack__seg--sakit { fill: var(--color-attendance-sakit); }
.hstack__seg--alpa { fill: var(--color-attendance-alpa); }
.legend { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-small); color: var(--color-text-secondary); }
.legend__item strong { color: var(--color-text-primary); font-weight: 600; }
.legend__dot { width: 8px; height: 8px; border-radius: 50%; }
.legend__dot--hadir { background: var(--color-attendance-hadir); }
.legend__dot--izin { background: var(--color-attendance-izin); }
.legend__dot--sakit { background: var(--color-attendance-sakit); }
.legend__dot--alpa { background: var(--color-attendance-alpa); }

.htrend { display: inline-flex; align-items: center; gap: var(--space-1); font: var(--text-small-strong); color: var(--color-text-secondary); }
.htrend--up { color: var(--color-status-success-fg); }
.htrend--down { color: var(--color-status-danger-fg); }
.htrend--sm { font: var(--text-caption); font-weight: 600; }

/* Layanan: empat ikon */
.svc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.svc__item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; color: var(--color-text-primary); text-decoration: none; text-align: center; cursor: pointer; }
.svc__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-lg); background: var(--color-bg-brand-soft); color: var(--color-text-brand); transition: background .15s; }
.svc__label { font: var(--text-caption); font-weight: 500; line-height: 1.35; }
.svc__item:hover .svc__icon { background: var(--color-bg-brand-soft-hover); }
.svc__item:focus-visible { outline: none; }
.svc__item:focus-visible .svc__icon { box-shadow: var(--focus-ring); }

/* Pengumuman: kartu hijau geser */
.promo__track { display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--space-6)); padding: 0 var(--space-6); scroll-padding: 0 var(--space-6); }
.promo__track::-webkit-scrollbar { display: none; }
.promo__card {
  position: relative; overflow: hidden; isolation: isolate; flex: 0 0 calc(100% - 32px); scroll-snap-align: start;
  display: flex; flex-direction: column; gap: var(--space-2); min-height: 150px; padding: var(--space-5) var(--space-5) var(--space-4);
  border-radius: var(--radius-xl); background: var(--color-bg-brand); color: var(--color-text-on-brand); text-decoration: none;
}
.promo__card:only-child { flex-basis: 100%; }
.promo__deco { position: absolute; z-index: -1; right: -40px; top: -40px; width: 150px; height: 150px; border-radius: 50%; background: rgb(42 177 140 / .35); }
.promo__deco::after { content: ""; position: absolute; left: 70px; top: 120px; width: 110px; height: 110px; border-radius: 50%; background: var(--color-bg-highlight); }
.promo__overline { font: var(--text-overline); letter-spacing: .8px; text-transform: uppercase; color: rgb(254 254 254 / .8); }
.promo__title { max-width: 80%; font: var(--text-title); font-size: 18px; line-height: 1.35; }
.promo__body { max-width: 80%; font: var(--text-small); color: rgb(254 254 254 / .88); }
.promo__dots { display: flex; gap: 6px; margin-top: auto; padding-top: var(--space-2); }
.promo__dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: rgb(254 254 254 / .7); }
.promo__dot.is-on { width: 18px; background: var(--color-bg-highlight); }

/* Nilai terbaru */
.score-card { margin: 0; padding: 0; list-style: none; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.score-card__row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-4); }
.score-card__row + .score-card__row { border-top: 1px solid var(--color-border-default); }
.score-card__name { flex: 1; min-width: 0; font: var(--text-body); }
.score-card__value { flex: none; min-width: 32px; text-align: right; font: var(--text-title); font-variant-numeric: tabular-nums; }

/* Agenda */
.ev-list, .nc-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.ev { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.ev__date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 48px; height: 52px; border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.ev__day { font: var(--text-title); font-size: 17px; line-height: 1.1; }
.ev__month { font: var(--text-overline); letter-spacing: .6px; }
.ev--ujian .ev__date { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.ev__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ev__title { font: var(--text-body-strong); }
.ev__sub { font: var(--text-small); color: var(--color-text-secondary); }
.ev__tag { flex: none; font: var(--text-caption); font-weight: 600; color: var(--color-text-secondary); }
.ev--libur .ev__tag { color: var(--color-status-warning-fg); }

/* Berita */
.nc { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); color: inherit; text-decoration: none; }
.nc__thumb { flex: none; display: grid; place-items: center; width: 88px; height: 84px; border-radius: var(--radius-md); background: var(--color-bg-accent-soft); color: var(--color-text-brand); object-fit: cover; }
.nc__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
.nc__cat { min-height: 24px; padding: 0 var(--space-3); }
.nc__title { font: var(--text-body-strong); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nc__meta { font: var(--text-caption); color: var(--color-text-secondary); }
.nc:hover .nc__title { color: var(--color-text-brand); }

/* Kontak */
.contact-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.contact-card__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.contact-card__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.contact-card__title { font: var(--text-body-strong); }
.contact-card__sub { font: var(--text-small); color: var(--color-text-secondary); }

/* Daftar kelas perlu perhatian (pengawas) */
.list-card, .plain-card { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: hidden; }
.plain-card { padding: var(--space-4); }
.list-card__rows { margin: 0; padding: 0; list-style: none; }
.list-card__rows li + li { border-top: 1px solid var(--color-border-default); }
.cls-row { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-4); color: inherit; text-decoration: none; }
.cls-row:hover { background: var(--color-bg-subtle); }
.cls-row__badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-bg-brand-soft); color: var(--color-text-brand); font: var(--text-small-strong); }
.cls-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cls-row__title { font: var(--text-body-strong); }
.cls-row__sub { font: var(--text-small); color: var(--color-text-secondary); }
.cls-row .chip { flex: none; }
.list-card__foot { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-default); font: var(--text-small); color: var(--color-text-secondary); }
.list-card__foot .icon { color: var(--color-status-success-fg); }
.list-card__foot--solo { border-top: 0; }
.list-card__foot--muted { font: var(--text-caption); }

/* Tugas guru di dalam kartu ringkasan */
.sum-card--tasks .task-list { margin-top: 0; }
.sum-card--tasks .task-done__title { margin-top: var(--space-1); }

@media (max-width: 1023.98px) {
  /* Kanvas abu muda supaya kartu putih terbaca, seperti aplikasi. */
  body:has(.app--hero) { background: var(--color-bg-canvas); }
  .home-hero {
    margin: 0 calc(-1 * var(--space-6));
    padding: calc(var(--space-4) + env(safe-area-inset-top)) var(--space-6) 88px;
    border-radius: 0;
  }
  .home-lift { position: relative; z-index: 1; margin-top: -60px; }
  .home-body { margin-top: calc(-1 * var(--space-6)); gap: var(--space-8); }
  .app--hero .app__content { padding-top: 0; }
}
@media (min-width: 1024px) {
  .home-hero__brand, .svc__item--more { display: none; }
  .svc { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .home-hero { flex-direction: row-reverse; align-items: center; justify-content: space-between; padding: var(--space-6) var(--space-8); }
  .home-hero__bar { flex: none; }
  /* Dua kolom mengalir (tanpa celah baris), kartu ringkasan selebar penuh. */
  .home-body { display: block; columns: 2; column-gap: var(--space-10); max-width: 1120px; }
  .home-body > * { break-inside: avoid; margin-bottom: var(--space-8); }
  .home-body > .home-lift { column-span: all; }
  .home-lift.sum-card { box-shadow: none; border: 1px solid var(--color-border-default); }
  .promo__track { margin: 0; padding: 0; }
  .promo__card { flex-basis: 100%; }
}
/* =====================================================================
   Layar kartu: Absensi & Nilai (Figma "Qath App — UI Batch 1" B02, B03, N04, N05)
   ===================================================================== */
.flat--cards { gap: var(--space-4); }
.flat--cards > .home-section { margin-top: var(--space-2); }
.child-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.child-card .avatar { background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.child-card__texts { flex: 1; min-width: 0; }
.child-card__name { margin: 0; font: var(--text-body-strong); }
.child-card__sub { margin: 2px 0 0; font: var(--text-caption); color: var(--color-text-secondary); }

.box-btn { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); color: var(--color-text-primary); }
.box-btn:hover { background: var(--color-bg-subtle); }
.box-btn.is-disabled { color: var(--color-text-disabled); background: transparent; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.stat-row__item { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.stat-row__item strong { font: var(--text-h2); font-size: 24px; line-height: 1.2; color: var(--color-text-primary); }
.stat-row__item.is-zero strong { color: var(--color-text-muted); }
.stat-row__item > span { display: inline-flex; align-items: center; gap: var(--space-2); font: var(--text-small); color: var(--color-text-secondary); }

.trend-banner { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-attendance-hadir-soft); color: var(--color-status-success-fg); font: var(--text-small-strong); }
.trend-banner .icon { flex: none; }
.trend-banner__pct { font-weight: 700; }
.trend-banner--down { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }

.cal--card { padding: var(--space-4) var(--space-3) var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
.cal--card .cal__grid { row-gap: var(--space-2); }
.cal--card .cal__row { column-gap: var(--space-2); }
.cal--card .cal__day { height: auto; aspect-ratio: 1 / 1; max-height: 44px; border-radius: var(--radius-md); font: var(--text-small); }
.cal--card .cal__day::after { content: none; }
.cal--card .cal__day--hadir { background: var(--color-attendance-hadir-soft); color: var(--color-status-success-fg); font-weight: 700; }
.cal--card .cal__day--izin { background: var(--color-attendance-izin-soft); color: var(--color-status-info-fg); font-weight: 700; }
.cal--card .cal__day--sakit { background: var(--color-attendance-sakit-soft); color: var(--color-status-warning-fg); font-weight: 700; }
.cal--card .cal__day--alpa { background: var(--color-attendance-alpa-soft); color: var(--color-status-danger-fg); font-weight: 700; }
.cal--card .cal__day--belum { border: 1px dashed var(--color-border-strong); }
.cal--card .cal__day--belum .cal__num { width: auto; height: auto; border: 0; }
.cal--card .legend { margin-top: var(--space-3); padding: 0 var(--space-1); }
.cal--card .cal__legend { margin-top: var(--space-2); padding: 0 var(--space-1); }
.legend--start { justify-content: flex-start; gap: var(--space-2) var(--space-5); }

.note-list { margin: 0; padding: 0; list-style: none; }
.note-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); }
.note-row__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.note-row__icon--sakit { background: var(--color-attendance-sakit-soft); color: var(--color-status-warning-fg); }
.note-row__icon--izin { background: var(--color-attendance-izin-soft); color: var(--color-status-info-fg); }
.note-row__icon--alpa { background: var(--color-attendance-alpa-soft); color: var(--color-status-danger-fg); }
.note-row__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.note-row__title { font: var(--text-body-strong); }
.note-row__sub { font: var(--text-small); color: var(--color-text-secondary); }

.info-box { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-status-info-bg); color: var(--color-status-info-fg); }
.info-box > .icon { flex: none; margin-top: 1px; }
.info-box__title { margin: 0; font: var(--text-body-strong); }
.info-box__body { margin: 2px 0 0; font: var(--text-small); color: var(--color-text-primary); }

.avg-card { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg); background: var(--color-bg-brand); color: var(--color-text-on-brand); }
.avg-card__main { flex: none; display: flex; flex-direction: column; margin: 0; }
.avg-card__label { font: var(--text-caption); color: rgb(254 254 254 / .8); }
.avg-card__value { font: var(--text-display); font-size: 34px; line-height: 1.1; letter-spacing: -.5px; }
.avg-card__texts { min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.avg-card__note { margin: 0; font: var(--text-body-strong); }
.avg-card__best { margin: 0; font: var(--text-small); color: rgb(254 254 254 / .85); }
.score-card__name { display: flex; flex-direction: column; gap: 2px; }
.score-card__sub { font: var(--text-caption); color: var(--color-text-secondary); }
.score-card__row.is-below .score-card__value { color: var(--color-status-danger-fg); }
.privacy-note--plain { border-top: 0; padding-top: 0; }

@media (max-width: 1023.98px) {
  body:has(.flat--cards) { background: var(--color-bg-canvas); }
  body:has(.flat--cards) .appbar { border-bottom-color: var(--color-border-default); }
}
@media (min-width: 1024px) {
  .flat--cards { max-width: 720px; }
}

/* Absensi guru B02: kelas + tanggal, hitungan, daftar dengan tombol H I S A */
.pick-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.pick-grid .field { margin: 0; max-width: none; }
.pick-grid .field__input { background: var(--color-bg-surface); }
.att-pick__day { margin: calc(-1 * var(--space-2)) 0 0; font: var(--text-caption); color: var(--color-text-secondary); }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); }
.list-head__title { margin: 0; font: var(--text-title); }
.list-head__action { display: inline-flex; align-items: center; gap: var(--space-1); }
.list-head__action[hidden] { display: none; }
.att-list--card { margin: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: hidden; }
.att-list--card .att-item { border-top: 1px solid var(--color-border-default); }
.att-list--card .att-item:first-child { border-top: 0; }
.att-line { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
.att-line .student-row__name { font: var(--text-body-strong); }
.att-line .student-row__sub { font: var(--text-caption); }
.att-seg { flex: none; display: flex; flex-direction: row; gap: var(--space-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.att-seg__opt { position: relative; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-bg-surface); font: var(--text-small-strong); color: var(--color-text-secondary); cursor: pointer; }
.att-seg__opt input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.att-seg__opt:hover { background: var(--color-bg-subtle); }
.att-seg__opt:has(input:focus-visible) { box-shadow: var(--focus-ring); }
.att-seg__opt--hadir:has(input:checked) { border: 1.5px solid var(--color-attendance-hadir); background: var(--color-attendance-hadir-soft); color: var(--color-status-success-fg); }
.att-seg__opt--izin:has(input:checked) { border-color: var(--color-attendance-izin); background: var(--color-attendance-izin); color: var(--color-text-on-brand); }
.att-seg__opt--sakit:has(input:checked) { border-color: var(--color-attendance-sakit); background: var(--color-attendance-sakit); color: var(--color-text-on-brand); }
.att-seg__opt--alpa:has(input:checked) { border-color: var(--color-attendance-alpa); background: var(--color-attendance-alpa); color: var(--color-text-on-brand); }
.att-seg:disabled .att-seg__opt { cursor: default; }
.att-note-row { display: none; padding: 0 var(--space-3) var(--space-3) var(--space-4); }
.att-note-row .field__input { min-height: 40px; font: var(--text-small); }
.att-item:has(.att-seg input:checked:not([value="H"])) .att-note-row, .att-item.has-error .att-note-row { display: block; }
.att-item.has-error .att-line .student-row__sub { color: var(--color-status-danger-fg); }
@media (max-width: 380px) {
  .att-seg__opt { width: 32px; height: 32px; }
}

/* Nilai guru N05 & daftar mapel: kartu */
.list-head__meta { margin: 0; font: var(--text-small); color: var(--color-text-secondary); }
.flat--cards .grade-filter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-3); }
.flat--cards .grade-filter__class, .flat--cards .grade-filter__month, .flat--cards .grade-filter__subject { width: auto; }
.flat--cards .grade-filter__subject { grid-column: 1 / -1; }
.flat--cards .grade-filter .field__input { background: var(--color-bg-surface); }
.grade-list--card { margin: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); overflow: hidden; }
.grade-list--card .grade-row { min-height: 64px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-default); }
.grade-list--card .grade-row:first-child { border-top: 0; }
.grade-list--card .student-row__name { font: var(--text-body-strong); }
.grade-list--card .student-row__sub { font: var(--text-caption); }
.grade-list--card .grade-row--error .student-row__name { color: var(--color-status-danger-fg); }
.score-list.list-card > li > .score-row { padding: var(--space-3) var(--space-4); min-height: 60px; }
.score-list.list-card > li:first-child > .score-row { padding-top: var(--space-3); }
.score-list.list-card > li > .score-row:hover { background: var(--color-bg-subtle); }
.flat--cards > .note-status { margin: 0; }
@media (min-width: 1024px) {
  .flat--cards .grade-filter { grid-template-columns: 200px 200px 280px; }
  .flat--cards .grade-filter__subject { grid-column: auto; }
}

.info-box--warn { background: var(--color-status-warning-bg); color: var(--color-status-warning-fg); }
.att-view { display: flex; flex-direction: column; gap: var(--space-3); }
.info-box .att-view__empty { font: var(--text-body-strong); }

/* Halaman Menu (tab terakhir di HP) */
.menu-profile { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); border-radius: var(--radius-xl); background: var(--color-bg-brand); color: var(--color-text-on-brand); text-decoration: none; }
.menu-profile .avatar { background: rgb(254 254 254 / .16); color: var(--color-text-on-brand); }
.menu-profile__texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-profile__name { font: var(--text-title); overflow-wrap: anywhere; }
.menu-profile__role { font: var(--text-small); color: rgb(254 254 254 / .82); }
.menu-profile__link { flex: none; display: inline-flex; align-items: center; gap: 2px; font: var(--text-small-strong); }
.menu-group__label { margin: 0 0 var(--space-2); padding: 0 var(--space-1); font: var(--text-overline); letter-spacing: var(--tracking-overline); text-transform: uppercase; color: var(--color-text-muted); }
.menu-list-card { display: flex; flex-direction: column; }
.menu-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); color: var(--color-text-primary); text-decoration: none; }
.menu-row + .menu-row { border-top: 1px solid var(--color-border-default); }
.menu-row:hover { background: var(--color-bg-subtle); }
.menu-row__icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--color-bg-brand-soft); color: var(--color-text-brand); }
.menu-row__label { flex: 1; min-width: 0; font: var(--text-body-medium); }
.menu-row > .icon:last-child { flex: none; color: var(--color-text-muted); }
.menu-logout { margin: var(--space-2) 0 0; }
.menu-logout__btn { color: var(--color-status-danger-fg); }
.menu-year { margin: 0; text-align: center; font: var(--text-caption); color: var(--color-text-muted); }

/* Layar kartu: halaman lain (akun, berita, agenda, direktori, pengaduan, riwayat).
   `.flat--auto` mengubah daftar datar yang ada menjadi kartu putih di kanvas abu. */
.flat--auto .flat__section { padding-top: 0; border-top: 0; }
.flat--auto .profile-head, .flat--auto .staff-head, .flat--auto .complaint-head, .flat--auto .big-stat,
.flat--auto .kv--flat, .flat--auto .list--flat, .flat--auto .news-list, .flat--auto .agenda-list,
.flat--auto .dir-list, .flat--auto .cal, .flat--auto .article, .flat--auto .thread, .flat--auto > form.flat__section {
  background: var(--color-bg-surface); border: 1px solid var(--color-border-default); border-radius: var(--radius-lg);
}
.flat--auto .profile-head, .flat--auto .complaint-head, .flat--auto .big-stat, .flat--auto .article,
.flat--auto .thread, .flat--auto > form.flat__section { padding: var(--space-4); }
.flat--auto .staff-head { align-items: center; padding: var(--space-5) var(--space-4); text-align: center; }
.flat--auto .big-stat .big-stat__note { margin-bottom: 0; }
.flat--auto .kv--flat { padding: 0 var(--space-4); }
.flat--auto .list--flat { overflow: hidden; }
.flat--auto .list--flat .list-row { padding: var(--space-3) var(--space-4); }
.flat--auto .list--flat .list-row--button { min-height: 56px; }
.flat--auto .list-row__texts--indent { padding-left: 0; }
.flat--auto .news-list, .flat--auto .agenda-list, .flat--auto .dir-list { overflow: hidden; }
.flat--auto .news-row, .flat--auto .agenda-row, .flat--auto .dir-list .dir-card { padding: var(--space-3) var(--space-4); }
.flat--auto .news-list li:first-child .news-row, .flat--auto .agenda-list > li:first-child .agenda-row,
.flat--auto .agenda-row:first-child { padding-top: var(--space-3); }
.flat--auto .dir-list > li + li { border-top: 1px solid var(--color-border-default); }
.flat--auto a.news-row:hover, .flat--auto a.agenda-row:hover, .flat--auto .dir-card--link:hover { background: var(--color-bg-subtle); }
.flat--auto .cal { padding: var(--space-4) var(--space-3) var(--space-3); }
.flat--auto .cal__grid { row-gap: var(--space-2); }
.flat--auto .cal__row { column-gap: var(--space-2); }
.flat--auto .cal__day { height: auto; aspect-ratio: 1 / 1; max-height: 44px; border-radius: var(--radius-md); font: var(--text-small); }
.flat--auto .cal__day.is-out { color: var(--color-text-muted); }
.flat--auto .agenda-day--event { box-shadow: none; background: var(--color-bg-brand-soft); color: var(--color-text-brand); font-weight: 700; }
.flat--auto .agenda-day--ujian { box-shadow: none; background: var(--color-status-info-bg); color: var(--color-status-info-fg); font-weight: 700; }
.flat--auto .agenda-legend { padding: 0 var(--space-1); }
.flat--auto .privacy-note { padding-top: 0; border-top: 0; }
.flat--auto .thread { gap: var(--space-4); }
.flat--auto .thread__msg + .thread__msg { padding-top: var(--space-4); border-top: 1px solid var(--color-border-default); }
.flat--auto .field__input, .flat--auto .search__input { background: var(--color-bg-surface); }
@media (max-width: 1023.98px) {
  body:has(.flat--auto) { background: var(--color-bg-canvas); }
  body:has(.flat--auto) .appbar { border-bottom-color: var(--color-border-default); }
  .flat--auto.sheet .edit-form, .flat--auto.edit-form { gap: var(--space-4); }
  /* Rekap nilai (Pengawas/Yayasan) di HP: tiap kelas jadi kartu. */
  body:has(.recap-list) { background: var(--color-bg-canvas); }
  body:has(.recap-list) .appbar { border-bottom-color: var(--color-border-default); }
  .recap-list { gap: var(--space-3); }
  .recap-class, .recap-class:first-child { border: 1px solid var(--color-border-default); border-radius: var(--radius-lg); background: var(--color-bg-surface); }
  .recap-class__head { padding: var(--space-3) var(--space-4); }
  .recap-rows { margin: 0; padding: 0 var(--space-4) var(--space-2); }
  .recap-row { padding: var(--space-3) 0; border-top: 1px solid var(--color-border-default); }
}

/* ---------- Pindah halaman tanpa kedip putih ----------
   View Transitions antar-dokumen (Chrome/Samsung Internet/Edge 126+): halaman lama memudar
   ke halaman baru. Nav bawah, app bar dan sidebar diberi nama sendiri supaya diam di tempat.
   Browser lain mengabaikan blok ini (pindah halaman biasa). */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 140ms; }
  .bottom-nav { view-transition-name: bottom-nav; }
  .sidebar { view-transition-name: sidebar; }
}