/* Canvas quick-find (#490).

   The bottom-right navigation stack, read from the floor up: the zoom cluster,
   this, then the map (#430). Search sits *under* the map on purpose — the hits
   light up on the silhouette directly above the field, so "your matches are up
   there" is a glance, not an inference.

   The magnifier is a 36px tile — the zoom buttons' size and the collapsed
   map's size, since the three sit in one column and any odd one out reads as
   a mistake. */
.tree-container {
  /* The row at its tallest: the open field, whose height comes from the 16px
     input (the iOS focus-zoom floor) inside its padding, plus the card's own
     padding and border. Published as the constant minimap.css stacks on, so
     the map holds still when the tile becomes a field — the closed tile's
     shorter card just sits in a slightly deeper gap, which reads as spacing. */
  --tree-quickfind-height: calc(42px + 2 * var(--space-xxs) + 2px);
}

.tree-quickfind {
  position: absolute;
  right: var(--space-md);
  bottom: calc(var(--space-md) + var(--tree-controls-height) + var(--space-xs));
  display: flex;
  align-items: center;
  gap: var(--space-xxs);
  padding: var(--space-xxs);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  z-index: var(--z-base);
}

.tree-quickfind[hidden] {
  display: none;
}

/* Shut, the tile is the whole card; open, the field claims a searchable width
   without ever crossing the canvas's own edge on a phone. */
.tree-quickfind--open {
  width: 288px;
  max-width: calc(100vw - 2 * var(--space-md));
}

.tree-quickfind__field {
  display: none;
  flex: 1;
  min-width: 0;
}

.tree-quickfind--open .tree-quickfind__field {
  display: block;
}

/* The magnifier wears the same tile treatment as `.tree-controls__btn` below
   it and the map's chevron above it — one family of viewport controls. Open,
   it stays warmed so the row reads as engaged rather than as a stray button
   next to a text box. */
.tree-quickfind__toggle {
  flex: none;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.tree-quickfind__toggle .icon,
.tree-quickfind__toggle .icon svg {
  display: block;
  width: 20px;
  height: 20px;
}

.tree-quickfind__toggle:hover,
.tree-quickfind__toggle:focus-visible,
.tree-quickfind--open .tree-quickfind__toggle {
  background-color: var(--color-accent-soft);
  color: var(--color-accent);
}

.tree-quickfind__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-accent);
}

.tree-quickfind__toggle:active {
  transform: scale(0.92);
}

/* The picker inside the card is chrome, not a form field: drop the second
   border so the row reads as one control, and let the results fill exactly the
   gap between the field and the bottom of the canvas — the container clips its
   overflow, so a taller list would simply lose its last rows. */
.tree-quickfind .mv-multiselect__field {
  border-color: transparent;
  background-color: transparent;
}

.tree-quickfind .mv-multiselect--open .mv-multiselect__field,
.tree-quickfind .mv-multiselect__field:focus-within {
  border-color: var(--color-accent);
  background-color: var(--color-surface);
}

.tree-quickfind .mv-multiselect__dropdown {
  max-height: calc(var(--tree-controls-height) + var(--space-md));
  /* Wider than the field it hangs from: names plus life dates need the room,
     and there is nothing to the left of it but canvas. */
  left: auto;
  width: max(100%, 240px);
}

/* Sitting this close to the canvas floor, the list has about 140px to work
   with — at the form padding that is two and a half rows. Tightened to the
   vertical rhythm of the name-plus-dates pair it holds, three matches fit,
   which is the difference between reading the results and scrolling them.
   Padding only: the coarse-pointer `min-height` still owns the touch target. */
.tree-quickfind .mv-multiselect__option {
  padding-top: var(--space-xxs);
  padding-bottom: var(--space-xxs);
}

/* The on-canvas modes each own the bottom edge and hide the zoom cluster; the
   find goes with them, exactly as the map does. */
.mv-arranging .tree-quickfind,
.mv-painting .tree-quickfind,
.mv-time-travelling .tree-quickfind {
  display: none;
}

/* Touch-device-only sizing. See css/layout.css for the strategy note. */
@media (hover: none) and (pointer: coarse) {
  .tree-container {
    --tree-quickfind-height: calc(var(--touch-target-min) + 2 * var(--space-xxs) + 2px);
  }

  .tree-quickfind__toggle {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    touch-action: manipulation;
  }
}

/* Narrow viewports: a shorter card so the field, its results and the map above
   still leave usable canvas behind them. */
@media (max-width: 600px) {
  .tree-quickfind--open {
    width: 244px;
  }

  .tree-quickfind .mv-multiselect__dropdown {
    width: max(100%, 216px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tree-quickfind__toggle {
    transition: none;
  }

  .tree-quickfind__toggle:active {
    transform: none;
  }
}