/*
 * module: page.dashboard.style.01
 * responsibility: page-local presentation extracted from dashboard.html.
 * inputs/outputs: CSS cascade for this route only.
 * dependencies: assets/app.css design tokens and RTL logical properties.
 * sensitive points: desktop/mobile layout, contrast, overflow, typography.
 * related: site/app/dashboard.html.
 */
/* سطح سه («جزئیات بازار») جمع‌شونده است. استایلش این‌جاست نه در app.css:
   تنها صفحه‌ای که این الگو را دارد همین است و شیوه‌نامه مشترک را برای یک
   مصرف‌کننده سنگین نمی‌کنیم. هیچ رنگ تازه‌ای ساخته نشده؛ همه از متغیرهای تم. */
.lvl3{margin-top:1.4rem}
.lvl3>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--r,12px);
  background:var(--card,transparent);font-weight:700;font-size:.95rem}
.lvl3>summary::-webkit-details-marker{display:none}
.lvl3>summary:hover{border-color:var(--mint)}
.lvl3>summary:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.lvl3>summary .cue{margin-inline-start:auto;font-weight:400;font-size:.8rem;color:var(--sub)}
.lvl3>summary .cue::after{content:'▾';margin-inline-start:.45rem;display:inline-block}
.lvl3[open]>summary .cue::after{content:'▴'}
.lvl3>.lvl3bd{margin-top:1rem}
/* هدف لمس ۲۴+ روی صفحه باریک، طبق قاعده موبایل سایت */
@media (max-width:768px){ .lvl3>summary{padding:1rem;min-height:3rem} }
/* بلوک «فشار عرضه و تقاضا» داخل تب دفتر سفارش می‌نشیند، پس قاب کارتِ خودش
   برداشته می‌شود تا کارت‌تودرکارت دیده نشود. خود بلوک دست‌نخورده است. */
#mpHost.blkgrid{display:block}   /* یک بلوک تنها، پس شبکه دوازده‌ستونی لازم نیست */
#mpHost .blk{border:0;background:none;box-shadow:none;margin:0;padding:0}
#mpHost .blk>.hd{display:none}
#mpHost .blk>.bd{padding:0}
/* تب‌های داخل کارت (دفتر سفارش و رویدادها) */
.pane{display:none}
.pane.on{display:block}
/* گزارش هوشمند حالا تمام‌عرض است و هر بندش یک جمله کوتاه؛ روی صفحه پهن یک
   ستون یعنی نیمی از عرض خالی و کارتی بلندتر از لازم. دو ستون، بلندی کارت را
   تقریبا نصف می‌کند و «نبض» را نزدیک‌تر به یک صفحه‌نمایش نگه می‌دارد.
   break-inside لازم است وگرنه یک بند از وسط بین دو ستون می‌شکند. */
@media (min-width:1100px){
  #narrate{columns:2;column-gap:2rem}
  #narrate .ai-line{break-inside:avoid;-webkit-column-break-inside:avoid}
  #narrate .ai-line:last-child{border-bottom:1px dashed var(--line)}
}