/* The stage list that appears while a card is carried on a narrow screen. Columns stack
   there and empty ones are hidden, so this is the target every stage can be reached on. */
.kanban-tray { position: fixed; left: 16px; right: 16px; z-index: 2147482999; display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line-strong, #cfd4db); border-radius: 16px; background: var(--surface, #fff); color: var(--text, var(--brand-text, #202225)); box-shadow: 0 16px 40px rgb(15 18 24 / .18); pointer-events: none; animation: kanban-tray-in 140ms cubic-bezier(.23, 1, .32, 1); }
.kanban-tray.is-top { top: 64px; }
.kanban-tray.is-bottom { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.kanban-tray-title { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-soft, #59616c); }
.kanban-tray-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kanban-tray-target { display: flex; align-items: center; min-height: 48px; padding: 6px 10px; border: 1px dashed var(--line-strong, #cfd4db); border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.kanban-tray-target.is-kanban-drop-target { border: 2px solid var(--purple, var(--brand-link, #176d86)); background: color-mix(in srgb, var(--purple, var(--brand-link, #176d86)) 12%, var(--surface, #fff)); }
@keyframes kanban-tray-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .kanban-tray { animation: none; } }