/* =========================================================
   board.html — конструктор шпаргалки
   На странице только сама шпаргалка и «+»: библиотека разделов и действий
   живёт в окнах и открывается, когда её зовут. Разделы и карточки в окнах
   выглядят ровно так же, как раньше на доске, — стили общие.
   ========================================================= */

.count{color:var(--ink-faint);}
.row-hint{margin-top:14px; font-size:12.5px; color:var(--ink-faint); text-align:center;}

/* ---------- «Добавить раздел» ----------
   На пустой доске это единственное, что есть на странице: крупная карта с «+».
   Когда разделы появились — обычная строка под ними, чтобы не спорить с ними за
   внимание. */
.add-zone{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  flex-wrap:wrap; cursor:pointer;
  padding:16px 18px; border-radius:14px;
  background:#fff; border:1.5px dashed var(--line); color:var(--ink-soft);
  font-family:'Inter', sans-serif; font-size:13.5px; font-weight:600;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.add-zone:hover{border-color:var(--orange); color:var(--ink); background:var(--orange-soft);}
.add-plus{
  font-size:19px; font-weight:700; line-height:1; color:var(--orange);
}
.add-note{flex:0 0 100%; text-align:center; font-size:12px; font-weight:400; color:var(--ink-faint);}
/* пока разделов нет — карта во весь блок и с подсказкой; дальше подсказка лишняя */
.add-zone:not(.is-first){padding:13px 16px;}
.add-zone:not(.is-first) .add-note{display:none;}
.add-zone.is-first{
  min-height:190px; flex-direction:column; gap:6px;
  font-size:15px; border-width:2px;
}
.add-zone.is-first .add-plus{
  width:44px; height:44px; border-radius:50%; margin-bottom:4px;
  display:flex; align-items:center; justify-content:center;
  background:var(--orange-soft); font-size:26px;
}

/* ---------- доска ---------- */
.board:not(.is-empty){margin-bottom:14px;}

/* готовая ссылка выводится первой внутри панели: после «Готово» заказчик сразу
   видит результат, выделяет адрес и копирует его обычной командой браузера */
.delivery{
  margin:0 0 22px; padding:16px;
  border:1px solid var(--orange); border-radius:14px; background:var(--orange-soft);
}
.delivery-title{font-size:15px; font-weight:700; color:var(--ink);}
.delivery-note{margin-top:4px; font-size:12.5px; color:var(--ink-soft);}
.delivery-loading{
  min-height:52px; display:flex; align-items:center; justify-content:center; gap:10px;
  color:var(--ink-soft); font-size:13px; font-weight:600;
}
.delivery-spinner{
  width:20px; height:20px; flex:0 0 20px; border-radius:50%;
  border:2px solid rgba(226,109,34,.22); border-top-color:var(--orange);
  animation:delivery-spin .75s linear infinite;
}
@keyframes delivery-spin{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){.delivery-spinner{animation-duration:1.5s;}}
.delivery-actions{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px;}
.copy-status{margin-top:9px; text-align:center; font-size:12.5px; font-weight:600; color:var(--ok);}
.save-control{position:relative; display:flex;}
.save-toast{
  position:absolute; z-index:24; top:calc(100% + 7px); right:0;
  width:max-content; max-width:220px; padding:7px 10px;
  border:1px solid var(--line); border-radius:9px; background:#fff;
  box-shadow:0 10px 24px -16px rgba(32,32,32,.55);
  color:var(--ok); font-size:12px; font-weight:600; white-space:nowrap;
}

/* Заголовки трёх последовательных окон стоят на одной центральной оси:
   профессия, раздел и действие воспринимаются как единый сценарий выбора. */
.picker-head{justify-content:center; align-items:center; text-align:center;}
.picker-head > div{flex:0 1 auto;}

/* Держатель — единственное место, за которое тащат. Только у него отключены
   жесты браузера: палец на самой карточке прокручивает страницу, как на любой
   другой, а нажатие открывает уточнения. */
.note-grip, .zone-grip{
  display:flex; align-items:center; justify-content:center;
  flex:none; color:var(--ink-faint); cursor:grab;
  touch-action:none; -webkit-user-select:none; user-select:none;
}
.note-grip svg, .zone-grip svg{width:12px; height:20px; pointer-events:none;}
.note-grip:active, .zone-grip:active{cursor:grabbing; color:var(--ink-soft);}
.note-grip:hover, .zone-grip:hover{color:var(--ink-soft);}
/* Полоска для перетаскивания стоит справа, вдоль текстовой части карточки:
   правый край ближе к большому пальцу. Картинку она не перекрывает — начинается
   там, где кончается поле 3:2. Крестик — в углу картинки, как на всех карточках. */
.board .note{position:relative;}
.board .note .note-cap, .board .note .note-list{padding-right:28px;}
.note-grip{
  position:absolute; right:0; bottom:0; width:26px;
  top:calc(66.6% + 1px);            /* поле 3:2 занимает две трети высоты картинки */
  border-radius:0 0 15px 0;
}
.note-grip:hover{background:rgba(43,58,74,.05);}

/* у раздела держатель тоже справа — последним в шапке, после счётчика и кнопок */
.zone-grip{width:20px; height:26px; margin-left:2px;}
/* шапка блока сворачивает раздел — так же, как в просмотре */
.board .zone-bar{cursor:pointer;}
.board .zone-bar:focus-visible{outline:2px solid var(--ink); outline-offset:-2px;}

.board .sheet-zone.dragging{opacity:.3;}
/* тело карточки — кнопка «уточнить»: нажатие открывает окно уточнений */
.board .note{cursor:pointer;}
.board .note:hover{border-color:var(--ink-faint); transform:translateY(-2px);}
/* карточка, которую тащат: остаётся на месте бледным следом */
.board .note.dragging{opacity:.25; cursor:grabbing;}
/* пока тащим, соседи не должны реагировать на наведение */
.board.dragging-inside .note:hover{transform:rotate(var(--tilt));}

/* «+ Добавить действие» — плитка на месте следующей карточки, а в пустом
   разделе занимает всю его ширину: класть карточку больше некуда */
.add-action{
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:64px; padding:12px; cursor:pointer;
  background:none; border:1.5px dashed var(--line); border-radius:6px;
  font-family:'Inter', sans-serif; font-size:12.5px; font-weight:600; color:var(--ink-soft);
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.add-action:hover{border-color:var(--orange); color:var(--ink); background:var(--orange-soft);}
.add-action.is-first{grid-column:1/-1; min-height:78px;}

/* «призрак» под курсором или пальцем */
.drag-ghost{
  position:fixed; z-index:100; pointer-events:none; margin:0;
  opacity:.95; box-shadow:0 20px 34px -18px rgba(32,32,32,.55);
}

/* ---------- библиотека действий в окне ----------
   Карточки здесь только нажимаются: перетаскивание живёт в шпаргалке.
   Раскладка та же лента с точками, что у типов и разделов, — один жест на всё окно. */
.palette .note{
  cursor:pointer; height:100%;
  scroll-snap-align:start;
}
.palette .note:hover{border-color:var(--ink-faint); transform:translateY(-2px);}
/* ---------- переход к просмотру ---------- */
.actions{margin-top:22px;}
.actions-buttons{display:block;}
.actions-note{margin-top:10px; font-size:12.5px; color:var(--ink-faint); text-align:center;}
.btn.is-off{opacity:.35; pointer-events:none;}
.actions .btn:disabled{opacity:.55; cursor:wait;}

@media (max-width:600px){
  .add-zone.is-first{min-height:160px;}
  /* карточки действий на телефоне — три в ряду: у́же и «Пропылесосить» рвётся
     посреди слова, поэтому у их ленты своя плотность */
  .palette .pager-track{--per:3;}
  .palette .note .note-cap{font-size:11.5px; padding:8px 8px 0;}

}