/* ============================================================================
   settings.css — صفحهٔ تنظیماتِ مربی.

   ظرفِ بیرونی `.sx-page` و `.sx-head.sx-plate`ِ سیستم است؛ این فایل فقط
   بدنه را می‌سازد. هیچ توکنی بازتعریف نمی‌شود — همان قاعده‌ای که مرزِ
   CSSِ ویزارد را نگه داشته.

   ── شکلِ ردیف ─────────────────────────────────────────────────────────
   هر ردیف دو ستون است: «چه چیزی» سمتِ آغاز و «چه مقداری» سمتِ پایان.
   کنترل‌ها عرضِ ثابت ندارند و به‌اندازهٔ محتوایشان‌اند، وگرنه یک کلیدِ
   دوحالته به پهنای یک نوارِ پنج‌گزینه‌ای کشیده می‌شد و مربی فکر می‌کرد
   چیزی جا افتاده.

   در عرضِ کم ردیف می‌شکند و کنترل زیرِ برچسب می‌رود — نه اینکه برچسب
   کوتاه شود؛ اسمِ تنظیم تنها چیزی است که معنایش را می‌گوید.
   ============================================================================ */

#pgSettingsRoot {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── کارتِ گروه ──────────────────────────────────────────────────────── */
.stg-card {
    background: var(--myo-paper);
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-xl);
    box-shadow: var(--myo-el-1);
    overflow: hidden;
}

.stg-card-h {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--myo-line);
    background: var(--myo-surface);
}
.stg-card-h h2 {
    flex: 1;
    min-width: 0;
    font-size: var(--myo-fs-md);
    font-weight: 800;
    color: var(--myo-ink);
}
.stg-card-ic {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: var(--myo-r-md);
    background: var(--myo-brand-soft);
    color: var(--myo-brand-vivid);
}
.stg-card-ic svg { width: 16px; height: 16px; }

/* لینکِ «بقیهٔ صفحه»: کاری که جای دیگری زندگی می‌کند، نه یک اقدامِ اصلی. */
.stg-link {
    flex: none;
    padding: 5px 10px;
    border-radius: var(--myo-r-md);
    color: var(--myo-brand-ink);
    background: transparent;
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in);
}
.stg-link:hover { background: var(--myo-brand-soft); }
.stg-link:focus-visible { outline: 0; box-shadow: var(--myo-ring); }

/* ── ردیف ────────────────────────────────────────────────────────────── */
.stg-rows { display: flex; flex-direction: column; }

.stg-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 18px;
}
.stg-row + .stg-row { border-block-start: 1px solid var(--myo-line); }

.stg-row-t { flex: 1; min-width: 0; }
.stg-row-t b {
    display: block;
    font-size: var(--myo-fs-base);
    font-weight: 700;
    color: var(--myo-ink-2);
}
.stg-row-t small {
    display: block;
    margin-block-start: 3px;
    font-size: var(--myo-fs-sm);
    line-height: 1.6;
    color: var(--myo-ink-muted);
}

.stg-row-c { flex: none; }

/* ── کلیدِ چندگزینه‌ای ─────────────────────────────────────────────────
   همهٔ گزینه‌ها دیدنی‌اند و نه پشتِ یک `select`: تعدادشان کم است و دیدنِ
   کلِ دامنه خودش نصفِ توضیح است. */
.stg-seg {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-lg);
    background: var(--myo-surface);
}
.stg-seg-b {
    padding: 6px 12px;
    border-radius: var(--myo-r-md);
    color: var(--myo-ink-muted);
    background: transparent;
    font-size: var(--myo-fs-sm);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--myo-d-1) var(--myo-ez-in), background var(--myo-d-1) var(--myo-ez-in);
}
.stg-seg-b:hover { color: var(--myo-ink); }
.stg-seg-b:focus-visible { outline: 0; box-shadow: var(--myo-ring); }
.stg-seg-b.is-on {
    color: var(--myo-brand-ink);
    background: var(--myo-brand-soft);
}

