/* Universal site search. Figma: Wkq6C0DFA2Fwlm0kE7qB4v node 1888:32292.
   Self-sufficient for the same reason as part-finder-pill.css: this renders in
   a shadow root the marketing stylesheet cannot reach. */
/* Fill the host's box, both axes.

   Webflow puts `style="display:contents"` inline on <code-island>, so the
   island itself never has a box and cannot be sized — the component's own root
   IS the layout child, and it is the thing that has to stretch. Measured on
   cloyes-stg/timing-systems before this: `.cl-nav-search` 494x48 with `.ss`
   only 38 tall inside it.

   `height: 100%` resolves against the host's height when the host has one
   (the 48px navbar shell) and collapses to content otherwise, which is why
   `min-height` carries the content floor instead. */
.ss {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /*
   * Set here, unitless, and inherited by everything inside.
   *
   * Nothing in this file declared a line-height except the input, so every
   * other element inherited the HOST page's — and an inherited line-height
   * crosses into a shadow root like any other inherited property. Webflow
   * emits that value in px, so `.ss-opt-title` and `.ss-opt-sub` were leading
   * at a fixed pixel height that had nothing to do with their own font size.
   *
   * A ratio is the fix rather than a tidier length: a LENGTH inherits as the
   * computed px, so one value lands on the 14px title and the 12px subtitle
   * alike; a ratio recomputes per element. Same reason `.pf` sets its own.
   */
  line-height: var(--line-height--150, 1.5);
}

.ss-field {
  display: flex;
  flex: 1 1 auto;
  /* border-box so the frame and padding fit INSIDE the host's height rather
     than adding to it — the shadow root gets no reset from the page. */
  box-sizing: border-box;
  align-items: center;
  gap: var(--spacing--6px, 0.375rem);
  padding: var(--spacing--8px, 0.5rem);
  background: var(--color--input-bg, #fdfcfd);
  border: var(--border--1px, 1px) solid var(--border--darker, rgba(39, 39, 42, 0.15));
  border-radius: var(--radius--8px, 0.5rem);
}
/* Stand down when the host already supplies the frame — see the `chrome` prop.
   Written as a modifier rather than by targeting the host's class, so this
   stylesheet stays self-sufficient and knows nothing about who embeds it. */
.ss-field--bare {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
/* 1rem glyph centred in a 1.25rem box, matching --spacing--16px in a
   --spacing--20px well. Token-first with a rem fallback, like everything else
   here, so it holds inside the shadow root where the site's tokens still
   inherit but its classes do not. */
.ss-icon {
  display: flex;
  width: var(--spacing--20px, 1.25rem);
  height: var(--spacing--20px, 1.25rem);
  align-items: center;
  justify-content: center;
  color: var(--color--placeholder, #949ca8);
  flex: 0 0 auto;
}
/* The SVG carries no width/height attributes — those would be px, and the root
   is fluid, so the icon has to be sized here in rem to scale with everything
   around it. `display: block` kills the inline-baseline gap under it. */
.ss-icon svg {
  display: block;
  width: var(--spacing--16px, 1rem);
  height: var(--spacing--16px, 1rem);
}
.ss-input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  padding: 0 var(--spacing--4px, 0.25rem);
  font-family: var(--font--body, Poppins, sans-serif);
  font-size: var(--font-size--text-small, 0.875rem);
  /* Was 1.25rem — a length, and the one the rest of the file inherited nothing
     from. 1.4 on 0.875rem is 19.6px against the 20px it was pinned to, and it
     now tracks the font size instead of fighting it. */
  line-height: var(--line-height--140, 1.4);
  color: var(--color--ink, #14181f);
}
.ss-input::placeholder { color: var(--color--placeholder, #949ca8); }

.ss-menu {
  position: absolute;
  top: calc(100% + var(--spacing--6px, 0.375rem));
  left: 0;
  right: 0;
  z-index: 80;
  max-height: 26rem;
  overflow: auto;
  padding: var(--spacing--6px, 0.375rem);
  background: var(--color--white, #fff);
  border: var(--border--1px, 1px) solid var(--color--field-border, #d8dde3);
  border-radius: var(--radius--12px, 0.75rem);
  box-shadow: 0 1.125rem 3.125rem -1.375rem rgba(13, 31, 56, 0.35);
}
.ss-group + .ss-group { margin-top: var(--spacing--8px, 0.5rem); }
.ss-group-label {
  margin: 0 0 var(--spacing--4px, 0.25rem);
  padding: 0 var(--spacing--8px, 0.5rem);
  font-size: var(--font-size--text-tiny, 0.75rem);
  font-weight: var(--weight--semibold, 600);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color--text-muted, #5a6472);
}
.ss-opt {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--spacing--8px, 0.5rem);
  border-radius: var(--radius--8px, 0.5rem);
  text-decoration: none;
  color: var(--color--ink, #14181f);
}
.ss-opt--active { background: var(--color--grey-50, #f5f6f9); }
/* Hover only under a real pointer: on touch this rule has no matching
   `mouseleave`, so a tapped option keeps the hover background stuck after
   the tap. Per the project's motion/interaction directive. */
@media (hover: hover) {
  .ss-opt:hover { background: var(--color--grey-50, #f5f6f9); }
}
/* Stated on both rather than left to inherit the root's 1.5: these are the two
   lines of a menu row, which is UI rather than prose, and the design system
   gives a fixed-height control the tighter leading. */
.ss-opt-title {
  font-size: var(--font-size--text-small, 0.875rem);
  line-height: var(--line-height--140, 1.4);
  font-weight: var(--weight--medium, 500);
}
.ss-opt-sub {
  font-size: var(--font-size--text-tiny, 0.75rem);
  line-height: var(--line-height--140, 1.4);
  color: var(--color--text-muted, #5a6472);
}

.ss-empty {
  margin: 0;
  padding: var(--spacing--8px, 0.5rem);
  font-size: var(--font-size--text-small, 0.875rem);
  color: var(--color--text-muted, #5a6472);
}

.ss-all {
  display: block;
  width: 100%;
  margin-top: var(--spacing--8px, 0.5rem);
  padding: var(--spacing--8px, 0.5rem);
  background: none;
  border: 0;
  border-top: var(--border--1px, 1px) solid var(--color--field-border, #d8dde3);
  border-radius: 0;
  font-family: var(--font--body, Poppins, sans-serif);
  font-size: var(--font-size--text-small, 0.875rem);
  font-weight: var(--weight--semibold, 600);
  /* blue-BRIGHT, not --color--blue. That token is #133c74 and this was reading
     it while falling back to #1c5296, so the link rendered a shade darker than
     every other link in the app the moment the tokens were present. The
     fallback was the author's intent; the token name was the typo. */
  color: var(--color--blue-bright, #1c5296);
  text-align: left;
  cursor: pointer;
}