/* اطلس عمومی — چیدمانِ مخصوصِ همین صفحه.
   مقدارها از پروتوتایپ (نمای «اطلس»)، خوانده‌شده با getComputedStyle:
     نوار      ‎13px 26px‎، gap ۱۸، ارتفاع ۶۳
     جست‌وجو   ۵۲۰×۳۶، ‎9px 16px‎، شعاع ۹۹۹، زمینه ‎oklch(0.98 0.003 85)‎
     دکمهٔ ورود ۳۴ بلند، ‎8px 15px‎، شعاع ۸، خطی
     بدنه      شبکهٔ ‎352px 1fr‎
     سرِ ستون  ‎18px 20px 14px‎، شمار ۱۷/۷۰۰
     سطر       ‎15px 20px‎، gap ۱۳، مربع ۴۴ با شعاع ۹
     کارتِ انتخاب ۲۹۶ عرض، ‎18px 20px‎، شعاع ۱۲، gap ۹ */

/* ★ ارتفاعِ صفحه روی موبایلِ واقعی.
   `height: 100%` روی مرورگرِ گوشی به بلندترین حالتِ دیدگاه حساب می‌شود —
   یعنی وقتی نوار نشانی و نوار پایینِ مرورگر بازند، ته صفحه *زیرِ* آن‌ها
   می‌رود. و چون اینجا `overflow: hidden` است، اسکرول هم نمی‌شود تا بیرونش
   بکشی. نتیجه: کلید «فهرست / نقشه» که پایینِ ستون است، روی گوشی دیده
   نمی‌شود و بخشی از فهرست هم بریده می‌ماند.

   `dvh` همان دیدگاهِ *پویا* است و با باز و بستهٔ نوارها بالا و پایین
   می‌رود. خطِ اولِ `100%` برای مرورگرهای قدیمی می‌ماند؛ دومی هرجا پشتیبانی
   شود جایش را می‌گیرد. در Playwright دیده نمی‌شد چون آنجا نوار مرورگر
   وجود ندارد. */
.at-body { height: 100%; height: 100dvh;
           overflow: hidden; display: flex; flex-direction: column; }

/* ── نوار ─────────────────────────────────────────────────────────── */
.at-bar { padding: 13px 26px; gap: 18px; flex: none; z-index: 6; }
.at-search { flex: 0 1 520px; min-width: 120px; }
.at-search input {
  width: 100%; height: 36px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--n-100); color: var(--ink);
  font: inherit; font-size: 13.5px;
}
.at-search input::placeholder { color: var(--ink-3); }
.at-search input:focus { outline: 0; border-color: var(--a-500); box-shadow: var(--ring);
                         background: var(--surface); }
.at-bar .btn-sm { height: 34px; padding-inline: 15px; font-size: 13.5px; font-weight: 500; }

/* ── بدنه ─────────────────────────────────────────────────────────── */
.at-grid { flex: 1; display: grid; grid-template-columns: 352px minmax(0, 1fr);
           min-height: 0; }
.at-side { display: flex; flex-direction: column; min-height: 0;
           background: var(--surface); border-inline-end: 1px solid var(--line); }

/* ستونِ نتایج لنگرِ پنلِ شناورِ فیلتر است */
.at-side { position: relative; }

.at-head { flex: none; padding: 18px 20px 14px; }
.at-count { display: flex; align-items: center; justify-content: space-between;
            gap: 10px; }
.at-count span { font-size: 17px; font-weight: 700; }
.at-count small { display: block; font-size: 12.5px; color: var(--ink-3); }

