/* Portal PERANTAU: shared stylesheet for index.html and dashboard.html.
   Opt-in: base styles apply only under <body class="p-body">. Components use the p- prefix.
   Breakpoints: phone < 768px, tablet 768px to 1023px, desktop >= 1024px. */

/* ------------------------------------------------------------------ */
/* 1. Tokens                                                           */
/* ------------------------------------------------------------------ */
:root {
  /* Gaya Koperasi (2026-09-25): warna diambil terus dari piksel sistem Koperasi Kama.
     Latar kelabu lembut, panel putih, hairline, satu hijau utama. Tiada gradient, tiada bayang tebal. */
  /* Neutrals */
  --ground: #EEEFEE;          /* latar kawasan kandungan */
  --sidebar: #F5F6F6;         /* latar menu kiri, kepala jadual */
  --surface: #FFFFFF;
  --surface-hover: #F5F6F6;
  --panel: #F5F6F6;
  --panel-press: #E6E8E7;
  --line: #D2D5D3;
  --edge: #B4B8B6;
  --edge-strong: #6C7176;     /* sempadan input/select */
  --ink: #1D1F21;
  --ink-2: #494E52;
  --ink-3: #8A8E91;           /* petunjuk/placeholder sahaja */
  --meta: #5A5F63;
  --on-ink: #FFFFFF;

  /* Accent: satu hijau Koperasi.
     fill: bar aktif, garis tab, meter. ink: pautan, teks aksen. strong: butang utama (teks putih).
     tint: latar lembut (label status ok, meter track). */
  --accent-fill: #295C3E;
  --accent-strong: #295C3E;
  --accent-strong-hover: #224E34;
  --accent-strong-active: #1B3F2A;
  --accent-ink: #295C3E;
  --accent-tint: #E6F0E9;
  /* Ordinal meter ramp, light to dark. ramp-1 = menunggu segment */
  --ramp-1: #8FB89C;
  --ramp-2: #5F9A73;
  --ramp-3: #3D7A54;
  --ramp-4: #295C3E;
  --ramp-5: #1B3F2A;

/* Primary action (base .p-btn and .p-btn--primary) */
  --action: var(--accent-strong);
  --action-hover: var(--accent-strong-hover);
  --action-active: var(--accent-strong-active);

  /* Semantic */
  --success: #295C3E;
  --success-bg: #E6F0E9;
  --success-line: #C3D9CA;
  --pending: #8A4B12;
  --pending-bg: #FBE9D7;
  --pending-line: #EFCFAE;
  --pending-stripe: #B0671F;
  --danger: #8F2A22;
  --danger-bg: #F8E1DF;
  --danger-line: #EDC2BD;
  --danger-hover: #7A231C;
  --danger-active: #641D17;
  --info: #3A4A6B;
  --info-bg: #E9EDF4;
  --info-line: #CDD5E3;

  /* Infografik (Kama, 25 Sep: "info grafik tu penting"). Nada aksen untuk lencana ikon, kiraan,
     kategori dan carta DI DALAM panel. Rangka (menu, bar atas, latar) kekal gaya Koperasi.
     Setiap pasangan fg/bg >= 4.5:1. */
  --tone-green: var(--accent-ink);  --tone-green-bg: var(--accent-tint);
  --tone-teal: #0F6873;             --tone-teal-bg: #DDF0F1;
  --tone-amber: #8A5A00;            --tone-amber-bg: #FFF1D6;
  --tone-blue: #2F4F8A;             --tone-blue-bg: #E4EBF7;
  --tone-rose: #A12E3A;             --tone-rose-bg: #FBE4E6;
  --tone-gold: #B8902F;             /* bintang / mata (tanda sahaja, bukan teks kecil) */
  --count-bg: var(--danger);        /* lencana kiraan "baru" */

  /* Browser surfaces */
  --select-bg: var(--accent-tint);
  --scrim: rgba(29, 31, 33, .45);
  --focus: var(--accent-ink);

  /* Type */
  --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-19: 1.1875rem;
  --fs-23: 1.4375rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.5;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Space */
  --sp-4: .25rem;
  --sp-8: .5rem;
  --sp-12: .75rem;
  --sp-16: 1rem;
  --sp-20: 1.25rem;
  --sp-24: 1.5rem;
  --sp-32: 2rem;
  --sp-40: 2.5rem;
  --sp-48: 3rem;

  /* Shape and depth */
  --r-control: 4px;
  --r-card: 6px;
  --r-tag: 4px;
  --r-pill: 999px;
  --badge: 40px;
  --shadow-float: 0 2px 10px rgba(29, 31, 33, .10);

  /* Layers */
  --z-base: 1;
  --z-sticky: 100;
  --z-bottombar: 200;
  --z-scrim: 290;
  --z-drawer: 300;
  --z-popover: 400;
  --z-toast: 500;

  /* Motion */
  --dur-fast: 150ms;
  --dur: 200ms;
  --dur-slow: 250ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);

  /* Shell metrics */
  --topbar-h: 60px;
  --sidebar-w: 300px;
  --bottombar-h: 64px;
  --content-max: 1200px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ------------------------------------------------------------------ */
/* 2. Base (opt-in via .p-body)                                        */
/* ------------------------------------------------------------------ */
html:has(> body.p-body) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-color: var(--edge) transparent;
  background: var(--ground);
}

:where(.p-body),
:where(.p-body) *,
:where(.p-body) *::before,
:where(.p-body) *::after {
  box-sizing: border-box;
}

:where(.p-body) {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  caret-color: var(--ink);
  accent-color: var(--accent-strong);
}

:where(.p-body) :where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd) { margin: 0; }
:where(.p-body) :where(h1, h2, h3, h4) { font-weight: var(--fw-semibold); line-height: var(--lh-tight); text-wrap: balance; color: var(--ink); }
:where(.p-body) :where(p) { text-wrap: pretty; }
:where(.p-body) :where(ul.p-list, ol.p-list, ul.p-nav, ol.p-steps) { list-style: none; margin: 0; padding: 0; }
:where(.p-body) :where(img, svg, video) { display: block; max-width: 100%; }
:where(.p-body) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.p-body) :where(button) { cursor: pointer; }
:where(.p-body) :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.p-body) :where(table) { border-collapse: collapse; }
:where(.p-body) :where(hr) { border: 0; border-top: 1px solid var(--line); margin: var(--sp-16) 0; }

.p-body ::selection { background: var(--select-bg); color: var(--ink); }

.p-body :focus { outline: none; }
.p-body :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Thin themed scrollbars */
.p-body,
.p-body * {
  scrollbar-width: thin;
  scrollbar-color: var(--edge) transparent;
}
.p-body ::-webkit-scrollbar { width: 8px; height: 8px; }
.p-body ::-webkit-scrollbar-track { background: transparent; }
.p-body ::-webkit-scrollbar-thumb { background: var(--edge); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: content-box; }
.p-body ::-webkit-scrollbar-thumb:hover { background-color: var(--edge-strong); }

/* Lock page scroll while a modal sheet or drawer is open */
.p-body:has(dialog.p-sheet[open]),
.p-body:has(.p-drawer.is-open) { overflow: hidden; }

/* ------------------------------------------------------------------ */
/* 3. Utilities                                                        */
/* ------------------------------------------------------------------ */
.p-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.p-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.p-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.p-muted { color: var(--meta); }
.p-ink-2 { color: var(--ink-2); }
.p-text-13 { font-size: var(--fs-13); }
.p-text-14 { font-size: var(--fs-14); }
.p-text-16 { font-size: var(--fs-16); }
.p-strong { font-weight: var(--fw-semibold); }
.p-text-success { color: var(--success); }
.p-text-pending { color: var(--pending); }
.p-text-danger { color: var(--danger); }

.p-stack { display: flex; flex-direction: column; gap: var(--sp-16); }
.p-stack--4 { gap: var(--sp-4); }
.p-stack--8 { gap: var(--sp-8); }
.p-stack--12 { gap: var(--sp-12); }
.p-stack--20 { gap: var(--sp-20); }
.p-stack--24 { gap: var(--sp-24); }
.p-stack--32 { gap: var(--sp-32); }
.p-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); }
.p-cluster--12 { gap: var(--sp-12); }
.p-spread { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); min-width: 0; }

.p-section { margin-top: var(--sp-32); }
.p-section:first-child { margin-top: 0; }
.p-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-12); }
.p-section__title { font-size: var(--fs-19); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }

