/* ============================================================================
 * ASHBY EMBED THEME
 *
 * THIS FILE IS NOT IMPORTED BY THE APP. Do not add it to an import graph.
 *
 * Upload it at:
 *   Admin > Job Boards > Theme (Job Board) > JOB BOARD OPTIONS > Custom CSS
 *
 * Note the section: Custom CSS sits under Job Board Options, next to Brand
 * Color. It is NOT the "Allowed Custom CSS URLs" field in the Job Board
 * Embedding block, which is a separate allowlist for externally hosted CSS.
 *
 * Why it has to live over there: the application form renders in a cross-origin
 * iframe from jobs.ashbyhq.com, so our own stylesheet cannot reach inside it.
 * Ashby's custom CSS is the only way to style the form's interior.
 *
 * ---------------------------------------------------------------------------
 * ASHBY VALIDATES THIS FILE ON UPLOAD. READ THIS BEFORE EDITING.
 * ---------------------------------------------------------------------------
 *
 * Only two kinds of selector are accepted: `:root`, and class selectors drawn
 * from Ashby's own allowlist. Anything else is rejected with
 * "only specified classes and at-rules allowed" and NOTHING is applied.
 *
 * Rejected on the first attempt here, so nobody tries them again:
 *   #root, #form            IDs are not allowed at all
 *   body                    element selectors are not allowed
 *   button[type=submit]     ditto
 *   svg, svg path           ditto
 *   .ashby-application-blocking-disclosure
 *                           present in the DOM, absent from the allowlist. A
 *                           class existing in the rendered markup does NOT mean
 *                           it can be styled
 *   .ashby-application-form-input-text / -input-file / -input-file-dropzone
 *                           same trap. Field internals are controlled through
 *                           the :root variables below, not by class
 *   .ashby-application-form-required
 *                           never existed, inferred rather than observed
 *
 * The allowlist and the intended patterns come from Ashby's own starter file:
 *   https://www.ashbyhq.com/job_board_example_css/application-form-only.css
 *
 * So the ground, the type and the radii are set through Ashby's documented
 * `:root` variables rather than by overriding their rules. That is both what
 * validates and what survives their releases.
 *
 * ---------------------------------------------------------------------------
 * WHAT IT FIXES
 *   The form's ground paints solid white while our dialog ground is cream, so
 *   the embed reads as a white slab dropped into the page. `--colorAppBackground`
 *   plus a transparent form container makes the seam disappear.
 *
 * FONTS
 *   Instrument Sans only, our UI sans, from Google Fonts. It is SIL OFL, so
 *   serving it from Ashby's domain carries no licensing question.
 *
 *   Feature Deck and Tiempos are deliberately NOT loaded. They are commercial
 *   Klim faces licensed to siena.cx, and pulling them onto jobs.ashbyhq.com
 *   would be a second licensing exposure on top of the unresolved one. The form
 *   is wayfinding and data entry, which is the sans's job anyway: the serif
 *   carries the emotion, the sans carries the way through.
 *
 *   The @import below is the one line whose acceptance is not confirmed. Ashby's
 *   help text says at-rules are supported. IF THE UPLOAD REPORTS AN ERROR ABOUT
 *   IT, delete just that line and re-upload: everything else still applies and
 *   the form falls back to the system sans.
 *
 * PALETTE (literal hex on purpose: our CSS custom properties do not cross the
 * iframe boundary, so the design tokens cannot be referenced here)
 *   ink          #122023
 *   cream-warm   #faf7f1   the dialog ground this sits on
 *   coral        #fb5646
 * ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&display=swap');

/* --------------------------------------------------------------------------
 * Ashby's documented theme variables. This is the real control surface.
 * ------------------------------------------------------------------------ */

