/* Dörd addımlı satış axınının paylaşılan qatları.

   İki demo eyni yolu gedir — towers (düzbucaqlı plitə) və swiss (əyri
   plitə) — ona görə mərtəbə sxemi, mərtəbə planı, yan panel siyahıları və
   3D nişanları burada bir yerdədir. Səhifəyə xas olan yalnız şəbəkə
   (grid) qalır: `pages/towers.css`, `pages/swiss.css`.

   Plan qatı iki formada gəlir: towers-də mənzil `<rect>`, swiss-də isə
   halqa dilimi, yəni `<path>`. Seçicilərdə hər ikisi sayılır. */

/* ---------- mərtəbə sxemi (addım 2) ---------- */
.stackbar {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--line);
  background: var(--surface2);
}
.stack-head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.stack-head b {
  display: block;
  font-family: var(--f-display);
  font-size: 17px;
}
.stack-head span {
  font-size: 12px;
  color: var(--muted);
}
.stack-host {
  flex: 1;
  min-height: 0;
  padding: 12px 10px;
  overflow: auto;
}
.stack {
  width: 100%;
  height: 100%;
  min-height: 380px;
  overflow: visible;
}

/* Dam konstruksiyadır, satış statusu deyil — ona görə neytral xətt rəngi.
   Əvvəl `--sold` idi və həmin token qırmızıya dəyişəndə dam da qızardı. */
.stack-roof {
  fill: var(--line);
  opacity: .8;
}
.stack-podium {
  fill: var(--line);
  opacity: .55;
}
.stack-podium-label {
  font-family: var(--f-mono);
  font-size: .5px;
  letter-spacing: .06px;
  fill: var(--muted);
}

.stack-row rect {
  fill: var(--sold);
  opacity: .34;
  transition: opacity .12s, fill .12s;
}
.stack-row.is-many rect { fill: var(--ok);   opacity: .72 }
.stack-row.is-few  rect { fill: var(--hold); opacity: .78 }
.stack-row.is-none rect { fill: var(--sold); opacity: .62 }
.stack-row.is-dim  rect { opacity: .14 }

/* Hoverdə zolaq ÖZ rəngində, amma açıq tonda yanır: yaşıl, sarı, qırmızı.
   Boz hover "seçilə bilməz" kimi oxunurdu — halbuki satılmış mərtəbənin
   planını da açmaq olar. */
.stack-row:hover rect,
.stack-row:focus-visible rect {
  opacity: 1;
  filter: brightness(1.14) saturate(1.05);
}
.stack-row.is-sel rect {
  fill: var(--accent);
  opacity: 1;
}
.stack-row { cursor: pointer; outline: none }

.stack-no {
  font-family: var(--f-mono);
  font-size: .58px;
  fill: var(--muted);
}
.stack-left {
  font-family: var(--f-mono);
  font-size: .5px;
  fill: #fff;
  opacity: 0;
  transition: opacity .12s;
}
.stack-row:hover .stack-left,
.stack-row.is-sel .stack-left { opacity: .9 }
.stack-row.is-none .stack-left { fill: #fff }

.stack-key {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px 14px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.stack-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.stack-key i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.stack-key .many { background: var(--ok) }
.stack-key .few { background: var(--hold) }
.stack-key .none { background: var(--sold) }

/* ---------- mərtəbə planı (addım 3–4) ---------- */
.plate-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--surface2);
}
.plate-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.plate-bar .stage-back {
  position: static;
  flex: none;
}
.plate-note {
  font-size: 12px;
  color: var(--muted);
}
.plate-host {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 20px 24px 28px;
}
.plate {
  width: 100%;
  max-height: 100%;
}

.plate-outline {
  fill: none;
  stroke: var(--line);
  stroke-width: .16;
}
/* Nüvə planın "ölü" zonasıdır: mənzillərdən açıq-aydın fərqlənməli,
   amma onları üstələməməlidir. */