.p-grid-2 { display: grid; gap: var(--sp-16); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
  .p-grid-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); }
  .p-grid-2--wide-left { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .p-grid-2--wide-right { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

@media (max-width: 1023.98px) { .p-only-desktop { display: none !important; } }
@media (min-width: 1024px) { .p-only-phone { display: none !important; } }
@media (max-width: 767.98px) { .p-hide-phone { display: none !important; } }
@media (min-width: 768px) { .p-hide-tablet-up { display: none !important; } }

/* ------------------------------------------------------------------ */
/* 4. Typography                                                       */
/* ------------------------------------------------------------------ */
.p-h1 { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.p-h2 { font-size: var(--fs-23); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: -0.005em; }
.p-h3 { font-size: var(--fs-19); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.p-title { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.p-body-text { font-size: var(--fs-16); line-height: var(--lh-body); color: var(--ink); }
.p-prose { font-size: var(--fs-16); line-height: 1.6; color: var(--ink); max-width: 68ch; }
.p-prose > * + * { margin-top: var(--sp-12); }
.p-meta { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--meta); }
.p-caption { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--meta); }

/* ------------------------------------------------------------------ */
/* 5. App shell                                                        */
/* ------------------------------------------------------------------ */
.p-app { min-height: 100dvh; background: var(--ground); }

.p-main {
  min-width: 0;
  padding: var(--sp-16) var(--sp-16) calc(var(--bottombar-h) + var(--safe-bottom) + var(--sp-24));
}
.p-content { width: 100%; max-width: var(--content-max); margin-inline: auto; }

@media (min-width: 768px) {
  .p-main { padding: var(--sp-24) var(--sp-24) calc(var(--bottombar-h) + var(--safe-bottom) + var(--sp-32)); }
}
@media (min-width: 1024px) {
  .p-app {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  }
  .p-app > .p-sidebar { grid-column: 1; grid-row: 1 / span 2; }
  .p-app > .p-topbar { grid-column: 2; grid-row: 1; }
  .p-app > .p-main { grid-column: 2; grid-row: 2; padding: var(--sp-40); }
}

/* Topbar */
.p-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--topbar-h);
  padding-inline: var(--sp-16) var(--sp-8);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 1024px) { .p-topbar { padding-inline: var(--sp-40) var(--sp-32); } }

.p-topbar__identity {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
}
button.p-topbar__identity { cursor: pointer; border-radius: var(--r-control); }
.p-topbar__name {
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
.p-topbar__sub {
  display: none;
  font-size: var(--fs-16);
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 0 1 auto;
}
@media (min-width: 1024px) { .p-topbar__sub { display: block; } }
/* "PERANTAU PLK · Nama ahli · Ahli": pemisah titik tengah kecil, ink-2 */
.p-topbar__sep { margin-inline: var(--sp-8); color: var(--ink-3); }
/* Log Keluar: pautan teks hijau, 600, di hujung kanan */
.p-topbar__logout {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 var(--sp-8);
  margin-left: var(--sp-8);
  border: 0; border-radius: var(--r-control);
  background: none; color: var(--accent-ink);
  font: inherit; font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: 1;
  white-space: nowrap; text-decoration: none; cursor: pointer;
}
.p-topbar__logout:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 419.98px) { .p-topbar__logout { margin-left: 0; padding-inline: var(--sp-4); font-size: var(--fs-14); } }
/* Narrow phones: the identity shows the singkatan only ("PLK"), so it never truncates beside the pangkat chip */
@media (max-width: 419.98px) { .p-topbar__prefix { display: none; } }
/* Telefon (< 768px): bila negeri keahlian ahli diketahui, identiti tunjuk singkatan negeri (cth "TRG")
   sebagai ganti singkatan persatuan. Tablet & desktop tidak berubah. */
.p-topbar__negeri { display: none; }
@media (max-width: 767.98px) {
  .p-topbar__identity.has-negeri .p-topbar__org { display: none; }
  .p-topbar__identity.has-negeri .p-topbar__negeri { display: inline; }
}

/* Desktop topbar names the current page; the persatuan identity lives in the sidebar head */
.p-topbar__page {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
}
.p-topbar__crumb { display: inline-flex; align-items: center; gap: 6px; color: var(--meta); font-weight: var(--fw-medium); }
.p-topbar__crumb .ti { font-size: 16px; }
@media (min-width: 1024px) {
  .p-topbar__page { display: flex; }
  .p-topbar__identity.p-topbar__identity--phone { display: none; }
}

.p-topbar__actions { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

/* Icon button (44px target) */
.p-iconbtn {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-iconbtn .ti { font-size: 22px; }
.p-iconbtn:hover { background: var(--panel); color: var(--ink); }
.p-iconbtn:active { background: var(--panel-press); }
.p-iconbtn:disabled, .p-iconbtn[aria-disabled="true"] { color: var(--edge); background: transparent; cursor: not-allowed; }
.p-iconbtn--sm { width: 36px; height: 36px; font-size: 20px; }
.p-iconbtn--sm .ti { font-size: 20px; }
.p-iconbtn--sm::after { content: ""; position: absolute; inset: -4px; }

/* Notification dot, placed inside .p-iconbtn */
.p-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--count-bg);
  box-shadow: 0 0 0 2px var(--surface);
  pointer-events: none;
}
.p-dot[hidden] { display: none; }
.p-dot--inline { position: static; display: inline-block; width: 8px; height: 8px; box-shadow: none; vertical-align: middle; }

/* Pangkat chip */
.p-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 var(--sp-8);
  border: 0;
  border-radius: var(--r-control);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.p-chip::after { content: ""; position: absolute; inset: -4px; }
.p-chip .ti { font-size: 18px; color: var(--ink-2); }
.p-chip:hover { background: var(--panel); color: var(--ink); }
.p-chip:active { background: var(--panel-press); }
.p-chip[aria-expanded="true"] { background: var(--panel); color: var(--ink); }
@media (max-width: 379.98px) { .p-chip__label { display: none; } .p-chip { padding-inline: var(--sp-8); } }

/* Avatar */
.p-avatar {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
  user-select: none;
}
.p-avatar img { width: 100%; height: 100%; object-fit: cover; }
.p-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-13); }
.p-avatar--lg { width: 56px; height: 56px; font-size: var(--fs-19); }
.p-avatar--xl { width: 72px; height: 72px; font-size: var(--fs-23); }
.p-iconbtn:hover .p-avatar { background: var(--panel-press); }

/* Persatuan logo or initials (square) */
.p-logo {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex: 0 0 auto;
  border-radius: var(--r-card);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  overflow: hidden;
}
.p-logo img { width: 100%; height: 100%; object-fit: contain; background: var(--surface); }
.p-logo--sm { width: 40px; height: 40px; border-radius: var(--r-control); font-size: var(--fs-13); }
.p-logo--lg { width: 72px; height: 72px; font-size: var(--fs-19); }

/* Sidebar (desktop only). Gaya Koperasi: latar --sidebar, blok identiti, item atas dipisah hairline,
   kumpulan bersub ada chevron dan dilipat (accordion), sub-item diinden dengan garis kiri,
   aktif = putih + bar hijau 4px di kiri. "Akaun Saya" duduk di bawah sekali. */
.p-sidebar { display: none; }
@media (min-width: 1024px) {
  .p-sidebar {
    position: sticky;
    top: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--sidebar);
    border-right: 1px solid var(--line);
    z-index: var(--z-sticky);
  }
}
.p-sidebar__head {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  min-height: 96px;
  padding: var(--sp-20) var(--sp-24);
  border-bottom: 1px solid var(--line);
}
.p-sidebar .p-sidebar__head { flex: 0 0 auto; }
button.p-sidebar__head, a.p-sidebar__head {
  width: 100%;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
button.p-sidebar__head:hover, a.p-sidebar__head:hover { background: var(--panel-press); }
button.p-sidebar__head:focus-visible, a.p-sidebar__head:focus-visible { outline-offset: -2px; }
/* Kotak logo hijau: singkatan persatuan (putih) atau logo persatuan */
.p-sidebar__head .p-logo {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: var(--r-control);
  background: var(--accent-strong);
  color: var(--on-ink);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  letter-spacing: .01em;
}
.p-sidebar__head .p-logo:has(img) { background: var(--surface); border: 1px solid var(--line); }
.p-sidebar__brand { min-width: 0; display: block; }
.p-sidebar__brand-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.p-sidebar__brand-sub {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-14);
  line-height: var(--lh-snug);
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.p-sidebar__nav { flex: 1 1 auto; display: flex; flex-direction: column; overflow-y: auto; padding: 0; overscroll-behavior: contain; }
.p-sidebar__nav > .p-nav { flex: 1 0 auto; }
.p-sidebar__foot { flex: 0 0 auto; border-top: 1px solid var(--line); padding: var(--sp-12) var(--sp-24); }

.p-navgroup__title {
  display: block;
  padding: var(--sp-4) var(--sp-24);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--meta);
}
.p-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }

.p-navitem {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--sp-12);
  width: 100%;
  min-height: 44px;
  padding: var(--sp-8) var(--sp-24);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-navitem > .ti, .p-navitem__icon { font-size: 20px; line-height: 1; color: inherit; justify-self: center; }
.p-navitem__text { min-width: 0; display: flex; flex-direction: column; }
.p-navitem__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-navitem__helper { font-size: var(--fs-13); font-weight: var(--fw-regular); color: var(--meta); line-height: var(--lh-snug); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-navitem__trail { display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--ink-2); font-size: 15px; }
.p-navitem:hover { background: var(--panel-press); color: var(--ink); }
.p-navitem:active { background: var(--line); }
/* Aktif: putih, teks ink, bar hijau 4px di kiri */
.p-navitem.is-active,
.p-navitem[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: var(--fw-medium); box-shadow: inset 4px 0 0 var(--accent-fill); }
.p-navitem.is-active .p-navitem__helper,
.p-navitem[aria-current="page"] .p-navitem__helper { color: var(--ink-2); }
.p-navitem--soon,
.p-navitem--soon:hover { color: var(--meta); background: transparent; }
.p-navitem--soon:active { background: transparent; }

/* Item peringkat atas: 600 ink, dipisah hairline; tiada ikon (gaya Koperasi) */
.p-sidebar .p-navgroup { border-bottom: 1px solid var(--line); }
.p-navitem--top {
  grid-template-columns: minmax(0, 1fr) auto auto;
  min-height: 56px;
  padding: var(--sp-12) var(--sp-24) var(--sp-12) var(--sp-32);
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}
.p-navitem--top > .ti { display: none; }
.p-navitem--top.is-active, .p-navitem--top[aria-current="page"] { font-weight: var(--fw-semibold); }
/* Chevron untuk kumpulan bersub: › bila tertutup, ˅ bila terbuka */
.p-navgroup:has(> .p-nav--sub) > .p-navitem--top::after {
  content: "";
  grid-column: 3;
  justify-self: end;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.75px solid currentColor;
  border-bottom: 1.75px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--dur) var(--ease-out);
}
.p-navgroup.is-open:has(> .p-nav--sub) > .p-navitem--top::after { transform: translateY(-2px) rotate(45deg); }
/* Sub-item: diinden, garis tegak di kiri senarai */
.p-nav--sub { gap: 0; margin: 0 0 var(--sp-12) var(--sp-32); padding: 0; border-left: 1px solid var(--line); }
.p-nav--sub .p-navitem { grid-template-columns: minmax(0, 1fr) auto; min-height: 44px; padding: 10px var(--sp-24) 10px 22px; font-size: var(--fs-16); font-weight: var(--fw-regular); color: var(--ink-2); }
.p-nav--sub .p-navitem.is-active, .p-nav--sub .p-navitem[aria-current="page"] { color: var(--ink); font-weight: var(--fw-medium); margin-left: -1px; }
.p-nav--sub .p-navitem--soon { min-height: 36px; padding-block: 6px; font-size: var(--fs-14); color: var(--meta); }
.p-nav--sub .p-navitem__trail { font-size: 14px; }
.p-nav--sub .p-navitem__trail .ti { color: var(--meta); }
/* Collapsing menu: on .p-nav--collapse only the open group (.is-open, set by the page for the active section)
   shows its sub-items; every top-level item stays visible at one size */
