/* Схема корпусов (public/plan.js). Цвета — токены: тёмная тема в :root, светлая в :root.light. */
:root {
  --p-wall: #07090d; --p-floor: #1b2029; --p-line: rgba(255, 255, 255, .34);
  --p-aud: #2f7a55; --p-mm: #2b7391; --p-lingua: #5560b3; --p-special: #8a5aa8;
  --p-office: #a14f58; --p-hall: #7b62b0; --p-service: #4a505c;
}
:root.light {
  --p-wall: #8a7a63; --p-floor: #fffaf1; --p-line: rgba(70, 52, 24, .5);
  --p-aud: #bdeccf; --p-mm: #b4e3f5; --p-lingua: #cdd5fb; --p-special: #e3cdf2;
  --p-office: #f6c4c4; --p-hall: #ddd0f7; --p-service: #dcd9d2;
}

.plan-stage { position: relative; height: clamp(320px, 58vh, 700px); border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--glass-edge); background: var(--card-solid); margin-bottom: 12px; }
#plan-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab;
  user-select: none; -webkit-user-select: none; outline: 0; transition: opacity .2s; }
#plan-map.dragging { cursor: grabbing; }
#plan-map.loading { opacity: .35; }
#plan-map:focus-visible { box-shadow: inset 0 0 0 3px var(--accent); }
.plan-zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 6px; }
.plan-zoom .icon-btn { background: var(--glass); backdrop-filter: var(--blur-card); -webkit-backdrop-filter: var(--blur-card);
  border: 1px solid var(--glass-edge); width: 44px; height: 44px; border-radius: 14px; }

