/* ============================================================================
   جیبوک — استایل صفحه‌های محتوایی (راهنماها و صفحه‌ی آیفون).

   بعد از page.css لود می‌شود و هیچ رنگی تعریف نمی‌کند: فقط توکن‌های page.css
   را مصرف می‌کند، پس حالت روشن و تیره خودبه‌خود درست است. اگر رنگی لازم شد،
   توکنش را در page.css اضافه کنید، نه اینجا.

   page.css خودش .btn، .card، .chip و :focus-visible را دارد؛ اینجا تکرار
   نشده‌اند، فقط جایی که لازم بوده تنظیم شده‌اند (مثلا .btn آنجا تمام‌عرض است).
   ========================================================================== */

/* ---------- ستون خواندن ----------
   برای متن پیوسته حدود ۷۰ نویسه در هر خط. */
.prose-wrap{ max-width:1140px; margin-inline:auto; padding-inline:var(--pad); }
.prose{ max-width:42rem; margin-inline:auto; }

.prose p, .prose li{ font-size:1.0625rem; line-height:1.9; }
.prose p{ margin-block:0 1.25em; }
.prose > :first-child{ margin-block-start:0; }
.prose h2{
  font-size:clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); font-weight:800; line-height:1.5;
  margin-block:2.4em .6em; scroll-margin-block-start:5.5rem;
}
.prose h3{
  font-size:1.1875rem; font-weight:700; line-height:1.6;
  margin-block:1.8em .5em; scroll-margin-block-start:5.5rem;
}
.prose h2 + p, .prose h3 + p{ margin-block-start:0; }
.prose a{ color:var(--primary); text-underline-offset:.25em; }
.prose a:hover{ color:var(--primary-hover); }
.prose ul, .prose ol{ padding-inline-start:1.4em; margin-block:0 1.25em; }
.prose li{ margin-block-end:.5em; }
.prose li::marker{ color:var(--text-muted); }

.lead{ font-size:1.1875rem; line-height:1.85; color:var(--text-muted); }

/* هر نام لاتین داخل متن فارسی در <bdi> می‌آید تا نقطه و ویرگول آن‌طرف خط نپرد. */
bdi{ unicode-bidi:isolate; }
.uiname{
  display:inline-block; direction:ltr; unicode-bidi:isolate;
  padding:0 .45em; border-radius:6px; background:var(--bg-subtle);
  border:1px solid var(--border); font-size:.92em; line-height:1.6; white-space:nowrap;
}

/* ---------- نوار پیشرفت خواندن ----------
   زیر هدر چسبان (.top، z-index 60) نمی‌رود. مبدا در RTL سمت راست است. */
.readbar{
  position:fixed; inset-block-start:0; inset-inline:0; height:3px; z-index:70;
  background:var(--primary); transform-origin:100% 50%; transform:scaleX(0);
  pointer-events:none;
}

/* ---------- سرصفحه‌ی مقاله ---------- */
.article-head{ padding-block:2rem 1.5rem; }
.breadcrumb{ font-size:.875rem; color:var(--text-muted); margin-block-end:1rem; }
.breadcrumb a{ color:inherit; text-decoration:none; }
.breadcrumb a:hover{ color:var(--primary); }
.breadcrumb span[aria-hidden]{ margin-inline:.4em; }
.article-title{
  font-size:clamp(1.75rem, 1.2rem + 2.6vw, 2.5rem);
  font-weight:800; line-height:1.4; margin:0 0 .6em; letter-spacing:0;
}
.article-meta{
  display:flex; flex-wrap:wrap; gap:.5rem 1.25rem;
  font-size:.875rem; color:var(--text-muted);
  padding-block-end:1.5rem; border-block-end:1px solid var(--border);
}
.article-meta > span{ display:inline-flex; align-items:center; gap:.4em; }
.article-meta svg{ width:1em; height:1em; flex:none; }

/* ---------- فهرست مطالب ----------
   روی موبایل بسته بالای متن؛ روی دسکتاپ چسبان کنار آن و همیشه باز. */
.toc{
  background:var(--bg-subtle); border:1px solid var(--border);
  border-radius:var(--r-md); padding:.5rem 1.25rem; margin-block:2rem;
}
.toc > summary{
  font-weight:700; cursor:pointer; list-style:none;
  display:flex; align-items:center; justify-content:space-between; min-height:44px;
}
.toc > summary::-webkit-details-marker{ display:none; }
.toc > summary svg{ width:1.25rem; height:1.25rem; transition:transform .2s var(--ease); }
.toc[open] > summary svg{ transform:rotate(180deg); }
.toc ol{ margin:.5rem 0 .75rem; padding-inline-start:1.2em; }
.toc li{ margin-block-end:.6em; font-size:.9375rem; }
.toc a{ color:var(--text-muted); text-decoration:none; }
.toc a:hover{ color:var(--primary); }

@media (min-width:1100px){
  .with-toc{ display:grid; grid-template-columns:minmax(0, 1fr) 15rem; gap:3rem; align-items:start; }
  .with-toc .prose{ margin-inline:0; }
  .with-toc .toc{ position:sticky; inset-block-start:5.5rem; margin-block:0; grid-row:1; grid-column:2; }
  .with-toc .toc > summary{ pointer-events:none; }
  .with-toc .toc > summary svg{ display:none; }
}