.p-nav--collapse > .p-navgroup:not(.is-open) > .p-nav--sub { display: none; }
/* Akaun Saya: di bawah sekali, ink-2, dipisah garis */
.p-navgroup--foot { margin-top: auto; border-top: 1px solid var(--line); }
.p-sidebar .p-navgroup--foot { border-bottom: 0; }
.p-navgroup--foot > .p-navitem--top { min-height: 52px; font-weight: var(--fw-regular); color: var(--ink-2); font-size: var(--fs-16); }
.p-navgroup--foot > .p-navitem--top.is-active { color: var(--ink); font-weight: var(--fw-medium); }
@media (pointer: coarse) {
  .p-navitem--top, .p-nav--sub .p-navitem { min-height: 44px; }
}
/* Lencana kiraan (infografik): pil kecil berwarna, rata kanan */
.p-navcount { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--r-pill); background: var(--count-bg); color: var(--on-ink); font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: tabular-nums; }
.p-navcount[hidden], .p-navcount:empty { display: none; }

/* "· akan datang" suffix (type it in markup: <span class="p-soon">· akan datang</span>) */
.p-soon { color: var(--meta); font-weight: var(--fw-regular); white-space: nowrap; }

/* Small "Baru" marker (lencana berwarna, infografik) */
.p-new {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 6px;
  border-radius: var(--r-tag);
  background: var(--info-bg); color: var(--info);
  font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1;
}

/* User pill (sidebar foot): nama + pangkat, pil Log keluar bersempadan */
.p-userpill { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; padding: var(--sp-4) 0; }
.p-userpill__text { flex: 1 1 auto; min-width: 0; }
.p-userpill__name { font-size: var(--fs-14); font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-userpill__sub { font-size: var(--fs-13); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Menu kiri: tiada avatar di kaki (ruang untuk nama + pil Log keluar) */
.p-sidebar__foot .p-userpill .p-avatar { display: none; }
.p-logoutpill {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 0 var(--sp-12);
  border: 1px solid var(--edge-strong); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.p-logoutpill .ti { font-size: 16px; color: var(--ink-2); }
.p-logoutpill:hover { background: var(--panel); border-color: var(--ink); }

/* Bottom bar (phone and tablet) */
.p-bottombar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-bottombar);
  height: calc(var(--bottombar-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  background: var(--surface);
  border-top: 1px solid var(--line);
}
@media (min-width: 768px) { .p-bottombar { grid-template-columns: repeat(5, minmax(0, 128px)); justify-content: center; } }
@media (min-width: 1024px) { .p-bottombar { display: none; } }

.p-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: var(--bottombar-h);
  padding: 6px 2px 4px;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.p-tab .ti { position: relative; font-size: 24px; line-height: 1; }
.p-tab__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-tab::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 32px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent-fill);
  transform: translateX(-50%) scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.p-tab:hover { color: var(--ink); }
.p-tab:active .ti { transform: scale(.94); }
.p-tab:focus-visible { outline-offset: -4px; border-radius: var(--r-control); }
.p-tab.is-active,
.p-tab[aria-current="page"] { color: var(--accent-ink); font-weight: var(--fw-semibold); }
.p-tab.is-active::before,
.p-tab[aria-current="page"]::before { transform: translateX(-50%) scaleX(1); }
.p-tab .p-dot { top: -2px; right: -4px; }

/* Drawer (Akaun Saya panel under 1024px, driven by .is-open) */
.p-scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: var(--scrim);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.p-scrim.is-open { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }

.p-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: var(--z-drawer);
  width: min(360px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.p-drawer.is-open { transform: none; visibility: visible; transition: transform var(--dur-slow) var(--ease-out), visibility 0s; }
.p-drawer__head { display: flex; align-items: center; gap: var(--sp-8); min-height: var(--topbar-h); padding: 0 var(--sp-8) 0 var(--sp-16); border-bottom: 1px solid var(--line); }
.p-drawer__title { flex: 1 1 auto; font-size: var(--fs-16); font-weight: var(--fw-semibold); }
.p-drawer__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-16); padding-bottom: calc(var(--sp-16) + var(--safe-bottom)); }
.p-drawer__body:has(+ .p-drawer__foot) { padding-bottom: var(--sp-16); }
.p-drawer__foot { flex: 0 0 auto; padding: var(--sp-4) var(--sp-8) calc(var(--sp-4) + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
.p-drawer__foot .p-row { border-radius: var(--r-control); }

/* ------------------------------------------------------------------ */
/* 6. Page header                                                      */
/* ------------------------------------------------------------------ */
.p-pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-16); flex-wrap: wrap; margin: 0 0 var(--sp-24); }
.p-pagehead__text { min-width: 0; flex: 1 1 16rem; }
.p-pagehead__title { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: 0; text-wrap: balance; }
.p-pagehead__title--salam { font-size: var(--fs-23); letter-spacing: -0.005em; }
@media (min-width: 1024px) { .p-pagehead__title--salam { font-size: var(--fs-28); letter-spacing: -0.01em; } }
.p-pagehead__sub { margin-top: var(--sp-8); font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--ink-2); }
.p-pagehead__actions { display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.p-pagehead__back { margin-left: -10px; margin-bottom: var(--sp-4); }

/* ------------------------------------------------------------------ */
/* 7. Card                                                             */
/* ------------------------------------------------------------------ */
.p-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: var(--sp-16);
  min-width: 0;
}
@media (min-width: 768px) { .p-card { padding: var(--sp-24); } }
.p-card--flush { padding: 0; overflow: hidden; }
.p-card--muted { background: var(--panel); border-color: var(--panel); }
.p-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-12); margin-bottom: var(--sp-12); }
.p-card--flush > .p-card__head { padding: var(--sp-16) var(--sp-16) 0; }
@media (min-width: 768px) { .p-card--flush > .p-card__head { padding: var(--sp-20) var(--sp-20) 0; } }
.p-card__title { font-size: var(--fs-19); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; }
.p-card__sub { margin-top: 2px; font-size: var(--fs-14); color: var(--meta); line-height: var(--lh-snug); }
.p-card__body > * + * { margin-top: var(--sp-12); }
.p-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8); margin-top: var(--sp-16); }
.p-card--flush > .p-card__foot { margin-top: 0; padding: var(--sp-12) var(--sp-16); border-top: 1px solid var(--line); }
.p-card + .p-card { margin-top: var(--sp-16); }
.p-grid-2 > .p-card + .p-card, .p-stack > .p-card + .p-card { margin-top: 0; }

a.p-card, button.p-card, .p-card--link {
  display: block; width: 100%; text-align: left; color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
a.p-card:hover, button.p-card:hover, .p-card--link:hover { border-color: var(--edge); }
a.p-card:active, button.p-card:active, .p-card--link:active { background: var(--surface-hover); }

/* Key and value list, e.g. Maklumat program */
.p-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12); margin: 0; }
.p-dl__row { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--sp-12); align-items: start; }
.p-dl__row > .ti { font-size: 20px; color: var(--ink-2); line-height: 1.2; padding-top: 1px; }
.p-dl dt { font-size: var(--fs-13); color: var(--meta); line-height: var(--lh-snug); }
.p-dl dd { margin: 0; font-size: var(--fs-16); color: var(--ink); line-height: var(--lh-snug); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@media (min-width: 768px) { .p-dl--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-24); } }

/* ------------------------------------------------------------------ */
/* 8. List and row                                                     */
/* ------------------------------------------------------------------ */
.p-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.p-list--plain { border: 0; border-radius: 0; background: transparent; padding: 0; }
.p-card > .p-list, .p-drawer .p-list--plain { margin-inline: 0; }
.p-list > li:not([hidden]) ~ li:has(> .p-row), .p-list > .p-row + .p-row { border-top: 1px solid var(--line); }
.p-list:not(.p-list--plain) > li > .p-row, .p-list:not(.p-list--plain) > .p-row { border-radius: 0; }
.p-list__head { padding: var(--sp-12) var(--sp-16) var(--sp-4); font-size: var(--fs-13); font-weight: var(--fw-semibold); color: var(--meta); }

.p-row {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  width: 100%;
  min-height: 60px;
  padding: var(--sp-12) var(--sp-20);
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: var(--fs-16);
  text-align: left;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
a.p-row, button.p-row, label.p-row, .p-row--tap { cursor: pointer; }
a.p-row:hover, button.p-row:hover, .p-row--tap:hover { background: var(--surface-hover); }
a.p-row:active, button.p-row:active, .p-row--tap:active { background: var(--panel); }
a.p-row:focus-visible, button.p-row:focus-visible, .p-row--tap:focus-visible { outline-offset: -2px; border-radius: var(--r-control); }
button.p-row:disabled { cursor: not-allowed; color: var(--meta); background: transparent; }

.p-row__icon { flex: 0 0 auto; display: grid; place-items: center; width: 24px; height: 24px; font-size: 22px; line-height: 1; color: var(--ink-2); }
.p-row__icon--box { width: 40px; height: 40px; border-radius: var(--r-control); background: var(--panel); border: 1px solid var(--line); color: var(--accent-ink); font-size: 20px; }
.p-row__icon--success { color: var(--success); }
.p-row__icon--pending { color: var(--pending); }
.p-row__icon--danger { color: var(--danger); }
.p-row__icon--info { color: var(--info); }
.p-row__body { flex: 1 1 auto; min-width: 0; }
.p-row__title { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.p-row__title--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.p-row__helper { margin-top: 2px; font-size: var(--fs-14); color: var(--meta); line-height: var(--lh-snug); overflow-wrap: anywhere; }
.p-row__trail { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-8); color: var(--meta); font-size: var(--fs-14); }
.p-row__value { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.p-row__chev { font-size: 20px; color: var(--meta); line-height: 1; }
.p-row__ext { font-size: 18px; color: var(--meta); line-height: 1; }
.p-row--soon, a.p-row--soon:hover, button.p-row--soon:hover { color: var(--meta); background: transparent; }
.p-row--soon .p-row__icon, .p-row--soon .p-row__title { color: var(--meta); }
.p-row--danger .p-row__icon { color: var(--danger); }
.p-row--active { background: var(--panel); box-shadow: inset 4px 0 0 var(--accent-fill); }
.p-row--active .p-row__icon { color: var(--accent-ink); }
.p-row--active .p-row__title { font-weight: var(--fw-semibold); }

/* ------------------------------------------------------------------ */
/* 9. Stat tiles (p-badge, p-statgrid, p-stat) and legacy strip        */
/* ------------------------------------------------------------------ */
/* Icon badge: tinted circle, coloured glyph (infografik dipulihkan 25 Sep).
   Tone modifiers pick a --tone-* pair; default is the accent. */
.p-badge {
  display: inline-grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--badge-bg, var(--accent-tint));
  color: var(--badge-fg, var(--accent-ink));
  font-size: 22px;
  line-height: 1;
}
.p-badge .ti { font-size: 22px; line-height: 1; }
.p-badge--sm { --badge: 32px; font-size: 18px; }
.p-badge--sm .ti { font-size: 18px; }
.p-badge--green { --badge-bg: var(--tone-green-bg); --badge-fg: var(--tone-green); }
.p-badge--teal  { --badge-bg: var(--tone-teal-bg);  --badge-fg: var(--tone-teal); }
.p-badge--amber { --badge-bg: var(--tone-amber-bg); --badge-fg: var(--tone-amber); }
.p-badge--blue  { --badge-bg: var(--tone-blue-bg);  --badge-fg: var(--tone-blue); }
.p-badge--rose  { --badge-bg: var(--tone-rose-bg);  --badge-fg: var(--tone-rose); }

/* Grid: 2x2 on phone, 4-up from 768px. --3 keeps three across at every width (Utama). */
.p-statgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 768px) { .p-statgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); } }
@media (min-width: 1024px) { .p-statgrid { gap: var(--sp-16); } }
.p-statgrid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767.98px) { .p-statgrid--3 { gap: 6px; } }

