/* components/prose.css — بخشی از سیستم سبک سایت عمومی پلاس */
.sub{display:flex;gap:10px;flex-wrap:wrap;margin-block-start:26px;max-inline-size:520px}
.sub input{flex:1 1 240px;font-family:var(--font-body);font-size:14px;color:#fff;
padding:15px 20px;border-radius:var(--btn-radius);
border:1px solid var(--line-strong);background:rgba(11,18,38,.6)}
.sub input::placeholder{color:#7E93B0}
.sub input:focus-visible{border-color:var(--accent)}
.sub-note{margin-block-start:12px;font-size:12px;color:#7E93B0}
.readbar{position:fixed;inset-block-start:0;inset-inline:0;z-index:90;block-size:3px;
background:transparent;pointer-events:none}
.readbar i{display:block;block-size:100%;inline-size:0;
background:linear-gradient(90deg,var(--teal-600),var(--accent))}
.prose{max-inline-size:68ch}
.prose > p{font-size:15px;line-height:2.3;color:var(--fg-muted);margin-block-end:18px}
.prose p.lead{font-size:17px;line-height:2.2;color:var(--fg);font-weight:500}
.prose h2{font-family:var(--font-display);font-size:clamp(19px,2.3vw,26px);font-weight:900;
color:var(--fg);line-height:1.6;margin-block:clamp(34px,4vw,46px) 14px;scroll-margin-block-start:120px}
.prose h3{font-family:var(--font-display);font-size:17px;font-weight:900;color:var(--fg);
line-height:1.7;margin-block:26px 12px;scroll-margin-block-start:120px}
.prose ul,.prose ol{margin-block:6px 20px;padding-inline-start:0;list-style:none}
.prose li{position:relative;padding-inline-start:22px;font-size:14.5px;line-height:2.2;
color:var(--fg-muted);margin-block-end:8px}
.prose li::before{content:"";position:absolute;top:14px;right:0;
inline-size:7px;block-size:7px;border-radius:2px;background:var(--teal-600);opacity:.7}
.prose blockquote{margin-block:26px;padding:22px 26px;border-radius:var(--card-radius);
border-inline-start:0;border:1px solid color-mix(in oklab,var(--teal-600) 22%,transparent);
background:color-mix(in oklab,var(--teal-600) 6%,transparent)}
.prose blockquote p{font-family:var(--font-display);font-size:clamp(15px,1.9vw,18px);
font-weight:800;line-height:2.05;color:var(--fg);margin:0}
.prose figure{margin-block:30px}
.prose figure img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prose figcaption{margin-block-start:11px;font-size:12px;color:var(--fg-muted);text-align:center}
.prose a{text-decoration:underline;text-underline-offset:4px}
/* ============================================================
بلاکهای کنترلشده ویرایشگر مقاله
این کلاسها را نوار ابزار پنل تولید میکند (لید، نکته، هشدار، باکس لینک،
قاب تصویر، ویدیو، صوت، پیوست) و فهرست مجازشان در
apps/contents/security.py::SAFE_CLASS_NAMES است.
تا پیش از این استایلشان فقط در static/css/main.css زیر .article-content
وجود داشت؛ ولی سایت بازطراحیشده نه آن فایل را لود میکند و نه آن کلاس را
دارد — بدنه مقاله .prose است. نتیجه: هر پنج بلاک روی سایت دقیقا شبیه یک
پاراگراف ساده دیده میشدند. اگر روزی نام کلاسی اینجا اضافه شد، باید در
SAFE_CLASS_NAMES هم باشد وگرنه سنیتایزر حذفش میکند.
============================================================ */
.prose .article-lead{font-size:17px;line-height:2.2;color:var(--fg);font-weight:600;
margin-block-end:22px;padding-inline-start:16px;
border-inline-start:3px solid var(--teal-600)}
.prose .article-text-large{font-size:16.5px;line-height:2.25}
.prose .article-text-small{font-size:13.5px;line-height:2.1}
.prose .article-note,
.prose .article-warning{margin-block:26px;padding:18px 22px;border-radius:var(--card-radius);
font-size:14.5px;line-height:2.15;color:var(--fg)}
.prose .article-note > :last-child,
.prose .article-warning > :last-child{margin-block-end:0}
.prose .article-note{border:1px solid color-mix(in oklab,var(--teal-600) 30%,transparent);
background:color-mix(in oklab,var(--teal-600) 8%,transparent)}
.prose .article-warning{border:1px solid color-mix(in oklab,var(--gold-400) 42%,transparent);
background:color-mix(in oklab,var(--gold-400) 12%,transparent)}
.prose .article-cta{display:inline-block;margin-block:22px;padding:13px 26px;
border-radius:var(--btn-radius,14px);text-decoration:none;font-weight:800;font-size:14.5px;
color:var(--navy-950);background:var(--gold-400);
transition:background-color var(--dur-fast),transform var(--dur-fast)}
.prose .article-cta:hover{background:var(--gold-300);transform:translateY(-1px)}
.prose .article-attachment{display:inline-block;margin-block:6px;padding:11px 18px;
border-radius:12px;text-decoration:none;font-size:13.5px;font-weight:700;color:var(--fg);
border:1px solid var(--line-strong);background:var(--surface)}
.prose .article-attachment:hover{border-color:var(--teal-600)}
.prose .article-figure--wide{max-inline-size:100%}
.prose .article-figure--medium{max-inline-size:760px}
.prose .article-figure--small{max-inline-size:480px}
/* ---------- ویدیو ---------- */
.prose .article-video{margin-block:34px}
.prose .article-video iframe,
.prose .article-video video{inline-size:100%;aspect-ratio:16/9;block-size:auto;display:block;
border:0;border-radius:var(--card-radius);background:#000}
/* ============================================================
عناصری که خود CKEditor تولید میکند
اینها با بلاکهای کنترلشده بالا فرق دارند: کلاس یا تگیاند که ویرایشگر
خودش میسازد (دکمه تصویر کناری، بلوک کد، جداکننده، عنوان چهار) و تا امروز
هیچ استایلی روی سایت نداشتند.
خطرناکترینشان ![]()
تنها بود: بدون max-width از ستون متن بیرون میزد و
صفحه را افقی میشکست. تصویر داخل این مشکل را نداشت چون
`.prose figure img` عرض ۱۰۰٪ میدهد — ولی ویرایشگر همیشه figure نمیسازد.
============================================================ */
.prose img{max-inline-size:100%;block-size:auto;display:block;border-radius:12px}
.prose .image-inline img,
.prose span.image-inline img{display:inline-block;vertical-align:text-bottom;
margin-inline:3px;border-radius:6px}
/* تصویر کناری: متن دورش میپیچد. در RTL سمت چپ مینشیند. */
.prose .image-style-side{float:inline-end;max-inline-size:48%;
margin-block:8px 18px;margin-inline-start:24px}
@media (max-width:640px){
.prose .image-style-side{float:none;max-inline-size:100%;margin-inline-start:0}
}
.prose .image-style-align-left{float:inline-start;max-inline-size:48%;
margin-block:8px 18px;margin-inline-end:24px}
.prose .image-style-align-center{margin-inline:auto}
/* عنوان چهار — همخانواده h2 و h3 بالا، فقط کوچکتر */
.prose h4{font-family:var(--font-display);font-size:15.5px;font-weight:800;
color:var(--fg);line-height:1.7;margin-block:22px 10px;
scroll-margin-block-start:120px}
/* جداکننده */
.prose hr{border:0;block-size:1px;background:var(--line-strong);
margin-block:34px;opacity:.9}
/* بلوک کد — عمدا LTR، چون کد فارسی نیست و در RTL بههم میریزد */
.prose pre{direction:ltr;text-align:left;margin-block:26px;padding:16px 18px;
border-radius:12px;border:1px solid var(--line);background:var(--surface);
overflow-x:auto;font-size:13px;line-height:1.9}
.prose pre code{background:none;padding:0;border:0;font-size:inherit}
.prose code{direction:ltr;unicode-bidi:embed;padding:2px 6px;border-radius:6px;
background:color-mix(in oklab,var(--teal-600) 12%,transparent);
font-size:.92em}
/* فهرست تیکدار ویرایشگر */
.prose .todo-list{list-style:none;padding-inline-start:0}
.prose .todo-list li{padding-inline-start:0}
.prose .todo-list li::before{content:none}
.prose .todo-list__label{display:flex;align-items:flex-start;gap:9px}
.prose .todo-list__label input[type=checkbox]{margin-block-start:7px;flex:0 0 auto}
/* ---------- جدول ----------
جدول هم مثل بلاکهای بالا هیچ استایلی نداشت و روی سایت به شکل چند ستون متنِ
شناور دیده میشد: بدون خط، بدون padding و بدون تمایز سرستون. */
.prose table{inline-size:100%;margin-block:30px;border-collapse:collapse;
font-size:14px;line-height:2;display:block;overflow-x:auto}
.prose table caption{caption-side:top;margin-block-end:12px;font-size:12.5px;
color:var(--fg-muted);text-align:start}
.prose thead th{padding:12px 14px;text-align:start;font-weight:800;color:var(--fg);
background:color-mix(in oklab,var(--teal-600) 14%,transparent);
border-block-end:1px solid var(--line-strong)}
.prose tbody td{padding:12px 14px;text-align:start;color:var(--fg-muted);
border-block-end:1px solid var(--line);vertical-align:top}
.prose tbody tr:last-child td{border-block-end:0}
/* ---------- صوت و پادکست ---------- */
.prose .article-audio{margin-block:34px;padding:18px 20px;border-radius:var(--card-radius);
border:1px solid var(--line-strong);background:var(--surface)}
.prose .article-audio audio{inline-size:100%;display:block;border-radius:12px}
/* پخشکننده سرویس پادکست کوتاه است و نباید نسبت ۱۶:۹ ویدیو را بگیرد. */
.prose .article-audio iframe{inline-size:100%;block-size:180px;aspect-ratio:auto;
display:block;border:0;border-radius:12px;background:transparent}
.prose .article-audio figcaption{margin-block-start:12px}
.toc{padding:clamp(16px,2vw,20px);border:1px solid var(--line);border-radius:var(--card-radius);
background:var(--surface);margin-block-end:14px}
.toc ol,.toc ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.toc a{display:block;position:relative;font-size:12.5px;line-height:1.9;text-decoration:none;
color:var(--fg-muted);padding:7px 14px 7px 8px;border-radius:10px;
transition:color var(--dur-fast),background-color var(--dur-fast)}
.toc a::before{content:"";position:absolute;inset-block:8px;inset-inline-end:0;
inline-size:2px;border-radius:2px;background:transparent;transition:background-color var(--dur-fast)}
.toc a:hover{color:var(--fg);background:var(--paper-200)}
.toc a.on{color:var(--teal-600);font-weight:800}
.toc a.on::before{background:var(--teal-600)}
.toc li.lv3 a{padding-inline-start:22px;font-size:12px}
.sidecard{padding:clamp(16px,2vw,20px);border:1px solid var(--line);
border-radius:var(--card-radius);background:var(--surface);margin-block-end:14px}
.doc-meta{list-style:none;display:flex;flex-wrap:wrap;gap:12px 32px;
margin-block-start:clamp(22px,3vw,32px)}
.doc-meta li{display:flex;flex-direction:column;gap:5px}
.doc-meta span{font-size:11px;color:#7E93B0}
.doc-meta b{font-family:var(--font-display);font-size:14px;font-weight:800;color:#fff}
.doc-prose{max-inline-size:72ch}
.doc-prose h2{counter-increment:none}
.doc-prose table{inline-size:100%;margin-block:10px 26px;font-size:13.5px;
border-collapse:separate;border-spacing:0;border:1px solid var(--line);
border-radius:16px;overflow:hidden;background:var(--surface)}
.doc-prose th,.doc-prose td{padding:13px 16px;text-align:start;line-height:1.95;
border-block-end:1px solid var(--line);vertical-align:top}
.doc-prose thead th{font-family:var(--font-display);font-weight:800;font-size:12.5px;
color:var(--fg);background:var(--paper-200)}
.doc-prose td{color:var(--fg-muted)}
.doc-prose td:first-child{color:var(--fg);font-weight:600}
.doc-prose tbody tr:last-child th,.doc-prose tbody tr:last-child td{border-block-end:0}
.doc-prose .note{margin-block:10px 26px;padding:16px 18px;border-radius:14px;
border:1px solid var(--line);background:var(--paper-200)}
.doc-prose .note p{margin:0;font-size:13.5px;line-height:2.15;color:var(--fg-muted)}
@media (max-width:640px){
.doc-prose table{display:block;overflow-x:auto;white-space:nowrap}
.doc-prose td,.doc-prose th{white-space:normal;min-inline-size:9rem}
}
.doc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;
flex-wrap:wrap;margin-block-start:clamp(28px,3.6vw,44px);
padding-block-start:clamp(20px,2.6vw,28px);border-block-start:1px solid var(--line)}
.doc-foot p{font-size:12.5px;line-height:2;color:var(--fg-muted);max-inline-size:52ch}
.doclist{list-style:none;display:flex;flex-direction:column;gap:2px}
.doclist a{display:block;padding:10px 12px;border-radius:11px;text-decoration:none;
font-size:13px;color:var(--fg-muted);
transition:color var(--dur-fast),background-color var(--dur-fast)}
.doclist a:hover{color:var(--teal-600);background:var(--paper-200)}
.doclist a.on{font-family:var(--font-display);font-weight:800;color:var(--teal-600);
background:color-mix(in oklab,var(--teal-600) 9%,transparent)}
.sc-help .sc-p{margin-block-start:10px;font-size:12.5px;line-height:2;color:var(--fg-muted)}
.sc-help .btn{margin-block-start:14px}
@media print{
.prose{max-inline-size:none}
/* تیترها از پایین برگه جدا نیفتند و جدولها وسط نشکنند */
.prose h2,.prose h3{break-after:avoid-page}
.prose table,.prose figure,.prose blockquote{break-inside:avoid-page}
.doc-meta{gap:8px 22px}
.doc-meta span{color:#555!important}
.doc-meta b{color:#000!important}
}