/* ============================================================================
   board.css — «Доска» задач (board.js): колонки-статусы, карточки, ряд
   статусов на телефоне, «＋ Задача», подвалы закрытых колонок, перенос.
   Префикс kb- (у клавиатуры бота в style.css свои .kb-inline/.kb-row/.kb-btn —
   эти имена не трогаем). Цвета — токены style.css и calendar.css (--cal-st-*,
   --cal-c-*); светлой теме нужны только свои подложки колонок и карточек.
   ========================================================================== */

.kb-root{--kb-col-bg:var(--panel);--kb-card-bg:var(--panel-2);--kb-c:var(--accent);
  flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;position:relative}
html[data-theme="light"] .kb-root{--kb-col-bg:color-mix(in srgb,var(--text) 4%,var(--bg));--kb-card-bg:var(--panel)}
/* Призрак переноса — клон карточки в .cal-dnd-layer с классами корня: слою —
   никакой раскладки корня. */
.cal-dnd-layer.kb-root{display:block}
.kb-root [data-status="open"]{--kb-c:var(--cal-st-open,var(--accent))}
.kb-root [data-status="in_progress"]{--kb-c:var(--cal-st-in_progress,var(--warn))}
.kb-root [data-status="done"]{--kb-c:var(--cal-st-done,var(--green))}
.kb-root [data-status="canceled"]{--kb-c:var(--cal-st-canceled,var(--muted))}
/* новый фильтр грузится — прежняя доска видна приглушённой и не нажимается */
.kb-root.is-busy > .kb-cols{opacity:.55;pointer-events:none;transition:opacity .15s}
.kb-root.has-state > .kb-cols,.kb-root.has-state > .kb-phone-chips{display:none}

/* ---------- полосы (§J.5): ≥ 1100 — четыре равные, 600–1099 — по 260px, < 600 — пейджер ---------- */
.kb-cols{flex:1;min-height:0;display:grid;grid-template-rows:minmax(0,1fr);gap:12px;padding:12px 14px 14px}
.kb-root.is-grid .kb-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
.kb-root.is-grid.has-fold > .kb-cols{grid-template-columns:repeat(3,minmax(0,1fr)) 48px}
.kb-root.is-scroll .kb-cols{grid-template-columns:repeat(4,260px);overflow-x:auto;overscroll-behavior-x:contain}
.kb-root.is-scroll.has-fold > .kb-cols{grid-template-columns:repeat(3,260px) 48px}
.kb-root.is-pager .kb-cols{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc(100% - 32px);gap:0;
  padding:4px 0 0;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none}
.kb-root.is-pager .kb-cols::-webkit-scrollbar{display:none}
/* scroll-margin — иначе колонка прилипает к левому краю (поле снапа — рамка, не margin) */
.kb-root.is-pager .kb-col{scroll-snap-align:start;scroll-margin-left:12px;margin:0 4px 0 12px}
.kb-root.is-pager .kb-col:last-child{margin-right:12px}

/* ---------- телефон: ряд статусов — вкладки пейджера и цели броска ---------- */
.kb-phone-chips{display:none}
.kb-root.is-pager .kb-phone-chips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:6px 12px 2px;flex:none}
.kb-pchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:0;padding:5px 4px 6px;
  border-radius:12px;background:var(--chip);border:1.5px solid transparent;color:var(--text-2);font-size:12px;line-height:1.2;
  transition:background .15s,border-color .15s,opacity .15s}