/* دکمهٔ فیلتر: کنشِ اصلیِ این ستون، پس شکلِ دکمه دارد نه تراشه */
.at-fbtn {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: var(--h-sm); padding-inline: 14px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: var(--surface); color: var(--n-800);
  font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.at-fbtn:hover { border-color: var(--a-700); color: var(--a-700); }
.at-fbtn[aria-expanded="true"] { border-color: var(--a-700); color: var(--a-700);
                                 background: var(--a-100); }
.at-fbtn b { min-width: 19px; height: 19px; padding-inline: 5px;
             display: inline-flex; align-items: center; justify-content: center;
             border-radius: var(--r-pill); background: var(--a-700);
             color: var(--surface); font-size: 11.5px; }

.at-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.at-chips:not(:empty) { margin-block-start: 10px; }
.at-chips .chip { padding: 5px 11px; font-size: 12.5px; font-weight: 500; }

/* پنل فیلتر — شناور روی فهرست، با اسکرولِ خودش.
   ★ اگر جزو جریان باشد، باز شدنش فهرست را پایین می‌راند و کاربر نتیجهٔ
   کارِ خودش را نمی‌بیند. الگوی جاافتادهٔ دایرکتوری‌های نقشه‌دار همین است. */
.at-filters {
  position: absolute; inset-inline: 12px; inset-block-start: 78px; z-index: 6;
  display: grid; gap: var(--s3);
  max-height: min(70vh, 560px); overflow: auto;
  padding: 16px; border-radius: var(--r-lg);
  border: 1px solid var(--line-2); background: var(--surface);
  box-shadow: var(--shadow-md);
}
.at-fbtns { display: flex; gap: var(--s2); position: sticky; inset-block-end: -16px;
            padding-block-start: 4px; background: var(--surface); }
.at-fbtns .btn { flex: 1; }

/* ── فهرست نتایج ──────────────────────────────────────────────────── */
.at-list { flex: 1; min-height: 0; overflow: auto; }

/* ردیف و کشویش با هم یک واحدند: مرزِ جداکننده روی *ظرف* است نه روی دکمه،
   وگرنه وقتی کشو باز می‌شود یک خط وسطِ کارت می‌افتد. */
.at-item { border-block-end: 1px solid var(--line); }
.at-item:last-child { border-block-end: 0; }
.at-item.on { background: var(--a-100); }

.at-row {
  display: flex; align-items: flex-start; gap: 13px; width: 100%;
  padding: 15px 20px; text-align: start; cursor: pointer;
  border: 0; border-inline-start: 3px solid transparent;
  background: none; font: inherit; color: inherit;
}
.at-row:hover { background: var(--n-100); }
.at-item.on .at-row:hover { background: none; }
.at-row[aria-current="true"] { border-inline-start-color: var(--a-700); }

/* پیکانِ کوچک که می‌گوید این ردیف باز می‌شود */
.at-caret { flex: none; align-self: center; width: 17px; height: 17px;
            color: var(--n-500); transition: transform .18s ease; }
.at-item.on .at-caret { transform: rotate(-90deg); color: var(--a-700); }

/* کشوی زیرِ ردیف — همان‌جا که کلیک شده، نه شناور روی نقشه */
.at-drawer {
  display: grid; gap: 10px; justify-items: start;
  padding: 0 20px 15px;
  border-inline-start: 3px solid var(--a-700);
  animation: at-slide .18s ease-out;
}
.at-dfacts { display: grid; grid-template-columns: auto minmax(0, 1fr);
             gap: 4px 10px; margin: 0; width: 100%; }
.at-dfacts > div { display: contents; }
.at-dfacts dt { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.at-dfacts dd { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink); }
.at-drawer .btn { width: 100%; }
@keyframes at-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .at-drawer { animation: none; }
  .at-caret { transition: none; }
}
.at-logo { width: 44px; height: 44px; flex: none; border-radius: 9px;
           background: var(--n-200);
           display: flex; align-items: center; justify-content: center;
           font-size: 10px; color: var(--ink-3); overflow: hidden; }
