/*
   ═══════════════════════════════════════════════════════════════════════════
   GENERATED COPY — DO NOT EDIT. Source: <extension repo>/Pinako/tree-ui-tag-search.css
   Regenerate with: node "Pinako Pro/_build/sync-shared.mjs"
   (see that script's header for the shared-source rules)
   ═══════════════════════════════════════════════════════════════════════════
*/

/*
 * tree-ui-tag-search.css — Tags search mode's own rules: the search-mode button (the
 * mode menu's anchor, on the main bar and the side panel's bar), the chosen tags'
 * labels in the search box, and the tag drawer under the bar.
 *
 * Cut VERBATIM out of pinako.html's <style> block (docs/tag-search-shared-plan.md T1,
 * 2026-10-04; the block's 6-space indent removed, nothing else changed), together with
 * their code, which moved to tree-ui-tag-search.js (feature CSS travels with its
 * feature). Shared with the website's tab pages through the sync manifest
 * (scripts/shared-ui-manifest.json): edit HERE, then run
 * node "Pinako Pro/_build/sync-shared.mjs".
 *
 * Where a drawer sits is the surface's (the adapter's bars.<ctx>.mount): in the
 * extension, inside the bar's toolbar wrapper, so it pushes the tree down.
 */

/* The search-mode button (tag-library-spec.md B1): the left-most control in
   the main search box, wearing the active mode's icon and a small chevron.
   Its menu switches Search / Tags / Notes / Snapshot history. Hidden in AI
   mode, where the sparkle indicator (pinako.html) takes the slot as before. */
