/* SLFS/web-v2 · بخشِ subscales
   منتقل‌شده از <style>ِ قالب (2026-10-02) — RULES §۳.۵ */

/* ══════════ subscales ══════════ */
/* ══ SLFS · تنهایی عاطفی و اجتماعی (subscales) — ریشه: .slfs-sb ══ */
.slfs-sb {
    --sb-teal: #12B886;
    --sb-navy: #1E3A5F; --sb-navy-l: #EEF2F7;
    --sb-emo: #C2255C; --sb-emo-l: #FFF0F6;
    --sb-soc: #3B5BDB; --sb-soc-l: #EDF2FF;
    --sb-slate: #334155; --sb-text: #343A40; --sb-sec: #64748B; --sb-border: #E5E7EB;
}
.slfs-sb .sb-p { font-size: 14.5px; line-height: 29px; color: #374151; text-align: justify }

/* ══ دو چهره تنهایی ══ */
.slfs-sb .sb-faces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px }
.slfs-sb .sb-face { border-radius: 16px; background: var(--dl); padding: 18px }
.slfs-sb .sb-face__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px }
.slfs-sb .sb-face__icon { width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--dc); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-sb .sb-face__icon svg { width: 20px; height: 20px }
.slfs-sb .sb-face__name { font-size: 16px; font-weight: 900; color: var(--dc) }
.slfs-sb .sb-face__lack { font-size: 11.5px; font-weight: 800; color: var(--sb-sec) }
.slfs-sb .sb-face__def { font-size: 13.5px; line-height: 26px; color: var(--sb-slate); text-align: justify }
.slfs-sb .sb-face__fill { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(0,0,0,.08); font-size: 12.5px; line-height: 24px; color: var(--sb-slate) }
.slfs-sb .sb-face__fill b { color: var(--dc); font-weight: 800 }

/* ══ نتیجه در دو بعد ══ */
.slfs-sb .sb-gauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px }
.slfs-sb .sb-gauge { text-align: center }
.slfs-sb .sb-gauge svg { display: block; width: 100%; max-width: 240px; height: auto; margin: 0 auto }
.slfs-sb .sb-gauge__name { font-size: 14px; font-weight: 900; margin-top: 4px }
.slfs-sb .sb-chip { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 10px; border-radius: 20px; margin-top: 6px; white-space: nowrap }
.slfs-sb .sb-overview { margin-top: 20px; padding: 14px 16px; background: #F8FAFC; border-radius: 12px }

/* ══ نقشه تنهایی ══ */
.slfs-sb .sb-map svg { display: block; width: 100%; max-width: 440px; height: auto; margin: 0 auto }
.slfs-sb .sb-profile { margin-top: 22px; padding-top: 20px; border-top: 1px solid #F1F5F9 }
.slfs-sb .sb-profile__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px }
.slfs-sb .sb-profile__title { display: flex; align-items: baseline; flex-wrap: wrap; line-height: 1.5 }
.slfs-sb .sb-profile__k, .slfs-sb .sb-profile__colon { font-size: 14px; font-weight: 700; color: var(--sb-sec) }
.slfs-sb .sb-profile__name { font-size: 20px; font-weight: 900; color: var(--sb-navy) }
.slfs-sb .sb-profile__dom { display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; padding: 5px 14px; border-radius: 20px; white-space: nowrap }
.slfs-sb .sb-map-note { margin-top: 16px; font-size: 13px; line-height: 25px; color: #4B5563; text-align: justify }

/* ══ تحلیل هر بعد ══ */
.slfs-sb .sb-dims { display: flex; flex-direction: column; gap: 14px; margin-top: 24px }
.slfs-sb .sb-dim { border: 1px solid var(--sb-border); border-radius: 20px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.04); overflow: hidden }
.slfs-sb .sb-dim__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: var(--dl) }
.slfs-sb .sb-dim__icon { width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--dc); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-sb .sb-dim__icon svg { width: 22px; height: 22px }
.slfs-sb .sb-dim__name { flex: 1; min-width: 0; font-size: 18px; font-weight: 900; color: var(--dc) }
.slfs-sb .sb-dim__pct { font-size: 22px; font-weight: 900; color: var(--dc); direction: ltr }
.slfs-sb .sb-dim__body { padding: 18px 20px }
.slfs-sb .sb-dim__def { font-size: 12.5px; line-height: 23px; color: var(--sb-sec); margin-bottom: 8px }

/* ══ ریسپانسیو ══ */
@media (max-width: 768px) {
    .slfs-sb .sb-faces { grid-template-columns: 1fr }
}
@media (max-width: 576px) {
    .slfs-sb .sb-p { font-size: 13.5px; line-height: 26px }
    .slfs-sb .sb-gauges { gap: 10px }
    .slfs-sb .sb-gauge__name { font-size: 12.5px }
    .slfs-sb .sb-chip { font-size: 10px; padding: 2px 8px }
    /* نیمرخ در موبایل: زیر هم و وسط‌چین */
    .slfs-sb .sb-profile__row { flex-direction: column; justify-content: center; gap: 10px }
    .slfs-sb .sb-profile__title { flex-direction: column; align-items: center; text-align: center }
    .slfs-sb .sb-profile__k { font-size: 11.5px; font-weight: 800 }
    .slfs-sb .sb-profile__colon { display: none }
    .slfs-sb .sb-profile__name { font-size: 19px }
    .slfs-sb .sb-dim__head { padding: 14px; gap: 8px; flex-wrap: wrap }
    .slfs-sb .sb-dim__icon { width: 38px; height: 38px }
    .slfs-sb .sb-dim__name { font-size: 16px }
    .slfs-sb .sb-dim__pct { font-size: 19px }
    .slfs-sb .sb-dim__body { padding: 14px }
}