/* FTA card hierarchy: work title, signals, context and ownership. */
.kanban-page[data-kanban-design="stages"] .kanban-card {
    border-width: 1px;
    border-radius: .35rem;
    box-shadow: none;
    gap: .3rem;
}

/* The original theme rules also set a priority-colored left edge. */
.kanban-page[data-kanban-design="stages"] .kanban-card,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .kanban-page[data-kanban-design="stages"] .kanban-card,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .kanban-page[data-kanban-design="stages"] .kanban-card {
    border-color: var(--kanban-border);
    border-left-color: var(--kanban-border);
    box-shadow: none;
}

/* A restrained edge and elevation keep light cards separate from the canvas. */
main.kanban-page[data-kanban-design="stages"]:not(.dxbl-theme-dark *):not(.dxbl-theme-fluent-mode-dark *) .kanban-board .kanban-card {
    border-color: #97b8ad;
    border-left-color: #97b8ad;
    box-shadow: 0 .12rem .3rem rgba(19, 53, 47, .08);
}

main.kanban-page[data-kanban-design="stages"]:not(.dxbl-theme-dark *):not(.dxbl-theme-fluent-mode-dark *) .kanban-board .kanban-card:hover,
.kanban-page[data-kanban-design="stages"] .kanban-card:hover,
body.dxbl-theme-fluent:not(.dxbl-theme-dark):not(.dxbl-theme-fluent-mode-dark) .kanban-page[data-kanban-design="stages"] .kanban-card:hover,
:is(.dxbl-theme-dark, .dxbl-theme-fluent-mode-dark) .kanban-page[data-kanban-design="stages"] .kanban-card:hover {
    border-color: color-mix(in srgb, var(--kanban-text) 40%, var(--kanban-border));
    border-left-color: color-mix(in srgb, var(--kanban-text) 40%, var(--kanban-border));
    box-shadow: 0 .15rem .4rem color-mix(in srgb, var(--kanban-text) 8%, transparent);
    transform: none;
}

.kanban-page[data-kanban-design="stages"] .kanban-card.can-open:focus-visible {
    outline: 2px solid var(--kanban-text);
    outline-offset: 2px;
}

.kanban-page[data-kanban-design="stages"] .kanban-card.compact,
.kanban-page[data-kanban-design="stages"] .kanban-card.detailed {
    gap: .25rem;
    padding: .5rem .6rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card.detailed {
    gap: .2rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-heading {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: .25rem;
    min-width: 0;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-signals {
    align-items: center;
    display: flex;
    gap: .5rem;
    min-width: 0;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-signals .kanban-card-type {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--kanban-muted);
    font-size: var(--kanban-ui-small-font-size);
    font-weight: 650;
    line-height: 1.2;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-signals .kanban-card-type::before {
    background: var(--type-color);
    border-radius: .1rem;
    content: "";
    display: inline-block;
    height: .45rem;
    margin-right: .3rem;
    vertical-align: .04rem;
    width: .45rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-signals .kanban-priority {
    color: var(--kanban-muted);
    flex: 0 0 auto;
    font-size: var(--kanban-ui-small-font-size);
    line-height: 1.2;
    white-space: nowrap;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-signals .kanban-priority i {
    border-radius: 50%;
    height: .4rem;
    width: .4rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-heading-actions {
    flex: 0 0 auto;
    margin-left: auto;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-order-actions {
    gap: .05rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-order-actions button {
    height: 1.2rem;
    width: 1.2rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-summary,
.kanban-page[data-kanban-design="stages"] .kanban-card.detailed .kanban-card-summary {
    color: var(--kanban-text);
    flex: 0 0 auto;
    font-size: var(--kanban-ui-font-size);
    font-weight: 700;
    line-height: 1.25;
    -webkit-line-clamp: 2;
}

.kanban-page[data-kanban-design="stages"] .kanban-card.compact .kanban-card-summary {
    flex: 0 0 auto;
    min-height: 1.25em;
    -webkit-line-clamp: 1;
}

.kanban-page[data-kanban-design="stages"] .kanban-card.detailed .kanban-card-summary {
    -webkit-line-clamp: 1;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-description {
    color: var(--kanban-muted);
    display: -webkit-box;
    flex: 0 0 auto;
    font-size: var(--kanban-ui-meta-font-size);
    line-height: 1.3;
    min-height: 1.3em;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-tags {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    overflow: hidden;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-tags span {
    background: color-mix(in srgb, var(--kanban-muted) 9%, var(--kanban-card));
    border-radius: .15rem;
    color: var(--kanban-muted);
    line-height: 1.2;
    overflow: hidden;
    padding: .08rem .25rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-meta {
    border-top: 0;
    column-gap: .45rem;
    flex: 0 0 auto;
    font-size: var(--kanban-ui-small-font-size);
    min-height: 0;
    overflow: visible;
    padding-top: 0;
    row-gap: .15rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-footer {
    border-top: 1px solid var(--kanban-border);
    flex: 0 0 auto;
    flex-wrap: nowrap;
    gap: .4rem;
    min-width: 0;
    padding-top: .25rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-footer .kanban-card-key,
.kanban-page[data-kanban-design="stages"] .kanban-card.detailed .kanban-card-footer .kanban-card-key {
    color: var(--kanban-muted);
    flex: 0 0 auto;
    font-size: var(--kanban-ui-small-font-size);
    font-weight: 650;
    line-height: 1.25;
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-footer button.kanban-card-key:focus-visible {
    outline: 2px solid var(--kanban-text);
    outline-offset: 2px;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-assignee {
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    gap: .3rem;
    min-width: 0;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-assignee > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-assignee .kanban-avatar {
    flex: 0 0 auto;
    height: 1.2rem;
    width: 1.2rem;
}

.kanban-page[data-kanban-design="stages"] .kanban-card-footer .kanban-card-menu {
    margin-left: auto;
}

@media (pointer: coarse) {
    .kanban-page[data-kanban-design="stages"] .kanban-card.compact {
        gap: .1rem;
        padding-block: .25rem;
    }

    .kanban-page[data-kanban-design="stages"] .kanban-card.compact .kanban-card-footer {
        padding-top: .1rem;
    }

    .kanban-page[data-kanban-design="stages"] .kanban-card-order-actions button {
        min-height: 2rem;
        min-width: 2rem;
    }
}