.search-mode-switch {
  display: flex; align-items: center; gap: 1px;
  background: transparent; border: none; padding: 0 2px 0 0; margin-right: 5px;
  color: var(--icon-color); cursor: default; flex-shrink: 0; border-radius: 3px;
}
.search-mode-switch-icon { width: 14px; height: 14px; }
.search-mode-switch-chevron { width: 9px; height: 9px; opacity: 0.6; }
.search-mode-switch:hover .search-mode-switch-icon { filter: drop-shadow(0 0 4px var(--accent-color)); }
.search-mode-switch.is-mode { color: var(--accent-color); }
.search-mode-check { margin-left: 6px; color: var(--accent-color); }
/* Tags mode: the chosen tag sits in the box as a removable label. */
.tag-search-chip {
  display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0;
  max-width: 45%; margin-right: 6px; padding: 0 2px 0 7px; height: 18px;
  border-radius: 9px; font-size: 11px; line-height: 18px;
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-color) 45%, transparent);
}
.tag-search-chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-search-chip-x {
  background: transparent; border: none; padding: 0 4px; cursor: default;
  color: inherit; font-size: 13px; line-height: 1; opacity: 0.7;
}
.tag-search-chip-x:hover { opacity: 1; color: #d32f2f; }

/* ─── The tag drawer (tag-library-spec.md B2): Tags search mode's list of
   every tag, under the search bar. In the extension it sits where the AI
   engine drawer does (inside the toolbar wrapper, so it pushes the tree
   down instead of covering it); its own header carries the count, the sort
   menu and a collapse chevron that folds it to that header.
   It slides open and shut with the engine drawer's timing (0.18s ease).
   Grid rows animate to the content's real height, so nothing is
   measured: .open lands a style pass after insertion, and leaving the
   mode removes the drawer only once its close has run (tagSearchLeave). */
.tag-drawer {
  position: relative;
  width: 100%; box-sizing: border-box;
  font-size: 12px; color: var(--text-color);
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 0.18s ease;
}
/* The bottom edge, dragged to resize the list (tagDrawerStartResize),
   like #divider-global-notes: no look of its own, only the cursor. It
   sits inside the drawer because the toolbar wrapper clips below it. */
.tag-drawer-resize {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px;
  cursor: row-resize; touch-action: none; z-index: 2;
}
body.touch-input .tag-drawer-resize { height: 14px; }
.tag-drawer.collapsed .tag-drawer-resize { display: none; }
.tag-drawer.open { grid-template-rows: 1fr; }
.tag-drawer:not(.open) { pointer-events: none; }
.tag-drawer-in, .tag-drawer-fold-in { min-height: 0; overflow: hidden; }
/* The chevron folds the list the same way, down to the header. */
.tag-drawer-fold {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.18s ease;
}
.tag-drawer.collapsed .tag-drawer-fold { grid-template-rows: 0fr; }
/* A folded list's chips leave the tab order once the fold has run. */
.tag-drawer.collapsed .tag-drawer-fold-in { visibility: hidden; transition: visibility 0s 0.18s; }
/* Three columns, the outer two equal, so the count sits at the true
   centre whatever the left group's width: [chevron, sort] · count · (empty). */
.tag-drawer-head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 8px; padding: 3px 8px;
}
.tag-drawer-head-left { display: flex; align-items: center; gap: 4px; justify-self: start; }
.tag-drawer-total { grid-column: 2; color: var(--text-secondary); font-size: 11px; }
.tag-drawer-sort {
  display: inline-flex; align-items: center; gap: 3px;
  background: transparent; border: none; cursor: default; padding: 1px 4px;
  color: var(--text-secondary); font-size: 11px; border-radius: 3px;
}
.tag-drawer-sort:hover { color: var(--accent-color); }
.tag-drawer-sort svg, .tag-drawer-collapse svg { width: 10px; height: 10px; }
.tag-drawer-collapse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 16px; background: transparent; border: none;
  cursor: default; color: var(--accent-color); opacity: 0.6; padding: 0;
}
.tag-drawer-collapse:hover { opacity: 1; filter: drop-shadow(0 0 4px var(--accent-color)); }
.tag-drawer-collapse svg { transition: transform 0.18s ease; }
.tag-drawer.collapsed .tag-drawer-collapse svg { transform: rotate(180deg); }
.tag-drawer-list {
  /* A dragged height (--tag-drawer-list-max) replaces the default cap,
     never past 60% of the window: a height dragged in a tall window
     must not push the tree out of a shorter one. */
  max-height: min(var(--tag-drawer-list-max, min(240px, 34vh)), 60vh);
  /* Left 26px: a row's 8px padding then puts the names under the Sort
     label (header 8px + chevron 18px + gap 4px + the button's 4px),
     owner 2026-10-03. */
  overflow-y: auto; padding: 0 4px 4px 26px;
  /* Room for the scrollbar always, so the counts don't jump left when
     it appears (owner 2026-10-03). */
  scrollbar-gutter: stable;
}
.tag-drawer-letter {
  padding: 4px 8px 1px; font-size: 10px; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.tag-drawer-row {
  display: flex; align-items: center; gap: 8px; padding: 2px 8px;
  border-radius: 4px; cursor: default;
}
.tag-drawer-row:hover { background: var(--item-hover); }
.tag-drawer-row.is-chosen {
  background: color-mix(in srgb, var(--accent-color) 14%, transparent);
  color: var(--accent-color);
}
/* "name (count)": the name shrinks (ellipsis) before the count does. */
.tag-drawer-name { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-drawer-name b { font-weight: 600; color: var(--accent-color); }
.tag-drawer-count { flex: 0 0 auto; margin-left: -4px; font-size: 11px; color: var(--text-muted); }
.tag-drawer-row.is-chosen .tag-drawer-count { color: inherit; }
.tag-drawer-places { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 2px 8px 5px 20px; }
.tag-drawer-places-lead { font-size: 11px; color: var(--text-muted); margin-right: 2px; }
.tag-drawer-place {
  display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  padding: 0 7px; height: 18px; border-radius: 9px; font-size: 11px;
  background: transparent; color: var(--text-secondary); cursor: default;
  border: 1px solid color-mix(in srgb, var(--icon-color) 40%, transparent);
}
.tag-drawer-place span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-drawer-place:hover { color: var(--accent-color); border-color: var(--accent-color); }
/* A place this surface cannot reach (the website's bookmarks, which live in the
   browser): shown, greyed and uncounted, never opened (owner ruling G). */
.tag-drawer-place.is-greyed,
.tag-drawer-place.is-greyed:hover {
  opacity: 0.45; color: var(--text-secondary);
  border-color: color-mix(in srgb, var(--icon-color) 40%, transparent);
}
.tag-drawer-empty { padding: 6px 12px 8px 8px; color: var(--text-secondary); font-size: 11px; }
/* A note under the drawer menu's Rename / Merge / Remove (libraryScope's `note`):
   the library page's pointer to where a tag changes beyond the library. */
.tag-manage-note {
  max-width: 240px; padding: 4px 16px 6px; font-size: 12px; line-height: 1.4;
  color: var(--text-secondary); white-space: normal;
}
.tag-manage-note a { color: var(--accent-color); text-decoration: underline; }