/**
 * tokens.css — MasjidConnect v2 Shared Design Tokens
 * Fix: #10 (15× duplicated :root), #9 (inconsistent token names), #11 (typo scale)
 * Include di SEMUA halaman: <link rel="stylesheet" href="tokens.css">
 */
:root{
  /* Colors */
  --green-deep:#04120A;
  --green-card:#0A2014;
  --green-card2:#0D2818;
  --green-mid:#1B6B40;
  --green-bright:#2ECC71;
  --gold:#C9A84C;
  --gold-light:#F0D080;
  --gold-dark:#8B6914;
  --gold-glow:rgba(201,168,76,0.25);
  --cream:#F5F0E8;
  --cream-muted:#9AB8A8;
  /* #4A6A58 hanya 2,84:1 terhadap latar kartu — GAGAL standar keterbacaan
     WCAG (min 4,5:1), padahal warna ini dipakai untuk teks bantuan, justru
     tempat orang paling butuh kejelasan. #6B8F79 = 4,74:1: lulus, dan tetap
     hijau sejuk yang sama agar karakter desain tidak berubah. */
  --cream-hint:#6B8F79;
  /* #E74C3C hanya 4,47:1 — tepat di bawah ambang, padahal dipakai untuk pesan
     error dan konfirmasi hapus. #F0685A = 5,56:1. */
  --ruby:#E74C3C; /* dipertahankan untuk LATAR tombol (teks putih di atasnya) */
  --ruby-text:#F0685A; /* dipakai bila ruby menjadi WARNA TEKS di atas latar gelap */
  --amber:#F39C12;
  --sapphire:#3498DB;
  --purple:#9B59B6;
  --border:rgba(27,107,64,0.25);
  --border2:rgba(201,168,76,0.15);

  /* Radius */
  --radius:16px;
  --radius-sm:12px;
  --radius-xs:8px;

  /* Safe areas (viewport-fit=cover) */
  --safe-top:env(safe-area-inset-top,0px);
  --safe-bot:env(safe-area-inset-bottom,0px);

  /* Jarak — rasio emas φ, pangkalnya gutter Mini App (16px), bukan kisi 8-poin. */
  --phi: 1.6180339887;
  --space-base: 16px;
  --space-2xs: calc(var(--space-base) / var(--phi) / var(--phi) / var(--phi));
  --space-xs: calc(var(--space-base) / var(--phi) / var(--phi));
  --space-sm: calc(var(--space-base) / var(--phi));
  --space-md: var(--space-base);
  --space-lg: calc(var(--space-base) * var(--phi));
  --space-xl: calc(var(--space-base) * var(--phi) * var(--phi));

  /* Type scale — Fix #11 */
  --text-xs:10px;
  --text-sm:12px;
  --text-base:14px;
  --text-md:16px;
  --text-lg:20px;
  --text-xl:28px;
  --text-display:40px;
}

/* Global baseline */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overscroll-behavior:none}
body{background:var(--green-deep);color:var(--cream);font-family:'Plus Jakarta Sans',sans-serif;overflow-x:hidden}

/* Fix: #45 focus styles for keyboard/a11y */
*:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Shared skeleton — Fix #33 */
.skel{
  background:linear-gradient(90deg,var(--green-card) 25%,var(--green-card2) 50%,var(--green-card) 75%);
  background-size:200% 100%;
  animation:shimmer 1.5s infinite;
  border-radius:var(--radius-xs);
}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Shared error/empty state — Fix #34 */
.empty-state{text-align:center;padding:var(--space-lg) var(--space-md);color:var(--cream-hint);font-size:13px}
.empty-state .es-icon{font-size:40px;margin-bottom:var(--space-md)}
.empty-state .es-msg{margin-bottom:var(--space-md);line-height:1.5}
.empty-state .es-retry{background:none;border:1px solid var(--border);color:var(--gold);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-sm);font-size:12px;font-weight:700;cursor:pointer;font-family:'Plus Jakarta Sans',sans-serif}

