/* Deck ticket layout for the shared card editor. The dialog shell, loading rail
   and printing picker retain their existing styles. */
.card-actions-overview {
    grid-template-columns: minmax(0, 21.25rem) minmax(0, 1fr);
    align-items: start;
    gap: 1.5rem;
}

.card-actions-overview .card-actions-art-frame {
    position: relative;
    min-width: 0;
    width: 100%;
    align-self: start;
    justify-self: stretch;
}

/* The shared navigation button sits over the artwork. */
.card-actions-art-frame .card-actions-card-navigation {
    position: absolute;
    z-index: 2;
    top: 42%;
    transform: translateY(-50%);
}

.card-actions-art-frame [data-card-actions-step="-1"] { left: var(--row-control-offset); }
.card-actions-art-frame [data-card-actions-step="1"] { right: var(--row-control-offset); }
/* Busy arrows remain visible; unavailable neighbours use the hidden attribute. */
.card-actions-art-frame .card-actions-card-navigation:disabled { visibility: visible; }

.card-actions-overview .card-actions-art {
    width: 100%;
    aspect-ratio: 488 / 680;
    align-self: start;
    justify-self: stretch;
}

.card-actions-overview .card-actions-art img {
    object-fit: contain;
}

.card-actions-overview .card-actions-primary {
    gap: 1rem;
}

.card-actions-overview .card-actions-chip-row {
    flex-direction: column;
    align-items: stretch;
    gap: .45rem;
    margin: 0;
}

.card-actions-overview .card-action-finishes,
.card-actions-overview .card-action-states {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
}

.card-actions-overview .card-action-finishes {
    justify-content: flex-start;
}

.card-printing-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.card-actions-overview .card-state-chip {
    min-height: 2.75rem;
    gap: .35rem;
    padding: .4rem .45rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    background: transparent;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 600;
}

.card-actions-overview .card-state-chip svg {
    flex: 0 0 1rem;
    width: 1rem;
    height: 1rem;
}

.card-actions-overview .card-state-chip.is-active {
    color: var(--focus);
    background: var(--accent-soft);
}

.card-actions-overview .card-state-chip:hover {
    color: var(--text);
    border-color: var(--line);
    background: var(--surface-muted);
}

.card-actions-overview [data-card-actions-manage] {
    min-width: 0;
}

.card-actions-overview .card-actions-controls {
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface-muted);
    box-shadow: none;
    container-type: inline-size;
    container-name: card-deck-controls;
}

.card-actions-overview .card-actions-controls-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin: 0 0 .8rem;
}

.card-actions-overview .card-actions-controls-heading h3 {
    margin: 0;
    font-size: .9rem;
}

.card-actions-overview .card-actions-target-row {
    grid-template-columns: minmax(0, 1fr);
    gap: .8rem;
}

.card-actions-overview .card-target-selector [data-card-target-query] {
    min-height: 2.75rem;
    padding: .45rem .65rem;
    border-color: var(--line-strong);
    border-radius: .55rem;
    background: var(--surface);
    font-size: .85rem;
}

.card-actions-overview .card-actions-quantity-heading {
    display: block;
    margin: 0 0 .35rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 400;
}

.card-actions-overview .card-actions-quantity-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

.card-actions-overview .card-actions-edit-row {
    display: grid;
    grid-template-columns: minmax(8.75rem, 1fr) auto;
    align-items: start;
    gap: .75rem;
}

.card-actions-overview .card-actions-edit-row:not(:has(.card-actions-cmc)) {
    grid-template-columns: minmax(0, 1fr);
}

.card-actions-overview .card-action-quantity-controls {
    align-items: start;
}

.card-actions-overview .card-actions-primary .card-action-zones {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: .4rem;
    margin-top: .85rem;
    padding: .85rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
}

.card-actions-overview .card-action-zones form {
    min-width: 0;
}

.card-actions-overview .card-action-zones .action-chip {
    width: 100%;
    min-height: 2.75rem;
    padding: .45rem .3rem;
    border-radius: .45rem;
    font-size: .78rem;
}

.card-actions-overview .card-actions-cmc {
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .35rem;
    color: var(--muted);
}

.card-actions-overview .card-actions-cmc label {
    font-size: .75rem;
}

.card-actions-overview .card-actions-cmc input {
    width: 3.4rem;
    min-height: 2.75rem;
    border-color: var(--line-strong);
    border-radius: .45rem;
    background: var(--surface);
    color: var(--text);
    font-size: 1rem;
}

@container card-deck-controls (min-width: 18.75rem) {
    .card-actions-overview .card-actions-quantity-field {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: .6rem;
    }

    .card-actions-overview .card-actions-quantity-heading {
        margin: 0;
    }

    .card-actions-overview .card-actions-cmc {
        flex-direction: row;
        align-items: center;
        gap: .4rem;
    }
}

.card-actions-overview .card-actions-price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .35rem .75rem;
    padding: .15rem 0 calc(.4rem - 1px);
    padding-inline-start: .5rem;
    border-bottom: 1px solid var(--line);
}

