/* ------------------------------------------------------------------
   Укладка коробок.

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

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

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

.pk { margin-top: 1.5rem; }

.pk-layout { display: grid; gap: 1.5rem; }
@media (min-width: 64rem) {
  .pk-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      'scene  scene'
      'space  boxes'
      'result result';
  }
  .pk-scene-wrap { grid-area: scene; }
  .pk-panel--space { grid-area: space; }
  .pk-panel--boxes { grid-area: boxes; }
  .pk-panel--result { grid-area: result; }
}

/* ---- сцена ----------------------------------------------------------- */

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

@media (min-width: 64rem) {
  .pk-scene-wrap { display: flex; flex-direction: column; }
  .pk-scene { height: clamp(28rem, 66vh, 46rem); position: relative; }
  .pk-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
}

.pk-scene-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.4rem;
  margin-top: 0.7rem;
}
.pk-scene-note { font-size: 0.9rem; color: var(--ink-soft); }

.pk-cut { display: flex; align-items: center; gap: 0.5rem; }
.pk-cut .pk-field-label { margin: 0; white-space: nowrap; }
.pk-slider { width: 9rem; }
.pk-cut-value { font-size: 0.9rem; color: var(--ink-soft); white-space: nowrap; }

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

.pk-paper { fill: #ffffff; }

/* Грани красятся расчётом: цвет зависит от вида груза и стороны коробки.
   Здесь — только обводка, общая для всех. */
.pk-face { stroke: rgba(0, 0, 0, 0.32); stroke-width: 0.7; stroke-linejoin: round; }
.pk-seam { stroke: rgba(0, 0, 0, 0.28); stroke-width: 0.7; }

.pk-edge { stroke: #0f5c7a; stroke-width: 1.6; }
.pk-frame--back .pk-edge { stroke: #9fc0cf; stroke-dasharray: 6 4; }

/* Подпись размера ложится поверх груза, поэтому под ней белая обводка:
   без неё цифры теряются на тёмной грани */
.pk-ruler {
  fill: #46535c;
  font: 400 15px var(--narrow);
  paint-order: stroke;
  stroke: #ffffff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.pk-empty { fill: #8a97a0; font: 400 20px var(--sans); }

.pk-legend-title { fill: #000000; font: 600 17px var(--sans); }
.pk-legend-name { fill: #000000; font: 400 15px var(--sans); }
.pk-legend-note { fill: #46535c; font: 400 13px var(--sans); }
.pk-legend-swatch { stroke: rgba(0, 0, 0, 0.35); stroke-width: 1; }

/* ---- панели ---------------------------------------------------------- */

.pk-panel { padding: 1rem 1.1rem; background: var(--panel); }
.pk-panel-title {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--ink);
}
.pk-panel-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-top: 0.9rem;
}
.pk-panel-hint {
  margin-top: 0.8rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.pk-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;
}
.pk-link:hover { color: var(--signal); }

.pk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.9rem; }
.pk-chips--units { margin-bottom: 0; }
.pk-chip {
  padding: 0.3rem 0.7rem;
  font: inherit;
  font-size: 0.86rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--panel-deep);
  cursor: pointer;
}
.pk-chip:hover { border-color: var(--water); }
.pk-chip.is-on { color: var(--paper); background: var(--water); border-color: var(--water); }

/* ---- поля ------------------------------------------------------------ */

.pk-field { display: block; margin-bottom: 0.8rem; }
.pk-field-label { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
.pk-grid { display: grid; gap: 0.7rem; }
.pk-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pk-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.pk-panel input[type='text'] {
  width: 100%;
  min-width: 0;
  padding: 0.35rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--panel-deep);
}
.pk-panel input[type='text']:focus {
  border-color: var(--water);
  outline: 2px solid var(--water-pale);
}

/* ---- таблица коробок ------------------------------------------------- */

.pk-table-scroll { overflow-x: auto; }
@media (min-width: 64rem) {
  .pk-panel--boxes .pk-table-scroll { max-height: 26rem; overflow-y: auto; overscroll-behavior: contain; }
}

/* Девять столбцов в телефон не втискиваются: без нижней границы ширины
   заголовки наползают друг на друга. Пусть лучше таблица прокручивается
   вбок внутри своей рамки — читать её так всё равно можно. */
.pk-table {
  width: 100%;
  min-width: 32rem;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.pk-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;
}
.pk-table td { padding: 0.15rem 0.25rem; vertical-align: middle; }
.pk-table .pk-col-num { text-align: right; }
.pk-table .pk-col-num input { text-align: right; }
.pk-table .pk-col-mid { text-align: center; }
.pk-table .pk-col-n { padding-inline: 0; text-align: center; }

.pk-dot {
  display: inline-block;
  width: 0.85rem;
  height: 0.85rem;
  border: 1px solid rgba(0, 0, 0, 0.35);
  vertical-align: middle;
}

.pk-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;
}
.pk-remove:hover { color: var(--signal); }

/* ---- итог ------------------------------------------------------------ */

.pk-facts {
  display: grid;
  gap: 0.9rem 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.pk-fact { display: flex; flex-direction: column; gap: 0.1rem; }
.pk-fact-title {
  font: 400 0.82rem/1.2 var(--narrow);
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pk-fact-value { font-size: 1.35rem; line-height: 1.2; }
.pk-fact-note { font-size: 0.86rem; color: var(--ink-soft); }

.pk-left { margin-top: 1rem; }
.pk-left-list { margin: 0.3rem 0 0; padding: 0; list-style: none; font-size: 0.9rem; }
.pk-left-list li { display: flex; align-items: center; gap: 0.5rem; padding: 0.1rem 0; }

.pk-problems { margin: 0; padding-left: 1.2rem; color: var(--signal); font-size: 0.92rem; }
.pk-problems li { margin-bottom: 0.2rem; }

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

.pk-steps { margin-top: 2.5rem; }
.pk-steps-title { font-size: 1.15rem; margin-bottom: 0.4rem; }
.pk-steps-lead { max-width: 46rem; font-size: 0.92rem; color: var(--ink-soft); margin-bottom: 0.8rem; }
.pk-table--steps { table-layout: auto; }
.pk-table--steps td { padding: 0.3rem 0.5rem; border-bottom: var(--rule); white-space: nowrap; }
.pk-limit { color: var(--signal); font-size: 0.85rem; }

/* ---- узкий экран ------------------------------------------------------ */

@media (max-width: 40rem) {
  .pk-grid--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pk-fact-value { font-size: 1.15rem; }
  .pk-slider { width: 7rem; }
}