/* The tag box (js/tag-input.js): chips for the tags so far, a type box, and a list of suggestions under it. */
.tag-box { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.tag-box:focus-within { border-color: var(--accent); }
.tag-chips { display: contents; list-style: none; margin: 0; padding: 0; }
.tag-chips li { display: contents; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel-2); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer; }
.tag-chip::after { content: "×"; color: var(--muted); }
.tag-chip:hover::after, .tag-chip:focus-visible::after { color: var(--coral, var(--accent)); }
.tag-type { flex: 1 1 8rem; min-width: 6rem; min-height: 32px; padding: 2px 4px; border: 0; background: transparent; color: var(--text); font: inherit; outline: none; }
.tag-suggest { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; max-height: 260px; overflow: auto; margin: 0; padding: 6px;
  list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); }
.tag-suggest[hidden] { display: none; }
.tag-suggest li { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tag-suggest li:hover, .tag-suggest li[aria-selected="true"] { background: var(--panel-2); }