/* =========================================================
   suite-board.css: the Kanban board (Ui/Board, Ui/BoardCard) and what dragging draws (suite-board.js): the lifted
   copy, the slot where a card will land, the places it may not go.

   The grid's tracks are variables (--board-col-w, --board-fold-w, --board-lane-w) that the component names in its
   grid-template-columns and this sheet sizes per screen: on a phone a column is most of the screen wide and the
   board snaps from column to column, one lane at a time (the lane picker). Built from the tokens only.
   ========================================================= */

html[data-ui="next"] .board{
  --board-col-w:minmax(250px,1fr);
  --board-fold-w:46px;
  --board-lane-w:196px;
  --board-h:calc(100vh - 240px);
  position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;
}
html[data-ui="next"] .board.compact{--board-col-w:minmax(196px,1fr);--board-lane-w:170px;}
html[data-ui="next"] .board-notice{margin:0;}
html[data-ui="next"] .board-lanepick{display:none;}

/* The board scrolls both ways inside its frame, so the column heads stay on top and the lane heads on the left. */
html[data-ui="next"] .board-scroll{
  overflow:auto;max-height:max(440px,var(--board-h));overscroll-behavior:contain;
  background:var(--field);border:1px solid var(--line);border-radius:var(--r-panel);
}
html[data-ui="next"] .board-grid{display:grid;min-width:min-content;align-items:stretch;}

/* ---------- Column heads: title, count (over its limit in amber), a line of summary; fold ---------- */
html[data-ui="next"] .board-head{
  --board-tone:transparent;
  position:sticky;top:0;z-index:3;display:flex;flex-direction:column;gap:2px;min-width:0;
  padding:10px 10px 9px 36px;background:var(--field);
  border-bottom:1px solid var(--line);border-left:1px solid var(--line-soft);
  box-shadow:inset 0 3px 0 var(--board-tone);
}
html[data-ui="next"] .board-head.tone-info{--board-tone:var(--blue);}
html[data-ui="next"] .board-head.tone-good{--board-tone:var(--status-good);}
html[data-ui="next"] .board-head.tone-warn{--board-tone:var(--status-warn);}
html[data-ui="next"] .board-head.tone-crit{--board-tone:var(--status-crit);}
html[data-ui="next"] .board-head.is-current{background:color-mix(in srgb, var(--blue) 7%, var(--field));}
html[data-ui="next"] .board-title{display:flex;align-items:center;gap:7px;min-width:0;}
html[data-ui="next"] .board-title b{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-ui="next"] .board-head.is-current .board-title b{color:var(--blue);}
html[data-ui="next"] .board-count{
  flex-shrink:0;padding:0 6px;border-radius:var(--ct-radius-full);background:var(--line-soft);
  font-size:11.5px;font-weight:500;color:var(--ink-3);font-variant-numeric:tabular-nums;
}
html[data-ui="next"] .board-count.over{background:color-mix(in srgb, var(--status-warn) 14%, transparent);color:var(--status-warn);}
html[data-ui="next"] .board-sub{font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-ui="next"] .board-fold{
  position:absolute;left:6px;top:8px;width:24px;height:24px;display:grid;place-items:center;
  border:0;border-radius:var(--r-item);background:transparent;color:var(--ink-4);cursor:pointer;
  transition:background-color .12s ease, color .12s ease, transform .15s var(--ease);
}
html[data-ui="next"] .board-fold:hover{background:var(--hover);color:var(--ink);}
html[data-ui="next"] .board-fold svg{width:14px;height:14px;}
/* Folded: a narrow strip with the title on its side and the count. */
html[data-ui="next"] .board-head.is-folded{padding:38px 0 10px;align-items:center;}
html[data-ui="next"] .board-head.is-folded .board-fold{left:50%;margin-left:-12px;transform:rotate(-90deg);}
html[data-ui="next"] .board-head.is-folded .board-title{flex-direction:column;}
html[data-ui="next"] .board-head.is-folded .board-title b{writing-mode:vertical-rl;max-height:180px;}

/* ---------- Lanes: a person (an avatar) or a group, on the left of each row ---------- */
html[data-ui="next"] .board-corner{
  position:sticky;top:0;left:0;z-index:4;padding:10px;background:var(--field);
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-4);
}
html[data-ui="next"] .board-lane{
  position:sticky;left:0;z-index:2;display:flex;align-items:flex-start;gap:9px;min-width:0;padding:10px;
  background:var(--surface);border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line);
}
html[data-ui="next"] .board-lane-text{min-width:0;line-height:1.3;}
html[data-ui="next"] .board-lane-text b{display:block;font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;}
html[data-ui="next"] .board-lane-text span{display:block;margin-top:2px;font-size:11.5px;color:var(--ink-4);}
html[data-ui="next"] :is(.board-avatar,.bcard-avatar){
  display:grid;place-items:center;flex-shrink:0;border-radius:50%;
  background:var(--tint);color:var(--blue);font-family:var(--font-head);font-weight:700;
}
html[data-ui="next"] .board-avatar{width:28px;height:28px;font-size:11px;}

