/* ── Tags: chips, autocomplete, catalogue ─────────────────────────────────
   Every tag carries its own colour via an inline `--tag` custom property, so a
   chip derives a translucent fill / coloured text / coloured border from it the
   same way status badges do — staying legible on both themes. */
.tag-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 3px; vertical-align: middle;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3px; line-height: 1.6;
  background: color-mix(in srgb, var(--tag, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--tag, var(--accent)) 72%, var(--text-strong));
  border: 1px solid color-mix(in srgb, var(--tag, var(--accent)) 38%, transparent);
}
.tag-chip .dot { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--tag, var(--accent)); }
.tag-chip.is-new { border-style: dashed; }
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Specialization field: a combobox button (styled like the other picker selects)
   that opens the standardized specialization picker window, with the chosen
   specializations shown as chips underneath (registry/_tag_field.html). The real
   value lives in a hidden comma-joined input the chips keep in sync (js/tags/chips.js). */
.tag-input .chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  border-radius: 3px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .3px;
  background: color-mix(in srgb, var(--tag, var(--accent)) 14%, transparent);
  color: color-mix(in srgb, var(--tag, var(--accent)) 72%, var(--text-strong));
  border: 1px solid color-mix(in srgb, var(--tag, var(--accent)) 38%, transparent);
}
.tag-input .chip.is-new { border-style: dashed; }
.tag-input .chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tag, var(--accent)); flex: none; }
.tag-input .chip .x {
  width: auto; padding: 0 2px; margin: 0; background: none; border: 0; cursor: pointer;
  color: inherit; opacity: .65; font-size: 14px; line-height: 1;
}
.tag-input .chip .x:hover { opacity: 1; }
/* Collapse the chip row when empty so the field is just the button until picked. */
.tag-input .tag-chips { margin-top: 8px; }
.tag-input .tag-chips:empty { display: none; }

/* Lock background scroll while any layer (modal or overlay) is open. Locking the
   root (not body) keeps it the scroll container; the root's own bar is zero-width
   (base/tokens.css), so there is no gutter for the lock to take away and the page
   cannot jump sideways as a modal opens.

   Note this is not the only root lock that leans on that: `html.nav-open` in
   layout/responsive.css does the same for the mobile drawer. So the zero-width root
   bar is a promise two files depend on — change it in one place and both start
   shifting the page. */
html.modal-open { overflow: hidden; }

/* ── Tag catalogue (management page) ───────────────────────────────────────
   The catalogue is the one screen whose whole content is tags, so a row of it is
   literally `.tag-chip` in `.tag-chips` — the classes are on the elements, not a
   fourth copy of the three `--tag` mixes above (the ratios are theme tuning; three
   copies on three screens is how two of them come to disagree). `.tag-entry` is
   only what a *catalogue* chip adds: room at the right for the two write actions,
   and the head-count beside the name.

   The previous shape was a 220px card grid with two text buttons per tag — the
   labels outweighed the vocabulary, every card ran two lines tall, and the ops
   row (`flex: none`, ~250px of «ЗМІНИТИ» + «ВИДАЛИТИ») was wider than the card's
   own content box, so it spilled past the border at the narrow end of the grid. */
.tag-cat-group { margin-bottom: 22px; }
.tag-cat-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted);
}
.tag-cat-head .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--tag, var(--accent));
}
.tag-cat-head .cat-name { color: color-mix(in srgb, var(--tag, var(--muted)) 55%, var(--text)); font-weight: 600; }
.tag-cat-head .rule { flex: 1; height: 1px; background: var(--border); }
/* The two action slots are the same object in both places — beside a category's
   name and inside a chip — so they are one rule; the chip's own `gap` spaces this
   off the name, which is why nothing here sets a margin. */
.tag-cat-head .cat-ops, .tag-entry .ops { display: inline-flex; gap: 2px; flex: none; }

/* Everything `.tag-chip` already gives (the mixes, the type, the dot, `gap: 6px`)
   is inherited by being that class; these are the deltas. */
.tag-entry { max-width: 100%; padding-inline-end: 4px; }
.tag-entry .tag-link { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: inherit; }
/* Underline the name alone: the count rides in the same link (one target for
   «show me who carries this»), and underlining it too drew a rule under a number
   the hover is not about. */
.tag-entry .tag-link:hover { text-decoration: none; }
.tag-entry .tag-link:hover .name { text-decoration: underline; }
.tag-entry .name { overflow-wrap: anywhere; }
/* The head-count is a fact about the roster, not about the tag, so it stays the
   neutral muted grey the counts in every list footer are and does not take the
   chip's ink. Its meaning is on the link's `title`. */
.tag-entry .count { font-size: 11px; color: var(--muted); }

/* Quiet at rest: a page of 75 tags must not read as a page of 150 button outlines.
   Only the resting frame is dropped — `.btn:hover` and `.btn.danger:hover` then
   light the button with the colours buttons.css already states, instead of this
   file re-buying them past its own reset. The slot is held either way (no
   `display: none`), so a hover reflows nothing in the wrapped rows. */
.tag-op.btn:not(:hover) { background: none; border-color: transparent; color: var(--muted); }
/* The dim is declared only where a pointer can undo it: with no hover — a touch
   screen — the resting state IS the state and is drawn at full strength, and there
   is nothing to override. Keyed on the pointer, not on the viewport, hence here
   and not in layout/responsive.css: a narrow window on a laptop still hovers, and
   a large tablet still does not. */
@media (hover: hover) {
  .tag-op.btn { opacity: .55; }
  .tag-entry:hover .tag-op, .tag-entry:focus-within .tag-op,
  .tag-cat-head:hover .tag-op, .tag-cat-head:focus-within .tag-op { opacity: 1; }
}
.color-input { width: 56px; height: 40px; padding: 3px; cursor: pointer; }