@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@500&display=swap");

/*
 * Semaloop theme for the Ashby job board and application form.
 * Upload the contents of this file in Ashby admin (Job Boards → custom CSS),
 * or serve it and point __Ashby.settings.customCssUrl at it, in which case the
 * URL also has to go on the allow list there. Kept in the repo so the theme is
 * reviewable and versioned alongside the site it has to match.
 *
 * Selectors are doubled where Ashby's own single-class rules would otherwise
 * win on source order.
 *
 * Ashby validates on upload and takes only :root, at-rules and the classes it
 * documents (ashby.com/job_board_example_css/full-job-board.css). An id
 * selector is refused outright, so layout hooks have to come from those classes.
 */

@font-face {
  font-family: "PP Mori";
  src: url("https://semaloop.com/fonts/PPMori-Regular.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Mori";
  src: url("https://semaloop.com/fonts/PPMori-Semibold.woff") format("woff");
  font-weight: 615;
  font-style: normal;
  font-display: swap;
}

:root {
  --fontFamily:
    "PP Mori", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    sans-serif;

  --colorAppBackground: #f3f3f0;

  /* Ashby writes the admin theme colour onto :root as an inline style, which a
   * plain declaration here would lose to. Setting the theme colour to #1a1a1a
   * in Ashby admin instead would make these two lines unnecessary. */
  --colorPrimary900: #1a1a1a !important;
  --colorPrimary600: #1a1a1a !important;

  /* The focus-ring tint is the one primary Ashby does not take from the theme,
   * so it stays blue unless it is remapped here. */
  --colorPrimary500A: rgba(26, 26, 26, 0.12);

  /* Ashby draws its borders, muted labels and drop shadows from a blue-grey
   * neutral ramp, on plenty of chrome that has no class hook of its own: the
   * nav rule, the board's filter bar, the footer. Remapping the ramp is how
   * those follow the theme; a transparent shadow colour flattens the cards. */
  --colorNeutral900: #1a1a1a;
  --colorNeutral800: #1a1a1a;
  --colorNeutral700: rgba(26, 26, 26, 0.55);
  --colorNeutral600: rgba(26, 26, 26, 0.4);
  --colorNeutral500: rgba(26, 26, 26, 0.3);
  --colorNeutral400: rgba(26, 26, 26, 0.2);
  --colorNeutral300: rgba(26, 26, 26, 0.14);
  --colorNeutral200: rgba(26, 26, 26, 0.1);
  --colorNeutral100: #f3f3f0;
  --colorNeutral100Transparent: rgba(243, 243, 240, 0);
  --colorNeutralShadow: transparent;
  --colorPrimaryShadow: rgba(26, 26, 26, 0.12);

  --widthMaxContent: 960px;
  --widthMaxJobBoard: 720px;
  --widthMaxSubscriptionPreferences: 560px;

  --borderRadiusContainer: 8px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 999px;
  --borderWidthBold: 0.6px;
  --borderWidthNormal: 0.6px;

  /* Only Ashby's buttons use this. */
  --letterSpacingWide: -0.01em;

  --sl-brand: #28775c;
  --sl-content-primary: #1a1a1a;
  --sl-content-secondary: rgba(26, 26, 26, 0.4);
  --sl-surface-primary: #f3f3f0;
  --sl-surface-secondary: #e6e5e0;
  --sl-border: rgba(26, 26, 26, 0.1);
  --sl-white: #ffffff;
  --sl-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sl-shadow-button: inset 0 1px 0 0 rgba(255, 255, 255, 0.2);
}

body {
  background: var(--sl-surface-primary);
  color: var(--sl-content-primary);
  font-family: var(--fontFamily);
  font-size: 15px;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sl-content-primary);
  text-underline-offset: 3px;
}

/* --- Job board list ------------------------------------------------------ */

