/* ========================================================================
   training-systems.css — سطحِ بصریِ «سیستمِ تمرینی» در کلِ رابط

   سه جا یک زبانِ بصریِ واحد می‌گیرند تا مربی همان چیزی را که در ویزارد
   انتخاب کرده، در برنامهٔ ساخته‌شده و در ویرایشگر همان‌شکل بازبشناسد:

     ۱. چیپ‌های انتخاب در مرحلهٔ ۳ ویزارد
     ۲. قابِ بلوک در نمای برنامه + نوارِ سیستم‌های روز و سربرگ
     ۳. نشان و خطِ «اجرا» در ویرایشگر

   رنگ از خانوادهٔ فصل ۵ می‌آید (`--tt-c`، از techniques.js) نه از سلیقهٔ
   این فایل — پس دو بلوکِ هم‌خانواده بی‌خواندنِ نام هم‌رنگ دیده می‌شوند.
   ======================================================================== */

/* ══ ۱ · ویزارد — چیپ‌های انتخاب ═════════════════════════════════════════ */

/* نقطهٔ خانواده: تنها نشانه‌ای که هم‌خانواده‌ها را بدونِ سرتیتر به هم وصل
   می‌کند (سرتیتر در این مرحله جا نمی‌شود — wizard8.css). */
.tt-chips .fo-chip .tt-fam {
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tt-fam, var(--myo-brand-ink));
}

/* «یار» به‌جای 👥: نشانِ قبلی روی لمسی هیچ راهی برای خوانده‌شدن نداشت و
   روی دسکتاپ هم فقط با نگه‌داشتنِ ماوس معنا پیدا می‌کرد. */
.tt-sp {
    flex: 0 0 auto;
    padding: 1px 4px;
    border: 1px solid var(--myo-warn-line);
    border-radius: 999px;
    color: var(--myo-warn-ink);
    background: var(--myo-warn-soft);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: 1.5;
    white-space: nowrap;
}
.tt-chips .fo-chip .tt-sp { margin-inline-start: auto; }

/* نشانِ «برای این شاگرد توصیه نمی‌شود». روی خودِ چیپ می‌نشیند و پشتِ hover
   نیست: رنگ به‌تنهایی نشانه نیست، و tooltip روی لمسی اصلاً وجود ندارد. */
.tt-warn {
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 999px;
    background: var(--warn, var(--myo-warn));
    color: var(--myo-on-fill);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
    line-height: 13px;
    text-align: center;
}
.tt-chips .fo-chip .tt-warn { margin-inline-start: auto; }
.tt-chips .fo-chip .tt-sp + .tt-warn { margin-inline-start: 4px; }
.ttp-say .tt-warn { display: inline-block; }

/* خطِ گویا (سرِ پنلِ روش‌ها): محتوایش با حرکتِ ماوس عوض می‌شود، پس هرگز
   نمی‌شکند و هرگز چیدمانِ مرحله را بالا و پایین نمی‌برد. */
.ttp-say {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--muted, var(--myo-ink-muted));
    font-size: 10.5px;
    font-weight: 700;
}
.ttp-say b { color: var(--ink, var(--myo-ink)); font-weight: 900; }
.ttp-say em { color: var(--myo-warn-ink); font-style: normal; font-weight: 800; }
.ttp-say em.is-warn { color: var(--warn, var(--myo-warn)); }

/* ══ ۲ · راهنمای سیستم‌ها (مودالِ مشترک) ═════════════════════════════════ */

.ttg-body {
    max-height: min(62vh, 560px);
    margin: 12px 0 4px;
    overflow-y: auto;
    padding-inline-end: 4px;
}
.ttg-fam { margin-bottom: 14px; }
.ttg-fam h4 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 6px;
    color: var(--t2, var(--myo-ink-2));
    font-size: 11.5px;
    font-weight: 900;
}
.ttg-fdot { width: 7px; height: 7px; border-radius: 50%; background: var(--ttg-c); }

.ttg-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 5px;
    padding: 9px 10px;
    border: 1px solid var(--b1, var(--myo-line));
    border-inline-start: 3px solid var(--ttg-c);
    border-radius: 10px;
    background: var(--myo-paper);
    text-align: start;
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.ttg-row[data-pick="1"] { cursor: pointer; }
.ttg-row[data-pick="1"]:hover { border-color: var(--myo-line-2); background: var(--myo-surface); }
.ttg-row.is-on { border-color: var(--ttg-c); background: var(--myo-brand-soft); box-shadow: inset 0 0 0 1px var(--ttg-c); }
/* سیستمی که کاربر از جای دیگری روی آن آمده باید بی‌جست‌وجو پیدا شود. */
.ttg-row.is-focus { box-shadow: 0 0 0 2px rgba(235, 111, 28, .35); }
.ttg-row.is-off { opacity: .55; }

.ttg-ic { flex: 0 0 auto; font-size: 17px; line-height: 1.3; }
.ttg-txt { min-width: 0; flex: 1; }
.ttg-hd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ttg-hd b { color: var(--navy-900, var(--myo-ink)); font-size: 13px; font-weight: 900; }
.ttg-need {
    padding: 1px 6px;
    border: 1px solid var(--myo-warn-line);
    border-radius: var(--myo-r-sm);
    color: var(--myo-warn-ink);
    background: var(--myo-warn-soft);
    font-size: 10px;
    font-weight: 800;
}
.ttg-off {
    padding: 1px 6px;
    border: 1px solid var(--myo-line);
    border-radius: var(--myo-r-sm);
    color: var(--myo-ink-muted);
    background: var(--myo-surface);
    font-size: 10px;
    font-weight: 800;
}
.ttg-txt p { margin: 4px 0 0; color: var(--t2, var(--myo-ink-2)); font-size: 12px; font-weight: 600; line-height: 1.85; }
.ttg-facts { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.ttg-facts span {
    padding: 1px 7px;
    border-radius: 999px;
    color: var(--myo-ink-muted);
    background: var(--myo-surface);
    font-size: 10px;
    font-weight: 750;
}
.ttg-box {
    flex: 0 0 auto;
    align-self: center;
    width: 17px;
    height: 17px;
    border: 1.5px solid var(--b2, var(--myo-line-2));
    border-radius: var(--myo-r-sm);
    background: var(--myo-paper);
}
.ttg-row.is-on .ttg-box {
    border-color: var(--ttg-c);
    background: var(--ttg-c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ══ باریک ═══════════════════════════════════════════════════════════════ */
@media (max-width: 760px) {
    .ttg-body { max-height: 66vh; }
}