/* ==========================================================================
   Search & replace: the in-editor find bar (fb-), Find in Path (fp-) and the
   Find tool window (fw-). Every colour comes from tokens.css.
   ========================================================================== */

/* ------------------------------------------------------------- shared bits */
.fb-toggles { display: flex; align-items: center; gap: 1px; flex: none; }
.fb-toggle {
  width: 20px; height: 20px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  color: var(--fg-muted);
  transition: background 90ms var(--ease), color 90ms var(--ease);
}
.fb-toggle:hover { background: var(--bg-hover); color: var(--fg); }
.fb-toggle.on { background: var(--accent-soft); color: var(--fg); box-shadow: inset 0 0 0 1px var(--accent); }
.fb-toggle svg { width: 14px; height: 14px; opacity: var(--icon-op); }

/* ==========================================================================
   1. Find bar — overlay strip pinned to the top of the editor
   ========================================================================== */
.fb {
  position: absolute;
  top: 0; right: var(--w-marker); left: auto;
  min-width: 480px; max-width: calc(100% - 24px);
  z-index: var(--z-float);
  display: flex; flex-direction: column;
  padding: 4px 5px;
  gap: 3px;
  font-family: var(--font-ui);
  font-size: var(--fs-ui);
  background: var(--bg-popup);
  border: 1px solid var(--bd-soft);
  border-top: none;
  border-radius: 0 0 var(--radius-m) var(--radius-m);
  box-shadow: var(--shadow-popup);
  user-select: none;
}
.fb.hidden { display: none; }

.fb-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.fb-mode-spacer { width: 22px; flex: none; }

.fb-field {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 3px;
  padding: 0 3px 0 6px;
  height: 26px;
  background: var(--bg-input);
  border: 1px solid var(--bd-strong);
  border-radius: var(--radius-s);
  transition: border-color 90ms var(--ease);
}
.fb-field:focus-within { border-color: var(--bd-focus); box-shadow: 0 0 0 1px var(--bd-focus); }
.fb.nomatch .fb-row:first-of-type .fb-field { border-color: var(--sq-error); box-shadow: none; }

.fb-input {
  flex: 1; min-width: 40px;
  border: 0; background: transparent; outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  user-select: text;
}
.fb-input::placeholder { color: var(--fg-muted); font-family: var(--font-ui); }

.fb-count {
  flex: none; padding: 0 4px;
  color: var(--fg-muted);
  font-size: var(--fs-ui-s);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.fb-count.none { color: var(--sq-error); }

.fb-nav { display: flex; gap: 1px; flex: none; }
.fb-btn {
  width: 22px; height: 22px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--radius-s);
  color: var(--fg-dim);
  transition: background 90ms var(--ease), color 90ms var(--ease);
}
.fb-btn:hover { background: var(--bg-hover); color: var(--fg); }
.fb-btn:active { background: var(--bg-pressed); }
.fb-btn.disabled { opacity: 0.35; pointer-events: none; }
.fb-btn svg { width: 14px; height: 14px; opacity: var(--icon-op); }
.fb-mode { color: var(--fg-muted); }

.fb-buttons { display: flex; gap: 4px; flex: none; }
.fb-text-btn {
  height: 24px; padding: 0 10px;
  border: 1px solid var(--bd-strong);
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--fg);
  font-size: var(--fs-ui-s);
  white-space: nowrap;
  cursor: default;
  transition: background 90ms var(--ease), border-color 90ms var(--ease);
}
.fb-text-btn:hover { background: var(--bg-hover); border-color: var(--bd-focus); }
.fb-text-btn:active { background: var(--bg-pressed); }

