/* عهدورز · چله عهد — لایه چیدمان اپ.
   رنگ، اندازه و اجزا از سیستم طراحی می‌آیند (ds/tokens.css و ds/components.css).
   اینجا رنگ یا عدد خام ننویس؛ توکن‌ها را به کار ببر. */

/* وزیرمتن روی سرور خود اپ (مجوز OFL: fonts/Vazirmatn-OFL.txt)، یک فایل متغیر برای همه وزن‌ها */
@font-face {
  font-family: Vazirmatn;
  src: url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations"),
       url("fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* خط‌های برند، روی خود اپ تا بدون Google Fonts و آفلاین هم کار کنند (مجوز OFL در fonts/).
   فقط زیرمجموعه عربی؛ نویسه‌های دیگر به وزیرمتن برمی‌گردند. */
@font-face {
  font-family: "Amiri";
  src: url("fonts/Amiri-arabic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Kufi Arabic";
  src: url("fonts/NotoKufiArabic-arabic.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: "Noto Nastaliq Urdu";
  src: url("fonts/NotoNastaliqUrdu-arabic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body { padding-bottom: env(safe-area-inset-bottom); }
[hidden] { display: none !important; }

main {
  max-width: var(--size-column);
  margin: 0 auto;
  padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-6) var(--space-12);
}

.view { display: flex; flex-direction: column; gap: var(--space-6); }

/* آغاز */
.welcome-brand { align-self: center; padding-top: var(--space-2); }
.welcome-hero { display: flex; flex-direction: column; margin-top: calc(-1 * var(--space-2)); }
.welcome-hero .av-hero-line { margin-top: var(--space-3); }
.virtue { display: flex; flex-direction: column; gap: var(--space-2); }
.virtue-src { flex-wrap: wrap; }
.start-form { display: flex; flex-direction: column; gap: var(--space-6); }
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
#welcome-shaban { margin-inline-start: var(--space-2); }
fieldset.plain legend { padding: 0 0 var(--space-3); font-size: 13px; line-height: 20px; font-weight: 500; color: var(--ink-2); }

/* امروز */
.av-dial { width: min(var(--size-dial), 100%); height: auto; aspect-ratio: 1; }
.after { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center; margin-top: calc(-1 * var(--space-2)); }
.after__actions { display: flex; align-items: center; gap: var(--space-4); }
.deed { display: flex; flex-direction: column; gap: var(--space-1); }
#moon-svg { height: auto; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.actions > .av-btn { flex: 1 1 140px; }
#complete-card .actions > .av-btn { flex-basis: 100%; }

/* حرکت آرام عدد بعد از ثبت */
.just-done .av-dial__num { animation: av-rise var(--motion-reveal) ease-out both; }

/* خواندن و تنظیمات */
.reader-instruction { margin-top: var(--space-4); color: var(--brass); }
#dua-source { line-height: 22px; }
.bar { display: flex; align-items: center; justify-content: space-between; }
.bar .size { display: flex; gap: var(--space-2); }
.bar .size .av-iconbtn { font-size: 20px; font-weight: 500; }
.settings-form, .block { display: flex; flex-direction: column; gap: var(--space-4); }
.block { gap: var(--space-3); }
.file-btn { position: relative; overflow: hidden; }
.file-btn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#btn-reset { align-self: flex-start; }

.toast {
  position: fixed;
  inset-inline: var(--space-6);
  bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  max-width: calc(var(--size-column) - 2 * var(--space-6));
  margin: 0 auto;
  text-align: center;
  z-index: 10;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .2s ease-out, transform .2s ease-out;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .toast { transition: none; }
  .just-done .av-dial__num { animation: none; }
}