/* Tile. Figure size fits its tile: set --p-chars (length of the longest
   formatted figure, unit excluded) on the tile or the grid and the figure
   shrinks from --p-fig toward --p-fig-min only when it would not fit. */
.p-stat {
  --p-fig: var(--fs-32);
  --p-fig-min: var(--fs-28);
  --p-unit-w: 0px;
  container-type: inline-size;
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 0;
  padding: var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
@media (max-width: 379.98px) { .p-stat { --p-fig-min: 1.5rem; } }
@media (min-width: 768px) { .p-stat { padding: var(--sp-16); } }
@media (min-width: 1024px) { .p-stat { --p-fig: var(--fs-40); --p-fig-min: var(--fs-32); padding: var(--sp-20); } }
.p-stat > .p-badge { margin-bottom: var(--sp-8); }
.p-stat--compact { padding: var(--sp-12) var(--sp-8); }
.p-stat--compact > .p-badge { margin-bottom: var(--sp-4); }
@media (max-width: 767.98px) {
  .p-statgrid--3 > .p-stat { padding: var(--sp-12) var(--sp-8); }
  .p-statgrid--3 > .p-stat > .p-badge { margin-bottom: var(--sp-4); }
}

.p-stat__value {
  display: block;
  max-width: 100%;
  font-size: clamp(var(--p-fig-min), calc((100cqi - var(--p-unit-w)) / (var(--p-chars, 1) * .58)), var(--p-fig));
  font-weight: var(--fw-semibold);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-variant-numeric: proportional-nums;
  white-space: nowrap;
  color: var(--ink);
}
/* Reserve room for the unit on every tile in a grid that shows one, so a row keeps one figure size */
.p-statgrid:has(.p-stat__unit) > .p-stat,
.p-stat:has(.p-stat__unit) { --p-unit-w: 22px; }
@media (min-width: 1024px) {
  .p-statgrid:has(.p-stat__unit) > .p-stat,
  .p-stat:has(.p-stat__unit) { --p-unit-w: 28px; }
}
.p-stat__unit {
  margin-right: 2px;
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--ink-2);
}
@media (min-width: 1024px) { .p-stat__unit { margin-right: 4px; font-size: var(--fs-16); } }
.p-stat__label { font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink-2); overflow-wrap: anywhere; }
/* Secondary figure line, e.g. "+ RM 300 menunggu"; lead it with <span class="p-key p-key--pending"> */
.p-stat__sub { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); }
.p-stat__sub > .p-key { align-self: center; }
/* Teaching line for a real 0 */
.p-stat__hint { margin-top: 2px; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--meta); text-wrap: pretty; }
.p-stat__hint--error { display: inline-flex; align-items: flex-start; gap: 4px; color: var(--danger); font-weight: var(--fw-medium); }
.p-stat__hint--error .ti { flex: 0 0 auto; font-size: 14px; line-height: 1.35; }
/* Null field: "belum diisi" in muted text, holds the figure row height */
.p-stat__value--none {
  display: flex;
  align-items: center;
  min-height: calc(var(--p-fig) * 1.1);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  color: var(--meta);
  white-space: normal;
}
/* No figure to show (no program, not open, not split): a figure-size dash in muted ink, hint below */
.p-stat__value--none.p-stat__value--dash { font-size: var(--p-fig-min); font-weight: var(--fw-regular); line-height: 1.1; }
/* Phone three-across row whose exact figure would drop below the floor: the page adds .is-unitstack,
   the unit sits on its own line above the figure and figures keep one baseline across the row */
.p-statgrid.p-statgrid--3.is-unitstack > .p-stat { --p-unit-w: 0px; }
.p-statgrid.is-unitstack .p-stat__unit { display: block; margin: 0; line-height: 1.25; }
.p-statgrid.is-unitstack .p-stat__value:not(.p-stat__value--none):not(:has(.p-stat__unit))::before { content: ""; display: block; height: calc(var(--fs-13) * 1.25); }
.p-statgrid.is-unitstack .p-stat__value--none { min-height: calc(var(--p-fig) * 1.1 + var(--fs-13) * 1.25); padding-top: calc(var(--fs-13) * 1.25); }
/* Loading: keep the tile, pulse the figure */
.p-stat.is-loading .p-stat__value {
  min-width: 3ch;
  border-radius: var(--r-tag);
  background: var(--panel);
  color: transparent;
  animation: p-pulse 1.4s ease-in-out infinite alternate;
}
.p-stat.is-loading .p-stat__value > *,
.p-stat.is-loading .p-stat__sub,
.p-stat.is-loading .p-stat__hint { visibility: hidden; }

a.p-stat, button.p-stat { cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
@media (hover: hover) { a.p-stat:hover, button.p-stat:hover { border-color: var(--accent-fill); } }
a.p-stat:active, button.p-stat:active { background: var(--accent-tint); border-color: var(--accent-fill); }
a.p-stat:focus-visible, button.p-stat:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent-fill); }
/* Jubin yang membuka halaman: anak panah kecil di penjuru, jadi aksen bila dituding */
.p-stat__go { position: absolute; top: var(--sp-8); right: var(--sp-8); font-size: 16px; line-height: 1; color: var(--meta); transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
@media (min-width: 1024px) { .p-stat__go { top: var(--sp-16); right: var(--sp-16); font-size: 18px; } }
@media (hover: hover) { a.p-stat:hover .p-stat__go, button.p-stat:hover .p-stat__go { color: var(--accent-ink); transform: translate(2px, -2px); } }
button.p-stat:focus-visible .p-stat__go, a.p-stat:focus-visible .p-stat__go { color: var(--accent-ink); }
button.p-stat:disabled, .p-stat[aria-disabled="true"] { cursor: not-allowed; background: var(--surface); border-color: var(--line); }

/* Legacy strip: .p-stats wrapping .p-stat keeps the hairline-divided look */
.p-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
}
.p-stats > .p-stat { container-type: normal; border: 0; border-radius: 0; background: transparent; }
.p-stats > .p-stat + .p-stat { border-left: 1px solid var(--line); }
@media (min-width: 768px) { .p-stats > .p-stat { padding: var(--sp-16) var(--sp-20); } }
.p-stats .p-stat__value { font-size: var(--fs-23); line-height: var(--lh-tight); letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 379.98px) { .p-stats .p-stat__value { font-size: var(--fs-19); } }
@media (min-width: 768px) { .p-stats .p-stat__value { font-size: var(--fs-28); } }
.p-stats .p-stat__unit { margin-right: .2em; font-size: .6em; }
.p-stats > a.p-stat:hover, .p-stats > button.p-stat:hover { background: var(--surface-hover); border-color: var(--line); }
.p-stats > a.p-stat:active, .p-stats > button.p-stat:active { background: var(--panel); border-color: var(--line); }
.p-stats > a.p-stat:focus-visible, .p-stats > button.p-stat:focus-visible { outline-offset: -3px; }

/* ------------------------------------------------------------------ */
/* 10. Buttons                                                         */
/* ------------------------------------------------------------------ */
.p-btn {
  --btn-bg: var(--action);
  --btn-fg: var(--on-ink);
  --btn-border: var(--action);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: 0 var(--sp-20);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-control);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: inherit;
  font-size: var(--fs-16);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.p-btn .ti { font-size: 20px; line-height: 1; }
.p-btn:hover { --btn-bg: var(--action-hover); --btn-border: var(--action-hover); }
.p-btn:active { --btn-bg: var(--action-active); --btn-border: var(--action-active); }

.p-btn--primary { --btn-bg: var(--accent-strong); --btn-fg: var(--on-ink); --btn-border: var(--accent-strong); }

.p-btn--secondary { --btn-bg: var(--surface); --btn-fg: var(--accent-ink); --btn-border: var(--edge-strong); }
.p-btn--secondary:hover { --btn-bg: var(--panel); --btn-border: var(--ink); }
.p-btn--secondary:active { --btn-bg: var(--panel-press); --btn-border: var(--ink); --btn-fg: var(--accent-strong-active); }
/* Butang bergaris "Buka ..." (Koperasi): sempadan ink, teks ink 600 */
.p-btn--outline { --btn-bg: var(--surface); --btn-fg: var(--ink); --btn-border: var(--ink); }
.p-btn--outline:hover { --btn-bg: var(--panel); --btn-border: var(--ink); }
.p-btn--outline:active { --btn-bg: var(--panel-press); --btn-border: var(--ink); }

.p-btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-border: transparent; padding-inline: var(--sp-12); }
.p-btn--ghost:hover { --btn-bg: var(--panel); --btn-border: transparent; }
.p-btn--ghost:active { --btn-bg: var(--panel-press); --btn-border: transparent; }

.p-btn--text { --btn-bg: transparent; --btn-fg: var(--accent-ink); --btn-border: transparent; padding-inline: var(--sp-4); text-decoration: underline; text-decoration-color: var(--accent-ink); text-underline-offset: 3px; }
.p-btn--text:hover { --btn-bg: transparent; --btn-border: transparent; text-decoration-color: var(--accent-ink); }
.p-btn--text:active { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--accent-strong-active); }

