@inploi/plugin-job-search 0.3.0 → 0.5.0

package/dist/plugin-job-search.cjs

@@ -596,6 +596,16 @@ function getDefaultArgs(arg1, arg2) {
 function getErrorMessage(message) {
   return typeof message === "function" ? message() : message;
 }
+function getPipeIssues(validation, message, input, requirement) {
+  return getIssues([
+    {
+      validation,
+      message: getErrorMessage(message),
+      input,
+      requirement
+    }
+  ]);
+}
 function getRestAndDefaultArgs(arg1, arg2, arg3) {
   if (!arg1 || typeof arg1 === "object" && !Array.isArray(arg1)) {
     const [error2, pipe2] = getDefaultArgs(arg2, arg3);
@@ -990,6 +1000,18 @@ function parse(schema, input, info) {
   }
   return result.output;
 }
+function safeParse(schema, input, info) {
+  const result = schema._parse(input, info);
+  return result.issues ? {
+    success: false,
+    error: new ValiError(result.issues),
+    issues: result.issues
+  } : {
+    success: true,
+    data: result.output,
+    output: result.output
+  };
+}
 function transform(schema, action, arg1) {
   return {
     ...schema,
@@ -1006,9 +1028,65 @@ function transform(schema, action, arg1) {
     }
   };
 }
+function url(message = "Invalid URL") {
+  return {
+    type: "url",
+    async: false,
+    message,
+    requirement(input) {
+      try {
+        new URL(input);
+        return true;
+      } catch {
+        return false;
+      }
+    },
+    _parse(input) {
+      return !this.requirement(input) ? getPipeIssues(this.type, this.message, input, this.requirement) : getOutput(input);
+    }
+  };
+}
 const JOB_SEARCH_ELEMENT_ID = "inploi-job-search";
 const JOB_SEARCH_SCOPE_ELEMENT_ID = "ijs";
 const PAGE_SIZE = 10;
+const payPeriods = {
+  ANNUALLY: "per year",
+  DAILY: "per day",
+  HOURLY: "per hour",
+  MONTHLY: "per month",
+  WEEKLY: "per week"
+};
+const getSalaryAsText = (params) => {
+  const {
+    salary,
+    config
+  } = params;
+  const numberFormatter = new Intl.NumberFormat(config.locales, {
+    style: "currency",
+    currency: salary.pay_currency,
+    // @ts-expect-error - trailingZeroDisplay is not in the types but exists: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#trailingzerodisplay
+    trailingZeroDisplay: "stripIfInteger"
+  });
+  if (salary.pay_display === false)
+    return void 0;
+  if (salary.pay_mask)
+    return "Competitive";
+  if (salary.pay_max && isNaN(+salary.pay_max))
+    return "Invalid salary";
+  if (salary.pay_min && isNaN(+salary.pay_min))
+    return "Invalid salary";
+  if (salary.pay && isNaN(+salary.pay))
+    return "Invalid salary";
+  if (salary.pay)
+    return [numberFormatter.format(+salary.pay), payPeriods[salary.pay_type]].join(" ");
+  if (salary.pay_max && salary.pay_min)
+    return [numberFormatter.formatRange(+salary.pay_min, +salary.pay_max), payPeriods[salary.pay_type]].join(" ");
+  if (salary.pay_max)
+    return "Up to " + [numberFormatter.format(+salary.pay_max), payPeriods[salary.pay_type]].join(" ");
+  if (salary.pay_min)
+    return "From " + [numberFormatter.format(+salary.pay_min), payPeriods[salary.pay_type]].join(" ");
+  return "Invalid salary";
+};
 const DEFAULT_FORMATTER = new Intl.RelativeTimeFormat("en", {
   numeric: "auto"
 });
@@ -1036,22 +1114,17 @@ const AvailablePropertiesSchema = record(array(object({
   label: coerce(string(), String),
   value: coerce(string(), String)
 })));
+const URLSchema = string([url()]);
 const PaginationSchema = object({
   total: number(),
   current_page: number(),
   per_page: number(),
   last_page: number()
 });
-const payPeriods = {
-  ANNUALLY: "per year",
-  DAILY: "per day",
-  HOURLY: "per hour",
-  MONTHLY: "per month",
-  WEEKLY: "per week"
-};
 const JobPayloadSchema = object({
   id: number(),
   company_name: string(),
+  company_logo: optional(string()),
   employment_type: string(),
   location_type: union([literal("LOCATION"), literal("REMOTE"), literal("HYBRID")]),
   pay_type: union([literal("ANNUALLY"), literal("HOURLY"), literal("MONTHLY"), literal("WEEKLY"), literal("DAILY")]),
@@ -1082,35 +1155,23 @@ const JobPayloadSchema = object({
 });
 const JobSchema = transform(JobPayloadSchema, (schema) => {
   const isNew = schema.created_at ? new Date(schema.created_at).getTime() > Date.now() - SEVEN_DAYS_MS : false;
-  const numberFormatter = new Intl.NumberFormat(void 0, {
-    style: "currency",
-    currency: schema.pay_currency,
-    // @ts-expect-error - trailingZeroDisplay is not in the types but exists: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat#trailingzerodisplay
-    trailingZeroDisplay: "stripIfInteger"
-  });
-  const pay = (() => {
-    if (schema.pay_display === false)
-      return void 0;
-    if (schema.pay_mask)
-      return "Competitive";
-    if (schema.pay_max && schema.pay_min)
-      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)
-      return void 0;
-    throw new Error("Invalid pay data");
-  })();
+  const parsedLogoURL = safeParse(URLSchema, schema.company_logo);
   return {
     raw: schema,
     id: schema.id,
     isNew,
     company: {
-      name: schema.company_name
+      name: schema.company_name,
+      logo: parsedLogoURL.success ? parsedLogoURL.output : void 0
     },
     employmentType: schema.employment_type,
     locationType: schema.location_type,
-    pay,
+    pay: getSalaryAsText({
+      salary: schema,
+      config: {
+        locales: void 0
+      }
+    }),
     description: schema.description,
     title: schema.title,
     contractType: schema.contract_type,
@@ -1184,21 +1245,25 @@ const getQueryState = (swr) => {
   if (swr.error)
     return {
       state: "error",
-      error: swr.error
+      error: swr.error,
+      swr
     };
   if (swr.isLoading && swr.data === void 0)
     return {
-      state: "loading"
+      state: "loading",
+      swr
     };
   if ((swr.isLoading || swr.isValidating) && swr.data)
     return {
       state: "revalidating",
-      data: swr.data
+      data: swr.data,
+      swr
     };
   if (!swr.isLoading && swr.data)
     return {
       state: "loaded",
-      data: swr.data
+      data: swr.data,
+      swr
     };
   throw new Error("Unhandled data state");
 };
@@ -1315,6 +1380,11 @@ const btnClass = cva({
       icon: "none",
       class: "px-3"
     },
+    {
+      size: "lg",
+      icon: "none",
+      class: "px-5"
+    },
     {
       size: "lg",
       icon: "right",
@@ -1373,18 +1443,27 @@ const UnstyledErrorView = ({
 };
 const ErrorView = ({
   error,
-  resetError
+  resetError,
+  class: className,
+  ...props
 }) => {
   return u$1("div", {
-    class: "bg-section-strong-bg ring-section-weak-stroke rounded-section ring-px lg:ring-width-section flex flex-col gap-4 p-4",
-    children: [u$1("p", {
-      class: "text-neutral-11",
-      children: ["An error occured: ", error.message]
+    class: clsx("bg-neutral-12 ring-section-weak-stroke rounded-section flex flex-col items-center gap-4 p-6 text-center", className),
+    ...props,
+    children: [u$1("div", {
+      class: "flex flex-col gap-1",
+      children: [u$1("p", {
+        class: "text-neutral-1 text-style-job-heading font-style-job-heading font-weight-job-heading [text-wrap:balance]",
+        children: "Sorry, this widget is unavailable at the moment."
+      }), u$1("p", {
+        class: "text-neutral-8 text-style-tag font-style-tag font-weight-tag leading-snug [text-wrap:pretty]",
+        children: error.message
+      })]
     }), u$1("button", {
       class: btnClass({
         variant: "neutral",
         size: "lg",
-        class: "border-px flex flex-none flex-nowrap justify-center truncate border-transparent"
+        class: "text-interactive-neutral-bg bg-lowest"
       }),
       onClick: resetError,
       children: "Retry"
@@ -1416,6 +1495,7 @@ class ErrorBoundary extends b$2 {
       return u$1(Fallback, {
         error: this.state.error,
         resetError: () => {
+          console.log("resetting error");
           this.setState({
             error: null
           });
@@ -3318,10 +3398,9 @@ const FilterContentActive = ({
   onRender
 }) => {
   const filterQuery = getQueryState(useQuery());
-  if (filterQuery.state === "error")
-    throw filterQuery.error;
   const availablePropertyKeys = F$1(() => {
     switch (filterQuery.state) {
+      case "error":
       case "loading":
         return null;
       case "loaded":
@@ -3340,6 +3419,14 @@ const FilterContentActive = ({
   p(() => {
     onRender();
   });
+  if (filterQuery.state === "error") {
+    return u$1(ErrorView, {
+      error: new Error("We’re having trouble loading available filters.", {
+        cause: filterQuery.error
+      }),
+      resetError: () => filterQuery.swr.mutate()
+    });
+  }
   return u$1("div", {
     class: "animate-slide-in-bottom flex w-full flex-col gap-2 pt-1",
     children: [property.searchable && u$1("div", {
@@ -3356,7 +3443,12 @@ const FilterContentActive = ({
     }), (() => {
       switch (unfilteredQuery.state) {
         case "error":
-          throw unfilteredQuery.error;
+          return u$1(ErrorView, {
+            error: new Error("We’re having trouble loading available filters.", {
+              cause: unfilteredQuery.error
+            }),
+            resetError: () => unfilteredQuery.swr.mutate()
+          });
         case "loading":
           return u$1("div", {
             class: "flex px-4",
@@ -3399,6 +3491,7 @@ const FilterContentActive = ({
                 return u$1("li", {
                   class: "animate-appear-tag max-w-full origin-top",
                   children: u$1("button", {
+                    disabled: suggestion.disabled,
                     "data-filter": true,
                     "data-current-value": active ? "true" : void 0,
                     onClick: () => {
@@ -3706,7 +3799,10 @@ const FilterSection = ({
   var _a;
   const [activeKey, setActiveKey] = h((_a = properties[0]) == null ? void 0 : _a.key);
   useFilterKeyboardFocus(activeKey, parentRef);
-  const defaultFilters = F$1(() => getFilterDefaults(properties), [properties]);
+  const defaultFilters = F$1(() => getFilterDefaults(properties.map(({
+    value: _2,
+    ...prop
+  }) => prop)), [properties]);
   const unfilteredQuery = getQueryState(useSWR(cacheKey({
     filter: defaultFilters,
     baseKey: "filters"
@@ -3715,8 +3811,6 @@ const FilterSection = ({
     logger,
     filters: defaultFilters
   }), SWR_SETTINGS));
-  if (unfilteredQuery.state === "error")
-    throw unfilteredQuery.error;
   const makeQueryWithoutFilter = T$1((keyToExclude) => () => {
     const filters = {
       ...appliedFilters,
@@ -3731,6 +3825,14 @@ const FilterSection = ({
       filters
     }), SWR_SETTINGS);
   }, [apiClient, appliedFilters, defaultFilters, logger]);
+  if (unfilteredQuery.state === "error") {
+    return u$1(ErrorView, {
+      error: new Error("We’re having trouble loading available filters.", {
+        cause: unfilteredQuery.error
+      }),
+      resetError: () => unfilteredQuery.swr.mutate()
+    });
+  }
   return u$1("aside", {
     children: u$1("div", {
       role: "tablist",
@@ -3823,10 +3925,10 @@ const JobCard = ({
   job,
   config
 }) => {
-  const subheading = getDisplayableFilterProperty({
+  const subheading = config.subheading ? getDisplayableFilterProperty({
     job,
     property: config.subheading
-  });
+  }) : null;
   const tags = config.infoTags.map((infoTag) => getDisplayableFilterProperty({
     job,
     property: infoTag
@@ -3835,38 +3937,54 @@ const JobCard = ({
     href: job.href,
     class: wrapperClass(),
     children: [u$1("div", {
-      class: "flex flex-1 flex-col gap-4",
+      class: "flex min-w-0 flex-1 flex-col gap-4",
       children: [u$1("div", {
-        class: "flex flex-col items-start gap-1",
-        children: [u$1("div", {
-          class: "order-2 flex flex-col gap-1",
-          children: [u$1("p", {
-            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
-            children: job.title
-          }), subheading ? u$1("p", {
-            class: "text-style-job-card text-copy-neutral-lowcontrast",
-            children: subheading
-          }) : null]
-        }), job.isNew ? u$1("span", {
-          class: badgeClass({
-            class: "order-1"
-          }),
-          children: "NEW"
-        }) : u$1("p", {
-          class: "text-style-job-card-info text-copy-job-info order-1",
-          children: ["Posted ", job.relativePostedDate]
+        class: "gap-logo flex items-center",
+        children: [config.showLogo && u$1("div", {
+          class: "rounded-logo ring-px ring-neutral-5 h-12 w-12 flex-none overflow-hidden",
+          children: job.company.logo ? u$1("img", {
+            src: job.company.logo,
+            alt: job.company.name,
+            class: "h-full w-full select-none object-contain [-webkit-user-drag:none]"
+          }) : u$1("div", {
+            class: "bg-neutral-2 flex h-full w-full items-center justify-center",
+            children: u$1(Icon, {
+              name: "briefcase",
+              class: "text-neutral-9"
+            })
+          })
+        }), u$1("div", {
+          class: "flex flex-col items-start gap-1",
+          children: [u$1("div", {
+            class: "order-2 flex flex-col gap-1",
+            children: [u$1("p", {
+              class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
+              children: job.title
+            }), subheading ? u$1("p", {
+              class: "text-style-job-card text-copy-neutral-lowcontrast",
+              children: subheading
+            }) : null]
+          }), job.isNew ? u$1("span", {
+            class: badgeClass({
+              class: "order-1"
+            }),
+            children: "NEW"
+          }) : u$1("p", {
+            class: "text-style-job-card-info text-copy-job-info order-1",
+            children: ["Posted ", job.relativePostedDate]
+          })]
         })]
       }), u$1("div", {
-        class: "flex flex-col items-start gap-2",
+        class: "flex min-w-0 flex-col items-start gap-2",
         children: [job.pay && u$1("span", {
           class: tagClass({
             variant: "monetaryWeak",
             size: "xs"
           }),
           children: job.pay
-        }), tags.length > 0 && u$1("div", {
-          class: "flex items-center gap-2",
-          children: tags.map((tag) => u$1("span", {
+        }), tags.length > 0 && u$1("ul", {
+          class: "flex min-w-0 max-w-full flex-wrap items-center gap-2",
+          children: tags.map((tag) => u$1("li", {
             class: tagClass({
               size: "xs"
             }),
@@ -3885,6 +4003,7 @@ const JobCard = ({
   });
 };
 const JobCardSkeleton = ({
+  config,
   animationDelay,
   seed
 }) => {
@@ -3899,24 +4018,29 @@ const JobCardSkeleton = ({
     children: [u$1("div", {
       class: "flex flex-1 flex-col gap-4",
       children: [u$1("div", {
-        class: "flex flex-col items-start gap-1",
-        children: [u$1("p", {
-          class: "text-style-job-card-info text-copy-job-info",
-          children: u$1(SkeletonText, {
-            chars: 12
-          })
+        class: "flex items-center gap-4",
+        children: [u$1("div", {
+          class: "rounded-logo bg-copy-neutral h-12 w-12 opacity-25"
         }), u$1("div", {
-          class: "flex flex-col gap-1",
+          class: "flex flex-col items-start gap-1",
           children: [u$1("p", {
-            class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
-            children: u$1(SkeletonText, {
-              chars: 13 + (seed + 5) * seed % 7
-            })
-          }), u$1("p", {
-            class: "text-style-job-card text-copy-neutral-lowcontrast",
+            class: "text-style-job-card-info text-copy-job-info",
             children: u$1(SkeletonText, {
-              chars: 7 + seed * seed % 3
+              chars: 12
             })
+          }), u$1("div", {
+            class: "flex flex-col gap-1",
+            children: [u$1("p", {
+              class: "text-style-job-heading font-style-job-heading font-weight-job-heading text-copy-neutral font-family-job-heading",
+              children: u$1(SkeletonText, {
+                chars: 13 + (seed + 5) * seed % 7
+              })
+            }), config.subheading !== null ? u$1("p", {
+              class: "text-style-job-card text-copy-neutral-lowcontrast",
+              children: u$1(SkeletonText, {
+                chars: 7 + seed * seed % 3
+              })
+            }) : null]
           })]
         })]
       }), u$1("div", {
@@ -3956,7 +4080,8 @@ const JobCardSkeleton = ({
 };
 const LoadMore = ({
   state,
-  fetchNextPage
+  fetchNextPage,
+  config
 }) => {
   if (state === "revalidating") {
     return u$1("ul", {
@@ -3967,7 +4092,8 @@ const LoadMore = ({
       }).map((_2, i2) => u$1("li", {
         children: u$1(JobCardSkeleton, {
           seed: i2,
-          animationDelay: (i2 - 4) * 0.1
+          animationDelay: (i2 - 4) * 0.1,
+          config
         })
       }, i2))
     });
@@ -4031,10 +4157,12 @@ const ResultsPage = ({
   jobCardConfig,
   initialData
 }) => {
+  const fallbackData = page === 1 ? initialData : void 0;
   const {
     data,
     error,
-    state
+    state,
+    swr
   } = getQueryState(useSWR(cacheKey({
     filter: appliedFilters,
     baseKey: page.toString()
@@ -4045,7 +4173,7 @@ const ResultsPage = ({
     page
   }), {
     ...SWR_SETTINGS,
-    fallbackData: initialData
+    fallbackData
   }));
   switch (state) {
     case "loading":
@@ -4063,16 +4191,23 @@ const ResultsPage = ({
           }).map((_2, i2) => u$1("li", {
             children: u$1(JobCardSkeleton, {
               seed: i2,
-              animationDelay: (i2 - PAGE_SIZE) * 0.1
+              animationDelay: (i2 - PAGE_SIZE) * 0.1,
+              config: jobCardConfig
             })
           }, i2))
         })]
       });
     case "error":
-      throw error;
+      return u$1(ErrorView, {
+        class: "-m-4",
+        error: new Error("We’re having trouble loading available jobs.", {
+          cause: error
+        }),
+        resetError: () => swr.mutate()
+      });
     case "revalidating":
     case "loaded": {
-      invariant(data.pagination.current_page === page);
+      invariant(data.pagination.current_page === page, "Received wrong page from server");
       if (data.pagination.total === 0)
         return u$1("div", {
           class: "mx-auto flex flex-col items-center gap-2 px-2 py-4 text-center",
@@ -4083,7 +4218,7 @@ const ResultsPage = ({
           }), u$1("div", {
             class: "flex flex-col items-center gap-1",
             children: [u$1("p", {
-              class: "text-copy-neutral",
+              class: "text-copy-neutral text-style-job-heading",
               children: "No jobs found"
             }), u$1("p", {
               class: "text-copy-neutral-lowcontrast text-style-tag [text-wrap:pretty]",
@@ -4115,7 +4250,8 @@ const ResultsPage = ({
           })
         }), hasMore && isLast && u$1(LoadMore, {
           state,
-          fetchNextPage
+          fetchNextPage,
+          config: jobCardConfig
         })]
       });
     }
@@ -4148,7 +4284,8 @@ const JobSearch = ({
   properties,
   class: className,
   jobCardConfig,
-  initialData
+  initialData,
+  onFilterChange
 }) => {
   const appRef = _(null);
   const [appliedFilters, setAppliedFilters] = h(() => getFilterDefaults(properties));
@@ -4163,10 +4300,16 @@ const JobSearch = ({
         children: u$1(FilterSection, {
           appliedFilters,
           onFilterValueChange: (key, value) => {
-            setAppliedFilters((prev) => ({
-              ...prev,
-              [key]: value
-            }));
+            setAppliedFilters((prev) => {
+              onFilterChange == null ? void 0 : onFilterChange({
+                ...prev,
+                [key]: value
+              });
+              return {
+                ...prev,
+                [key]: value
+              };
+            });
           },
           properties,
           parentRef: appRef,
@@ -4195,7 +4338,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 .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 .order-1 {\n	order: 1;\n}\n\n		#ijs .order-2 {\n	order: 2;\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-\\[1em\\] {\n	min-height: 1em;\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.6;\n	}\n\n	100% {\n		opacity: 0.25;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1.2s 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-app {\n	border-radius: var(--i-radius-app);\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	background-color: var(--i-color-lowest);\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 .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-neutral-11 {\n	color: var(--i-color-n-11);\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: var(--i-color-a-11);\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: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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	color: var(--i-color-n-10);\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	color: var(--i-color-n-10);\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 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 .order-1 {\n	order: 1;\n}\n\n		#ijs .order-2 {\n	order: 2;\n}\n\n		#ijs .-m-4 {\n	margin: -1rem;\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-12 {\n	height: 3rem;\n}\n\n		#ijs .h-8 {\n	height: 2rem;\n}\n\n		#ijs .h-\\[1lh\\] {\n	height: 1lh;\n}\n\n		#ijs .h-full {\n	height: 100%;\n}\n\n		#ijs .min-h-\\[1em\\] {\n	min-height: 1em;\n}\n\n		#ijs .min-h-screen {\n	min-height: 100vh;\n}\n\n		#ijs .w-12 {\n	width: 3rem;\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.6;\n	}\n\n	100% {\n		opacity: 0.25;\n	}\n}\n\n		#ijs .animate-skeleton {\n	animation: skeleton 1.2s 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 .gap-logo {\n	gap: var(--i-logo-gap);\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-app {\n	border-radius: var(--i-radius-app);\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-logo {\n	border-radius: var(--i-radius-logo);\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-copy-neutral {\n	background-color: var(--i-copy);\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	background-color: var(--i-color-lowest);\n}\n\n		#ijs .bg-neutral-12 {\n	background-color: var(--i-color-n-12);\n}\n\n		#ijs .bg-neutral-2 {\n	background-color: var(--i-color-n-2);\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 .object-contain {\n	-o-object-fit: contain;\n	   object-fit: contain;\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 .p-6 {\n	padding: 1.5rem;\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 .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 .leading-snug {\n	line-height: 1.375;\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-bg {\n	color: var(--i-interactive-neutral-bg);\n}\n\n		#ijs .text-interactive-neutral-text {\n	color: var(--i-interactive-neutral-text);\n}\n\n		#ijs .text-neutral-1 {\n	color: var(--i-color-n-1);\n}\n\n		#ijs .text-neutral-8 {\n	color: var(--i-color-n-8);\n}\n\n		#ijs .text-neutral-9 {\n	color: var(--i-color-n-9);\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: var(--i-color-a-11);\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-neutral-5 {\n	--tw-ring-color: var(--i-color-n-5);\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: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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: var(--i-color-lowest);\n	--tw-ring-opacity: 1;\n	--tw-ring-color: var(--i-color-a-9);\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 .\\[-webkit-user-drag\\:none\\] {\n	-webkit-user-drag: none;\n}\n\n		#ijs .\\[a-zA-Z0-9-_\\:\\.\\$\\@\\?\\] {\n	a-z-a--z0-9-_: .$@?;\n}\n\n		#ijs .\\[text-wrap\\:balance\\] {\n	text-wrap: balance;\n}\n\n		#ijs .\\[text-wrap\\:pretty\\] {\n	text-wrap: pretty;\n}\n\n		#ijs .placeholder\\:text-neutral-10::-moz-placeholder {\n	color: var(--i-color-n-10);\n}\n\n		#ijs .placeholder\\:text-neutral-10::placeholder {\n	color: var(--i-color-n-10);\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";
 var COLOR_SHADES = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"];
 var OKLCH_PRESETS = {
   light: {
@@ -4208,7 +4351,7 @@ var OKLCH_PRESETS = {
     "7": [80.5, 0.08],
     "8": [74, 0.11],
     "9": [60, 0.22],
-    "10": [60.5, 0.2],
+    "10": [56, 0.23],
     "11": [50, 0.19],
     "12": [25, 0.18]
   },
@@ -4458,6 +4601,20 @@ const tokens = designTokens().core(({
     }, () => "0.25rem").with({
       corners: "sharp"
     }, () => "0").otherwise(),
+    "radius-logo": match(theme).with({
+      corners: "rounded"
+    }, () => "999px").with({
+      corners: "soft"
+    }, () => ".5rem").with({
+      corners: "sharp"
+    }, () => "0").otherwise(),
+    "logo-gap": match(theme).with({
+      corners: "rounded"
+    }, () => "0.75rem").with({
+      corners: "soft"
+    }, () => "1rem").with({
+      corners: "sharp"
+    }, () => "1rem").otherwise(),
     "interactive-neutral-bg": withOpacity(highContrast ? "n-5" : "n-4", 0.01),
     "interactive-neutral-bg-hover": highContrast ? core("color.n-5") : core("color.n-4"),
     "interactive-neutral-text": core("color.n-12"),
@@ -4542,7 +4699,8 @@ const jobSearchPlugin = () => {
         analytics,
         class: ((_a = params.theme.accessibility) == null ? void 0 : _a.reducedMotion) ? "reduced-motion" : void 0,
         jobCardConfig: params.jobCard,
-        initialData: params.initialData
+        initialData: params.initialData,
+        onFilterChange: params.onFilterChange
       })]);
     };
     return {