/* Kartu harian, renungan harian, profil, dan Studio Kartu Ayat.
   Melanjutkan token dan bahasa visual app.css — kertas, garis pensil, pastel. */

/* ---------- kartu ayat harian ---------- */

.daily {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1.5px solid var(--line); box-shadow: var(--shadow);
  min-height: 300px; display: grid; align-items: end;
  background-image: var(--art); background-size: cover; background-position: center;
  isolation: isolate;
}
/* Scrim: teks putih harus tetap terbaca di atas ilustrasi apa pun. */
.daily::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(28,24,20,.28) 0%, rgba(28,24,20,.22) 42%, rgba(28,24,20,.76) 100%);
}
.daily-in { position: relative; z-index: 1; display: grid; gap: 10px; padding: 20px; color: #fff; }
.daily .eyebrow { color: rgba(255,255,255,.88); }
.daily-verse {
  margin: 0; font-family: var(--f-read); font-size: 1.12rem; line-height: 1.65;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.daily-verse:empty { display: none; }
.daily-ref {
  margin: 0; font-family: var(--f-hand); font-weight: 700; font-size: 1.6rem; line-height: 1.1;
  text-shadow: 0 1px 10px rgba(0,0,0,.4);
}
.daily-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.daily-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 8px 15px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.6); background: rgba(255,255,255,.14);
  color: #fff; font: inherit; font-size: .9rem; font-weight: 800; text-decoration: none;
  cursor: pointer; backdrop-filter: blur(4px);
  transition: background .2s ease, transform .2s ease;
}
.daily-btn:hover { background: rgba(255,255,255,.26); transform: translateY(-1px); }
.daily-btn svg { width: 18px; height: 18px; flex: none; }
.daily-btn.primary { background: var(--accent); border-color: var(--accent); }
.daily-btn.primary:hover { background: #A4454F; }
.daily-btn.is-on { background: #fff; border-color: #fff; color: var(--accent); }
.daily-btn.is-on svg { fill: currentColor; }

/* ---------- renungan hari ini ---------- */

.dev-today {
  display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center;
  text-decoration: none; color: inherit;
}
.dev-today-art { display: grid; place-items: center; }
.dev-today-art svg { width: 100%; height: auto; }
.dev-today-copy { display: grid; gap: 4px; min-width: 0; }
.dev-today-copy strong { font-family: var(--f-hand); font-size: 1.3rem; line-height: 1.15; }
.dev-today-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.dev-pill {
  font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 4px 10px; border-radius: 999px;
  background: var(--line); color: var(--ink-soft);
}
.dev-pill.done { background: color-mix(in srgb, var(--mint) 70%, var(--paper-2)); color: #2F5A3C; }
.dev-pill.streak { background: color-mix(in srgb, var(--butter) 75%, var(--paper-2)); color: #6B4F12; }

/* ---------- profil ---------- */

.avatar.xl { width: 92px; height: 92px; font-size: 2.6rem; border: 2px solid var(--line); }

.prof-card { display: grid; gap: 12px; }
.prof-head { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.prof-av { position: relative; flex: none; }
.prof-av-btn {
  position: absolute; right: -4px; bottom: -4px;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid var(--paper-2); background: var(--accent); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.prof-av-btn:hover { background: #A4454F; transform: scale(1.05); }
.prof-av-btn svg { width: 20px; height: 20px; }
.prof-id { min-width: 0; display: grid; gap: 2px; }
.prof-id h2 { font-family: var(--f-hand); font-size: 1.8rem; margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.prof-id .email { margin: 0; font-size: .9rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.prof-id-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.btn-sm { min-height: 44px; padding: 7px 14px; font-size: .88rem; }
.prof-msg { margin: 0; font-size: .9rem; color: var(--ink-soft); min-height: 1.2em; }
.prof-msg.bad { color: #A4454F; font-weight: 700; }

.prof-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.stat {
  background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 14px 10px; text-align: center; display: grid; gap: 2px;
}
.stat b { font-family: var(--f-hand); font-size: 1.9rem; line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { font-size: .76rem; color: var(--ink-soft); line-height: 1.3; }
@media (max-width: 560px) { .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.studio-promo { display: grid; grid-template-columns: 84px 1fr; gap: 16px; align-items: center; text-decoration: none; color: inherit; }
.studio-promo > span:last-child { display: grid; gap: 4px; min-width: 0; }
.studio-promo strong { font-family: var(--f-hand); font-size: 1.35rem; line-height: 1.15; }
.studio-promo span span { font-size: .92rem; color: var(--ink-soft); }

.fav-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.fav-list li { display: inline-flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.fav-list a { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 6px 6px 15px; font-weight: 800; font-size: .9rem; text-decoration: none; color: var(--ink); }
.fav-x { width: 40px; height: 44px; border: 0; background: none; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.fav-x:hover { color: var(--accent); }

/* ---------- studio kartu ayat ---------- */

.st-head { display: grid; gap: 8px; margin-bottom: 20px; }
.st-sub { margin: 0; color: var(--ink-soft); max-width: 52ch; }

.st-grid { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 28px; align-items: start; }
@media (max-width: 860px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }

.st-preview { position: sticky; top: 16px; display: grid; gap: 14px; justify-items: center; }
@media (max-width: 860px) { .st-preview { position: static; } }
#st-canvas {
  width: 100%; max-width: 360px; height: auto; display: block;
  border-radius: var(--radius); border: 1.5px solid var(--line); box-shadow: var(--shadow);
  background: var(--paper-2);
}
.st-acts { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.st-acts .pc-btn { flex: 1 1 auto; min-width: 140px; }

.st-panel { display: grid; gap: 22px; }
.st-field { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.st-field > label, .st-field > legend { font-weight: 800; font-size: .94rem; padding: 0; }
.st-field textarea, .st-field input[type="text"] {
  font: inherit; font-size: 1rem; width: 100%;
  color: var(--ink); background: var(--paper-2);
  border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px;
  min-height: 52px; resize: vertical;
  transition: border-color .2s ease;
}
.st-field textarea:focus, .st-field input:focus { border-color: var(--graphite); outline: none; }
.st-help { margin: 0; font-size: .82rem; color: var(--ink-soft); }
.st-note { margin: 0; font-size: .84rem; color: var(--ink-soft); }

.st-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.st-chip {
  min-height: 44px; padding: 7px 14px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--paper-2);
  font: inherit; font-size: .86rem; font-weight: 700; color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.st-chip:hover { border-color: var(--graphite); color: var(--ink); }

/* pilihan desain */
.st-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.st-tpl {
  display: grid; gap: 6px; padding: 0; border: 0; background: none; cursor: pointer; text-align: center;
}
.st-tpl-art {
  display: block; aspect-ratio: 4 / 5; border-radius: 12px;
  background-size: cover; background-position: center;
  border: 2.5px solid var(--line);
  transition: border-color .2s ease, transform .2s ease;
}
.st-tpl:hover .st-tpl-art { transform: translateY(-2px); border-color: var(--graphite); }
.st-tpl[aria-checked="true"] .st-tpl-art { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 26%, transparent); }
.st-tpl-name { font-size: .78rem; font-weight: 700; color: var(--ink-soft); }
.st-tpl[aria-checked="true"] .st-tpl-name { color: var(--ink); }

/* segmented */
.st-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.st-seg button {
  min-height: 44px; padding: 8px 16px; border-radius: 999px;
  border: 2px solid var(--line); background: var(--paper-2);
  font: inherit; font-size: .88rem; font-weight: 800; color: var(--ink-soft); cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.st-seg button:hover { border-color: var(--graphite); color: var(--ink); }
.st-seg button[aria-checked="true"] { background: color-mix(in srgb, var(--butter) 55%, var(--paper-2)); border-color: var(--graphite); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .daily-btn, .prof-av-btn, .st-tpl-art { transition: none; }
  .daily-btn:hover, .prof-av-btn:hover, .st-tpl:hover .st-tpl-art { transform: none; }
}

/* ---------- topbar aplikasi di layar sempit ----------
   Topbar kini memuat merek + keranjang + Produk + profil. Seperti di header situs,
   merek dijadikan satu-satunya elemen yang boleh menyusut sehingga halaman tidak
   pernah bisa digeser mendatar, berapa pun lebar layarnya. */
.topbar { gap: 8px; }
.topbar .brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.topbar .brand-mark { flex: none; }
.topbar .brand > span:last-child { min-width: 0; overflow: hidden; }
.topbar .brand-name { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .brand-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar .top-acts { flex: 0 0 auto; }

/* Ambang target sentuh untuk kontrol topbar. */
.acct-btn, .prod-btn { min-height: 44px; }
.acct-btn { padding: 4px 14px 4px 4px; }

@media (max-width: 620px) {
  .topbar { gap: 6px; }
  .topbar .brand { gap: 7px; }
  .topbar .brand-mark { width: 32px; height: 32px; }
  .topbar .brand-name { font-size: 1.1rem; }
  .topbar .brand-sub { display: none; }        /* sub-judul kalah penting dari kontrol */
  .topbar .top-acts { gap: 6px; }
  .prod-btn { padding: 8px 11px; font-size: .86rem; }
  .acct-btn { font-size: .82rem; padding: 4px 11px 4px 4px; }
  .acct-btn .avatar { width: 30px; height: 30px; }
}

/* Pada layar paling sempit, nama di tombol profil disembunyikan — avatar sudah cukup
   mengenali, dan teksnya yang paling boros ruang. */
@media (max-width: 400px) {
  .acct-btn:not(.out) span { display: none; }
  /* Tanpa teks, tombol menyusut ke lebar avatar saja — min-width menjaga
     ambang target sentuh. */
  .acct-btn:not(.out) { padding: 4px; min-width: 44px; justify-content: center; }
}

/* Tautan merek juga sebuah tombol (menuju beranda), jadi ikut ambang 44px. */
.topbar .brand { min-height: 44px; }

/* Pada 375px nama merek kurang ~5px dan terpotong jadi "Pastoral C…".
   Merampingkan kontrol di kanan mengembalikan ruangnya. */
@media (max-width: 430px) {
  .topbar .prod-btn { padding: 8px 10px; font-size: .82rem; }
  .topbar .acct-btn { font-size: .8rem; }
  .topbar .top-acts { gap: 5px; }
  .topbar .brand { gap: 6px; }
}

/* Tombol hapus favorit: lebar 40px -> 44px. */
.fav-x { width: 44px; }

/* ---------- bilah pembaca Alkitab: ambang target sentuh ----------
   Bawaan: pemilih kitab 42px, dan tombol segmen (ID/BSB/KJV, A−/A+) 36px.
   Keduanya kontrol yang benar-benar diketuk, bukan tautan dalam kalimat. */
.reader-bar .picker-btn { min-height: 44px; }
.reader-bar .seg button { min-height: 44px; min-width: 44px; }

/* ---------- Jelajahi di aplikasi: kolom yang bisa menyusut ----------
   Sama seperti di situs: `1fr` tidak pernah lebih kecil dari min-content, sehingga
   kata panjang ("Kekhawatiran") membuat 5 kolom melebihi lebar induknya dan halaman
   bisa digeser mendatar pada ~1024px. (Bawaan, bukan dari fitur baru.) */
@media (min-width: 900px) {
  .view[data-view="jelajahi"] .topic-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.topic-grid { grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); }
.topic-grid .topic { min-width: 0; }
.topic-grid .topic strong { overflow-wrap: anywhere; }

/* ---------- bilah navigasi bawah ----------
   Jumlah kolom mengikuti jumlah item, bukan angka tetap. Sebelumnya dipatok
   repeat(6, 1fr); begitu satu item dilepas, tersisa satu kolom kosong. */
.nav ul { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* ---------- Studio Kartu Ayat di ponsel ----------
   Kartu dibatasi lebar DAN tinggi. Tanpa batas tinggi, format Story (9:16) pada
   layar 375px menjadi 608px dan memenuhi seluruh layar: tombol Bagikan/Unduh serta
   semua kontrol terdorong keluar pandangan, sehingga studio terasa buntu.
   Dengan max-height, kartu dan tombolnya muat dalam satu layar untuk ketiga format. */
@media (max-width: 860px) {
  #st-canvas {
    width: auto; height: auto;
    max-width: min(100%, 360px);
    /* Lantai 280px disengaja. Membatasi murni dengan vh membuat kartu menyusut
       jadi ~120px di layar pendek (iPhone SE) — terlalu kecil untuk menilai hasil,
       dan tombol tetap tidak muat. Pratinjau yang berguna lebih penting daripada
       menghindari sedikit gulir. */
    max-height: max(280px, 44vh);
  }
  /* Judul dipadatkan: ruang di ponsel lebih berharga untuk kartunya sendiri. */
  .st-head { gap: 6px; margin-bottom: 14px; }
  .st-head h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .st-sub { font-size: .92rem; line-height: 1.5; }
  .st-grid { gap: 20px; }
  .st-preview { gap: 10px; }
}

/* Layar pendek: judul dipangkas lagi agar kartu dan tombol lebih cepat terjangkau. */
@media (max-width: 860px) and (max-height: 620px) {
  .st-head { margin-bottom: 10px; }
  .st-head h1 { font-size: 1.5rem; }
  .st-sub { display: none; }
}

/* Lanskap ponsel: lebarnya cukup untuk dua kolom, jadi pratinjau di kiri dan
   kontrol di kanan — jauh lebih baik daripada satu kolom yang sangat pendek. */
@media (max-width: 860px) and (orientation: landscape) and (min-width: 700px) {
  .st-grid { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
  .st-head h1 { font-size: 1.5rem; }
  .st-sub { display: none; }
  #st-canvas { max-height: 74vh; }
}

/* ---------- toast: lebar yang benar-benar tersedia ----------
   Bawaan memakai left:50% + translateX(-50%). Untuk elemen fixed tanpa `right`,
   lebar shrink-to-fit dihitung dari sisa ruang di kanan titik left — yaitu hanya
   setengah layar (188px pada 375px). Akibatnya `max-width: calc(100% - 32px)`
   tidak pernah terpakai dan pesan sedikit panjang membungkus jadi tiga empat baris.
   Dengan left+right dan margin auto, toast benar-benar bisa selebar layar. */
.toast {
  left: 16px; right: 16px; transform: none;
  width: max-content; max-width: calc(100% - 32px);
  margin-inline: auto;
  text-align: center;
}