/* Floating Part Finder pill.
   Figma: Wkq6C0DFA2Fwlm0kE7qB4v node 2388:8252.

   SELF-SUFFICIENT, like search.css and for the same reason: this ships inside
   a Webflow Code Component, which renders in a shadow root the marketing
   site's stylesheet cannot cross. Custom properties DO inherit across that
   boundary, so every value is written token-first with the Figma literal as
   the fallback — correct on a page that defines the tokens, and still correct
   on one that does not. */

/* One knob for the panel's enter/exit. PANEL_MS in PartFinderPill.tsx must
   match it — the exit is a CSS transition and a JS timer keeps the panel
   mounted for exactly as long as it runs. */
.pfp {
  --dur-panel: 220ms;
  --pfp-inset: 1rem;

  position: fixed;
  right: var(--spacing--24px, 1.5rem);
  bottom: var(--spacing--24px, 1.5rem);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing--12px, 0.75rem);

  /* Hidden until the reader has scrolled past the page's own finder, then
     faded UP into place. `visibility` rather than `display` so the transition
     has something to run on, and it is in the transition list with a delay so
     it flips at the END of the fade out and at the START of the fade in. */
  opacity: 0;
  transform: translateY(var(--nudge, 0.75rem));
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s linear var(--dur-3, 320ms);
}
.pfp--revealed {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s;
}

/* Open, the wrapper stops being a bottom-right anchor and becomes a dock. It
   is inset rather than full-bleed: a panel bleeding into both viewport edges
   read as a broken page rather than as a floating finder. */
.pfp--open {
  left: var(--pfp-inset);
  right: var(--pfp-inset);
  bottom: var(--pfp-inset);
  align-items: stretch;
  gap: 0;
}

/* ── Collapsed pill ─────────────────────────────────────────── */
.pfp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing--16px, 1rem);
  min-width: 14.3125rem; /* 229px, the Figma width */
  padding: 1rem 1rem 1rem 0.75rem; /* 16 / 16 / 16 / 12 */
  background: var(--color--red, #db192a);
  color: var(--color--white, #fff);
  border: none;
  border-radius: 999px;
  box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-family: var(--font--body, Poppins, sans-serif);
  text-align: left;
}
.pfp-btn-left {
  display: flex;
  align-items: center;
  gap: var(--spacing--8px, 0.5rem);
}
.pfp-icon,
.pfp-chev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem; /* 24px */
  height: 1.5rem;
  flex: 0 0 auto;
}
.pfp-icon {
  border-radius: var(--radius--6px, 0.375rem);
}
.pfp-chev {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9999px;
}
/* The SVGs carry no width/height attributes — those would be px, and the root
   is fluid (calc(100vw / 90)), so a px icon stops scaling with the label beside
   it. Sized here in rem instead; `display: block` kills the inline-baseline gap
   underneath. 0.875rem is --spacing--14px, the Figma glyph size. */
.pfp-icon svg,
.pfp-chev svg {
  display: block;
  width: var(--spacing--14px, 0.875rem);
  height: var(--spacing--14px, 0.875rem);
}

/* Figma flips the chevron to point up while collapsed; it points down once the
   panel is open, so the glyph always indicates where the panel will go. */
.pfp-chev svg {
  transform: rotate(180deg);
}
.pfp-chev--up svg {
  transform: none;
}
.pfp-label {
  font-size: 0.9375rem; /* 15px */
  font-weight: var(--weight--semibold, 600);
  font-style: italic;
  line-height: normal;
  white-space: nowrap;
}

/* No transform on hover or press. docs/MOTION_SYSTEM.md is explicit that
   controls get no lift, no compression and no entrance animation — the pill is
   a control, so it shifts colour only. */
