/* stylelint-disable */

/* These variables can be used to control values throughout the job board. */
:root {
    /* ----------------------------------------------------------------
       cusp.ai brand palette
       Brand green : #5CF082  (accent / CTA pill, black text on top)
       Brand teal  : #027288  (primary surface / page background)
       Brand grey  : #D5D8D7  (secondary panel / cards)
       ---------------------------------------------------------------- */

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

    /* 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: #027288;
  }

/* ============================================================================
   BRAND COLOUR MODEL
   The page background is brand teal. Ashby renders a lot of text (e.g. the
   "Thank you for your interest in CuspAI" intro and the "General Applications"
   heading) with its OWN internal class names, not the themeable .ashby-* hooks,
   so we can't target those individually. Instead we set WHITE as the page-wide
   baseline with !important so it beats Ashby's built-in colours, then re-assert
   the exceptions below at higher specificity (also !important) so they win:
     - GREEN for headings ("Open positions", job-family titles, job-post heading)
     - BLACK on the grey surfaces (role cards + Overview/Application panes)
     - DARK text for form controls (so they stay legible on light fields)
   ============================================================================ */

/* Baseline: white text across the whole teal page. Low specificity (0,0,1) so
   every exception below (all class-based, >= 0,1,0) overrides it. */
body,
body * {
    color: var(--brandTextOnTeal) !important;
}

/* Green headings. */
.ashby-job-board-heading, .ashby-job-board-heading *,
.ashby-department-heading, .ashby-department-heading *,
.ashby-job-posting-heading, .ashby-job-posting-heading *,
.ashby-application-form-section-header-title, .ashby-application-form-section-header-title * {
    color: var(--brandGreen) !important;
}

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

/* Application autofill input's base layer element. This contains standard copy, a CTA button, and potential validation alerts. */
.ashby-application-form-autofill-input-base-layer {}

/* 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. */
.ashby-application-form-container {}

/* 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 {}

/* 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. */
/* Colour set in the brand model block above (green). */
.ashby-application-form-section-header-title {}

/* The application submission button ("Apply for this Job"). */
/* White button with GREEN text and a green outline. The green-text rule is
   re-asserted with higher specificity near the end of the file so it beats the
   teal tab's white-text rule. */
.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 title header - colour set in the brand model block above (green). */
.ashby-department-heading {}

/* 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) on the teal 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);
}
/* Force the label and arrow green (covers text, icon-font/currentColor, and SVG
   stroke/fill), overriding the white teal-page baseline. */
.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. */
/* Light control on the teal page: white background, 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 {
    font-weight: 600;
}

/* The heading of the entire job board. */
/* "Open positions" - colour set in the brand model block above (green). */
.ashby-job-board-heading {}

/* 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(--brandGreen) !important;
}

/* The container of the job posting details pane. */
/* Each clickable job-role link: white card with black text against the teal page. */
.ashby-job-posting-brief {
    background-color: #FFFFFF;
    border-radius: var(--borderRadiusContainer);
    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, matching the page background, with white text (green title).
   - Left panel (location, employment type, etc.) and the right pane (Overview /
     Application tabs): WHITE with black text.
   ---------------------------------------------------------------------------- */

/* Top header - teal, blends with the page background. */
.ashby-job-posting-header {
    background-color: var(--brandTeal);
}
.ashby-job-posting-header,
.ashby-job-posting-header * {
    color: var(--brandTextOnTeal) !important;
}
/* Keep the role title green on the teal header. */
.ashby-job-posting-heading,
.ashby-job-posting-heading * {
    color: var(--brandGreen) !important;
}

/* Left panel (location, employment type, etc.) - white card with black text.
   No corner rounding, so no teal background peeks through at the corners. */
.ashby-job-posting-left-pane {
    background-color: #FFFFFF;
    border-radius: 0 !important;
}
.ashby-job-posting-left-pane,
.ashby-job-posting-left-pane * {
    color: #000000 !important;
}

/* Right pane (Overview / Application tabs) - white with black text.
   No corner rounding, so no teal background peeks through at the corners. */
.ashby-job-posting-right-pane {
    background-color: #FFFFFF;
    border-radius: 0 !important;
}
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane * {
    color: #000000 !important;
}

/* The heading of a job post */
/* Colour set in the brand model block above (green). */
.ashby-job-posting-heading {}

/* 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. */
.ashby-job-posting-right-pane-application-tab {}
.ashby-job-posting-right-pane-overview-tab {}

/* "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;
}