/* ============================================================
   КОНФИГУРАТОР КАРТЫ-ПОСТЕРА
   Живёт внутри красной панели #order. Язык тот же, что у лендинга:
   жёсткие рамки 1px, никаких радиусов и мягких теней, мон-лейблы
   как техническая документация, активное состояние = инверсия ink/paper.
   ============================================================ */

/* Повторяет 12-колоночную сетку страницы, а не наследует её через
   subgrid — так блок ведёт себя одинаково во всех браузерах. */
.cfg {
  grid-column: 1/-1;
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .cfg { gap: 16px; } }

/* ---------- СМОТРОВОЙ МАКЕТ ---------- */

.cfg-stage { grid-column: 1/8; }

.cfg-stage-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.cfg-stage-head b { font-weight: 700; }

/* Внешняя рамка — «стол», на котором лежит лист. Лист центрируется
   и меняет пропорцию при смене формата. */
.cfg-easel {
  border: 1px solid var(--ink);
  background: repeating-linear-gradient(45deg,
      rgba(23,21,18,.055) 0 6px, transparent 6px 12px);
  padding: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 380px;
}

.cfg-sheet {
  position: relative;
  max-width: 100%;
  border: 1px solid var(--ink);
  overflow: hidden;
  cursor: grab;
  /* pan-y, а не none: одним пальцем страница скроллится сквозь макет,
     карта двигается и зумится двумя (как во встроенных картах) */
  touch-action: pan-y;
  background: var(--paper);
  /* пропорцию и ширину проставляет JS под выбранный формат */
}
.cfg-sheet.is-dragging { cursor: grabbing; }
.cfg-sheet:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.cfg-sheet > svg.cfg-map {
  display: block;
  width: 100%;
  height: 100%;
}

/* Заглушка на время загрузки 1.2 МБ векторной карты */
.cfg-sheet-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-55);
  transition: opacity .3s ease;
}
.cfg-sheet-loading[hidden] { display: none; }
.cfg-sheet.is-ready .cfg-sheet-loading { opacity: 0; pointer-events: none; }

/* Карточки-полароиды: физические объекты на листе, размер жёстко
   привязан к формату (18×20 мм), а не к зуму карты. */
.cfg-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none; /* тянуть можно сами карточки, слой прозрачен для карты */
}
/* Карточка — самостоятельный SVG со своим viewBox в миллиметрах.
   Внутренние пропорции считаются от него, а не от контейнера, поэтому
   рисунок не плывёт, каким бы маленьким ни был бокс на листе. */
.cfg-card {
  position: absolute;
  display: block;
  overflow: visible;
  filter: drop-shadow(1.5px 1.5px 0 rgba(23,21,18,.3));
  pointer-events: auto;
  cursor: grab;
  touch-action: none; /* карточка тянется пальцем, не скроллит страницу */
}
.cfg-card:hover { filter: drop-shadow(2.5px 2.5px 0 rgba(23,21,18,.42)); }
.cfg-card.is-dragging { cursor: grabbing; filter: drop-shadow(3px 3px 0 rgba(23,21,18,.5)); }

/* Инструменты поверх макета: квадратные кнопки-иконки с подсказкой */
.cfg-tools {
  position: absolute;
  top: 10px; right: 10px;
  display: flex; gap: 6px;
}
.cfg-tool {
  width: 34px; height: 34px; flex: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
}
.cfg-tool svg { width: 20px; height: 20px; }
.cfg-tool:hover, .cfg-tool:focus-visible { background: var(--ink); color: var(--paper); }
/* нажатое состояние = карточки скрыты */
.cfg-tool[aria-pressed="false"] { background: var(--ink); color: var(--paper); }
.cfg-tool[aria-pressed="false"]:hover { background: var(--paper); color: var(--ink); }

/* Подсказка по наведению. Своя, а не title: у нативной задержка ~1 с
   и её нельзя вызвать с клавиатуры. */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  z-index: 6;
  padding: 5px 8px;
  background: var(--ink); color: var(--paper);
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 400;
  letter-spacing: .04em; text-transform: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; }
.cfg-palettes [data-tip]::after { right: auto; left: 50%; transform: translateX(-50%); }
@media (prefers-reduced-motion: reduce) { [data-tip]::after { transition: none; } }
@media (hover: none) { [data-tip]::after { display: none; } }