.at-logo i { width: 12px; height: 12px; border-radius: 999px; }
.at-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.at-nm b { font-size: 15.5px; font-weight: 700; line-height: 1.35; }
.at-nm .meta { font-size: 13px; color: var(--ink-3); line-height: 1.4; }
.at-nm .prod { font-size: 13px; color: var(--ink-2); line-height: 1.4;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── پروفایل یک واحد ──────────────────────────────────────────────── */
.at-detail { flex: 1; min-height: 0; overflow: auto; padding: 18px 20px 28px; }
.at-detail .back { margin-block-end: 14px; }
.at-detail h2 { font-size: 22px; font-weight: 900; line-height: 1.3; }
.at-detail .sub { display: block; margin-block-start: 4px; font-size: 13.5px;
                  color: var(--ink-3); }
.at-dl { display: grid; gap: 12px; margin-block-start: 20px; }
.at-dl > div { display: grid; gap: 2px; }
.at-dl dt { font-size: 12.5px; color: var(--ink-3); }
.at-dl dd { margin: 0; font-size: 14.5px; line-height: 1.7; }

/* ── نقشه ─────────────────────────────────────────────────────────── */
/* ★ رنگِ ثابتِ زیرِ نقشه در نمای تیره سفید می‌زد. توکن، هر دو نما را
   می‌پوشاند — و این تنها جایی است که رنگش را از --a-100 می‌گیرد. */
.at-map { position: relative; min-height: 0; background: var(--a-100); }
#map { position: absolute; inset: 0; }

/* ★ کنترل نقشه در پروتوتایپ گوشهٔ **چپِ فیزیکی** است، نه سمتِ شروعِ متن.
   با `inset-inline-start` در راست‌به‌چپ می‌رفت کنارِ ستون نتایج و همان‌جا
   با کارتِ انتخاب و فهرست تداخل می‌کرد. اینجا عمداً فیزیکی است. */
.at-mapctl { position: absolute; inset-block-start: 14px; left: 14px;
             z-index: 3; display: flex; flex-direction: column;
             align-items: flex-start; gap: 8px; }
.at-zoom { display: flex; flex-direction: column;
           background: var(--surface); border: 1px solid var(--line);
           border-radius: 9px; overflow: hidden; }
.at-zoom button { width: 44px; height: 36px; border: 0; background: none;
                  font: inherit; font-size: 17px; color: var(--ink-2); cursor: pointer; }
.at-zoom button + button { border-block-start: 1px solid var(--line); }
.at-zoom button:hover { background: var(--n-100); }
/* کلید نمایش محدودهٔ شهرک‌ها — داخل پنل فیلتر، نه روی نقشه */
.at-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr);
             gap: 3px 10px; align-items: center; cursor: pointer;
             padding: 10px 12px; border-radius: var(--r-md);
             background: var(--n-200); }
.at-toggle input { width: 17px; height: 17px; accent-color: var(--a-700);
                   grid-row: 1 / span 2; }
.at-toggle span { font-size: 13.5px; font-weight: 600; }
.at-toggle small { font-size: 12px; color: var(--ink-3); grid-column: 2; }
.at-toggle small:empty { display: none; }

/* پنجرهٔ کوچکِ روی شهرک */
.at-pop .maplibregl-popup-content { padding: 11px 14px; border-radius: var(--r);
  background: var(--surface); color: var(--ink);
  font-family: inherit; display: grid; gap: 3px; }
.at-pop .maplibregl-popup-content b { font-size: 14px; }
.at-pop .maplibregl-popup-content span { font-size: 12.5px; color: var(--ink-3); }
.at-pop .maplibregl-popup-tip { border-top-color: var(--surface);
                                border-bottom-color: var(--surface); }

.at-tilewarn { position: absolute; inset-block-start: 14px; right: 14px;
               z-index: 3; padding: 9px 13px; border-radius: var(--r);
               background: var(--warn-soft); color: var(--warn); font-size: 12.5px; }

/* کلید موبایل — در دسکتاپ نیست */
.at-mtabs { display: none; }

