/* stylelint-disable */

/* These variables can be used to control values throughout the job board. */
:root {
    /* ----------------------------------------------------------------
       cusp.ai brand palette (LIGHT theme)
       Brand green : #5CF082  (logo / accents)
       Brand teal  : #027288  (header bar, CTA buttons)
       Page grey   : #E7EAEA  (light page background)
       ---------------------------------------------------------------- */

    /*  Reusable brand tokens (not read by Ashby, used by the rules below). */
    --brandGreen: #5CF082;
    --brandGreenDark: #3ED869;
    --brandTeal: #027288;
    --brandTealDark: #015A6E;
    --brandInk: #06262F;
    --brandGrey: #D5D8D7;
    --brandPageGrey: #D4D4D4;
    --brandTextMuted: #5A6E73;
    --brandTextOnTeal: #FFFFFF;

    /* Top banner bar + hyperlink colour. */
    --brandBanner: #217288;

    /* Side inset for the "Submit Application" button so it lines up with the form
       fields / the "Apply for this Job" button. Matches Ashby's container padding. */
    --submitSideInset: 24px;

    /*  Darker primary color
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
    --colorPrimary900: #015A6E;

    /*  Lighter primary color
    WARNING - This can be set in the Ashby admin under theme settings!
    If you modify, you should make sure your colors work with the settings there. */
    --colorPrimary600: #027288;

    /*  The max width of the job board container */
    --widthMaxJobBoard: 800px;

    /*  The max width of the application form section */
    /* --widthMaxJobBoard: 800px; */

    /*  Container border radius */
    --borderRadiusContainer: 10px;

    /*  Border radius of control elements (e.g. input boxes) */
    --borderRadiusControl: 10px;

    /*  Button border radius */
    --borderRadiusButton: 10px;

    /*  Font families
    cusp.ai uses Aeonik. It must be loaded for the board to render it — either
    set it in the Ashby admin theme settings, or @import / @font-face it here
    (Aeonik is a licensed font, so host your own licensed copy). The rest of the
    stack is a graceful fallback if Aeonik hasn't loaded. */
    --fontFamily: "Aeonik", "Inter", "Helvetica Neue", "Helvetica", "Arial", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;

    --colorAppBackground: #D4D4D4;
  }

/* ============================================================================
   BRAND COLOUR MODEL (light theme)
   The main landing page uses a light grey background, so we let Ashby's DEFAULT
   dark text show through — no white baseline. The teal header bar comes from
   Ashby's primary colour (--colorPrimary600). Headings are dark, job cards are
   white, and CTA buttons are teal with white text. The role/application detail
   page keeps its own teal header + white content panes via the rules further
   down (all with explicit colours, so they don't depend on a global baseline).
   ============================================================================ */

/* Top banner bar (logo header) - teal. Covers the landing page nav and the role
   page header, both of which use Ashby's _navRoot_ component. */
[class*="_navRoot_"] {
    background-color: var(--brandBanner) !important;
}

/* Hyperlink text - teal. The job-role cards and the back button are also <a>
   elements but keep their own colours (their rules have higher specificity). */
a,
a *,
.ashby-job-posting-left-pane a, .ashby-job-posting-left-pane a *,
.ashby-job-posting-right-pane a, .ashby-job-posting-right-pane a * {
    color: var(--brandBanner) !important;
}

/* Muted grey for the posting count next to "Open Positions". */
.ashby-job-board-heading-count,
.ashby-job-board-heading-count * {
    color: var(--brandTextMuted) !important;
}

/* Application autofill input's base layer element. This contains standard copy, a CTA button, and potential validation alerts. */
/* The "Autofill from resume" box is white by default - grey out every layer of
   it (pane, root wrapper, and base layer) so no white frame is left. */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer {
    background-color: var(--brandPageGrey) !important;
}
/* White border to match the Resume/CV drop area. */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer {
    border-color: #FFFFFF !important;
}

/* Application autofill input's description. */
.ashby-application-form-autofill-input-description {}

/* Application autofill input's drag state overlay element. Can style [data-state] which can be 'active' or 'hidden'. */
.ashby-application-form-autofill-input-drag-layer {}

/* Application autofill input form's alert element. Can style [data-highlight] which can be 'negative' or 'positive'. */
.ashby-application-form-autofill-input-form-alert {}

