/*
Kanban

A board of columns of cards, sortable by pointer, touch and keyboard.

  .kanban                  root; a size container for the compact layout
  .kanban-nav              phone column switcher (compact only by default)
  .kanban-board            the row of columns; scrolls on its main axis
  .kanban-column           a column: header, scrolling content, footer
  .kanban-column-content   the card list; holds the drop placeholder
  .kanban-item             a card
  .kanban-overlay          the dragged copy, in the top layer
  .kanban-drop             placeholder in a column while a card is over it
  .kanban-board-drop       placeholder in the board while a column moves

Nothing changes size while dragging: siblings slide with transform and
placeholders are absolutely positioned.
*/

@layer components {

.kanban {
  --kanban-column-width:      var(--container-xs);
  --kanban-column-max-height: none;
  --kanban-card-gap:          var(--item-gap);
  --kanban-pad:               var(--surface-padding-sm);

  container:      kanban / inline-size;
  display:        flex;
  flex-direction: column;
  gap:            var(--kanban-card-gap);
  min-width:      0;
  color:          var(--ink);
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
}

/* Board */

.kanban-board {
  position:        relative;
  display:         flex;
  align-items:     stretch;
  gap:             var(--surface-gap);
  min-width:       0;
  overflow-x:      auto;
  overscroll-behavior-x: contain;
  padding-block-end: var(--kanban-card-gap);
}

/* With a mouse, an overlay scrollbar stays hidden until the board moves,
   so a column cut off at the edge reads as broken. Draw a thin bar. */
@media (pointer: fine) {
  .kanban-board {
    scrollbar-width: thin;
    scrollbar-color: var(--rule-strong) transparent;
  }

  .kanban-board::-webkit-scrollbar {
    height: 8px;
  }

  .kanban-board::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background:    var(--rule-strong);
  }
}

.kanban[data-orientation="vertical"] > .kanban-board {
  flex-direction: column;
  overflow-x:     visible;
}

/* Column */

.kanban-column {
  position:       relative;
  display:        flex;
  flex-direction: column;
  flex:           0 0 var(--kanban-column-width);
  min-width:      0;
  max-height:     var(--kanban-column-max-height);
  background:     var(--bg-soft);
  border:         var(--surface-border-width) solid var(--surface-border);
  border-radius:  var(--radius-surface);
}

.kanban[data-orientation="vertical"] .kanban-column {
  flex: none;
}

/* Only the card list gives way when a column is capped. */
.kanban-column > :not(.kanban-column-content) {
  flex: none;
}

.kanban-column[data-over] {
  border-color: var(--rule-strong);
}

.kanban-column[data-disabled] > .kanban-column-header {
  color: var(--ink-dim);
}

.kanban-column-header {
  display:     flex;
  align-items: center;
  gap:         var(--control-gap);
  min-height:  var(--control-height);
  padding:     var(--kanban-pad) var(--kanban-pad) 0;
}

.kanban-column-title {
  margin:         0;
  min-width:      0;
  overflow:       hidden;
  text-overflow:  ellipsis;
  white-space:    nowrap;
  font-family:    var(--font-ui);
  font-size:      var(--text-ui);
  font-weight:    var(--weight-strong);
  letter-spacing: var(--tracking-ui);
  text-transform: var(--case-ui);
  line-height:    var(--leading-snug);
}

.kanban-column-count {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       var(--tag-height);
  height:          var(--tag-height);
  padding:         0 var(--tag-padding-x);
  border-radius:   var(--radius-tag);
  background:      var(--bg-muted);
  color:           var(--ink-dim);
  font-size:       var(--tag-font-size);
  font-weight:     var(--tag-weight);
  font-variant-numeric: tabular-nums;
}

.kanban-column-actions {
  display:           flex;
  align-items:       center;
  gap:               var(--space-0-5);
  margin-inline-start: auto;
}

.kanban-column-actions:empty {
  display: none;
}

.kanban-column-content {
  position:        relative;
  display:         flex;
  flex-direction:  column;
  gap:             var(--kanban-card-gap);
  flex:            1 1 auto;
  min-height:      calc(var(--control-height) * 2);
  padding:         var(--kanban-pad);
  overflow-y:      auto;
  overflow-x:      hidden;
  overscroll-behavior-y: contain;
}

/* Card */

/* The list item; the card inside it is the activator (role=button). */
.kanban-item-row {
  display: contents;
}

.kanban-item {
  position:      relative;
  display:       flex;
  align-items:   flex-start;
  gap:           var(--control-gap);
  min-width:     0;
  padding:       var(--kanban-pad);
  background:    var(--surface-bg);
  border:        var(--surface-border-width) solid var(--surface-border);
  border-radius: var(--radius-surface);
  box-shadow:    var(--surface-shadow);
  color:         var(--ink);
  font-size:     var(--text-ui);
  line-height:   var(--leading-snug);
  /* A long URL or id wraps inside the card instead of running past it. */
  overflow-wrap: anywhere;
}

.kanban-item:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring), var(--surface-shadow);
}

.kanban-item[data-disabled] {
  opacity: var(--opacity-disabled);
}

/* The grab: the button a whole card or column gets when it holds controls
   (a role=button cannot hold them). It covers the card, takes no presses
   (they reach the card, which drags) and draws the focus ring. */
.kanban-item-grab,
.kanban-column-grab {
  display: none;
}

.kanban-item-grab[data-kanban-activator],
.kanban-column-grab[data-kanban-activator] {
  position:       absolute;
  inset:          calc(var(--surface-border-width) * -1);
  display:        block;
  border-radius:  inherit;
  pointer-events: none;
}

.kanban-item-grab:focus-visible {
  outline:    none;
  box-shadow: var(--focus-ring);
}

