/* map-v4 UX layer — injected into the forked _source.html by deploy_map_v4.sh */

/* ---- in-section split (council verdict) ----
   Two states of the same section, same border, no overlay, no fullscreen:
   • browse  = map owns 100% (3rd column collapsed to 0)
   • selected = section splits IN PLACE — map ~60%, passport card ~40%.
   The passport is an IN-FLOW third grid column whose width is animated via the grid;
   the map zooms to the clicked room (JS), so the smaller width gains focus, not loss. */
#map{ grid-template-columns: auto 1fr 0px !important; position:relative;
  transition: grid-template-columns .34s cubic-bezier(.4,0,.2,1); }
#map.v4-split{ grid-template-columns: auto 1fr clamp(340px, 40%, 480px) !important; }
@media (max-width:760px){ #map{ grid-template-columns: 1fr !important; } }
#vp{ min-width:0 !important; position:relative; }

/* .side → in-flow passport column (was a fixed off-canvas drawer) */
.side{ position:relative !important; top:auto; right:auto; height:100% !important;
  width:auto !important; max-width:none !important; min-width:0 !important;
  transform:none !important; overflow:auto; z-index:1;
  border-left:1px solid var(--line); box-shadow:none !important;
  opacity:0; transition:opacity .2s ease .12s; }
#map.v4-split .side{ opacity:1; }
.v4-side-x{ position:absolute; top:10px; right:12px; z-index:2; border:0;
  background:rgba(0,0,0,.07); width:30px; height:30px; border-radius:50%;
  font-size:18px; line-height:1; cursor:pointer; }

/* ---- corner color key ---- */
/* single-row legend pill, matched to the zoom +/- buttons (32px tall, same radius) */
.v4-key{ position:absolute; left:14px; bottom:14px; z-index:30; display:flex; align-items:center; gap:16px;
  height:32px; padding:0 13px; box-sizing:border-box;
  background:rgba(20,26,35,.86); color:#e7ecf2; border:1px solid rgba(255,255,255,.12);
  border-radius:10px; font:12px/1 sans-serif; backdrop-filter:blur(4px); pointer-events:none; }
.v4-key .r{ display:flex; align-items:center; gap:7px; }
.v4-key i{ width:11px; height:11px; border-radius:3px; flex:0 0 auto; }

/* ---- fullscreen button + layout + fallback ---- */
.v4-fs{ position:absolute; right:14px; bottom:74px; top:auto; z-index:31; background:#0a8a7a;
  color:#fff; border:0; border-radius:9px; padding:9px 13px; font:600 13px/1 sans-serif;
  cursor:pointer; box-shadow:0 2px 8px #0003; }
.v4-fs:hover{ background:#0b9d8b; }
#map:fullscreen{ background:#141a23; width:100vw; height:100vh; }
#map:fullscreen #vp{ height:100%; }
#map.v4-fs-fallback{ position:fixed; inset:0; z-index:9999; width:100vw; height:100vh; background:#141a23; }

/* ---- tap card: desktop = fixed side card (afimall) / mobile bottom-sheet ---- */
.v4-cart{ position:fixed; right:18px; top:96px; left:auto; z-index:40; width:300px; max-width:300px;
  background:#fff; color:#1a1a1a; border-radius:12px; box-shadow:0 10px 30px #0005; padding:14px 16px 15px;
  font:14px/1.4 sans-serif; display:none; }
.v4-cart.show{ display:block; }
.v4-cart .ct{ font-weight:700; margin:0 0 3px; padding-right:18px; }
.v4-cart .cs{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:#555; }
.v4-cart .cs i{ width:10px; height:10px; border-radius:50%; }
.v4-cart .ca{ color:#333; margin:5px 0 10px; font-variant-numeric:tabular-nums; }
.v4-cart .cmore{ background:#0a8a7a; color:#fff; border:0; border-radius:8px; padding:8px 12px;
  font:600 13px/1 sans-serif; cursor:pointer; width:100%; }
.v4-cart .cx{ position:absolute; top:6px; right:9px; border:0; background:none; font-size:18px;
  color:#999; cursor:pointer; }
@media (max-width:760px){
  .v4-cart{ position:fixed; left:0 !important; right:0; bottom:0; top:auto !important;
    max-width:none; border-radius:16px 16px 0 0;
    padding:16px 18px calc(16px + env(safe-area-inset-bottom)); }
  .v4-fs{ right:10px; top:10px; padding:11px 15px; font-size:14px; animation:v4pulse 2.4s ease-in-out 1; }
  .v4-key{ left:8px; bottom:8px; padding:6px 9px; font-size:11px; }
  @keyframes v4pulse{ 0%,100%{transform:none} 50%{transform:scale(1.06)} }
}

/* ---- afimall flat treatment (desktop «Плоский» view) ---- */
/* occupied = opaque block so the single architecture path underneath (internal
   walls/partitions) is hidden; free = translucent + crisp dark outline so two
   adjacent free premises don't merge into one shape. */
.room[data-status="space_busy"]{ fill:#39424f !important; fill-opacity:1 !important;
  stroke:rgba(255,255,255,.18) !important; stroke-width:.9 !important; filter:none !important; }
.room[data-status="space_busy"]:hover{ fill:#46515f !important; }
.room[data-status="space_free"]{ fill:rgba(28,230,190,.40) !important; fill-opacity:1 !important;
  stroke:#06201d !important; stroke-width:1.6 !important; filter:none !important; }
.room[data-status="space_free"]:hover{ fill:rgba(28,230,190,.62) !important; }
.room[data-status="space_book"]{ fill:rgba(245,158,11,.5) !important;
  stroke:#5a3a00 !important; stroke-width:1.5 !important; filter:none !important; }
.v4-flat-label{ pointer-events:none; }
/* afimall: no colour tenant logos on the plan — name only (real logo stays in the side card).
   Desktop engine renders logos as HTML <img> overlaid on #stage (not svg <image>). */
#stage svg image{ display:none !important; }
#stage img{ display:none !important; }

/* engine's cursor-following hover tooltip (.tip «клик — открыть описание») is
   redundant on v4: clicking a room opens our own fixed side card (.v4-cart with
   «Подробнее»). The tip is pointer-events:none so it can't be clicked → hide it. */
.tip{ display:none !important; }

/* the engine's bottom-bar legend duplicates our corner key (.v4-key) and the
   «наведите курсор · кликните для паспорта» hint is moot now that .tip is hidden —
   both were sitting under the corner key and overlapping it. Drop them; keep the
   zoom controls. The corner key is now the single legend. */
.vp__bottom .legend, .vp__bottom .mono{ display:none !important; }

/* the flat floor's white background <rect fill="#fff"> carries a faint 0.5px stroke
   (inherited) whose outer half pokes past the fill → a thin frame around the whole
   plan. Kill the stroke (keep the fill — it's covered by the dark room layer anyway). */
#stage svg rect[fill="#fff"]{ stroke:none !important; }

/* ---- ?embed=1: embedded-in-landing mode (iframe map section) ----
   hide the standalone page header (it duplicates the landing's section title and
   eats height) and let the map fill the iframe edge-to-edge. */
body.v4-embed{ margin:0; }
body.v4-embed .shell__head{ display:none !important; }
body.v4-embed .shell{ max-width:none !important; padding:0 !important; }
body.v4-embed .map{ height:100vh !important; min-height:0 !important;
  border:0 !important; border-radius:0 !important; box-shadow:none !important; }

/* ---- lightweight hover tooltip (browse mode): name + status + m², no panel ----
   sits ABOVE the cursor; purely informational (the misleading «открыть описание»
   hint of the engine tooltip is what Roma disliked — this one has none). */
.v4-tip{ position:fixed; z-index:50; pointer-events:none; opacity:0; transition:opacity .12s;
  background:rgba(12,17,24,.96); color:#e7ecf2; border:1px solid rgba(255,255,255,.12);
  border-radius:8px; padding:7px 10px; font:12px/1.35 sans-serif; max-width:260px; white-space:nowrap;
  box-shadow:0 8px 24px #0007; transform:translate(-50%,-100%); }
.v4-tip.on{ opacity:1; }
.v4-tip .tt{ font-weight:700; margin-bottom:1px; white-space:normal; }
.v4-tip .tm{ display:flex; align-items:center; gap:8px; color:#aeb8c2; }
.v4-tip .tm i{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.v4-tip .ta{ font-variant-numeric:tabular-nums; }

/* the engine's top-bar status chips collapse to 0-width off the right edge in the
   embedded top bar → hide the dead chips (no JS handler anyway). */
.vp__filters{ display:none !important; }