/* kanban.css — доска задач (js/board.js): колонки статусов .board-col, карточки .kcard, плейсхолдер .kcard-ph,
   подсветка цели переноса (.drop-ok — можно, .drop-no — нельзя: цвет + штрихованная рамка + курсор), ручка
   для пальца .kcard-grip, select статуса .kcard-move; ≤ 640px — одна колонка и вкладки .board-tabs.
   Владелец — агент `tasks` (волна 1). Правила: только var(--…) токены (tests/ui/test_ui_regulation.py),
   docs/THEMES.md; анимации гасятся prefers-reduced-motion (base.css обнуляет --dur*). */

.board {
  --board-col-min: 264px;
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(var(--board-col-min), 1fr);
  gap: var(--s3); overflow-x: auto; align-items: start; padding-bottom: var(--s2);
  overscroll-behavior-x: contain; scroll-padding-inline: var(--s2);
}
.board-col {
  display: flex; flex-direction: column; gap: var(--s2); min-width: 0; min-height: 160px;
  padding: var(--s2); border-radius: var(--r-lg); background: var(--surface-2);
  border: var(--border-w) solid transparent;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.board-col-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s1) 0; min-height: var(--control-h-sm); }
.board-col-head h2 { font-size: var(--fs-sm); margin: 0; }
.board-count { min-width: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--surface-3); color: var(--fg);
  font: var(--fw-semibold) var(--fs-xs)/20px var(--font-data); text-align: center; font-variant-numeric: tabular-nums; }
.board-window { margin-left: auto; }
.board-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2); min-height: 40px; }
.board-empty { padding: var(--s3) var(--s2); text-align: center; border: var(--border-w) dashed var(--border); border-radius: var(--r); }
.board-more { padding: 0 var(--s1); }

/* цель переноса: «можно» — акцентная рамка и мягкий фон; «нельзя» — красная пунктирная рамка (не только цвет) */
.board-col.drop-ok { background: var(--accent-soft); border-color: var(--accent); }
.board-col.drop-no { border-color: var(--danger); border-style: dashed; cursor: not-allowed; }

/* ---------- карточка ---------- */
.kcard {
  position: relative; display: flex; flex-direction: column; gap: var(--s2); min-width: 0;
  padding: var(--s2) var(--s3) var(--s3); border-radius: var(--r); background: var(--surface-1);
  border: var(--border-w) solid var(--border); box-shadow: var(--shadow); cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.kcard:hover { border-color: var(--border-strong); }
.kcard:focus-visible { outline: var(--focus-w) solid var(--ring); outline-offset: var(--focus-offset); }
/* просрочено — полоса слева + чип «просрочено N дн.» (второй сигнал помимо цвета) */
.kcard.overdue { border-left: calc(var(--border-w) + 2px) solid var(--danger); }
.kcard-top { display: flex; align-items: flex-start; gap: var(--s2); }
.kcard-title { flex: 1; min-width: 0; color: var(--fg); font-weight: var(--fw-medium); line-height: var(--lh-tight);
  text-decoration: none; overflow-wrap: anywhere; -webkit-user-drag: none; }
.kcard-title:hover { text-decoration: underline; }
.kcard-grip { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; margin: -2px -6px 0 0;
  border-radius: var(--r-sm); color: var(--fg-muted); cursor: grab; touch-action: none; }
.kcard-grip .icon { width: 16px; height: 16px; }
.kcard:hover .kcard-grip { color: var(--fg); background: var(--surface-2); }
.kcard .chips { min-width: 0; }
.kcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; min-width: 0; }
.kcard-who { display: inline-flex; align-items: center; gap: var(--s1h); min-width: 0; flex: 1 1 120px; }
.kcard-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); }
.kcard-move select { --input-h: var(--control-h-sm); width: auto; max-width: 150px; padding-block: 2px; font-size: var(--fs-sm); cursor: pointer; }
.kcard.pending { opacity: .6; }
.kcard.pending .kcard-move select { cursor: progress; }

/* перенос: карточка над доской, на её месте — плейсхолдер */
.kcard.dragging { z-index: var(--z-drag); box-sizing: border-box; box-shadow: var(--shadow-lg); border-color: var(--accent);
  cursor: grabbing; pointer-events: none; }
.kcard-ph { box-sizing: border-box; border-radius: var(--r); border: var(--border-w) dashed var(--accent); background: var(--accent-soft); }
body.board-dragging { user-select: none; cursor: grabbing; }
body.board-dragging .board { scroll-snap-type: none; }

@media (prefers-reduced-motion: no-preference) {
  .kcard.arrived { animation: kcard-in var(--dur-slow) var(--ease); }
}
@keyframes kcard-in { from { transform: translateY(-4px); opacity: .4; } to { transform: none; opacity: 1; } }

/* тач: ручка крупнее (видимая — та же, цель ≥ 44px) */
@media (pointer: coarse) {
  .kcard { cursor: auto; }
  .kcard-grip::after { content: ""; position: absolute; inset: -8px; }
  .kcard-grip { position: relative; }
}

/* ---------- вкладки статусов (телефон) ---------- */
.board-tabs { display: none; margin-bottom: var(--s3); }
@media (max-width: 640px) {
  .board-tabs { display: flex; }
  .board { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); overflow: visible; }
  .board-col { display: none; min-height: 0; }
  .board-col-head h2, .board-col-head .board-count { display: none; }   /* статус и число уже во вкладке */
  .board-col-head:not(:has(.board-window)) { display: none; }
  .board-col.active { display: flex; }
  .kcard-move select { max-width: none; }
}