.plan-wall { fill: var(--p-wall); }
.plan-floor { fill: var(--p-floor); }
.plan-room { cursor: pointer; outline: 0; transition: opacity .2s; }
.plan-shape { stroke: var(--p-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.plan-room[data-kind="aud"] .plan-shape { fill: var(--p-aud); }
.plan-room[data-kind="mm"] .plan-shape { fill: var(--p-mm); }
.plan-room[data-kind="lingua"] .plan-shape { fill: var(--p-lingua); }
.plan-room[data-kind="special"] .plan-shape { fill: var(--p-special); }
.plan-room[data-kind="office"] .plan-shape { fill: var(--p-office); }
.plan-room[data-kind="hall"] .plan-shape { fill: var(--p-hall); }
.plan-room[data-kind="service"] .plan-shape { fill: var(--p-service); }
.plan-lbl { fill: var(--text); font-weight: 650; pointer-events: none; font-family: var(--font); }
.plan-room:hover .plan-shape, .plan-room:focus-visible .plan-shape { stroke: var(--accent); stroke-width: 3px; }
.plan-room.sel .plan-shape { stroke: var(--bad); stroke-width: 4px; }
.plan-dim .plan-room:not(.hit) { opacity: .22; }

.plan-poi .plan-area { fill: var(--fill); stroke: none; }
.plan-poi .plan-badge { fill: var(--card-solid); stroke: var(--accent); stroke-width: 2.5px; vector-effect: non-scaling-stroke; }
.plan-poi[data-kind="wc"] .plan-badge { stroke: #3b8bff; }
.plan-poi[data-kind="stairs"] .plan-badge { stroke: #ff9f0a; }
.plan-poi[data-kind="lift"] .plan-badge { stroke: #a66cff; }
.plan-poi[data-kind="food"] .plan-badge, .plan-poi[data-kind="shop"] .plan-badge { stroke: #30d158; }
.plan-ico { pointer-events: none; }
.plan-ico path { fill: none; stroke: var(--text); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.plan-ico text { fill: var(--text); font-weight: 800; text-anchor: middle; font-family: var(--font); }
.plan-poi.sel .plan-badge { stroke: var(--bad); stroke-width: 4px; }
.plan-poi.pulse .plan-badge { animation: plan-pulse 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes plan-pulse { 50% { transform: scale(1.4); } }
.plan-arrow { fill: var(--accent-fill); stroke: none; }
@media (prefers-reduced-motion: reduce) { .plan-poi.pulse .plan-badge { animation: none; stroke-width: 5px; } }

.plan-num { min-width: 64px; max-width: 96px; text-align: center; padding: 6px 8px; border-radius: 10px; font-weight: 700; font-size: var(--fs-sm);
  background: var(--fill); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-num[data-kind="aud"], .plan-sw[data-kind="aud"] { background: var(--p-aud); }
.plan-num[data-kind="mm"], .plan-sw[data-kind="mm"] { background: var(--p-mm); }
.plan-num[data-kind="lingua"], .plan-sw[data-kind="lingua"] { background: var(--p-lingua); }
.plan-num[data-kind="special"], .plan-sw[data-kind="special"] { background: var(--p-special); }
.plan-num[data-kind="office"], .plan-sw[data-kind="office"] { background: var(--p-office); }
.plan-num[data-kind="hall"], .plan-sw[data-kind="hall"] { background: var(--p-hall); }
.plan-num[data-kind="service"], .plan-sw[data-kind="service"] { background: var(--p-service); }
.plan-sw { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--p-line); flex: none; }
.plan-card { margin-bottom: 4px; }

/* подсказки под полем поиска */
.plan-search-wrap { position: relative; }
.plan-sug { position: absolute; left: 0; right: 0; top: 100%; margin: 2px 0 0; padding: 6px; list-style: none; z-index: 30;
  background: var(--card-solid); border: 1px solid var(--glass-edge); border-radius: var(--r-sm); box-shadow: var(--shadow); max-height: 340px; overflow-y: auto; }
.plan-sug li[role="option"] { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 10px; cursor: pointer; }
.plan-sug li.active, .plan-sug li[role="option"]:hover { background: var(--fill); }
.plan-sug-t { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.plan-sug-t > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-sug-none { padding: 10px; color: var(--muted); font-size: var(--fs-sm); }

/* вход в карту на главной: одна кнопка-карточка с превью этажа */
.plan-entry { display: flex; flex-direction: column; gap: 10px; padding: 10px; min-height: 44px; font: inherit; color: var(--text); cursor: pointer; }
.plan-entry:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.plan-mini { display: block; width: 100%; height: 150px; border: 1px solid var(--glass-edge); border-radius: var(--r-sm);
  background: var(--card-solid); overflow: hidden; pointer-events: none; }
.plan-mini-box { display: block; width: 100%; height: 100%; }
.plan-mini-svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.plan-mini .plan-shape { stroke-width: .6px; }
.plan-entry-cap { display: flex; align-items: center; gap: 10px; padding: 0 4px 2px; }
.plan-entry-t { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.plan-entry-t > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-entry-cap .ic { width: 20px; height: 20px; color: var(--muted); flex: none; }
@media (min-width: 1024px) { .plan-mini { height: 260px; } .home-map-sec h2 { margin-top: 8px; } }

/* корпуса, этажи и типы помещений: каждая группа — одна строка, лишнее прокручивается внутри строки, а не страница */
.plan-row { flex-wrap: nowrap; gap: 4px; padding: 6px 6px 10px; margin-bottom: 6px; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: thin; mask-image: none; -webkit-mask-image: none; }
.plan-row { --fl: 0px; --fr: 0px; mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--fl), #000 calc(100% - var(--fr)), transparent); }
.plan-row.fade-l { --fl: 36px; }
.plan-row.fade-r { --fr: 36px; }
.plan-row::-webkit-scrollbar { display: block; height: 4px; }
.plan-row::-webkit-scrollbar-thumb { background: var(--muted); border-radius: 2px; }
.plan-row .chip { flex: none; padding-inline: 10px; min-width: 44px; justify-content: center; }
.plan-l-full { display: none; }
.plan-side-h { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 2px 6px; }
.plan-main { min-width: 0; }
@media (min-width: 1024px) {
  .plan-layout { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 22px; align-items: start; }
  .plan-side { position: sticky; top: 0; }
  /* на компьютере корпуса и этажи — столбцом слева с полными названиями */
  .plan-side .plan-row { flex-direction: column; overflow: visible; gap: 6px; }
  .plan-side .chip { width: 100%; justify-content: flex-start; }
  .plan-side .plan-l-short { display: none; }
  .plan-side .plan-l-full { display: inline; }
}