@inploi/plugin-job-search 0.1.0 → 0.1.1

package/dist/plugin-job-search.cjs

@@ -531,17 +531,25 @@ const Fallback = ({
 }) => {
   return u$1("div", {
     style: {
-      padding: "0 1rem",
+      display: "flex",
+      flexDirection: "column",
+      gap: ".5rem",
+      padding: "1rem",
       fontSize: "1rem",
-      color: "#333333",
-      fontFamily: "'system-ui' 'Helvetica'"
+      color: "hsl(10, 82%, 45%)",
+      fontFamily: "'system-ui' 'Helvetica'",
+      background: "hsl(7, 100%, 98%)"
     },
-    children: ["Something went wrong.", u$1("br", {}), ' Error Message: "', error.message, '"', u$1("button", {
+    children: [u$1("p", {
+      children: error.message
+    }), u$1("button", {
       onClick: resetError,
       style: {
-        background: "#efefef",
+        background: "white",
         border: "none",
         cursor: "pointer",
+        textAlign: "center",
+        borderRadius: "4px",
         padding: "0.5rem 1rem"
       },
       children: "Retry"
@@ -698,6 +706,9 @@ const icons = {
   x: u$1("path", {
     d: "M8 8l8 8M8 16l8 -8"
   }),
+  plus: u$1("path", {
+    d: "M12 8V16M8 12H16"
+  }),
   "chevron-right": u$1("path", {
     d: "M11 8L15 12L11 16"
   })
@@ -911,6 +922,7 @@ function B$1(n2, t2) {
 }
 const JOB_SEARCH_ELEMENT_ID = "inploi-job-search";
 const JOB_SEARCH_SCOPE_ELEMENT_ID = "ijs";
+const PAGE_SIZE = 10;
 function g(n2, t2) {
   for (var e2 in t2)
     n2[e2] = t2[e2];
@@ -1476,11 +1488,11 @@ if (process.env.NODE_ENV === "production") {
   shim.exports = requireUseSyncExternalStoreShim_development();
 }
 var shimExports = shim.exports;
-const noop = () => {
+const noop$1 = () => {
 };
 const UNDEFINED = (
   /*#__NOINLINE__*/
-  noop()
+  noop$1()
 );
 const OBJECT = Object;
 const isUndefined = (v2) => v2 === UNDEFINED;
@@ -1566,8 +1578,8 @@ const [onWindowEvent, offWindowEvent] = isWindowDefined && window.addEventListen
   window.addEventListener.bind(window),
   window.removeEventListener.bind(window)
 ] : [
-  noop,
-  noop
+  noop$1,
+  noop$1
 ];
 const isVisible = () => {
   const visibilityState = isDocumentDefined && document.visibilityState;
@@ -1781,7 +1793,7 @@ const initCache = (provider, options) => {
     const opts = mergeObjects(defaultConfigOptions, options);
     const EVENT_REVALIDATORS = {};
     const mutate2 = internalMutate.bind(UNDEFINED, provider);
-    let unmount = noop;
+    let unmount = noop$1;
     const subscriptions = {};
     const subscribe = (key, callback) => {
       const subs = subscriptions[key] || [];
@@ -1847,11 +1859,11 @@ const [cache, mutate] = initCache(/* @__PURE__ */ new Map());
 const defaultConfig = mergeObjects(
   {
     // events
-    onLoadingSlow: noop,
-    onSuccess: noop,
-    onError: noop,
+    onLoadingSlow: noop$1,
+    onSuccess: noop$1,
+    onError: noop$1,
     onErrorRetry,
-    onDiscarded: noop,
+    onDiscarded: noop$1,
     // switches
     revalidateOnFocus: true,
     revalidateOnReconnect: true,
@@ -2919,7 +2931,7 @@ const JobSchema = transform(JobPayloadSchema, (schema) => {
     if (schema.pay_mask)
       return "Competitive";
     if (schema.pay_max && schema.pay_min)
-      return numberFormatter.formatRange(+schema.pay_min, +schema.pay_max);
+      return [numberFormatter.formatRange(+schema.pay_min, +schema.pay_max), payPeriods[schema.pay_type]].join(" ");
     if (schema.pay)
       return [numberFormatter.format(+schema.pay), payPeriods[schema.pay_type]].join(" ");
     if (!schema.pay && !schema.pay_min && !schema.pay_max)
@@ -2948,19 +2960,39 @@ const JobSchema = transform(JobPayloadSchema, (schema) => {
   };
 });
 const JobSearchResponseSchema = transform(object({
-  data: object({
-    results: array(JobSchema),
-    available_properties: AvailablePropertiesSchema
-  }),
+  data: array(JobSchema),
   pagination: PaginationSchema
 }), (schema) => ({
   pagination: schema.pagination,
-  results: schema.data.results,
-  availableProperties: schema.data.available_properties
+  results: schema.data
 }));
 const filtersToPayload = (filters) => {
   return Object.fromEntries(Object.entries(filters).map(([key, filter]) => [key, (filter == null ? void 0 : filter.value) ?? null]));
 };
+const getAvailableFilters = async ({
+  apiClient,
+  filters,
+  logger,
+  signal
+}) => {
+  try {
+    const response = await apiClient.fetch(`/search/filters`, {
+      method: "POST",
+      body: JSON.stringify({
+        filters: filtersToPayload(filters)
+      }),
+      signal
+    });
+    return parse(AvailablePropertiesSchema, response);
+  } catch (e2) {
+    if (e2 instanceof ValiError) {
+      logger.error(e2.message, e2.issues);
+    } else {
+      logger.error(e2);
+    }
+    throw e2;
+  }
+};
 const getJobSearchResults = async ({
   apiClient,
   logger,
@@ -2969,16 +3001,14 @@ const getJobSearchResults = async ({
   page = 1
 }) => {
   try {
-    const response = await apiClient.fetch(`/search?page=${page}`, {
+    const response = await apiClient.fetch(`/search/results?page=${page}&per_page=${PAGE_SIZE}`, {
       method: "POST",
       body: JSON.stringify({
-        query: "Customer Service",
         filters: filtersToPayload(filters)
       }),
       signal
     });
-    const parsedResponse = parse(JobSearchResponseSchema, response);
-    return parsedResponse;
+    return parse(JobSearchResponseSchema, response);
   } catch (e2) {
     if (e2 instanceof ValiError) {
       logger.error(e2.message, e2.issues);
@@ -2988,17 +3018,15 @@ const getJobSearchResults = async ({
     throw e2;
   }
 };
-const getDataState = (swr) => {
+const getQueryState = (swr) => {
   if (swr.error)
     return {
       state: "error",
-      error: swr.error,
-      data: swr.data
+      error: swr.error
     };
   if (swr.isLoading && swr.data === void 0)
     return {
-      state: "loading",
-      data: swr.data
+      state: "loading"
     };
   if ((swr.isLoading || swr.isValidating) && swr.data)
     return {
@@ -3010,7 +3038,7 @@ const getDataState = (swr) => {
       state: "loaded",
       data: swr.data
     };
-  throw new Error("Unhandled state");
+  throw new Error("Unhandled data state");
 };
 const SWR_SETTINGS = {
   keepPreviousData: true,
@@ -3019,6 +3047,7 @@ const SWR_SETTINGS = {
   revalidateIfStale: false,
   revalidateFirstPage: false
 };
+const cacheKey = (value) => JSON.stringify(value);
 function r(e2) {
   var t2, f2, n2 = "";
   if ("string" == typeof e2 || "number" == typeof e2)
@@ -3092,26 +3121,141 @@ const defineConfig = (options) => {
   return { compose: compose1, cva: cva1, cx: cx1 };
 };
 const { compose, cva, cx } = defineConfig();
+const tagClass = cva({
+  base: "truncate max-w-full block fr font-style-tag font-family-tag font-weight-tag text-style-tag",
+  variants: {
+    variant: {
+      neutralWeak: "bg-tag-neutral-weak-bg border-solid border-px text-tag-neutral-weak-copy border-tag-neutral-weak-stroke",
+      neutralStrong: "text-tag-neutral-strong-copy border-solid border-px bg-tag-neutral-strong-bg border-tag-neutral-strong-stroke",
+      accentStrong: "text-tag-accent-strong-copy border-solid border-px bg-tag-accent-strong-bg border-tag-accent-strong-stroke",
+      monetaryWeak: "bg-tag-monetary-weak-bg border-none text-tag-monetary-weak-copy"
+    },
+    interactive: {
+      true: "ease-expo-out rounded-interactive transition-all duration-snappy ",
+      false: "rounded-tag"
+    },
+    size: {
+      xs: "px-2",
+      sm: "px-3 py-1",
+      lg: "px-5 py-2"
+    },
+    disabled: {
+      true: "opacity-25 pointer-events-none",
+      false: ""
+    }
+  },
+  compoundVariants: [{
+    disabled: false,
+    interactive: true,
+    class: "cursor-pointer active:scale-[0.975]"
+  }],
+  defaultVariants: {
+    variant: "neutralWeak",
+    size: "sm",
+    disabled: false,
+    interactive: false
+  }
+});
+const CurrentValueTag = ({
+  query,
+  property,
+  selectedValues
+}) => {
+  switch (query.state) {
+    case "error":
+    case "loading":
+      return null;
+    case "loaded":
+    case "revalidating": {
+      const suggestions = query.data[property.key];
+      invariant(suggestions, `API error: no available properties for key “${property.key}”`);
+      const selectedSuggestions = suggestions.filter((s2) => selectedValues.includes(s2.value));
+      switch (selectedSuggestions.length) {
+        case 0:
+          return null;
+        case 1: {
+          const firstSuggestion = selectedSuggestions[0];
+          invariant(firstSuggestion);
+          return u$1("span", {
+            class: tagClass({
+              size: "sm",
+              variant: "accentStrong",
+              interactive: true,
+              class: "truncate"
+            }),
+            children: firstSuggestion.label
+          });
+        }
+        default:
+          return u$1("span", {
+            class: tagClass({
+              size: "sm",
+              variant: "accentStrong",
+              interactive: true,
+              class: "truncate tabular-nums"
+            }),
+            children: selectedSuggestions.length
+          });
+      }
+    }
+    default:
+      exhaustive(query);
+  }
+};
 const btnClass = cva({
   base: "fr animate-selected-tag justify-center touch-hitbox text-style-filter ease-expo-out rounded-interactive relative flex cursor-pointer items-center py-1 transition-all duration-snappy active:scale-95",
   variants: {
     variant: {
-      neutral: "bg-interactive-neutral-bg hover:bg-interactive-neutral-bg-hover text-interactive-neutral-text",
-      accent: "bg-interactive-accent-bg hover:bg-interactive-accent-bg-hover text-interactive-accent-text"
+      neutral: "bg-interactive-neutral-bg pointer-fine:hover:bg-interactive-neutral-bg-hover text-interactive-neutral-text",
+      accent: "bg-interactive-accent-bg pointer-fine:hover:bg-interactive-accent-bg-hover text-interactive-accent-text"
     },
     icon: {
-      none: "px-3",
-      right: "pl-3 pr-1",
-      left: "pl-1 pr-3"
+      none: "",
+      right: "",
+      left: ""
+    },
+    size: {
+      sm: "py-1",
+      lg: "py-2"
     }
   },
+  compoundVariants: [
+    {
+      size: "sm",
+      icon: "right",
+      class: "pl-3 pr-1"
+    },
+    {
+      size: "sm",
+      icon: "left",
+      class: "pl-1 pr-3"
+    },
+    {
+      size: "sm",
+      icon: "none",
+      class: "px-3"
+    },
+    {
+      size: "lg",
+      icon: "right",
+      class: "pl-5 pr-3"
+    }
+    // { size: 'lg', icon: 'left', class: 'pl-3 pr-5' },
+    // { size: 'lg', icon: 'none', class: 'px-5' },
+  ],
   defaultVariants: {
     variant: "neutral",
-    icon: "none"
+    icon: "none",
+    size: "sm"
   }
 });
+const SUGGESTION_COUNT = 8;
+const TAG_HEIGHT = 42;
+const GAP = 8;
+const LINE_COUNT = 6;
+const PADDING_Y = 4;
 const inputClass = cva({
-  base: "py-2 fr bg-lowest caret-accent-11 placeholder:text-neutral-10  ring-job-card-stroke ring-width-section px-4 ease-expo-out duration-snappy transition-all rounded-input font-style-input text-style-input font-weight-input",
+  base: "py-2 fr bg-lowest caret-accent-11 placeholder:text-neutral-10 ring-job-card-stroke ring-width-section px-4 ease-expo-out duration-snappy transition-all rounded-input font-style-input text-style-input font-weight-input",
   variants: {
     hasValue: {
       false: "text-copy-neutral",
@@ -3127,26 +3271,33 @@ const toggleInArray = (array2, value) => {
 };
 const FilterContentActive = ({
   value,
-  suggestions,
   property,
   onSkip,
-  state,
+  useQuery,
   onValueChange,
+  unfilteredQuery,
   onRender
 }) => {
-  const [internalValue, setInternalValue] = h(value);
-  p(() => {
-    setInternalValue(value);
-  }, [value]);
+  const filterQuery = getQueryState(useQuery());
+  if (filterQuery.state === "error")
+    throw filterQuery.error;
+  const availablePropertyKeys = F$1(() => {
+    switch (filterQuery.state) {
+      case "loading":
+        return null;
+      case "loaded":
+      case "revalidating": {
+        const properties = filterQuery.data[property.key] ?? [];
+        return Object.fromEntries(properties.map((p2) => [p2.value, true]));
+      }
+      default:
+        exhaustive(filterQuery);
+    }
+  }, [filterQuery, property.key]);
   const selectedValues = getSelectedValues(value);
-  const selectedInternalValues = getSelectedValues(internalValue);
-  const hasValue = selectedValues.length > 0 || selectedInternalValues.length > 0;
+  const hasValue = selectedValues.length > 0;
+  const [displayCount, setDisplayCount] = h(SUGGESTION_COUNT);
   const [search, setSearch] = h();
-  const availableSuggestions = F$1(() => {
-    if (!search)
-      return suggestions;
-    return suggestions.filter((s2) => s2.label.toLowerCase().includes(search.toLowerCase()));
-  }, [search, suggestions]);
   p(() => {
     onRender();
   });
@@ -3163,65 +3314,111 @@ const FilterContentActive = ({
         onInput: (e2) => setSearch(e2.currentTarget.value),
         placeholder: "Type to search"
       })
-    }), state === "loading" ? u$1("div", {
-      class: "flex px-4",
-      children: u$1("div", {
-        "aria-hidden": true,
-        class: tagClass$1({
-          size: "lg",
-          active: false,
-          class: "animate-skeleton cursor-default opacity-20 active:-scale-100"
-        }),
-        children: u$1("span", {
-          class: "inline-block w-[10ch]"
-        })
-      })
-    }) : u$1("ul", {
-      "aria-label": "Filter options",
-      class: "hide-scrollbars -my-2 flex w-full select-none gap-1.5 overflow-auto px-4 py-2 md:flex-wrap md:overflow-hidden",
-      children: availableSuggestions.length === 0 ? u$1("p", {
-        class: "font-style-tag text-style-tag font-weight-tag border-px w-full border-transparent py-2 text-center md:text-left",
-        children: "No filter options available."
-      }) : availableSuggestions.slice(0, 10).map((suggestion) => {
-        const active = selectedInternalValues.includes(suggestion.value);
-        return u$1("li", {
-          class: "animate-appear-tag max-w-full origin-top",
-          children: u$1("button", {
-            "data-filter": true,
-            "data-current-value": active ? "true" : void 0,
-            onClick: () => {
-              switch (value.select) {
-                case "many": {
-                  const newValue = toggleInArray(selectedInternalValues, suggestion.value);
-                  setInternalValue({
-                    select: "many",
-                    value: newValue
-                  });
-                  break;
-                }
-                case "one":
-                  setInternalValue({
-                    select: "one",
-                    value: suggestion.value
-                  });
-                  onValueChange({
-                    select: "one",
-                    value: suggestion.value
-                  });
-                  break;
-                default:
-                  exhaustive(value);
-              }
-            },
-            class: tagClass$1({
-              size: "lg",
-              active
-            }),
-            children: suggestion.label
-          })
-        }, suggestion.value);
-      })
-    }), u$1("div", {
+    }), (() => {
+      switch (unfilteredQuery.state) {
+        case "error":
+          throw unfilteredQuery.error;
+        case "loading":
+          return u$1("div", {
+            class: "flex px-4",
+            children: u$1("div", {
+              "aria-hidden": true,
+              class: tagClass({
+                size: "lg",
+                variant: "neutralStrong",
+                interactive: true,
+                class: "animate-skeleton cursor-default opacity-20 active:-scale-100"
+              }),
+              children: u$1("span", {
+                class: "inline-block w-[10ch]"
+              })
+            })
+          });
+        case "revalidating":
+        case "loaded": {
+          const allSuggestions = unfilteredQuery.data[property.key];
+          invariant(allSuggestions, `API error: no available properties for key “${property.key}”`);
+          const filteredSuggestions = search && search.length > 1 ? allSuggestions.filter((s2) => s2.label.toLowerCase().includes(search.toLowerCase())) : allSuggestions;
+          const suggestions = filteredSuggestions.map((s2) => ({
+            ...s2,
+            disabled: availablePropertyKeys === null ? false : availablePropertyKeys[s2.value] !== true
+          }));
+          const noEnabledOptions = !suggestions.find((suggestion) => !suggestion.disabled);
+          if (noEnabledOptions)
+            return u$1("p", {
+              class: "font-style-tag text-style-tag font-weight-tag border-px w-full border-transparent px-4 py-2 text-center",
+              children: "No filter options available."
+            });
+          return u$1("div", {
+            class: "pointer-fine:px-4",
+            children: u$1("ul", {
+              style: {
+                maxHeight: (TAG_HEIGHT + GAP) * (LINE_COUNT - 1) + TAG_HEIGHT / 2 + 2 * PADDING_Y
+              },
+              class: "hide-scrollbars pointer-fine:flex-wrap pointer-fine:p-2 pointer-fine:ring-width-section ring-section-weak-stroke pointer-fine:bg-app pointer-fine:rounded-section pointer-coarse:overflow-x-auto flex max-w-full gap-2 overflow-y-auto px-4",
+              children: [suggestions.slice(0, displayCount).map((suggestion) => {
+                const active = selectedValues.includes(suggestion.value);
+                return u$1("li", {
+                  class: "animate-appear-tag max-w-full origin-top",
+                  children: u$1("button", {
+                    "data-filter": true,
+                    "data-current-value": active ? "true" : void 0,
+                    onClick: () => {
+                      switch (value.select) {
+                        case "many": {
+                          const newValue = toggleInArray(selectedValues, suggestion.value);
+                          onValueChange({
+                            select: "many",
+                            value: newValue
+                          });
+                          break;
+                        }
+                        case "one":
+                          onValueChange({
+                            select: "one",
+                            value: suggestion.value
+                          });
+                          break;
+                        default:
+                          exhaustive(value);
+                      }
+                    },
+                    class: tagClass({
+                      size: "lg",
+                      variant: active ? "accentStrong" : "neutralStrong",
+                      interactive: true,
+                      disabled: suggestion.disabled
+                    }),
+                    children: suggestion.label
+                  })
+                }, suggestion.value);
+              }), suggestions.length > displayCount && u$1("li", {
+                class: "animate-appear-tag pointer-fine:w-full max-w-full flex-none origin-top",
+                children: u$1("button", {
+                  class: btnClass({
+                    variant: "neutral",
+                    icon: "right",
+                    size: "lg",
+                    class: "border-px flex w-full max-w-full flex-none flex-nowrap justify-center truncate border-transparent"
+                  }),
+                  onClick: () => {
+                    setDisplayCount(displayCount + SUGGESTION_COUNT);
+                  },
+                  children: [u$1("span", {
+                    class: "font-style-tag font-family-tag font-weight-tag text-style-tag",
+                    children: "Show More"
+                  }), u$1(Icon, {
+                    name: "plus"
+                  })]
+                })
+              })]
+            })
+          });
+        }
+        default:
+          exhaustive(unfilteredQuery);
+      }
+    })(), u$1("footer", {
       class: "flex justify-end p-2",
       children: [u$1("div", {
         class: "flex-1",
@@ -3241,7 +3438,7 @@ const FilterContentActive = ({
         class: "flex items-center overflow-hidden",
         children: u$1("p", {
           class: "font-style-default text-style-tag font-weight-default flex-grow select-none truncate text-center",
-          children: [selectedInternalValues.length, " selected"]
+          children: [selectedValues.length, " selected"]
         })
       }), u$1("div", {
         class: "flex-1",
@@ -3251,12 +3448,7 @@ const FilterContentActive = ({
             icon: "right",
             class: "ml-auto"
           }),
-          onClick: () => {
-            if (hasValue) {
-              onValueChange(internalValue);
-            }
-            onSkip();
-          },
+          onClick: onSkip,
           children: [hasValue ? "Done" : "Skip", " ", u$1(Icon, {
             name: "chevron-right"
           })]
@@ -3276,21 +3468,8 @@ const filterIcons = {
   company_name: "briefcase",
   category: "briefcase"
 };
-const tagClass$1 = cva({
-  base: "ease-expo-out truncate max-w-full block cursor-pointer fr border-solid border-px font-style-tag font-family-tag font-weight-tag text-style-tag rounded-interactive transition-all duration-snappy active:scale-[0.975]",
-  variants: {
-    active: {
-      false: "text-tag-neutral-strong-copy bg-tag-neutral-strong-bg border-tag-neutral-strong-stroke",
-      true: "text-tag-accent-strong-copy bg-tag-accent-strong-bg border-tag-accent-strong-stroke"
-    },
-    size: {
-      sm: "px-3 py-1",
-      lg: "px-5 py-2"
-    }
-  }
-});
 const wrapperClass$1 = cva({
-  base: "group flex min-w-0 fr overflow-hidden rounded-section text-copy-neutral-lowcontrast ring-width-section transition-all duration-medium ease-expo-out fr-parent [&:has(.fr-child:active)]:scale-[0.975]",
+  base: "group flex min-w-0 fr overflow-hidden rounded-section text-copy-neutral-lowcontrast ring-width-section transition-all duration-medium ease-expo-out fr-parent [&:has(.fr-child:active)]:scale-[0.975] origin-[50%_1.75rem]",
   variants: {
     hasValue: {
       false: "bg-section-weak-bg ring-section-weak-stroke",
@@ -3335,22 +3514,19 @@ const Filter = ({
   value,
   onActiveChange,
   property,
-  suggestions,
   onSkip,
   onValueChange,
-  state
+  unfilteredQuery,
+  useQuery
 }) => {
-  var _a;
   const icon = property.icon ?? filterIcons[property.key] ?? "filter";
   const selectedValues = getSelectedValues(value);
-  const hasValue = selectedValues.length > 0;
   const {
     height,
     ref: contentRef,
     updateHeight
   } = useMeasureHeight([active]);
-  const selectedSuggestions = suggestions.filter((s2) => selectedValues.includes(s2.value));
-  const selectedLabel = selectedSuggestions.length > 1 ? selectedSuggestions.length.toString() : (_a = selectedSuggestions[0]) == null ? void 0 : _a.label;
+  const hasValue = selectedValues.length > 0;
   return u$1("section", {
     "data-filter-key": property.key,
     role: "tab",
@@ -3359,7 +3535,7 @@ const Filter = ({
     class: wrapperClass$1({
       hasValue
     }),
-    onTouchStart: () => void 0,
+    onTouchStart: noop,
     children: [u$1("div", {
       class: "min-w-0 max-w-full shrink-0 flex-grow",
       children: [u$1("button", {
@@ -3384,12 +3560,12 @@ const Filter = ({
           class: "w-full",
           ref: contentRef,
           children: active && u$1(FilterContentActive, {
+            useQuery,
             onRender: updateHeight,
             onSkip,
             onValueChange,
+            unfilteredQuery,
             property,
-            state,
-            suggestions,
             value
           })
         })
@@ -3398,16 +3574,13 @@ const Filter = ({
       tabIndex: -1,
       class: "fr-child flex flex-shrink flex-grow cursor-pointer select-none items-center justify-end gap-2 overflow-hidden pl-2 pr-3 focus:outline-none",
       onClick: () => onActiveChange(true),
-      children: [selectedLabel && u$1("div", {
+      children: [u$1("div", {
         "aria-label": "Current value",
         class: "flex max-w-full gap-1 overflow-hidden",
-        children: u$1("span", {
-          class: tagClass$1({
-            size: "sm",
-            active: true,
-            class: "truncate tabular-nums"
-          }),
-          children: selectedLabel
+        children: u$1(CurrentValueTag, {
+          property,
+          query: unfilteredQuery,
+          selectedValues
         })
       }), u$1(Icon, {
         class: chevronClass(),
@@ -3443,6 +3616,8 @@ const useFilterKeyboardFocus = (activeKey, ref) => {
       focusFirstAvailableOption(keyToFocus, ref);
   }, [activeKey, previousActiveKey, ref]);
 };
+function noop() {
+}
 const nextStateFromValue = ({
   property,
   value,
@@ -3489,72 +3664,72 @@ const FilterSection = ({
   var _a;
   const [activeKey, setActiveKey] = h((_a = properties[0]) == null ? void 0 : _a.key);
   useFilterKeyboardFocus(activeKey, parentRef);
-  const {
-    ...swr
-  } = useSWR(JSON.stringify(appliedFilters), () => getJobSearchResults({
+  const defaultFilters = F$1(() => getFilterDefaults(properties), [properties]);
+  const unfilteredQuery = getQueryState(useSWR(cacheKey(defaultFilters), () => getAvailableFilters({
     apiClient,
     logger,
-    filters: appliedFilters
-  }), SWR_SETTINGS);
-  const {
-    data,
-    error,
-    state
-  } = getDataState(swr);
-  switch (state) {
-    case "error":
-      throw error;
-    case "loading":
-    case "revalidating":
-    case "loaded":
-      return u$1("aside", {
-        children: u$1("div", {
-          role: "tablist",
-          class: "top-filters sticky flex flex-col gap-2 px-4 md:px-0",
-          children: properties.map((property) => {
-            const active = activeKey === property.key;
-            const value = appliedFilters[property.key] ?? {
-              select: property.select,
-              value: void 0
-            };
-            const onValueChange = (value2) => {
-              const {
-                newActiveKey,
-                newValue
-              } = nextStateFromValue({
-                property,
-                activeKey,
-                value: value2,
-                properties,
-                appliedFilters
-              });
-              setActiveKey(newActiveKey);
-              return onFilterValueChange(property.key, newValue);
-            };
-            const onActiveChange = (active2) => setActiveKey(active2 ? property.key : void 0);
-            const suggestions = (data == null ? void 0 : data.availableProperties[property.key]) ?? [];
-            return u$1(ErrorBoundary, {
-              Fallback,
-              children: u$1(Filter, {
-                active,
-                property,
-                onActiveChange,
-                value,
-                suggestions,
-                onSkip: () => {
-                  var _a2;
-                  const currentIndex = properties.findIndex((p2) => p2.key === activeKey);
-                  const nextPropertyKey = currentIndex !== -1 ? (_a2 = properties[currentIndex + 1]) == null ? void 0 : _a2.key : void 0;
-                  setActiveKey(nextPropertyKey);
-                },
-                onValueChange,
-                state
-              })
-            }, property.key);
+    filters: defaultFilters
+  }), SWR_SETTINGS));
+  if (unfilteredQuery.state === "error")
+    throw unfilteredQuery.error;
+  const makeQueryWithoutFilter = T$1((keyToExclude) => () => {
+    const filters = {
+      ...appliedFilters,
+      [keyToExclude]: defaultFilters[keyToExclude]
+    };
+    return useSWR(cacheKey(filters), () => getAvailableFilters({
+      apiClient,
+      logger,
+      filters
+    }), SWR_SETTINGS);
+  }, [apiClient, appliedFilters, defaultFilters, logger]);
+  return u$1("aside", {
+    children: u$1("div", {
+      role: "tablist",
+      class: "top-filters sticky flex flex-col gap-2 px-4 md:px-0",
+      children: properties.map((property) => {
+        const active = activeKey === property.key;
+        const value = appliedFilters[property.key] ?? {
+          select: property.select,
+          value: void 0
+        };
+        const onValueChange = (value2) => {
+          const {
+            newActiveKey,
+            newValue
+          } = nextStateFromValue({
+            property,
+            activeKey,
+            value: value2,
+            properties,
+            appliedFilters
+          });
+          setActiveKey(newActiveKey);
+          return onFilterValueChange(property.key, newValue);
+        };
+        const onActiveChange = (active2) => setActiveKey(active2 ? property.key : void 0);
+        const useQuery = makeQueryWithoutFilter(property.key);
+        return u$1(ErrorBoundary, {
+          Fallback,
+          children: u$1(Filter, {
+            unfilteredQuery,
+            active,
+            property,
+            onActiveChange,
+            value,
+            onSkip: () => {
+              var _a2;
+              const currentIndex = properties.findIndex((p2) => p2.key === activeKey);
+              const nextPropertyKey = currentIndex !== -1 ? (_a2 = properties[currentIndex + 1]) == null ? void 0 : _a2.key : void 0;
+              setActiveKey(nextPropertyKey);
+            },
+            useQuery,
+            onValueChange
           })
-        })
-      });
-  }
+        }, property.key);
+      })
+    })
+  });
 };
 const getFirstPageKey = (getKey) => {
   return serialize(getKey ? getKey(0, null) : null)[0];
@@ -3778,18 +3953,6 @@ const wrapperClass = cva({
 const badgeClass = cva({
   base: "bg-tag-accent-strong-bg rounded-job-tag text-style-tag text-tag-accent-strong-copy font-weight-tag flex items-center justify-center px-2"
 });
-const tagClass = cva({
-  base: "rounded-tag text-style-tag font-weight-tag block px-2",
-  variants: {
-    colorScheme: {
-      default: "bg-tag-neutral-weak-bg text-tag-neutral-weak-copy ring-px ring-tag-neutral-weak-stroke",
-      monetary: "bg-tag-monetary-weak-bg text-tag-monetary-weak-copy"
-    }
-  },
-  defaultVariants: {
-    colorScheme: "default"
-  }
-});
 const JobCard = ({
   job
 }) => {
@@ -3820,13 +3983,16 @@ const JobCard = ({
         class: "flex flex-col items-start gap-2",
         children: [job.pay && u$1("span", {
           class: tagClass({
-            colorScheme: "monetary"
+            variant: "monetaryWeak",
+            size: "xs"
           }),
           children: job.pay
         }), job.contractType && u$1("div", {
           class: "flex items-center gap-2",
           children: u$1("span", {
-            class: tagClass(),
+            class: tagClass({
+              size: "xs"
+            }),
             children: job.contractType
           })
         })]
@@ -3879,19 +4045,22 @@ const JobCardSkeleton = ({
         class: "flex flex-col items-start gap-2",
         children: [seed % 2 === 0 && u$1("span", {
           class: tagClass({
-            colorScheme: "default",
+            variant: "neutralWeak",
+            size: "xs",
             class: "h-[1lh] w-[10ch]"
           })
         }), u$1("div", {
           class: "flex items-center gap-2",
           children: [u$1("span", {
             class: tagClass({
-              colorScheme: "default",
+              variant: "neutralWeak",
+              size: "xs",
               class: "h-[1lh] w-[6ch]"
             })
           }), u$1("span", {
             class: tagClass({
-              colorScheme: "default",
+              variant: "neutralWeak",
+              size: "xs",
               class: "h-[1lh] w-[8ch]"
             })
           })]
@@ -3915,7 +4084,7 @@ const LoadMore = ({
       class: "flex flex-col gap-3",
       "aria-hidden": true,
       children: Array.from({
-        length: 4
+        length: PAGE_SIZE
       }).map((_2, i2) => u$1("li", {
         children: u$1(JobCardSkeleton, {
           seed: i2,
@@ -3971,7 +4140,7 @@ const ResultsSection = ({
     ...swr
   } = useSWRInfinite((index, prevPageData) => {
     if (prevPageData === null)
-      return index + 1 + "/" + JSON.stringify(appliedFilters);
+      return index + 1 + "/" + cacheKey(appliedFilters);
     if (prevPageData.pagination.last_page === prevPageData.pagination.current_page)
       return null;
     return index + 1 + "/" + JSON.stringify(appliedFilters);
@@ -3989,7 +4158,7 @@ const ResultsSection = ({
     data,
     error,
     state
-  } = getDataState(swr);
+  } = getQueryState(swr);
   const fetchNextPage = () => {
     setSize((size2) => size2 + 1);
   };
@@ -4006,7 +4175,7 @@ const ResultsSection = ({
           class: "flex flex-col gap-3",
           "aria-hidden": true,
           children: Array.from({
-            length: 30
+            length: PAGE_SIZE
           }).map((_2, i2) => u$1("li", {
             children: u$1(JobCardSkeleton, {
               seed: i2,
@@ -4139,7 +4308,7 @@ const JobSearch = ({
     })
   });
 };
-const tailwind = "#ijs {\n	font-size: 16px;\n		--tw-content: '';\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n			font-family: inherit;\n			font-style: inherit;\n			font-weight: inherit;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button),\n		#ijs :is(a) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(input),\n		#ijs :is(textarea) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			min-width: 0;\n			max-width: unset;\n			width: 100%;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs.reduced-motion * {\n			animation-duration: 0.01ms !important;\n			animation-iteration-count: 1 !important;\n			transition-duration: 0.01ms !important;\n			scroll-behavior: auto !important;\n			animation-delay: 0s !important;\n		}\n\n		@media (prefers-reduced-motion) {\n			#ijs * {\n				animation-duration: 0.01ms !important;\n				animation-iteration-count: 1 !important;\n				transition-duration: 0.01ms !important;\n				scroll-behavior: auto !important;\n				animation-delay: 0s !important;\n			}\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\n	--tw-translate-x: 0;\n	--tw-translate-y: 0;\n	--tw-rotate: 0;\n	--tw-skew-x: 0;\n	--tw-skew-y: 0;\n	--tw-scale-x: 1;\n	--tw-scale-y: 1;\n	--tw-pan-x:  ;\n	--tw-pan-y:  ;\n	--tw-pinch-zoom:  ;\n	--tw-scroll-snap-strictness: proximity;\n	--tw-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\n	--tw-ordinal:  ;\n	--tw-slashed-zero:  ;\n	--tw-numeric-figure:  ;\n	--tw-numeric-spacing:  ;\n	--tw-numeric-fraction:  ;\n	--tw-ring-inset:  ;\n	--tw-ring-offset-width: 0px;\n	--tw-ring-offset-color: #fff;\n	--tw-ring-color: rgb(59 130 246 / 0.5);\n	--tw-ring-offset-shadow: 0 0 #0000;\n	--tw-ring-shadow: 0 0 #0000;\n	--tw-shadow: 0 0 #0000;\n	--tw-shadow-colored: 0 0 #0000;\n	--tw-blur:  ;\n	--tw-brightness:  ;\n	--tw-contrast:  ;\n	--tw-grayscale:  ;\n	--tw-hue-rotate:  ;\n	--tw-invert:  ;\n	--tw-saturate:  ;\n	--tw-sepia:  ;\n	--tw-drop-shadow:  ;\n	--tw-backdrop-blur:  ;\n	--tw-backdrop-brightness:  ;\n	--tw-backdrop-contrast:  ;\n	--tw-backdrop-grayscale:  ;\n	--tw-backdrop-hue-rotate:  ;\n	--tw-backdrop-invert:  ;\n	--tw-backdrop-opacity:  ;\n	--tw-backdrop-saturate:  ;\n	--tw-backdrop-sepia:  ;\n}\n\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\n	--tw-translate-x: 0;\n	--tw-translate-y: 0;\n	--tw-rotate: 0;\n	--tw-skew-x: 0;\n	--tw-skew-y: 0;\n	--tw-scale-x: 1;\n	--tw-scale-y: 1;\n	--tw-pan-x:  ;\n	--tw-pan-y:  ;\n	--tw-pinch-zoom:  ;\n	--tw-scroll-snap-strictness: proximity;\n	--tw-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\n	--tw-ordinal:  ;\n	--tw-slashed-zero:  ;\n	--tw-numeric-figure:  ;\n	--tw-numeric-spacing:  ;\n	--tw-numeric-fraction:  ;\n	--tw-ring-inset:  ;\n	--tw-ring-offset-width: 0px;\n	--tw-ring-offset-color: #fff;\n	--tw-ring-color: rgb(59 130 246 / 0.5);\n	--tw-ring-offset-shadow: 0 0 #0000;\n	--tw-ring-shadow: 0 0 #0000;\n	--tw-shadow: 0 0 #0000;\n	--tw-shadow-colored: 0 0 #0000;\n	--tw-blur:  ;\n	--tw-brightness:  ;\n	--tw-contrast:  ;\n	--tw-grayscale:  ;\n	--tw-hue-rotate:  ;\n	--tw-invert:  ;\n	--tw-saturate:  ;\n	--tw-sepia:  ;\n	--tw-drop-shadow:  ;\n	--tw-backdrop-blur:  ;\n	--tw-backdrop-brightness:  ;\n	--tw-backdrop-contrast:  ;\n	--tw-backdrop-grayscale:  ;\n	--tw-backdrop-hue-rotate:  ;\n	--tw-backdrop-invert:  ;\n	--tw-backdrop-opacity:  ;\n	--tw-backdrop-saturate:  ;\n	--tw-backdrop-sepia:  ;\n}\n\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .top-0 {\n	top: 0px;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-11 {\n	margin: 2.75rem;\n}\n\n		#ijs .m-3 {\n	margin: 0.75rem;\n}\n\n		#ijs .-my-2 {\n	margin-top: -0.5rem;\n	margin-bottom: -0.5rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .ml-auto {\n	margin-left: auto;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink-0 {\n	flex-shrink: 0;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .transform {\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag .6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag .9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		@keyframes slide-in-bottom {\n\n	0% {\n		transform: translateY(-50%);\n	}\n\n	100% {\n		transform: translateY(0);\n	}\n}\n\n		#ijs .animate-slide-in-bottom {\n	animation: slide-in-bottom .4s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		#ijs .cursor-default {\n	cursor: default;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-1\\.5 {\n	gap: 0.375rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .self-center {\n	align-self: center;\n}\n\n		#ijs .overflow-auto {\n	overflow: auto;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .rounded-input {\n	border-radius: var(--i-radius-input);\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border-px {\n	border-width: 1px;\n}\n\n		#ijs .border-solid {\n	border-style: solid;\n}\n\n		#ijs .border-tag-accent-strong-stroke {\n	border-color: var(--i-tag-accent-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-strong-stroke {\n	border-color: var(--i-tag-neutral-strong-stroke-color);\n}\n\n		#ijs .border-transparent {\n	border-color: transparent;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	background-color: var(--i-app-bg);\n}\n\n		#ijs .bg-interactive-accent-bg {\n	background-color: var(--i-interactive-accent-bg);\n}\n\n		#ijs .bg-interactive-neutral-bg {\n	background-color: var(--i-interactive-neutral-bg);\n}\n\n		#ijs .bg-job-card-bg {\n	background-color: var(--i-job-card-bg);\n}\n\n		#ijs .bg-lowest {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-lowest) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	background-color: var(--i-section-strong-bg);\n}\n\n		#ijs .bg-section-weak-bg {\n	background-color: var(--i-section-weak-bg);\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	background-color: var(--i-tag-accent-strong-bg);\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	background-color: var(--i-tag-monetary-weak-bg);\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	background-color: var(--i-tag-neutral-strong-bg);\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	background-color: var(--i-tag-neutral-weak-bg);\n}\n\n		#ijs .p-0 {\n	padding: 0px;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pl-1 {\n	padding-left: 0.25rem;\n}\n\n		#ijs .pl-2 {\n	padding-left: 0.5rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pl-4 {\n	padding-left: 1rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pr-3 {\n	padding-right: 0.75rem;\n}\n\n		#ijs .pt-1 {\n	padding-top: 0.25rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-default {\n	font-family: var(--i-font);\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-job-heading {\n	font-family: var(--i-font-job-heading);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-input {\n	font-size: 1rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-heading {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-default {\n	font-weight: var(--i-weight-default);\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-input {\n	font-weight: var(--i-weight-input);\n}\n\n		#ijs .font-weight-job-heading {\n	font-weight: var(--i-weight-job-heading);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .tabular-nums {\n	--tw-numeric-spacing: tabular-nums;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	color: var(--i-copy-accent);\n}\n\n		#ijs .text-copy-job-info {\n	color: var(--i-copy-info);\n}\n\n		#ijs .text-copy-neutral {\n	color: var(--i-copy);\n}\n\n		#ijs .text-copy-neutral-icon {\n	color: var(--i-copy-icon);\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	color: var(--i-copy-lowcontrast);\n}\n\n		#ijs .text-interactive-accent-text {\n	color: var(--i-interactive-accent-text);\n}\n\n		#ijs .text-interactive-neutral-text {\n	color: var(--i-interactive-neutral-text);\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	color: var(--i-tag-accent-strong-copy);\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	color: var(--i-tag-monetary-weak-copy);\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	color: var(--i-tag-neutral-strong-copy);\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	color: var(--i-tag-neutral-weak-copy);\n}\n\n		#ijs .caret-accent-11 {\n	caret-color: oklch(var(--i-a-11) / 1);\n}\n\n		#ijs .opacity-20 {\n	opacity: 0.2;\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .shadow {\n	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n		#ijs .outline-none {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-width-job-card {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-job-card-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-width-section {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-section-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-job-card-stroke {\n	--tw-ring-color: var(--i-job-card-stroke-color);\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-color: var(--i-section-strong-stroke-color);\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-color: var(--i-section-weak-stroke-color);\n}\n\n		#ijs .ring-tag-neutral-weak-stroke {\n	--tw-ring-color: var(--i-tag-neutral-weak-stroke-color);\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .invert {\n	--tw-invert: invert(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .filter {\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-opacity {\n	transition-property: opacity;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-medium {\n	transition-duration: .6s;\n}\n\n		#ijs .duration-slow {\n	transition-duration: .9s;\n}\n\n		#ijs .duration-snappy {\n	transition-duration: .4s;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-default {\n	font-style: var(--i-font-style);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-input {\n	font-style: var(--i-style-input);\n}\n\n		#ijs .font-style-job-heading {\n	font-style: var(--i-style-job-heading);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-tag);\n}\n\n		#ijs .top-filters {\n	top: var(--i-filters-offset-top);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 1);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .fr-parent:has(.fr-child:focus-visible) {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 1);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .fr-child {}\n\n		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .\\[text-wrap\\:pretty\\] {\n	text-wrap: pretty;\n}\n\n		#ijs .placeholder\\:text-neutral-10::-moz-placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .hover\\:bg-interactive-accent-bg-hover:hover {\n	background-color: var(--i-interactive-accent-bg-hover);\n}\n\n		#ijs .hover\\:bg-interactive-neutral-bg-hover:hover {\n	background-color: var(--i-interactive-neutral-bg-hover);\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:-scale-100:active {\n	--tw-scale-x: -1;\n	--tw-scale-y: -1;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:scale-95:active {\n	--tw-scale-x: .95;\n	--tw-scale-y: .95;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:scale-\\[0\\.975\\]:active {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:bg-job-card-bg-active:active {\n	background-color: var(--i-job-card-bg-active);\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-color: var(--i-job-card-stroke-color-active);\n}\n\n		@media (pointer: fine) {\n\n	#ijs .group:hover .pointer-fine\\:group-hover\\:text-copy-neutral {\n		color: var(--i-copy);\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:flex-wrap {\n		flex-wrap: wrap;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:overflow-hidden {\n		overflow: hidden;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:text-left {\n		text-align: left;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\n		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-section-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n	}\n}\n\n		#ijs .\\[\\&\\:has\\(\\.fr-child\\:active\\)\\]\\:scale-\\[0\\.975\\]:has(.fr-child:active) {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n";
+const tailwind = "#ijs {\n	font-size: 16px;\n		--tw-content: '';\n}\n\n		#ijs * {\n			box-sizing: border-box;\n			border-style: solid;\n			border-width: 0;\n			-webkit-tap-highlight-color: transparent;\n			font-family: inherit;\n			font-style: inherit;\n			font-weight: inherit;\n		}\n\n		#ijs ::before,\n		#ijs ::after {\n			box-sizing: border-box;\n		}\n\n		#ijs :is(a) {\n			text-decoration: none;\n		}\n\n		#ijs :is(ul, ol) {\n			list-style: none;\n			padding: 0;\n			margin: 0;\n		}\n\n		#ijs :is(p) {\n			margin: 0;\n			padding: 0;\n		}\n\n		#ijs :is(li) {\n			margin: 0;\n			padding: 0;\n			list-style: none;\n		}\n\n		#ijs :is(button),\n		#ijs :is(a) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			border: unset;\n			background: unset;\n			text-align: unset;\n		}\n\n		#ijs :is(input),\n		#ijs :is(textarea) {\n			display: block;\n			margin: 0;\n			padding: 0;\n			min-width: 0;\n			max-width: unset;\n			width: 100%;\n		}\n\n		#ijs :is(svg) {\n			display: block;\n		}\n\n		#ijs.reduced-motion * {\n			animation-duration: 0.01ms !important;\n			animation-iteration-count: 1 !important;\n			transition-duration: 0.01ms !important;\n			scroll-behavior: auto !important;\n			animation-delay: 0s !important;\n		}\n\n		@media (prefers-reduced-motion) {\n			#ijs * {\n				animation-duration: 0.01ms !important;\n				animation-iteration-count: 1 !important;\n				transition-duration: 0.01ms !important;\n				scroll-behavior: auto !important;\n				animation-delay: 0s !important;\n			}\n		}\n\n		#ijs *, #ijs ::before, #ijs ::after {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\n	--tw-translate-x: 0;\n	--tw-translate-y: 0;\n	--tw-rotate: 0;\n	--tw-skew-x: 0;\n	--tw-skew-y: 0;\n	--tw-scale-x: 1;\n	--tw-scale-y: 1;\n	--tw-pan-x:  ;\n	--tw-pan-y:  ;\n	--tw-pinch-zoom:  ;\n	--tw-scroll-snap-strictness: proximity;\n	--tw-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\n	--tw-ordinal:  ;\n	--tw-slashed-zero:  ;\n	--tw-numeric-figure:  ;\n	--tw-numeric-spacing:  ;\n	--tw-numeric-fraction:  ;\n	--tw-ring-inset:  ;\n	--tw-ring-offset-width: 0px;\n	--tw-ring-offset-color: #fff;\n	--tw-ring-color: rgb(59 130 246 / 0.5);\n	--tw-ring-offset-shadow: 0 0 #0000;\n	--tw-ring-shadow: 0 0 #0000;\n	--tw-shadow: 0 0 #0000;\n	--tw-shadow-colored: 0 0 #0000;\n	--tw-blur:  ;\n	--tw-brightness:  ;\n	--tw-contrast:  ;\n	--tw-grayscale:  ;\n	--tw-hue-rotate:  ;\n	--tw-invert:  ;\n	--tw-saturate:  ;\n	--tw-sepia:  ;\n	--tw-drop-shadow:  ;\n	--tw-backdrop-blur:  ;\n	--tw-backdrop-brightness:  ;\n	--tw-backdrop-contrast:  ;\n	--tw-backdrop-grayscale:  ;\n	--tw-backdrop-hue-rotate:  ;\n	--tw-backdrop-invert:  ;\n	--tw-backdrop-opacity:  ;\n	--tw-backdrop-saturate:  ;\n	--tw-backdrop-sepia:  ;\n}\n\n		#ijs ::backdrop {\n	--tw-border-spacing-x: 0;\n	--tw-border-spacing-y: 0;\n	--tw-translate-x: 0;\n	--tw-translate-y: 0;\n	--tw-rotate: 0;\n	--tw-skew-x: 0;\n	--tw-skew-y: 0;\n	--tw-scale-x: 1;\n	--tw-scale-y: 1;\n	--tw-pan-x:  ;\n	--tw-pan-y:  ;\n	--tw-pinch-zoom:  ;\n	--tw-scroll-snap-strictness: proximity;\n	--tw-gradient-from-position:  ;\n	--tw-gradient-via-position:  ;\n	--tw-gradient-to-position:  ;\n	--tw-ordinal:  ;\n	--tw-slashed-zero:  ;\n	--tw-numeric-figure:  ;\n	--tw-numeric-spacing:  ;\n	--tw-numeric-fraction:  ;\n	--tw-ring-inset:  ;\n	--tw-ring-offset-width: 0px;\n	--tw-ring-offset-color: #fff;\n	--tw-ring-color: rgb(59 130 246 / 0.5);\n	--tw-ring-offset-shadow: 0 0 #0000;\n	--tw-ring-shadow: 0 0 #0000;\n	--tw-shadow: 0 0 #0000;\n	--tw-shadow-colored: 0 0 #0000;\n	--tw-blur:  ;\n	--tw-brightness:  ;\n	--tw-contrast:  ;\n	--tw-grayscale:  ;\n	--tw-hue-rotate:  ;\n	--tw-invert:  ;\n	--tw-saturate:  ;\n	--tw-sepia:  ;\n	--tw-drop-shadow:  ;\n	--tw-backdrop-blur:  ;\n	--tw-backdrop-brightness:  ;\n	--tw-backdrop-contrast:  ;\n	--tw-backdrop-grayscale:  ;\n	--tw-backdrop-hue-rotate:  ;\n	--tw-backdrop-invert:  ;\n	--tw-backdrop-opacity:  ;\n	--tw-backdrop-saturate:  ;\n	--tw-backdrop-sepia:  ;\n}\n\n		#ijs .container {\n	width: 100%;\n}\n\n		@media (min-width: 640px) {\n\n	#ijs .container {\n		max-width: 640px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .container {\n		max-width: 768px;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .container {\n		max-width: 1024px;\n	}\n}\n\n		@media (min-width: 1280px) {\n\n	#ijs .container {\n		max-width: 1280px;\n	}\n}\n\n		@media (min-width: 1536px) {\n\n	#ijs .container {\n		max-width: 1536px;\n	}\n}\n\n		#ijs .pointer-events-none {\n	pointer-events: none;\n}\n\n		#ijs .visible {\n	visibility: visible;\n}\n\n		#ijs .invisible {\n	visibility: hidden;\n}\n\n		#ijs .collapse {\n	visibility: collapse;\n}\n\n		#ijs .static {\n	position: static;\n}\n\n		#ijs .fixed {\n	position: fixed;\n}\n\n		#ijs .absolute {\n	position: absolute;\n}\n\n		#ijs .relative {\n	position: relative;\n}\n\n		#ijs .sticky {\n	position: sticky;\n}\n\n		#ijs .top-0 {\n	top: 0px;\n}\n\n		#ijs .isolate {\n	isolation: isolate;\n}\n\n		#ijs .m-0 {\n	margin: 0px;\n}\n\n		#ijs .m-11 {\n	margin: 2.75rem;\n}\n\n		#ijs .m-3 {\n	margin: 0.75rem;\n}\n\n		#ijs .mx-auto {\n	margin-left: auto;\n	margin-right: auto;\n}\n\n		#ijs .ml-auto {\n	margin-left: auto;\n}\n\n		#ijs .block {\n	display: block;\n}\n\n		#ijs .inline-block {\n	display: inline-block;\n}\n\n		#ijs .inline {\n	display: inline;\n}\n\n		#ijs .flex {\n	display: flex;\n}\n\n		#ijs .inline-flex {\n	display: inline-flex;\n}\n\n		#ijs .table {\n	display: table;\n}\n\n		#ijs .table-row {\n	display: table-row;\n}\n\n		#ijs .flow-root {\n	display: flow-root;\n}\n\n		#ijs .grid {\n	display: grid;\n}\n\n		#ijs .inline-grid {\n	display: inline-grid;\n}\n\n		#ijs .contents {\n	display: contents;\n}\n\n		#ijs .list-item {\n	display: list-item;\n}\n\n		#ijs .\\!hidden {\n	display: none !important;\n}\n\n		#ijs .hidden {\n	display: none;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-\\[10ch\\] {\n	width: 10ch;\n}\n\n		#ijs .w-\\[6ch\\] {\n	width: 6ch;\n}\n\n		#ijs .w-\\[8ch\\] {\n	width: 8ch;\n}\n\n		#ijs .w-full {\n	width: 100%;\n}\n\n		#ijs .min-w-0 {\n	min-width: 0px;\n}\n\n		#ijs .max-w-full {\n	max-width: 100%;\n}\n\n		#ijs .max-w-screen-lg {\n	max-width: 1024px;\n}\n\n		#ijs .flex-1 {\n	flex: 1 1 0%;\n}\n\n		#ijs .flex-none {\n	flex: none;\n}\n\n		#ijs .flex-shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink {\n	flex-shrink: 1;\n}\n\n		#ijs .shrink-0 {\n	flex-shrink: 0;\n}\n\n		#ijs .flex-grow {\n	flex-grow: 1;\n}\n\n		#ijs .grow {\n	flex-grow: 1;\n}\n\n		#ijs .border-collapse {\n	border-collapse: collapse;\n}\n\n		#ijs .origin-\\[50\\%_1\\.75rem\\] {\n	transform-origin: 50% 1.75rem;\n}\n\n		#ijs .origin-top {\n	transform-origin: top;\n}\n\n		#ijs .transform {\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		@keyframes appear-tag {\n\n	0% {\n		transform: scale(0.9);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-appear-tag {\n	animation: appear-tag .6s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		@keyframes selected-tag {\n\n	0% {\n		transform: scale(1.11);\n	}\n\n	100% {\n		transform: scale(1);\n	}\n}\n\n		#ijs .animate-selected-tag {\n	animation: selected-tag .9s cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		@keyframes skeleton {\n\n	0% {\n		opacity: 0.2;\n	}\n\n	50% {\n		opacity: 0.5;\n	}\n\n	100% {\n		opacity: 0.3;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n}\n\n		@keyframes slide-in-bottom {\n\n	0% {\n		transform: translateY(-50%);\n	}\n\n	100% {\n		transform: translateY(0);\n	}\n}\n\n		#ijs .animate-slide-in-bottom {\n	animation: slide-in-bottom .4s cubic-bezier(0.16, 1, 0.3, 1) both;\n}\n\n		#ijs .cursor-default {\n	cursor: default;\n}\n\n		#ijs .cursor-pointer {\n	cursor: pointer;\n}\n\n		#ijs .select-none {\n	-webkit-user-select: none;\n	   -moz-user-select: none;\n	        user-select: none;\n}\n\n		#ijs .resize {\n	resize: both;\n}\n\n		#ijs .flex-col {\n	flex-direction: column;\n}\n\n		#ijs .flex-wrap {\n	flex-wrap: wrap;\n}\n\n		#ijs .flex-nowrap {\n	flex-wrap: nowrap;\n}\n\n		#ijs .items-start {\n	align-items: flex-start;\n}\n\n		#ijs .items-center {\n	align-items: center;\n}\n\n		#ijs .justify-end {\n	justify-content: flex-end;\n}\n\n		#ijs .justify-center {\n	justify-content: center;\n}\n\n		#ijs .gap-1 {\n	gap: 0.25rem;\n}\n\n		#ijs .gap-2 {\n	gap: 0.5rem;\n}\n\n		#ijs .gap-3 {\n	gap: 0.75rem;\n}\n\n		#ijs .gap-4 {\n	gap: 1rem;\n}\n\n		#ijs .self-center {\n	align-self: center;\n}\n\n		#ijs .overflow-hidden {\n	overflow: hidden;\n}\n\n		#ijs .overflow-y-auto {\n	overflow-y: auto;\n}\n\n		#ijs .truncate {\n	overflow: hidden;\n	text-overflow: ellipsis;\n	white-space: nowrap;\n}\n\n		#ijs .rounded-input {\n	border-radius: var(--i-radius-input);\n}\n\n		#ijs .rounded-interactive {\n	border-radius: var(--i-radius-interactive);\n}\n\n		#ijs .rounded-job-card {\n	border-radius: var(--i-radius-job-card);\n}\n\n		#ijs .rounded-job-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .rounded-section {\n	border-radius: var(--i-radius-section);\n}\n\n		#ijs .rounded-tag {\n	border-radius: var(--i-radius-job-tag);\n}\n\n		#ijs .border-px {\n	border-width: 1px;\n}\n\n		#ijs .border-solid {\n	border-style: solid;\n}\n\n		#ijs .border-none {\n	border-style: none;\n}\n\n		#ijs .border-tag-accent-strong-stroke {\n	border-color: var(--i-tag-accent-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-strong-stroke {\n	border-color: var(--i-tag-neutral-strong-stroke-color);\n}\n\n		#ijs .border-tag-neutral-weak-stroke {\n	border-color: var(--i-tag-neutral-weak-stroke-color);\n}\n\n		#ijs .border-transparent {\n	border-color: transparent;\n}\n\n		#ijs .bg-\\[currentColor\\] {\n	background-color: currentColor;\n}\n\n		#ijs .bg-app {\n	background-color: var(--i-app-bg);\n}\n\n		#ijs .bg-interactive-accent-bg {\n	background-color: var(--i-interactive-accent-bg);\n}\n\n		#ijs .bg-interactive-neutral-bg {\n	background-color: var(--i-interactive-neutral-bg);\n}\n\n		#ijs .bg-job-card-bg {\n	background-color: var(--i-job-card-bg);\n}\n\n		#ijs .bg-lowest {\n	--tw-bg-opacity: 1;\n	background-color: oklch(var(--i-lowest) / var(--tw-bg-opacity));\n}\n\n		#ijs .bg-section-strong-bg {\n	background-color: var(--i-section-strong-bg);\n}\n\n		#ijs .bg-section-weak-bg {\n	background-color: var(--i-section-weak-bg);\n}\n\n		#ijs .bg-tag-accent-strong-bg {\n	background-color: var(--i-tag-accent-strong-bg);\n}\n\n		#ijs .bg-tag-monetary-weak-bg {\n	background-color: var(--i-tag-monetary-weak-bg);\n}\n\n		#ijs .bg-tag-neutral-strong-bg {\n	background-color: var(--i-tag-neutral-strong-bg);\n}\n\n		#ijs .bg-tag-neutral-weak-bg {\n	background-color: var(--i-tag-neutral-weak-bg);\n}\n\n		#ijs .p-0 {\n	padding: 0px;\n}\n\n		#ijs .p-2 {\n	padding: 0.5rem;\n}\n\n		#ijs .p-4 {\n	padding: 1rem;\n}\n\n		#ijs .px-2 {\n	padding-left: 0.5rem;\n	padding-right: 0.5rem;\n}\n\n		#ijs .px-3 {\n	padding-left: 0.75rem;\n	padding-right: 0.75rem;\n}\n\n		#ijs .px-4 {\n	padding-left: 1rem;\n	padding-right: 1rem;\n}\n\n		#ijs .px-5 {\n	padding-left: 1.25rem;\n	padding-right: 1.25rem;\n}\n\n		#ijs .py-1 {\n	padding-top: 0.25rem;\n	padding-bottom: 0.25rem;\n}\n\n		#ijs .py-2 {\n	padding-top: 0.5rem;\n	padding-bottom: 0.5rem;\n}\n\n		#ijs .py-4 {\n	padding-top: 1rem;\n	padding-bottom: 1rem;\n}\n\n		#ijs .py-6 {\n	padding-top: 1.5rem;\n	padding-bottom: 1.5rem;\n}\n\n		#ijs .pl-1 {\n	padding-left: 0.25rem;\n}\n\n		#ijs .pl-2 {\n	padding-left: 0.5rem;\n}\n\n		#ijs .pl-3 {\n	padding-left: 0.75rem;\n}\n\n		#ijs .pl-4 {\n	padding-left: 1rem;\n}\n\n		#ijs .pl-5 {\n	padding-left: 1.25rem;\n}\n\n		#ijs .pr-1 {\n	padding-right: 0.25rem;\n}\n\n		#ijs .pr-3 {\n	padding-right: 0.75rem;\n}\n\n		#ijs .pr-5 {\n	padding-right: 1.25rem;\n}\n\n		#ijs .pt-1 {\n	padding-top: 0.25rem;\n}\n\n		#ijs .text-center {\n	text-align: center;\n}\n\n		#ijs .text-justify {\n	text-align: justify;\n}\n\n		#ijs .font-family-default {\n	font-family: var(--i-font);\n}\n\n		#ijs .font-family-filter {\n	font-family: var(--i-font-filter);\n}\n\n		#ijs .font-family-job-heading {\n	font-family: var(--i-font-job-heading);\n}\n\n		#ijs .font-family-tag {\n	font-family: var(--i-font-tag);\n}\n\n		#ijs .text-style-filter {\n	font-size: 1rem;\n	line-height: 1.5rem;\n	letter-spacing: -0.01em;\n}\n\n		#ijs .text-style-input {\n	font-size: 1rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-job-card {\n	font-size: 0.875rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-card-info {\n	font-size: 0.75rem;\n	line-height: 1.125rem;\n}\n\n		#ijs .text-style-job-heading {\n	font-size: 1.125rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .text-style-tag {\n	font-size: 0.875rem;\n	line-height: 1.5rem;\n}\n\n		#ijs .font-weight-default {\n	font-weight: var(--i-weight-default);\n}\n\n		#ijs .font-weight-filter {\n	font-weight: var(--i-weight-filter);\n}\n\n		#ijs .font-weight-input {\n	font-weight: var(--i-weight-input);\n}\n\n		#ijs .font-weight-job-heading {\n	font-weight: var(--i-weight-job-heading);\n}\n\n		#ijs .font-weight-tag {\n	font-weight: var(--i-weight-tag);\n}\n\n		#ijs .uppercase {\n	text-transform: uppercase;\n}\n\n		#ijs .lowercase {\n	text-transform: lowercase;\n}\n\n		#ijs .capitalize {\n	text-transform: capitalize;\n}\n\n		#ijs .italic {\n	font-style: italic;\n}\n\n		#ijs .ordinal {\n	--tw-ordinal: ordinal;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .tabular-nums {\n	--tw-numeric-spacing: tabular-nums;\n	font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);\n}\n\n		#ijs .text-copy-accent {\n	color: var(--i-copy-accent);\n}\n\n		#ijs .text-copy-job-info {\n	color: var(--i-copy-info);\n}\n\n		#ijs .text-copy-neutral {\n	color: var(--i-copy);\n}\n\n		#ijs .text-copy-neutral-icon {\n	color: var(--i-copy-icon);\n}\n\n		#ijs .text-copy-neutral-lowcontrast {\n	color: var(--i-copy-lowcontrast);\n}\n\n		#ijs .text-interactive-accent-text {\n	color: var(--i-interactive-accent-text);\n}\n\n		#ijs .text-interactive-neutral-text {\n	color: var(--i-interactive-neutral-text);\n}\n\n		#ijs .text-tag-accent-strong-copy {\n	color: var(--i-tag-accent-strong-copy);\n}\n\n		#ijs .text-tag-monetary-weak-copy {\n	color: var(--i-tag-monetary-weak-copy);\n}\n\n		#ijs .text-tag-neutral-strong-copy {\n	color: var(--i-tag-neutral-strong-copy);\n}\n\n		#ijs .text-tag-neutral-weak-copy {\n	color: var(--i-tag-neutral-weak-copy);\n}\n\n		#ijs .caret-accent-11 {\n	caret-color: oklch(var(--i-a-11) / 1);\n}\n\n		#ijs .opacity-20 {\n	opacity: 0.2;\n}\n\n		#ijs .opacity-25 {\n	opacity: 0.25;\n}\n\n		#ijs .shadow {\n	--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n	--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n		#ijs .outline-none {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .outline {\n	outline-style: solid;\n}\n\n		#ijs .ring-px {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-width-job-card {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-job-card-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-width-section {\n	--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-section-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .ring-job-card-stroke {\n	--tw-ring-color: var(--i-job-card-stroke-color);\n}\n\n		#ijs .ring-section-strong-stroke {\n	--tw-ring-color: var(--i-section-strong-stroke-color);\n}\n\n		#ijs .ring-section-weak-stroke {\n	--tw-ring-color: var(--i-section-weak-stroke-color);\n}\n\n		#ijs .blur {\n	--tw-blur: blur(8px);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .grayscale {\n	--tw-grayscale: grayscale(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .invert {\n	--tw-invert: invert(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .sepia {\n	--tw-sepia: sepia(100%);\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .filter {\n	filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);\n}\n\n		#ijs .backdrop-filter {\n	-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n	        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);\n}\n\n		#ijs .transition {\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;\n	transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-all {\n	transition-property: all;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .transition-opacity {\n	transition-property: opacity;\n	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n	transition-duration: 150ms;\n}\n\n		#ijs .duration-medium {\n	transition-duration: .6s;\n}\n\n		#ijs .duration-slow {\n	transition-duration: .9s;\n}\n\n		#ijs .duration-snappy {\n	transition-duration: .4s;\n}\n\n		#ijs .ease-expo-out {\n	transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n}\n\n		#ijs .font-style-default {\n	font-style: var(--i-font-style);\n}\n\n		#ijs .font-style-filter {\n	font-style: var(--i-style-filter);\n}\n\n		#ijs .font-style-input {\n	font-style: var(--i-style-input);\n}\n\n		#ijs .font-style-job-heading {\n	font-style: var(--i-style-job-heading);\n}\n\n		#ijs .font-style-tag {\n	font-style: var(--i-style-tag);\n}\n\n		#ijs .top-filters {\n	top: var(--i-filters-offset-top);\n}\n\n		#ijs .fr {\n	outline: none;\n}\n\n		#ijs .fr:focus {\n	outline: none;\n}\n\n		#ijs .fr:focus-visible {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 1);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .fr-parent:has(.fr-child:focus-visible) {\n	outline: none;\n	--tw-ring-offset-width: 1px;\n	--tw-ring-offset-color: oklch(var(--i-lowest) / 1);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: oklch(var(--i-a-9) / 1);\n	--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);\n	box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n}\n\n		#ijs .fr-child {}\n\n		#ijs .hide-scrollbars::-webkit-scrollbar {\n	display: none;\n}\n\n		#ijs .hide-scrollbars {\n	scrollbar-width: none;\n	-ms-overflow-style: none;\n}\n\n		#ijs .touch-hitbox::before {\n	content: '';\n	position: absolute;\n	display: block;\n	top: 50%;\n	left: 50%;\n	transform: translate(-50%, -50%);\n	width: 100%;\n	height: 100%;\n	min-height: 44px;\n	min-width: 44px;\n	z-index: 9999;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .\\[text-wrap\\:pretty\\] {\n	text-wrap: pretty;\n}\n\n		#ijs .placeholder\\:text-neutral-10::-moz-placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	--tw-text-opacity: 1;\n	color: oklch(var(--i-n-10) / var(--tw-text-opacity));\n}\n\n		#ijs .focus\\:outline-none:focus {\n	outline: 2px solid transparent;\n	outline-offset: 2px;\n}\n\n		#ijs .active\\:-scale-100:active {\n	--tw-scale-x: -1;\n	--tw-scale-y: -1;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:scale-95:active {\n	--tw-scale-x: .95;\n	--tw-scale-y: .95;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:scale-\\[0\\.975\\]:active {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n\n		#ijs .active\\:bg-job-card-bg-active:active {\n	background-color: var(--i-job-card-bg-active);\n}\n\n		#ijs .active\\:ring-job-card-stroke-active:active {\n	--tw-ring-color: var(--i-job-card-stroke-color-active);\n}\n\n		@media (pointer: coarse) {\n\n	#ijs .pointer-coarse\\:overflow-x-auto {\n		overflow-x: auto;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:w-full {\n		width: 100%;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:flex-wrap {\n		flex-wrap: wrap;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:rounded-section {\n		border-radius: var(--i-radius-section);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:bg-app {\n		background-color: var(--i-app-bg);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:p-2 {\n		padding: 0.5rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:ring-width-section {\n		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-section-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-accent-bg-hover:hover {\n		background-color: var(--i-interactive-accent-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .pointer-fine\\:hover\\:bg-interactive-neutral-bg-hover:hover {\n		background-color: var(--i-interactive-neutral-bg-hover);\n	}\n}\n\n		@media (pointer: fine) {\n\n	#ijs .group:hover .pointer-fine\\:group-hover\\:text-copy-neutral {\n		color: var(--i-copy);\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:col-span-2 {\n		grid-column: span 2 / span 2;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid {\n		display: grid;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:grid-cols-3 {\n		grid-template-columns: repeat(3, minmax(0, 1fr));\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-0 {\n		padding-left: 0px;\n		padding-right: 0px;\n	}\n}\n\n		@media (min-width: 768px) {\n\n	#ijs .md\\:px-4 {\n		padding-left: 1rem;\n		padding-right: 1rem;\n	}\n}\n\n		@media (min-width: 1024px) {\n\n	#ijs .lg\\:ring-width-section {\n		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(var(--i-section-stroke-width) + var(--tw-ring-offset-width)) var(--tw-ring-color);\n		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);\n	}\n}\n\n		#ijs .\\[\\&\\:has\\(\\.fr-child\\:active\\)\\]\\:scale-\\[0\\.975\\]:has(.fr-child:active) {\n	--tw-scale-x: 0.975;\n	--tw-scale-y: 0.975;\n	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));\n}\n";
 const match = (m2) => {
   const patterns = [];
   const i2 = (m22) => ({
@@ -4367,7 +4536,7 @@ const generateTokenVars = (theme, color) => {
     "copy-inverted-lowcontrast": oklch(color["n-4"]),
     "copy-inverted-icon": oklch(color["n-3"]),
     "tag-neutral-weak-bg": highlights === "fill" ? oklch(color["n-2"]) : transparent,
-    "tag-neutral-weak-copy": color["n-12"],
+    "tag-neutral-weak-copy": oklch(color["n-12"]),
     "tag-neutral-weak-stroke-color": highlights === "stroke" ? oklch(color["n-8"]) : transparent,
     "tag-neutral-strong-bg": highlights === "fill" ? oklch(color["n-12"]) : transparent,
     "tag-neutral-strong-copy": oklch(highlights === "fill" ? color.white : color["n-12"]),