/* ====== MicroAid PWA, satu layar "Bantu saya" (WS-7 ringkas, demo) ======
   Sistem visual dari prototype-v2-unified.html (DESIGN.md mengikat):
   cetak saring spot-color, keyline 2px, tanpa gradien, tanpa animasi masuk.
   MOTION 1: satu-satunya gerak adalah umpan balik tekan 90ms. */

:root {
  --ink:#111111;
  --muted:#4a4a4a;
  --line:rgba(0,0,0,.12);
  --paper:#ffffff;
  --brand-green:#14532d;
  --brand-blue:#1d4ed8;
  --blue-bg:#dceffd;   --blue-ink:#12386b;
  --green-bg:#dff1dd;  --green-ink:#0b4d24;
  --yellow-bg:#fdf0b4; --yellow-ink:#4a2c00; --yellow-icon:#c25200;
  --pink-bg:#fed6d6;   --pink-ink:#6b0f26;
  --btn-bg:#0b4d24;
  --font-display: 'Montserrat MA', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.06rem;
  line-height: 1.55;
  overflow-x: hidden;
}

[hidden] { display: none !important; }

/* H1 layar Beranda: tidak tampil, tapi tetap bisa menerima fokus saat
   berpindah layar (arah pembaca layar tetap benar). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

/* Topbar layar langkah: tidak sticky, tombol 48px, radius 12 */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0;
  border-bottom: 2px solid var(--ink);
}
.topbar button {
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  min-height: 48px;
  padding: 6px 12px;
  cursor: pointer;
}

/* ====== Beranda ====== */
.wordmark { margin-top: 32px; }
.wordmark .baris1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}
.wordmark .m1 { color: var(--brand-green); }
.wordmark .m2 { color: var(--brand-blue); }
.wordmark .baris2 {
  font-family: var(--font-display);
  color: var(--brand-green);
  font-size: 0.94rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin-top: 6px;
}
/* Teks kategori: teks biasa bergaris pemisah, bukan badge */
.lockup-line {
  font-size: 0.875rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 2px solid var(--ink);
}

/* Kartu foto Beranda: keadaan kosong yang disengaja + salah satu dari dua
   bayangan (elemen yang benar-benar terangkat di halaman ini) */
.hero-kosong {
  min-height: 160px;
  border: 2px dashed var(--green-ink);
  border-radius: 20px;
  background: var(--green-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  margin: 24px 0;
  box-shadow: 3px 3px 0 rgba(17,17,17,.18);
}
.hero-kosong .tebal {
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--green-ink);
}
.hero-kosong .kecil { font-size: 0.875rem; color: var(--muted); }

.tagline { font-size: 1.06rem; margin: 0 0 12px; }
.kemajuan { font-size: 1.06rem; font-weight: 700; margin: 0 0 20px; }

.grid-kotak {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px; /* jarak antar kotak 12 */
}
/* Kotak langkah: keyline 2px tinta langkah (kontras non-teks + bahasa cetak
   saring), rata tanpa bayangan; dibedakan dari kartu foto yang terangkat */
.kotak {
  border: 2px solid;
  border-radius: 20px;
  padding: 12px; /* dalam kotak 12 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  min-height: 0;
}
.kotak.biru  { background: var(--blue-bg);  color: var(--blue-ink);  border-color: var(--blue-ink); }
.kotak.hijau { background: var(--green-bg); color: var(--green-ink); border-color: var(--green-ink); }
.kotak.kuning{ background: var(--yellow-bg);color: var(--yellow-ink); border-color: var(--yellow-ink); }
.kotak.pink  { background: var(--pink-bg);  color: var(--pink-ink);  border-color: var(--pink-ink); }

/* Ikon di kotak rounded 12px (bukan bulatan), ikon padat satu warna.
   Untuk kotak kuning ikonnya --yellow-icon (bukan tinta kuning) */
.ikon-kotak {
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  color: currentColor;
}
.kotak.kuning .ikon-kotak { color: var(--yellow-icon); }

.kotak .judul {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.25;
}
.kotak .ket-kotak { font-size: 0.875rem; line-height: 1.4; }
/* Status isi: teks biasa, bukan badge (label status nyata, tanpa perlakuan pil) */
.kotak .pil { font-size: 0.875rem; font-weight: 700; }

/* Badge angka langkah: lingkaran penuh, motif identitas */
.badge {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: currentColor;
  display: flex; align-items: center; justify-content: center;
}
.badge span {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

/* Bingkai HP */
.phone {
  max-width: 390px;
  margin: 0 auto;
  padding: 0 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  min-height: 100vh;
}

h1 {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.2;
}
.h1-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 28px 0 6px;
}
.h1-row h1 { margin: 0; }

/* Badge angka layar: motif identitas, kuning = langkah ide */
.badge-layar {
  flex: 0 0 auto;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--yellow-ink);
  display: flex; align-items: center; justify-content: center;
}
.badge-layar span {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1;
}

.sub {
  font-size: 1.06rem;
  color: var(--muted);
  margin-bottom: 20px;
}
.ket { font-size: 0.875rem; color: var(--muted); line-height: 1.55; margin: 8px 0; }
.status { font-size: 1.06rem; color: var(--ink); margin-top: 8px; }

/* Tombol: 56px, radius 12, keyline tinta */
button, textarea { font-family: inherit; }
button { cursor: pointer; }

