/* ===========================================================
   چارت سایز — فقط در صفحهٔ /size-chart بارگذاری می‌شود.
   هیچ رنگ یا فونت تازه‌ای تعریف نمی‌کند؛ همه از توکن‌های site.css می‌آید.
   تنها استثنا نردبان رنگ سایزهاست که پایین توضیح داده شده.
   =========================================================== */

.sc-hero {
    background: var(--oat-deep);
    padding-block-start: 36px;
    padding-block-end: var(--rhythm);
    border-bottom: 1px solid var(--line);
}

.sc-hero-head { max-width: 54ch; margin-bottom: 28px; }
.sc-title { font-size: 28px; margin-bottom: 16px; }
.sc-lead { font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); margin: 0; }

.sc-h2 { font-size: 22px; margin-bottom: 8px; }
.sc-sub { color: var(--ink-soft); font-size: 14.5px; margin: 0 0 22px; max-width: 62ch; }

.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- چیدمان ورودی/نتیجه ---------- */
.sc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }

.sc-panel {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 22px 20px;
    display: grid; gap: 26px; align-content: start;
}

/* ---------- کلید زنانه/مردانه ---------- */
.sc-field-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 12px;
}
.sc-field-icon { display: flex; color: var(--sage); }
.sc-field-icon .icon { width: 18px; height: 18px; }