@media (hover: hover) {
  .pfp-btn:hover {
    background: var(--color--red-dark, #b31423);
  }
}
.pfp-btn:focus-visible {
  outline: 2px solid var(--color--white, #fff);
  outline-offset: 2px;
}

/* The pill gets out of the way while the finder is up — the panel carries its
   own close control, so leaving a second one floating over it is redundant.
   It comes back only once the panel has finished leaving, because .pfp--open
   is removed at the end of the exit, not at the start. */
.pfp--open .pfp-btn {
  /* Out of flow, not merely invisible. `visibility: hidden` alone still
     reserves the pill's 56px row, which pushed the panel that far up off the
     bottom inset and read as a stray gap. Absolute at the dock's bottom-right
     is exactly where it already sat, so it fades out in place. */
  position: absolute;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s linear var(--dur-2, 180ms);
}
.pfp-btn {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--dur-3, 320ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    background-color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    visibility 0s;
}

/* ── Expanded panel ─────────────────────────────────────────── */
/* Deliberately chrome-less: no background, border, radius, shadow or padding.
   The bar inside brings its own card, and wrapping it in a second one produced
   a box inside a box. The panel is now only a full-width positioning shell. */
.pfp-panel {
  position: relative;
  width: 100%;
  max-width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;

  /* NOT `overflow-y: auto`. A scroll container clips its children, and the
     thing being clipped here is the field dropdown — the exact overflow this
     panel is meant to stop. The bar is short (it renders with showResults
     false), so it does not need to scroll; the short-viewport case is handled
     at the bottom of this file. */
  overflow: visible;
}

/* Enter AND exit, so closing is as smooth as opening. A transition, not an
   animation: a keyframe animation only plays on the way in, which is what the
   previous version did and why closing was an instant cut. */
.pfp-panel {
  opacity: 0;
  transform: translateY(var(--nudge, 0.75rem));
  transition:
    opacity var(--dur-panel) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    transform var(--dur-panel) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}
.pfp-panel--in {
  opacity: 1;
  transform: none;
}

/* The panel holds the real bar, so it inherits every finder style already.
   The card keeps its shadow here: inset from the viewport edges it reads as a
   floating surface, and without one it looked pasted onto the page. */
.pfp-panel .pf {
  gap: var(--spacing--16px, 1rem);
}

/* ── Close control ──────────────────────────────────────────── */
/* Sits at the panel's top-right, level with the tab strip. The strip is given
   room for it below so a tab can never end up underneath. */
.pfp-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem; /* 36px */
  height: 2.25rem;
  padding: 0;
  background: var(--color--white, #fff);
  color: var(--color--text-muted, #5a6472);
  border: var(--border--1px, 1px) solid #e3e7ec;
  border-radius: 9999px;
  box-shadow: 0 0.25rem 1rem rgba(13, 31, 56, 0.18);
  cursor: pointer;
}
@media (hover: hover) {
  .pfp-close:hover {
    color: var(--color--red, #db192a);
    border-color: var(--color--red, #db192a);
  }
}
/* 1rem glyph (--spacing--16px) in the 2.25rem button, sized here rather than by
   px attributes on the SVG — same reason as the pill icons above. */
.pfp-close svg {
  display: block;
  width: var(--spacing--16px, 1rem);
  height: var(--spacing--16px, 1rem);
}
.pfp-close:focus-visible {
  outline: 2px solid var(--color--blue, #1c5296);
  outline-offset: 2px;
}
.pfp-close {
  transition:
    color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1)),
    border-color var(--dur-2, 180ms) var(--ease-out, cubic-bezier(0.2, 0, 0, 1));
}
/* Keep the tab strip clear of the close button. */
.pfp-panel .pf-tabs {
  padding-right: 2.75rem;
}
/* That padding keeps Cross Reference off the card's corner, so the square
   join the full-width mobile strip needs does not apply here. */
.pfp-panel .pf-bar-card--x {
  border-top-right-radius: var(--radius--12px);
}

@media (prefers-reduced-motion: reduce) {
  .pfp,
  .pfp-panel,
  .pfp-btn,
  .pfp-close {
    transition: none;
  }
  .pfp,
  .pfp-panel {
    transform: none;
  }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media screen and (max-width: 991px) {
  .pfp {
    right: var(--spacing--16px, 1rem);
    bottom: var(--spacing--16px, 1rem);
    left: var(--spacing--16px, 1rem);
    align-items: stretch;
  }
  .pfp-btn {
    min-width: 0;
    width: 100%;
  }
}

/* ── Short viewports ────────────────────────────────────────── */
/* The only case where the bar can genuinely outgrow the screen: five stacked
   fields on a short phone. Scrolling is reintroduced only here, and only
   because being unable to reach the Find Parts button is worse than a clipped
   dropdown — which the `pf-menu--up` flip already mitigates by opening the
   menu into the space above. `dvh` so the mobile URL bar does not steal room
   that `vh` would insist is still there. */
@media screen and (max-height: 46rem) {
  .pfp-panel {
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
  }
}