.fb-error {
  padding: 1px 6px 2px 26px;
  color: var(--sq-error);
  font-size: var(--fs-ui-s);
  line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fb-error.hidden { display: none; }

.fb-history {
  position: absolute; top: calc(100% - 4px); left: 26px;
  min-width: 260px; max-width: 420px; max-height: 220px; overflow: auto;
  padding: 3px;
  background: var(--bg-popup);
  border: 1px solid var(--bd-soft);
  border-radius: var(--radius-m);
  box-shadow: var(--shadow-popup);
  z-index: var(--z-popup);
}
.fb-history.hidden { display: none; }
.fb-hitem {
  padding: 3px 7px;
  border-radius: var(--radius-s);
  color: var(--fg-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-ui-s);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fb-hitem:hover { background: var(--bg-hover); color: var(--fg); }
.fb-hitem.selected { background: var(--bg-sel); color: var(--fg); }

/* ==========================================================================
   2. Find in Path dialog
   ========================================================================== */
.dialog.fp-dialog .dlg-body { padding: 0; display: flex; min-height: 0; overflow: hidden; }
.fp { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.fp-top { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px 8px; }
.fp-field {
  display: flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 4px 0 8px;
  background: var(--bg-input);
  border: 1px solid var(--bd-strong);
  border-radius: var(--radius-s);
}
.fp-field:focus-within { border-color: var(--bd-focus); box-shadow: 0 0 0 1px var(--bd-focus); }
.fp-ico { display: grid; place-items: center; color: var(--fg-muted); flex: none; }
.fp-ico svg { width: 15px; height: 15px; opacity: var(--icon-op); }
.fp-input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--fs-ui);
  user-select: text;
}
.fp-input::placeholder { color: var(--fg-muted); font-family: var(--font-ui); }
.fp-error { color: var(--sq-error); font-size: var(--fs-ui-s); padding-left: 2px; }
.fp-error.hidden { display: none; }

.fp-scopes {
  display: flex; align-items: center; gap: 2px;
  padding: 0 12px;
  border-bottom: 1px solid var(--bd-soft);
}
.fp-scopes .spacer { flex: 1; }
.fp-scope {
  padding: 5px 10px 6px;
  color: var(--fg-dim);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 90ms var(--ease);
}
.fp-scope:hover { color: var(--fg); }
.fp-scope.active { color: var(--fg); border-bottom-color: var(--accent); }
.fp-preset.hidden { display: none; }
.fp-select {
  height: 22px; margin-bottom: 3px;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--bd-strong); border-radius: var(--radius-s);
  font-size: var(--fs-ui-s);
}