/* A column's grab covers the column, flush with the board, which scrolls and
   so clips: an outer ring would be cut off, so this one is drawn inside. */
.kanban-column-grab:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

/* Activators: what a press drags. */

.kanban-item[data-kanban-activator],
.kanban-column[data-kanban-activator],
.kanban-item[data-kanban-surface],
.kanban-column[data-kanban-surface] {
  cursor:       grab;
  touch-action: manipulation;
  user-select:  none;
}

.kanban-item-handle,
.kanban-column-handle {
  flex:         none;
  cursor:       grab;
  touch-action: none;
  color:        var(--ink-dim);
}

.kanban [data-kanban-activator][data-dragging],
.kanban [data-kanban-surface][data-dragging],
.kanban-overlay {
  cursor: grabbing;
}

.kanban[data-flat-cursor] [data-kanban-activator],
.kanban[data-flat-cursor] [data-kanban-surface],
.kanban[data-flat-cursor] .kanban-item-handle,
.kanban[data-flat-cursor] .kanban-column-handle,
.kanban[data-flat-cursor] .kanban-overlay {
  cursor: auto;
}

.kanban [data-kanban-activator][aria-disabled="true"],
.kanban [data-kanban-surface]:has(> [data-kanban-grab][aria-disabled="true"]) {
  cursor: not-allowed;
}

/* Drag */

/* The original stays in layout and keeps focus; the overlay shows it. */
.kanban-item[data-dragging],
.kanban-column[data-dragging] {
  opacity: 0;
}

.kanban[data-dragging] .kanban-item:not([data-dragging]),
.kanban[data-dragging="column"] .kanban-column:not([data-dragging]) {
  transition: transform var(--duration-enter) var(--ease-enter);
}

.kanban-drop,
.kanban-board-drop {
  position:       absolute;
  display:        none;
  pointer-events: none;
  border:         var(--control-border-width) dashed var(--rule-strong);
  border-radius:  var(--radius-surface);
  background:     var(--bg-muted);
}

.kanban-drop {
  inset-inline: var(--kanban-pad);
}

.kanban-drop[data-active],
.kanban-board-drop[data-active] {
  display: block;
}

.kanban-overlay {
  position:   fixed;
  inset:      auto;
  margin:     0;
  padding:    0;
  border:     0;
  background: transparent;
  overflow:   visible;
  color:      var(--ink);
}

.kanban-overlay[data-state="dropping"],
.kanban-overlay[data-source="keyboard"] {
  transition: transform var(--duration-exit) var(--ease-exit);
}

.kanban-overlay-custom,
.kanban-overlay-clone {
  width:  100%;
  height: 100%;
}

.kanban-overlay-custom:not(:has(> *)) {
  display: none;
}

.kanban-overlay:has(.kanban-overlay-custom > *) .kanban-overlay-clone {
  display: none;
}

.kanban-overlay-clone > .kanban-item,
.kanban-overlay-clone > .kanban-column {
  width:      100%;
  height:     100%;
  opacity:    1;
  transform:  none;
  box-shadow: var(--overlay-shadow);
  border-color: var(--rule-strong);
}

.kanban-overlay[data-source="keyboard"] .kanban-overlay-clone > * {
  box-shadow: var(--focus-ring), var(--overlay-shadow);
}

/* Tap Controls And Nav */

.kanban-item-move {
  display:     none;
  flex:        none;
  align-items: center;
  gap:         var(--space-0-5);
  margin-inline-start: auto;
}

.kanban-item-move.is-always {
  display: flex;
}

.kanban-item-move .button:dir(rtl) > svg,
.kanban-item-move:dir(rtl) .icon {
  scale: -1 1;
}

.kanban-nav {
  display: none;
}

.kanban-nav.is-always {
  display: block;
}

.kanban-nav-list {
  display:    flex;
  gap:        var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.kanban-nav-item {
  flex:            none;
  display:         inline-flex;
  align-items:     center;
  gap:             var(--control-gap);
  height:          var(--control-height-sm);
  padding:         0 var(--control-padding-x-sm);
  border:          var(--control-border-width) solid transparent;
  border-radius:   var(--radius-control);
  background:      transparent;
  color:           var(--ink-dim);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui-sm);
  font-weight:     var(--weight-ui);
  letter-spacing:  var(--tracking-ui);
  text-transform:  var(--case-ui);
  white-space:     nowrap;
  cursor:          pointer;
}

.kanban-nav-item:hover {
  background: var(--item-highlight);
  color:      var(--item-highlight-ink);
}

.kanban-nav-item[aria-current="true"] {
  background:   var(--item-selected);
  color:        var(--item-selected-ink);
  border-color: var(--control-border);
}

/* The nav list scrolls (so it clips) and its items sit flush with it: the
   ring is drawn inside the item. */
.kanban-nav-item:focus-visible {
  outline:    none;
  box-shadow: inset 0 0 0 var(--focus-ring-width) var(--focus);
}

/* COMPACT: one column at a time (elements man style/layout) */

@container kanban (max-width: 40rem) {
  .kanban[data-orientation="horizontal"] > .kanban-nav {
    display: block;
  }

  .kanban[data-orientation="horizontal"] > .kanban-board {
    scroll-snap-type: x mandatory;
    gap:              var(--kanban-card-gap);
  }

  .kanban[data-orientation="horizontal"] > .kanban-board > .kanban-column {
    flex:              0 0 100%;
    scroll-snap-align: start;
  }

  .kanban-item-move {
    display: flex;
  }
}

/* Snapping would pull an auto-scrolled board back to the column it left. */
.kanban[data-dragging] > .kanban-board {
  scroll-snap-type: none;
}

}