/* ── کلیدِ دوحالته ────────────────────────────────────────────────────── */
.stg-sw {
    position: relative;
    width: 42px;
    height: 24px;
    flex: none;
    padding: 0;
    border: 1px solid var(--myo-line-2);
    border-radius: 999px;
    background: var(--myo-surface-2);
    cursor: pointer;
    transition: background var(--myo-d-1) var(--myo-ez-in), border-color var(--myo-d-1) var(--myo-ez-in);
}
.stg-sw i {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--myo-paper);
    box-shadow: var(--myo-el-1);
    /* `translate` جداگانه است تا جابه‌جاییِ افقی بتواند مستقل انیمیت شود
       بی‌آنکه هربار وسط‌چینِ عمودی را هم بازنویسی کند. */
    transform: translateY(-50%);
    transition: inset-inline-start var(--myo-d-1) var(--myo-ez);
}
.stg-sw.is-on { background: var(--myo-brand-vivid); border-color: var(--myo-brand-vivid); }
/* در RTL هم `inset-inline-start` درست حرکت می‌کند: منطقی است، نه چپ/راست. */
.stg-sw.is-on i { inset-inline-start: calc(100% - 19px); }
.stg-sw:focus-visible { outline: 0; box-shadow: var(--myo-ring); }

.stg-sw.is-sm { width: 34px; height: 20px; }
.stg-sw.is-sm i { width: 13px; height: 13px; }
.stg-sw.is-sm.is-on i { inset-inline-start: calc(100% - 16px); }

/* ── ردیفِ دوبیتی: پیش‌فرض + «بپرس» ───────────────────────────────────── */
.stg-pair {
    display: flex;
    align-items: center;
    gap: 14px;
}
.stg-ask {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--myo-fs-sm);
    color: var(--myo-ink-muted);
    white-space: nowrap;
    cursor: pointer;
}

/* ── چیپ‌های رنگ ─────────────────────────────────────────────────────── */
.stg-colors {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.stg-seg-b.is-wide {
    border: 1px solid var(--myo-line);
    background: var(--myo-surface);
}
.stg-seg-b.is-wide.is-on { border-color: var(--myo-brand); }

/* رنگِ *روشنِ* پالت، حتی در تمِ تیره: این چیپ رنگِ یک سندِ چاپی را
   پیش‌نمایش می‌دهد و آن سند همیشه روی کاغذِ سفید است. نشان‌دادنِ نسخهٔ
   تیره این‌جا یعنی وعدهٔ رنگی که هیچ‌وقت چاپ نمی‌شود. */
.stg-color {
    width: 24px;
    height: 24px;
    flex: none;
    border-radius: 50%;
    background: var(--c);
    border: 2px solid transparent;
    /* حلقهٔ انتخاب بیرونِ خودِ رنگ می‌نشیند، وگرنه روی رنگِ روشن گم می‌شد. */
    box-shadow: 0 0 0 1px var(--myo-line);
    cursor: pointer;
    transition: box-shadow var(--myo-d-1) var(--myo-ez-in), transform var(--myo-d-1) var(--myo-ez-in);
}
.stg-color:hover { transform: scale(1.08); }
.stg-color.is-on {
    border-color: var(--myo-paper);
    box-shadow: 0 0 0 2px var(--c);
}
.stg-color:focus-visible { outline: 0; box-shadow: var(--myo-ring); }

/* ── فهرستِ بلند ─────────────────────────────────────────────────────── */
.stg-select {
    max-width: min(320px, 46vw);
    height: var(--myo-h-md);
    padding-inline: 10px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-md);
    background: var(--myo-surface);
    color: var(--myo-ink-2);
    font-family: inherit;
    font-size: var(--myo-fs-sm);
    font-weight: 600;
    cursor: pointer;
}
.stg-select:focus-visible { outline: 0; border-color: var(--myo-brand); box-shadow: var(--myo-ring); }

/* ── اسکلتِ پیش از آمدنِ داده ─────────────────────────────────────────── */
.stg-skel {
    height: 180px;
    border-radius: var(--myo-r-xl);
    background: var(--myo-surface);
    border: 1px solid var(--myo-line);
    animation: stg-pulse 1.4s var(--myo-ez) infinite;
}
@keyframes stg-pulse { 50% { opacity: .55; } }

@media (prefers-reduced-motion: reduce) {
    .stg-skel { animation: none; }
    .stg-color:hover { transform: none; }
}

