/* ═══════════════════════════════════════════════════════════════════
   آینه · سطح‌ها (سه ماده با سه معنا) و نشانه‌ها
   کاغذ = مال تو، خصوصی · شیشه = حرف دیگران · مه = در حال شکل‌گیری
   کاربر باید بتواند فقط از «جنس» یک کارت بفهمد این مال کیست.
   ═══════════════════════════════════════════════════════════════════ */

/* دانه‌ی کاغذ: یک بافت فقط روی ماده‌ی کاغذ و مه. بافتِ واقعی = «دست‌ساز و شخصی» */
:root {
    --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .3  0 0 0 0 .25  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    --rule: 2.125rem;
}

/* ── کاغذ: نوشته‌ی خودت ── */

.paper {
    position: relative;
    isolation: isolate;
    background: var(--paper);
    color: var(--yours-ink);
    border: 1px solid var(--paper-line);
    border-radius: var(--radius-paper);
    box-shadow: var(--shadow-paper);
}
.paper::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--grain);
    opacity: 0.07;
    mix-blend-mode: multiply;
    pointer-events: none;
}
/* خط‌دار + حاشیه‌ی دفتر. در دفترهای فارسی حاشیه سمت راست است = ابتدای خط */
.paper--ruled {
    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--rule) - 1px), color-mix(in srgb, var(--paper-line) 85%, transparent) calc(var(--rule) - 1px), color-mix(in srgb, var(--paper-line) 85%, transparent) var(--rule));
    background-position: 0 1.25rem;
    background-repeat: repeat-y;
    background-size: 100% var(--rule);
    background-color: var(--paper);
}
.paper--ruled::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 2.75rem;
    width: 1px;
    background: color-mix(in srgb, var(--geranium-500) 42%, transparent);
    pointer-events: none;
}

/* ── شیشه: حرف دیگران. کمی دورتر، کمی سردتر ── */

.glass {
    position: relative;
    background: var(--others);
    border: 1px solid var(--others-edge);
    border-radius: var(--radius-card);
    box-shadow: var(--others-shadow);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
}

/* ── مه: هنوز شکل نگرفته ── */

.fog {
    position: relative;
    isolation: isolate;
    background: linear-gradient(160deg, color-mix(in srgb, var(--fog-200) 80%, transparent), color-mix(in srgb, var(--fog-100) 90%, transparent));
    border: 1px dashed color-mix(in srgb, var(--ink-faint) 55%, transparent);
    border-radius: var(--radius-card);
}
.fog::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--grain);
    opacity: 0.05;
    pointer-events: none;
}

/* ── طاق: بازتاب ── */

.arch { border-radius: var(--radius-arch); overflow: hidden; position: relative; }

/* ── مُهر پستی: «ثبت شد» و «نمونه». دایره‌ی خط‌چین، کمی کج، با دست‌خط ── */

.stamp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.125rem 0.875rem;
    min-height: 2rem;
    border: 2px dashed color-mix(in srgb, var(--saffron-500) 85%, transparent);
    border-radius: var(--radius-pill);
    color: var(--saffron-700);
    font-family: var(--font-hand);
    font-size: 1.0625rem;
    line-height: 1.6;
    transform: rotate(-4deg);
    background: color-mix(in srgb, var(--saffron-100) 60%, transparent);
}

/* ── یادداشت حریم خصوصی: با مُهر، نه قفل ── */

.privacy-note {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--on-surface-variant);
    font-size: var(--fs-label-sm);
    line-height: 20px;
    --icon-tint: var(--saffron-500);
}
.privacy-note .icon { color: var(--saffron-700); }

/* ── سرِ بخش‌ها: یک الگو برای همه ── */

.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; }
.sec-head h2 { display: inline-flex; align-items: center; gap: 0.5rem; }
.sec-head h2 .icon { color: var(--primary); --icon-tint: var(--tile-500); }

/* حاشیه‌نوشت: جمله‌ی کوتاه دست‌خط کنار محتوا، با فاصله‌ی نیم‌خط از آن */
.marginalia {
    font-family: var(--font-hand);
    font-size: var(--fs-hand);
    line-height: 1.7;
    color: var(--ink-soft);
}

/* وینیتِ داخل طاق همیشه قاب را پر می‌کند؛ حلقه‌ی کاغذی دورش مثل قاب عکسِ روی طاقچه است */
.arch > svg.vignette { height: 100%; }
.art-ring { box-shadow: 0 0 0 5px color-mix(in srgb, var(--paper) 75%, transparent), 0 0 0 6px var(--paper-line); }