/* Application autofill input's magic sparkles icon. */
.ashby-application-form-autofill-input-icon {}

/* Application autofill input's pending state overlay element. Can style [data-state] which can be 'active' or 'hidden'. */
.ashby-application-form-autofill-input-pending-layer {}

/* Application autofill input's root element. Can style [data-state] which can be 'pending', 'drag', or 'default'. */
.ashby-application-form-autofill-input-root {}

/* Application autofill input's title. */
.ashby-application-form-autofill-input-title {}

/* Container element for application autofill input form. */
.ashby-application-form-autofill-pane {}

/* The resume uploader to auto-fill the application form */
.ashby-application-form-autofill-uploader {}

/* A container for displaying the custom message to the user */
.ashby-application-form-blocked-application-container {}

/* A container for the application form. */
/* Grey form surfaces across ALL application templates - the job-posting
   Application tab, the standalone General Application form, and survey forms -
   so the branding is consistent wherever an application form is rendered (these
   use stable .ashby-* classes, so they apply regardless of the page structure). */
.ashby-application-form-container,
.ashby-application-form-section-container,
.ashby-survey-form-container {
    background-color: var(--brandPageGrey) !important;
}

/* Keep form inputs legible: dark text on their light field backgrounds. */
.ashby-application-form-container input,
.ashby-application-form-container textarea,
.ashby-application-form-container select {
    color: var(--brandInk) !important;
}

/* A container for the failure message */
/* Soft red panel, rounded to match brand containers. */
.ashby-application-form-failure-container {
    background-color: #FDECEC;
    border: 1px solid #F1B9B9;
    border-radius: var(--borderRadiusContainer);
    padding: 16px;
}
.ashby-application-form-failure-container,
.ashby-application-form-failure-container * {
    color: #8A1F1F !important;
}

/* A container for the label and input on an application form. */
.ashby-application-form-field-entry {}

/* Resume / CV drag-and-drop area - white dashed border so it stands out on the
   grey background. (_container_10xk4 is Ashby's file dropzone wrapper.) */
.ashby-application-form-container [class*="_container_10xk4"] {
    border-color: #FFFFFF !important;
}

/* The description of each question on an application form. Will only show if a description is specified. */
.ashby-application-form-question-description {}

/* The title of each question on an application form. */
.ashby-application-form-question-title {}

/* A single section on the Ashby application form. All questions will be wrapped in sections, though the default section may not have a title. */
.ashby-application-form-section-container {}

/* The header for an application form section, possibly containing a title and description. */
.ashby-application-form-section-header {}

/* The description for an application form section. May not exist if no description was specified. */
.ashby-application-form-section-header-description {}

/* The title for an application form section. May not exist for the default section. */
.ashby-application-form-section-header-title {}

/* The application submission button ("Apply for this Job" / "Submit Application"). */
.ashby-application-form-submit-button {
    /* Colour handled by the _primary_ button rules below.
       The Submit button is a bare child of the #form panel (no padded container),
       so by default it spans edge-to-edge while the form fields AND the "Apply for
       this Job" button are inset by their container's padding. Inset it by the same
       amount so it lines up with the Apply button. Adjust --submitSideInset if the
       alignment is slightly off. */
    background-color: var(--brandTeal);
    border-color: var(--brandTeal);
    display: block !important;
    /* Full width minus the side inset (so it stays greedy/full-width like the
       "Apply for this Job" button, just pulled in to line up with the form fields),
       then centred. */
    width: calc(100% - 2 * var(--submitSideInset)) !important;
    box-sizing: border-box !important;
    margin-left: auto !important;
    margin-right: auto !important;
    /* Pull the button up (less gap above) and add space below so it sits inside
       the white card instead of hanging off the bottom. Tweak these to taste. */
    margin-top: 8px !important;
    margin-bottom: 24px !important;
}
.ashby-application-form-submit-button:hover {
    background-color: var(--brandTealDark);
    border-color: var(--brandTealDark);
}

/* A container for the success message */
/* On-brand green-tinted panel. */
.ashby-application-form-success-container {
    background-color: rgba(92, 240, 130, 0.14);
    border: 1px solid var(--brandGreen);
    border-left: 4px solid var(--brandGreen);
    border-radius: var(--borderRadiusContainer);
    padding: 16px;
}
.ashby-application-form-success-container,
.ashby-application-form-success-container * {
    color: var(--brandInk) !important;
}

