/*
    صفحه‌ی دانلودِ اپ.

    توکن‌ها از admin.css می‌آیند — همان رنگ‌ها، همان فاصله‌ها، همان قلمِ وزیرمتنِ
    محلی. این فایل فقط چیدمانِ همین یک صفحه است و هیچ رنگِ تازه‌ای تعریف نمی‌کند:
    یک هگزِ دستی اینجا یعنی صفحه‌ای که در حالتِ تیره یا در بازطراحیِ بعدی جا
    می‌ماند.

    این صفحه بیش از هر صفحه‌ی دیگری روی **گوشی** باز می‌شود — چون APK را روی
    همان دستگاهی می‌گیرند که نصبش می‌کنند. پس موبایل حالتِ اصلی است، نه حالتِ
    واکنشیِ دسکتاپ.
*/

.ap-page {
    min-height: 100dvh;
    background: var(--am-bg);
    color: var(--am-text);
    font-family: var(--am-font);

    /* ۱۶ پیکسل و نه ۱۵: پنل روی دسکتاپ خوانده می‌شود و تراکم می‌خواهد؛ این
       صفحه روی گوشی خوانده می‌شود و زیرِ ۱۶ پیکسل، iOS خودش زوم می‌کند. */
    font-size: 16px;
    line-height: 1.7;
}

.ap-wrap {
    max-width: 560px;
    margin: 0 auto;
    padding: var(--am-space-6) var(--am-space-4) 64px;
}

/* ── سربرگ ──────────────────────────────────────────────────────────────── */

.ap-head {
    display: flex;
    align-items: center;
    gap: var(--am-space-3);
    margin-bottom: var(--am-space-6);
}

.ap-mark {
    width: 44px;
    height: 44px;
    flex: none;
    color: var(--am-primary);
}

.ap-title {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.ap-sub {
    margin: 2px 0 0;
    color: var(--am-muted);
    font-size: var(--am-text-sm);
}

/* ── کارت ───────────────────────────────────────────────────────────────── */

.ap-card {
    background: var(--am-surface);
    border: 1px solid var(--am-border-soft);
    border-radius: var(--am-radius-lg);
    box-shadow: var(--am-shadow-sm);
    padding: var(--am-space-5);
    margin-bottom: var(--am-space-4);
}

.ap-card__title {
    margin: 0 0 var(--am-space-3);
    font-size: var(--am-text-lg);
    font-weight: 600;
}

.ap-lead {
    margin: 0 0 var(--am-space-4);
    color: var(--am-muted);
}

/* ── دکمه‌ی اصلی ────────────────────────────────────────────────────────── */

.ap-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--am-space-2);

    /* ۵۲ پیکسل: بالاتر از کفِ ۴۴ پیکسلی، چون تنها کاری است که این صفحه دارد */
    min-height: 52px;
    width: 100%;
    box-sizing: border-box;
    padding: 0 var(--am-space-5);

    background: var(--am-primary);
    color: var(--am-on-primary);
    border: 1px solid transparent;
    border-radius: var(--am-radius);

    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;

    transition: background var(--am-transition);
}

.ap-cta:hover { background: var(--am-primary-hover); }

.ap-cta:focus-visible {
    outline: 3px solid var(--am-focus);
    outline-offset: 2px;
}

.ap-cta__icon {
    width: 20px;
    height: 20px;
    flex: none;
}

/* ── معرفی ──────────────────────────────────────────────────────────────── */

/*
    فهرستِ «چه می‌کند» روی صفحه‌ی نخست. بدونِ نقطه و بدونِ شماره: این‌ها گام
    نیستند که ترتیب داشته باشند، پس شماره‌گذاری‌شان معنایی می‌سازد که وجود ندارد.
*/
.ap-points {
    margin: var(--am-space-4) 0 0;
    padding: 0;
    list-style: none;
}

.ap-points li {
    position: relative;
    padding-inline-start: var(--am-space-5);
}

.ap-points li + li { margin-top: var(--am-space-3); }