.fp-controls { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.fp-dir, .fp-mask { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fp-dir { flex: 1; }
.fp-dir.hidden { display: none; }
.fp-mask { flex: none; width: 260px; }
.fp-lbl { color: var(--fg-dim); font-size: var(--fs-ui-s); white-space: nowrap; }
.fp-controls .fp-input {
  height: 24px; padding: 0 6px; flex: 1;
  background: var(--bg-input);
  border: 1px solid var(--bd-strong);
  border-radius: var(--radius-s);
}
.fp-controls .fp-input:focus { border-color: var(--bd-focus); }

.fp-body { flex: 1; display: flex; min-height: 0; border-top: 1px solid var(--bd-soft); }
.fp-files {
  width: 290px; flex: none;
  display: flex; min-height: 0;
  border-right: 1px solid var(--bd-soft);
  background: var(--bg-panel);
}
.fp-files .list { flex: 1; overflow: auto; padding: 3px; }
.fp-files .list-row {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 6px;
  border-radius: var(--radius-s);
  color: var(--fg-dim);
  min-width: 0;
}
.fp-files .list-row.selected { background: var(--bg-sel); color: var(--fg); }
.fp-files .list:focus .list-row.selected { background: var(--bg-sel); }
.fp-frow-ico { display: grid; place-items: center; flex: none; }
.fp-frow-ico svg { width: 15px; height: 15px; display: block; }
.fp-frow-name { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; max-width: 55%; }
.fp-frow-dir { color: var(--fg-muted); font-size: var(--fs-ui-s); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-frow-n {
  flex: none; padding: 0 5px;
  border-radius: 7px;
  background: var(--bg-pressed); color: var(--fg-dim);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.fp-files .list-empty { padding: 14px; color: var(--fg-muted); text-align: center; }

.fp-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--bg-editor); }
.fp-prev-head {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; flex: none;
  border-bottom: 1px solid var(--bd-soft);
  color: var(--fg-dim); font-size: var(--fs-ui-s);
}
.fp-prev-head svg { width: 14px; height: 14px; display: block; }
.fp-prev-path { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fp-prev-body {
  flex: 1; overflow: auto; min-height: 0;
  padding: 4px 0;
  font-family: var(--font-mono);
  font-size: var(--fs-editor);
  line-height: var(--lh-editor);
  user-select: text;
}
.fp-nopreview { flex: 1; display: grid; place-items: center; color: var(--fg-muted); }

.fp-prow { display: flex; align-items: baseline; white-space: pre; min-height: var(--lh-editor); }
.fp-prow.hit { background: var(--bg-sel-soft); }
.fp-prow.current { background: var(--ed-caretrow); box-shadow: inset 2px 0 0 var(--accent); }
.fp-pln {
  flex: none; width: 46px; padding-right: 10px;
  text-align: right; color: var(--ed-linenum);
  font-size: var(--fs-ui-s); user-select: none;
}
.fp-pcode { flex: 1; min-width: 0; color: var(--sy-text); }
.fp-hit { background: var(--ed-search); color: inherit; border-radius: 2px; }
.fp-prow.current .fp-hit { background: var(--ed-search-current); box-shadow: 0 0 0 1px var(--ed-search-outline); }
.fp-prow-new { background: var(--vcs-added-bg); }
.fp-prow-new .fp-pln { color: var(--vcs-added); }
.fp-new { background: var(--vcs-word-add); color: var(--fg); text-decoration: none; border-radius: 2px; }

.fp-status { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); font-size: var(--fs-ui-s); }
.fp-status-text { white-space: nowrap; }
.fp-progress { display: block; width: 90px; height: 3px; border-radius: 2px; background: var(--bd-soft); overflow: hidden; }
.fp-progress i { display: block; height: 100%; background: var(--accent); transition: width 120ms linear; }
.fp-confirm { padding: 6px 2px; line-height: 1.6; }

/* ==========================================================================
   3. Find tool window
   ========================================================================== */
.tw-body.fw { display: flex; flex-direction: column; overflow: hidden; }
.fw-tabs { overflow-x: auto; scrollbar-width: none; }
.fw-tabs::-webkit-scrollbar { height: 0; }
.fw-tabs.hidden { display: none; }
.fw-tab { display: flex; align-items: center; gap: 4px; }
.fw-tab-label { white-space: nowrap; }
.fw-tab-close {
  display: grid; place-items: center;
  width: 14px; height: 14px; border-radius: var(--radius-s);
  color: var(--fg-muted); opacity: 0;
  transition: opacity 90ms var(--ease), background 90ms var(--ease);
}
.fw-tab:hover .fw-tab-close, .fw-tab.active .fw-tab-close { opacity: 1; }
.fw-tab-close:hover { background: var(--bg-hover); color: var(--fg); }
.fw-tab-close svg { width: 11px; height: 11px; display: block; }

.fw-main { flex: 1; display: flex; min-height: 0; }
.fw-toolbar { flex: none; }
.fw-pane { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

.fw-summary {
  display: flex; align-items: center; gap: 10px; flex: none;
  padding: 4px 10px;
  border-bottom: 1px solid var(--bd-soft);
  color: var(--fg-muted); font-size: var(--fs-ui-s);
  white-space: nowrap; overflow: hidden;
}
.fw-summary.hidden { display: none; }
.fw-q { color: var(--fg); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; }
.fw-n { color: var(--fg-dim); }
.fw-warn { color: var(--sq-warning); }

.fw-filter {
  flex: none; margin: 5px 10px; height: 24px; padding: 0 7px;
  background: var(--bg-input); color: var(--fg);
  border: 1px solid var(--bd-strong); border-radius: var(--radius-s);
  outline: none; user-select: text;
}
.fw-filter:focus { border-color: var(--bd-focus); }
.fw-filter.hidden { display: none; }

.fw-content { flex: 1; min-height: 0; display: flex; }
.fw-content .tree { flex: 1; overflow: auto; padding: 2px 0; }
.fw-content .tw-empty { flex: 1; }

.fw-content .tree-row {
  display: flex; align-items: center; gap: 4px; height: 20px;
  padding-right: 8px; color: var(--fg-dim); min-width: 0;
}
.fw-content .tree-row:hover { background: var(--bg-hover); }
.fw-content .tree-row.selected { background: var(--bg-sel); color: var(--fg); }
.fw-content .tree:not(:focus) .tree-row.selected { background: var(--bg-sel-inactive); }
.fw-content .tree-arrow { flex: none; width: 14px; display: grid; place-items: center; color: var(--fg-muted); }
.fw-content .tree-arrow svg { width: 12px; height: 12px; display: block; }
.fw-content .tree-icon { flex: none; display: grid; place-items: center; }
.fw-content .tree-icon svg { width: 15px; height: 15px; display: block; }
.fw-content .tree-label { color: var(--fg); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-content .tree-badge {
  margin-left: 6px; padding: 0 5px;
  border-radius: 7px;
  background: var(--bg-pressed); color: var(--fg-dim);
  font-size: 10px; font-variant-numeric: tabular-nums;
}
.fw-content .tree-suffix { color: var(--fg-muted); font-size: var(--fs-ui-s); margin-left: 6px; }
.fw-content .fw-match .tree-label { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.fw-content .fw-match.excluded .tree-label { text-decoration: line-through; opacity: 0.55; }
.fw-ln {
  flex: none; min-width: 32px; text-align: right;
  color: var(--ed-linenum); font-size: var(--fs-ui-s);
  font-variant-numeric: tabular-nums;
}
.fw-code {
  flex: 1; min-width: 0;
  font-family: var(--font-mono); font-size: var(--fs-ui);
  color: var(--sy-text);
  white-space: pre; overflow: hidden; text-overflow: ellipsis;
}
.fw-hit { background: var(--ed-search); color: inherit; border-radius: 2px; }
.tree-row.selected .fw-hit { background: var(--ed-search-current); }

@media (max-width: 900px) {
  .fb { min-width: 0; left: 8px; right: 8px; }
  .fp-files { width: 210px; }
  .fp-mask { width: 170px; }
}