/* Grand Millennium Kobuleti — yalnız bu demoya xas stillər.

   Birinci mərhələdə səhifə iki sütundur: səhnə + yan panel. Axın qatları
   (stack, plitə, mənzil kartı) hələ yoxdur — onlar flow.css-dən gələndə
   bura üçüncü sütun əlavə olunacaq (bax swiss.css). */

/* Axının üç vəziyyəti üç fərqli sütun bölgüsüdür:
     kompleks        səhnə + panel
     blok            sxem + səhnə + panel
     mərtəbə/mənzil  sxem + plan + panel  */
.kb-main {
  grid-template-columns: minmax(0, 1fr) 400px;
}
.kb-main:has(.stackbar:not([hidden])) {
  grid-template-columns: 210px minmax(0, 1fr) 400px;
}
.kb-main:has(.stackbar:not([hidden])) .stackbar { order: -1 }

/* Sxem sütununun altındakı "bütün kompleks" düyməsi. */
.stackbar .btn {
  margin: 0 12px 12px;
  justify-content: center;
}

/* ---------- mərtəbə planı ----------

   Plan BÜTÖV mərtəbədir və qanadlar çevrilib, yəni çərçivə geniş və
   yastıdır. Hündürlüyü məhdudlaşdırmasaq SVG sütunu doldurur və
   mənzil dilimləri nazik zolağa dönür. */
.plate-head {
  display: flex;
  gap: 8px;
  align-items: baseline;
  flex: none;
}
.plate-head b { font-family: var(--f-display); font-size: 15px }
.plate-head span { font-size: 12px; color: var(--muted) }

.plate.poly {
  max-height: 100%;
  max-width: 100%;
}

/* Dönmüş dilimlərin birləşmə yeri incə ağ cizgi kimi oxunsun. */
.plate.poly .plate-cell {
  stroke-width: .22;
  stroke-linejoin: round;
}

/* Nömrə dar dilimdə qonşunun üstünə çıxmasın. */
.plate.poly .plate-no {
  font-size: 2.1px;
}

/* ---------- dəhliz ----------

   `flow.css`-də dəhliz yalnız kəsik KONTURDUR: orada plan sadədir və
   bir cizgi kifayətdir. Burada isə mərtəbə bütöv binadır — iki qanad,
   mərkəzi korpus və aralarından keçən fasiləsiz dəhliz. Kontur bu
   uzunluqda itirdi: dilimlərin arasındakı boşluq "çatışmayan mənzil"
   kimi oxunurdu. Açıq dolğu onu sirkulyasiya zonasına çevirir. */
.plate.poly .plate-corridor {
  fill: var(--muted);
  fill-opacity: .1;
  stroke-opacity: .55;
}

/* ---------- gün vaxtı seçicisi ----------

   Seçici SƏHNƏNİN yox, BAŞLIĞIN içindədir. Başlıqda `position: relative`
   yoxdur, ona görə qlobal `position: absolute` onu səhifənin sol üst
   küncünə — "← Portfel" keçidinin üstünə — atır. Həlli yerləşməni
   sıfırlamaqdır: seçici başlığın öz sətrində axır. */
#timesw {
  position: static;
  margin-left: auto;
}

/* ---------- nişanlar ----------

   Beş kütlə var və üçü bir-birinə yaxındır (korpus, podium, otel). Nişan
   üç sətirlidir, ona görə ölçüsü bir az kiçildilir — yoxsa üstdən
   baxışda bir-birini örtürlər. */
#pins .pin {
  padding: 6px 10px;
  gap: 0;
}
#pins .pin b { font-size: 13px }
#pins .pin small { font-size: 10px }

/* Satışda olmayan kütlələr (podium, otel) solğun dayanır: alıcının gözü
   əvvəlcə mənzil satılan qüllələrə düşməlidir. */
#pins .pin:not(.hot) { opacity: .82 }

/* ---------- yan panel ---------- */

