/* Карта плана, легенда, список мест. Подключается после app.css. */

.work { flex: 1; min-height: 0; position: relative; display: flex; }
.stage-host { flex: 1; min-width: 0; position: relative; background: var(--sunk); overflow: hidden; }
.stage {
  position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab;
  background: #f6f4f0; user-select: none; -webkit-user-select: none;
}
.stage:focus-visible { outline-offset: -3px; }
.stage.dragging { cursor: grabbing; }
.world {
  position: absolute; left: 0; top: 0; transform-origin: 0 0; backface-visibility: hidden;
}
.plan-img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; opacity: .9; mix-blend-mode: multiply; }
.plan-svg { position: absolute; left: 0; top: 0; overflow: visible; opacity: 0; transition: opacity .5s ease; }
.is-ready .plan-svg { opacity: 1; }

/* Места */
.shape {
  fill: var(--c, #6f7f9e); fill-opacity: .52;
  stroke: var(--c, #6f7f9e); stroke: color-mix(in srgb, var(--c, #6f7f9e) 76%, #000);
  stroke-width: calc(var(--sw) * 1px); stroke-linejoin: round;
  cursor: pointer; outline: none; -webkit-tap-highlight-color: transparent;
  transition: fill-opacity .15s, stroke-opacity .15s;
}
.shape:hover, .shape.is-hover { fill-opacity: .8; stroke-width: calc(var(--sw) * 1.5px); }
.shape.is-selected {
  fill-opacity: .9; stroke: #101a45; stroke-width: calc(var(--sw) * 1.9px);
  filter: drop-shadow(0 calc(var(--sw) * 2px) calc(var(--sw) * 3.5px) rgb(16 26 69 / .5));
}
.shape:focus-visible {
  stroke: #000; stroke-width: calc(var(--sw) * 2.6px); fill-opacity: .85;
  filter: drop-shadow(0 0 calc(var(--sw) * 1.5px) #fff);
}
.shape.is-dim { fill-opacity: .1; stroke-opacity: .3; }
.st-sold, .st-rented, .st-unavailable {
  fill: #5b564f; fill-opacity: .2; stroke: #5b564f; stroke-opacity: .28; stroke-width: calc(var(--sw) * .6px);
  pointer-events: none; cursor: default;
}
.st-unavailable { fill-opacity: .1; }
.st-reserved {
  fill: url(#hatch); fill-opacity: 1; stroke: #9a7a2c; stroke-opacity: .65; stroke-width: calc(var(--sw) * .8px);
  pointer-events: none; cursor: default;
}
.hit { fill: transparent; stroke: transparent; stroke-width: calc(var(--hit) * 1px); stroke-linejoin: round; pointer-events: all; cursor: pointer; }
.pulse { fill: none; stroke: var(--c, #2f5fe0); stroke-width: calc(var(--sw) * 2px); stroke-opacity: 0; stroke-linejoin: round; pointer-events: none; }
.pulse.on { animation: pulse 1.2s cubic-bezier(.2, .7, .2, 1) 2; }
@keyframes pulse {
  0% { stroke-opacity: .85; stroke-width: calc(var(--sw) * 2px); }
  100% { stroke-opacity: 0; stroke-width: calc(var(--sw) * 18px); }
}

/* Подписи: семантический зум (видимость задаёт JS по размеру в пикселях экрана) */
.lbl { display: none; pointer-events: none; }
.lbl.lv1, .lbl.lv2, .lbl.lv3 { display: inline; }
.lbl .t {
  font-family: var(--font); font-weight: 700; fill: #14161f; stroke: rgb(255 255 255 / .92);
  paint-order: stroke; stroke-linejoin: round; letter-spacing: -.01em;
}
.lbl .t2 { font-weight: 600; }
.lbl .t3 { font-weight: 500; fill: #2b2f3b; }
.lbl .t2, .lbl .t3 { display: none; }
.lbl.lv2 .t2, .lbl.lv3 .t2, .lbl.lv3 .t3 { display: inline; }
.lbl.is-dim { display: none !important; }

.tip {
  position: absolute; left: 0; top: 0; z-index: 6; display: grid; gap: 2px; padding: 9px 12px; max-width: 260px; white-space: nowrap;
  background: var(--ink); color: #fff; border-radius: var(--r); font-size: .875rem; pointer-events: none;
  box-shadow: 0 8px 24px rgb(0 0 0 / .28);
}
.tip-code { font-size: 1rem; }
.tip-row { display: flex; gap: 12px; }
.tip-price { font-weight: 700; }
.tip-hint { color: #bdb8af; font-size: .8125rem; }

/* Загрузка и состояния карты */
.stage-loader, .stage-skeleton {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--ink-2); pointer-events: none; text-align: center; padding: 24px;
  background: linear-gradient(100deg, var(--sunk) 30%, #ebe7e0 50%, var(--sunk) 70%) 0 0 / 300% 100%; animation: shimmer 1.4s linear infinite;
}
.stage-note {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 4; display: flex; gap: 8px; align-items: center;
  max-width: calc(100% - 32px); padding: 8px 14px; background: var(--danger-soft); color: var(--danger); border-radius: var(--r); font-size: .9375rem;
}
.stage-banner {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: grid; gap: 10px; justify-items: center; text-align: center;
  padding: 24px; background: var(--surface); border-radius: var(--r-lg); max-width: min(360px, calc(100% - 32px)); box-shadow: 0 12px 40px rgb(36 33 30 / .25);
}

/* Управление картой */
.zoom-ctl {
  position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; gap: 1px;
  background: var(--line); border-radius: var(--r); overflow: hidden; box-shadow: 0 2px 10px rgb(0 0 0 / .18);
}
.ctl-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: var(--raised); color: var(--ink); transition: background-color .12s; }
.ctl-btn:hover { background: var(--accent-soft); }
.ctl-btn:active { background: var(--accent); color: #fff; }

.minimap {
  display: none; position: absolute; right: 16px; bottom: 16px; z-index: 4; overflow: hidden; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-sm); box-shadow: 0 4px 16px rgb(0 0 0 / .2); cursor: crosshair; touch-action: none;
}
.minimap img { position: absolute; max-width: none; opacity: .75; pointer-events: none; }
.mm-dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.mm-dots path { fill-opacity: .9; }
.mm-view { position: absolute; border: 2px solid var(--ink); background: rgb(36 33 30 / .08); border-radius: 3px; pointer-events: none; }

.legend { position: absolute; left: 10px; right: 64px; top: 10px; z-index: 4; }

.legend-title { display: none; }
.legend-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
.legend-list::-webkit-scrollbar { display: none; }
.legend-item {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px;
  background: rgb(247 245 241 / .95); border: 1.5px solid transparent; border-radius: 99px; font-size: .8125rem; font-weight: 600; color: var(--ink);
  box-shadow: 0 1px 6px rgb(0 0 0 / .15); font-family: inherit;
}
.legend-item.is-static { font-weight: 500; color: var(--ink-2); }
button.legend-item:hover { border-color: var(--ink-2); }
.legend-item[aria-pressed='true'] { background: var(--ink); color: #fff; }
.legend-n { display: none; opacity: .6; font-weight: 500; }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--line); }
.dot-hatch { background: repeating-linear-gradient(45deg, rgb(154 122 44 / .75) 0 2px, rgb(255 255 255 / .8) 2px 4px); }
.dot-taken { background: rgb(91 86 79 / .35); }

.list-fab {
  position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 5;
  display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px;
  background: var(--ink); color: #fff; border: 0; border-radius: 99px; font-weight: 600; box-shadow: 0 8px 24px rgb(0 0 0 / .3);
}
.list-fab:active { transform: translateX(-50%) translateY(1px); }

/* Список мест */
.list-head { position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 14px 16px 10px; display: grid; gap: 10px; border-bottom: 1px solid var(--line-soft); }
.list-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.list-title { margin-top: 0; font-size: 1.375rem; }
.list-count { color: var(--muted); font-size: .9375rem; margin-top: 2px; }
.search-wrap { position: relative; display: flex; align-items: center; color: var(--muted); }
.search-wrap .icon { position: absolute; left: 12px; pointer-events: none; }
.search { padding-left: 38px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; background: var(--raised);
  border: 1.5px solid var(--line); border-radius: 99px; font-size: .8125rem; font-weight: 600; transition: border-color .12s; font-family: inherit;
}
.chip-btn:hover { border-color: var(--ink-2); }
.chip-btn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip-n { opacity: .6; font-weight: 500; }
.ranges summary { cursor: pointer; font-weight: 600; font-size: .9375rem; padding: 6px 0; }
.range-grid { display: grid; gap: 6px; padding-bottom: 4px; }
.range-label { font-size: .8125rem; color: var(--muted); margin-top: 4px; }
.range-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; color: var(--muted); }
.input-sm { min-height: 40px; padding: 6px 10px; }
.sort-row { display: flex; gap: 8px; align-items: center; }
.select { min-height: 40px; padding: 6px 10px; flex: 1; }
.link-btn { border: 0; background: none; color: var(--accent); font-weight: 600; padding: 8px 4px; white-space: nowrap; font-family: inherit; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }
.list-body { padding: 10px 16px 28px; display: grid; gap: 8px; align-content: start; }
.state-inline { padding: 8px 0; justify-items: start; text-align: left; }
.spot-list { display: grid; gap: 6px; }
.spot-row {
  width: 100%; display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; min-height: 48px;
  padding: 8px 12px; background: var(--raised); border: 1px solid var(--line-soft); border-radius: var(--r-sm); text-align: left; font-family: inherit;
  transition: border-color .12s, background-color .12s;
}
.spot-row:hover { border-color: var(--accent); background: var(--accent-soft); }
.spot-row.is-off { opacity: .65; }
.spot-row-code { font-weight: 700; }
.spot-row-area { color: var(--muted); font-size: .875rem; }
.spot-row-price { font-weight: 600; text-align: right; }
.panel-line { margin-top: 4px; }
.panel[data-mode='list'] { height: 78%; max-height: none; }

@media (min-width: 900px) {
  .zoom-ctl { top: 16px; right: 16px; }
  .minimap:not([hidden]) { display: block; }
  .list-fab { display: none; }
  .list-head { padding: 20px 24px 12px; }
  .list-body { padding: 12px 24px 32px; }
  .legend {
    top: auto; right: auto; left: 16px; bottom: 16px; padding: 10px 14px 8px; background: rgb(247 245 241 / .96);
    border-radius: var(--r); box-shadow: 0 4px 18px rgb(0 0 0 / .16); min-width: 170px;
  }
  .legend-title { display: flex; align-items: center; justify-content: space-between; width: 100%; border: 0; background: none; padding: 0 0 4px; font: inherit; font-size: .8125rem; font-weight: 700; color: var(--ink); cursor: pointer; }
  .legend-title .icon { transform: rotate(90deg); transition: transform .2s; }
  .legend.is-collapsed .legend-title .icon { transform: rotate(-90deg); }
  .legend.is-collapsed .legend-list { display: none; }
  .legend-list { flex-direction: column; gap: 2px; overflow: visible; padding: 0; }
  .legend-item { box-shadow: none; background: transparent; border-radius: var(--r-sm); min-height: 26px; font-size: .75rem; padding: 0 8px; margin: 0 -8px; width: calc(100% + 16px); }
  button.legend-item:hover { background: var(--sunk); border-color: transparent; }
  .legend-item[aria-pressed='true'] { background: var(--ink); }
  .legend-label { flex: 1; text-align: left; }
  .legend-n { display: inline; }
}