/* ═══════════════════════════════════════════════════════════════════
   آینه · پایه و اجزای مشترک
   فقط از توکن‌ها می‌خواند. استایل اختصاصی هر کامپوننت کنار خودش است.
   ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    :root { --motion: 0ms; --motion-quick: 0ms; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

html { -webkit-text-size-adjust: 100%; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--surface);
    color: var(--on-surface);
    font-family: var(--font);
    font-size: var(--fs-body-md);
    line-height: 28px;
    overscroll-behavior-y: none;
}

/* مه‌ی صبحگاهی: یک لکه‌ی نرم از آسمانِ همین ساعت بالای صفحه. تنها تزئین سراسری، و دلیلش این است
   که اپ می‌داند «روز تو» کجاست (مرز ۴ صبح). */
body {
    min-height: 100dvh;
    -webkit-tap-highlight-color: transparent;
    text-align: start;
    background:
        radial-gradient(120% 46rem at 50% -8rem, color-mix(in srgb, var(--wash-a) 90%, transparent), transparent 72%),
        radial-gradient(90% 30rem at 100% 8rem, color-mix(in srgb, var(--wash-b) 80%, transparent), transparent 70%),
        var(--surface);
    background-repeat: no-repeat;
}

/* حروف فارسی فاصله‌ی حروف نمی‌گیرند (اتصال را می‌شکند) */
h1, h2, h3, h4, p, span, button, input, textarea, label, a { letter-spacing: 0; }

h1, h2, h3, h4 { margin: 0; color: var(--on-surface); }

h1 { font-size: var(--fs-headline-lg-mobile); line-height: 1.6; font-weight: 800; }
h2 { font-size: var(--fs-headline-md); line-height: 1.65; font-weight: 700; }
h3 { font-size: var(--fs-body-lg); line-height: 1.7; font-weight: 700; }

@media (min-width: 640px) {
    h1 { font-size: var(--fs-headline-lg); }
}

p { margin: 0; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

button { font-family: inherit; }

:focus-visible {
    outline: 2px solid var(--tile-500);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection { background: var(--saffron-200); color: var(--ink); }

bdi, .ltr { unicode-bidi: isolate; }
.ltr { direction: ltr; text-align: start; }

/* ── چیدمان ── */

.page {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--margin);
    padding-block-start: calc(4.5rem + var(--safe-top));
    padding-block-end: calc(8rem + var(--safe-bottom));
}
.page--flow { padding-block-end: calc(3rem + var(--safe-bottom)); }

.stack { display: flex; flex-direction: column; }
.stack-xs { gap: var(--space-xs); }
.stack-sm { gap: var(--space-sm); }
.stack-md { gap: var(--space-md); }
.stack-xl { gap: var(--space-xl); }

.muted { color: var(--on-surface-variant); }

/* ── صدای انسان‌ها ──
   قاعده‌ی حروف: سیستم با وزیرمتن حرف می‌زند؛ هر جا یک آدم حرف می‌زند (خودِ تو یا راوی داستان) دست‌خط است. */
.hand {
    font-family: var(--font-hand);
    font-weight: 400;
    font-size: var(--fs-hand);
    line-height: 2;
    color: var(--yours-ink);
}
.hand--lg { font-size: var(--fs-hand-lg); line-height: 1.7; font-weight: 700; }

/* ── دکمه‌ها: قرص = کنش ── */

.btn-primary-soft,
.btn-ghost,
.btn-quiet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 52px;
    padding-inline: 1.5rem;
    border-radius: var(--radius-pill);
    font-size: var(--fs-label-md);
    font-weight: 600;
    line-height: 22px;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none !important;
    transition: background-color var(--motion), transform var(--motion-quick), border-color var(--motion), box-shadow var(--motion);
}