/* Mənzil tiplərinin sadəcə sahə siyahısı: `.rooms` otaq siyahısı üçün
   qurulub, burada iki sütun kifayətdir. */
.side .rooms li {
  justify-content: space-between;
}

/* Seçilmiş kütlə siyahıda da görünməlidir — model və panel eyni şeyi
   göstərir. */
.tlist button.sel {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* ---------- "mərtəbə sxemini aç" çağırışı ----------

   Siyahı əvvəl yalnız MƏLUMAT kimi oxunurdu: ad, mənzil sayı, mərtəbə.
   Heç nə demirdi ki, mərtəbə sxemi bir klik uzaqdadır — ilk sınaqda
   məhz bu addım görünmədi. İndi hər satılan kütlədə vurğu rəngində
   çağırış sətri var və hover-də ox irəli sürüşür. */
.tl-go {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-family: var(--f-mono);
  font-size: 11.5px;
  color: var(--accent);
}
.tl-go b {
  font-weight: 400;
  transition: transform .15s;
}
.tlist button:hover .tl-go b,
.tlist button:focus-visible .tl-go b {
  transform: translateX(3px);
}

/* Siyahının üstündəki izah — başlıqla siyahı arasında sıxılsın. */
.side .hint.tight {
  margin: 6px 0 -4px;
}

/* ---------- uyğunlaşma ---------- */

@media (max-width: 1100px) {
  .kb-main { grid-template-columns: minmax(0, 1fr) 340px }
  .kb-main:has(.stackbar:not([hidden])) {
    grid-template-columns: 160px minmax(0, 1fr) 340px;
  }
}

@media (max-width: 900px) {
  .kb-main,
  .kb-main:has(.stackbar:not([hidden])) { grid-template-columns: 1fr }
  .kb-main:has(.stackbar:not([hidden])) .stackbar { order: 0 }
  /* Telefonda nişan üç sətirlə kadrı doldurur — ölçü sətri gizlənir. */
  #pins .pin em { display: none }
}

/* ---------- mərtəbə sxemində AÇIQ zona ----------

   Mərkəzi korpusun 16–20-ci mərtəbələri mənzil deyil: orada sütunlar,
   göyərtə və hovuz var. Nə yaşıl (satışda), nə qırmızı (satılıb) —
   ikisi də yanlış olardı. Ona görə zolaq şəffaf qalır, yalnız kəsik
   kontur cızılır: sxemdə "burada mərtəbə var, amma mənzil yoxdur"
   oxunur. */
.stack-row.is-open rect {
  fill: none;
  stroke: var(--line);
  stroke-width: .06;
  stroke-dasharray: .4 .3;
  opacity: 1;
}
.stack-row.is-open .stack-left {
  fill: var(--muted);
  opacity: .9;
}
.stack-row.is-open { cursor: default }

/* Üç pillə 34 sətirdə oxunaqlı qalsın deyə zolaqlar flow.css-dəkindən
   bir az daha doymuşdur: 34 mərtəbəlik sütunda sətir hündürlüyü ~20 px
   olur və şəffaf sarı uzaqdan qırmızıdan seçilmirdi. Fərq rəngdə yox,
   DOYGUNLUQDADIR — ona görə sxem yenə üç rəngdədir. */
.stack-row.is-many rect { opacity: .86 }
.stack-row.is-few  rect { opacity: .95 }
.stack-row.is-none rect { opacity: .84 }
.stack-row.is-none .stack-left { fill: #fff; opacity: 1 }
.stack-row.is-few  .stack-left { fill: #2b2111; opacity: 1 }

/* Mərtəbə ipucusu sxem sütununun İÇİNDƏ açılır — `createTooltip` host
   çərçivəsinə görə yerləşdiyinə görə sütun mövqeli olmalıdır, yoxsa
   ipucu səhifənin sol üst küncünə düşür. */
.stackbar { position: relative }
#tip3 { max-width: 230px }