/* Динамическая масштабная линейка — пересчитывается на каждом зуме */
.cfg-ruler {
  position: absolute;
  left: 12px;
  bottom: 12px;
  pointer-events: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--cfg-ruler-ink, #1A1C20);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.cfg-ruler-bar {
  height: 7px;
  border: 1px solid currentColor;
  border-top: none;
  box-sizing: content-box;
}
.cfg-ruler[hidden] { display: none; }

/* ---------- ПРИБОРНАЯ ПАНЕЛЬ ПОД МАКЕТОМ ---------- */

.cfg-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ink);
  border-top: none;
  background: var(--paper);
}
.cfg-readout div {
  padding: 10px 12px;
  border-left: 1px solid rgba(23,21,18,.3);
  font-family: 'JetBrains Mono', monospace;
}
.cfg-readout div:first-child { border-left: none; }
.cfg-readout dt {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-55);
  margin: 0 0 3px;
}
.cfg-readout dd {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .cfg-readout { grid-template-columns: repeat(2, 1fr); }
  .cfg-readout div:nth-child(3) { border-left: none; }
  .cfg-readout div:nth-child(n+3) { border-top: 1px solid rgba(23,21,18,.3); }
}

/* Зум */
.cfg-zoom {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ink);
  border-top: none;
  background: var(--paper);
}
.cfg-zoom button {
  flex: none;
  width: 42px;
  background: none;
  border: none;
  border-right: 1px solid rgba(23,21,18,.3);
  cursor: pointer;
  font-family: 'JetBrains Mono', monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.cfg-zoom button:last-child {
  width: auto;
  padding: 0 16px;
  border-right: none;
  border-left: 1px solid rgba(23,21,18,.3);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cfg-zoom button:hover:not(:disabled),
.cfg-zoom button:focus-visible { background: var(--ink); color: var(--paper); }
.cfg-zoom button:disabled { opacity: .35; cursor: default; }
.cfg-zoom-slider { flex: 1; display: flex; align-items: center; padding: 0 14px; }
.cfg-zoom input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 16px; background: transparent; cursor: pointer;
}
.cfg-zoom input[type=range]::-webkit-slider-runnable-track { height: 1px; background: var(--ink); }
.cfg-zoom input[type=range]::-moz-range-track { height: 1px; background: var(--ink); }
.cfg-zoom input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; margin-top: -6px;
  width: 13px; height: 13px; background: var(--paper); border: 2px solid var(--ink);
}
.cfg-zoom input[type=range]::-moz-range-thumb {
  width: 13px; height: 13px; background: var(--paper); border: 2px solid var(--ink); border-radius: 0;
}

.cfg-hint {
  margin: 10px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: rgba(23,21,18,.72);
}

/* ---------- ПАНЕЛЬ УПРАВЛЕНИЯ ---------- */

/* Колонка настроек тянется на всю высоту смотрового макета:
   группы сверху, кнопки действий прижаты к низу через margin-top:auto. */
.cfg-controls {
  grid-column: 8/-1;
  display: flex;
  flex-direction: column;
}

.cfg-group { border: 1px solid var(--ink); background: var(--paper); margin-bottom: 10px; }
.cfg-group-title {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 7px 10px; border-bottom: 1px solid var(--ink); color: var(--ink);
}
.cfg-group-title span { font-weight: 400; color: var(--ink-55); text-transform: none; letter-spacing: .02em; }
.cfg-group-body { padding: 10px; }

/* Выбор города: своё выпадающее меню, а не <select> — нужны пометки
   «скоро» у недоступных городов и отдельный пункт-действие «Мой город». */
.cfg-city { position: relative; }
.cfg-city-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 10px; cursor: pointer;
  background: var(--paper); border: 1px solid var(--ink); color: var(--ink);
  font: inherit; font-size: 13px; font-weight: 700; text-align: left;
}
.cfg-city-trigger:hover, .cfg-city-trigger:focus-visible { background: rgba(23,21,18,.06); }
.cfg-city-trigger i {
  flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink); transform: translateY(-2px) rotate(45deg);
  transition: transform .18s ease;
}
.cfg-city.open .cfg-city-trigger i { transform: translateY(1px) rotate(-135deg); }

