/* ============================================================================
 * ASHBY JOB BOARD THEME
 *
 * SCOPE CHANGED. This file was written for the application form embedded in a
 * dialog on our own cream page. The careers page now links out instead, so every
 * candidate lands on Ashby's own job posting page and this file is the entire
 * design of that page, not a patch on an iframe. Several rules below strip
 * Ashby's white card backgrounds; that was right inside a cream dialog and is
 * still right here, but only because the panes below are now cleared too.
 *
 * 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: every page this styles is served by
 * jobs.ashbyhq.com, so no stylesheet in this repo can reach it. Ashby's custom
 * CSS is the only route in.
 *
 * ---------------------------------------------------------------------------
 * 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 files:
 *   https://www.ashbyhq.com/job_board_example_css/full-job-board.css
 *   https://www.ashbyhq.com/job_board_example_css/application-form-only.css
 *
 * `full-job-board.css` is the longer one and the one to read: it names every
 * styleable class on the job posting page, not just the form.
 *
 * 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
 *   Ashby paints the job posting page's panes and the form's ground solid white.
 *   Against a cream ground that reads as a white slab with hard seams through it.
 *   `--colorAppBackground` plus transparent containers makes the page one ground.
 *
 *   It also puts real contrast back on the post-submit confirmation, which a
 *   candidate reported being unable to see. That fix is the most important thing
 *   in this file; the long note above it says why.
 *
 * 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 page ground, and our careers page's ground
 *   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 fills its pane rather than taking Ashby's own max width, which
     would add a centring gutter inside an already narrow right-hand column. */
  --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 job posting page ---------------------------------------------------
 *
 * Ashby paints two panes solid white on our cream ground: the details rail on the
 * left and the description on the right. They sit edge to edge with square
 * corners, so the page reads as a white slab with a hard seam down it rather than
 * as a designed page.
 *
 * Cleared rather than rounded. Two rounded white cards would still be two boxes
 * with a gutter between them, and the job description is one continuous piece of
 * reading. One cream ground end to end also matches the careers page the
 * candidate just came from, which is the whole point of linking out.
 *
 * Verified against the live page rather than assumed: both classes are on
 * Ashby's allowlist, and both computed `rgb(255,255,255)` with `border-radius: 0`
 * before this.
 * -------------------------------------------------------------------------- */

.ashby-job-posting-left-pane,
.ashby-job-posting-description-container {
  background-color: transparent;
  box-shadow: none;
}

/*
 * The tab strip ("Overview / Application") is a sticky white bar on mobile. Its
 * own element carries a hashed class and is not on the allowlist, so the only way
 * in is the variable it paints with: `--colorNeutral000`, Ashby's generic white,
 * used 78 times across their stylesheet.
 *
 * Scoped to the right pane rather than set at `:root` for exactly that reason,
 * then handed straight back to the form below, so the only thing that changes is
 * this bar. It stays opaque, which it has to: content scrolls underneath it.
 */
.ashby-job-posting-right-pane {
  --colorNeutral000: #faf7f1;
}

.ashby-application-form-container {
  --colorNeutral000: #ffffff;
}

/* Ashby's default body colour is its own slate #373e4d, not our ink. */
.ashby-job-posting-heading,
.ashby-job-posting-description {
  color: #122023;
}

/* --- The job board list page ------------------------------------------------
 *
 * The other page candidates land on: jobs.ashbyhq.com/siena, the list of every
 * open role. Ashby paints each role row solid white on the cream ground, which is
 * the same white-slab problem as the posting page in a different shape.
 *
 * Not cleared to transparent here, unlike the posting page. The rows are a list
 * of separate things and need to read as separate things. They get the same
 * treatment as the role cards on our own careers page instead: a cream ground a
 * half-step off the page, and a hairline. That is `Card tone="cream"` in
 * src/components/ui/Card.tsx, so the two pages agree.
 *
 * No `:hover` rule anywhere below. Ashby's own starter file documents attribute
 * selectors on these classes but never demonstrates a pseudo-class, and a single
 * rejected selector throws out the WHOLE file. Not worth the risk for a hover.
 * -------------------------------------------------------------------------- */

.ashby-job-posting-brief {
  background-color: #f3f0eb;
  border: 1px solid rgb(18 32 35 / 0.1);
  box-shadow: none;
}

/*
 * The four filter selects. `background-image: none` is doing the work, not the
 * colour: Ashby paints these with a flat white linear-gradient over the top of
 * their background-color, so setting the colour alone changes nothing visible.
 */
.ashby-job-board-filter {
  background-image: none;
  background-color: #f3f0eb;
  border: 1px solid rgb(18 32 35 / 0.14);
  color: #122023;
}

.ashby-job-board-heading,
.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-title {
  color: #122023;
}

.ashby-job-board-heading-count,
.ashby-job-board-filters-label,
.ashby-job-posting-brief-details {
  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;
}

/*
 * THE CONFIRMATION. Read the note before changing any of this.
 *
 * A candidate reported applying and not being able to tell whether it had gone
 * through. That is the most expensive bug this page can have: a candidate who
 * cannot see a confirmation either submits twice or walks away.
 *
 * Cause: an earlier version of this file cleared the container's background so
 * the confirmation would sit flat in our cream dialog. Off that dialog and on
 * Ashby's own cream page, that left a message with no boundary and no contrast
 * against the ground. The confirmation now gets the strongest treatment on the
 * whole board, deliberately: a white box with a real edge, and near-black text.
 *
 * HOW IT IS REACHED. The elements carrying the type are Ashby's own hashed
 * classes (`_successHeading_`, `_successMessage_`), which are not on the styling
 * allowlist and cannot be selected. They resolve their colours from variables:
 *
 *   heading   color: var(--colorPositive800)     default #197729
 *   message   color: var(--colorNeutral700)      default #545b6d
 *   box       background: var(--colorPositive200) default #eafcec
 *             border: 1px solid var(--colorPositive600)  default #29b458
 *
 * read straight out of Ashby's shipped stylesheet, not guessed. So the variables
 * are redefined HERE rather than at `:root`, which is what keeps the override
 * local: `--colorNeutral700` alone is used 31 times across the board, and
 * flattening it globally would take every piece of secondary type to full black.
 *
 * NOT VERIFIED IN THE BROWSER, and it cannot be from this side: rendering the
 * success state means submitting a real application, which would put a junk
 * candidate in the pipeline. Submit one test application and archive it.
 */
.ashby-application-form-success-container {
  --colorPositive200: #ffffff;
  --colorPositive600: rgb(18 32 35 / 0.14);
  --colorPositive800: #122023;
  --colorNeutral700: #122023;

  background-color: transparent;
  box-shadow: none;
  color: #122023;
}

/* Failure matters as much as success, and for the same reason. Coral carries the
   edge so it cannot be mistaken for the confirmation; the words stay ink. */
.ashby-application-form-failure-container {
  --colorNegative200: #ffffff;
  --colorNegative600: #fb5646;
  --colorNegative800: #122023;
  --colorNegative900: #122023;
  --colorNeutral700: #122023;

  background-color: transparent;
  box-shadow: none;
  color: #122023;
}

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