/* ------------------------------------------------------------------
   Центр тяжести грузопотоков.

   Чертёж — главный предмет страницы, поэтому он занимает всё доступное
   место, а таблицы и переключатели стоят сбоку и не спорят с ним за
   внимание. Палитра та же, что на всём сайте: белая бумага, вода на
   осях и сетке, сигнальный красный только на найденной точке.

   Классы cg- целиком уходят в сохраняемую картинку: файл экспорта
   собирает правила из этой таблицы, чтобы SVG открывался где угодно.
   ------------------------------------------------------------------ */

/* Рабочей области нужно больше места, чем колонке текста: чертёж — главный
   предмет страницы, и ужимать его до ширины абзаца незачем. Шапка, подвал и
   пояснения остаются на общей ширине, читать их с такой строки было бы тяжело. */
.wrap--wide { max-width: 96rem; }

.cg-lead { max-width: 46rem; }

.cg { margin-top: 1.5rem; }

/* Чертёж занимает всю ширину отдельной строкой: на нём работают, в него
   смотрят, и делить эту строку с таблицей — значит обкрадывать главное.
   Панели уходят под него в два столбца, настройки — полосой ещё ниже. */
.cg-layout { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
  .cg-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'plot   plot'
      'points network'
      'setup  setup';
  }
  .cg-plot-wrap { grid-area: plot; }
  .cg-panel--points { grid-area: points; }
  .cg-panel--network { grid-area: network; }
  .cg-panel--setup { grid-area: setup; }
}

/* ---- чертёж ---------------------------------------------------------- */

.cg-plot {
  border: 2px solid var(--ink);
  background: var(--paper);
  line-height: 0;
}
.cg-plot svg { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
.cg-plot svg.is-panning { cursor: grabbing; }
.cg-plot.is-placing svg { cursor: crosshair; }

/* На широком экране чертёж тянется на всю высоту соседней колонки: иначе под
   ним остаётся пустая полоса, а подписи мельчают вместе с ним. Картинка внутри
   поставлена поверх поля, а не внутри потока, — так её высота не может влиять
   на высоту самого поля, и наблюдатель за размером не зациклится. */
@media (min-width: 64rem) {
  .cg-plot-wrap { display: flex; flex-direction: column; }
  /* Высота задаётся от окна, а не от соседней колонки: соседей у чертежа
     больше нет. Нижняя граница бережёт его на невысоких экранах, верхняя —
     чтобы на большом мониторе он не перерос в две страницы прокрутки. */
  .cg-plot { height: clamp(32rem, 74vh, 54rem); position: relative; }
  .cg-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
}

.cg-plot-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.7rem 0;
}
.cg-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.cg-zoom-button {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font: 600 1.15rem/1 var(--sans);
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--panel-deep);
  cursor: pointer;
}
.cg-zoom-button:hover { border-color: var(--water); }
.cg-zoom-value {
  min-width: 3.2rem;
  font: 400 0.88rem/1 var(--narrow);
  color: var(--ink-soft);
  text-align: center;
}

.cg-bar-export {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-left: auto;
}
.cg-hint { font-size: 0.88rem; color: var(--ink-soft); }

.cg-tool {
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--panel);
  border: 2px solid var(--panel-deep);
  cursor: pointer;
}
.cg-tool:hover { border-color: var(--water); }
.cg-tool.is-on {
  color: var(--paper);
  background: var(--signal);
  border-color: var(--signal);
}

.cg-link {
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--water);
  background: none;
  border: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}
.cg-link:hover { color: var(--signal); }

/* ---- что рисуется внутри SVG ----------------------------------------- */

