/* ==========================================================================
   انتخابِ چندگزینه‌ای به‌شکل «چیپ»
   --------------------------------------------------------------------------
   کاربر درباره‌ی صفحه‌ی جزئیات درمانی گفت: «بیماری‌های زمینه‌ای و
   حساسیت‌ها رو بهتر کن، افتضاحه از نظر UI/UX».

   چه چیزی خراب بود؟
       سه مشکلِ مشخص، نه فقط سلیقه:

       ۱) هدفِ لمس. چک‌باکسِ خامِ مرورگر حدود ۱۳ پیکسل است. روی گوشی
          یعنی کاربر باید دقیقاً روی یک مربعِ ریز بزند؛ زدنِ روی متن هم
          کار می‌کرد ولی هیچ نشانه‌ای نداشت که کل ردیف قابل زدن است.
          حداقلِ پذیرفته‌شده ۴۴ پیکسل است.

       ۲) وضعیتِ انتخاب دیده نمی‌شد. تنها تفاوتِ «دیابت دارم» و «ندارم»
          یک تیکِ کوچک بود؛ با یک نگاه معلوم نبود چه چیزی انتخاب شده.

       ۳) هیچ نظمی نداشت. یک شبکه‌ی دو ستونه از متن‌هایی با طول‌های
          خیلی متفاوت، که ستون‌ها را نامرتب می‌کرد.

   چیپ هر سه را حل می‌کند: کلِ چیپ قابلِ لمس است، انتخاب‌شده با رنگِ
   پرشده و تیک دیده می‌شود، و چون چیپ‌ها پشت‌سرهم می‌ریزند طول‌های
   متفاوت مشکلی نمی‌سازند.

   دسترسی‌پذیری: خودِ <input type="checkbox"> سرِ جایش می‌ماند و فقط از
   دید پنهان می‌شود — نه display:none. یعنی با Tab می‌شود رویش رفت،
   صفحه‌خوان می‌خواندش، و فرم بدون جاوااسکریپت هم کار می‌کند.
   ========================================================================== */

.chip-set {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    /* ۴۴ پیکسل: حداقلِ هدفِ لمس */
    min-height: 2.75rem;
    padding: 0 0.875rem;
    border-radius: var(--r-control, 1rem);
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dur-fast, 150ms) ease,
                border-color var(--dur-fast, 150ms) ease,
                transform var(--dur-fast, 150ms) ease;
}

.chip:active { transform: scale(0.97); }

/* ⚠️ پنهان اما زنده: عنصر همچنان فوکوس‌پذیر و قابلِ خواندن برای
   صفحه‌خوان است. با display:none یا visibility:hidden هر دو از بین
   می‌رفتند. */
.chip__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* حلقه‌ی فوکوس روی خودِ چیپ می‌نشیند، چون ورودی دیده نمی‌شود.
   بدون این، کاربرِ کیبورد اصلاً نمی‌فهمد کجاست. */
.chip__input:focus-visible + .chip__body,
.chip:focus-within {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

.chip__body {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.chip__mark {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background: var(--panel);
    transition: background-color var(--dur-fast, 150ms) ease,
                border-color var(--dur-fast, 150ms) ease;
}
.chip__mark .material-icons {
    font-size: 0.875rem;
    color: #fff;
    opacity: 0;
    transition: opacity var(--dur-fast, 150ms) ease;
}

/* ---------- حالت انتخاب‌شده ---------- */
.chip:has(.chip__input:checked) {
    background: color-mix(in srgb, var(--chip-hue, var(--blue)) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--chip-hue, var(--blue)) 45%, transparent);
    color: color-mix(in srgb, var(--chip-hue, var(--blue)) 80%, var(--text));
}
.chip:has(.chip__input:checked) .chip__mark {
    background: var(--chip-hue, var(--blue));
    border-color: var(--chip-hue, var(--blue));
}
.chip:has(.chip__input:checked) .chip__mark .material-icons { opacity: 1; }

/* پشتیبان برای مرورگرهایی که :has ندارند — جاوااسکریپت این کلاس را
   می‌گذارد. بدون آن، انتخاب هیچ بازخوردِ دیداری نداشت. */
.chip.is-checked {
    background: color-mix(in srgb, var(--chip-hue, var(--blue)) 12%, var(--panel));
    border-color: color-mix(in srgb, var(--chip-hue, var(--blue)) 45%, transparent);
    color: color-mix(in srgb, var(--chip-hue, var(--blue)) 80%, var(--text));
}
.chip.is-checked .chip__mark {
    background: var(--chip-hue, var(--blue));
    border-color: var(--chip-hue, var(--blue));
}
.chip.is-checked .chip__mark .material-icons { opacity: 1; }

/* ---------- تُنِ هر گروه ---------- */
.chip-set[data-tone="rose"]    { --chip-hue: #E11D48; }
.chip-set[data-tone="amber"]   { --chip-hue: #D97706; }
.chip-set[data-tone="teal"]    { --chip-hue: #0D9488; }
.chip-set[data-tone="violet"]  { --chip-hue: #7C3AED; }

/* ---------- گزینه‌ی «هیچ‌کدام» ---------- */
/* رنگِ متفاوت چون معنایش متفاوت است: انتخابش بقیه را پاک می‌کند. */
.chip[data-exclusive] { --chip-hue: #0D9488; }

@media (prefers-reduced-motion: reduce) {
    .chip, .chip__mark, .chip__mark .material-icons { transition: none; }
    .chip:active { transform: none; }
}


/* ==========================================================================
   کارت‌های اندازه‌گیری (قد، وزن، دور شکم)
   ========================================================================== */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem;
}

.metric-field { display: flex; flex-direction: column; gap: 0.375rem; }

.metric-field__label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.metric-field__input {
    width: 100%;
    min-height: 3rem;
    padding: 0 1rem;
    border-radius: var(--r-control, 1rem);
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 700;
    outline: none;
    transition: border-color var(--dur-fast, 150ms) ease;
}
.metric-field__input:focus { border-color: var(--blue); }

/* سلکت‌های جنگو خودشان کلاس نمی‌گیرند؛ استایل از روی ظرفشان می‌آید.
   ⚠️ این کار را با کلاسِ دلخواهِ تیلویند مثل [&>select]:metric-field__input
   نمی‌شود کرد: مودیفایرهای تیلویند فقط روی ابزارهای خودش کار می‌کنند و
   یک کلاسِ دست‌ساز را اصلاً تولید نمی‌کند — نتیجه‌اش سلکتی بود بدون هیچ
   استایل. */
.metric-field__select > select {
    width: 100%;
    min-height: 3rem;
    padding: 0 1rem;
    border-radius: var(--r-control, 1rem);
    border: 1px solid var(--border);
    background: var(--panel-2);
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 600;
    outline: none;
}
.metric-field__select > select:focus { border-color: var(--blue); }

.metric-field__hint {
    font-size: 0.6875rem;
    color: var(--muted);
    line-height: 1.5;
}

/* برچسبِ نتیجه (BMI، دور شکم) */
.metric-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--metric-hue, var(--blue)) 12%, var(--panel));
    color: color-mix(in srgb, var(--metric-hue, var(--blue)) 80%, var(--text));
    border: 1px solid color-mix(in srgb, var(--metric-hue, var(--blue)) 30%, transparent);
}
.metric-badge[data-tone="emerald"] { --metric-hue: #059669; }
.metric-badge[data-tone="amber"]   { --metric-hue: #D97706; }
.metric-badge[data-tone="rose"]    { --metric-hue: #E11D48; }
.metric-badge[data-tone="slate"]   { --metric-hue: #64748B; }