/* نشانه با ::before و نه یک کاراکتر در متن: خواننده‌ی صفحه نباید «تیک» را
   به‌عنوان کلمه بخواند. */
.ap-points li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .65em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--am-primary);
}

.ap-points strong {
    display: block;
    color: var(--am-text);
}

/* شماره‌ی نسخه زیرِ متنِ دکمه، نه کنارش: کنارش عرضِ دکمه را روی گوشیِ باریک
   می‌شکست. */
.ap-cta__note {
    display: block;
    margin-top: 2px;
    font-size: var(--am-text-xs);
    font-weight: 400;
    opacity: .85;
}

/* ── مشخصات ─────────────────────────────────────────────────────────────── */

.ap-facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--am-space-2) var(--am-space-4);
    margin: var(--am-space-4) 0 0;
    font-size: var(--am-text-sm);
}

.ap-facts dt { color: var(--am-muted); }

.ap-facts dd {
    margin: 0;

    /* ارقامِ هم‌عرض: نسخه و اندازه و هش ستونی خوانده می‌شوند */
    font-variant-numeric: tabular-nums;
}

/*
    هش در یک خطِ چپ‌به‌راست می‌نشیند و می‌شکند.

    بدونِ direction: ltr، مرورگر رشته‌ی شانزده‌شانزدهی را در متنِ راست‌به‌چپ
    جابه‌جا نشان می‌دهد و کسی که می‌خواهد مقایسه‌اش کند، اشتباه می‌کند.
*/
.ap-hash {
    direction: ltr;
    text-align: left;
    font-family: var(--am-font-mono);
    font-size: var(--am-text-xs);
    line-height: 1.5;
    word-break: break-all;
    color: var(--am-muted);
}

/* ── گام‌های نصب ────────────────────────────────────────────────────────── */

.ap-steps {
    margin: 0;
    padding-inline-start: var(--am-space-5);

    /*
        شماره‌ی گام‌ها هم فارسی. بدونِ این، کنارِ متنی که همه‌ی عددهایش فارسی
        است، «1. 2. 3.» لاتین می‌ماند — همان ناهماهنگیِ کوچکی که صفحه را
        ترجمه‌شده نشان می‌دهد نه فارسی.
    */
    list-style-type: persian;
}

.ap-steps li + li { margin-top: var(--am-space-3); }

.ap-note {
    margin: var(--am-space-4) 0 0;
    padding: var(--am-space-3);
    background: var(--am-warning-soft);
    border: 1px solid var(--am-warning);
    border-radius: var(--am-radius);
    color: var(--am-warning);
    font-size: var(--am-text-sm);
}

.ap-empty {
    margin: 0;
    color: var(--am-muted);
    text-align: center;
    padding: var(--am-space-6) 0;
}

.ap-foot {
    margin-top: var(--am-space-6);
    text-align: center;
    color: var(--am-muted);
    font-size: var(--am-text-sm);
}

.ap-foot a { color: var(--am-primary); }

/* روی صفحه‌ی بزرگ‌تر فقط کمی جا باز می‌شود؛ ستون همان یکی می‌ماند */
@media (min-width: 720px) {
    .ap-wrap { padding-top: 64px; }
    .ap-title { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
    .ap-cta { transition: none; }
}

/* ── کدِ معرف ────────────────────────────────────────────────────────────── */
/*
    وقتی بازدیدکننده از لینکِ یک مغازه‌دار آمده. بالای دکمه‌ی دانلود می‌نشیند،
    چون کسی که نصب می‌کند تا پایینِ صفحه اسکرول نمی‌کند.
*/
.ap-card--ref {
    border-color: var(--am-primary);
}

.ap-code {
    font-family: var(--am-font-mono, ui-monospace, Consolas, monospace);
    font-size: var(--am-text-2xl, 28px);
    letter-spacing: 6px;
    text-align: center;
    direction: ltr;
    margin: var(--am-space-3) 0 0;
    color: var(--am-primary);

    /* یک ضربه انتخابش می‌کند — روی گوشی، تایپ کردنش از رونوشت گرفتنش سخت‌تر است */
    user-select: all;
}