.card-actions-overview .card-actions-price {
    min-width: 0;
    margin: 0;
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.card-actions-overview .card-actions-stack-summary {
    max-width: 100%;
    margin-inline-start: auto;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: right;
    overflow-wrap: anywhere;
}

.card-actions-overview .card-actions-price > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: baseline;
    gap: .35rem;
}

.card-actions-overview .card-actions-price dt {
    color: var(--muted);
    font-size: .75rem;
}

.card-actions-overview .card-actions-price dd {
    margin: 0;
    color: var(--text);
    font-size: .9rem;
    font-weight: 650;
}

[data-card-actions-content] .card-tags,
[data-card-actions-content] .card-salt-score {
    margin-top: 1.25rem;
    padding: 1rem;
    border: 1px solid var(--line);
    border-radius: .8rem;
    background: var(--surface-muted);
    box-shadow: none;
}

.card-tags .card-tags-count {
    margin-left: .4rem;
    color: var(--muted);
    font-size: .75rem;
    font-weight: 400;
}

.card-tags .card-tags-list {
    gap: .5rem;
}

.card-tags .card-tag {
    border-color: var(--line);
    border-radius: .55rem;
    background: var(--surface);
    color: var(--text);
    font-size: .8rem;
}

.card-tags .card-tag.is-user-added {
    border-color: var(--focus);
    background: var(--accent-soft);
    color: var(--focus);
}

.card-tags .card-tag-drag {
    gap: .4rem;
    min-height: 2.75rem;
    padding: .45rem .25rem .45rem .5rem;
    border-radius: .55rem 0 0 .55rem;
}

.card-tags .card-tag-grip {
    color: var(--muted);
    font-size: 1rem;
    opacity: .8;
}

.card-tags .card-tag-remove {
    width: 2rem;
    min-height: 2.75rem;
    border-radius: 0 .55rem .55rem 0;
    color: var(--muted);
}

.card-tags[data-card-tags-editable=true] .card-tag form {
    flex-basis: 2rem;
}

.card-tags .card-tag:hover {
    border-color: var(--focus);
}

.card-tags .card-tag.is-dragging {
    border-color: var(--focus);
    border-style: dashed;
    background: var(--accent-soft);
}

.card-tags .card-tag.is-drop-before {
    box-shadow: -.2rem 0 0 var(--focus);
}

.card-tags .card-tag.is-drop-after {
    box-shadow: .2rem 0 0 var(--focus);
}

.card-salt-heading {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: .1rem .75rem;
}

[data-card-actions-content] .card-salt-heading h3,
.card-salt-average,
.card-salt-pending {
    margin: 0;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
}

.card-salt-heading h3 {
    grid-area: 1 / 1;
}

.card-salt-summary {
    display: contents;
    font-variant-numeric: tabular-nums;
}

.card-salt-average,
.card-salt-pending {
    grid-area: 1 / 2;
    text-align: right;
}

.card-salt-average {
    color: var(--card-salt-color);
    white-space: nowrap;
}

.card-salt-count,
.card-salt-pending {
    color: var(--muted);
}

.card-salt-count {
    grid-area: 2 / 2;
    font-size: .75rem;
    text-align: right;
}

.card-salt-rating-label {
    margin: 0 0 .5rem;
    font-size: .85rem;
}

.card-salt-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .5rem;
}

.card-salt-score .salt-fine { --card-salt-color: var(--price-green); }
.card-salt-score .salt-okay { --card-salt-color: var(--price-lime); }
.card-salt-score .salt-salty { --card-salt-color: var(--price-orange); }
.card-salt-score .salt-very-salty { --card-salt-color: var(--price-red); }

.card-salt-options .card-salt-option {
    min-width: 0;
    min-height: 2.75rem;
    padding: .65rem .5rem;
    border: 1px solid var(--line);
    border-radius: .55rem;
    background: var(--surface);
    color: var(--card-salt-color);
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    white-space: normal;
}

.card-salt-options .card-salt-option.is-active {
    border-color: var(--card-salt-color);
    background: color-mix(in srgb, var(--card-salt-color) 12%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--card-salt-color);
}

.card-salt-options .card-salt-option:hover {
    border-color: var(--card-salt-color);
    color: var(--card-salt-color);
}

[data-card-actions-content] .card-actions-printing-details,
[data-card-supporting-content] > section {
    margin-top: 1.25rem;
    padding: 1rem 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

[data-card-supporting-content] > section {
    border-top: 1px solid var(--line);
}

.card-printing-links {
    flex-wrap: nowrap;
    min-width: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    padding: .4rem;
    scroll-padding-inline: .4rem;
}

.card-printing-links a {
    flex: 0 0 auto;
    white-space: nowrap;
}

@media (max-width: 42rem) {
    .card-actions-overview {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .card-actions-overview .card-actions-art-frame,
    .card-actions-overview .card-actions-art {
        width: min(100%, 25rem);
        justify-self: center;
    }

    .card-actions-overview .card-actions-primary {
        gap: 1rem;
    }

    .card-salt-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (pointer: coarse) {
    .card-tags[data-card-tags-editable=true] .card-tag form {
        flex-basis: 2.75rem;
    }

    .card-tags .card-tag-remove {
        width: 2.75rem;
    }

}