/* ── عرضِ کم ─────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .stg-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .stg-row-c { align-self: flex-start; }
    .stg-seg { flex-wrap: wrap; }
    .stg-colors { justify-content: flex-start; }
    .stg-select { max-width: 100%; width: 100%; }

    /* ── هدفِ لمس ─────────────────────────────────────────────────────
       کلیدِ دوحالته ۴۲×۲۴ بود، کلیدِ کوچکش ۳۴×۲۰ و چیپِ رنگ ۲۴×۲۴ — هر سه
       زیرِ کفی که انگشت می‌خواهد.

       **راهِ ارزان‌تر آزموده شد و کار نکرد:** یک `::after`ِ نامرئیِ بزرگ‌تر
       دورِ هر کنترل، تا ناحیهٔ لمس بزرگ شود و خودِ کنترل کوچک بماند.
       شبه‌عنصر درست ساخته می‌شود (۴۴×۳۸، `pointer-events: auto`، حتی با
       `z-index`) ولی `<button>` فقط با *قابِ خودش* برخورد می‌خورد —
       `elementFromPoint` هشت پیکسل زیرِ کلید، والد را برمی‌گرداند نه
       کلید را. پس همان کنترل بزرگ می‌شود.

       اعداد از اندازهٔ کلیدِ خودِ iOS آمده‌اند (۵۱×۳۱)، نه از حدس؛ در
       فهرستی که هر ردیفش تمامِ عرض را دارد شلوغ نمی‌شود. مکانِ دکمهٔ
       داخلی با همان نسبتِ قبلی حساب شده: `100% - (قطرِ دکمه + ۳)`. */
    .stg-sw { width: 51px; height: 31px; }
    .stg-sw i { width: 23px; height: 23px; }
    .stg-sw.is-on i { inset-inline-start: calc(100% - 26px); }

    .stg-sw.is-sm { width: 42px; height: 26px; }
    .stg-sw.is-sm i { width: 19px; height: 19px; }
    .stg-sw.is-sm.is-on i { inset-inline-start: calc(100% - 22px); }

    .stg-color { width: 32px; height: 32px; }

    .stg-link { min-height: 40px; }
    .stg-seg-b { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ── گوشیِ چرخیده ─────────────────────────────────────────────────────────
   هر بندِ موبایلِ این فایل به *عرض* بسته است، و گوشیِ چرخیده ۸۴۴ پیکسل عرض
   دارد — یعنی در ۸۴۴×۳۹۰ هیچ‌کدامشان نمی‌گیرند و کنترل‌ها به اندازهٔ
   دسکتاپ برمی‌گردند، در حالی که انگشت همان انگشت است. (اندازه گرفته شد:
   هر هشت دکمهٔ نوارِ گزینه ۳۲ پیکسل.)

   شرط سه‌تایی است و عمداً: `pointer: coarse` یعنی انگشت، و `max-height`
   یعنی گوشی — تبلت در حالتِ افقی دست‌کم ۷۶۸ پیکسل قد دارد و از این بند
   بیرون می‌ماند. (بندِ بی‌قیدِ ارتفاع، بودجهٔ ارتفاعِ تبلت را می‌شکند —
   همان دلیلی که بندِ `myo-ds.css` کوچک نگه داشته شده.)

   فقط کفِ هدفِ لمس این‌جاست، نه چیدمان: در ۸۴۴ پیکسلِ عرض، ستون‌ها باید
   همان ستون‌های عریض بمانند.
   ───────────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) and (max-height: 520px) {
    .stg-seg-b { min-height: 40px; display: inline-flex; align-items: center; }
    .stg-link { min-height: 40px; }
    .stg-sw { width: 51px; height: 31px; }
    .stg-sw i { width: 23px; height: 23px; }
    .stg-sw.is-on i { inset-inline-start: calc(100% - 26px); }
    .stg-sw.is-sm { width: 42px; height: 26px; }
    .stg-sw.is-sm i { width: 19px; height: 19px; }
    .stg-sw.is-sm.is-on i { inset-inline-start: calc(100% - 22px); }
    .stg-color { width: 32px; height: 32px; }
}