/* Construction and training queues share the same card layout and actions. */
.village-page .activity-queue-card,
.recruit-page .activity-queue-card {
    background: var(--warriors-deep-brown);
    border: 1px solid var(--warriors-walnut);
    border-radius: 6px;
    box-shadow: none;
    color: var(--warriors-cream);
}

.village-page .activity-queue-card,
.recruit-page .activity-queue-card {
    display: grid;
    grid-template-columns: minmax(28px, 1.75rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.5rem 0.5rem;
}

.queue-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    font-size: 1.65rem;
    line-height: 1;
}

.queue-card-info { min-width: 0; }

.queue-card-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.15rem 0.35rem;
}

.queue-card-name {
    color: var(--warriors-cream);
    font-size: 0.85rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.queue-card-meta {
    color: var(--warriors-sandstone);
    font-size: 0.75rem;
    white-space: nowrap;
}

.queue-card-time {
    margin-top: 0.25rem;
    color: var(--warriors-sandstone);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.queue-card-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0.3rem 0.5rem;
    margin: 0;
    border: 1px solid var(--warriors-red-deep);
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.75rem;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
}

.queue-card-cancel:focus-visible {
    outline: 2px solid var(--warriors-copper);
    outline-offset: 2px;
}

.queue-card-progress {
    grid-column: 1 / -1;
    height: 5px;
    overflow: hidden;
    border-radius: 3px;
    background: var(--warriors-ink);
}

.queue-card-progress-fill {
    height: 100%;
    border-radius: inherit;
    background: var(--warriors-green);
    transition: width 0.3s linear;
}

/* Narrow queues keep the larger icon and title; Cancel sits beside the timer. */
@container (max-width: 230px) {
    .village-page .activity-queue-card,
    .recruit-page .activity-queue-card {
        grid-template-columns: minmax(28px, 1.75rem) minmax(0, 1fr) auto;
        column-gap: 0.35rem;
        row-gap: 0.4rem;
        padding-inline: 0.35rem;
    }
    .queue-card-info { display: contents; }
    .queue-card-icon { grid-column: 1; grid-row: 1 / 3; }
    .queue-card-identity { grid-column: 2 / -1; grid-row: 1; }
    .queue-card-name { font-size: 0.75rem; }
    .queue-card-time { grid-column: 2; grid-row: 2; margin: 0; }
    .queue-card-cancel { grid-column: 3; grid-row: 2; padding-inline: 0.3rem; }
    .queue-card-progress { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .queue-card-progress-fill { transition: none; }
}
.training-card-time { display: flex; flex-wrap: wrap; gap: 0.2rem 0.65rem; }
.training-card-time > span { max-width: 100%; overflow-wrap: anywhere; }