.p-btn--danger { --btn-bg: var(--danger); --btn-fg: var(--on-ink); --btn-border: var(--danger); }
.p-btn--danger:hover { --btn-bg: var(--danger-hover); --btn-border: var(--danger-hover); }
.p-btn--danger:active { --btn-bg: var(--danger-active); --btn-border: var(--danger-active); }

.p-btn--danger-ghost { --btn-bg: transparent; --btn-fg: var(--danger); --btn-border: transparent; padding-inline: var(--sp-12); }
.p-btn--danger-ghost:hover { --btn-bg: var(--danger-bg); --btn-border: transparent; }
.p-btn--danger-ghost:active { --btn-bg: var(--danger-line); --btn-border: transparent; }

.p-btn--sm { min-height: 36px; padding-inline: var(--sp-12); font-size: var(--fs-14); gap: 6px; }
.p-btn--sm .ti { font-size: 18px; }
.p-btn--sm::after { content: ""; position: absolute; inset: -4px 0; }
.p-btn--block { display: flex; width: 100%; }
.p-btn--icon { padding-inline: 0; width: 44px; }
.p-btn--sm.p-btn--icon { width: 36px; }

.p-btn:disabled,
.p-btn[aria-disabled="true"] {
  --btn-bg: var(--panel);
  --btn-fg: var(--meta);
  --btn-border: var(--panel);
  cursor: not-allowed;
}
.p-btn--secondary:disabled, .p-btn--secondary[aria-disabled="true"] { --btn-bg: var(--surface); --btn-border: var(--line); }
.p-btn--ghost:disabled, .p-btn--ghost[aria-disabled="true"],
.p-btn--text:disabled, .p-btn--text[aria-disabled="true"],
.p-btn--danger-ghost:disabled, .p-btn--danger-ghost[aria-disabled="true"] { --btn-bg: transparent; --btn-border: transparent; }

/* Loading: add .is-loading (or aria-busy="true") and disable the button */
.p-btn.is-loading,
.p-btn[aria-busy="true"] { color: transparent; cursor: progress; pointer-events: none; }
.p-btn.is-loading > *,
.p-btn[aria-busy="true"] > * { visibility: hidden; }
.p-btn.is-loading::before,
.p-btn[aria-busy="true"]::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  animation: p-spin 700ms linear infinite;
}
.p-btn.is-loading:disabled,
.p-btn[aria-busy="true"]:disabled { --btn-bg: var(--action); --btn-border: var(--action); --btn-fg: var(--on-ink); }
.p-btn--secondary.is-loading:disabled, .p-btn--secondary[aria-busy="true"]:disabled { --btn-bg: var(--surface); --btn-border: var(--accent-strong); --btn-fg: var(--accent-ink); }
.p-btn--ghost.is-loading:disabled, .p-btn--ghost[aria-busy="true"]:disabled,
.p-btn--text.is-loading:disabled, .p-btn--text[aria-busy="true"]:disabled { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--ink); }
.p-btn--text.is-loading:disabled, .p-btn--text[aria-busy="true"]:disabled { --btn-fg: var(--accent-ink); }
.p-btn--danger.is-loading:disabled, .p-btn--danger[aria-busy="true"]:disabled { --btn-bg: var(--danger); --btn-border: var(--danger); --btn-fg: var(--on-ink); }

@keyframes p-spin { to { transform: rotate(360deg); } }

/* Button rows: stack full width on phone, inline from 768px */
.p-actions { display: flex; flex-direction: column; gap: var(--sp-8); }
.p-actions > .p-btn { width: 100%; }
@media (min-width: 768px) {
  .p-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .p-actions > .p-btn { width: auto; }
  .p-actions--end { justify-content: flex-end; }
}
.p-actions--inline { flex-direction: row; flex-wrap: wrap; align-items: center; }
.p-actions--inline > .p-btn { width: auto; }

/* ------------------------------------------------------------------ */
/* 11. Links                                                           */
/* ------------------------------------------------------------------ */
.p-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent-ink);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  border-radius: 4px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out);
}
.p-link .ti { font-size: 1.1em; }
.p-link:hover { text-decoration-thickness: 2px; }
.p-link:active { color: var(--accent-strong-active); }
.p-link--quiet { color: var(--ink-2); font-weight: var(--fw-medium); text-decoration-color: transparent; }
.p-link--quiet:hover { color: var(--ink); text-decoration-color: var(--ink); }
.p-link--tap { min-height: 44px; }
.p-link[aria-disabled="true"] { color: var(--meta); text-decoration: none; cursor: not-allowed; }

/* ------------------------------------------------------------------ */
/* 12. Form controls                                                   */
/* ------------------------------------------------------------------ */
.p-form { display: flex; flex-direction: column; gap: var(--sp-20); }
.p-form-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-20); }
@media (min-width: 768px) { .p-form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-16); } }
.p-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-8); }
.p-fieldset > legend { padding: 0; margin-bottom: var(--sp-4); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); }
.p-subhead { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); padding-top: var(--sp-8); }

.p-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p-label { font-size: var(--fs-14); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ink); }
.p-label__opt { font-weight: var(--fw-regular); color: var(--meta); }
.p-label__req { color: var(--danger); font-weight: var(--fw-semibold); }
.p-help { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--meta); }
.p-error { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--danger); font-weight: var(--fw-medium); }
.p-error .ti { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.p-error[hidden], .p-help[hidden] { display: none; }

.p-input,
.p-select,
.p-textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px var(--sp-16);
  border: 1px solid var(--edge-strong);
  border-radius: var(--r-control);
  background-color: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--fs-16);
  line-height: 1.4;
  caret-color: var(--ink);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.p-input::placeholder, .p-textarea::placeholder { color: var(--ink-3); opacity: 1; }
.p-input:hover, .p-select:hover, .p-textarea:hover { border-color: var(--ink); }
.p-input:focus, .p-select:focus, .p-textarea:focus { border-color: var(--accent-ink); outline: 2px solid var(--focus); outline-offset: 2px; }
.p-input:disabled, .p-select:disabled, .p-textarea:disabled { background-color: var(--panel); border-color: var(--line); color: var(--meta); cursor: not-allowed; -webkit-text-fill-color: var(--meta); }
.p-input[readonly], .p-textarea[readonly] { background-color: var(--ground); border-color: var(--line); }
.p-input[aria-invalid="true"], .p-select[aria-invalid="true"], .p-textarea[aria-invalid="true"],
.p-field.is-error .p-input, .p-field.is-error .p-select, .p-field.is-error .p-textarea,
.p-input.is-error, .p-select.is-error, .p-textarea.is-error { border-color: var(--danger); }
.p-input[aria-invalid="true"]:focus, .p-select[aria-invalid="true"]:focus, .p-textarea[aria-invalid="true"]:focus,
.p-field.is-error .p-input:focus, .p-field.is-error .p-select:focus, .p-field.is-error .p-textarea:focus,
.p-input.is-error:focus, .p-select.is-error:focus, .p-textarea.is-error:focus { outline-color: var(--danger); }
.p-input[type="number"] { font-variant-numeric: tabular-nums; }
.p-input[type="date"], .p-input[type="time"] { min-height: 44px; }

.p-select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23494E52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px 20px;
  cursor: pointer;
}
.p-select::-ms-expand { display: none; }

.p-textarea { min-height: 96px; line-height: var(--lh-body); resize: vertical; }

/* Input with leading or trailing affix, e.g. "RM" or an icon */
.p-affix { position: relative; display: flex; align-items: stretch; }
.p-affix > .p-input { flex: 1 1 auto; }
.p-affix__lead, .p-affix__trail {
  position: absolute; top: 0; bottom: 0;
  display: flex; align-items: center;
  color: var(--ink-2); font-size: var(--fs-16); pointer-events: none;
}
.p-affix__lead { left: var(--sp-12); }
.p-affix__trail { right: 4px; pointer-events: auto; }
.p-affix__lead .ti { font-size: 20px; }
.p-affix--lead > .p-input { padding-left: 44px; }
.p-affix--lead-text > .p-input { padding-left: 48px; }
.p-affix--trail > .p-input { padding-right: 52px; }

/* Checkbox and radio */
.p-checkbox,
.p-radio {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 1.5px solid var(--edge-strong);
  background-color: var(--surface);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.p-checkbox { border-radius: var(--r-tag); }
.p-radio { border-radius: 50%; }
.p-checkbox:hover, .p-radio:hover { border-color: var(--ink); }
.p-checkbox:checked {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E");
}
.p-checkbox:indeterminate {
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}
.p-radio:checked { background-color: var(--accent-strong); border-color: var(--accent-strong); box-shadow: inset 0 0 0 5px var(--surface); }
.p-checkbox:focus-visible, .p-radio:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-checkbox:disabled, .p-radio:disabled { background-color: var(--panel); border-color: var(--edge); cursor: not-allowed; }
.p-checkbox:disabled:checked, .p-radio:disabled:checked { background-color: var(--edge); border-color: var(--edge); }
.p-checkbox[aria-invalid="true"], .p-radio[aria-invalid="true"] { border-color: var(--danger); }

/* Label wrapper for a checkbox or radio (44px row) */
.p-check {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  min-height: 44px;
  padding: 10px 0;
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  color: var(--ink);
  cursor: pointer;
}
.p-check__text { min-width: 0; flex: 1 1 auto; }
.p-check__helper { display: block; margin-top: 2px; font-size: var(--fs-14); color: var(--meta); }
.p-check__trail { flex: 0 0 auto; color: var(--meta); font-size: var(--fs-14); font-variant-numeric: tabular-nums; }
.p-check:has(:disabled) { color: var(--meta); cursor: not-allowed; }

/* Selectable option card (family checklist, cara sertai) */
.p-check--card {
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--r-control);
  background: var(--surface);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.p-check--card:hover { border-color: var(--edge); }
.p-check--card:has(:checked) { border-color: var(--accent-strong); background: var(--surface-hover); }
.p-check--card:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.p-check--card:has(:focus-visible) .p-checkbox,
.p-check--card:has(:focus-visible) .p-radio { outline: none; }
.p-check--card:has(:disabled) { background: var(--panel); border-color: var(--line); }
.p-checklist { display: flex; flex-direction: column; gap: var(--sp-8); }

/* ------------------------------------------------------------------ */
/* 13. Tags and notices                                                */
/* ------------------------------------------------------------------ */
.p-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 24px;
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--r-tag);
  background: var(--panel);
  color: var(--ink-2);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.p-tag .ti { font-size: 14px; }
