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

/* ══════════ life ══════════ */
/* ══ بافت زندگی (life) — از life-section.html؛ همه زیرِ .slfs-lf (وب‌پیجِ فعلی هم lf-fill/lf-eye/lf-face… دارد) ══ */
.slfs-lf { --lf-teal: #12B886; --lf-navy: #1E3A5F; --lf-navy-l: #EEF2F7; --lf-slate: #334155; --lf-text: #343A40; --lf-sec: #64748B; --lf-border: #E5E7EB }
.slfs-lf .lf-p { font-size: 14px; line-height: 28px; color: #374151; text-align: justify }
/* نامِ لاتین وسطِ متنِ فارسی: isolate تا «Spencer، ۱۹۹۴» سالِ فارسی را به اجرای LTR نچسباند (در طراحی «Ritchie و ۱۹۹۴ Spencer» خوانده می‌شد) */
.slfs-lf span.en { unicode-bidi: isolate }

/* ══ مراحل تحلیل چارچوبی ══ */
.slfs-lf .lf-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px }
.slfs-lf .lf-stage { position: relative; border: 1px solid var(--lf-border); border-radius: 14px; background: #fff; display: flex; flex-direction: column }
.slfs-lf .lf-stage:not(:last-child)::after { content: ''; position: absolute; left: -11px; top: 19px; width: 7px; height: 7px; border-top: 2px solid #94A3B8; border-left: 2px solid #94A3B8; transform: rotate(-45deg) }
.slfs-lf .lf-stage__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--lf-border); border-radius: 14px 14px 0 0; background: var(--lf-navy-l); color: var(--lf-navy); font-size: 12.5px; font-weight: 800; line-height: 1.5 }
.slfs-lf .lf-stage__n { width: 22px; height: 22px; border-radius: 7px; background: var(--lf-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; flex-shrink: 0 }
.slfs-lf .lf-stage:last-child .lf-stage__head { background: var(--lf-navy); color: #fff }
.slfs-lf .lf-stage:last-child .lf-stage__n { background: #fff; color: var(--lf-navy) }
.slfs-lf .lf-stage__desc { padding: 10px 12px 12px; font-size: 11.5px; line-height: 1.9; color: var(--lf-sec) }
.slfs-lf .lf-method-text { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1F5F9 }

/* ══ منطق چارچوب زیر متن روش: یک خط، بدون قاب‌های جدا ══ */
.slfs-lf .lf-flow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: #F8FAFC }
.slfs-lf .lf-flow__item { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap }
.slfs-lf .lf-flow__v { font-size: 22px; font-weight: 900; color: var(--lf-navy); line-height: 1.2 }
.slfs-lf .lf-flow__k { font-size: 12.5px; font-weight: 700; color: var(--lf-sec) }
.slfs-lf .lf-flow__item.is-result .lf-flow__v { color: #0CA678 }
.slfs-lf .lf-flow__item.is-result .lf-flow__k { color: var(--lf-slate) }
.slfs-lf .lf-flow__op { font-size: 17px; font-weight: 900; color: #94A3B8 }

/* ══ چارچوب حلقه‌های زندگی ══ */
.slfs-lf .lf-rings { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 280px); gap: 24px; align-items: center }
.slfs-lf .lf-rings__svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto }
.slfs-lf .lf-rlegend { display: flex; flex-direction: column; gap: 10px }
.slfs-lf .lf-rl { border-radius: 14px; background: var(--rl); padding: 12px 14px }
.slfs-lf .lf-rl__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--rc) }
.slfs-lf .lf-rnum { width: 24px; height: 24px; border-radius: 7px; background: #fff; border: 2px solid var(--rc); color: var(--rc); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; flex-shrink: 0 }
.slfs-lf .lf-rl__vars { display: flex; flex-direction: column; gap: 6px; margin-top: 8px }
.slfs-lf .lf-rl__var { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; color: var(--lf-slate) }
.slfs-lf .lf-rl__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--rc); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-lf .lf-rl__icon svg { width: 13px; height: 13px }
.slfs-lf .lf-rings-text { margin-top: 20px; padding-top: 18px; border-top: 1px solid #F1F5F9 }

/* ══ چرخ زندگی شما ══ */
.slfs-lf .lf-wheel { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 24px; align-items: center }
.slfs-lf .lf-wheel__svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0 auto }
.slfs-lf .lf-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
.slfs-lf .lf-mini__card { border: 1px solid var(--lf-border); border-radius: 14px; padding: 12px; background: #fff; min-width: 0 }
.slfs-lf .lf-mini__name { font-size: 12.5px; font-weight: 800; color: var(--lf-slate); line-height: 1.5 }
.slfs-lf .lf-mini__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-top: 8px }
.slfs-lf .lf-dots { display: flex; gap: 4px; direction: ltr }
.slfs-lf .lf-dot { width: 9px; height: 9px; border-radius: 50%; background: #E5E7EB }
.slfs-lf .lf-dot.is-on { background: var(--rc) }
.slfs-lf .lf-status { font-size: 10.5px; font-weight: 800; padding: 2px 9px; border-radius: 20px; white-space: nowrap }
.slfs-lf .lf-overview { margin-top: 20px; padding: 14px 16px; background: #F8FAFC; border-radius: 12px }
.slfs-lf .lf-warn { display: flex; gap: 10px; align-items: flex-start; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: #FFF8EB; border: 1px solid #FDE68A; font-size: 13px; line-height: 25px; color: #78350F; text-align: justify }
.slfs-lf .lf-warn svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px }

/* ══ جدول چارچوب (رنگ هر ستون از حلقه آن؛ پررنگ‌تر = اثر بیشتر) ══ */
.slfs-lf .lf-grid-intro { margin-bottom: 18px }
.slfs-lf .lf-grid { display: grid; grid-template-columns: 52px repeat(6, minmax(0, 1fr)); gap: 3px; max-width: 720px; margin: 0 auto }
.slfs-lf .lf-grid__corner { font-size: 10px; font-weight: 700; color: #94A3B8; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px }
.slfs-lf .lf-grid__h { font-size: 10.5px; font-weight: 800; color: var(--rc); text-align: center; padding: 0 2px 7px; white-space: nowrap; overflow: hidden; display: flex; align-items: flex-end; justify-content: center }
.slfs-lf .lf-grid__code { height: 22px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; direction: ltr; color: var(--lf-slate); border-radius: 6px }
.slfs-lf .lf-grid__code.is-you { background: var(--lf-navy); color: #fff }
.slfs-lf .lf-grid__c { height: 22px; border-radius: 6px }
.slfs-lf .lf-grid__c.is-you { box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--lf-navy) }
.slfs-lf .lf-scale { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin-top: 18px }
.slfs-lf .lf-scale__ring { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; color: var(--rc) }
.slfs-lf .lf-scale__sw { display: inline-flex; gap: 2px; direction: ltr }
.slfs-lf .lf-scale__sw span { width: 14px; height: 10px; border-radius: 3px }
.slfs-lf .lf-grid-note { margin-top: 18px; font-size: 13.5px; line-height: 26px; color: #4B5563; text-align: justify }

/* ══ نوار سه حلقه پیش از تحلیل متغیرها ══ */
.slfs-lf .lf-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px }
.slfs-lf .lf-strip__item { border-radius: 14px; background: var(--rl); padding: 14px; display: flex; gap: 12px; align-items: center; min-width: 0 }
.slfs-lf .lf-strip__svg { width: 46px; height: 46px; flex-shrink: 0 }
.slfs-lf .lf-strip__body { min-width: 0 }
.slfs-lf .lf-strip__k { font-size: 11px; font-weight: 800; color: var(--rc) }
.slfs-lf .lf-strip__name { font-size: 14px; font-weight: 900; color: var(--lf-slate); line-height: 1.5 }
.slfs-lf .lf-strip__vars { font-size: 11.5px; color: var(--lf-sec); line-height: 1.8 }

/* ══ هر حلقه یک قاب؛ دو متغیرش داخل همان قاب، جداشده با یک خط ══ */
.slfs-lf .lf-groups { display: flex; flex-direction: column; gap: 18px; margin-top: 22px }
.slfs-lf .lf-group { border: 1px solid var(--lf-border); border-radius: 20px; background: #fff; box-shadow: 0 4px 20px rgba(0,0,0,.04); overflow: hidden }
.slfs-lf .lf-group__head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--rl) }
.slfs-lf .lf-group__head svg { width: 52px; height: 52px; flex-shrink: 0 }
.slfs-lf .lf-group__k { font-size: 12px; font-weight: 800; color: var(--rc) }
.slfs-lf .lf-group__name { font-size: 19px; font-weight: 900; color: var(--lf-slate); line-height: 1.5 }
.slfs-lf .lf-var { padding: 18px 20px }
.slfs-lf .lf-var + .lf-var { border-top: 1px solid #EEF1F4 }
.slfs-lf .lf-var__head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px }
.slfs-lf .lf-var__icon { width: 36px; height: 36px; border-radius: 50%; background: var(--rl); color: var(--rc); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.slfs-lf .lf-var__icon svg { width: 18px; height: 18px }
.slfs-lf .lf-var__name { flex: 1; min-width: 0; font-size: 15px; font-weight: 800; color: var(--lf-slate); line-height: 1.5 }
.slfs-lf .lf-var__def { font-size: 12.5px; color: var(--lf-sec); line-height: 23px; margin-bottom: 6px }

/* ══ ریسپانسیو ══ */
@media (max-width: 860px) {
    .slfs-lf .lf-wheel { grid-template-columns: 1fr }
    .slfs-lf .lf-wheel__svg { max-width: 280px }
    .slfs-lf .lf-rings { grid-template-columns: 1fr }
    .slfs-lf .lf-rings__svg { max-width: 360px }
    .slfs-lf .lf-rlegend { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 768px) {
    .slfs-lf .lf-stages { grid-template-columns: 1fr; gap: 18px }
    .slfs-lf .lf-stage:not(:last-child)::after { left: auto; right: 50%; top: auto; bottom: -13px; transform: translateX(50%) rotate(-135deg) }
    .slfs-lf .lf-strip { grid-template-columns: 1fr }
    .slfs-lf .lf-rlegend { grid-template-columns: 1fr }
}
@media (max-width: 576px) {
    .slfs-lf .lf-p { font-size: 13.5px; line-height: 26px }

    .slfs-lf .lf-flow { gap: 4px 10px; padding: 10px 12px }
    .slfs-lf .lf-flow__v { font-size: 18px }
    .slfs-lf .lf-flow__k { font-size: 11.5px }
    .slfs-lf .lf-flow__op { font-size: 14px }

    .slfs-lf .lf-mini { gap: 8px }
    .slfs-lf .lf-mini__card { padding: 10px }
    .slfs-lf .lf-mini__name { font-size: 11.5px }
    .slfs-lf .lf-dot { width: 7px; height: 7px }
    .slfs-lf .lf-status { font-size: 9.5px; padding: 1px 7px }

    .slfs-lf .lf-grid { grid-template-columns: 38px repeat(6, minmax(0, 1fr)); gap: 2px }
    .slfs-lf .lf-grid__h { font-size: 10px; padding: 0 0 6px; height: 84px }
    .slfs-lf .lf-grid__h span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap }
    .slfs-lf .lf-grid__code, .slfs-lf .lf-grid__c { height: 18px }
    .slfs-lf .lf-grid__code { font-size: 10px }
    .slfs-lf .lf-scale { gap: 8px 14px }

    .slfs-lf .lf-group__head { padding: 14px }
    .slfs-lf .lf-group__head svg { width: 44px; height: 44px }
    .slfs-lf .lf-group__name { font-size: 17px }
    .slfs-lf .lf-var { padding: 14px }
}