/* ---------- قدم‌ها ---------- */
.step{ position:relative; padding-inline-start:3.25rem; margin-block:2.25rem; }
.step-num{
  position:absolute; inset-inline-start:0; inset-block-start:.15rem;
  width:2.25rem; height:2.25rem; border-radius:var(--r-full);
  display:grid; place-items:center;
  background:var(--primary-subtle); color:var(--chip-text);
  font-weight:800; font-size:1rem; font-variant-numeric:tabular-nums;
}
.step > h3{ margin-block-start:0; }
.step > :last-child{ margin-block-end:0; }

/* ---------- تصویرها ----------
   width/height روی خود <img> جا را از قبل نگه می‌دارد (بدون پرش صفحه). */
.prose figure, .shotfig{ margin:1.75rem 0; }
.shotfig img{
  display:block; width:min(100%, 280px); height:auto; margin-inline:auto;
  border-radius:var(--r-lg); border:1px solid var(--border);
  background:var(--bg-subtle); box-shadow:var(--shadow-md);
}
figcaption{ font-size:.875rem; color:var(--text-muted); margin-block-start:.75rem; text-align:center; }

/* ---------- جعبه‌ها ---------- */
.callout{
  border:1px solid var(--border); border-inline-start:3px solid var(--border-strong);
  background:var(--bg-subtle); border-radius:var(--r-sm);
  padding:1rem 1.25rem; margin-block:1.75rem;
}
.callout > :last-child{ margin-block-end:0; }
.callout-title{ display:flex; align-items:center; gap:.5rem; font-weight:700; margin-block-end:.5rem; }
.callout-title svg{ width:1.25rem; height:1.25rem; flex:none; }
.callout--safe{ border-inline-start-color:var(--primary); background:var(--primary-subtle); border-color:var(--primary-border); }
.callout--safe .callout-title{ color:var(--chip-text); }
.callout--warn{ border-inline-start-color:var(--warning); }
.callout--warn .callout-title{ color:var(--warning); }

/* ---------- جدول عیب‌یابی ----------
   زیر ۵۶۰ پیکسل هر ردیف کارت می‌شود تا صفحه اسکرول افقی نخورد. */
.table-wrap{ overflow-x:auto; margin-block:1.75rem; }
table.data{ width:100%; border-collapse:collapse; font-size:.9375rem; }
table.data th, table.data td{
  text-align:start; padding:.75rem .875rem;
  border-block-end:1px solid var(--border); vertical-align:top; line-height:1.7;
}
table.data thead th{ font-weight:700; background:var(--bg-subtle); white-space:nowrap; }
table.data tbody tr:last-child td{ border-block-end:0; }

@media (max-width:560px){
  /* display:block لازم است: overflow روی table-header-group کار نمی‌کند و
     سرستون پنهان ۱۴ پیکسل صفحه را در ۳۲۰ پیکسل به پهلو می‌برد. */
  .table-wrap{ position:relative; }
  table.data thead{ display:block; position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  table.data tr{ display:block; border:1px solid var(--border); border-radius:var(--r-sm); padding:.875rem; margin-block-end:.875rem; }
  table.data td{ display:block; border:0; padding:.2rem 0; }
  table.data td::before{ content:attr(data-label) "؛ "; font-weight:700; color:var(--text-muted); }
}

/* ---------- سوال‌های پرتکرار ---------- */
.faq{ border-block-start:1px solid var(--border); }
.faq details{ border-block-end:1px solid var(--border); }
.faq summary{
  cursor:pointer; list-style:none; font-weight:700;
  padding-block:1rem; min-height:44px;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary svg{ width:1.25rem; height:1.25rem; flex:none; color:var(--text-muted); transition:transform .2s var(--ease); }
.faq details[open] summary svg{ transform:rotate(45deg); }
.faq details > p{ padding-block-end:1rem; margin-block-end:0; color:var(--text-muted); }

/* ---------- فراخوان ---------- */
.cta-card{
  background:var(--primary-subtle); border:1px solid var(--primary-border);
  border-radius:var(--r-lg); padding:1.75rem; margin-block:2.5rem; text-align:center;
}
.cta-card h2, .cta-card h3{ margin-block:0 .5rem; font-size:1.25rem; }
.cta-card p{ color:var(--text-muted); margin-block-end:1.25rem; }
.cta-card .btn, .actions .btn{ width:auto; }
.actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; }

/* ---------- فهرست راهنماها ---------- */
.posts{ list-style:none; padding:0; margin:2rem 0; display:grid; gap:1rem; }
.post{
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:1.5rem; box-shadow:var(--shadow-sm);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.post:hover{ border-color:var(--primary-border); box-shadow:var(--shadow-md); }
.post__t{ display:block; font-weight:800; font-size:1.1875rem; line-height:1.6; margin-block-end:.4rem; }
.post__d{ display:block; color:var(--text-muted); font-size:.9375rem; line-height:1.8; }
.post__m{ display:block; color:var(--text-muted); font-size:.8125rem; margin-block-start:.75rem; }

@media (prefers-reduced-motion:reduce){
  .readbar{ display:none; }
}