.btn {
  display: block;
  width: 100%;
  min-height: 56px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 12px;
  text-align: center;
}
.btn.utama { background: var(--btn-bg); color: #ffffff; border-color: var(--btn-bg); }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.utama:active { background-color: #083a1b; }

/* Chip titik: 48px, radius 12. Status bukan warna saja: label teks di chip. */
.chip {
  min-height: 48px;
  font-family: var(--font-display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 16px;
  margin: 0;
  text-align: left;
}
.chip[aria-pressed="true"] { background: var(--ink); color: #ffffff; }
.chip:disabled { cursor: not-allowed; }
.chip .st {
  display: block;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 2px;
}
.chip.s-amber .st { color: var(--yellow-ink); }
.chip.s-green .st { color: var(--green-ink); }
.chip.s-red   { color: var(--pink-ink); background: var(--pink-bg); border-color: var(--pink-ink); }
.chip.s-null_ { color: var(--muted); border-style: dashed; }
.chip[aria-pressed="true"] .st { color: var(--yellow-bg); }
.baris-chip { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 8px; }

label, .label-grup {
  display: block;
  font-size: 1.06rem;
  font-weight: 700;
  margin: 16px 0 6px;
}
textarea {
  width: 100%;
  max-width: 100%;
  font-size: 1.06rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 96px;
  resize: vertical;
}
textarea::placeholder, input::placeholder { color: #767676; opacity: 1; }

/* Input teks satu baris: bahasa sama dengan textarea (keyline 2px tinta,
   radius 12, tinggi 56px), dari prototipe v2 */
input[type="text"] {
  width: 100%;
  max-width: 100%;
  font-size: 1.06rem;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 56px;
}

/* Warna badge layar mengikuti tinta langkahnya: biru=profil, hijau=produk,
   pink=tindakan (kuning=ide sudah jadi default .badge-layar di atas) */
#s1 .badge-layar { background: var(--blue-ink); }
#s2 .badge-layar { background: var(--green-ink); }
#s4 .badge-layar { background: var(--pink-ink); }

.kartu {
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 16px;
  margin: 28px 0 16px;
}

/* Keadaan kosong / memuat / galat: kotak putus-putus, teks statis yang
   diumumkan aria-live (DESIGN.md tabel keadaan) */
.kosong {
  border: 2px dashed var(--ink);
  border-radius: 20px;
  padding: 16px;
  margin: 20px 0;
  font-size: 1.06rem;
  color: var(--muted);
}
.kosong.galat { color: var(--pink-ink); font-weight: 700; }

/* ====== S4 daftar baris tindakan (dari prototipe v2) ====== */
.aman-line { font-size: 0.875rem; font-weight: 700; margin: 0 0 12px; }
.daftar-baris { display: flex; flex-direction: column; gap: 10px; }
.baris {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  text-align: left;
  font-family: inherit;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 8px 12px;
  cursor: pointer;
}
/* Ikon baris: padat satu warna tinta, di kotak rounded 12px */
.ikon-baris {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
}
.baris .teks { flex: 1 1 auto; min-width: 0; }
.baris .b-judul {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
}
.baris .b-ket { font-size: 0.875rem; color: var(--muted); line-height: 1.4; }
.baris .chev { flex: 0 0 auto; font-size: 24px; color: var(--ink); }
.pil-saran {
  display: inline-block;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--yellow-ink);
  background: var(--yellow-bg);
  border-radius: 6px;
  padding: 2px 8px;
  margin-left: 6px;
}

/* Peringatan keusangan: keyline tinta kuning, bahasa sama dengan viewer */
.peringatan {
  color: var(--yellow-ink);
  background: var(--yellow-bg);
  border: 2px solid var(--yellow-ink);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

/* Ditolak pipa: gaya jujur, bukan galat menakutkan */
.jujur {
  color: var(--pink-ink);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Blok pilihan di kartu saran: pertanyaan keluar dari badan saran, jadi
   tombol nyata (pola server/static/index.html, target sentuh min 44px). */
.pilihan { margin-top: 12px; }
.pilihan .tanya { font-weight: 700; margin: 0 0 8px; }
.baris-pilihan { display: flex; gap: 10px; }
.baris-pilihan .btn { margin-top: 0; flex: 1; min-height: 44px; }
.pilihan .atau {
  text-align: center;
  color: var(--muted);
  margin: 8px 0;
}
.terima { color: var(--green-ink); font-weight: 700; margin-top: 12px; }
.galat-pilihan { color: var(--pink-ink); font-weight: 700; margin-top: 12px; }

/* Blok arsip dari stored[] */
#arsip { margin-top: 16px; }
#arsip-isi .blok {
  font-size: 0.875rem;
  border: 2px solid var(--muted);
  border-radius: 12px;
  padding: 12px;
  margin-top: 8px;
}
#arsip-isi .blok b {
  display: block;
  margin-bottom: 4px;
}

/* MOTION 1: umpan balik tekan (90ms), dimatikan bila pengguna minta gerak
   minim. Tidak ada gerak lain di halaman ini. */
.btn, .chip, .baris, .kotak, .topbar button {
  transition: background-color 90ms linear, transform 90ms linear;
}
.chip:active { background-color: #ececea; transform: translateY(1px); }
.chip[aria-pressed="true"]:active { background-color: #000000; }
.baris:active { background-color: #f2f2ef; transform: translateY(1px); }
.kotak.biru:active  { background-color: #c7e4f7; transform: translateY(1px); }
.kotak.hijau:active { background-color: #cde8ca; transform: translateY(1px); }
.kotak.kuning:active{ background-color: #f5e494; transform: translateY(1px); }
.kotak.pink:active  { background-color: #f7c2c2; transform: translateY(1px); }
.topbar button:active { background-color: #f2f2ef; transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
  .btn, .chip, .baris, .kotak, .topbar button { transition: none; transform: none; }
}