.plate-core rect,
.plate-core .plate-shell {
  fill: var(--muted);
  opacity: .16;
}
.plate-core .plate-lift {
  fill: var(--muted);
  opacity: .42;
}
.plate-corridor {
  fill: none;
  stroke: var(--muted);
  stroke-width: .1;
  stroke-dasharray: .9 .7;
  opacity: .5;
}
.plate-core-label {
  font-family: var(--f-mono);
  font-size: .62px;
  letter-spacing: .08px;
  fill: var(--muted);
}

.plate-unit { cursor: pointer; outline: none }
.plate-unit rect,
.plate-unit .plate-cell {
  fill: var(--sold);
  stroke: var(--surface);
  stroke-width: .1;
  opacity: .5;
  transition: opacity .12s, fill .12s;
}
.plate-unit.is-free rect, .plate-unit.is-free .plate-cell { fill: var(--ok);   opacity: .8 }
.plate-unit.is-hold rect, .plate-unit.is-hold .plate-cell { fill: var(--hold); opacity: .85 }
.plate-unit.is-sold rect, .plate-unit.is-sold .plate-cell { fill: var(--sold); opacity: .62 }
.plate-unit.is-dim  rect, .plate-unit.is-dim  .plate-cell { opacity: .13 }

/* Hover: eyni rəng, açıq ton — bax .stack-row:hover */
.plate-unit:hover rect,
.plate-unit:hover .plate-cell,
.plate-unit:focus-visible rect,
.plate-unit:focus-visible .plate-cell {
  opacity: 1;
  filter: brightness(1.12) saturate(1.05);
}
.plate-unit.is-sel rect,
.plate-unit.is-sel .plate-cell {
  fill: var(--accent);
  opacity: 1;
  stroke: var(--surface);
  stroke-width: .18;
}

.plate-no {
  font-family: var(--f-mono);
  font-size: 1.05px;
  fill: #fff;
  opacity: .82;
  pointer-events: none;
}
.plate-unit.is-sold .plate-no { fill: #fff; opacity: .9 }
.plate-unit.is-dim .plate-no { opacity: .2 }

.plate-dir {
  font-family: var(--f-mono);
  font-size: .82px;
  letter-spacing: .14px;
  fill: var(--muted);
}
.plate-dim {
  stroke: var(--line);
  stroke-width: .08;
  fill: none;
}
.plate-dimtxt {
  font-family: var(--f-mono);
  font-size: .72px;
  fill: var(--muted);
}
/* Kursorun altındakı mənzilin ölçüləri — ümumi ölçü xətlərindən fərqli
   olaraq vurğulu rəngdə: baxışı hansı mənzildən danışdığımıza aparır. */
.plate-dim.is-live {
  stroke: var(--accent);
  stroke-width: .1;
}
.plate-dimtxt.is-live {
  fill: var(--accent);
  font-size: .82px;
}

/* İstiqamət nişanları (dəniz, dağ, şəhər, park, laquna) — plan üzərində
   çertyoj işarəsi kimi: nazik kontur, yazı ilə eyni tonda. */
.plate-icon path {
  fill: none;
  stroke: var(--muted);
  stroke-width: .16;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.plate-icon path.is-fill {
  fill: var(--muted);
  stroke: none;
}

/* ---------- 3D nişanları ---------- */
#pins .pin {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: border-color .12s, transform .12s;
}
#pins .pin b {
  font-family: var(--f-display);
  font-size: 14px;
}
#pins .pin small {
  font-family: var(--f-mono);
  font-size: 10.5px;
  color: var(--muted);
}
/* Ölçü sətri: binanın hündürlüyü və mərtəbə sayı — rəqəm nişanın altında,
   satış məlumatından ayrı oxunsun deyə daha solğun. */
#pins .pin em {
  display: block;
  font-family: var(--f-mono);
  font-style: normal;
  font-size: 10px;
  letter-spacing: .02em;
  color: var(--accent);
  opacity: .85;
}
#pins .pin.hot {
  border-color: var(--accent);
  transform: translate(-50%, -100%) scale(1.06);
}

@media (max-width: 900px) {
  .stack-host { max-height: 46vh }
  .plate-stage { min-height: 52vh }
  .stackbar {
    border-right: 0;
    border-top: 1px solid var(--line);
  }
}