/* Tags — chips, the "Add tag" picker and the list filter.
   Chip colours are named tokens (tags.models.Color); every value below comes
   from the app.css tokens except teal/pink, defined here for both themes. */
:root {
  --tag-teal: #0f766e;
  --tag-pink: #be185d;
}
[data-theme="dark"] {
  --tag-teal: #4fd1c5;
  --tag-pink: #f472b6;
}

.tagchip {
  --tag-c: var(--brand);
  display: inline-flex; align-items: center; gap: .25rem;
  max-width: 16rem;
  padding: .0625rem .5rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--tag-c) 12%, transparent);
  color: color-mix(in srgb, var(--tag-c) 85%, var(--text));
  border: 1px solid color-mix(in srgb, var(--tag-c) 28%, transparent);
  font-size: .75rem; font-weight: 500; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: middle;
}
.tagchip--cobalt { --tag-c: var(--brand); }
.tagchip--red    { --tag-c: var(--err); }
.tagchip--amber  { --tag-c: var(--gold); }
.tagchip--green  { --tag-c: var(--ok); }
.tagchip--teal   { --tag-c: var(--tag-teal); }
.tagchip--violet { --tag-c: var(--violet); }
.tagchip--pink   { --tag-c: var(--tag-pink); }
.tagchip--grey   { --tag-c: var(--text-muted); }
.tagchip__sys { display: inline-flex; }
.tagchip__sys .icon { width: .75rem; height: .75rem; }
.tagchip__x {
  border: 0; background: none; color: inherit; padding: 0 0 0 .125rem;
  font-size: .875rem; line-height: 1; opacity: .6; cursor: pointer;
}
.tagchip__x:hover, .tagchip__x:focus-visible { opacity: 1; }
.tagchips { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.tagchips--sm .tagchip { font-size: .6875rem; padding: 0 .4rem; }

/* Picker */
.tagbox { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; position: relative; }
.tagbox__add { position: relative; }
.tagbox__add > summary { list-style: none; }
.tagbox__add > summary::-webkit-details-marker { display: none; }
.tagbox__addbtn {
  display: inline-flex; align-items: center; gap: .25rem; cursor: pointer;
  padding: .0625rem .5rem; border-radius: var(--radius-pill);
  border: 1px dashed var(--border-strong); color: var(--text-muted);
  font-size: .75rem; line-height: 1.4;
}
.tagbox__addbtn:hover { background: var(--state-hover); color: var(--text); }
.tagbox__addbtn .icon { width: .875rem; height: .875rem; }
.tagbox__menu {
  position: absolute; z-index: 1060; top: calc(100% + .375rem); left: 0;
  width: 17rem; padding: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 12px); box-shadow: var(--shadow-lg);
}
.tagbox__options { list-style: none; margin: .375rem 0 0; padding: 0; max-height: 14rem; overflow-y: auto; }
.tagbox__opt {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: .5rem;
  border: 0; background: none; padding: .3rem .375rem; border-radius: 8px; text-align: left;
}
.tagbox__opt:hover, .tagbox__opt:focus-visible { background: var(--state-hover); }
.tagbox__scope { font-size: .6875rem; color: var(--text-subtle); white-space: nowrap; }
.tagbox__empty { font-size: .75rem; color: var(--text-subtle); margin: .5rem .25rem 0; }
.tagbox__create { display: grid; gap: .375rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border-soft); }
.tagbox__create-head { font-size: .75rem; color: var(--text-muted); }
.tagbox__colors { display: flex; gap: .3rem; }
.tagbox__swatch {
  width: 1.125rem; height: 1.125rem; border-radius: 50%; cursor: pointer;
  background: var(--tag-c); border: 2px solid transparent; padding: 0;
}
.tagbox__swatch input { position: absolute; opacity: 0; pointer-events: none; }
.tagbox__swatch:has(input:checked) { outline: 2px solid var(--tag-c); outline-offset: 2px; }
.tagbox__error { width: 100%; font-size: .75rem; color: var(--err); }

/* List filter */
.tagfilter__btn { display: flex; align-items: center; gap: .25rem; overflow: hidden; white-space: nowrap; }
.tagfilter__menu { max-height: 18rem; overflow-y: auto; min-width: 16rem; }
.tagfilter__opt { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.tagfilter__opt .tagbox__scope { margin-left: auto; }

/* Library "Tags" page */
.tag-lock { display: inline-flex; color: var(--text-subtle); }
.tag-lock .icon { width: .875rem; height: .875rem; }
.tag-row--locked td { color: var(--text-muted); }