/* =====================================================================
   AkseleraSync — Akselera Launchpad (Modul 3)
   ---------------------------------------------------------------------
   Dipakai dua portal dengan kepadatan berbeda (Staf dan Pimpinan), jadi
   TIDAK ADA padding/gap tetap di berkas ini. Seluruh jarak, radius, dan
   ukuran teks memakai token dari assets/css/tokens.css — termasuk token
   kepadatan per portal (--d-card-pad, --d-card-gap, --d-section-gap,
   --d-card-radius, --d-body-size). Modul otomatis menyesuaikan portal
   yang memuatnya tanpa satu pun aturan khusus portal di sini.

   Kontrak audit yang dipatuhi berkas ini:
   - nol font-size di bawah --fs-caption (12px);
   - target sentuh minimal --touch-min (44px);
   - status tidak pernah dibedakan hanya oleh warna — selalu ada ikon
     SVG dan label teks pendamping.

   Warna mengikuti palet brand index.html bila tersedia, dengan nilai
   cadangan agar modul tetap benar saat diuji berdiri sendiri.
   ===================================================================== */

.lp-root {
  --lp-indigo: var(--indigo, #243B72);
  --lp-indigo-dark: var(--indigo-dark, #15244A);
  --lp-indigo-soft: var(--indigo-soft, #E9EDF6);
  --lp-emerald: var(--emerald, #087A60);
  --lp-emerald-dark: var(--emerald-dark, #075B49);
  --lp-emerald-soft: var(--emerald-soft, #E7F3EF);
  --lp-gold: var(--gold, #D7A52E);
  --lp-gold-dark: var(--gold-dark, #9A7314);
  --lp-gold-soft: var(--gold-soft, #FBF3DE);
  --lp-warm: var(--terracotta, #C6613B);
  --lp-warm-dark: var(--terracotta-dark, #9C4529);
  --lp-warm-soft: var(--terracotta-soft, #FBEFE9);
  --lp-ink: var(--ink, #15244A);
  --lp-text: var(--text, #3C4A6B);
  --lp-muted: var(--muted, #64718A);
  --lp-line: var(--line, #E7E3D9);
  --lp-sand: var(--sand, #F3F0E8);
  --lp-canvas: var(--canvas, #FCFBF7);
  --lp-white: var(--white, #FFFFFF);

  display: grid;
  gap: var(--d-section-gap);
  color: var(--lp-ink);
  font-size: var(--d-body-size);
  line-height: var(--lh-normal);
  text-align: left;
}
.lp-root *,
.lp-root *::before,
.lp-root *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------------
   Divider bermerek antar section — SoT 7.2.5
   Hanya DI ANTARA section level halaman (elemen <section> anak langsung
   .lp-root yang bertetangga); tidak pernah di dalam kartu, sheet, atau
   antar item daftar. Digambar absolut di TENGAH gap grid oleh pseudo
   pada section KEDUA sehingga tidak menambah tinggi layout. ::before
   dan ::after langsung pada section level halaman belum terpakai di
   mana pun — sudah diperiksa lewat grep. position: relative tanpa
   z-index tidak membuat stacking context baru.

   Garis dibuat transparan selebar piring di tengah supaya terputus
   rapi: piring mark ikut opacity .55, dan piring semi transparan tidak
   bisa menutup garis di belakangnya dengan bersih. */
.lp-root > section + section { position: relative; }
.lp-root > section + section::before {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap));
  right: 8%;
  left: 8%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    var(--lp-line) 22%,
    var(--lp-line) calc(50% - 13px),
    transparent calc(50% - 12px),
    transparent calc(50% + 12px),
    var(--lp-line) calc(50% + 13px),
    var(--lp-line) 78%,
    transparent);
}
.lp-root > section + section::after {
  content: "";
  position: absolute;
  top: calc(-.5 * var(--d-section-gap) - 10px);
  left: 50%;
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: var(--r-pill);
  background: var(--lp-canvas) url("/presentasi/storage/brand/akselerasync-mark-1x1.webp") center / 13px 13px no-repeat;
  filter: grayscale(1);
  opacity: .55;
}
.lp-root p { margin: 0; }
.lp-root ul,
.lp-root ol { margin: 0; padding: 0; list-style: none; }
.lp-root dl { margin: 0; }

/* --- Ikon ----------------------------------------------------------- */
.lp-glyph {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  vertical-align: -.18em;
}

/* --- Kartu ---------------------------------------------------------- */
.lp-card {
  display: grid;
  gap: var(--d-card-gap);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-radius: var(--d-card-radius);
  background: var(--lp-white);
  box-shadow: var(--elev-1);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Kepala bagian --------------------------------------------------- */
.lp-head {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}
.lp-head__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-md);
  background: var(--lp-indigo-soft);
  color: var(--lp-indigo);
  font-size: var(--fs-subhead);
}
.lp-head > div { min-width: 0; }
.lp-head__title {
  margin: 0;
  color: var(--lp-ink);
  font-size: var(--fs-heading);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: -.012em;
}
.lp-head__sub {
  margin-top: var(--sp-1);
  color: var(--lp-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
/* Blok judul -> konten mengikuti var(--sec-head-gap) 12px (RITME
   SECTION OPSI B). Gap grid kartu adalah --d-card-gap yang berubah per
   kepadatan (8 atau 12px); margin di bawah menggenapkan selisihnya
   sehingga jarak judul section ke isinya selalu 12px. */
.lp-card > .lp-head {
  margin-bottom: calc(var(--sec-head-gap, var(--sp-3)) - var(--d-card-gap));
}

/* ---------------------------------------------------------------------
   Anatomi header section — bar aksen + kicker (RITME SECTION OPSI B)
   Bar aksen 14x3 pill menandai awal section, warnanya warna kicker
   (default var(--kick-indigo) dari tokens.css, dengan fallback untuk
   pratinjau berdiri sendiri). Tanpa kicker bar berdiri di atas judul;
   bila kicker hadir bar pindah ke kiri kicker dan bar judul dilepas.
   ::before pada .lp-head__title dan .lp-kicker belum terpakai di mana
   pun — sudah diperiksa lewat grep. .lp-head__title hanya dipakai
   sebagai judul section level halaman, jadi tidak perlu pagar selektor
   tambahan.
   ------------------------------------------------------------------- */
.lp-head__title::before {
  content: "";
  display: block;
  width: 14px;
  height: 3px;
  margin-bottom: var(--sp-1);
  border-radius: var(--r-pill);
  background: var(--kick-indigo, #243B72);
}
.lp-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  color: var(--kick-indigo, #243B72);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  line-height: 1.35;
  text-transform: uppercase;
}
.lp-kicker::before {
  content: "";
  flex: none;
  width: 14px;
  height: 3px;
  border-radius: var(--r-pill);
  background: currentColor;
}
.lp-kicker + .lp-head__title::before { content: none; }
/* Warna kicker per domain — --gold mentah dilarang untuk teks kicker,
   pakai turunan gelap dari tokens.css yang lolos kontras teks 12px. */
.lp-kicker--gold { color: var(--kick-gold, #8A6A14); }
.lp-kicker--emerald { color: var(--kick-emerald, #087A60); }
.lp-kicker--terra { color: var(--kick-terra, #9C4529); }

.lp-eyebrow {
  color: var(--lp-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.lp-eyebrow--warm { color: var(--lp-warm-dark); }

.lp-note {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-note--soft {
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--lp-sand);
}

/* --- Batang kemajuan -------------------------------------------------- */
.lp-bar {
  position: relative;
  height: var(--sp-2);
  min-width: 0;
  border-radius: var(--r-pill);
  background: var(--lp-sand);
  overflow: hidden;
}
.lp-bar__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: var(--lp-indigo);
  transition: width var(--motion-base) var(--motion-ease);
}
.lp-bar--good .lp-bar__fill { background: var(--lp-emerald); }
.lp-bar--gold .lp-bar__fill { background: var(--lp-gold); }
.lp-bar--warm .lp-bar__fill { background: var(--lp-warm); }

/* --- Chip, pil status, tingkat kewajiban ------------------------------ */
.lp-chip,
.lp-pill,
.lp-level {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  white-space: nowrap;
  max-width: 100%;
}
.lp-chip > span,
.lp-pill > span,
.lp-level > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lp-chip--indigo, .lp-pill--indigo { color: var(--lp-indigo); background: var(--lp-indigo-soft); }
.lp-chip--good, .lp-pill--good { color: var(--lp-emerald-dark); background: var(--lp-emerald-soft); }
.lp-chip--gold, .lp-pill--gold { color: var(--lp-gold-dark); background: var(--lp-gold-soft); }
.lp-chip--warm, .lp-pill--warm { color: var(--lp-warm-dark); background: var(--lp-warm-soft); }
.lp-chip--muted, .lp-pill--muted { color: var(--lp-muted); background: var(--lp-sand); }

.lp-level {
  border: 1px solid transparent;
  font-weight: var(--fw-semibold);
}
.lp-level--hard { color: var(--lp-warm-dark); background: var(--lp-warm-soft); border-color: rgba(198, 97, 59, .3); }
.lp-level--conditional { color: var(--lp-gold-dark); background: var(--lp-gold-soft); border-color: rgba(215, 165, 46, .38); }
.lp-level--recommended { color: var(--lp-indigo); background: var(--lp-indigo-soft); border-color: rgba(36, 59, 114, .2); }
.lp-level--optional { color: var(--lp-muted); background: var(--lp-sand); border-color: var(--lp-line); }

/* --- Tombol ----------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--touch-min);
  min-width: var(--touch-min);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  text-align: center;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--motion-ease),
              box-shadow var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.lp-btn--block { width: 100%; }
.lp-btn--primary { color: var(--lp-white); background: var(--lp-indigo); box-shadow: var(--elev-1); }
.lp-btn--secondary { color: var(--lp-indigo); background: var(--lp-indigo-soft); border-color: rgba(36, 59, 114, .16); }
.lp-btn--ghost { color: var(--lp-muted); background: transparent; border-color: var(--lp-line); }
.lp-btn:hover:not([disabled]) { transform: translateY(-1px); box-shadow: var(--elev-2); }
.lp-btn:active:not([disabled]) { transform: translateY(0); }
.lp-btn:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }
.lp-btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
  color: var(--lp-muted);
  background: var(--lp-sand);
  border-color: var(--lp-line);
  box-shadow: none;
}

/* --- Hero ------------------------------------------------------------- */
.lp-hero {
  background:
    radial-gradient(circle at 100% 0, rgba(215, 165, 46, .14), transparent 55%),
    linear-gradient(155deg, var(--lp-white) 0%, var(--lp-canvas) 100%);
  border-color: rgba(36, 59, 114, .16);
  box-shadow: var(--elev-2);
}
.lp-hero__title {
  margin: 0;
  color: var(--lp-ink);
  font-size: var(--fs-display);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.lp-hero__sub {
  color: var(--lp-muted);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-hero__lead {
  max-width: 62ch;
  color: var(--lp-text);
  font-size: var(--d-body-size);
  line-height: var(--lh-relaxed);
}
.lp-hero__progress { display: grid; gap: var(--sp-2); }
.lp-hero__percent { color: var(--lp-text); font-size: var(--fs-small); }
.lp-hero__percent strong { color: var(--lp-ink); font-size: var(--fs-subhead); }
.lp-hero__pic,
.lp-hero__now {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--lp-indigo-soft);
  color: var(--lp-indigo);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.lp-hero__now { background: var(--lp-gold-soft); color: var(--lp-gold-dark); }

/* --- Kartu angka ------------------------------------------------------ */
.lp-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: var(--d-card-gap);
}
/* Kartu angka terakhir merapat penuh bila barisnya tinggal separuh
   terisi. Tanpa ini, satu kartu berdiri sendiri di baris bawah dengan
   lubang selebar kartu di sebelahnya — lubang itulah yang membuat
   susunan terbaca belum selesai. */
.lp-stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container lp (min-width: 700px) {
  .lp-stat:last-child:nth-child(odd) { grid-column: auto; }
}
.lp-stat {
  display: grid;
  gap: var(--sp-1);
  align-content: start;
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-stat__value {
  color: var(--lp-ink);
  font-size: var(--fs-metric-md);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.lp-stat__label {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-stat--accent {
  border-color: rgba(198, 97, 59, .35);
  background: var(--lp-warm-soft);
}
.lp-stat--accent .lp-stat__value { color: var(--lp-warm-dark); }
.lp-stat--accent .lp-stat__label { color: var(--lp-warm-dark); }
/* Nol keputusan tertunda bukan peringatan — jangan biarkan tampil merah. */
.lp-stat--clear {
  border-color: rgba(8, 122, 96, .35);
  background: var(--lp-emerald-soft);
}
.lp-stat--clear .lp-stat__value,
.lp-stat--clear .lp-stat__label { color: var(--lp-emerald-dark); }

/* --- Peringatan ------------------------------------------------------- */
.lp-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border: 1px solid rgba(198, 97, 59, .35);
  border-left: 4px solid var(--lp-warm);
  border-radius: var(--d-card-radius);
  background: var(--lp-warm-soft);
  min-width: 0;
}
.lp-alert__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-sm);
  background: var(--lp-white);
  color: var(--lp-warm-dark);
  font-size: var(--fs-subhead);
}
/* Kalimat pengantar -> daftar butir, dan antar butir daftar. Tiap butir
   adalah kartu putih di atas latar hangat. 8px -> 12px. */
.lp-alert > div { min-width: 0; display: grid; gap: var(--sp-3); }
.lp-alert strong { color: var(--lp-warm-dark); font-size: var(--fs-subhead); line-height: var(--lh-tight); }
.lp-alert p { color: var(--lp-text); font-size: var(--fs-small); line-height: var(--lh-snug); }
.lp-alert__list { display: grid; gap: var(--sp-3); }
.lp-alert__list li {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--lp-white);
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.lp-alert__list span {
  display: block;
  margin-top: var(--sp-1);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
}

/* --- Perlu keputusan Anda (layar pimpinan) ---------------------------- */
.lp-decisions {
  border-color: rgba(198, 97, 59, .4);
  border-width: 2px;
  background:
    radial-gradient(circle at 0 0, rgba(198, 97, 59, .1), transparent 60%),
    var(--lp-white);
  box-shadow: var(--elev-3);
}
.lp-decisions__banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  min-width: 0;
}
.lp-decisions__seal {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-9);
  height: var(--sp-9);
  border-radius: var(--r-md);
  background: var(--lp-warm);
  color: var(--lp-white);
  font-size: var(--fs-title);
}
.lp-decisions__banner > div { min-width: 0; display: grid; gap: var(--sp-1); }
.lp-decisions__banner strong {
  color: var(--lp-ink);
  font-size: var(--fs-title);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
.lp-decisions__banner p {
  max-width: 60ch;
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.lp-decisions--clear { border-color: rgba(8, 122, 96, .35); }
.lp-decisions--clear .lp-decisions__seal { background: var(--lp-emerald); }

.lp-decisions__list {
  display: grid;
  gap: var(--d-card-gap);
}
/* Kartu di dalam grid dua/tiga kolom memakai flex kolom agar baris
   penutup (tombol, pemilik, peran Anda) menempel ke dasar kartu.
   Tanpa ini, kartu yang isinya lebih pendek meninggalkan ruang kosong
   menggantung di tengah baris. */
.lp-decision {
  display: flex;
  flex-direction: column;
  /* Baris fakta terakhir ("Diminta kepada") mendarat langsung di atas
     tombol keputusan dengan cuma --sp-2. --sp-3 pas di garis ambang
     (12px persis); --sp-4 memberi kelonggaran nyata agar tombol terbaca
     sebagai ajakan baru, bukan lanjutan kalimat sebelumnya. */
  gap: var(--sp-4);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-warm);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
  min-width: 0;
}
.lp-decision--gate { border-left-color: var(--lp-indigo); }
.lp-decision__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  /* Sama seperti .lp-criteria__top: judul yang membungkus jatuh terlalu
     dekat ke chip tingkat kewajiban di baris berikutnya pada --sp-2. */
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.lp-decision__top h4 {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-decision__ask {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.lp-decision__facts { display: grid; gap: var(--sp-2); }
.lp-decision__facts > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-3);
}
.lp-decision__facts dt {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: var(--lh-tight);
}
.lp-decision__facts dd {
  margin: 0;
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-decision .lp-btn { margin-top: auto; align-self: flex-start; }

/* --- Peta tahap -------------------------------------------------------- */
.lp-stagemap__rail {
  display: flex;
  gap: var(--sp-1);
  min-width: 0;
}
.lp-rail {
  flex: 1 1 0;
  height: var(--sp-2);
  border-radius: var(--r-pill);
  background: var(--lp-sand);
}
.lp-rail--selesai { background: var(--lp-emerald); }
.lp-rail--berjalan { background: var(--lp-gold); }
.lp-stagemap__count {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-stagemap__count strong { color: var(--lp-emerald-dark); }

.lp-split {
  display: grid;
  /* Judul "Siapa mengerjakan apa" dan legenda warna di bawah batang
     pembagi mendarat pada --sp-2, terbaca menempel ke tepi keras batang
     dan chip. Naik ke --sp-4 memberi keduanya ruang napas penuh. */
  gap: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
}
.lp-split__title {
  color: var(--lp-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.lp-split__bar {
  display: flex;
  gap: var(--sp-1);
  height: var(--sp-3);
}
.lp-split__seg { border-radius: var(--r-pill); }
.lp-split__seg--tim { background: var(--lp-indigo); }
.lp-split__seg--bersama { background: var(--lp-gold); }
.lp-split__seg--sekolah { background: var(--lp-warm); }
.lp-split__key { display: grid; gap: var(--sp-1); }
.lp-split__key li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-key {
  flex: none;
  width: var(--sp-3);
  height: var(--sp-3);
  border-radius: var(--r-xs);
}
.lp-key--tim { background: var(--lp-indigo); }
.lp-key--bersama { background: var(--lp-gold); }
.lp-key--sekolah { background: var(--lp-warm); }

.lp-stages {
  display: grid;
  gap: var(--d-card-gap);
}
.lp-stage {
  display: flex;
  flex-direction: column;
  /* Baris PIC dan baris "Peran Anda" duduk berurutan; permukaan pasir
     dari "Peran Anda" mendarat pada tinta baris PIC dengan cuma --sp-2. */
  gap: var(--sp-4);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-stage--selesai { border-left-color: var(--lp-emerald); background: var(--lp-canvas); }
.lp-stage--berjalan {
  border-left-color: var(--lp-gold);
  border-color: rgba(215, 165, 46, .45);
  background: var(--lp-gold-soft);
  box-shadow: var(--elev-1);
}
.lp-stage--menunggu { border-left-color: var(--lp-line); }
.lp-stage__top {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.lp-stage__no {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--lp-indigo);
  color: var(--lp-white);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
.lp-stage--menunggu .lp-stage__no { background: var(--lp-muted); }
.lp-stage--selesai .lp-stage__no { background: var(--lp-emerald); }
.lp-stage--berjalan .lp-stage__no { background: var(--lp-gold-dark); }
.lp-stage__id { flex: 1 1 10rem; min-width: 0; display: grid; gap: 0; }
.lp-stage__id strong {
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-stage__doc {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-style: italic;
  line-height: var(--lh-snug);
}
.lp-stage__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
}
.lp-stage__doer,
.lp-stage__when {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}
.lp-stage__doer {
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
}
.lp-stage__doer--tim { color: var(--lp-indigo); background: var(--lp-indigo-soft); }
.lp-stage__doer--bersama { color: var(--lp-gold-dark); background: var(--lp-gold-soft); }
.lp-stage__doer--sekolah { color: var(--lp-warm-dark); background: var(--lp-warm-soft); }
.lp-stage__progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}
.lp-stage__progress span {
  color: var(--lp-gold-dark);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.lp-stage__result {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-stage__pic {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Prefiks .lp-root wajib di sini: reset `.lp-root p { margin: 0 }` di atas
   lebih spesifik daripada selektor kelas tunggal, sehingga margin-top:auto
   akan diabaikan tanpa prefiks ini. */
.lp-root .lp-stage__yours {
  margin-top: auto;
}
.lp-stage__yours {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--lp-sand);
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-stage__yours strong { color: var(--lp-ink); }
.lp-stage__yours span { color: var(--lp-muted); font-weight: var(--fw-semibold); }

/* --- Gerbang go-live --------------------------------------------------- */
.lp-gate__score {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  /* Baris angka ("6 dari 8") duduk tepat di atas batang kemajuan; jarak
     baris sebelumnya (--sp-1=4px) mendarat di huruf angkanya sendiri.
     Naik satu tangga penuh (--sp-3) supaya batang tidak menempel teks. */
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
  border: 1px solid var(--lp-line);
}
.lp-gate__score strong {
  grid-row: 1;
  color: var(--lp-ink);
  font-size: var(--fs-metric-md);
  font-weight: var(--fw-heavy);
  line-height: var(--lh-tight);
}
.lp-gate__score span {
  grid-row: 1;
  color: var(--lp-muted);
  font-size: var(--fs-small);
}
.lp-gate__score .lp-bar { grid-column: 1 / -1; }
.lp-gate__list { display: grid; gap: var(--d-card-gap); }
.lp-criteria {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-criteria--terpenuhi { border-left-color: var(--lp-emerald); background: var(--lp-canvas); }
.lp-criteria--bersyarat { border-left-color: var(--lp-gold); background: var(--lp-gold-soft); }
.lp-criteria--belum { border-left-color: var(--lp-warm); background: var(--lp-warm-soft); }
.lp-criteria__top {
  display: flex;
  align-items: flex-start;
  /* Saat judul membungkus baris kedua, baris itu jatuh langsung di atas
     pil status dengan cuma --sp-2 (terbaca menempel). Satu tangga lebih
     lapang menahan pil turun cukup jauh dari huruf judul. */
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.lp-criteria__no {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  color: var(--lp-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
}
.lp-criteria__name {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-criteria__evidence {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
.lp-criteria__evidence strong { color: var(--lp-ink); }
.lp-root .lp-criteria__owner { margin-top: auto; }
.lp-criteria__owner {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* --- Persetujuan -------------------------------------------------------- */
.lp-approval {
  border-color: rgba(36, 59, 114, .25);
  background:
    radial-gradient(circle at 100% 100%, rgba(36, 59, 114, .07), transparent 60%),
    var(--lp-white);
  box-shadow: var(--elev-2);
}
.lp-approval__who {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--lp-indigo-soft);
  color: var(--lp-indigo);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
}
.lp-approval__lead {
  color: var(--lp-text);
  font-size: var(--d-body-size);
  line-height: var(--lh-relaxed);
}
.lp-approval__receipt,
.lp-approval__blocked {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--lp-emerald-soft);
  border: 1px solid rgba(8, 122, 96, .28);
  min-width: 0;
}
.lp-approval__receipt--cond { background: var(--lp-gold-soft); border-color: rgba(215, 165, 46, .4); }
.lp-approval__blocked { background: var(--lp-sand); border-color: var(--lp-line); }
.lp-approval__receipt > div,
.lp-approval__blocked > div { min-width: 0; display: grid; gap: var(--sp-1); }
.lp-approval__receipt strong,
.lp-approval__blocked strong {
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  line-height: var(--lh-tight);
}
.lp-approval__receipt p,
.lp-approval__blocked p {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-approval__seal {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-pill);
  color: var(--lp-white);
  font-size: var(--fs-heading);
}
.lp-approval__seal--done { background: var(--lp-emerald); }
.lp-approval__seal--cond { background: var(--lp-gold-dark); }
.lp-approval__seal--wait { background: var(--lp-muted); }

/* --- Berita acara ------------------------------------------------------- */
.lp-handover {
  border-color: rgba(215, 165, 46, .38);
  background:
    linear-gradient(180deg, var(--lp-gold-soft) 0%, var(--lp-white) 30%);
}
.lp-handover--signed { border-color: rgba(8, 122, 96, .35); }
.lp-handover__banner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px dashed rgba(154, 115, 20, .5);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-handover--signed .lp-handover__banner { border-color: rgba(8, 122, 96, .45); }
.lp-handover__seal {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-9);
  height: var(--sp-9);
  border-radius: var(--r-md);
  background: var(--lp-gold-soft);
  color: var(--lp-gold-dark);
  font-size: var(--fs-title);
}
.lp-handover--signed .lp-handover__seal { background: var(--lp-emerald-soft); color: var(--lp-emerald-dark); }
.lp-handover__banner > div { min-width: 0; display: grid; gap: var(--sp-1); }
.lp-handover__banner strong {
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  line-height: var(--lh-tight);
}
.lp-handover__banner p {
  max-width: 60ch;
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
}
/* Daftar kartu serah terima: kartu berlatar sama menumpuk di atas latar
   sama, tanpa garis warna pemisah. Ambang kartu ke kartu: 8px -> 12px.
   Sekeluarga dengan .lp-fields dan .lp-audit__list di bawah. */
.lp-handover__list {
  display: grid;
  gap: var(--sp-3);
}
.lp-handover__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-sm);
  background: var(--lp-white);
  min-width: 0;
}
.lp-handover__item > div { min-width: 0; display: grid; gap: var(--sp-1); }
.lp-handover__mark {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--sp-5);
  height: var(--sp-5);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
}
.lp-handover__item--siap .lp-handover__mark { background: var(--lp-emerald-soft); color: var(--lp-emerald-dark); }
.lp-handover__item--menunggu .lp-handover__mark { background: var(--lp-gold-soft); color: var(--lp-gold-dark); }
.lp-handover__item strong {
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.lp-handover__item span {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}

/* --- Tingkat kewajiban: legenda ---------------------------------------- */
.lp-legend__list {
  display: grid;
  gap: var(--d-card-gap);
}
.lp-legend__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-legend__item--hard { border-left-color: var(--lp-warm); background: var(--lp-warm-soft); }
.lp-legend__item--conditional { border-left-color: var(--lp-gold); background: var(--lp-gold-soft); }
.lp-legend__item--recommended { border-left-color: var(--lp-indigo); background: var(--lp-indigo-soft); }
.lp-legend__item--optional { border-left-color: var(--lp-muted); background: var(--lp-sand); }
.lp-legend__item > div { min-width: 0; display: grid; gap: var(--sp-1); }
.lp-legend__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-sm);
  background: var(--lp-white);
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
}
.lp-legend__item--hard .lp-legend__mark { color: var(--lp-warm-dark); }
.lp-legend__item--conditional .lp-legend__mark { color: var(--lp-gold-dark); }
.lp-legend__item--recommended .lp-legend__mark { color: var(--lp-indigo); }
.lp-legend__item--optional .lp-legend__mark { color: var(--lp-muted); }
.lp-legend__item strong {
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-legend__code {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-style: italic;
  letter-spacing: var(--ls-label);
}
.lp-legend__item p {
  color: var(--lp-text);
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-legend__count {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
}

/* --- Yang kami tunggu dari Anda (ruang kerja) --------------------------- */
.lp-asks {
  border-color: rgba(198, 97, 59, .35);
  background:
    radial-gradient(circle at 0 0, rgba(198, 97, 59, .08), transparent 55%),
    var(--lp-white);
}
.lp-asks__list { display: grid; gap: var(--d-card-gap); }
/* Kartu pertanyaan terbuka: badan kartu -> tombol keputusan, dan di
   .lp-ask__top baris judul -> pil tingkat kewajiban. 8px -> 12px. */
.lp-ask {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-left: 4px solid var(--lp-warm);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
  min-width: 0;
}
.lp-ask__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.lp-ask__top strong {
  flex: 1 1 11rem;
  min-width: 0;
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-ask__where {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.lp-ask p { color: var(--lp-text); font-size: var(--fs-small); line-height: var(--lh-relaxed); }
.lp-ask__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
}
.lp-ask .lp-btn { margin-top: auto; align-self: flex-start; }

/* --- Tujuh bagian ------------------------------------------------------- */
.lp-sections__list { display: grid; gap: var(--d-card-gap); }
/* Ritme dalam kartu section dinaikkan ke jarak antar-kartu design system:
   anaknya batang kemajuan, kalimat, dan deretan chip — permukaan, bukan
   dua baris teks. 8px -> 12px. */
.lp-sec {
  display: grid;
  gap: var(--sp-3);
  padding: var(--d-card-pad);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-sec--blocked { border-color: rgba(198, 97, 59, .38); }
.lp-sec--open { background: var(--lp-canvas); box-shadow: var(--elev-1); }
.lp-sec__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-1) 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-sec__head:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }
.lp-sec__no {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-sm);
  background: var(--lp-indigo-soft);
  color: var(--lp-indigo);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
}
.lp-sec--blocked .lp-sec__no { background: var(--lp-warm-soft); color: var(--lp-warm-dark); }
.lp-sec__id { flex: 1 1 auto; min-width: 0; display: grid; }
.lp-sec__id strong {
  color: var(--lp-ink);
  font-size: var(--fs-subhead);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-sec__doc {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-style: italic;
}
.lp-sec__score {
  flex: none;
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
  font-variant-numeric: tabular-nums;
}
.lp-sec__chev {
  flex: none;
  display: grid;
  place-items: center;
  color: var(--lp-muted);
  font-size: var(--fs-subhead);
  transition: transform var(--motion-base) var(--motion-ease);
}
.lp-sec--open .lp-sec__chev { transform: rotate(90deg); }
.lp-sec__blurb {
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
/* Batang kemajuan -> kalimat penjelasnya. Batang adalah permukaan penuh
   lebar; gap var(--sp-3) saja menyisakan 11px terlihat, satu piksel di
   bawah ambang karena tinta huruf meluber ~1px di atas kotak barisnya.
   Tambahan var(--sp-1) membawanya ke 15px. 7px -> 15px.
   Batangnya dibungkus .lp-sec__bar, jadi tetangga langsung blurb adalah
   pembungkus itu — bukan .lp-bar sendiri. */
.lp-sec > .lp-sec__bar + .lp-sec__blurb {
  margin-top: var(--sp-1);
}
/* Deretan chip ringkasan. Dua chip berwarna nyaris sama berjarak 4px
   terbaca sebagai satu pil panjang. 4px -> 8px, ambang benda kecil.
   JANGAN dinaikkan di atas 8px — lihat catatan di .lp-fields. */
.lp-sec__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Daftar kartu isian, sekeluarga dengan .lp-handover__list dan
   .lp-audit__list: daftar mana pun yang anaknya kartu memakai var(--sp-3).
   8px -> 12px.

   Deretan chip dan pil (.lp-sec__tags, .exam-head__pills, .pay-tabs,
   .zis-row__tags) sengaja DIBIARKAN di 8px — benda setinggi <=30px punya
   ambang sendiri yang lebih rendah, dan menaikkannya justru memecah
   deretan yang memang harus terbaca sebagai satu baris. */
.lp-fields { display: grid; gap: var(--sp-3); }
/* Kartu isian: pil tingkat -> nilai isian. 8px -> 12px (terlihat 11). */
.lp-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-sm);
  background: var(--lp-white);
  min-width: 0;
}
.lp-field--ask { border-color: rgba(198, 97, 59, .4); border-left: 3px solid var(--lp-warm); background: var(--lp-warm-soft); }
.lp-field__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.lp-field__top strong {
  flex: 1 1 10rem;
  min-width: 0;
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.lp-field__tags { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.lp-field__value {
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-field__cond,
.lp-field__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-field__impact {
  padding: var(--sp-2);
  border-radius: var(--r-xs);
  background: var(--lp-white);
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-field .lp-btn { margin-top: auto; align-self: flex-start; }

/* Sheet isian sederhana di dalam butir milik sekolah. Satu kolom, satu
   tombol simpan; sekeluarga dengan .lp-field. Kolom isian setinggi
   target sentuh dan hurufnya tidak pernah di bawah 12px. */
.lp-fill {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid rgba(198, 97, 59, .4);
  border-radius: var(--r-sm);
  background: var(--lp-white);
}
.lp-fill__label {
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.lp-fill__input {
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-sm);
  color: var(--lp-ink);
  background: var(--lp-white);
  font-family: inherit;
  font-size: var(--fs-small);
  line-height: var(--lh-snug);
}
.lp-fill__input:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }
.lp-fill__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
/* Tombol di dalam sheet berbaris sendiri; aturan tombol .lp-field yang
   mendorong ke bawah kartu tidak berlaku di sini. */
.lp-field .lp-fill .lp-btn { margin-top: 0; align-self: auto; }

/* --- Mode latihan ------------------------------------------------------- */
.lp-practice--on { border-color: rgba(8, 122, 96, .3); }
/* Baris mode latihan -> catatan di bawahnya. Barisnya berlatar sendiri,
   catatannya hanya huruf; jarak kartu 12px menyisakan 11px terlihat,
   satu piksel di bawah ambang. 11px -> 15px. */
.lp-practice > .lp-practice__row + .lp-note {
  margin-top: var(--sp-1);
}
.lp-practice__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
  border: 1px solid var(--lp-line);
}
.lp-practice__state {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  color: var(--lp-text);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
}

/* --- 15 langkah penyiapan ----------------------------------------------- */
.lp-setup__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  min-height: var(--touch-min);
  padding: var(--sp-1) 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lp-setup__head:focus-visible { outline: 3px solid var(--lp-gold); outline-offset: 2px; }
.lp-setup__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-pill);
  background: var(--lp-emerald-soft);
  color: var(--lp-emerald-dark);
  font-size: var(--fs-subhead);
}
.lp-setup__id { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-1); }
.lp-setup__id strong {
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.lp-setup__id span {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-setup__list { display: grid; gap: var(--sp-1); }
.lp-setup__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-xs);
  background: var(--lp-canvas);
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-setup__list li .lp-glyph { color: var(--lp-emerald); }

/* --- Kesiapan digital ---------------------------------------------------- */
.lp-ladder { display: grid; gap: var(--sp-2); }
.lp-ladder__step {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-white);
  min-width: 0;
}
.lp-ladder__step--passed { background: var(--lp-canvas); }
.lp-ladder__step--now {
  border-color: rgba(8, 122, 96, .45);
  border-width: 2px;
  background: var(--lp-emerald-soft);
  box-shadow: var(--elev-1);
}
.lp-ladder__step--target { border-color: rgba(215, 165, 46, .5); background: var(--lp-gold-soft); }
.lp-ladder__step--ahead { opacity: .78; }
.lp-ladder__no {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--sp-7);
  height: var(--sp-7);
  border-radius: var(--r-pill);
  background: var(--lp-sand);
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-heavy);
}
.lp-ladder__step--now .lp-ladder__no { background: var(--lp-emerald); color: var(--lp-white); }
.lp-ladder__step--target .lp-ladder__no { background: var(--lp-gold-dark); color: var(--lp-white); }
.lp-ladder__step--passed .lp-ladder__no { background: var(--lp-emerald-soft); color: var(--lp-emerald-dark); }
.lp-ladder__body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--sp-1); }
.lp-ladder__body strong {
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
.lp-ladder__code {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  font-style: italic;
}
.lp-ladder__body p {
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-ladder__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  flex: none;
  align-self: center;
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}
.lp-ladder__tag--now { background: var(--lp-emerald); color: var(--lp-white); }
.lp-ladder__tag--target { background: var(--lp-gold-dark); color: var(--lp-white); }
.lp-ladder__tag--passed { background: var(--lp-emerald-soft); color: var(--lp-emerald-dark); }

.lp-dims {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: 1px solid var(--lp-line);
  border-radius: var(--r-md);
  background: var(--lp-canvas);
}
.lp-dims__title {
  color: var(--lp-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.lp-dim {
  display: grid;
  grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2);
}
.lp-dim__name {
  color: var(--lp-text);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-dim__score {
  color: var(--lp-ink);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* --- Jejak keputusan ------------------------------------------------------ */
/* Daftar kartu jejak audit — sekeluarga dengan .lp-fields dan
   .lp-handover__list. 8px -> 12px. */
.lp-audit__list { display: grid; gap: var(--sp-3); }
.lp-audit__item {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-3);
  border-left: 3px solid var(--lp-indigo-soft);
  border-radius: var(--r-xs);
  background: var(--lp-canvas);
  min-width: 0;
}
.lp-audit__item strong {
  color: var(--lp-ink);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.lp-audit__item span {
  color: var(--lp-muted);
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
}
.lp-audit__item em {
  color: var(--lp-text);
  font-size: var(--fs-caption);
  font-style: normal;
  line-height: var(--lh-snug);
}

.lp-foot { display: grid; }

/* =====================================================================
   Wadah lebar — kolom ganda supaya halaman tidak memanjang berlebihan.
   ---------------------------------------------------------------------
   Acuannya lebar WADAH, bukan lebar viewport. Portal Staf membingkai
   isinya pada 480px walaupun layar 1280px, sedangkan Portal Pimpinan
   memberi lebih dari 1000px. Aturan berbasis viewport karena itu memaksa
   dua sampai tiga kolom masuk ke dalam kolom selebar 480px, dan chip
   seperti "Tim AkseleraSync" terpotong menjadi elipsis.
   Tetap tanpa nilai mentah: seluruh jarak dari token.
   ===================================================================== */
.lp-root { container-type: inline-size; container-name: lp; }

@container lp (min-width: 700px) {
  .lp-stages,
  .lp-gate__list,
  .lp-legend__list,
  .lp-decisions__list,
  .lp-asks__list,
  .lp-handover__list,
  .lp-sections__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-decision--gate,
  .lp-sec--open {
    grid-column: 1 / -1;
  }
  .lp-decision__facts > div {
    grid-template-columns: minmax(7rem, 9rem) minmax(0, 1fr);
    align-items: baseline;
  }
  .lp-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-hero__title { font-size: calc(var(--fs-display) * 1.18); }
  .lp-split__key { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container lp (min-width: 1020px) {
  .lp-stages,
  .lp-gate__list,
  .lp-legend__list,
  .lp-handover__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .lp-decisions__list,
  .lp-asks__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .lp-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-btn,
  .lp-bar__fill,
  .lp-sec__chev { transition: none; }
  .lp-btn:hover:not([disabled]) { transform: none; }
}

/* Kartu angka yang melebar penuh karena barisnya tinggal separuh terisi
   tetap menumpuk angka di atas label, sehingga dua pertiga kartu kosong dan
   terbaca seperti kartu yang belum jadi. Pada lebar penuh angkanya berdiri
   sejajar dengan keterangannya, jadi kartu terisi tanpa perlu menambah data. */
.lp-stat:last-child:nth-child(odd) {
  grid-auto-flow: column;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--sp-3);
}

@container lp (min-width: 700px) {
  .lp-stat:last-child:nth-child(odd) {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
}