:root {
  /* The ground. This is the fix for the white slab. */
  --colorAppBackground: #faf7f1;

  --fontFamily: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif;

  /* Our radii: Button and Card sit at 12px, so controls match rather than
     defaulting to Ashby's 3px corners. */
  --borderRadiusContainer: 12px;
  --borderRadiusControl: 12px;
  --borderRadiusButton: 12px;

  /* Hairlines, not the 2px default. Matches Button variant="secondary". */
  --borderWidthBold: 1px;

  /* The form sits in a narrow dialog panel, so Ashby's own max width would add
     a centring gutter inside an already narrow column. Let it fill. */
  --widthMaxJobBoard: 100%;

  /*
   * The application-limits callout, read out of Ashby's own stylesheet rather
   * than guessed. Its rule is:
   *   background-color: var(--colorInfo100)
   *   border: solid var(--borderWidthNormal) var(--colorInfo600)
   *   color: var(--colorInfo1200)
   * with --colorInfo900 on the info icon and --colorInfo1100 on the chevron.
   *
   * A first pass set --colorInfo200, which exists but is not the one in play.
   * The element itself (.ashby-application-blocking-disclosure) is not on the
   * styling allowlist, so these variables are the only route to it.
   *
   * NOTE: this retones every info callout across the job board, not just this
   * one. That is consistent with the rest of the palette, but it is global.
   */
  --colorInfo100: rgb(18 32 35 / 0.03);
  --colorInfo600: rgb(18 32 35 / 0.12);
  --colorInfo900: rgb(18 32 35 / 0.45);
  --colorInfo1100: rgb(18 32 35 / 0.45);
  --colorInfo1200: #122023;

  /*
   * --colorPrimary900 and --colorPrimary600 are deliberately NOT set here. They
   * are already configured in the admin as Brand Color and Brand Color (Dark),
   * both #122023, and Ashby warns that CSS and admin settings must agree.
   *
   * Worth knowing: both being identical means buttons have no hover state.
   * Setting Brand Color (Dark) to #1c2f33 in the admin gives one, and that is a
   * config change rather than a CSS one.
   */
}

/* --------------------------------------------------------------------------
 * Allowlisted classes only, from here down.
 * ------------------------------------------------------------------------ */

/* The tall container behind every field. Ashby's own example sets its
   background here, which is the supported way to clear the slab. */
.ashby-application-form-container {
  background-color: transparent;
  box-shadow: none;
}

.ashby-application-form-section-container {
  background-color: transparent;
}

/* Section labels ("THE BASICS") as our eyebrow: small, wide-tracked, quiet. */
.ashby-application-form-section-header-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(18 32 35 / 0.55);
}

.ashby-application-form-section-header {
  border-bottom: 1px solid rgb(18 32 35 / 0.12);
  padding-bottom: 0.75rem;
}

.ashby-application-form-question-title {
  font-weight: 500;
  color: #122023;
}

/* Ashby sets hint text italic. Our UI register does not use italic. */
.ashby-application-form-question-description {
  font-style: normal;
  color: rgb(18 32 35 / 0.6);
}

.ashby-application-form-section-header-description {
  font-style: normal;
  color: rgb(18 32 35 / 0.6);
}

/* --- The autofill pane ----------------------------------------------------- */

/*
 * White cards on a white page. On cream they read as pasted-on boxes, so they
 * become quiet insets instead.
 */
.ashby-application-form-autofill-uploader,
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root {
  background-color: rgb(18 32 35 / 0.03);
  border: 1px solid rgb(18 32 35 / 0.1);
  box-shadow: none;
}

.ashby-application-form-autofill-input-title {
  font-weight: 500;
  color: #122023;
}

.ashby-application-form-autofill-input-description {
  color: rgb(18 32 35 / 0.6);
}

/* These overlays paint 90% white, which would flash bright against cream
   mid-upload. */
.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
  background-color: rgb(250 247 241 / 0.92);
}

/* --- The application-limits notice ---------------------------------------- */

/*
 * The allowlisted name for the blocked/limited application state. The element
 * carrying the blue in the DOM (.ashby-application-blocking-disclosure) is NOT
 * styleable, so this is the nearest supported hook.
 *
 * The notice stays visible either way. Suppressing a live policy notice with CSS
 * while the policy still applies would be the wrong fix, and whether it should
 * sit above the first field at all is an application-limits setting in Ashby.
 */
.ashby-application-form-blocked-application-container {
  background-color: rgb(18 32 35 / 0.03);
  border: 1px solid rgb(18 32 35 / 0.1);
  box-shadow: none;
  color: #122023;
}

/* --- Submit, success, failure --------------------------------------------- */

/*
 * Ashby notes this button has loading and hover states worth testing. Colour
 * comes from the admin Brand Color (#122023), so only shape is set here.
 */
.ashby-application-form-submit-button {
  font-weight: 500;
}

.ashby-application-form-success-container,
.ashby-application-form-failure-container {
  background-color: transparent;
  box-shadow: none;
}

.ashby-survey-form-container {
  background-color: transparent;
  box-shadow: none;
}