.btn-primary-soft {
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-container) 92%, white), var(--primary-container));
    color: var(--button-text);
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--tile-700) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, 0.28);
}
.btn-primary-soft:hover { background: color-mix(in srgb, var(--primary-container) 86%, black); }
.btn-primary-soft:active, .btn-ghost:active { transform: scale(0.985); }
.btn-primary-soft[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

/* دکمه‌ی ثانویه‌ی بی‌فشار («شاید بعداً»، «رد شدن»): بدون پرکردگی، هیچ‌وقت کم‌رنگ‌تر از خوانایی */
.btn-ghost {
    background: color-mix(in srgb, var(--paper) 40%, transparent);
    color: var(--on-surface);
    border-color: var(--outline-variant);
}
.btn-ghost:hover { background: var(--surface-container); }

.btn-quiet {
    min-height: var(--tap-min);
    background: transparent;
    color: var(--on-surface-variant);
    text-decoration: underline !important;
    text-decoration-color: var(--outline-variant);
    text-underline-offset: 4px;
    padding-inline: 0.75rem;
}
.btn-quiet:hover { color: var(--on-surface); }

/* ── پنل ساده: مه ── */

.panel {
    background: color-mix(in srgb, var(--forming) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--outline-variant) 60%, transparent);
    border-radius: var(--radius-card);
    padding: var(--space-lg);
}

.label-sm {
    font-size: var(--fs-label-sm);
    line-height: 18px;
    font-weight: 500;
    color: var(--on-surface-variant);
}

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

/* ── صفحه‌ی بارگذاری اولیه ── */

.boot {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    color: var(--primary);
    text-align: center;
    padding: 2rem;
}
.boot-mark { animation: breathe var(--breath); }
.boot-title { font-size: 30px; font-weight: 800; line-height: 1.5; color: var(--on-surface); }
.boot-line { color: var(--on-surface-variant); font-size: 15px; }
.boot-skeleton { display: flex; gap: 8px; margin-top: 1rem; }
.boot-skeleton span {
    width: 40px; height: 6px; border-radius: 6px;
    background: var(--surface-highest);
    animation: boot-fade 1.6s ease-in-out infinite;
}
.boot-skeleton span:nth-child(2) { animation-delay: 0.2s; }
.boot-skeleton span:nth-child(3) { animation-delay: 0.4s; }

/* تنها حرکتِ مداومِ سیستم: نفس. فقط روی چیزی که «زنده است» (آینه‌ی خانه و لوگوی بارگذاری) */
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.018); } }
@keyframes boot-fade { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ── خطای Blazor ── */

#blazor-error-ui {
    background: var(--surface-high);
    color: var(--on-surface);
    border-top: 1px solid var(--outline-variant);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.1);
    display: none;
    inset-inline: 0;
    padding: 0.8rem 1.25rem 1rem;
    position: fixed;
    z-index: 1000;
    font-size: var(--fs-body-md);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; inset-inline-start: 0.75rem; top: 0.5rem; }
#blazor-error-ui .reload { margin-inline-start: 0.5rem; }

::-webkit-scrollbar { width: 0; height: 0; }

/* آیکون‌ها: دو لایه. خط (جوهر) + سایه‌ی رنگی (ماده)؛ قسمت‌های .d پر می‌شوند */
.icon { flex: none; vertical-align: middle; }
.icon .d { fill: var(--icon-tint, currentColor); fill-opacity: 0.28; }
[dir="rtl"] .icon--dir { transform: scaleX(-1); }

/* ── فرم‌ها ── */

.field { display: flex; flex-direction: column; gap: var(--space-xs); font-size: var(--fs-label-md); color: var(--on-surface-variant); }

.field-input {
    min-height: 3rem;
    padding-inline: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--outline-variant);
    background: var(--surface-lowest);
    color: var(--on-surface);
    font-family: inherit;
    font-size: var(--fs-body-md);
    text-align: start;
    width: 100%;
    transition: border-color var(--motion), box-shadow var(--motion);
}
.field-input:focus { outline: 0; box-shadow: var(--focus-ring); border-color: var(--tile-500); }
.field-input.ltr { direction: ltr; }

.field-hint { font-size: var(--fs-label-sm); color: var(--on-surface-variant); line-height: 22px; }

/* خطا بی‌قرمز: مه + خط زعفرانی کنار متن */
.form-error {
    color: var(--on-surface);
    background: var(--saffron-100);
    border-inline-start: 3px solid var(--saffron-500);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: var(--fs-body-sm);
    line-height: 24px;
}

.check-row { display: flex; align-items: flex-start; gap: var(--space-sm); font-size: var(--fs-body-sm); line-height: 26px; color: var(--on-surface); cursor: pointer; }
.check-row input { flex: none; width: 1.5rem; height: 1.5rem; margin-block-start: 0.125rem; accent-color: var(--tile-600); }

.code-input { font-size: 1.5rem; letter-spacing: 0.5rem; text-align: center; direction: ltr; }