/* The text message consent description. Displayed below phone number fields. Will only show if texting is enabled. */
.ashby-application-form-texting-consent-description {}

/* The heading of a department, which can have many teams under it. */
/* Job family / section title (e.g. "AI/ML") - black, default size, not bold. */
.ashby-department-heading,
.ashby-department-heading *,
.ashby-department-heading-level,
.ashby-department-heading-level * {
    color: #000000 !important;
    font-weight: 400 !important;
}

/* The heading of a single team. */
.ashby-department-heading-level {}

/* The button which allows users to navigate from an individual posting back to the list of all job postings. */
/* Green back button (label + arrow) - sits in the teal header on the role page. */
.ashby-job-board-back-to-all-jobs-button {
    border-color: var(--brandGreen);
    background-color: transparent;
}
.ashby-job-board-back-to-all-jobs-button:hover {
    border-color: var(--brandGreenDark);
    background-color: rgba(92, 240, 130, 0.10);
}
.ashby-job-board-back-to-all-jobs-button,
.ashby-job-board-back-to-all-jobs-button * {
    color: var(--brandGreen) !important;
}
.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg *,
.ashby-job-board-back-to-all-jobs-button svg path {
    fill: var(--brandGreen) !important;
    stroke: var(--brandGreen) !important;
}

/* A select box element for filtering the job board. */
/* White control on the grey page, dark text, green focus ring. */
.ashby-job-board-filter {
    background-color: #FFFFFF;
    border-color: var(--brandGrey);
    border-radius: var(--borderRadiusControl);
}
.ashby-job-board-filter,
.ashby-job-board-filter * {
    color: var(--brandInk) !important;
}
.ashby-job-board-filter:focus,
.ashby-job-board-filter:focus-within {
    border-color: var(--brandGreen);
    box-shadow: 0 0 0 2px rgba(92, 240, 130, 0.35);
    outline: none;
}

/* The 'Filters' label element in the job board. */
.ashby-job-board-filters-label,
.ashby-job-board-filters-label * {
    color: #000000 !important;
    font-weight: 600;
}

/* The heading of the entire job board. */
/* "Open Positions" section title - default size, not bold. */
.ashby-job-board-heading,
.ashby-job-board-heading * {
    font-weight: 400 !important;
}

/* The count of job postings on the job board. */
/* Colour set in the brand model block above (muted grey). */
.ashby-job-board-heading-count {}

/* The 'Reset filters' label element in the job board. The reset filters label element in the job board. */
.ashby-job-board-reset-filters-label {
    text-decoration: underline;
}
.ashby-job-board-reset-filters-label:hover {
    color: var(--brandTeal) !important;
}

/* The container of the job posting details pane. */
/* Each clickable job-role card: white with a soft shadow on the grey page. */
.ashby-job-posting-brief {
    background-color: #FFFFFF !important;
    border-radius: var(--borderRadiusContainer);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    padding: 16px 20px;
    /* This adds some space between posting briefings. */
    margin-bottom: 10px;
}
.ashby-job-posting-brief,
.ashby-job-posting-brief * {
    color: var(--brandInk) !important;
}

/* The heading of a department name. Departments group teams. */
.ashby-job-posting-brief-department-heading {}

/* The heading of a single team. */
.ashby-job-posting-brief-department-heading-level {}

/* The container for the details of the job posting, in the details pane. */
.ashby-job-posting-brief-details {}

/* The container for the list of job post briefings. */
.ashby-job-posting-brief-list {}

/* The title of the job posting in the details pane. */
.ashby-job-posting-brief-title {}

/* The main header on the job posting page */
.ashby-job-posting-header {}

/* ----------------------------------------------------------------------------
   ROLE (job posting) DETAIL PAGE
   - Top header: teal bar with white content (matches the landing page's teal
     header).
   - Left panel (location, employment type, etc.) and the right pane (Overview /
     Application tabs): WHITE with black text.
   ---------------------------------------------------------------------------- */

/* Top header - teal bar. */
.ashby-job-posting-header {
    background-color: var(--brandTeal);
}
.ashby-job-posting-header,
.ashby-job-posting-header * {
    color: var(--brandTextOnTeal) !important;
}