/* ---------- Cells: where cards are, and where they land ---------- */
html[data-ui="next"] .board-cell{
  position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;min-height:92px;padding:8px;
  border-left:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
  transition:background-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
html[data-ui="next"] .board.compact .board-cell{padding:6px;gap:5px;min-height:72px;}
html[data-ui="next"] .board-cell.is-current{background:color-mix(in srgb, var(--blue) 4%, transparent);}
html[data-ui="next"] .board-cell.is-folded{min-height:0;padding:0;}
html[data-ui="next"] .board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
html[data-ui="next"] .board.compact .board-list{gap:5px;}
html[data-ui="next"] .board-empty{
  padding:14px 10px;border:1px dashed var(--line);border-radius:var(--r-ctl);
  font-size:12px;color:var(--ink-4);text-align:center;
}
html[data-ui="next"] .board-more{
  width:100%;padding:6px;border:0;border-radius:var(--r-item);background:transparent;cursor:pointer;
  font:inherit;font-size:12px;font-weight:500;color:var(--blue);
}
html[data-ui="next"] .board-more:hover{background:var(--hover);}
html[data-ui="next"] .board-foot{margin-top:auto;font-size:12px;color:var(--ink-4);}

/* While a card moves: the target cell in blue, the places it may not go dimmed and striped, with why on them. */
html[data-ui="next"] .board.is-dragging{touch-action:none;}
html[data-ui="next"] .board.is-dragging .board-cell.is-target{
  background:color-mix(in srgb, var(--blue) 7%, transparent);box-shadow:inset 0 0 0 2px var(--blue-edge);
}
html[data-ui="next"] .board.is-dragging .board-cell.is-target .board-empty{border-color:var(--blue-edge);color:var(--blue);}
html[data-ui="next"] .board.is-dragging .board-cell.is-blocked{
  background-image:repeating-linear-gradient(135deg, var(--line-soft) 0 6px, transparent 6px 12px);
}
html[data-ui="next"] .board.is-dragging .board-cell.is-blocked > *{opacity:.45;}
html[data-ui="next"] .board.is-dragging .board-cell.is-blocked::before{
  content:attr(data-blocked);position:sticky;top:44px;z-index:1;align-self:stretch;
  padding:5px 8px;border-radius:var(--r-item);background:var(--surface);box-shadow:var(--shadow);
  font-size:11.5px;line-height:1.35;color:var(--ink-3);
}
html[data-ui="next"] .board.is-dragging .board-head.is-blocked{opacity:.55;}
html[data-ui="next"] .board.is-dragging .board-cell.is-blocked.is-target{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--red) 45%, transparent);}

/* ---------- Cards ---------- */
html[data-ui="next"] .board-card{
  position:relative;list-style:none;min-width:0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-ctl);box-shadow:var(--shadow);
  cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  transition:border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
html[data-ui="next"] .board-card:hover{border-color:color-mix(in srgb, var(--blue) 35%, var(--line));}
html[data-ui="next"] .board-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
html[data-ui="next"] .board-card-face{padding:9px 36px 9px 11px;font-size:12.5px;color:var(--ink-2);min-width:0;}
html[data-ui="next"] .board.compact .board-card-face{padding:7px 32px 7px 9px;}
html[data-ui="next"] .board-card-face:has(> .bcard){padding:0;}
html[data-ui="next"] .board-card.is-locked{cursor:default;}
html[data-ui="next"] .board-card.is-lifting{opacity:.3;}
html[data-ui="next"] .board-card.is-home{opacity:.75;border-style:dashed;}
/* Picked up with the keyboard: it stays in place, ringed, while the slot moves. */
html[data-ui="next"] .board-card.is-lifted{opacity:.6;box-shadow:0 0 0 2px var(--blue), var(--shadow-pop);}
/* Saving: a thin bar running along the bottom. */
html[data-ui="next"] .board-card.is-pending{border-color:var(--blue-edge);}
html[data-ui="next"] .board-card.is-pending::after{
  content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--blue), transparent) no-repeat;background-size:40% 100%;
  animation:board-saving 1.1s linear infinite;
}
html[data-ui="next"] .board-card.is-denied{animation:board-no .3s ease;}
@keyframes board-saving{from{background-position:-60% 0;}to{background-position:160% 0;}}
@keyframes board-no{25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}

/* Move to: on hover and focus with a mouse, always on a touch screen. */
html[data-ui="next"] .board-move{
  position:absolute;top:6px;right:6px;width:26px;height:26px;display:grid;place-items:center;
  border:0;border-radius:var(--r-item);background:transparent;color:var(--ink-4);cursor:pointer;
  opacity:0;transition:opacity .12s ease, background-color .12s ease, color .12s ease;
}
html[data-ui="next"] .board-move svg{width:14px;height:14px;}
html[data-ui="next"] .board-move:hover{background:var(--hover);color:var(--ink);}
html[data-ui="next"] .board-card:hover .board-move,
html[data-ui="next"] .board-card:focus-within .board-move{opacity:1;}
html[data-ui="next"] .board-move:focus-visible{opacity:1;outline:2px solid var(--blue);outline-offset:0;}
@media (hover:none){ html[data-ui="next"] .board-move{opacity:1;width:32px;height:32px;top:3px;right:3px;} }