.p-tag--neutral { background: var(--panel); color: var(--ink-2); }
.p-tag--success { background: var(--success-bg); color: var(--success); }
.p-tag--pending { background: var(--pending-bg); color: var(--pending); }
.p-tag--danger { background: var(--danger-bg); color: var(--danger); }
.p-tag--info { background: var(--info-bg); color: var(--info); }
.p-tag--outline { background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); }
.p-tag--accent { background: var(--accent-tint); color: var(--accent-ink); }

.p-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-12);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--info-line);
  border-radius: var(--r-control);
  background: var(--info-bg);
  color: var(--ink);
  font-size: var(--fs-14);
  line-height: var(--lh-body);
}
.p-notice > .ti { flex: 0 0 auto; font-size: 20px; line-height: 1.1; color: var(--info); margin-top: 1px; }
.p-notice__body { flex: 1 1 auto; min-width: 0; }
.p-notice__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ink); }
.p-notice__title + * { margin-top: 2px; }
.p-notice__actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin-top: var(--sp-8); }
.p-notice--info { background: var(--info-bg); border-color: var(--info-line); }
.p-notice--info > .ti { color: var(--info); }
.p-notice--pending { background: var(--pending-bg); border-color: var(--pending-line); }
.p-notice--pending > .ti { color: var(--pending); }
.p-notice--danger { background: var(--danger-bg); border-color: var(--danger-line); }
.p-notice--danger > .ti { color: var(--danger); }
.p-notice--success { background: var(--success-bg); border-color: var(--success-line); }
.p-notice--success > .ti { color: var(--success); }
.p-notice--neutral { background: var(--panel); border-color: var(--line); }
.p-notice--neutral > .ti { color: var(--ink-2); }

/* Inline success toast; add .p-toast--float to pin it above the bottom bar */
.p-toast {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-16);
  border: 1px solid var(--success-line);
  border-radius: var(--r-control);
  background: var(--success-bg);
  color: var(--ink);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  animation: p-fade-up var(--dur) var(--ease-out);
}
.p-toast > .ti { font-size: 20px; color: var(--success); flex: 0 0 auto; }
.p-toast--danger { background: var(--danger-bg); border-color: var(--danger-line); }
.p-toast--danger > .ti { color: var(--danger); }
.p-toast--float {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottombar-h) + var(--safe-bottom) + var(--sp-12));
  z-index: var(--z-toast);
  width: max-content;
  max-width: calc(100% - var(--sp-32));
  transform: translateX(-50%);
  background: var(--ink);
  border-color: var(--ink);
  color: var(--on-ink);
  box-shadow: var(--shadow-float);
  animation: p-fade var(--dur) var(--ease-out);
}
.p-toast--float > .ti { color: var(--on-ink); }
@media (min-width: 1024px) { .p-toast--float { bottom: var(--sp-24); } }
.p-toast[hidden] { display: none; }

/* Floating snackbar: shadow-only depth, no hairline */
.p-snackbar {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bottombar-h) + var(--safe-bottom) + var(--sp-12));
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  width: max-content;
  max-width: calc(100% - var(--sp-32));
  padding: var(--sp-12) var(--sp-16);
  border-radius: var(--r-control);
  background: var(--ink);
  color: var(--on-ink);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
  box-shadow: var(--shadow-float);
  transform: translateX(-50%);
  animation: p-fade var(--dur) var(--ease-out);
}
.p-snackbar > .ti { flex: 0 0 auto; font-size: 20px; color: var(--on-ink); }
.p-snackbar[hidden] { display: none; }
@media (min-width: 1024px) { .p-snackbar { bottom: var(--sp-24); } }

/* ------------------------------------------------------------------ */
/* 14. Kawah progress                                                  */
/* ------------------------------------------------------------------ */
.p-progress {
  display: flex;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--accent-tint);
  overflow: hidden;
}
.p-progress__done,
.p-progress__pending {
  height: 100%;
  flex: 0 0 auto;
  max-width: 100%;
  transform-origin: left center;
  animation: p-grow var(--dur-slow) var(--ease-out);
}
.p-progress__done { background: var(--accent-fill); }
.p-progress__pending { background: var(--ramp-1); }
.p-progress__done:not([style*="width:0%"]):not([style*="width:0.0%"]):not([style="width:0"]) + .p-progress__pending:not([style*="width:0%"]):not([style*="width:0.0%"]) { box-shadow: -2px 0 0 var(--surface); }
.p-progress--lg { height: 12px; border-radius: 6px; }
.p-progress__meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-8); margin-top: 6px; font-size: var(--fs-14); color: var(--ink-2); }
.p-progress__meta strong { color: var(--ink); font-weight: var(--fw-semibold); }
.p-legend { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-16); font-size: var(--fs-13); color: var(--ink-2); }
.p-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.p-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--accent-fill); flex: 0 0 auto; }
.p-legend__swatch--pending { background: var(--ramp-1); }

/* ------------------------------------------------------------------ */
/* 15. Sheet (use with <dialog class="p-sheet"> and showModal())       */
/* ------------------------------------------------------------------ */
.p-sheet {
  position: fixed;
  inset: auto 0 0 0;
  width: 100%;
  max-width: 100%;
  max-height: min(92dvh, calc(100dvh - 24px));
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--r-card) var(--r-card) 0 0;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  overflow: hidden;
  overscroll-behavior: contain;
}
.p-sheet[open] {
  display: flex;
  flex-direction: column;
  animation: p-sheet-up var(--dur-slow) var(--ease-out);
}
.p-sheet::backdrop { background: var(--scrim); }
.p-sheet[open]::backdrop { animation: p-fade var(--dur-slow) var(--ease-out); }

.p-sheet__handle {
  flex: 0 0 auto;
  width: 40px;
  height: 4px;
  margin: var(--sp-8) auto 0;
  border-radius: var(--r-pill);
  background: var(--edge);
}
.p-sheet__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-8) var(--sp-8) var(--sp-20);
}
.p-sheet__heading { flex: 1 1 auto; min-width: 0; padding-top: 9px; }
.p-sheet__title { font-size: var(--fs-19); font-weight: var(--fw-semibold); line-height: var(--lh-snug); text-wrap: balance; }
.p-sheet__sub { margin-top: 2px; font-size: var(--fs-14); color: var(--meta); line-height: var(--lh-snug); font-variant-numeric: tabular-nums; }
.p-sheet__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-8) var(--sp-20) var(--sp-20);
}
.p-sheet__body:last-child { padding-bottom: calc(var(--sp-20) + var(--safe-bottom)); }
.p-sheet__foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  padding: var(--sp-12) var(--sp-20) calc(var(--sp-12) + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.p-sheet__foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); font-size: var(--fs-14); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.p-sheet__foot .p-actions { gap: var(--sp-8); }

/* Full-height variant for long flows */
.p-sheet--full { height: 100dvh; max-height: 100dvh; border-radius: 0; }
.p-sheet--full .p-sheet__handle { display: none; }
.p-sheet--full .p-sheet__head { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-12); padding-top: max(var(--sp-12), env(safe-area-inset-top, 0px)); }
.p-sheet--full .p-sheet__body { padding-top: var(--sp-20); }

/* Side panel variant */
.p-sheet--side { inset: 0 0 0 auto; width: min(380px, 100%); height: 100dvh; max-height: 100dvh; border-radius: 0; }
.p-sheet--side .p-sheet__handle { display: none; }
.p-sheet--side[open] { animation: p-slide-left var(--dur-slow) var(--ease-out); }

@media (min-width: 768px) {
  .p-sheet {
    inset: 0;
    width: min(560px, calc(100% - 48px));
    max-height: min(85dvh, 760px);
    margin: auto;
    border-radius: var(--r-card);
  }
  .p-sheet[open] { animation-name: p-dialog-in; }
  .p-sheet__handle { display: none; }
  .p-sheet__head { padding: var(--sp-16) var(--sp-12) var(--sp-8) var(--sp-24); }
  .p-sheet__body { padding: var(--sp-8) var(--sp-24) var(--sp-24); }
  .p-sheet__body:last-child { padding-bottom: var(--sp-24); }
  .p-sheet__foot { padding: var(--sp-16) var(--sp-24); }
  .p-sheet__foot .p-actions { justify-content: flex-end; }
  .p-sheet--sm { width: min(420px, calc(100% - 48px)); }
  .p-sheet--lg { width: min(720px, calc(100% - 48px)); }
  .p-sheet--full { height: min(820px, calc(100dvh - 48px)); max-height: calc(100dvh - 48px); border-radius: var(--r-card); }
  .p-sheet--full .p-sheet__head { padding-top: var(--sp-16); }
  .p-sheet--side { inset: 0 0 0 auto; margin: 0; width: min(380px, 100%); height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .p-sheet--side[open] { animation-name: p-slide-left; }
}

/* Popover (desktop pangkat card); works with the popover attribute or .is-open */
.p-popover {
  position: fixed;
  z-index: var(--z-popover);
  width: min(340px, calc(100vw - 32px));
  margin: 0;
  padding: var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-float);
  inset: auto;
}
.p-popover:not([popover]) { display: none; }
.p-popover:not([popover]).is-open { display: block; animation: p-fade var(--dur) var(--ease-out); }
.p-popover:popover-open { animation: p-fade var(--dur) var(--ease-out); }

/* ------------------------------------------------------------------ */
/* 16. Tabs, segment, steps                                            */
/* ------------------------------------------------------------------ */
.p-tabs {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  box-shadow: inset 0 -1px 0 var(--line);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.p-tabs::-webkit-scrollbar { display: none; }
.p-tabs--sticky { position: sticky; top: 0; z-index: var(--z-base); background: var(--surface); }
.p-tabs__tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 var(--sp-12);
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.p-tabs__tab::after {
  content: "";
  position: absolute;
  left: var(--sp-12);
  right: var(--sp-12);
  bottom: 0;
  height: 3px;
  border-radius: 0;
  background: var(--accent-fill);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease-out);
}
.p-tabs__tab:hover { color: var(--ink); }
.p-tabs__tab:active { color: var(--ink); background: var(--surface-hover); }
.p-tabs__tab:focus-visible { outline-offset: -2px; border-radius: var(--r-control); }
.p-tabs__tab[aria-selected="true"],
.p-tabs__tab.is-active { color: var(--ink); font-weight: var(--fw-semibold); }
.p-tabs__tab[aria-selected="true"]::after,
.p-tabs__tab.is-active::after { transform: scaleX(1); }
.p-tabs__tab:disabled { color: var(--meta); cursor: not-allowed; }
.p-tabs__tab.is-error { color: var(--danger); }
.p-tabs__tab.is-error::after { background: var(--danger); }