/* Left panel (location, employment type, etc.) - grey (matches the page), black text. */
.ashby-job-posting-left-pane {
    background-color: var(--brandPageGrey);
    border-radius: 0 !important;
}
.ashby-job-posting-left-pane,
.ashby-job-posting-left-pane * {
    color: #000000 !important;
}

/* Right pane (Overview / Application tabs) - grey (matches the page), black text. */
.ashby-job-posting-right-pane {
    background-color: var(--brandPageGrey);
    border-radius: 0 !important;
}
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane * {
    color: #000000 !important;
}

/* The tab content panels, plus the form and autofill panes, use Ashby's
   _container_f7cvd container which is WHITE by default. Make them grey so the
   whole detail page below the header is one continuous grey surface.
   Scoped to the right pane so it does NOT affect the homepage job cards. */
.ashby-job-posting-right-pane [class*="_container_f7cvd"] {
    background-color: var(--brandPageGrey) !important;
}

/* The heading of a job post (role title) - dark, not bold. */
.ashby-job-posting-heading,
.ashby-job-posting-heading * {
    font-weight: 400 !important;
}

/* The left pane of the job posting, with the job posting details */
.ashby-job-posting-left-pane {}

/* The right pane of the job posting, containing the tabs, overview, and application form */
.ashby-job-posting-right-pane {}

/* IMPORTANT: .ashby-job-posting-right-pane-application-tab and
   .ashby-job-posting-right-pane-overview-tab are on the small NAV LABEL spans
   ("Application" / "Overview"), NOT the content panes. The content panes are
   role="tabpanel" elements with no .ashby-* hook, and get their white background
   + black text from the .ashby-job-posting-right-pane rule above. So these two
   selectors are intentionally left minimal. */
/* "Overview" / "Application" tabs - black + bold (including the active tab, which
   Ashby colours teal). Target the _tab_ anchors and their label spans with
   matching specificity so this wins over Ashby's active-tab colour. */
.ashby-job-posting-right-pane [class*="_tab_"],
.ashby-job-posting-right-pane [class*="_tab_"] *,
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab {
    color: #000000 !important;
    font-weight: 700 !important;
}

/* "Apply for this Job" and "Submit Application" are Ashby _primary_ buttons
   (hashed classes _button_ / _primary_, not the .ashby-* hooks). Match by the
   _primary_ substring so it survives Ashby build-hash changes: teal fill, white
   text. Scoped to the posting right pane / application form. */
.ashby-job-posting-right-pane button[class*="_primary_"],
.ashby-application-form-container button[class*="_primary_"] {
    background-color: var(--brandTeal) !important;
    border-color: var(--brandTeal) !important;
}
.ashby-job-posting-right-pane button[class*="_primary_"],
.ashby-job-posting-right-pane button[class*="_primary_"] *,
.ashby-application-form-container button[class*="_primary_"],
.ashby-application-form-container button[class*="_primary_"] * {
    color: #FFFFFF !important;
}

/* "Upload file" / "Upload File" secondary buttons: white text on hover. */
.ashby-job-posting-right-pane button[class*="_secondary_"]:hover,
.ashby-job-posting-right-pane button[class*="_secondary_"]:hover *,
.ashby-application-form-container button[class*="_secondary_"]:hover,
.ashby-application-form-container button[class*="_secondary_"]:hover * {
    color: #FFFFFF !important;
}

/* The tabs slider in the right pane of the job posting */
.ashby-job-posting-right-pane-tab-slider {}

/* A container for any surveys specified for this application form. */
.ashby-survey-form-container {}


/* ----------------------------------------------------------------------------
   "Apply for this Job" / "Submit Application" button: teal fill, WHITE text.
   The class name is doubled (.foo.foo) purely to raise specificity to 0,2,0 so
   this wins over the tab/pane colour rules no matter where the button sits in the
   DOM — without depending on a specific ancestor container.
   ---------------------------------------------------------------------------- */
.ashby-application-form-submit-button.ashby-application-form-submit-button {
    background-color: var(--brandTeal) !important;
    border-color: var(--brandTeal) !important;
}
.ashby-application-form-submit-button.ashby-application-form-submit-button,
.ashby-application-form-submit-button.ashby-application-form-submit-button * {
    color: #FFFFFF !important;
}