/* Shared form-error state — Fix #25 */
.form-input.error{border-color:var(--ruby-text)!important}
.field-error{font-size:11px;color:var(--ruby-text);margin-top:var(--space-2xs);display:none}
.field-error.show{display:block}
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.shake{animation:shake .35s ease}

/* ─── Ikon ubin berwarna (besar, kontras, untuk takmir) ─────────────────────
   viewBox 80×80 persegi. Warna Iznik/zamrud/pirus — bukan emas. */
.mc-icon{
  display:block;
  flex-shrink:0;
  width:var(--mc-icon-w, 56px);
  height:var(--mc-icon-w, 56px);
  overflow:visible;
  object-fit:contain;
}
.mc-icon--3d,
.mc-icon--fluent{
  background:radial-gradient(circle at 50% 32%, #FFF9EE 0%, #F0E0C4 72%, #D9C49A 100%);
  border-radius:22%;
  padding:6%;
  box-sizing:border-box;
  box-shadow:0 6px 14px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.55);
}
/* COVER: file pengguna sudah tanpa background. Jangan tambah pelat/canvas
   di CSS — tampilkan gambar utuh (object-fit contain, tanpa disc/clip). */
.mc-icon--cover{
  padding:0 !important;
  background:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  clip-path:none !important;
  object-fit:contain;
  object-position:center center;
  transform:none;
}
.mc-icon-wrap--cover,
.mc-icon-wrap:has(> .mc-icon--cover),
[data-mc-icon]:has(> .mc-icon--cover){
  overflow:visible;
  border-radius:0 !important;
  background:transparent !important;
  padding:0 !important;
  box-shadow:none !important;
  clip-path:none !important;
}
/* Card grids stretch .fc-icon / .mi-icon / .info-box-icon to full column
   width. A wide wrap cannot clip the JPG canvas, so the cream plate stays
   visible. Shrink COVER slots to the tile — same as Beranda .quick-btn. */
.fitur-card .fc-icon:has(> .mc-icon--cover),
.menu-item .mi-icon:has(> .mc-icon--cover),
.info-box-icon:has(> .mc-icon--cover),
.quick-btn .icon:has(> .mc-icon--cover),
.nav-icon:has(> .mc-icon--cover),
.hc-icon:has(> .mc-icon--cover){
  display:flex !important;
  width:var(--mc-icon-w, 60px) !important;
  height:var(--mc-icon-w, 60px) !important;
  min-width:var(--mc-icon-w, 60px);
  min-height:0 !important;
  max-width:var(--mc-icon-w, 60px);
  max-height:var(--mc-icon-w, 60px);
  margin-left:auto;
  margin-right:auto;
  flex-shrink:0;
}
.fitur-card .fc-icon:has(> .mc-icon--lg),
.menu-item .mi-icon:has(> .mc-icon--lg){
  --mc-icon-w:76px;
}
.info-box-icon:has(> .mc-icon--md),
.quick-btn .icon:has(> .mc-icon--md){
  --mc-icon-w:60px;
}
.nav-icon:has(> .mc-icon--nav){
  --mc-icon-w:36px;
  margin-left:0;
  margin-right:0;
}
.info-box-icon:has(> .mc-icon--cover){
  margin-left:0;
  margin-right:0;
}
.fitur-card .fc-icon:has(> .mc-icon--cover) .mc-icon,
.menu-item .mi-icon:has(> .mc-icon--cover) .mc-icon,
.info-box-icon:has(> .mc-icon--cover) .mc-icon,
.quick-btn .icon:has(> .mc-icon--cover) .mc-icon,
.nav-icon:has(> .mc-icon--cover) .mc-icon,
.hc-icon:has(> .mc-icon--cover) .mc-icon{
  width:100%;
  height:100%;
}
.link-ic:has(> .mc-icon--cover){ background:transparent !important; }
.link-ic:has(> .mc-icon--cover) .mc-icon,
.act-ic:has(> .mc-icon--cover) .mc-icon,
.feature-chip-icon:has(> .mc-icon--cover) .mc-icon{
  width:100%;
  height:100%;
}
.act-ic:has(> .mc-icon--cover){
  width:32px;
  height:32px;
  min-height:32px;
}
.feature-chip-icon:has(> .mc-icon--cover),
.hc-icon:has(> .mc-icon--cover){
  border-radius:0 !important;
  overflow:visible;
  background:transparent !important;
  box-shadow:none !important;
}
.mc-icon--tile{ filter:none; }
.mc-icon--nav{ --mc-icon-w:36px; }
.mc-icon--sm{ --mc-icon-w:48px; }
.mc-icon--md{ --mc-icon-w:60px; }
.mc-icon--lg{ --mc-icon-w:76px; }
.mc-icon-wrap{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}
.feature-chip-icon,
.quick-btn .icon,
.fitur-card .fc-icon,
.menu-item .mi-icon,
.info-box-icon{
  background:transparent !important;
}