.p-segment {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-control);
  background: var(--panel);
  max-width: 100%;
}
.p-segment--block { display: flex; width: 100%; }
.p-segment--block > .p-segment__btn { flex: 1 1 0; }
.p-segment__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 var(--sp-16);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.p-segment__btn::after { content: ""; position: absolute; inset: -2px 0; }
.p-segment__btn:hover { color: var(--ink); background: var(--panel-press); }
.p-segment__btn[aria-pressed="true"],
.p-segment__btn[aria-selected="true"],
.p-segment__btn[aria-checked="true"],
.p-segment__btn.is-active,
.p-segment__btn:has(input:checked) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}
.p-segment__btn:focus-visible, .p-segment__btn:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 0; }
.p-segment__btn input { position: absolute; opacity: 0; pointer-events: none; }
.p-segment__btn:disabled { color: var(--meta); cursor: not-allowed; background: transparent; }

.p-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-4);
}
.p-step { min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-13); line-height: 1.25; color: var(--meta); }
.p-step::before { content: ""; display: block; height: 4px; border-radius: var(--r-pill); background: var(--panel); transition: background-color var(--dur) var(--ease-out); }
.p-step.is-done::before { background: var(--accent-fill); }
.p-step.is-current,
.p-step[aria-current="step"] { color: var(--ink); font-weight: var(--fw-semibold); }
.p-step.is-current::before,
.p-step[aria-current="step"]::before { background: var(--accent-fill); }
.p-step.is-done { color: var(--ink-2); }
.p-step__label { overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .p-step:not(.is-current):not([aria-current="step"]) .p-step__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.p-steps__count { font-size: var(--fs-14); color: var(--meta); font-variant-numeric: tabular-nums; margin-bottom: var(--sp-8); }

/* ------------------------------------------------------------------ */
/* 17. Empty, skeleton, divider                                        */
/* ------------------------------------------------------------------ */
.p-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-8);
  padding: var(--sp-32) var(--sp-16);
}
.p-empty__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-4);
  border-radius: 50%;
  background: var(--panel);
  color: var(--ink-2);
  font-size: 28px;
  line-height: 1;
}
.p-empty__title { font-size: var(--fs-16); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ink); text-wrap: balance; }
.p-empty__text { max-width: 38ch; font-size: var(--fs-14); line-height: var(--lh-body); color: var(--ink-2); text-wrap: pretty; }
.p-empty__action { margin-top: var(--sp-8); }
.p-empty--compact { flex-direction: row; text-align: left; align-items: center; gap: var(--sp-12); padding: var(--sp-16); }
.p-empty--compact .p-empty__icon { width: 40px; height: 40px; font-size: 20px; margin: 0; flex: 0 0 auto; }
.p-empty--compact .p-empty__action { margin: 0 0 0 auto; }

/* One-line empty or error row for home modules: icon, one line, text link */
.p-emptyrow { display: flex; align-items: center; gap: var(--sp-12); min-height: 44px; }
.p-emptyrow__icon { flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--meta); }
.p-emptyrow__text { flex: 1 1 auto; min-width: 0; font-size: var(--fs-16); line-height: var(--lh-snug); color: var(--ink-2); }
.p-emptyrow > .p-link { flex: 0 0 auto; font-size: var(--fs-14); }

.p-skel {
  display: block;
  border-radius: var(--r-tag);
  background: var(--panel);
  animation: p-pulse 1.4s ease-in-out infinite alternate;
}
.p-skel--text { height: 14px; margin: 4px 0; width: 100%; }
.p-skel--text + .p-skel--text { width: 72%; }
.p-skel--title { height: 22px; width: 56%; margin: 2px 0 8px; }
.p-skel--stat { height: 28px; width: 70%; }
.p-skel--btn { height: 44px; width: 100%; border-radius: var(--r-control); }
.p-skel--block { height: 96px; width: 100%; border-radius: var(--r-card); }
.p-skel--circle { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; }
.p-skel-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-12) var(--sp-16); }
.p-skel-row > div { flex: 1 1 auto; }

.p-divider { height: 0; margin: var(--sp-16) 0; border: 0; border-top: 1px solid var(--line); }
.p-divider--flush { margin: 0; }
.p-divider--vertical { align-self: stretch; width: 0; height: auto; margin: 0 var(--sp-8); border-top: 0; border-left: 1px solid var(--line); }

/* ------------------------------------------------------------------ */
/* 18. Landing pieces                                                  */
/* ------------------------------------------------------------------ */
.p-sitehead {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.p-sitehead__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  height: var(--topbar-h);
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--sp-16) var(--sp-8);
}
@media (min-width: 768px) { .p-sitehead__inner { padding-inline: var(--sp-24); } }
.p-sitehead__brand { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 44px; }
.p-sitehead__nav { display: flex; align-items: center; gap: var(--sp-4); flex: 0 0 auto; }

.p-page { width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--sp-24) var(--sp-16) var(--sp-48); }
@media (min-width: 768px) { .p-page { padding: var(--sp-40) var(--sp-24) var(--sp-48); } }
.p-page--narrow { max-width: 480px; }
.p-page--form { max-width: 640px; }

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

.p-profilehead { display: flex; align-items: flex-start; gap: var(--sp-16); }
.p-profilehead__text { min-width: 0; flex: 1 1 auto; }
.p-profilehead__name { font-size: var(--fs-23); font-weight: var(--fw-semibold); line-height: var(--lh-tight); text-wrap: balance; }
@media (min-width: 768px) { .p-profilehead__name { font-size: var(--fs-28); } }
.p-profilehead__meta { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-12); font-size: var(--fs-14); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.p-profilehead__meta > span { display: inline-flex; align-items: center; gap: 4px; }
.p-profilehead__meta .ti { font-size: 16px; color: var(--meta); }

/* Expanding reveal (persatuan row to profile header); toggle data-open="true" */
.p-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease-out); }
.p-reveal > * { min-height: 0; overflow: hidden; }
.p-reveal[data-open="true"] { grid-template-rows: 1fr; }

.p-count { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: 1; font-variant-numeric: proportional-nums; color: var(--ink); }

.p-footer { border-top: 1px solid var(--line); background: var(--surface); }
.p-footer__inner { max-width: var(--content-max); margin-inline: auto; padding: var(--sp-24) var(--sp-16) calc(var(--sp-24) + var(--safe-bottom)); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-24); align-items: center; justify-content: space-between; font-size: var(--fs-14); color: var(--meta); }
@media (min-width: 768px) { .p-footer__inner { padding-inline: var(--sp-24); } }

/* QR / payment detail block */
.p-copyfield { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-12); border: 1px solid var(--line); border-radius: var(--r-control); background: var(--ground); min-height: 52px; }
.p-copyfield__text { flex: 1 1 auto; min-width: 0; }
.p-copyfield__label { font-size: var(--fs-13); color: var(--meta); }
.p-copyfield__value { font-size: var(--fs-16); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* ------------------------------------------------------------------ */
/* 18b. Infographic register: meter, date card, tiles, AJK, chips,    */
/*      contact actions, reveal hooks                                  */
/* ------------------------------------------------------------------ */
/* New display-setting components must still honour [hidden] */
:where(.p-badge, .p-meter__tip, .p-statgrid, .p-stat, .p-stat__sub, .p-stat__hint, .p-meter, .p-meter__head, .p-meter__seg, .p-meter__legend, .p-meter__ends, .p-meter__note, .p-datecard, .p-datecard__date, .p-datecard__tags, .p-datecard__foot, .p-tilegrid, .p-orgtile, .p-avatarrow, .p-avatarrow__item, .p-chips, .p-chips__item, .p-actionrow, .p-actionbtn, .p-key)[hidden] { display: none !important; }

/* Legend key swatch (mark beside text; text never wears the data colour) */
.p-key { display: inline-block; width: 10px; height: 10px; flex: 0 0 auto; border-radius: 3px; background: var(--accent-fill); }
/* Menunggu: ramp-1 carries a 45° ramp-2 hatch as a second channel (ramp-1 alone is under 3:1) */
.p-key.p-key--pending,
.p-meter__seg.p-meter__seg--pending { background-color: var(--ramp-1); background-image: repeating-linear-gradient(45deg, var(--ramp-2) 0 1.5px, transparent 1.5px 4px); }

/* Meter: 8px same-ramp track, segments with a 2px surface gap, 4px rounded data end.
   Segment widths are % of the track. Omit (or hide) a zero segment. */
.p-meter { --p-meter-gap: var(--surface); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.p-meter__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--sp-12); font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-2); }
.p-meter__value { min-width: 0; }
.p-meter__value strong { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); }
.p-meter__pct { flex: 0 0 auto; font-weight: var(--fw-semibold); color: var(--ink); white-space: nowrap; }
.p-meter__track { position: relative; display: block; height: 8px; border-radius: 4px; background: var(--accent-tint); overflow: hidden; }
.p-meter__fill { display: flex; width: 100%; height: 100%; clip-path: inset(0 0 0 0); }
.p-meter__seg { display: block; flex: 0 0 auto; height: 100%; min-width: 4px; max-width: 100%; background: var(--accent-fill); }
.p-meter__seg:not([hidden]) + .p-meter__seg { box-shadow: -2px 0 0 var(--p-meter-gap); }
.p-meter__seg:last-child,
.p-meter__seg:has(+ .p-meter__seg[hidden]) { border-radius: 0 4px 4px 0; }
.p-meter__legend { display: flex; flex-wrap: wrap; gap: 2px var(--sp-16); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); }
.p-meter__key { display: inline-flex; align-items: center; gap: 6px; }
.p-meter__note { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--meta); text-wrap: pretty; }
/* An amount with no drawn segment (e.g. menunggu on a full bar) is a text line, never a key */
.p-meter__line { font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); text-wrap: pretty; }
/* Over target: full bar + "Sasaran dicapai" tag + "Lebih RM x dari sasaran" */
.p-meter__status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-8); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--ink-2); }
/* Pangkat progress: current rank left, next rank right */
.p-meter__ends { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12); font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--meta); }
.p-meter__ends > :first-child { color: var(--ink); font-weight: var(--fw-semibold); }
.p-meter__ends > :last-child:not(:first-child) { text-align: right; }
.p-meter--rank .p-meter__head { align-items: center; }
/* Nilai tepat bila bar dituding / diketik / difokus (infografik interaktif).
   Markup: <div class="p-meter__bar"><div class="p-meter__track" tabindex="0" …>…</div><span class="p-meter__tip" aria-hidden="true">…</span></div> */