/* عدد کنار برچسب: تراز اعداد باید ثابت بماند وگرنه موقع کشیدن اسلایدر می‌لرزد */
.sc-field-value {
    margin-inline-start: auto; font-weight: 800; font-size: 17px; color: var(--ink);
    font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.sc-field-value i { font-style: normal; font-size: 12px; font-weight: 600; color: var(--ink-soft); }

.sc-segmented {
    position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    background: var(--oat-deep); border-radius: var(--radius-pill); padding: 4px;
}
/* قرص لغزان: یک عنصر جداست تا به‌جای پریدنِ رنگ از یک دکمه به دکمهٔ دیگر،
   پس‌زمینه بین دو گزینه سُر بخورد. عرض ستون‌ها (W − padding 8 − gap 4) ÷ ۲
   است، یعنی همان calc(50% - 6px)؛ پس جابه‌جایی تا گزینهٔ دوم به اندازهٔ عرض
   خودش به‌علاوهٔ gap است. در RTL گزینهٔ دوم سمت چپ است و translateX منفی
   دقیقاً همان‌جا می‌برد. */
.sc-segmented-pill {
    position: absolute; z-index: 0; inset-block: 4px; inset-inline-start: 4px;
    width: calc(50% - 6px); border-radius: var(--radius-pill);
    background: var(--sage-dark); box-shadow: var(--shadow-xs);
    transition: transform var(--med) var(--ease);
}
.sc-segmented.is-second .sc-segmented-pill { transform: translateX(calc(-100% - 4px)); }
.sc-segment {
    position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
    padding: 10px 8px; min-height: 44px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: 14px; color: var(--ink);
    transition: color var(--med) var(--ease);
}
.sc-segment.is-active { color: #fff; }

/* ---------- اسلایدرها ---------- */
/* ارتفاع ۴۴ پیکسل برای ناحیهٔ لمسی است، نه ظاهر؛ خودِ ریل ۶ پیکسل می‌ماند و
   دستگیره با margin منفی روی آن مرکز می‌شود. */
.sc-range {
    -webkit-appearance: none; appearance: none; width: 100%; height: 44px;
    background: transparent; cursor: pointer; display: block;
}
.sc-range::-webkit-slider-runnable-track {
    height: 6px; border-radius: var(--radius-pill); background: var(--line);
}
.sc-range::-moz-range-track { height: 6px; border-radius: var(--radius-pill); background: var(--line); }
.sc-range::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -10px;
    border-radius: 50%; background: var(--paper); border: 3px solid var(--sage);
    box-shadow: var(--shadow-sm); transition: transform var(--fast) var(--ease);
}
.sc-range::-moz-range-thumb {
    width: 26px; height: 26px; border-radius: 50%; background: var(--paper);
    border: 3px solid var(--sage); box-shadow: var(--shadow-sm);
    transition: transform var(--fast) var(--ease);
}
.sc-range:hover::-webkit-slider-thumb { transform: scale(1.12); }
.sc-range:active::-webkit-slider-thumb { transform: scale(.94); }
.sc-range:hover::-moz-range-thumb { transform: scale(1.12); }
.sc-range:active::-moz-range-thumb { transform: scale(.94); }
.sc-range:focus-visible::-webkit-slider-thumb { outline: 2.5px solid var(--clay); outline-offset: 2px; }
.sc-range:focus-visible::-moz-range-thumb { outline: 2.5px solid var(--clay); outline-offset: 2px; }

.sc-range-scale {
    display: flex; justify-content: space-between; margin-top: -2px;
    font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.sc-field-hint { font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 0; line-height: 1.7; }

/* ---------- کارت نتیجه ---------- */
.sc-result {
    background: var(--sage-dark); color: #fff; border-radius: var(--radius-lg);
    padding: 26px 22px; display: flex; flex-direction: column;
    align-items: center; text-align: center; justify-content: center; gap: 4px;
}
.sc-result-eyebrow {
    font-size: 12px; font-weight: 600; letter-spacing: .1em;
    color: rgba(255, 255, 255, .68);
}
.sc-badge { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 10px 0 4px; }
/* line-height کمتر از ۱.۲ در وزیرمتن بالای حرف را می‌برد — متریک لاتینش
   بلندتر از کادر است. */
.sc-badge-letter {
    font-family: var(--font-latin); font-size: 62px; font-weight: 800;
    line-height: 1.25; letter-spacing: -.02em; color: var(--sage);
}
.sc-badge-num {
    font-family: var(--font-latin); font-size: 15px; font-weight: 700;
    color: rgba(255, 255, 255, .82); font-variant-numeric: tabular-nums;
}
/* هر بار که سایز عوض می‌شود کارت یک تپش کوتاه می‌زند — تنها بازخوردی است که
   می‌گوید «عدد جدید همین الان آمد» بدون اینکه چیزی جابه‌جا شود. */
.sc-badge.is-changed { animation: sc-pop .34s var(--ease); }
@keyframes sc-pop {
    0%   { transform: scale(1); }
    38%  { transform: scale(1.09); }
    100% { transform: scale(1); }
}
.sc-result-note {
    font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .78);
    margin: 6px 0 0; min-height: 44px; max-width: 34ch;
}
.sc-result-note b { color: #fff; font-weight: 700; }
.sc-result-cta { margin-top: 12px; background: var(--sage); border-color: var(--sage); }
.sc-result-cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
.sc-result-cta .icon { width: 18px; height: 18px; }

/* ---------- نوار سایز (عنصر امضای صفحه) ----------
   نردبان رنگ: هفت پلهٔ یک‌رنگ از تیل برند. چون سایز یک دادهٔ ترتیبی است،
   رنگ‌های متفاوت گمراه‌کننده می‌شد؛ تیرگی همان ترتیب را می‌رساند.
   رنگ متن هر پله دستی انتخاب شده تا همه‌جا کنتراست از ۴.۵ رد شود. */
.sc-ruler-wrap { margin: 26px 0 0; }
.sc-ruler-cap {
    font-size: 13px; color: var(--ink-soft); margin-bottom: 10px;
    display: flex; align-items: center; gap: 7px;
}
.sc-ruler { position: relative; padding-top: 34px; }
.sc-ruler-track {
    display: flex; height: 52px; border-radius: var(--radius-md); overflow: hidden;
    box-shadow: var(--shadow-xs); background: var(--line-soft);
}
.sc-seg {
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-latin); font-size: 13px; font-weight: 800; letter-spacing: .02em;
    min-width: 0; overflow: hidden; white-space: nowrap;
    /* همین transition است که با تغییر قد، بازه‌ها را جلوی چشم کاربر جابه‌جا می‌کند */
    transition: flex-grow var(--med) var(--ease), opacity var(--med) var(--ease);
}
.sc-seg[data-size="XXS"] { background: #e8f8f5; color: var(--ink); }
.sc-seg[data-size="XS"]  { background: #c0efe7; color: var(--ink); }
.sc-seg[data-size="S"]   { background: #8ee3d7; color: var(--ink); }
.sc-seg[data-size="M"]   { background: #4ed0be; color: var(--ink); }
.sc-seg[data-size="L"]   { background: #0fb9a2; color: var(--ink); }
.sc-seg[data-size="XL"]  { background: #0a7d6c; color: #fff; }
.sc-seg[data-size="XXL"] { background: #06544a; color: #fff; }
.sc-seg.is-current { box-shadow: inset 0 0 0 3px var(--ink); }

/* نشانگر: با inset-inline-start حرکت می‌کند تا در RTL هم درست بنشیند */
.sc-marker {
    position: absolute; top: 0; bottom: 0; inset-inline-start: 50%;
    transform: translateX(50%); pointer-events: none;
    transition: inset-inline-start var(--med) var(--ease);
    display: flex; flex-direction: column; align-items: center;
}
.sc-marker-flag {
    background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
    padding: 3px 9px; border-radius: var(--radius-pill); white-space: nowrap;
    font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm);
}
.sc-marker-dot {
    position: absolute; top: 26px; bottom: 0; width: 3px; background: var(--ink);
    border-radius: var(--radius-pill);
}
.sc-marker-dot::after {
    content: ''; position: absolute; top: 0; inset-inline-start: 50%;
    transform: translateX(50%) translateY(-3px);
    border-inline: 5px solid transparent; border-top: 6px solid var(--ink);
}

.sc-ruler-axis {
    display: flex; justify-content: space-between; margin-top: 8px;
    font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}

/* ---------- راهنمای اندازه‌گیری ---------- */
.sc-measure-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sc-measure-card {
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 20px;
    transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.sc-measure-card:hover { border-color: var(--sage); transform: translateY(-2px); }
.sc-measure-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sage-tint); color: var(--sage); margin-bottom: 12px;
}
.sc-measure-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.sc-measure-card p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); margin: 0; }

/* ---------- جدول ---------- */
.sc-table-section { background: var(--oat-deep); padding-block: var(--rhythm); }
.sc-table-scroll {
    overflow-x: auto; background: var(--paper);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    -webkit-overflow-scrolling: touch;
}
.sc-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 620px; }
.sc-table th, .sc-table td {
    padding: 9px 10px; text-align: center; border-bottom: 1px solid var(--line-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.sc-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--paper); font-family: var(--font-latin); font-weight: 800;
    font-size: 12.5px; color: var(--ink); border-bottom: 1.5px solid var(--line);
}
.sc-table tbody th { font-weight: 700; color: var(--ink); background: var(--line-soft); }
.sc-table td { color: var(--ink-soft); }
.sc-table td.is-filled { color: var(--ink); font-weight: 300; }
.sc-table tr.is-current th, .sc-table tr.is-current td { background: var(--sage-tint); }
.sc-table tr.is-current th { background: var(--sage); color: #fff; }
.sc-table td.is-hit {
    background: var(--sage-dark); color: #004138; font-weight: 900; border-radius: var(--radius-sm);
}
.sc-table-foot { font-size: 12.5px; color: var(--ink-soft); margin: 12px 0 0; }

/* ---------- نکته‌ها ---------- */
.sc-notes { display: grid; grid-template-columns: 1fr; gap: 14px; }
.sc-note-card {
    display: flex; gap: 14px; align-items: flex-start;
    background: var(--paper); border: 1px solid var(--line);
    border-radius: var(--radius-lg); padding: 20px;
}
.sc-note-icon {
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--clay-tint); color: var(--ink);
}
.sc-note-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 5px; }
.sc-note-card h3 { font-size: 15px; margin-bottom: 0; }
.sc-note-card p { font-size: 13.5px; line-height: 1.85; color: var(--ink-soft); margin: 0 0 10px; }
.sc-note-card p:last-child { margin-bottom: 0; }

/* ---------- صفحه‌های بزرگ‌تر ---------- */
@media (min-width: 760px) {
    .sc-measure-grid { grid-template-columns: repeat(3, 1fr); }
    .sc-notes { grid-template-columns: 1fr 1fr; }
    .sc-title { font-size: 34px; }
}

@media (min-width: 980px) {
    .sc-grid { grid-template-columns: 1.35fr 1fr; gap: 20px; }
    .sc-panel { padding: 28px 26px; }
    .sc-badge-letter { font-size: 76px; }
    .sc-ruler-wrap { margin-top: 32px; }
}

/* حرکت کمتر: نوار و نشانگر باید همچنان درست بنشینند، فقط بدون انیمیشن */
@media (prefers-reduced-motion: reduce) {
    .sc-seg, .sc-marker, .sc-segmented-pill { transition: none; }
    .sc-badge.is-changed { animation: none; }
}