@layer cinder.tokens, cinder.foundation, cinder.components, cinder.utilities;
/* CIN-328 moved the column-handle and collapse controls onto the shared Button and
   deleted their bespoke styling, so Button's sidecar now has to travel with this one.
   Without it an a-la-carte consumer importing only `@lostgradient/cinder/kanban-board`
   gets controls with no styling at all — worse than before the change, since there is
   no longer any local rule to fall back on. */
@import '/assets/b156259ecf951ea64c145aa0f54c7115e89156d2e5434dff5584e0328b19afe7/components/button/button.css';
@layer cinder.components {
  .cinder-kanban-board {
    display: block;
    overflow-x: auto;
    padding-block-end: var(--cinder-space-2);
    background:
      linear-gradient(90deg, var(--cinder-surface) 30%, transparent) left center / 2rem 100%
        no-repeat local,
      linear-gradient(270deg, var(--cinder-surface) 30%, transparent) right center / 2rem 100%
        no-repeat local,
      linear-gradient(90deg, var(--cinder-kanban-board-scroll-edge), transparent) left center / 1rem
        100% no-repeat scroll,
      linear-gradient(270deg, var(--cinder-kanban-board-scroll-edge), transparent) right center /
        1rem 100% no-repeat scroll;
  }

  .cinder-kanban-board__keyboard-hint {
    margin: 0 0 var(--cinder-space-2);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    opacity: 0;
    transition: opacity var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-kanban-board:focus-within .cinder-kanban-board__keyboard-hint {
    opacity: 1;
  }

  .cinder-kanban-board__columns {
    display: grid;
    grid-auto-columns: minmax(var(--cinder-kanban-column-width), 1fr);
    grid-auto-flow: column;
    gap: var(--cinder-kanban-column-gap);
    align-items: start;
    min-inline-size: max-content;
  }

  .cinder-kanban-board__column {
    display: grid;
    grid-template-rows: auto minmax(4rem, 1fr);
    gap: var(--cinder-space-3);
    min-block-size: 8rem;
    padding: var(--cinder-space-3);
    border: 1px solid var(--cinder-border);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-kanban-column-background);
    box-shadow: var(--cinder-shadow-sm);
  }

  .cinder-kanban-board__column:not([data-cinder-expanded]) {
    grid-template-rows: auto;
    min-block-size: auto;
  }

  .cinder-kanban-board__column-header {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    gap: var(--cinder-space-2);
    align-items: center;
  }

  .cinder-kanban-board__column-title {
    min-inline-size: 0;
    overflow-wrap: anywhere;
    font-size: var(--cinder-text-sm);
    font-weight: var(--cinder-font-semibold);
    color: var(--cinder-text-default);
  }

  .cinder-kanban-board__card-count {
    display: inline-flex;
    align-items: center;
    margin-inline-start: var(--cinder-space-2);
    min-block-size: 1.25rem;
    padding-inline: var(--cinder-space-1-5);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-sm);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-xs);
    font-weight: var(--cinder-font-medium);
    white-space: nowrap;
  }

  .cinder-kanban-board__column-actions {
    display: inline-flex;
    gap: var(--cinder-space-1);
    align-items: center;
  }

  .cinder-kanban-board__column-handle svg {
    fill: currentcolor;
  }

  .cinder-kanban-board__collapse-chevron {
    transition: transform var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  .cinder-kanban-board__column[data-cinder-expanded] .cinder-kanban-board__collapse-chevron {
    transform: rotate(180deg);
  }

  .cinder-kanban-board__cards {
    display: grid;
    gap: var(--cinder-space-2);
    min-block-size: 3rem;
    padding: 0;
    margin: 0;
    list-style: none;
  }

  .cinder-kanban-board__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--cinder-space-2);
    align-items: start;
    padding: var(--cinder-space-3);
    border: 1px solid var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    background: var(--cinder-kanban-card-background);
    box-shadow: var(--cinder-shadow-xs);
  }

  .cinder-kanban-board__card.cinder-sortable-item--lifted {
    border-color: var(--cinder-ring-color);
    box-shadow: var(--cinder-shadow-md);
  }

  /*
   * During a pointer drag the card in the list becomes a placeholder showing
   * the drop target position. The preview overlay (in sortable-list.css) is
   * what follows the pointer; this keeps the drop slot visible in the column.
   *
   * Outline is used for the dashed drop indicator rather than changing border
   * width. The card rests at border-width 1px; switching to 2px during drag
   * would resize the box by 1px on each side, causing layout jitter and
   * skewing the midpoint geometry used by drop-target calculations.
   */
  .cinder-kanban-board__card.cinder-sortable-item--placeholder {
    block-size: var(--cinder-kanban-board-drop-placeholder-block-size, auto);
    min-block-size: var(--cinder-space-12, 3rem);
    opacity: 0.4;
    border-color: transparent;
    outline: 2px dashed var(--cinder-ring-color, currentColor);
    outline-offset: -1px;
    background: transparent;
    box-shadow: none;
  }

  .cinder-kanban-board__card.cinder-sortable-item--placeholder > * {
    /* Hide card content from sight; placeholder conveys drop position only. */
    visibility: hidden;
  }

  .cinder-kanban-board__drop-placeholder {
    pointer-events: none;
  }

  .cinder-kanban-board__card-content {
    min-inline-size: 0;
  }

  .cinder-kanban-board .cinder-sortable-item {
    min-inline-size: 0;
  }

  .cinder-kanban-board__card > .cinder-sortable-handle {
    align-self: start;
  }

  .cinder-kanban-board__empty {
    display: grid;
    place-items: center;
    min-block-size: 3rem;
    padding: var(--cinder-space-3);
    border: 1px dashed var(--cinder-border-muted);
    border-radius: var(--cinder-radius-md);
    color: var(--cinder-text-muted);
    font-size: var(--cinder-text-sm);
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-kanban-board__card.cinder-sortable-item--placeholder {
      opacity: 0.6;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .cinder-kanban-board__card,
    .cinder-kanban-board__column {
      transition:
        border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
        box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard),
        background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
    }
  }

  :root:is([data-cinder-reduced-motion='false'], [data-reduced-motion='off'])
    .cinder-kanban-board__card,
  :root:is([data-cinder-reduced-motion='false'], [data-reduced-motion='off'])
    .cinder-kanban-board__column {
    transition:
      border-color var(--cinder-duration-fast) var(--cinder-ease-standard),
      box-shadow var(--cinder-duration-fast) var(--cinder-ease-standard),
      background-color var(--cinder-duration-fast) var(--cinder-ease-standard);
  }

  /* ========================================
   * DRAG PREVIEW OVERLAY (shared with sortable-list)
   * ======================================== */

  /*
   * The drag preview portal is created by _sortable-item.svelte and appended
   * to <body> — outside the component tree. A consumer importing only
   * cinder/kanban-board/styles would miss sortable-list.css and therefore
   * miss these rules, leaving the portal unstyled and unpositioned.
   *
   * These rules are intentionally kept identical to the ones in
   * sortable-list.css so both subpath import paths (cinder/sortable-list/styles
   * and cinder/kanban-board/styles) produce a correctly positioned preview.
   * The cinder/styles aggregator loads both CSS files; having the rule twice
   * in the cascade is harmless — the last identical declaration wins.
   *
   * Positioning uses CSS custom properties set by _sortable-item.svelte:
   *   --preview-left / --preview-top   — row's bounding rect at lift time (physical viewport coords)
   *   --preview-dx / --preview-dy      — pointer delta since lift
   *   --preview-width / --preview-height — row dimensions at lift time
   *
   * Physical left/top (not logical inset-inline-start/inset-block-start) are used
   * because --preview-left/--preview-top come from getBoundingClientRect(), which
   * always returns physical viewport distances regardless of writing direction.
   * Using inset-inline-start would map to the right edge in RTL layouts, causing
   * the preview to appear on the wrong side of the viewport.
   */
  .cinder-sortable-drag-preview {
    position: fixed;
    top: calc(var(--preview-top, 0px) + var(--preview-dy, 0px));
    left: calc(var(--preview-left, 0px) + var(--preview-dx, 0px));
    width: var(--preview-width, auto);
    height: var(--preview-height, auto);
    z-index: var(--cinder-z-drag-preview);
    pointer-events: none;
    box-shadow: var(--cinder-shadow-md);
    border-radius: var(--cinder-radius-md);
    /* Subtle rotation and scale to distinguish preview from the placeholder. */
    transform: rotate(2deg) scale(1.02);
    transform-origin: center top;
    will-change: top, left;
    overflow: hidden;
  }

  /* Restore full opacity and visibility inside the preview clone. */
  .cinder-sortable-drag-preview > * {
    opacity: 1;
    visibility: visible;
  }

  /* Inside the preview clone keep children visible even if the source
     had placeholder--hidden children. */
  .cinder-sortable-drag-preview > * > * {
    visibility: visible;
  }

  @media (prefers-reduced-motion: reduce) {
    :root:not([data-cinder-reduced-motion='false']):not([data-reduced-motion='off'])
      .cinder-sortable-drag-preview {
      transform: none;
    }
  }
}