/* Редактор заходу: смуга дій, перелік міток у колонці, вибір кольору.
   Окремий файл, бо base.css переріс межу в 300 рядків. Підключається
   після canvas.css; спільних селекторів однакової ваги з ним немає. */

/* ─── редактор заходу ─── */
/* Рядок дій над полотном. Стандарт редакторів: полотно на весь екран,
   інструменти смугою зверху, властивості — панеллю на вибір. */
.editbar { display: flex; align-items: center; gap: var(--gap-xs);
  padding: 8px var(--gap); border-bottom: 1px solid var(--line);
  background: var(--raised); overflow-x: auto; white-space: nowrap; }
.editbar-where { font-weight: 600; margin-right: var(--gap-xs); }
.editbar .nowrap { display: inline-flex; }
/* Телефон: кнопки переносяться, а не ховаються за край. */
@media (max-width: 619px) {
  .editbar { flex-wrap: wrap; overflow-x: visible; white-space: normal; }
}

/* ─── рядок переліку в колонці редактора ─── */
.sideitem { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; min-height: 40px; background: none; border: 0; border-bottom: 1px solid var(--line);
  color: var(--ink); font: inherit; cursor: pointer; }
.sideitem:hover { background: var(--action-soft); }
.sideitem .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); flex: none; }
.sideitem b { display: block; font-weight: 500; font-size: 14px; }
.sideitem small { display: block; color: var(--muted); font-size: 12px; }

/* ─── вибір кольору мітки ─── */
.colorrow { display: flex; gap: 8px; flex-wrap: wrap; }
.swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent;
  background: var(--ok); cursor: pointer; }
.swatch.auto { background: conic-gradient(var(--ok) 0 33%, var(--warn) 0 66%, var(--crit) 0); }
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--bg) inset; }

/* ─── перелік міток: кемп і його точки одним блоком ─── */
.sideitem.zone b { font-weight: 600; }
.sideitem.zone .dot.big { width: 12px; height: 12px; }