/*
    راهنمای کاربری آرتاشاپ.

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

    بدونِ جاوااسکریپت، مثلِ بقیه‌ی این هاست. فهرست یک <nav> ساده با لنگرِ
    داخلی است و چیزی باز و بسته نمی‌شود.
*/

.gd {
    display: grid;
    gap: var(--sl-s7);
    max-width: var(--sl-wrap);
    margin: 0 auto;
    padding: var(--sl-s6) var(--sl-s4) var(--sl-s8);
}

/* ── سرصفحه ───────────────────────────────────────────────────────────── */
.gd-hero {
    display: grid;
    gap: var(--sl-s3);
    padding-block: var(--sl-s6);
    border-block-end: 1px solid var(--sl-border);
}

.gd-hero__title {
    margin: 0;
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
}

.gd-hero__lead {
    margin: 0;
    max-width: 62ch;
    color: var(--sl-muted);
    font-size: 19px;
}

.gd-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sl-s2) var(--sl-s4);
    color: var(--sl-muted);
    font-size: 15px;
}

/* ── فهرست ────────────────────────────────────────────────────────────── */
.gd-toc {
    padding: var(--sl-s5);
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius-lg);
    background: var(--sl-surface);
}

.gd-toc__title {
    margin: 0 0 var(--sl-s3);
    font-size: 15px;
    font-weight: 700;
    color: var(--sl-muted);
}

.gd-toc__list {
    display: grid;
    gap: var(--sl-s2) var(--sl-s5);
    margin: 0;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    counter-reset: toc;
}

.gd-toc__list a {
    display: block;
    padding-block: 4px;
    color: inherit;
    text-decoration: none;
    border-block-end: 1px solid transparent;
}

.gd-toc__list a::before {
    counter-increment: toc;
    content: counter(toc, persian) ". ";
    color: var(--sl-muted);
}

.gd-toc__list a:hover,
.gd-toc__list a:focus-visible {
    border-block-end-color: var(--sl-brand);
}

/* ── بخش ──────────────────────────────────────────────────────────────── */
.gd-part {
    display: grid;
    gap: var(--sl-s5);

    /* لنگرِ داخلی زیرِ لبه‌ی بالا گیر نکند */
    scroll-margin-block-start: var(--sl-s5);
}

.gd-part__head {
    display: grid;
    gap: var(--sl-s2);
    padding-block-end: var(--sl-s3);
    border-block-end: 2px solid var(--sl-brand);
}

.gd-part__title {
    margin: 0;
    font-size: clamp(22px, 3.2vw, 30px);
    font-weight: 800;
}

.gd-part__lead {
    margin: 0;
    max-width: 70ch;
    color: var(--sl-muted);
}

/*
    ستونِ دوتایی: متن کنارِ عکس.

    زیرِ ۸۶۰ پیکسل تک‌ستونی می‌شود — عکسِ گوشی کنارِ متن در گوشی، هر دو را
    باریک می‌کرد.
*/
.gd-split {
    display: grid;
    gap: var(--sl-s5);
    align-items: start;
}

@media (min-width: 860px) {
    .gd-split {
        grid-template-columns: 1fr minmax(240px, 300px);
        gap: var(--sl-s6);
    }

    .gd-split--wide {
        grid-template-columns: 1fr minmax(280px, 340px);
    }
}

/* ── قابِ عکسِ گوشی ────────────────────────────────────────────────────── */
.gd-shot {
    margin: 0;
    display: grid;
    gap: var(--sl-s2);
    justify-items: center;
}

.gd-shot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--sl-radius-lg);
    border: 1px solid var(--sl-border);
    box-shadow: var(--sl-shadow);
    background: var(--sl-elevated);
}

.gd-shot figcaption {
    color: var(--sl-muted);
    font-size: 14px;
    text-align: center;
}

/* ── گام‌ها ───────────────────────────────────────────────────────────── */
.gd-steps {
    display: grid;
    gap: var(--sl-s3);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.gd-steps > li {
    position: relative;
    padding-inline-start: 42px;
    min-block-size: 30px;
}

.gd-steps > li::before {
    counter-increment: step;
    content: counter(step, persian);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 2px;
    inline-size: 30px;
    block-size: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--sl-brand);
    color: var(--sl-on-brand);
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── فهرستِ نکته ──────────────────────────────────────────────────────── */
.gd-list {
    display: grid;
    gap: var(--sl-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gd-list > li {
    position: relative;
    padding-inline-start: var(--sl-s4);
}

.gd-list > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 13px;
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    background: var(--sl-brand);
}

/* ── جعبه‌ی نکته ──────────────────────────────────────────────────────── */
.gd-note {
    display: grid;
    gap: 6px;
    padding: var(--sl-s4);
    border-radius: var(--sl-radius);
    border: 1px solid var(--sl-border);
    border-inline-start: 4px solid var(--sl-brand);
    background: var(--sl-surface);
}

.gd-note--warn {
    border-inline-start-color: var(--sl-accent);
}

.gd-note__title {
    margin: 0;
    font-weight: 700;
    font-size: 16px;
}

.gd-note p {
    margin: 0;
    color: var(--sl-muted);
}

/* ── جدول ─────────────────────────────────────────────────────────────── */
.gd-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
}

.gd-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.gd-table th,
.gd-table td {
    padding: var(--sl-s3) var(--sl-s4);
    text-align: start;
    border-block-end: 1px solid var(--sl-border);
    vertical-align: top;
}

.gd-table thead th {
    background: var(--sl-surface);
    font-size: 14px;
    color: var(--sl-muted);
    font-weight: 700;
    white-space: nowrap;
}

.gd-table tbody tr:last-child th,
.gd-table tbody tr:last-child td {
    border-block-end: 0;
}

.gd-table td:last-child {
    color: var(--sl-muted);
}

/* ── پرسش‌ها ──────────────────────────────────────────────────────────── */
.gd-qa {
    display: grid;
    gap: var(--sl-s3);
}

.gd-qa details {
    border: 1px solid var(--sl-border);
    border-radius: var(--sl-radius);
    background: var(--sl-elevated);
}

.gd-qa summary {
    padding: var(--sl-s4);
    cursor: pointer;
    font-weight: 700;
}

.gd-qa details[open] summary {
    border-block-end: 1px solid var(--sl-border);
}

.gd-qa details > p {
    margin: 0;
    padding: var(--sl-s4);
    color: var(--sl-muted);
}

/* ── پابرگ ────────────────────────────────────────────────────────────── */
.gd-foot {
    padding-block-start: var(--sl-s5);
    border-block-start: 1px solid var(--sl-border);
    color: var(--sl-muted);
    font-size: 15px;
    display: grid;
    gap: var(--sl-s2);
}

.gd-foot a {
    color: var(--sl-brand);
}

/* چاپ: مغازه‌دار راهنما را برای صندوق‌دارش چاپ می‌کند */
@media print {
    .gd-toc,
    .gd-qa summary::marker {
        display: none;
    }

    .gd-part {
        break-inside: avoid;
    }

    .gd-shot img {
        box-shadow: none;
    }
}