/* The lifted copy under the pointer, and the slot where it will land. */
html[data-ui="next"] .board-ghost{
  position:fixed;left:0;top:0;z-index:200;margin:0;pointer-events:none;cursor:grabbing;
  border-color:var(--blue-edge);box-shadow:var(--shadow-lg);opacity:.97;
}
html[data-ui="next"] .board-ghost .board-move{display:none;}
html[data-ui="next"] .board-ghost.is-blocked{border-color:var(--red);}
html[data-ui="next"] .board-ghost-reason{margin:0 10px 8px;padding:4px 7px;border-radius:var(--r-item);background:color-mix(in srgb, var(--red) 7%, transparent);font-size:11.5px;color:var(--red-dark);}
html[data-ui="next"] .board-ghost-reason:empty{display:none;}
html[data-ui="next"] .board-slot{
  list-style:none;min-height:34px;padding:8px 10px;border:1.5px dashed var(--blue-edge);border-radius:var(--r-ctl);
  background:var(--tint);font-size:12px;color:var(--blue);
}

/* ---------- The Move to list ---------- */
html[data-ui="next"] .board-menu-lane{padding:10px var(--pad);border-bottom:1px solid var(--line-soft);}

/* ---------- BoardCard: the suite's card face ---------- */
html[data-ui="next"] .bcard{
  --bcard-tone:transparent;
  display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 36px 9px 11px;border-radius:inherit;
  box-shadow:inset 3px 0 0 var(--bcard-tone);font-size:12.5px;line-height:1.4;color:var(--ink-2);
}
html[data-ui="next"] .board.compact .bcard{padding:7px 32px 7px 9px;gap:2px;}
html[data-ui="next"] .bcard.tone-info{--bcard-tone:var(--blue);}
html[data-ui="next"] .bcard.tone-good{--bcard-tone:var(--status-good);}
html[data-ui="next"] .bcard.tone-warn{--bcard-tone:var(--status-warn);}
html[data-ui="next"] .bcard.tone-crit{--bcard-tone:var(--status-crit);}
html[data-ui="next"] .bcard-top{display:flex;align-items:center;gap:6px;min-width:0;color:var(--ink-4);}
html[data-ui="next"] .bcard-top svg.ico{width:14px;height:14px;}
html[data-ui="next"] .bcard-key{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-3);white-space:nowrap;}
html[data-ui="next"] .bcard-chips{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:auto;}
html[data-ui="next"] .bcard-title{font-size:13px;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere;}
html[data-ui="next"] a.bcard-title:hover{color:var(--blue);text-decoration:underline;}
html[data-ui="next"] .bcard-meta{color:var(--ink-4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
html[data-ui="next"] .bcard-foot{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-width:0;margin-top:3px;color:var(--ink-3);font-size:12px;}
html[data-ui="next"] .bcard-foot > *{white-space:nowrap;}
html[data-ui="next"] .bcard-avatar{width:22px;height:22px;font-size:10px;}
html[data-ui="next"] .bcard-due{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;white-space:nowrap;}
html[data-ui="next"] .bcard-due svg.ico{width:13px;height:13px;vertical-align:0;}
html[data-ui="next"] .bcard-due.is-late{color:var(--status-crit);font-weight:600;}
html[data-ui="next"] .bcard-due.is-soon{color:var(--status-warn);}

/* ---------- A phone: columns most of the screen wide, snapping; one lane at a time ---------- */
@media (max-width:760px){
  html[data-ui="next"] :is(.board,.board.compact){--board-col-w:min(85vw,340px);--board-fold-w:40px;--board-lane-w:0px;--board-h:calc(100dvh - 190px);}
  html[data-ui="next"] .board-scroll{scroll-snap-type:x mandatory;scroll-padding-left:0;}
  html[data-ui="next"] :is(.board-head,.board-cell){scroll-snap-align:start;}
  html[data-ui="next"] .board.has-lanes .board-lanepick{display:block;max-width:320px;}
  html[data-ui="next"] .board.has-lanes :is(.board-lane,.board-corner){display:none;}
  html[data-ui="next"] .board.has-lanes .board-cell:not(.is-lane){display:none;}
  html[data-ui="next"] .board-card{touch-action:manipulation;}
}

@media (prefers-reduced-motion:reduce){
  html[data-ui="next"] :is(.board-cell,.board-card,.board-move,.board-fold){transition:none;}
  html[data-ui="next"] .board-card.is-pending::after{animation:none;background-size:100% 100%;opacity:.6;}
  html[data-ui="next"] .board-card.is-denied{animation:none;}
}