.cg-paper { fill: #ffffff; }

.cg-grid line { stroke: #dfe6ea; stroke-width: 1; }

.cg-axis { stroke: #0f5c7a; stroke-width: 2; }
.cg-tick { stroke: #0f5c7a; stroke-width: 1.5; }
.cg-tick-label {
  fill: #46535c;
  font: 400 15px 'PT Sans Narrow', 'Golos Text', system-ui, sans-serif;
}
.cg-axis-name {
  fill: #0f5c7a;
  font: 700 18px 'PT Sans Narrow', 'Golos Text', system-ui, sans-serif;
}

.cg-ray { stroke: #0f5c7a; stroke-width: 1; stroke-opacity: 0.35; }

.cg-marker { cursor: grab; }
.cg-marker.is-dragging { cursor: grabbing; }
.cg-marker-disc {
  fill: #0f5c7a;
  stroke: #ffffff;
  stroke-width: 2;
}
.cg-marker:hover .cg-marker-disc { fill: #b4321f; }
.cg-marker-number {
  fill: #ffffff;
  font: 700 14px 'Golos Text', system-ui, sans-serif;
  pointer-events: none;
}

/* ---- транспортная сеть ------------------------------------------------ */

.cg-segment-hit { stroke: transparent; stroke-width: 14; fill: none; }
.cg-segment-line { stroke: #46535c; stroke-width: 2.5; stroke-linecap: round; }
/* Участок с заданной вручную длиной: пунктир говорит, что по чертежу её
   не измерить — участок петляет */
.cg-segment-line.is-given { stroke-dasharray: 7 4; }
.cg-segment-label { fill: #46535c; }

.cg-junction-dot { fill: #ffffff; stroke: #46535c; stroke-width: 2.5; }
.cg-junction.is-chosen .cg-junction-dot,
.cg-marker.is-chosen .cg-marker-disc { stroke: #b4321f; stroke-width: 3.5; }

.cg-network-mark { fill: none; stroke: #0f5c7a; stroke-width: 3.5; }

.cg-centre-mark {
  fill: #ffffff;
  stroke: #0f5c7a;
  stroke-width: 3;
}

.cg-weber-halo { fill: #b4321f; fill-opacity: 0.16; }
.cg-weber-dot { fill: #b4321f; }
.cg-weber-cross { stroke: #b4321f; stroke-width: 2; }

.cg-legend-title {
  fill: #000000;
  font: 600 17px 'Golos Text', system-ui, sans-serif;
}
.cg-legend-rule { stroke: #000000; stroke-width: 2; }
.cg-legend-name {
  fill: #000000;
  font: 400 15px 'Golos Text', system-ui, sans-serif;
}
/* Тесная легенда: название и груз в одну строку */
.cg-legend-compact {
  fill: #000000;
  font: 400 12.5px 'Golos Text', system-ui, sans-serif;
}
.cg-legend-weight { fill: #46535c; }

.cg-legend-value {
  fill: #46535c;
  font: 400 13.5px 'PT Sans Narrow', 'Golos Text', system-ui, sans-serif;
}

/* ---- панели сбоку ---------------------------------------------------- */

.cg-side { display: grid; gap: 1.2rem; }

@media (min-width: 64rem) {
  .cg-panel--setup .cg-setup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1.5rem;
    align-items: start;
  }
  /* Без этого колонка сетки не сжимается ниже своего содержимого: длинный
     адрес места в списке распирал её изнутри и наползал на соседнюю панель */
  .cg-panel--setup .cg-setup-grid > * { min-width: 0; }
  .cg-panel--setup .cg-origin,
  .cg-panel--setup .cg-appearance { border-top: none; padding-top: 0; }
}

.cg-appearance {
  margin-bottom: 0.9rem;
  padding-top: 0.8rem;
  border-top: var(--rule);
}
.cg-field-label--group { font-weight: 600; margin-bottom: 0.5rem; display: block; }
.cg-sizer { margin-bottom: 0.7rem; }
.cg-sizer .cg-field-label { margin-bottom: 0.25rem; }
.cg-sizer .cg-zoom { margin-bottom: 0.15rem; }

/* ---- окно сохранения -------------------------------------------------- */

dialog.cg-export {
  width: min(34rem, 100%);
  max-width: 100%;
  padding: 0;
  border: none;
  background: var(--paper);
  color: var(--ink);
}
dialog.cg-export::backdrop { background: rgba(0, 0, 0, 0.45); }

.cg-export-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--gutter);
  border-bottom: 3px solid var(--ink);
}
.cg-export-title { font-size: 1.15rem; }
.cg-export-body { padding: 1rem var(--gutter) 1.4rem; }
.cg-export-note { font-size: 0.9rem; color: var(--ink-soft); max-width: 44ch; }

.cg-export-sizes { display: grid; gap: 0.5rem; margin: 1rem 0; }
.cg-export-size {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  padding: 0.6rem 0.8rem;
  background: var(--panel);
  border-left: 4px solid transparent;
  cursor: pointer;
}
.cg-export-size:hover { border-left-color: var(--panel-deep); }
.cg-export-size.is-chosen { border-left-color: var(--water); }
.cg-export-size input { width: 1.05rem; height: 1.05rem; accent-color: var(--water); grid-row: span 2; }
.cg-export-size-name { font-weight: 600; }
.cg-export-size-note { grid-column: 2; font-size: 0.85rem; color: var(--ink-soft); }

.cg-export-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.cg-export-actions button[disabled] { opacity: 0.6; cursor: default; }
.cg-export-status {
  min-height: 1.4em;
  margin: 0;
  font-size: 0.9rem;
  color: var(--water);
}

.cg-panel {
  padding: 1rem 1.1rem;
  background: var(--panel);
}
.cg-panel-title {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
}
.cg-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
}

.cg-table-scroll { overflow-x: auto; }
@media (min-width: 64rem) {
  /* Списки прокручиваются внутри себя: три десятка строк иначе уводят
     страницу вниз, и соседняя панель повисает в пустоте */
  .cg-panel--points .cg-table-scroll { max-height: 30rem; }
  .cg-panel--network .cg-table-scroll { max-height: 22rem; }
  .cg-table-scroll { overflow-y: auto; overscroll-behavior: contain; }
}

.cg-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.88rem; }
.cg-table th {
  padding: 0.3rem 0.25rem;
  font: 400 0.82rem/1.2 var(--narrow);
  color: var(--ink-soft);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: var(--rule);
  white-space: nowrap;
}
.cg-table td { padding: 0.15rem 0.25rem; vertical-align: middle; }
.cg-table .cg-col-n {
  width: 1.6rem;
  font: 700 0.85rem/1 var(--narrow);
  color: var(--ink-soft);
  text-align: center;
}
.cg-table .cg-col-num { text-align: right; }
.cg-table .cg-col-num input { text-align: right; }
.cg-table .cg-col-x { width: 1.6rem; }
/* Крайние узкие столбцы без боковых отступов: иначе кнопка не помещается
   в свою колонку и таблица выпирает за панель на несколько точек */
.cg-table .cg-col-n,
.cg-table .cg-col-x { padding-inline: 0; }
.cg-table .cg-remove { width: 100%; }

.cg-table input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.35rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--panel-deep);
  border-radius: 0;
}
.cg-table input:focus { border-color: var(--water); outline: 2px solid var(--water-pale); }


.cg-remove {
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  font: 400 1.2rem/1 var(--sans);
  color: var(--ink-soft);
  background: none;
  border: none;
  cursor: pointer;
}
.cg-remove:hover { color: var(--signal); }

.cg-field { display: block; margin-bottom: 0.8rem; }
.cg-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.cg-field-label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
.cg-field-hint {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.83rem;
  color: var(--ink-soft);
}
.cg-field input[type='text'] {
  width: 100%;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--panel-deep);
  border-radius: 0;
}
.cg-field input[type='text']:focus { border-color: var(--water); outline: none; }
.cg-field input[type='file'] { width: 100%; font-size: 0.88rem; }

.cg-origin {
  margin-bottom: 0.9rem;
  padding-top: 0.8rem;
  border-top: var(--rule);
}
.cg-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.35rem 0 0.1rem; }
.cg-chip {
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--panel-deep);
  cursor: pointer;
}
.cg-chip:hover { border-color: var(--water); color: var(--water); }
.cg-chip.is-on {
  color: var(--paper);
  background: var(--water);
  border-color: var(--water);
  font-weight: 600;
}
.cg-chips--modes { margin-bottom: 0.8rem; }

.cg-panel-actions button[disabled] { opacity: 0.6; cursor: default; }

.cg-map { margin-bottom: 0.9rem; min-width: 0; }
.cg-detail { margin: 0.8rem 0; }
.cg-detail .cg-zoom { margin: 0.3rem 0 0.2rem; }
.cg-field--tight { margin-top: 0.7rem; margin-bottom: 0; }

.cg-places { display: grid; gap: 0.3rem; margin: 0.5rem 0 0.7rem; min-width: 0; }
.cg-place {
  display: block;
  width: 100%;
  /* Цепочка ограничителей до самой строки: обрезание многоточием работает
     только тогда, когда всем предкам разрешено быть уже содержимого */
  min-width: 0;
  max-width: 100%;
  padding: 0.5rem 0.7rem;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--panel-deep);
  cursor: pointer;
}
.cg-place:hover { border-color: var(--water); }
.cg-place-name {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Уточнение переносится, а не обрезается: одна строка «Городец, Городецкий…»
   ничем не отличалась бы от соседней */
.cg-place-full {
  display: block;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--ink-soft);
}

.cg-map-note { font-size: 0.88rem; color: var(--water); margin: 0.4rem 0 0; }

.cg-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: var(--rule);
}
.cg-check { display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.cg-check input { width: 1.05rem; height: 1.05rem; accent-color: var(--water); }

/* ---- ответ ----------------------------------------------------------- */

.cg-result { margin-top: 2rem; max-width: 62rem; }
.cg-result .section-title { margin-bottom: 1rem; }
.cg-empty { color: var(--ink-soft); }

.cg-answers-grid { display: grid; gap: 1rem; }
@media (min-width: 46rem) {
  .cg-answers-grid { grid-template-columns: 1fr 1fr; }
}

.cg-answer { padding: 1rem 1.2rem; background: var(--panel); border-left: 4px solid var(--water); }
.cg-answer--weber { border-left-color: var(--signal); }
.cg-answer h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.cg-answer-coords {
  font: 700 1.25rem/1.3 var(--sans);
  white-space: pre;
  margin-bottom: 0.3rem;
}
.cg-answer-work { margin-bottom: 0.5rem; font-size: 0.98rem; }
.cg-answer-note { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0; }

.cg-verdict {
  margin-top: 1rem;
  padding: 0.9rem 1.2rem;
  border-left: 4px solid var(--signal);
  background: var(--paper);
  border-top: var(--rule);
  border-right: var(--rule);
  border-bottom: var(--rule);
}
.cg-verdict--same { border-left-color: var(--water); }
.cg-verdict--warn { border-left-color: var(--signal); }

.cg-network { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--ink); }
.cg-network-title { font-size: 1.05rem; margin-bottom: 0.7rem; }
.cg-answer--network { border-left-color: var(--ink); }
.cg-network-note {
  margin-top: 0.8rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
  max-width: 60ch;
}

.cg-panel-hint { font-size: 0.88rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.cg-segment-pair { font-size: 0.86rem; line-height: 1.3; }
.cg-segment-arrow { color: var(--water); }

/* ---- разбор по действиям --------------------------------------------- */

/* Таблицы разбора читают строкой слева направо: на всю ширину рабочей
   области они расползаются и глаз теряет строку */
.cg-steps { margin-top: 2.5rem; max-width: 62rem; }
.cg-step { margin-bottom: 2rem; }
.cg-step h3 {
  font-size: 1rem;
  margin-bottom: 0.6rem;
  padding-bottom: 0.3rem;
  border-bottom: 2px solid var(--ink);
}
.cg-step-note { font-size: 0.9rem; color: var(--ink-soft); max-width: 52ch; }
.cg-step-conclusion {
  margin-top: 0.8rem;
  padding: 0.7rem 1rem;
  max-width: 60ch;
  font-size: 0.95rem;
  background: var(--panel);
  border-left: 4px solid var(--signal);
}

.cg-steps-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.cg-steps-scroll .cg-steps-table { min-width: 30rem; }

.cg-steps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
  margin-bottom: 0.7rem;
}
.cg-steps-table th {
  padding: 0.4rem 0.5rem;
  font: 400 0.82rem/1.2 var(--narrow);
  color: var(--ink-soft);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--ink);
}
.cg-steps-table th.num, .cg-steps-table td.num { text-align: right; }
.cg-steps-table td { padding: 0.35rem 0.5rem; border-bottom: var(--rule); }
.cg-steps-table tbody tr:hover { background: var(--panel); }
.cg-steps-table tfoot td {
  padding: 0.45rem 0.5rem;
  font-weight: 700;
  border-top: 2px solid var(--ink);
  border-bottom: none;
}

.cg-division p {
  font: 400 1.05rem/1.8 var(--sans);
  margin-bottom: 0.2rem;
}

.formula {
  font: 400 1.05rem/1.8 var(--sans);
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 3px solid var(--water);
  background: var(--panel);
  overflow-x: auto;
}

/* ---- телефон --------------------------------------------------------- */

@media (max-width: 46rem) {
  .cg-panel { padding: 0.9rem; }
  /* Палец толще курсора: ссылка-кнопка высотой в строку не нажимается */
  .cg-link { padding-block: 0.55rem; }
  .cg-zoom-button { width: 2.6rem; height: 2.6rem; }
  /* Крестик удаления чуть крупнее, но не во всю строку: попадать в него
     случайно хуже, чем промахнуться мимо */
  .cg-remove { height: 2.2rem; }
  dialog.cg-export { width: 100%; height: 100%; max-height: 100dvh; margin: 0; }
  .cg-export-actions button { min-height: 2.9rem; }
  .cg-chip { padding: 0.5rem 0.7rem; }
  .cg-panel-actions { gap: 0.2rem 1.1rem; }
  .cg-table input { padding: 0.5rem 0.4rem; font-size: 0.95rem; }
  .cg-answer-coords { font-size: 1.1rem; }
  .cg-steps-table { font-size: 0.88rem; }
  .cg-steps-table th, .cg-steps-table td { padding: 0.35rem 0.3rem; }
  .cg-tool { min-height: 2.9rem; }
}

/* ---- печать ---------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .cg-plot-bar, .cg-side, .cg-panel-actions { display: none; }
  .cg-plot { border-width: 1px; }
  .cg-step, .cg-answer { break-inside: avoid; }
  .band { padding: 0; }
}