.card-tags-toolbar { display: flex; align-items: stretch; justify-content: flex-end; gap: .5rem; margin-top: .75rem; min-width: 0; }
.card-tag-add { display: flex; position: relative; align-items: stretch; flex: 0 1 15rem; width: 15rem; border: 1px solid var(--line-strong, #4b525b); border-radius: .65rem; background: #151a20; }
.card-tags-toolbar [data-card-tag-reset] { display: flex; flex: 0 0 auto; }
.card-tag-reset { display: grid; place-items: center; box-sizing: border-box; width: 2.875rem; min-height: 2.875rem; padding: 0; border: 1px solid var(--line-strong, #4b525b); border-radius: .65rem; background: #24313e; color: var(--blue-200, #9cd9ff); cursor: pointer; }
.card-tag-reset svg { display: block; width: 1.25rem; height: 1.25rem; }
.card-tag-combobox { position: relative; flex: 1 1 auto; min-width: 0; }
.card-tag-add input[data-card-tag-query] { display: block; box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.75rem; border: 0; border-radius: .65rem 0 0 .65rem; background: transparent; padding: .45rem 2rem .45rem .6rem; font-size: .85rem; color: var(--paper-100, #f5f7fa); }
.card-tag-chevron { position: absolute; top: 50%; right: .45rem; width: 1.25rem; height: 1.25rem; transform: translateY(-50%); pointer-events: none; color: var(--blue-200, #9cd9ff); }
.card-tag-add-button { flex: 0 0 2.75rem; width: 2.75rem; min-height: 2.75rem; border: 0; border-left: 1px solid var(--line-strong, #4b525b); border-radius: 0 .65rem .65rem 0; background: #24313e; color: var(--blue-200, #9cd9ff); font-size: 1.25rem; cursor: pointer; }
.card-tag-suggestions { position: absolute; z-index: 8; top: calc(100% + .35rem); right: 0; box-sizing: border-box; width: max(100%, 14rem); max-width: min(28rem, 75vw); max-height: 15rem; overflow-y: auto; overscroll-behavior: contain; padding: .25rem; border: 1px solid var(--line-strong, #4b525b); border-radius: .65rem; background: #191f26; box-shadow: 0 .5rem 1rem #0005; }
.card-tag-suggestions [role=option] { display: block; width: 100%; min-height: 2.75rem; padding: .5rem .6rem; border: 0; border-radius: .4rem; background: transparent; color: var(--paper-200, #e0e6ed); text-align: left; font-size: .8rem; line-height: 1.4; overflow-wrap: anywhere; cursor: pointer; }
.card-tag-suggestions [role=option]:hover, .card-tag-suggestions [aria-selected=true] { background: #21415b; color: var(--blue-200, #9cd9ff); }
.card-tag-no-options { margin: .4rem .5rem; color: var(--paper-400, #aab4c0); font-size: .8rem; }
.card-tag.is-user-added { border-color: #61b6ec; background: #21415b; color: var(--blue-200, #9cd9ff); }
[data-card-tags-editable=true] .card-tag { display: inline-flex; align-items: stretch; padding: 0; border-radius: 1.1rem; }
[data-card-tags-editable=true] .card-tag > [data-card-tag-label] { align-self: center; padding: .45rem .5rem; }
.card-tag-drag { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; min-width: 0; padding: .4rem .25rem .4rem .5rem; border: 0; border-radius: 1.1rem 0 0 1.1rem; background: transparent; color: inherit; font: inherit; text-align: left; overflow-wrap: anywhere; cursor: grab; touch-action: none; -webkit-user-select: none; user-select: none; }
.card-tag-grip { flex: 0 0 auto; opacity: .6; }
.card-tag-drag > span:last-child { min-width: 0; }
[data-card-tags-editable=true] .card-tag form { flex: 0 0 2.75rem; display: flex; }
.card-tag-remove { display: block; width: 2.75rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 0 1.1rem 1.1rem 0; background: transparent; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; }
.card-tag-remove:hover, .card-tag-add-button:hover, .card-tag-reset:hover { background: #ffffff12; }
.card-tags button:focus-visible, .card-tag-add input:focus-visible { outline: 2px solid var(--blue-200, #9cd9ff); outline-offset: 2px; }
.card-tags button:disabled, .card-tags [aria-disabled=true] { cursor: default; opacity: .5; }
.card-tag.is-dragging { border-style: dashed; border-color: var(--blue-200, #9cd9ff); background: #21415b; opacity: .75; }
.card-tag.is-drop-before { box-shadow: -.2rem 0 0 var(--blue-200, #9cd9ff); }
.card-tag.is-drop-after { box-shadow: .2rem 0 0 var(--blue-200, #9cd9ff); }
.is-dragging-tags, .is-dragging-tags .card-tag-drag { cursor: grabbing; user-select: none; }
.card-tags [hidden] { display: none !important; }