/* Navigator temuan: di atas nav Mini App, di bawah pemutar audio Qur'an */
.match-nav{
  position:fixed;
  right:var(--space-md);
  bottom:96px;
  z-index:610;
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  padding:var(--space-sm) var(--space-md);
  border-radius:24px;
  background:rgba(10,32,20,.94);
  border:1px solid var(--border2);
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  color:var(--cream);
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:12px;
  font-weight:700;
}
[hidden]{display:none !important}
.match-nav[hidden]{display:none !important}
.match-nav button{
  width:36px;height:36px;border-radius:50%;
  border:1px solid var(--border);
  background:var(--green-card);
  color:var(--gold-light);
  font-size:16px;cursor:pointer;
  font-family:inherit;
}
.match-nav button:active{transform:scale(.94)}
.match-current{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:8px;
}

/* Mode orang tua: huruf & tombol besar, zoom diizinkan lewat akses.js */
html.mode-lansia{
  --text-xs:14px;
  --text-sm:16px;
  --text-base:18px;
  --text-md:20px;
  --text-lg:24px;
  --text-xl:32px;
}
html.mode-lansia body{font-size:18px;line-height:1.55}
html.mode-lansia .page-title,
html.mode-lansia .nav-label{font-size:15px}
html.mode-lansia button,
html.mode-lansia .btn-gold,
html.mode-lansia .btn-emerald,
html.mode-lansia .tab,
html.mode-lansia .quick-btn,
html.mode-lansia .fitur-card,
html.mode-lansia .menu-card{min-height:52px;font-size:16px}
html.mode-lansia .form-input,
html.mode-lansia .form-select,
html.mode-lansia .form-textarea{min-height:52px;font-size:18px}
html.mode-lansia .quick-grid,
html.mode-lansia .feature-strip{display:none}
.lansia-lain{
  grid-column:1 / -1;
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:52px;padding:12px;border-radius:18px;
  color:var(--gold-light);font-weight:800;font-size:16px;text-decoration:none;
}
.lansia-cepat{display:none;grid-template-columns:1fr 1fr;gap:var(--space-md);padding:0 var(--space-md);margin-bottom:var(--space-lg)}
html.mode-lansia .lansia-cepat{display:grid}
.lansia-btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:88px;padding:16px 12px;border-radius:18px;
  background:var(--green-card);border:1.5px solid var(--green-mid);
  color:var(--cream);font-weight:800;font-size:18px;text-decoration:none;
}
.mc-asisten-fab{
  position:fixed;right:16px;bottom:calc(76px + var(--safe-bot,0px));
  width:56px;height:56px;border-radius:50%;z-index:120;
  border:1.5px solid var(--gold);background:var(--green-card);
  color:var(--gold-light);font-size:22px;cursor:pointer;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
html.mode-lansia .mc-asisten-fab{width:64px;height:64px;font-size:26px}