/* SmartAC's Ashby job board theme, uploaded by hand at Ashby → Admin →
   Organization Settings → Theme (Job Board) → Custom CSS. It styles Ashby's
   hosted job board and the application form the careers pages embed, with the
   marketing site's colours (src/styles/global.css) and form design
   (src/styles/hubspot-form.css). Class names come from Ashby's example:
   https://www.ashbyhq.com/job_board_example_css/full-job-board.css */

/* Ashby's components take every colour from these variables, so mapping them
   onto the site's palette restyles each component and state, including ones
   no current posting's form shows. */
:root {
  /* The primary colours also live in the admin's theme settings; keep the
     two in step. */
  --colorPrimary900: #1b1c22; /* neutral-core */
  --colorPrimary600: #3c3d44; /* neutral-800 */
  /* The 4px focus ring Ashby draws around every focused control. */
  --colorPrimary500A: rgb(27 28 34 / 0.15); /* neutral-core at 15% */
  --colorSecondary900: #1b1c22;
  --colorInfo900: #1b1c22;

  /* Ashby's cool greys, onto the site's warm neutrals. */
  --colorNeutral000: #f0e6e1; /* surfaces, and text on dark: neutral-200 */
  --colorNeutral100: #e3d9d4; /* filled rows: neutral-250 */
  --colorNeutral200: #e3d9d4; /* hover fills and dividers: neutral-250 */
  --colorNeutral300: #c7c0bf; /* borders: neutral-300 */
  --colorNeutral400: #c7c0bf;
  --colorNeutral500: #7b7c81; /* muted text: neutral-500 */
  --colorNeutral600: #7b7c81;
  --colorNeutral700: #3c3d44; /* body text: neutral-800 */
  --colorNeutral800: #1b1c22; /* strong text: neutral-core */
  --colorAppBackground: #f0e6e1; /* neutral-200, the site's page */

  /* Ashby's translucent greys, at Ashby's own opacities. */
  --colorNeutral100Transparent: rgb(227 217 212 / 0); /* neutral-250 */
  --colorNeutral300A: rgb(27 28 34 / 0.16); /* spinner track: neutral-core */
  --colorNeutral600Transparent: rgb(123 124 129 / 0.25); /* neutral-500 */

  /* The site has no success colour, so success notices take its dark
     notice style; errors take its red. */
  --colorPositive800: #1b1c22;
  --colorPositive600: #3c3d44;
  --colorPositive200: #e3d9d4;
  --colorNegative900: #bb3d29; /* red-800 */
  --colorNegative800: #bb3d29;
  --colorNegative600: #bb3d29;
  --colorNegative200: #f6c7c5; /* red-100 */

  /* The site's buttons and cards are flat. */
  --colorNeutralShadow: transparent;
  --colorPrimaryShadow: transparent;

  --borderRadiusContainer: 8px;
  --borderRadiusControl: 8px;
  --borderRadiusButton: 8px;

  /* Radio and checkbox size, and the checked dot's, as the site's radios. */
  --checkboxAndRadioDim: 16px;
  --checkboxAndRadioCheckDim: 6px;
}

/* The side padding is the 4px focus ring's room inside the iframe; the
   careers page pulls the embed out by the same amount (`-mx-1`), so the
   controls line up with the page column. */
.ashby-application-form-container,
.ashby-application-form-autofill-pane {
  padding-inline: 4px;
}

/* The veil over the autofill pane while a resume parses or is dragged in; Ashby
   sets it in white at 90%, outside its variables. Scoped under the root to
   outrank Ashby's one-class rule whichever stylesheet loads last. */
.ashby-application-form-autofill-input-root
  :is(
    .ashby-application-form-autofill-input-pending-layer,
    .ashby-application-form-autofill-input-drag-layer
  ) {
  background: rgb(240 230 225 / 0.9); /* neutral-200 */
}

.ashby-application-form-question-title {
  color: #1b1c22;
}

/* Text fields are filled and borderless, as the site's forms are. */
.ashby-application-form-input-text,
.ashby-application-form-input-textarea {
  border-color: transparent;
  background-color: #e3d9d4; /* neutral-250 */
  color: #1b1c22;
}

.ashby-application-form-input-text:focus,
.ashby-application-form-input-textarea:focus {
  border-color: #1b1c22;
}

/* Radios match the site's (the design system's RadioGroup.Item, as
   src/styles/hubspot-form.css draws it). Ashby draws each radio as a ring
   <span> holding a dot <span> and the hidden input, none with a class of its
   own, so they are reached from the option; the ring carries `data-checked`. */
.ashby-application-form-input-radio-group-option > span {
  position: relative;
  margin-top: 4px; /* centres the ring on the label's first line */
  border: 0.5px solid #d7d4d1; /* gray-300 */
  background-color: #fcfcfb; /* gray-0 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.03);
}

/* Ashby offsets the dot by its own 2px border. */
.ashby-application-form-input-radio-group-option > span > span {
  margin: 0;
}

/* The invisible input covers the whole ring, out of the grid, so the dot
   alone sizes the ring's one cell and sits at its centre. */
.ashby-application-form-input-radio-group-option > span > input[type="radio"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

.ashby-application-form-input-radio-group-option > span[data-checked] {
  border-color: #1b1c22;
  background-color: #1b1c22;
}

.ashby-application-form-input-radio-group-option > span[data-checked] > span {
  background-color: #f0e5e0; /* neutral-white */
}