/* components/search-tag-input/search-tag-input-tagify.css
   Skins Tagify (assets/vendor/tagify/tagify.css) to match the gallery filter
   bar. Ported from the Tagify prototype tested on the Huawei and iPhone
   (builds 2026-09-19-a through 2026-09-24-l).

   EVERY rule is scoped under .search-tag-input-wrap. That adds one class of
   specificity over Tagify's own selectors, so these overrides win on
   specificity alone: no !important, and no dependence on load order.

   Colors come from tokens.css (--color-pill-bg, --color-accent-dark,
   --color-white, --color-text). Fallbacks keep it working if a page somehow
   doesn't load tokens.css. */

/* ── Wrapper: the flex child inside .gallery-filter-bar ──────────────────── */
.search-tag-input-wrap {
  flex: 0 1 auto; /* was 1 1 auto — grow claimed all leftover width in the filter
                     bar even with short content; shrink is kept so the row still
                     scrolls once content overflows */
  min-width: 180px; /* was 160px — 20px more breathing room at rest */
}

/* ── Container: Tagify's scope element (<tags class="tagify">) ───────────── */
/* Tagify defaults to a wrapping, growing box. The filter bar wants a fixed-
   height, single-row, horizontally scrolling field with the scrollbar hidden,
   so wrap is switched off and overflow-x turned into a hidden-scrollbar
   scroller. scroll-padding-right gives the caret breathing room, because
   Tagify's input is a contenteditable span and the browser's native
   caret-into-view scroll otherwise stops exactly at the caret. */
