/* Motion is optional; no component relies on animation to become visible. */
/* Search focus belongs to the whole control, including its icon. */
#ff-workspace .ff-search { border-radius: 7px; outline: 1px solid transparent; outline-offset: 5px; }
#ff-workspace .ff-search:focus-within { outline-color: #777; background: #ffffff04; }
#ff-workspace .ff-search input:focus { outline: none; box-shadow: none; }
@media (max-width: 700px) {
  #ff-workspace .ff-search { outline-offset: 0; }
}
/* Route headings receive focus for reading order, but are not controls. */
#ff-workspace #ff-heading[tabindex="-1"]:focus,
#ff-workspace #doc-title[tabindex="-1"]:focus { outline: none; }

#ff-workspace.has-interface-motion .ff-page:not([hidden]),
#ff-workspace.has-interface-motion .catalog-card { animation: none; }

#ff-workspace #home-token-catalog .catalog-card,
#ff-workspace #ff-explore-rows .catalog-card {
  transition: border-color 180ms ease, box-shadow 240ms ease, background-color 180ms ease;
}

@media (hover: hover) {
  #ff-workspace #home-token-catalog .catalog-card:hover,
  #ff-workspace #ff-explore-rows .catalog-card:hover {
    transform: none;
    border-color: #656565;
    background: #191919;
    box-shadow: 0 8px 26px #0005, inset 0 1px 0 #ffffff08;
  }
}

#ff-workspace .catalog-card:focus-visible,
#ff-workspace .catalog-picker summary:focus-visible {
  outline: 2px solid #efefef;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: no-preference) {
  #ff-workspace .catalog-picker[open] .catalog-picker-menu {
    transform-origin: top left;
    animation: fanfee-menu-enter 160ms cubic-bezier(.22,1,.36,1) both;
  }
}

@keyframes fanfee-menu-enter {
  from { opacity: .6; transform: translateY(-4px) scale(.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #ff-workspace .catalog-card,
  #ff-workspace .catalog-picker-menu { animation: none !important; transition: none !important; }
}
