task-tags { display: block; min-width: 0; }
.task-tags {
  --tag-ink: var(--ictus-graphite, #25364b);
  --tag-muted: var(--ictus-lead, #526479);
  --tag-border: var(--ictus-border, #dce3ed);
  --tag-surface: var(--ictus-white, #fff);
  --tag-tint: var(--ictus-screen, #f3f6fa);
  --tag-accent: var(--ictus-ocean, #164780);
  --tag-error: #a82c39;
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
.task-tags__composer, .task-tags__items { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-width: 0; max-width: 100%; }
.task-tags__composer { width: 100%; }
.task-tags .task-tag { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; border: 1px solid rgba(255, 255, 255, .16); border-radius: 6px; font-size: .72rem; font-weight: 600; line-height: 1.4; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.task-tags .task-tag__name { display: inline-flex; align-items: center; gap: .45rem; min-width: 0; min-height: 23px; padding: .15rem .5rem; color: inherit; font: inherit; text-align: left; background: none; border: 0; border-radius: 5px; }
.task-tags span.task-tag__name { display: block; }
.task-tags .task-tag__name > span { min-width: 0; }
.task-tags .task-tag__name > span, .task-tags span.task-tag__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-tags .task-tag__name > i { flex-shrink: 0; font-size: .5rem; opacity: .8; }
.task-tags button.task-tag__name:hover { background: rgba(255, 255, 255, .13); }
.task-tags .task-tag__remove { display: grid; place-items: center; flex: 0 0 23px; width: 23px; min-height: 23px; margin-right: 2px; padding: 0; color: inherit; font-size: .95rem; line-height: 1; background: transparent; border: 0; border-radius: 4px; opacity: .75; }
.task-tags .task-tag__remove:hover, .task-tags .task-tag__remove:focus-visible { opacity: 1; background: rgba(255, 255, 255, .18); }
.task-tags.task-tags--editor { width: 100%; }
.task-tags.task-tags--editor .task-tags__composer { padding: .375rem; border: 1px solid var(--tag-border); border-radius: 9px; background: var(--tag-surface); transition: border-color .15s, box-shadow .15s; }
.task-tags.task-tags--editor:focus-within .task-tags__composer { border-color: var(--tag-accent); box-shadow: 0 0 0 3px rgba(var(--ictus-cyan-rgb, 70, 166, 195), .12); }
.task-tags--editor .task-tags__items { display: contents; }
.task-tags--editor .task-tag { font-size: .75rem; }
.task-tags--editor .task-tag__name { min-height: 28px; }
.task-tags--editor .task-tag__remove { min-height: 26px; }
.task-tags .task-tag.is-selected { box-shadow: 0 0 0 2px var(--tag-surface), 0 0 0 3px var(--tag-accent); }
.task-tags .task-tags__empty-icon { display: grid; place-items: center; flex: 0 0 28px; color: var(--tag-muted); font-size: .95rem; }
.task-tags .task-tags__input { display: flex; align-items: center; flex: 1 1 170px; gap: .5rem; min-width: 130px; max-width: 100%; }
.task-tags.task-tags--editor .task-tags__input input { flex: 1; width: 0; min-width: 0; height: 32px; margin: 0; padding: .25rem .35rem; color: var(--tag-ink); background: transparent; border: 0; border-radius: 0; outline: 0; box-shadow: none; font-family: inherit; font-size: .8rem; line-height: 1.5; }
.task-tags.task-tags--editor .task-tags__input input::placeholder { color: var(--tag-muted); opacity: 1; }
.task-tags .task-tags__enter { flex-shrink: 0; margin: 0; padding: .15rem .3rem; border: 1px solid var(--tag-border); border-radius: 4px; color: var(--tag-muted); background: var(--tag-tint); box-shadow: 0 1px 0 var(--tag-border); font-family: inherit; font-size: .62rem; font-weight: 500; line-height: 1.2; }
.task-tags .task-tags__add, .task-tags .task-tags__close { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; color: var(--tag-accent); background: var(--tag-tint); border: 1px solid var(--tag-border); border-radius: 6px; font-size: .85rem; }
.task-tags .task-tags__add:hover:enabled, .task-tags .task-tags__close:hover { color: var(--tag-ink); border-color: var(--tag-accent); }
.task-tags .task-tags__count { margin-left: auto; padding: 0 .25rem; color: var(--tag-muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.task-tags .task-tags__colors { display: flex; flex-direction: column; gap: .75rem; width: 340px; max-width: 100%; margin-top: .5rem; padding: .85rem; border: 1px solid var(--tag-border); border-radius: 8px; background: var(--tag-tint); box-shadow: 0 4px 12px rgba(20, 46, 77, .06); animation: task-tags-reveal .14s ease-out; }
.task-tags .task-tags__color-heading { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.task-tags .task-tags__color-heading strong { flex-shrink: 0; color: var(--tag-ink); font-size: .75rem; font-weight: 700; }
.task-tags .task-tags__preview { min-width: 0; max-width: 150px; padding: .15rem .45rem; border-radius: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .7rem; font-weight: 600; }
.task-tags .task-tags__close { width: 24px; height: 24px; margin-left: auto; color: var(--tag-muted); background: transparent; border: 0; font-size: .7rem; }
.task-tags .task-tags__palette { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: .45rem; width: 100%; }
.task-tags .task-tags__palette button { display: grid; place-items: center; width: 100%; height: 30px; padding: 0; border: 1px solid rgba(0, 0, 0, .12); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22); transition: transform .12s; }
.task-tags .task-tags__palette button:hover:enabled { transform: translateY(-2px); }
.task-tags .task-tags__palette button[aria-pressed="true"] { outline: 2px solid var(--tag-accent); outline-offset: 2px; }
.task-tags .task-tags__palette button > span { display: grid; place-items: center; border-radius: 4px; font-size: .85rem; }
.task-tags.task-tags--editor label.task-tags__custom { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0; padding-top: .65rem; color: var(--tag-muted); border-top: 1px solid var(--tag-border); font-size: .72rem; font-weight: 500; }
.task-tags .task-tags__custom > i { font-size: .85rem; }
.task-tags .task-tags__custom code { margin-left: auto; color: var(--tag-muted); font-size: .65rem; }
.task-tags .task-tags__custom input { flex: 0 0 28px; width: 28px; height: 26px; margin: 0; padding: 2px; border: 1px solid var(--tag-border); border-radius: 5px; background: var(--tag-surface); cursor: pointer; }
.task-tags .task-tags__custom input::-webkit-color-swatch-wrapper { padding: 0; }
.task-tags .task-tags__custom input::-webkit-color-swatch { border: 0; border-radius: 2px; }
.task-tags .task-tags__custom input::-moz-color-swatch { border: 0; border-radius: 2px; }
.task-tags .task-tags__error { margin: .45rem .25rem .1rem; color: var(--tag-error); font-size: .75rem; line-height: 1.5; }
.task-tags button:focus-visible, .task-tags input[type=color]:focus-visible { outline: 2px solid var(--tag-accent); outline-offset: 2px; }
.task-tags button:disabled { opacity: .45; cursor: not-allowed; }
.task-tags.task-tags--disabled .task-tags__composer { background: var(--tag-tint); }
body.theme-dark .task-tags { --tag-ink: #edf3fc; --tag-muted: #bac8da; --tag-border: #43526a; --tag-surface: var(--ictus-dark-surface, #102c47); --tag-tint: var(--ictus-midnight, #07223e); --tag-accent: #b8e8f3; --tag-error: #ffb8bc; }
.project-task-card task-tags, .activity-board__card task-tags { margin-block: .4rem; }
@keyframes task-tags-reveal { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 575px) {
  .task-tags--editor .task-tag__name, .task-tags--editor .task-tag__remove { min-height: 32px; }
  .task-tags .task-tags__input { flex-basis: 140px; }
  .task-tags.task-tags--editor .task-tags__input input { height: 36px; font-size: 16px; }
  .task-tags .task-tags__enter { display: none; }
  .task-tags .task-tags__add { width: 32px; height: 32px; }
  .task-tags .task-tags__palette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
  .task-tags .task-tags__palette button { height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .task-tags.task-tags--editor .task-tags__composer, .task-tags .task-tags__palette button { transition: none; }
  .task-tags .task-tags__colors { animation: none; }
}