.cfg-city-menu {
  position: absolute; z-index: 8; top: calc(100% + 4px); left: 0; right: 0;
  margin: 0; padding: 0; list-style: none;
  background: var(--paper); border: 1px solid var(--ink);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.cfg-city.open .cfg-city-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity .16s ease, transform .16s ease;
}
.cfg-city-menu button {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 10px; background: none; border: none;
  border-bottom: 1px solid rgba(23,21,18,.22); cursor: pointer;
  font: inherit; font-size: 13px; color: var(--ink); text-align: left;
}
.cfg-city-menu li:last-child button { border-bottom: none; }
.cfg-city-menu button:hover:not(:disabled),
.cfg-city-menu button:focus-visible { background: var(--ink); color: var(--paper); }
.cfg-city-menu button[aria-selected="true"] { font-weight: 700; }
.cfg-city-menu button[aria-selected="true"]::after { content: '✓'; }
.cfg-city-menu button:disabled { cursor: default; color: var(--ink-55); }
.cfg-city-menu button span {
  font-family: 'JetBrains Mono', monospace; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-55);
}
.cfg-city-menu button[data-city-request] { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .cfg-city-trigger i, .cfg-city-menu { transition: none; }
}

/* Сегментированный переключатель формата */
.cfg-seg { display: flex; }
.cfg-seg label { flex: 1; position: relative; }
.cfg-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cfg-seg span {
  display: block; text-align: center; cursor: pointer;
  border: 1px solid var(--ink); margin-left: -1px; padding: 7px 4px;
  font-size: 11px; font-weight: 700; line-height: 1.2; color: var(--ink);
}
.cfg-seg label:first-child span { margin-left: 0; }
.cfg-seg span small {
  display: block; font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 400; color: var(--ink-55); margin-top: 1px;
}
.cfg-seg input:checked + span { background: var(--ink); color: var(--paper); }
.cfg-seg input:checked + span small { color: rgba(237,234,227,.7); }
.cfg-seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Пресеты палитр: кружок, поделённый на фон / воду / дороги / ЖД.
   Название живёт в подсказке — так восемь палитр умещаются в один ряд. */
.cfg-palettes { display: flex; flex-wrap: wrap; gap: 9px; }
.cfg-palette {
  width: 28px; height: 28px; flex: none; padding: 0; cursor: pointer;
  border: 1px solid var(--ink); border-radius: 50%;
  background-color: transparent; background-size: cover;
  font: inherit; color: var(--ink);
}
.cfg-palette:hover, .cfg-palette:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.cfg-palette[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }

/* Кастомные цвета: чип + короткая роль + CMYK, две колонки в ряд */
.cfg-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 10px; }
/* «ЖД пути» остаётся один в последней строке и встаёт в первую колонку,
   вровень с «Фон» и «Дороги» — растягивать его на обе не надо. */
.cfg-swatch { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cfg-swatch > label {
  flex: 1; font-size: 11px; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; min-width: 0; cursor: pointer;
}
.cfg-swatch .cfg-cmyk {
  font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 400;
  color: var(--ink-55); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cfg-swatch input[type=color] {
  flex: none; width: 26px; height: 20px; padding: 0; cursor: pointer;
  border: 1px solid var(--ink); background: none;
}
.cfg-swatch input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.cfg-swatch input[type=color]::-webkit-color-swatch { border: none; }
.cfg-swatch input[type=color]::-moz-color-swatch { border: none; }

/* «Состав комплекта» переехал в колонку настроек, под «Свои цвета».
   Растягивать его по высоте нельзя: рамка уезжала вниз, а строки
   оставались наверху — под ними зияла пустая коробка. */
.cfg-controls .order-side { margin-top: 0; }
.cfg-controls .order-kit { margin-bottom: 0; }

@media (max-width: 900px) {
  .cfg-stage, .cfg-controls { grid-column: 1/-1; }
  .cfg-controls { margin-top: 28px; }
  .cfg-easel { padding: 14px; min-height: 0; }
  .cfg-sheet { max-height: none; }
  .cfg-palettes { grid-template-columns: repeat(2, 1fr); }
}