.p-meter__bar { position: relative; display: block; }
.p-meter__track[tabindex] { cursor: pointer; }
.p-meter__track[tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .p-meter__track[tabindex]:hover { box-shadow: 0 0 0 2px var(--accent-tint); } }
.p-meter__tip {
  position: absolute; z-index: var(--z-popover); left: 0; top: 100%;
  display: none; width: max-content; max-width: 100%;
  margin-top: 6px; padding: 6px 10px;
  border-radius: var(--r-control); background: var(--ink); color: var(--on-ink);
  font-size: var(--fs-13); font-weight: var(--fw-medium); line-height: var(--lh-snug);
  font-variant-numeric: tabular-nums; pointer-events: none;
  box-shadow: var(--shadow-float);
}
.p-meter__tip::before { content: ""; position: absolute; top: -4px; left: 14px; width: 8px; height: 8px; background: var(--ink); transform: rotate(45deg); }
.p-meter__track:hover + .p-meter__tip,
.p-meter__track:focus + .p-meter__tip { display: block; animation: p-fade var(--dur-fast) var(--ease-out); }

/* Date card: 64px date block + body; foot spans both columns (meter, action).
   Use sentence-case short names (Sab, Sep), never uppercase. Not for use inside .p-card. */
.p-datecard {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: start;
  min-width: 0;
  padding: var(--sp-16);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
}
@media (min-width: 768px) { .p-datecard { padding: var(--sp-20); } }
.p-datecard__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 64px;
  min-height: 76px;
  padding: var(--sp-8) var(--sp-4);
  border-radius: var(--r-control);
  background: var(--accent-tint);
  color: var(--accent-ink);
  text-align: center;
}
.p-datecard__dow,
.p-datecard__mon { font-size: var(--fs-13); font-weight: var(--fw-semibold); line-height: 1.15; }
.p-datecard__day { font-size: var(--fs-28); font-weight: var(--fw-semibold); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: proportional-nums; }
.p-datecard__date--range .p-datecard__day { font-size: var(--fs-19); }
.p-datecard__date--tba { gap: var(--sp-4); }
.p-datecard__date--tba .ti { font-size: 24px; line-height: 1; }
.p-datecard__body { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; align-self: center; }
.p-datecard__title { font-size: var(--fs-19); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.p-datecard__meta { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-2); }
.p-datecard__meta > span { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.p-datecard__meta .ti { flex: 0 0 auto; font-size: 16px; line-height: 1.3; color: var(--meta); }
.p-datecard__tags { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-4); }
.p-datecard__foot { grid-column: 1 / -1; display: flex; flex-direction: column; gap: var(--sp-12); min-width: 0; }
.p-datecard__foot > .p-btn { width: 100%; }
@media (min-width: 768px) { .p-datecard__foot > .p-btn { width: auto; align-self: flex-start; } }

/* Hub persatuan tiles: 2 across on phone, 3 from 768px */
.p-tilegrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .p-tilegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); } }
.p-tilegrid > li { display: flex; min-width: 0; }
.p-orgtile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  min-height: 136px;
  margin: 0;
  padding: var(--sp-12);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (min-width: 768px) { .p-orgtile { padding: var(--sp-16); } }
.p-orgtile__code { font-size: var(--fs-23); font-weight: var(--fw-bold); line-height: var(--lh-tight); color: var(--ink); }
.p-orgtile__cover { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--fs-13); line-height: var(--lh-snug); color: var(--meta); overflow-wrap: anywhere; }
.p-orgtile__foot { display: flex; align-items: center; gap: var(--sp-8); min-width: 0; margin-top: auto; padding-top: var(--sp-12); }
.p-orgtile__count { min-width: 0; font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-2); white-space: nowrap; }
.p-orgtile__count strong { font-size: var(--fs-16); font-weight: var(--fw-semibold); color: var(--ink); font-variant-numeric: proportional-nums; }
@media (hover: hover) { .p-orgtile:hover { border-color: var(--accent-fill); } }
.p-orgtile:focus-visible { border-color: var(--accent-fill); outline-offset: 2px; }
.p-orgtile:active { background: var(--accent-tint); border-color: var(--accent-fill); }
.p-orgtile[aria-current="true"],
.p-orgtile[aria-current="page"],
.p-orgtile.is-active { border-color: var(--accent-fill); box-shadow: inset 0 0 0 1px var(--accent-fill); }
.p-orgtile[aria-disabled="true"],
.p-orgtile[aria-disabled="true"]:hover { cursor: not-allowed; background: var(--surface); border-color: var(--line); box-shadow: none; }
.p-orgtile[aria-disabled="true"] .p-orgtile__code { color: var(--meta); }
.p-orgtile.is-loading { pointer-events: none; }

/* AJK: initials avatar + nama + jawatan */
.p-avatar--accent { width: 40px; height: 40px; background: var(--accent-tint); color: var(--accent-ink); font-size: var(--fs-14); }
.p-avatarrow { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-12) var(--sp-24); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .p-avatarrow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.p-avatarrow__item { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; min-height: 44px; }
.p-avatarrow__text { display: flex; flex-direction: column; min-width: 0; }
.p-avatarrow__name { font-size: var(--fs-16); font-weight: var(--fw-medium); line-height: var(--lh-snug); color: var(--ink); overflow-wrap: anywhere; }
.p-avatarrow__role { font-size: var(--fs-14); line-height: var(--lh-snug); color: var(--ink-2); }

/* Negeri liputan chips (static, not buttons) */
.p-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); margin: 0; padding: 0; list-style: none; }
.p-chips__item { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px var(--sp-12) 4px var(--sp-8); border-radius: var(--r-pill); background: var(--accent-tint); color: var(--ink); font-size: var(--fs-14); font-weight: var(--fw-medium); line-height: 1.2; }
.p-chips__item .ti { flex: 0 0 auto; font-size: 16px; line-height: 1; color: var(--accent-ink); }

/* Contact actions: badge over label, up to 4 across on phone, fixed width from 768px */
.p-actionrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: var(--sp-8); }
@media (min-width: 768px) { .p-actionrow { grid-template-columns: repeat(auto-fill, minmax(120px, 148px)); gap: var(--sp-12); } }
.p-actionbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 88px;
  margin: 0;
  padding: var(--sp-12) var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.p-actionbtn__label { max-width: 100%; overflow-wrap: anywhere; }
@media (hover: hover) { .p-actionbtn:hover { border-color: var(--accent-fill); } }
.p-actionbtn:focus-visible { border-color: var(--accent-fill); outline-offset: 2px; }
.p-actionbtn:active { background: var(--accent-tint); border-color: var(--accent-fill); }
.p-actionbtn:disabled,
.p-actionbtn[aria-disabled="true"],
.p-actionbtn[aria-disabled="true"]:hover { cursor: not-allowed; color: var(--meta); background: var(--surface); border-color: var(--line); }
.p-actionbtn:disabled .p-badge,
.p-actionbtn[aria-disabled="true"] .p-badge { background: var(--panel); color: var(--meta); }

/* Count-up hook: <span class="p-stat__num p-countup" data-countup="1200">1,200</span>.
   The page JS animates once (<=400ms) on first reveal; the final text is already in the HTML. */
.p-countup { font-variant-numeric: proportional-nums; }

/* Reveal hooks. The page adds html.p-motion only when motion is allowed and
   IntersectionObserver exists, then adds .is-in to each [data-reveal] once.
   Without .p-motion everything renders final and static. */
@media (prefers-reduced-motion: no-preference) {
  .p-motion [data-reveal] .p-meter__fill { transition: clip-path 400ms var(--ease-out); }
  .p-motion [data-reveal]:not(.is-in) .p-meter__fill { clip-path: inset(0 100% 0 0); }
  .p-motion .p-appear[data-reveal] { transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); }
  .p-motion .p-appear[data-reveal]:not(.is-in) { opacity: 0; transform: translateY(6px); }
  /* Signature expand (hub tile -> profile header, 200ms): the outlined plate grows empty and the header
     content fades in only once the plate is at full size, so no text sits outside the outline in any frame */
  .p-motion .lp-morphing .p-profilehead > * { animation: p-morph-content 200ms linear both; }
}
@keyframes p-morph-content { 0%, 72% { opacity: 0; } 100% { opacity: 1; } }

/* Forced colours: keep meter marks and badges visible */
@media (forced-colors: active) {
  .p-meter__track { border: 1px solid CanvasText; }
  .p-meter__seg, .p-key { forced-color-adjust: none; background: CanvasText; }
  .p-meter__seg--pending, .p-key--pending { background: GrayText; }
  .p-badge, .p-datecard__date { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------------ */
/* 19. Motion                                                          */
/* ------------------------------------------------------------------ */
@keyframes p-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes p-fade-up { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes p-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes p-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes p-slide-left { from { transform: translateX(100%); } to { transform: none; } }
@keyframes p-pulse { from { opacity: 1; } to { opacity: .5; } }
@keyframes p-grow { from { transform: scaleX(0); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .p-body *,
  .p-body *::before,
  .p-body *::after,
  .p-body *::backdrop {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  .p-skel,
  .p-stat.is-loading .p-stat__value { animation: none !important; }
  .p-btn.is-loading::before,
  .p-btn[aria-busy="true"]::before { animation: p-spin 1.4s linear infinite !important; }
}

/* ------------------------------------------------------------------ */
/* 20. Print                                                           */
/* ------------------------------------------------------------------ */
@media print {
  .p-body { background: #FFFFFF; color: #000000; }
  .p-topbar, .p-sidebar, .p-bottombar, .p-drawer, .p-scrim, .p-sitehead__nav, .p-toast--float, .p-iconbtn, .p-no-print { display: none !important; }
  .p-app { display: block; }
  .p-main { padding: 0; }
  .p-card, .p-list, .p-stats, .p-stat, .p-datecard, .p-orgtile, .p-actionbtn { border-color: #BBBBBB; break-inside: avoid; }
  .p-meter__track, .p-meter__seg, .p-badge, .p-datecard__date, .p-key { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .p-meter__fill { clip-path: none !important; }
  .p-btn { border: 1px solid #000000; background: none; color: #000000; }
  a.p-link[href]::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 12px; }
}