/* ── سه عرض ───────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .at-grid { grid-template-columns: 300px minmax(0, 1fr); }
  .at-bar { padding: 11px 16px; gap: 12px; }
  .at-search { flex: 1 1 100%; order: 3; }
}

@media (max-width: 768px) {
  /* ★ در موبایل، فهرست و نقشه با هم جا نمی‌شوند. یکی در یک زمان، با کلیدِ
     پایین — نه دو ستونِ باریکِ بی‌استفاده. */
  .at-grid { grid-template-columns: minmax(0, 1fr); }
  .at-side { border-inline-end: 0; }
  .at-map { display: none; }
  .at-body[data-m="map"] .at-side { display: none; }
  .at-body[data-m="map"] .at-map { display: block; }

  .at-mtabs { display: flex; flex: none; gap: 4px; padding: 8px 14px;
              background: var(--surface); border-block-start: 1px solid var(--line); }
  .at-mtabs button { flex: 1; min-height: 44px; border: 0; border-radius: var(--r);
                     background: none; font: inherit; font-size: 14.5px;
                     font-weight: 500; color: var(--ink-2); cursor: pointer; }
  .at-mtabs button.on { background: var(--a-100); color: var(--a-900); font-weight: 700; }

  .at-head { padding: 14px 16px 12px; }
  .at-row { padding: 14px 16px; }
  .at-drawer { padding: 0 16px 14px; }
  .at-filters { padding-inline: 16px; }
}

/* مکان‌های یک شرکت در کشوی فهرست — فقط وقتی بیش از یکی باشد */
.at-sites { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.at-sites li { display: grid; gap: 2px; padding-inline-start: 12px; position: relative;
               font-size: 12.5px; line-height: 1.7; color: var(--ink-3); }
.at-sites li::before { content: ''; position: absolute; inset-inline-start: 0;
                       inset-block-start: 7px; width: 6px; height: 6px;
                       border: 1.5px solid var(--a-700); border-radius: var(--r-pill); }
.at-sites li.is-main::before { background: var(--a-700); }
.at-sites b { font-size: 13px; font-weight: 700; color: var(--ink); }

/* ★ سطرِ مکان حالا دکمه است — و باید *دیده شود* که دکمه است، وگرنه کاربر
   نمی‌فهمد می‌تواند رویش کلیک کند و همان مشکلِ قبلی سرِ جایش می‌ماند:
   «سه کارخانه می‌بینم ولی نمی‌توانم بروم سراغ دومی.» */
.at-sites li > button {
  display: grid; gap: 2px; width: 100%; padding: 4px 6px;
  margin: -4px -6px;                 /* ناحیهٔ کلیک بزرگ‌تر، بدون جابه‌جاییِ متن */
  grid-template-columns: 1fr auto; align-items: center;
  border: 0; border-radius: var(--r-md); background: none;
  font: inherit; color: inherit; text-align: start; cursor: pointer;
}
.at-sites li > button b, .at-sites li > button span { grid-column: 1; }
.at-sites li > button:hover { background: var(--a-100); }
.at-sites li > button:focus-visible { outline: 2px solid var(--a-700); outline-offset: 1px; }
.at-sites .go { grid-column: 2; grid-row: 1 / span 2; align-self: center;
                width: 15px; height: 15px; flex: none; color: var(--a-700); }
/* ★ مکانی که همین حالا نقشه رویش نشسته. ‎--a-100‎ بود و روی کشو — که خودش
   ته‌رنگِ همان خانواده را دارد — اصلاً دیده نمی‌شد. یک درجه پررنگ‌تر، به‌علاوهٔ
   نوارِ کنار، تا از یک نگاه معلوم باشد کجاییم. */
.at-sites li.at > button { background: var(--a-200); }
.at-sites li.at > button b { color: var(--a-900); }
.at-sites li.at::before { background: var(--a-700); box-shadow: 0 0 0 3px var(--a-200); }

/* ★ عنوان و یک‌سطر توضیحِ ستونِ نتایج. تا پیش از این صفحه هیچ h1 نداشت —
   نه برای موتور جست‌وجو معلوم بود دربارهٔ چیست، نه برای صفحه‌خوان. کوچک
   نگه داشته می‌شود چون کارِ این صفحه جست‌وجو است نه خواندن؛ ولی *دیده*
   می‌شود، وگرنه متنی که فقط خزنده ببیند پنهان‌کاری است. */
.at-h1 { font-size: 15px; font-weight: 700; line-height: 1.4;
         color: var(--ink); margin-block-end: 2px; }
.at-lead { font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
           margin-block-end: var(--s3); }