/* Tag system: the tag-picker overlay dialog, tag pills, tag add/remove/vote/suggest
   controls, and the tag-request review widgets — split out of style.css. Used on the
   mod list (filter overlay), mod page (tag editing) and tag-request queues. */


/* Hover in the tag overlay: tint rather than full active colour so unchecked/checked stay distinct */
.mod-tag-request-section { padding: 0.5rem 1.25rem 0.75rem; }

.tag-list { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.dialog-overlay-list .tag:hover { background: color-mix(in srgb, var(--clr-link) 14%, var(--clr-surface-alt)); color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 40%, var(--clr-border)); }
.dialog-overlay-list .dialog-overlay-item[data-state="included"] .tag:hover { background: color-mix(in srgb, var(--clr-link) 82%, #000); border-color: color-mix(in srgb, var(--clr-link) 82%, #000); color: var(--clr-on-link); }
.dialog-overlay-list .dialog-overlay-item[data-state="excluded"] .tag:hover { background: color-mix(in srgb, var(--clr-danger) 20%, var(--clr-surface-alt)); border-color: color-mix(in srgb, var(--clr-danger) 55%, var(--clr-border)); color: var(--clr-danger); }
.dialog-overlay-list .dialog-overlay-item:has(input:checked) .tag:hover { background: color-mix(in srgb, var(--clr-link) 82%, #000); border-color: color-mix(in srgb, var(--clr-link) 82%, #000); color: var(--clr-on-link); }
.dialog-overlay-list .dialog-overlay-item--protected .tag { cursor: default; }
.dialog-overlay-list .dialog-overlay-item--protected .tag:hover { background: var(--clr-surface-alt); color: var(--clr-text-muted); border-color: var(--clr-border); }

.tag { display: inline-block; font-size: 0.78rem; padding: 0.1em 0.5em; border-radius: 999px; background: var(--clr-surface-alt); color: var(--clr-text-muted); border: 1px solid var(--clr-border); text-decoration: none; transition: background 0.12s, color 0.12s; }
.tag:hover { background: var(--clr-link); color: var(--clr-on-link); border-color: var(--clr-link); text-decoration: none; }
.tag--install-location { background: color-mix(in srgb, var(--clr-link) 12%, var(--clr-surface-alt)); border-color: color-mix(in srgb, var(--clr-link) 35%, var(--clr-border)); color: var(--clr-link); cursor: help; }
.tag--install-location:hover { background: color-mix(in srgb, var(--clr-link) 20%, var(--clr-surface-alt)); color: var(--clr-link); border-color: color-mix(in srgb, var(--clr-link) 50%, var(--clr-border)); }
.tag-vote-form { display: inline; }
.tag--suggested { opacity: 0.75; border-style: dashed; cursor: pointer; }
.tag--voted { opacity: 1; outline: 1px solid currentColor; }
.tag--suggest-btn { cursor: pointer; background: none; border-style: dashed; color: var(--clr-text-muted); }
.tag-section { margin: 0.75rem 0; padding: 0.75rem 1rem; background: var(--clr-surface); border: 1px solid var(--clr-border); border-radius: var(--radius-small); }
.tag-section > strong { display: block; margin-bottom: 0.5rem; }
.tag-section .tag-list { display: inline; }
.tag-with-remove { display: inline-flex; align-items: center; gap: 0; }

.tag-remove-btn { background: none; border: none; color: var(--clr-text-muted); padding: 0 0.2em; font-size: 0.85em; cursor: pointer; line-height: 1; border-radius: 0 999px 999px 0; }
.tag-remove-btn:hover { color: var(--clr-danger); background: none; }