.ashby-job-board-heading {
  color: var(--sl-content-primary);
  font-size: 34px;
  font-weight: 615;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

.ashby-job-board-heading-count,
.ashby-job-board-filters-label {
  color: var(--sl-content-secondary);
  font-family: var(--sl-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ashby-job-board-reset-filters-label {
  color: var(--sl-content-primary);
  font-family: var(--sl-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.ashby-job-board-filter.ashby-job-board-filter {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 999px;
  box-shadow: var(--sl-shadow-button);
  color: var(--sl-content-primary);
  font-family: var(--fontFamily);
  font-size: 15px;
}

/* Every role sits in one department, so the grouping heading adds nothing. */
.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
  display: none;
}

/* Each role is a card, the same one the rest of the site uses. */
.ashby-job-posting-brief.ashby-job-posting-brief {
  background: var(--sl-surface-secondary);
  border: 0.6px solid transparent;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 16px;
  transition: background-color 150ms ease;
}

.ashby-job-posting-brief:hover {
  background: var(--sl-white);
}

.ashby-job-posting-brief-title.ashby-job-posting-brief-title {
  color: var(--sl-content-primary);
  font-size: 23px;
  font-weight: 615;
  letter-spacing: -0.01em;
}

.ashby-job-posting-brief-details {
  color: var(--sl-content-secondary);
  font-family: var(--sl-mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* --- Job posting page ---------------------------------------------------- */

.ashby-job-posting-heading {
  color: var(--sl-content-primary);
  font-size: 34px;
  font-weight: 615;
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* The job description is the site's own prose, so the rules below are
 * globals.css's .blog-content and .job-content ported over — Ashby's spacing is
 * far tighter and its lists sit twice as deep. The container class rides along
 * for specificity: Ashby's rules lean on :not() and would otherwise win. */
.ashby-job-posting-description {
  color: var(--sl-content-primary);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.55;
}

.ashby-job-posting-description-container
  .ashby-job-posting-description
  > :first-child {
  margin-top: 0;
}

.ashby-job-posting-description-container .ashby-job-posting-description p {
  margin: 17px 0;
}

/* Ashby's editor emits empty spacer paragraphs and wraps list items in <p>. */
.ashby-job-posting-description-container
  .ashby-job-posting-description
  p:empty {
  display: none;
}

.ashby-job-posting-description-container .ashby-job-posting-description li p {
  margin: 0;
}

.ashby-job-posting-description-container .ashby-job-posting-description h2 {
  font-size: 21px;
  font-weight: 615;
  line-height: 1.4;
  margin: 32px 0 17px;
}

.ashby-job-posting-description-container .ashby-job-posting-description h3 {
  font-size: 17px;
  font-weight: 615;
  line-height: 1.55;
  margin: 24px 0 17px;
}

.ashby-job-posting-description-container .ashby-job-posting-description strong {
  font-weight: 615;
}

.ashby-job-posting-description-container .ashby-job-posting-description a {
  color: var(--sl-brand);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ashby-job-posting-description-container
  .ashby-job-posting-description
  a:hover {
  color: var(--sl-content-primary);
}

.ashby-job-posting-description-container .ashby-job-posting-description ol,
.ashby-job-posting-description-container .ashby-job-posting-description ul {
  margin: 17px 0;
  padding-left: 24px;
}

.ashby-job-posting-description-container .ashby-job-posting-description ol {
  list-style: decimal;
}

.ashby-job-posting-description-container .ashby-job-posting-description ul {
  list-style: disc;
}

.ashby-job-posting-description-container .ashby-job-posting-description li {
  line-height: 1.55;
  margin: 0;
}

.ashby-job-posting-description-container
  .ashby-job-posting-description
  blockquote {
  border-left: 3px solid var(--sl-border);
  color: var(--sl-content-secondary);
  margin: 24px 0;
  padding-left: 20px;
}

.ashby-job-posting-description-container .ashby-job-posting-description pre {
  background: var(--sl-surface-secondary);
  border-radius: 12px;
  font-family: var(--sl-mono);
  font-size: 14px;
  line-height: 1.6;
  margin: 24px 0;
  overflow-x: auto;
  padding: 20px;
}

.ashby-job-posting-description-container .ashby-job-posting-description code {
  font-family: var(--sl-mono);
  font-size: 0.9em;
}

.ashby-job-posting-description-container
  .ashby-job-posting-description
  :not(pre)
  > code {
  background: var(--sl-surface-secondary);
  border-radius: 4px;
  padding: 0.15em 0.4em;
}

.ashby-job-posting-description-container .ashby-job-posting-description hr {
  background: var(--sl-border);
  border: 0;
  height: 1px;
  margin: 32px 0;
}

/* semaloop.com embeds the application form on its own, so the two panes, the
 * tabs and the details list only ever render on Ashby's own board. Ashby
 * stands both panes on a white sheet; ours sit straight on the page. */
.ashby-job-posting-left-pane.ashby-job-posting-left-pane,
.ashby-job-posting-description-container.ashby-job-posting-description-container {
  background: transparent;
  box-shadow: none;
}

.ashby-job-posting-left-pane h2 {
  color: var(--sl-content-secondary);
  font-family: var(--sl-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.ashby-job-posting-left-pane p,
.ashby-job-posting-left-pane li {
  color: var(--sl-content-primary);
  font-size: 15px;
  line-height: 1.5;
}

/* The tab strip carries no class of its own, and below 768px Ashby makes it a
 * sticky white bar. */
.ashby-job-posting-right-pane nav[role="tablist"] {
  background: var(--sl-surface-primary);
  box-shadow: none;
}

.ashby-job-posting-right-pane nav[role="tablist"] a {
  font-size: 15px;
  font-weight: 615;
  letter-spacing: -0.01em;
}

/* Ashby gives the application panel no class of its own, and its custom CSS
 * rejects anything but the documented classes — so the inset that lines the
 * form up with the tab strip goes on the panel's two rows. They lost their own
 * padding for the embed, where the page column supplies the margins. */
.ashby-job-posting-right-pane .ashby-application-form-autofill-uploader,
.ashby-job-posting-right-pane .ashby-application-form-container {
  margin-left: 16px;
  margin-right: 16px;
}

.ashby-job-posting-right-pane
  .ashby-application-form-autofill-uploader:first-child,
.ashby-job-posting-right-pane .ashby-application-form-container:first-child {
  margin-top: 24px;
}

.ashby-job-posting-right-pane-tab-slider {
  background: var(--sl-content-primary);
}

.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button {
  background: transparent;
  border: none;
  color: var(--sl-content-secondary);
  font-family: var(--sl-mono);
  font-size: 12px;
  text-transform: uppercase;
}

.ashby-job-board-back-to-all-jobs-button svg {
  fill: var(--sl-content-secondary);
}

.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button:hover,
.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button:hover
  svg {
  color: var(--sl-content-primary);
  fill: var(--sl-content-primary);
}

/* --- Application form ---------------------------------------------------- */

/* The form sits directly on the page rather than in cards of its own, so the
 * only surfaces left are the inputs themselves. Padding comes off too: the
 * page column sets the margins, so every row lines up with the copy above it. */
.ashby-application-form-container.ashby-application-form-container,
.ashby-application-form-section-container.ashby-application-form-section-container,
.ashby-application-form-autofill-pane.ashby-application-form-autofill-pane,
.ashby-survey-form-container.ashby-survey-form-container {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.ashby-application-form-section-header-title {
  color: var(--sl-content-primary);
  font-size: 23px;
  font-weight: 615;
  letter-spacing: -0.01em;
}

.ashby-application-form-section-header-description,
.ashby-application-form-question-description,
.ashby-application-form-texting-consent-description {
  color: var(--sl-content-secondary);
  font-size: 15px;
}

.ashby-application-form-question-title.ashby-application-form-question-title {
  color: var(--sl-content-primary);
  font-size: 15px;
  font-weight: 615;
  letter-spacing: -0.01em;
}

.ashby-application-form-input-text.ashby-application-form-input-text,
.ashby-application-form-input-textarea.ashby-application-form-input-textarea,
.ashby-application-form-input-date.ashby-application-form-input-date,
.ashby-application-form-input-dropdown.ashby-application-form-input-dropdown,
.ashby-application-form-input-autocomplete.ashby-application-form-input-autocomplete {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 8px;
  box-shadow: var(--sl-shadow-button);
  color: var(--sl-content-primary);
  font-family: var(--fontFamily);
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* Ashby marks focus with a 4px outline drawn outside the control, which the
 * embed's 720px column clips on both edges. The site's own inputs carry no
 * outward ring, so keep the indicator inside the border. Doubled to clear
 * Ashby's own :not(...):focus-within rules. */
.ashby-application-form-input-text.ashby-application-form-input-text:focus-within,
.ashby-application-form-input-textarea.ashby-application-form-input-textarea:focus-within,
.ashby-application-form-input-date.ashby-application-form-input-date:focus-within,
.ashby-application-form-input-dropdown.ashby-application-form-input-dropdown:focus-within,
.ashby-application-form-input-autocomplete.ashby-application-form-input-autocomplete:focus-within {
  border-color: var(--sl-content-primary);
  box-shadow: inset 0 0 0 1px var(--sl-content-primary);
  outline: none;
}

.ashby-application-form-input-text::placeholder,
.ashby-application-form-input-textarea::placeholder {
  color: var(--sl-content-secondary);
}

.ashby-application-form-input-autocomplete-popup,
.ashby-application-form-input-date-popup {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 8px;
}

.ashby-application-form-input-autocomplete-popup-result[aria-selected="true"] {
  background: var(--sl-surface-secondary);
}

.ashby-application-form-input-checkbox-group-option-label,
.ashby-application-form-input-radio-group-option-label {
  color: var(--sl-content-primary);
  font-size: 15px;
}

.ashby-application-form-input-yesno.ashby-application-form-input-yesno {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 8px;
}

.ashby-application-form-input-yesno-option.ashby-application-form-input-yesno-option {
  color: var(--sl-content-secondary);
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 615;
}

.ashby-application-form-input-yesno-option[aria-pressed="true"] {
  background: var(--sl-content-primary);
  border-color: var(--sl-content-primary);
  color: var(--sl-white);
}

/* --- File upload and autofill -------------------------------------------- */

/* Ashby varies this wrapper's inline padding by width, which left the autofill
 * row hanging past every field below it. */
.ashby-application-form-autofill-uploader.ashby-application-form-autofill-uploader {
  background: transparent;
  margin-bottom: 24px;
  margin-top: 0;
  padding: 0;
}

.ashby-application-form-autofill-input-root {
  background: transparent;
  border: 0.6px solid var(--sl-border);
  border-radius: 8px;
}

/* Ashby paints this button with the theme accent; ours is the same secondary
 * pill as everything else on the form. */
.ashby-application-form-autofill-input-root button {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 999px;
  box-shadow: none;
  color: var(--sl-content-primary);
  font-family: var(--fontFamily);
  font-weight: 615;
}

.ashby-application-form-autofill-input-root button:hover {
  background: var(--sl-white);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  color: var(--sl-content-primary);
}

/* The upload button stretches to fill its dropzone at narrow widths, so any
 * surface on the boxes around it reads as a ring rather than a container.
 * The button alone carries the styling. */
.ashby-application-form-input-file.ashby-application-form-input-file,
.ashby-application-form-input-file-dropzone.ashby-application-form-input-file-dropzone {
  background: transparent;
  border: none;
}

/* Above 768px the button is a centred pill that needs something to sit in, and
 * Ashby's own dropzone box only exists at that width. The semaloop.com embed is
 * always below it, in a 720px column, where the button goes full width — hence
 * the media query as well as the pane. */
@media only screen and (min-width: 768px) {
  .ashby-job-posting-right-pane .ashby-application-form-input-file {
    border: 0.6px dashed var(--sl-border);
    border-radius: 8px;
    padding: 24px;
  }
}

.ashby-application-form-input-file-dropzone-instructions,
.ashby-application-form-autofill-input-description {
  color: var(--sl-content-secondary);
}

.ashby-application-form-autofill-input-title {
  color: var(--sl-content-primary);
  font-weight: 615;
}

.ashby-application-form-input-file-item {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 8px;
}

.ashby-application-form-input-file-item-name {
  color: var(--sl-content-primary);
}

/* Secondary pill, matching the buttons on the rest of the site. */
.ashby-application-form-input-file-dropzone-upload.ashby-application-form-input-file-dropzone-upload,
.ashby-application-form-input-education-add.ashby-application-form-input-education-add {
  background: var(--sl-white);
  border: 0.6px solid var(--sl-border);
  border-radius: 999px;
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.02),
    var(--sl-shadow-button);
  color: var(--sl-content-primary);
  font-family: var(--fontFamily);
  font-weight: 615;
}

/* --- Submit and result states -------------------------------------------- */

.ashby-application-form-submit-button.ashby-application-form-submit-button,
.ashby-job-posting-description-container.ashby-job-posting-description-container
  button {
  background: var(--sl-content-primary);
  border: 0.6px solid var(--sl-content-primary);
  border-radius: 999px;
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.2),
    var(--sl-shadow-button);
  color: var(--sl-white);
  font-family: var(--fontFamily);
  font-size: 15px;
  font-weight: 615;
}

.ashby-application-form-submit-button:hover,
.ashby-job-posting-description-container.ashby-job-posting-description-container
  button:hover {
  background: rgba(26, 26, 26, 0.8);
  border-color: transparent;
  box-shadow:
    0 1px 0 0 rgba(0, 0, 0, 0.2),
    var(--sl-shadow-button);
}

.ashby-application-form-input-file-dropzone-upload:hover {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.1),
    var(--sl-shadow-button);
}

/* Ashby turns the icon white on hover, for a button that fills on hover. Ours
 * stays white, so the icon has to keep its resting colour. */
.ashby-application-form-input-file-dropzone-upload:hover svg {
  fill: var(--colorPrimary600);
}

/* --- Consent checkbox ---------------------------------------------------- */

/* The consent question renders as a full field block: an empty title, the
 * question, then the checkbox on a row of its own. Pull it onto one line. */
.ashby-survey-form-container .ashby-application-form-input-checkbox-group {
  align-items: center;
  column-gap: 12px;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 0;
  row-gap: 4px;
}

.ashby-survey-form-container .ashby-application-form-question-title:empty {
  display: none;
}

.ashby-survey-form-container .ashby-application-form-question-description,
.ashby-survey-form-container
  .ashby-application-form-input-checkbox-group-option {
  margin: 0;
}

/* The board's column is narrower than the embed's, so the consent question
 * wraps above the checkbox instead of sitting beside it. */
.ashby-job-posting-right-pane
  .ashby-survey-form-container
  .ashby-application-form-input-checkbox-group {
  row-gap: 12px;
}

.ashby-job-posting-right-pane .ashby-application-form-submit-button {
  margin-top: 32px;
}

.ashby-application-form-success-container,
.ashby-application-form-failure-container,
.ashby-application-blocking-disclosure {
  background: var(--sl-surface-secondary);
  border-radius: 8px;
  color: var(--sl-content-primary);
}