.search-tag-input-wrap .tagify {
  --tag-bg: var(--color-pill-bg, #46DA7D);
  --tag-hover: var(--color-pill-bg, #46DA7D);
  --tag-text-color: #fff;
  --tag-inset-shadow-size: 999px;
  --tag-pad: 0.3125em 0.85em 0.3125em 0.65em; /* vertical padding 0.375em -> 0.3125em
                          (6px -> 5px at 16px). Measured on the Huawei via Eruda
                          with the old values: 6 + 18 + 9 = 33px pill (the 9 included
                          a since-removed +3px hack) inside a ~35px inner chip, so
                          ~1px gap per side. Now 5 + 18 + 5 = 28px, so ~3.5px per
                          side. Horizontal padding untouched. */
  --tag-remove-bg: var(--tag-bg); /* was rgba(255,255,255,0.35) — that tint, combined
                                      with the 999px inset shadow above, painted the
                                      WHOLE pill near-white on × hover/tap */
  --tag-remove-btn-color: #fff;
  --tag-border-radius: 20px;
  --tag--max-width: none;
  --input-color: var(--color-text, #333);
  --placeholder-color: #aaa;
  --placeholder-color-focus: #aaa;
  --reveal-buffer: 56px; /* single source of truth for "typing room shown on focus" —
                            read here by the input's min-width below, and in JS by
                            revealInputSpace() via getComputedStyle */

  width: 100%;
  height: var(--chip-height, 38px); /* was a hardcoded 38px with no desktop override —
                   sat 2px taller than the other filter chips at >=768px, since
                   they drop to 36px there and this never did. Now reads the same
                   shared token (tokens.css) they do, so a future change to chip
                   height can't cause this drift again. */
  align-items: center;
  box-sizing: border-box;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-right: 0.6rem;
  border: 1.5px solid #ccc;
  border-radius: 20px;
  background: var(--color-white, #fff);
  font-size: 1.0625rem;
  -webkit-tap-highlight-color: transparent;
}

.search-tag-input-wrap .tagify::-webkit-scrollbar {
  display: none;
}

.search-tag-input-wrap .tagify:focus-within {
  border-color: var(--color-accent-dark, #27ae60);
}

/* ── Pills ───────────────────────────────────────────────────────────────── */
/* flex: 0 0 auto: tags are flex items and shrink by default, which squeezed
   two-word names onto two lines. --tag--max-width: none (above) lets a very
   long name keep its full width; the row scrolls instead of truncating. */
.search-tag-input-wrap .tagify__tag {
  flex: 0 0 auto;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

/* --tag-pad's vertical padding is em-based, so it scales with whatever
   font-size actually reaches the pill text — but the .tagify container's
   height above is a FIXED 38px, which does not scale. In the standalone
   prototype nothing else on the page could affect that font-size, so the
   em-based padding stayed small and the fixed 38px container comfortably
   swallowed it, leaving a visible gap top and bottom. In the real app, some
   global rule (base.css, or a generic element selector — not yet
   identified) appears to reach the pill text with a different font-size or
   line-height; the em-based padding grows to match, the pill fills or
   exceeds the still-fixed 38px, and the gap disappears. Pinning both
   properties explicitly, at every level Tagify nests, stops that inheritance
   regardless of which specific element the real rule targets. */
.search-tag-input-wrap .tagify__tag,
.search-tag-input-wrap .tagify__tag > div,
.search-tag-input-wrap .tagify__tag-text {
  font-size: 1rem; /* matches .gallery-filter-chip's own mobile font-size — was
                       shrunk to 0.9375rem in an earlier attempt, which fixed the
                       clipping but made the pill's text visibly smaller than its
                       neighbours (clubs chip etc). Reverted: text size should match
                       across chips, not be sacrificed to fit the container. */
  line-height: 1.15; /* kept tightened from 1.3 — this is still a real, independent
                         lever regardless of the text-size-adjust test below. */
  -webkit-text-size-adjust: 100%; /* mobile Chrome/Safari silently boost rendered
                         text size past the CSS value in narrow columns unless told
                         not to — untested until now, and the leading suspect for why
                         the SAME CSS clips on real mobile but not on desktop or in
                         the standalone prototype (which had no competing stylesheet
                         to trigger this). */
  text-size-adjust: 100%;
}

/* The manual padding-bottom nudge that used to live here (from an earlier
   attempt to fix an uneven top/bottom gap) is gone — --tag-pad above now
   controls both sides symmetrically, so a separate override isn't needed. */

/* Tagify's own :focus / :hover rule swaps the pill background and inset size
   (the grey "bloat" on touch), and mobile browsers keep :hover stuck after a
   tap. Pinning both variables back to their at-rest values for this exact
   selector fixes the visual half; the JS focusin-blur handler removes the
   underlying :focus. */
.search-tag-input-wrap .tagify__tag:focus div::before,
.search-tag-input-wrap .tagify__tag:hover:not([readonly]) div::before {
  --tag-bg-inset: 0;
  --tag-bg: var(--color-pill-bg, #46DA7D);
}

.search-tag-input-wrap .tagify__tag-text {
  /* Horizontal panning only: removes the tap-vs-scroll ambiguity delay that
     otherwise fights the long-press hold timer. */
  touch-action: pan-x;
  text-transform: lowercase; /* mobile keyboards auto-capitalise the first letter of
                                each pill regardless of any autocapitalize attribute —
                                Chromium ignores it on contenteditable elements, which
                                is what Tagify's typing area actually is. Visual only:
                                the underlying tag value/name keeps whatever case the
                                keyboard produced — safe because the duplicate check
                                (search-tag-input-tagify.js's validate()) and the
                                server's uploader search are already case-insensitive. */
}

/* Tagify's `.tagify__tag>div>*` sets white-space: pre-wrap at specificity
   (0,1,1). Matching its child chain plus the wrap class outranks it. */
.search-tag-input-wrap .tagify__tag>div>.tagify__tag-text {
  white-space: nowrap;
}

/* ── Typing area ─────────────────────────────────────────────────────────── */
/* 1rem minimum on mobile prevents iOS/Android auto-zoom on focus. */
.search-tag-input-wrap .tagify__input {
  flex-shrink: 0;
  font-size: 1rem;
  text-transform: lowercase; /* see the tag-text rule above — same reasoning */
}

/* Beats Tagify's own .tagify__input:last-child (0,2,0) on specificity alone,
   thanks to the wrapper class (0,3,0) — no !important, no load-order
   dependence, matching this file's own convention. Bounds the typing area's
   max width to the SAME --reveal-buffer the JS scrolls to, so the browser's
   own native focus-into-view scroll can never overshoot our own target —
   this was the actual fix for a real-device-only "reveals too much space on
   focus" bug (desktop testing never caught it: there's no on-screen keyboard
   there to trigger the browser's own competing scroll). */
.search-tag-input-wrap .tagify__input:last-child {
  min-width: calc(var(--reveal-buffer) - 5px); /* 5px = Tagify's own input margin */
}

/* ── Suggestions dropdown ────────────────────────────────────────────────── */
/* Tagify appends this to <body>, NOT inside .search-tag-input-wrap, so the
   wrapper scoping used everywhere else in this file can't reach it. The JS
   sets dropdown.classname = "search-tag-input__dropdown"; chaining that onto
   Tagify's own .tagify__dropdown class gives (0,3,0) specificity, beating
   Tagify's single-class selectors with no !important and no load-order
   dependence.
   Every value below is copied from custom-select.css
   (.npx-select__panel / __option) so this list matches the clubs dropdown.
   No search box: typing happens in the chip itself. */
/* Tagify styles the dropdown's OUTER element (.tagify__dropdown) as well as
   its inner wrapper. The outer element carries a 1px primary-blue border-top
   (the blue line under the chip) and overflow:hidden. Two consequences:
   the blue line must be removed HERE, and the shadow must live here too —
   an element's own overflow:hidden clips a shadow painted by its child. */
.tagify__dropdown.search-tag-input__dropdown {
  border-top: 0;
  border-radius: var(--radius-md, 6px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.13);
}

.tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__wrapper {
  background: #fff;
  border: 1px solid var(--color-border, #e0e0e0);
  border-radius: var(--radius-md, 6px);
  box-shadow: none; /* the root carries the shadow — see above */
  padding: 0.3rem 0;
}

.tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__item {
  margin: 0;
  border-radius: 0;
  padding: 0.52rem 0.9rem;
  font-size: 0.9rem;
  color: var(--color-text, #333);
}

/* Active = hovered or keyboard-highlighted (highlightFirst keeps one row
   active whenever the list is open). Looks like the clubs list's selected +
   focused row: pale green wash, bold accent-green text. */
.tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__item--active {
  background: rgba(46, 204, 113, 0.14);
  color: var(--color-accent, #2ECC71);
  font-weight: 600;
}

/* Dark mode: same values as custom-select.css's .np-dark-mode overrides. */
.np-dark-mode .tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__wrapper {
  background: #1e1e2e;
  border-color: rgba(255, 255, 255, 0.12);
}

.np-dark-mode .tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__item {
  color: #e0e0e0;
}

.np-dark-mode .tagify__dropdown.search-tag-input__dropdown .tagify__dropdown__item--active {
  background: rgba(46, 204, 113, 0.12);
  color: var(--color-accent, #2ECC71);
}

/* The old component hid the placeholder once any pill existed. Tagify keeps
   it visible; Tagify's own --noTags class tells us when there are none.
   Delete this one rule to keep the placeholder always visible instead. */
.search-tag-input-wrap .tagify:not(.tagify--noTags) .tagify__input::before {
  content: none;
}

/* ── Long-press info popover ─────────────────────────────────────────────── */
/* Appended to document.body by the JS, not this wrapper — floats above the
   page without fighting this component's own overflow scrolling. Positioned
   via getBoundingClientRect() in JS, clamped to both viewport edges there.
   TODO (chat later): no dark-mode variant yet — needs netpix's actual
   dark-mode mechanism (class/attribute/media-query) confirmed before adding
   one; a single-use color like this doesn't belong in tokens.css. */
.search-tag-input__popover {
  position: absolute;
  z-index: 999;
  background: #e3f9ea; /* opaque pale green — must NOT be translucent/rgba, or the
                           pill/page text underneath shows straight through it */
  border: 1px solid rgba(70, 218, 125, 0.5);
  color: var(--color-text, #333);
  font-size: 0.8125rem;
  line-height: 1.3;
  padding: 0.4rem 0.65rem;
  border-radius: 8px;
  max-width: 220px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.25s ease;
}
.search-tag-input__popover[hidden] { display: none; }
.search-tag-input__popover--fading { opacity: 0; }

@media (min-width: 768px) {
  .search-tag-input-wrap .tagify {
    font-size: 0.875rem;
  }

  .search-tag-input-wrap .tagify__input {
    font-size: 0.8125rem;
  }

  .search-tag-input-wrap .tagify__tag,
  .search-tag-input-wrap .tagify__tag > div,
  .search-tag-input-wrap .tagify__tag-text {
    font-size: 0.8125rem; /* was 0.875rem — matches .gallery-filter-search's existing
                              desktop font-size, reusing an already-established value
                              rather than inventing a new one */
    line-height: 1.15; /* matches the mobile tightening above */
  }

}

.search-tag-input-wrap .tagify+input,
.search-tag-input-wrap .tagify+textarea {
  display: none !important;
}