/* V20 add/select cards and circular remove controls, only for DA and mortals. */
:is(#da-editor, #nv-editor) .rating-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    margin: 0;
    border: 1px solid var(--accent, #8f1d24);
    border-radius: 50%;
    background: var(--accent, #8f1d24);
    color: #fff;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
}
:is(#da-editor, #nv-editor) .rating-remove-button:hover:not(:disabled) {
    background: var(--accent-hover, #a92630);
    border-color: var(--accent-hover, #a92630);
}
:is(#da-editor, #nv-editor) .rating-remove-button:focus-visible {
    outline: 2px solid var(--text, #ece9e4);
    outline-offset: 3px;
}
:is(#da-editor, #nv-editor) .rating-remove-button:disabled {
    opacity: .45;
    cursor: not-allowed;
}
:is(#da-editor, #nv-editor) .trait-card {
    min-width: 0;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid var(--border-soft, #38383e);
    border-radius: 9px;
    background: var(--input, #17171b);
    overflow-wrap: anywhere;
}
:is(#da-editor, #nv-editor) .trait-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
:is(#da-editor, #nv-editor) .trait-card-head > div { min-width: 0; }
:is(#da-editor, #nv-editor) .trait-card-head small {
    display: block;
    margin-top: 4px;
    color: var(--muted, #9c9995);
    font-size: .8rem;
}
:is(#da-editor, #nv-editor) .compact-add-control {
    display: flex;
    align-items: center;
    gap: 10px;
}
:is(#da-editor, #nv-editor) .compact-add-control select { flex: 1; min-width: 0; }
:is(#da-editor, #nv-editor) .compact-empty-note { color: var(--muted, #9c9995); font-size: .85rem; }
:is(#da-backgrounds, #nv-background-list) .phase5-rating-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto 28px;
    gap: 10px;
    align-items: center;
}
:is(#da-backgrounds, #nv-background-list) .rating-name { min-width: 0; overflow-wrap: anywhere; }
:is(#da-backgrounds, #nv-background-list) .rating-track-block { min-width: 0; max-width: 100%; }
:is(#da-backgrounds, #nv-background-list) .rating-remove-button { grid-column: 3; justify-self: end; }
@media (max-width: 650px) {
    :is(#da-editor, #nv-editor) .compact-add-control { flex-wrap: wrap; }
    :is(#da-editor, #nv-editor) .compact-add-control select { flex-basis: 100%; }
    :is(#da-backgrounds, #nv-background-list) .rating-name { grid-column: 1 / 3; }
    :is(#da-backgrounds, #nv-background-list) .rating-remove-button { grid-row: 1; }
    :is(#da-backgrounds, #nv-background-list) .rating-track-block { grid-column: 1 / 3; grid-row: 2; justify-self: end; }
}