.kb-pchip-t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.kb-pchip-n{font-size:14.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--kb-c)}
.kb-pchip.is-on{background:var(--accent-soft);color:var(--text);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.kb-pchip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kb-root.is-dragging .kb-pchip:not(.is-denied){border-style:dashed;border-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.kb-root.is-dragging .kb-pchip.is-denied{opacity:.4}
.kb-root.is-dragging .kb-pchip.is-over{border-style:solid;border-color:var(--accent);background:var(--accent-soft)}

/* ---------- колонка ---------- */
.kb-col{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--kb-col-bg);
  border:1px solid var(--border);border-radius:14px;transition:opacity .15s,border-color .15s}
.kb-col-h{display:flex;align-items:center;gap:8px;width:100%;flex:none;padding:10px 12px 6px;border-radius:14px 14px 0 0;
  font-size:13.5px;font-weight:700;color:var(--text);text-align:left;line-height:1.25}
button.kb-col-h{cursor:pointer}
@media (hover:hover){ button.kb-col-h:hover{background:var(--hover)} }
button.kb-col-h:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.kb-dot{width:9px;height:9px;border-radius:50%;background:var(--kb-c);flex:none}
.kb-col-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kb-fold{display:grid;place-items:center;color:var(--muted);transition:transform .15s}
.kb-fold svg{display:block}
.kb-col.is-collapsed .kb-fold{transform:rotate(-90deg)}
.kb-col.is-collapsed .kb-body,.kb-col.is-collapsed .kb-col-cap{display:none}
/* свёрнутая «Отменена» на компьютере — узкая полоса с подписью сверху вниз */
.kb-root:not(.is-pager) .kb-col.is-collapsed .kb-col-h{writing-mode:vertical-rl;flex:1;justify-content:flex-start;
  padding:12px 0;border-radius:14px;gap:10px}
.kb-root:not(.is-pager) .kb-col.is-collapsed .kb-col-t{overflow:visible}
.kb-root:not(.is-pager) .kb-col.is-collapsed .kb-fold{transform:none}
/* overflow-anchor:none — зазор переноса над видимыми карточками не должен «подпрыгивать» прокруткой (якорение) */
.kb-body{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;padding:2px 8px 10px;scrollbar-width:thin}
/* телефон: «＋» раздела не закрывает последнюю карточку */
.cal-root.is-phone .kb-body{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.kb-list{display:flex;flex-direction:column;gap:8px}
.kb-empty{margin:2px 0;padding:18px 10px;border:1.5px dashed var(--line);border-radius:12px;text-align:center;
  font-size:13px;color:var(--muted)}

/* ---------- перенос ---------- */
.kb-col-cap{flex:none;margin:0 10px 6px;padding:6px 9px;border-radius:9px;font-size:12px;line-height:1.3;font-weight:600;
  color:var(--danger);background:color-mix(in srgb,var(--danger) 12%,var(--kb-col-bg));border:1px solid color-mix(in srgb,var(--danger) 35%,transparent)}
.kb-root.is-dragging .kb-col.is-allowed:not(.is-source){border-style:dashed;border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
/* запретная колонка гаснет, а причина над ней — нет */
.kb-root.is-dragging .kb-col.is-denied > .kb-col-h,.kb-root.is-dragging .kb-col.is-denied > .kb-body{opacity:.42}
.kb-root.is-dragging .kb-col.is-denied > .kb-body{filter:grayscale(.6)}
.kb-root.is-dragging .kb-col.is-over{border-style:solid;border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.kb-gap{flex:none;border-radius:12px;border:1.5px dashed color-mix(in srgb,var(--accent) 60%,transparent);
  background:var(--accent-soft)}

/* ---------- карточка ---------- */
.kb-card{--kb-p:transparent;position:relative;display:flex;flex-direction:column;gap:6px;padding:9px 10px 9px 12px;
  border-radius:12px;background:var(--kb-card-bg);border:1px solid var(--border);box-shadow:0 1px 2px rgba(0,0,0,.18);
  cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;outline:none;
  transition:border-color .12s,box-shadow .12s,transform .12s}
html[data-theme="light"] .kb-card{box-shadow:0 1px 2px rgba(35,25,15,.07)}
.kb-card.has-prio{box-shadow:inset 3px 0 0 var(--kb-p),0 1px 2px rgba(0,0,0,.18)}
html[data-theme="light"] .kb-card.has-prio{box-shadow:inset 3px 0 0 var(--kb-p),0 1px 2px rgba(35,25,15,.07)}
.kb-card.is-p-urgent{--kb-p:var(--cal-c-red,var(--danger))}
.kb-card.is-p-high{--kb-p:var(--cal-c-orange,var(--accent))}
.kb-card.is-p-low{--kb-p:var(--cal-c-graphite,var(--muted))}
@media (hover:hover){ .kb-card:hover{border-color:var(--line)} }
.kb-card:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kb-card.is-lifted{box-shadow:var(--shadow);transform:scale(1.03);z-index:2}
.kb-card.cal-ghost{box-shadow:var(--shadow);cursor:grabbing}
.kb-card.cal-ghost.is-thin{opacity:.35}
.kb-card-top{display:flex;align-items:center;gap:6px;min-height:20px;font-size:12px;line-height:1.3}
.kb-chat{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 8px;border-radius:99px;
  background:var(--chip);color:var(--text-2);font-weight:600}
.kb-chat.is-personal{color:var(--muted)}
.kb-prio{flex:none;font-weight:700;color:var(--kb-p);white-space:nowrap}
.kb-grow{flex:1}
.kb-lock{flex:none;font-size:11px;line-height:1;opacity:.8}
.kb-more{flex:none;display:grid;place-items:center;width:26px;height:22px;margin:-3px -5px -3px 0;border-radius:7px;
  color:var(--text-2);opacity:0;transition:opacity .12s,background .12s}
.kb-more svg{display:block}
.kb-more:hover{background:var(--hover);color:var(--text)}
@media (hover:hover){ .kb-card:hover .kb-more{opacity:1} }
.kb-card:focus .kb-more,.kb-card:focus-within .kb-more{opacity:1}
/* палец: меню — долгим нажатием, «⋯» не нужно */
@media (hover:none){ .kb-more{display:none} }
/* пустая верхняя строка: «⋯» — в углу, заголовок — сразу сверху */
.kb-card.no-top .kb-card-top{position:absolute;top:7px;right:9px;min-height:0}
.kb-card.no-top .kb-title{padding-right:18px}
.kb-title{font-size:14px;font-weight:600;line-height:1.32;color:var(--text);overflow-wrap:anywhere;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-card.is-done .kb-title{text-decoration:line-through;color:var(--text-2)}
.kb-card.is-canceled .kb-title{color:var(--text-2)}
.kb-card-bot{display:flex;align-items:flex-end;gap:8px;min-height:22px}
.kb-meta{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:4px}
.kb-mchip{padding:1px 7px;border-radius:99px;background:var(--chip);font-size:12px;line-height:1.5;color:var(--text-2);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.kb-due.is-danger{background:color-mix(in srgb,var(--danger) 15%,transparent);color:var(--danger);font-weight:600}
.kb-due.is-warn{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn);font-weight:600}
.kb-card .kb-ava{width:24px;height:24px;font-size:9.5px;letter-spacing:0}
.kb-card .kb-ava img{pointer-events:none}
.kb-noone{flex:none;padding:1px 7px;border:1px dashed var(--line);border-radius:99px;font-size:11.5px;line-height:1.5;
  color:var(--muted);white-space:nowrap}

/* ---------- «＋ Задача» ---------- */
.kb-quick-b{display:block;width:100%;margin:2px 0 8px;padding:8px 10px;border-radius:10px;text-align:left;font-size:13.5px;
  font-weight:600;color:var(--text-2)}
@media (hover:hover){ .kb-quick-b:hover{background:var(--hover);color:var(--text)} }
.kb-quick-row{display:flex;align-items:center;gap:4px;margin:2px 0 8px}
.kb-quick-inp{flex:1;min-width:0;padding:8px 10px;border-radius:10px;background:var(--kb-card-bg);border:1.5px solid var(--accent);
  font:inherit;font-size:14px;color:var(--text);outline:none}
.kb-quick-x{width:32px;height:32px}
.kb-quick-x svg{display:block}

/* ---------- подвал закрытых колонок ---------- */
.kb-col-f{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 4px 0;text-align:center}
.kb-foot-t{font-size:12px;color:var(--muted)}
.kb-foot-b{padding:6px 12px;border-radius:9px;font-size:13px;font-weight:700;color:var(--accent)}
.kb-foot-b:disabled{opacity:.5;cursor:progress}
@media (hover:hover){ .kb-foot-b:hover{background:var(--accent-soft)} }
.kb-foot-b.is-link{font-weight:600;font-size:12.5px}

/* ---------- состояния вместо колонок ---------- */
.kb-state{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.kb-state > .nav-state{margin:auto}
.kb-skel .kb-col-t{color:var(--muted)}
.kb-skel .kb-body{display:flex;flex-direction:column;gap:8px;overflow:hidden}
.kb-skel-card{flex:none;height:72px;border-radius:12px;background:linear-gradient(90deg,var(--chip),var(--hover),var(--chip));
  background-size:200% 100%;animation:kbSkel 1.2s linear infinite}
.kb-skel-card.is-short{height:52px}
@keyframes kbSkel{from{background-position:200% 0}to{background-position:-200% 0}}

/* живой регион (проговаривание переносов) — только для экранных чтецов */
.kb-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap;pointer-events:none}

/* ---------- «Переместить в →» в меню карточки (openCtx) ---------- */
.ctx-menu .kb-mi-sub{flex:1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.ctx-menu .kb-mi-arr{color:var(--muted)}
.ctx-menu .kb-mi-off{cursor:default;opacity:.55;align-items:flex-start}
.ctx-menu .kb-mi-off:hover{background:none}
.ctx-menu .kb-mi-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.ctx-menu .kb-mi-t small{font-size:12px;line-height:1.3;color:var(--muted);white-space:normal;max-width:240px}

@media (prefers-reduced-motion:reduce){
  .kb-card,.kb-col,.kb-pchip,.kb-fold{transition:none}
  .kb-card.is-lifted{transform:none}
  .kb-skel-card{animation:none}
}