/* ===== Гигакарта — пространственный вид (Semi-spatial map) ==================
   Ориентир — карта Prevention and Response (Ulloa & Strømsnes, 2012):
   почти белый лист, волосяные линии сине-серого, пастельные плоскости,
   несколько ярких лент и тихая типографика. Панели — плавающие карточки
   поверх полотна: карта остаётся главным объектом экрана.
   Имена — с префиксом .gmx__, чтобы не спорить с .gm__ (схема связей)
   и с классами оболочки .cw-*.
   ========================================================================= */

.gmx { position: relative; display: flex; flex-direction: column; height: calc(100vh - 250px); min-height: 560px; border: 1px solid #dfe8ed; border-radius: 14px; overflow: hidden; background: #fdfefe; }

/* Полотно: бумага с еле заметной сеткой — ни точки-ориентира. */
.gmx__stage { position: relative; flex: 1 1 auto; overflow: hidden; background: #fdfefe; background-image: radial-gradient(circle at 1px 1px, #e9eff2 1px, transparent 0); background-size: 28px 28px; }
.gmx__svg { display: block; width: 100%; height: 100%; cursor: grab; }
.gmx__svg.is-drag { cursor: grabbing; }

/* ---------- плавающие панели ---------- */
.gmx__card { position: absolute; z-index: 4; background: rgba(255, 255, 255, .93); border: 1px solid #e3ebef; border-radius: 12px; box-shadow: 0 6px 18px rgba(95, 125, 145, .07); }
.gmx__card--left { left: 12px; top: 12px; width: 196px; max-height: calc(100% - 24px); overflow: auto; padding: 12px; }
.gmx__card--right { right: 12px; top: 12px; bottom: 12px; width: 292px; overflow: auto; padding: 14px 15px; }
.gmx__card--zoom { right: 12px; bottom: 12px; display: flex; gap: 6px; padding: 6px; }

.gmx__title { font: 700 10.5px/1.2 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .9px; color: #8fa7b6; margin: 0 0 8px; }
.gmx__title + .gmx__title { margin-top: 14px; }

.gmx__check { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: pointer; font: 400 13px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__check:hover { background: #f2f7f9; }
.gmx__check input { accent-color: #3d7e9c; }
.gmx__swatch { width: 14px; height: 14px; border-radius: 4px; border: 1px solid #cfdbe2; flex: none; }

.gmx__preset { display: block; width: 100%; text-align: left; border: 1px solid #e3ebef; background: #fff; border-radius: 9px; padding: 7px 9px; margin: 0 0 6px; cursor: pointer; font: 400 12.5px/1.35 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__preset:hover { background: #f2f7f9; }
.gmx__preset b { display: block; font-size: 11.5px; color: #d1574c; }
.gmx__preset.is-on { border-color: #3d7e9c; box-shadow: 0 0 0 1px #3d7e9c inset; }

.gmx__hint { font: 400 11.5px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; }

.gmx__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 24px; text-align: center; }
.gmx__empty p { max-width: 420px; margin: 0; font: 400 13.5px/1.6 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; }

/* ---------- панель контекста ---------- */
.gmx__head { font: 700 15px/1.25 var(--cw-font-body, system-ui, sans-serif); color: #35566b; margin: 0 0 4px; }
.gmx__kicker { font: 700 10.5px/1.2 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .9px; color: #9db3bf; }
.gmx__kv { display: grid; grid-template-columns: 108px 1fr; gap: 6px 10px; margin: 10px 0; font: 400 12.5px/1.45 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__kv dt { color: #9db3bf; }
.gmx__kv dd { margin: 0; }
.gmx__note { font: 400 12px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; background: #f5f9fb; border-left: 3px solid #d3e2ea; border-radius: 6px; padding: 8px 10px; margin: 10px 0; }
.gmx__note--red { border-left-color: #d1574c; background: #fdf4f3; }
.gmx__note--amber { border-left-color: #e9b23c; background: #fdf9ef; }
.gmx__note--cold { border-left-color: #3d7e9c; }

.gmx__tag { display: inline-block; font: 600 11px/1.5 var(--cw-font-body, system-ui, sans-serif); padding: 2px 8px; border-radius: 20px; margin: 2px 4px 2px 0; }
.gmx__tag--red { background: #fae5e2; color: #a83c33; }
.gmx__tag--amber { background: #fbf0d8; color: #8a6212; }
.gmx__tag--cold { background: #e0edf3; color: #2b6076; }
.gmx__tag--info { background: #f0f4f6; color: #5b7180; }

/* ---------- временная дорожка ---------- */
.gmx__track { margin-top: 12px; }
.gmx__trackhead { display: grid; grid-template-columns: 1fr 62px 62px; gap: 6px; font: 700 10.5px/1.2 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .8px; color: #9db3bf; border-bottom: 1px solid #e6eef2; padding-bottom: 5px; }
.gmx__stagerow { display: grid; grid-template-columns: 1fr 62px 62px; gap: 6px; align-items: center; font: 400 12px/1.35 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; padding: 5px 0; border-bottom: 1px dashed #e8eff3; }
.gmx__stagerow.is-late { background: #fdf3f1; }
.gmx__stagerow.is-plan { color: #9db3bf; }
.gmx__stagerow b { color: #d1574c; }

/* ---------- строка времени: тихая полоса вдоль низа полотна ---------- */
.gmx__time { display: flex; align-items: center; gap: 12px; padding: 8px 14px; border-top: 1px solid #e6eef2; background: #fff; }
.gmx__play { width: 36px; height: 30px; border: 1px solid #dfe8ed; background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: #4c6474; }
.gmx__play:hover { background: #f2f7f9; }
.gmx__clock { font: 700 12.5px/1 var(--cw-font-body, system-ui, sans-serif); color: #35566b; min-width: 56px; font-variant-numeric: tabular-nums; letter-spacing: .4px; }
.gmx__slider { position: relative; flex: 1; height: 26px; }
.gmx__slider input { position: absolute; inset: 0; width: 100%; height: 26px; margin: 0; accent-color: #3d7e9c; cursor: pointer; }
.gmx__ticks { position: absolute; inset: 0; pointer-events: none; }
.gmx__tick { position: absolute; top: 15px; font: 400 9.5px/1 var(--cw-font-body, system-ui, sans-serif); color: #a9bdc8; transform: translateX(-50%); }

.gmx__seg { display: inline-flex; border: 1px solid #dfe8ed; border-radius: 8px; overflow: hidden; background: #fff; }
.gmx__seg button { border: 0; background: #fff; padding: 6px 10px; font: 400 12px/1.2 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; cursor: pointer; }
.gmx__seg button + button { border-left: 1px solid #dfe8ed; }
.gmx__seg button.is-on { background: #3d7e9c; color: #fff; }

.gmx__zoombtn { width: 32px; height: 32px; border: 1px solid #dfe8ed; background: #fff; border-radius: 8px; cursor: pointer; font: 600 15px/1 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__zoombtn:hover { background: #f2f7f9; }
.gmx__zoombtn--wide { width: auto; padding: 0 10px; font-size: 11.5px; }

/* ---------- легенда ---------- */
.gmx__legendgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.gmx__legendrow { display: flex; align-items: center; gap: 6px; margin: 1px 0; font: 400 10.5px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__legendline { width: 22px; flex: none; border-top-width: 2px; border-top-style: solid; }
.gmx__legendline--route { border-top-width: 4px; }
.gmx__legenddot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.gmx__legendperson { width: 11px; height: 16px; flex: none; background: #f2c94c; clip-path: polygon(50% 0, 100% 22%, 78% 22%, 100% 100%, 50% 74%, 0 100%, 22% 22%, 0 22%); }
.gmx__legendtokens { width: 17px; height: 10px; flex: none; background: radial-gradient(circle at 3px 3px, #2b3134 2px, transparent 2.5px), radial-gradient(circle at 10px 6px, #2b3134 2px, transparent 2.5px), radial-gradient(circle at 6px 1px, #2b3134 2px, transparent 2.5px); }

/* ---------- состояния объектов на полотне ---------- */
.gmx__hidden { display: none; }
.gmx__dim { opacity: .28; }
.gmx__dim-soft { opacity: .55; }
.gmx__hl .gmx__zonebox, .gmx__hl .gmx__subbox { stroke: #3d7e9c; stroke-width: 2; }
.gmx__is-sel .gmx__subbox { stroke: #3d7e9c; stroke-width: 2.2; }
.gmx__hl .gmx__zoneplane { fill-opacity: 1; }

/* ---------- детализация по зуму ---------- */
.gmx__lbl-sub, .gmx__ico, .gmx__metric-minor { display: none; }
.gmx__svg.is-lvl-2 .gmx__lbl-sub, .gmx__svg.is-lvl-2 .gmx__ico { display: inline; }
.gmx__svg.is-lvl-3 .gmx__lbl-sub, .gmx__svg.is-lvl-3 .gmx__ico, .gmx__svg.is-lvl-3 .gmx__metric-minor { display: inline; }

/* ---------- мобильный ---------- */
@media (max-width: 900px) {
  .gmx { height: auto; min-height: 0; }
  .gmx__stage { height: 62vh; }
  .gmx__card--left { position: static; width: auto; max-height: none; margin: 8px; }
  .gmx__card--right { position: static; width: auto; margin: 8px; }
  .gmx__card--zoom, .gmx__card--legend { position: static; margin: 8px; width: auto; }
  .gmx__card--legend { max-width: none; }
  .gmx__time { flex-wrap: wrap; }
  .gmx__slider { order: 9; flex: 1 0 100%; }
}

/* ---------- переключатель вида Гигакарты (хром оболочки) ---------- */
.cw-gigamap__views { display: inline-flex; margin: 0 0 14px; border: 1px solid #dfe8ed; border-radius: 9px; overflow: hidden; background: #fff; }
.cw-gigamap__views button { border: 0; background: #fff; padding: 8px 15px; font: 500 13px/1.2 system-ui, sans-serif; color: #6d8695; cursor: pointer; }
.cw-gigamap__views button + button { border-left: 1px solid #dfe8ed; }
.cw-gigamap__views button.is-on { background: #3d7e9c; color: #fff; }

/* ---------- вкладки Карта / Источники ---------- */
.gmx__seg--tab { margin-right: 10px; }
.gmx__seg--tab button { font-weight: 500; }
.gmx__seg--tab button.is-on { background: #3d7e9c; color: #fff; }

/* ---------- происхождение данных: точка у показателя ---------- */
.gmx__provenance { stroke: none; }

/* ---------- подпись связи на полотне ---------- */
.gmx__connlabel { fill: #9db3bf; }

/* ---------- моноширинный ID ---------- */
.gmx__mono { font: 400 11px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #9db3bf; margin: 6px 0 8px; }

/* ---------- примечания/списки источников в карточках ---------- */
.gmx__muted { font: 400 11px/1.45 var(--cw-font-body, system-ui, sans-serif); color: #9db3bf; }
.gmx__srclist { list-style: none; margin: 4px 0 8px; padding: 0; }
.gmx__srcitem { border: 1px solid #e3ebef; border-radius: 9px; padding: 8px 10px; margin: 0 0 6px; cursor: pointer; background: #fff; }
.gmx__srcitem:hover { background: #f2f7f9; }
.gmx__srcassert { font: 400 12px/1.4 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; margin-top: 4px; }
.gmx__hist { list-style: none; margin: 4px 0; padding: 0; font: 400 11.5px/1.45 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; }
.gmx__hist li { padding: 3px 0; border-bottom: 1px dashed #e8eff3; }

/* ---------- кнопки-пресеты: добавить / опасное ---------- */
.gmx__preset--add { border-style: dashed; color: #2b6076; }
.gmx__preset--add b { color: #2b6076; }
.gmx__preset--danger { border-color: #f0d3cd; color: #a83c33; }
.gmx__preset--danger:hover { background: #fdf4f3; }

/* ---------- форма добавления связи ---------- */
.gmx__addform { margin: 4px 0 10px; padding: 10px; border: 1px solid #e3ebef; border-radius: 10px; background: #fbfdfe; }
.gmx__addrow { margin: 0 0 7px; }
.gmx__addrow select, .gmx__addrow input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #cfdbe2; border-radius: 7px; font: 400 12.5px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; background: #fff; }
.gmx__addwarn { color: #a83c33; font: 600 11px/1.3 var(--cw-font-body, system-ui, sans-serif); }

/* ---------- реестр источников ---------- */
.gmx__registry { position: absolute; inset: 0; z-index: 3; overflow: auto; padding: 16px; }
.gmx__registry[hidden] { display: none; }
/* В режиме реестра карта-фильтры и зум не нужны: реестр занимает всё полотно,
   оставляя место только под карточку источника справа. */
.gmx.is-sources .gmx__card--left { display: none; }
.gmx.is-sources .gmx__card--zoom { display: none; }
.gmx.is-sources .gmx__registry { padding-right: 322px; }
/* Скрытие панелей кнопками «Слои» / «Детали» в верхней строке. */
.gmx.is-hide-left .gmx__card--left { display: none; }
.gmx.is-hide-right .gmx__card--right { display: none; }
/* Пустое полотно: панели слоёв и зум не нужны. */
.gmx.is-empty .gmx__card--left, .gmx.is-empty .gmx__card--zoom { display: none; }
.gmx__regwrap { max-width: 980px; margin: 0 auto; }
.gmx__reghead { font: 700 18px/1.2 var(--cw-font-body, system-ui, sans-serif); color: #35566b; margin: 0 0 12px; }
.gmx__reginput { display: flex; gap: 10px; margin: 0 0 12px; }
.gmx__reginput input { flex: 1; padding: 8px 11px; border: 1px solid #cfdbe2; border-radius: 9px; font: 400 13px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmx__regcats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gmx__regcat { border: 1px solid #dfe8ed; background: #fff; border-radius: 20px; padding: 5px 12px; font: 400 12px/1.2 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; cursor: pointer; }
.gmx__regcat.is-on { background: #3d7e9c; color: #fff; border-color: #3d7e9c; }
.gmx__reglist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.gmx__regitem { border: 1px solid #e3ebef; border-radius: 12px; padding: 12px 14px; background: #fff; cursor: pointer; }
.gmx__regitem:hover { background: #f2f7f9; }
.gmx__regitem.is-sel { border-color: #3d7e9c; box-shadow: 0 0 0 1px #3d7e9c inset; }
.gmx__regitem-top { font-size: 14px; color: #35566b; margin-bottom: 6px; }

/* =============================================================================
   ФРАГМЕНТ ПИЛОТА: ПОСТАВКИ И ХРАНЕНИЕ МОЛОКА
   Тот же лист и та же типографика, что у общей карты: плиты, тонкий контур,
   цвет держит только смысл. Узлы — настоящие кнопки: фрагмент читается
   с клавиатуры и без анимации.
   ============================================================================= */
.gmx.is-milk .gmx__card--zoom,
.gmx.is-milk .gmx__time { display: none; }
.gmx.is-milk .gmx__registry { display: none; }
/* Фрагмент выше полотна: карточке слоёв и правой панели здесь нечего
   показывать — карточка узла открывается внутри самого фрагмента, поэтому
   цепочка получает всю ширину полотна. */
.gmx.is-milk .gmx__card--left,
.gmx.is-milk .gmx__card--right { display: none; }
.gmx.is-milk [data-act="toggleleft"],
.gmx.is-milk [data-act="toggleright"] { display: none; }
.gmx.is-milk .gmx__canvas { height: 100%; overflow: auto; }
.gmx.is-milk .gmx__stage { overflow: hidden; }

.gmxm { max-width: 1080px; margin: 0 auto; padding: 18px 18px 26px; }
.gmxm__head { margin: 0 0 16px; }
.gmxm__title { font: 600 19px/1.25 var(--cw-font-body, system-ui, sans-serif); color: #35566b; margin: 2px 0 8px; }
.gmxm__question { max-width: 720px; margin: 0 0 10px; font: 400 13px/1.55 var(--cw-font-body, system-ui, sans-serif); color: #4c6474; }
.gmxm__tags { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- цепочка --- */
.gmxm__row { display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap; margin: 4px 0 10px; }
.gmxm__node {
  flex: 1 1 0; min-width: 92px; display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 10px 11px; border: 1px solid #cfdde6; border-radius: 11px;
  background: #fff; cursor: pointer; font: inherit; color: inherit;
  box-shadow: 0 1px 0 rgba(95, 125, 145, .04);
}
.gmxm__node:hover { border-color: #9dbccd; background: #f7fbfd; }
.gmxm__node:focus-visible { outline: 2px solid #3d7e9c; outline-offset: 2px; }
.gmxm__node.is-sel { border-color: #3d7e9c; box-shadow: 0 0 0 1px #3d7e9c inset; background: #f5fbfd; }
.gmxm__node--supplier { background: #f7fbf4; }
.gmxm__node--delivery { background: #fdf9f1; }
.gmxm__node--receive { background: #f6fafc; }
.gmxm__node--storage { background: #f2f8fb; }
.gmxm__node--use { background: #fbf7f9; }
.gmxm__kind { font: 700 9.5px/1.2 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .9px; color: #8fa7b6; }
.gmxm__name { font: 500 13px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #35566b; }
.gmxm__orig { font: 400 10.5px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #a8bcc7; }

.gmxm__arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 6px; flex: 0 0 auto; min-width: 44px; }
.gmxm__verb { font: 400 10px/1.25 var(--cw-font-body, system-ui, sans-serif); color: #8fa7b6; text-align: center; }
.gmxm__line { display: block; width: 100%; min-width: 34px; height: 1px; background: #b9cbd6; position: relative; }
.gmxm__line::after { content: ""; position: absolute; right: -1px; top: -3px; border: 3.5px solid transparent; border-left-color: #b9cbd6; }

.gmxm__back { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; margin: 0 0 16px; padding: 0; font: 400 11.5px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; }
.gmxm__backcap { color: #a8bcc7; }
.gmxm__back b { color: #4c6474; font-weight: 500; }

/* --- карточки --- */
.gmxm__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin: 0 0 14px; }
.gmxm__card { border: 1px solid #e3ebef; border-radius: 12px; padding: 12px 14px; background: #fff; }
.gmxm__big { font: 500 14px/1.3 var(--cw-font-body, system-ui, sans-serif); color: #35566b; margin: 0 0 8px; }
.gmxm__basis { font: 400 11.5px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; margin: 0 0 6px; }
.gmxm__basislabel { display: inline-block; padding: 1px 6px; border-radius: 20px; background: #fdf3e2; color: #a97b21; font: 600 10px/1.5 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .5px; }
.gmxm__basislist { list-style: none; margin: 0; padding: 0; }
.gmxm__basislist li { font: 400 11.5px/1.55 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; padding: 6px 0; border-bottom: 1px dashed #e8eff3; }
.gmxm__basislist li:last-child { border-bottom: 0; }
.gmxm__basislist b { color: #4c6474; font-weight: 500; }
.gmxm__basisbox { border: 1px solid #e3ebef; border-radius: 12px; padding: 12px 14px; background: #fcfdfe; margin: 0 0 14px; }
.gmxm__hint { font: 400 11.5px/1.5 var(--cw-font-body, system-ui, sans-serif); color: #a8bcc7; margin: 0 0 14px; }
.gmxm__detail[hidden] { display: none; }
.gmxm__detail { margin: 0 0 16px; }
.gmxm__detailbox { border: 1px solid #cfdde6; border-radius: 12px; padding: 14px 16px; background: #f8fbfd; }
.gmxm__detailbox .gmx__head { margin: 2px 0 8px; font-size: 16px; }
.gmxm__detailbox .gmx__preset { width: auto; display: inline-block; margin: 0 6px 6px 0; }
.gmxm__hintlist, .gmxm__rellist { margin: 0 0 10px; padding-left: 18px; font: 400 12px/1.55 var(--cw-font-body, system-ui, sans-serif); color: #6d8695; }
.gmxm__hintlist li, .gmxm__rellist li { margin: 0 0 4px; }
.gmxm__rellist b { color: #4c6474; font-weight: 500; }
.gmxm__tagback { display: inline-block; padding: 0 5px; border-radius: 4px; background: #eef5f8; color: #7c9aab; font: 600 9.5px/1.6 var(--cw-font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .5px; }

/* --- действие --- */
.gmxm__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.gmxm__go {
  border: 1px solid #3d7e9c; background: #3d7e9c; color: #fff; border-radius: 10px;
  padding: 10px 16px; cursor: pointer; font: 500 13px/1.2 var(--cw-font-body, system-ui, sans-serif);
}
.gmxm__go:hover { background: #346b85; border-color: #346b85; }
.gmxm__go:focus-visible { outline: 2px solid #35566b; outline-offset: 2px; }
.gmxm__go2 { width: auto; margin: 0; display: inline-block; }

@media (max-width: 900px) {
  .gmxm { padding: 12px 12px 20px; }
  .gmx.is-milk .gmx__stage { height: auto; }
  .gmx.is-milk .gmx__canvas { height: auto; overflow: visible; }
  .gmxm__row { flex-direction: column; }
  .gmxm__arrow { flex-direction: row; gap: 8px; padding: 6px 0; min-width: 0; }
  .gmxm__line { width: 1px; min-width: 1px; height: 18px; }
  .gmxm__line::after { right: auto; left: -3px; top: auto; bottom: -1px; border: 3.5px solid transparent; border-top-color: #b9cbd6; }
}