/* stylelint-disable */

/* Load Inter (400/500/600) — display=swap renders fallback text immediately */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

/* ============================================================
   ZYPHRA — Ashby Careers Page Custom CSS
   Dark mode, matching the Zyphra marketing/social visual system.

   Brand tokens (from Zyphra Focused Chart Style Guide, dark mode):
     BG               #0A0A0A   figure / page background
     Panel            #171717   cards, legends, surfaces
     Grid / spine     #262626   borders, dividers
     Text primary     #FAFAFA   titles, values
     Text secondary   #D4D4D4   labels, body
     Muted            #737373   footnotes, hints
     Zyphra orange    #F97316   subject / primary accent ONLY
   Font: Inter (per style guide), with system fallbacks.
   ============================================================ */

:root {
    /* --- Ashby's built-in primary tokens ---
       NOTE: --colorPrimary900 and --colorPrimary600 can ALSO be set in
       Ashby admin under Theme settings. Keep these two in sync with the
       admin values to avoid conflicting colors. */
    --colorPrimary900: #e7620f;   /* hero orange — buttons, accents */
    --colorPrimary600: #FF873C;   /* lighter orange — hover / highlights */

    /* The overall app background of the hosted job board */
    --colorAppBackground: #0A0A0A;

    /* Layout */
    --widthMaxJobBoard: 920px;

    /* Border radius */
    --borderRadiusContainer: 12px;   /* cards / containers */
    --borderRadiusControl: 8px;      /* inputs, selects */
    --borderRadiusButton: 8px;       /* buttons */

    /* Font stack — Inter with the style-guide fallback chain */
    --fontFamily: "Inter", "Helvetica Neue", "Helvetica", "Arial", sans-serif;

    /* --- Custom Zyphra tokens used throughout this sheet --- */
    --zyphra-bg: #0A0A0A;
    --zyphra-panel: #171717;
    --zyphra-panel-hover: #1F1F1F;
    --zyphra-border: #262626;
    --zyphra-border-active: #e7620f;
    --zyphra-text: #FAFAFA;
    --zyphra-text-secondary: #D4D4D4;
    --zyphra-muted: #737373;
    --zyphra-orange: #e7620f;
    --zyphra-orange-hover: #FF873C;
}

/* ============================================================
   PAGE / GLOBAL
   ============================================================ */

body {
    background-color: var(--zyphra-bg);
    color: var(--zyphra-text-secondary);
    font-family: var(--fontFamily);
    font-optical-sizing: auto;
}

/* ============================================================
   JOB BOARD HEADER
   ============================================================ */

.ashby-job-board-heading {
    color: var(--zyphra-text);
    font-weight: 400;
}

.ashby-job-board-heading-count {
    color: var(--zyphra-muted);
}

/* ============================================================
   FILTERS
   ============================================================ */

.ashby-job-board-filters-label {
    color: var(--zyphra-text-secondary);
    font-weight: 500;
}

.ashby-job-board-filter {
    -webkit-appearance: none;   /* macOS ignores background on native selects until appearance is reset */
    appearance: none;
    background-color: var(--zyphra-panel) !important;   /* #171717 */
    border: 1px solid var(--zyphra-border);
    border-radius: var(--borderRadiusControl);
    color: var(--zyphra-text-secondary) !important;
    font-family: var(--fontFamily);
    padding: 8px 12px;
    transition: border-color 0.15s ease;
}

.ashby-job-board-filter:hover {
    border: 1px solid var(--zyphra-muted);
}

.ashby-job-board-filter:focus {
    outline: none;
    border-color: var(--zyphra-orange);
    box-shadow: none;
}

.ashby-job-board-reset-filters-label {
    color: var(--zyphra-orange);
    cursor: pointer;
    text-decoration: underline;
}

/* ============================================================
   DEPARTMENT / TEAM HEADINGS
   ============================================================ */

.ashby-department-heading,
.ashby-job-posting-brief-department-heading {
    color: var(--zyphra-text);
    font-weight: 400;
}

.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading-level {
    color: var(--zyphra-text-secondary);
}

/* ============================================================
   JOB LISTING CARDS
   ============================================================ */

.ashby-job-posting-brief-list {
    /* container for the list of postings */
}

.ashby-job-posting-brief {
    margin-bottom: 10px;
    background-color: var(--zyphra-panel);
    border: 1px solid var(--zyphra-border);
    border-radius: var(--borderRadiusContainer);
    padding: 16px 20px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.ashby-job-posting-brief:hover {
    border-color: transparent !important;
    box-shadow: inset 0 0 0 1px var(--zyphra-orange) !important;
    background-color: var(--zyphra-panel-hover);
}

.ashby-job-posting-brief-title {
    color: var(--zyphra-text);
    font-weight: 500;
}

.ashby-job-posting-brief-details {
    color: var(--zyphra-muted);
}

/* ============================================================
   INDIVIDUAL JOB POSTING PAGE
   ============================================================ */

.ashby-job-posting-header,
.ashby-job-posting-heading {
    color: var(--zyphra-text);
}

.ashby-job-posting-left-pane,
.ashby-job-posting-right-pane,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab {
    background-color: var(--zyphra-bg) !important;   /* #0A0A0A */
    color: var(--zyphra-text-secondary);
}

/* Left-pane field labels (Location, Employment Type, etc.) — neutral grey
   instead of bluish. They're h2.<hashed> headings, so target via the pane. */
.ashby-job-posting-left-pane h2 {
    color: #A3A3A3 !important;
}

/* Left-pane divider lines between fields → #262626. border-color only
   affects elements that already have a border, so this is safe to apply
   broadly within the pane. */
.ashby-job-posting-left-pane div {
    border-color: #262626 !important;
}

/* The Overview / Application content panels render with Ashby's internal
   hashed module classes (e.g. _description_5yu8i_201) that change every
   build and aren't on Ashby's allowlist. Target the stable ARIA role
   instead — Ashby's docs confirm attribute selectors are styleable.
   This covers both tab panels at once. */
[role="tabpanel"] {
    background-color: var(--zyphra-bg) !important;   /* #0A0A0A */
}

/* Overview section headings (h2). They carry a hashed module class
   (_heading_f7cvd_52), so target the h2 inside the panel by ARIA role. */
[role="tabpanel"] h2 {
    color: #FAFAFA;
}

.ashby-job-board-back-to-all-jobs-button {
    color: #FAFAFA !important;
    background-color: transparent;
    border: none;
    transition: color 0.15s ease;
}

.ashby-job-board-back-to-all-jobs-button:hover {
    color: var(--zyphra-orange) !important;
}

/* The arrow is a filled SVG path that was inheriting the orange primary
   color, so force fill (not just color) on the svg and its path. */
.ashby-job-board-back-to-all-jobs-button svg,
.ashby-job-board-back-to-all-jobs-button svg path {
    fill: #FAFAFA !important;
    color: #FAFAFA !important;
}

.ashby-job-board-back-to-all-jobs-button:hover svg,
.ashby-job-board-back-to-all-jobs-button:hover svg path {
    fill: var(--zyphra-orange) !important;
    color: var(--zyphra-orange) !important;
}

/* Tab underline indicator (Overview / Application) — orange active, grey hover, 1px */
.ashby-job-posting-right-pane-tab-slider {
    background-color: var(--zyphra-orange) !important;   /* active = orange */
    height: 1px !important;
    border: none !important;
}

.ashby-job-posting-right-pane-tab-slider:hover {
    background-color: #292929 !important;   /* hover */
    height: 1px !important;
}

/* "Apply for this Job" primary CTA hover → #F08D4E. The button has only
   hashed classes and sits in the right pane — most likely the Overview tab
   panel (id="overview"), where the Apply CTA appears, so target a button there. */
/* "Apply for this Job": no border in ANY state (so it doesn't resize on
   hover) and border-box sizing to keep height constant across states. */
[id="overview"] button {
    border: none !important;
    box-sizing: border-box !important;
}

[id="overview"] button:hover {
    background-color: #F08D4E !important;
    border: none !important;
}

/* ============================================================
   APPLICATION FORM
   ============================================================ */

.ashby-application-form-container {
    background-color: var(--zyphra-bg);   /* #0A0A0A */
    border: none;
    border-radius: var(--borderRadiusContainer);
    padding: 2rem;
    color: var(--zyphra-text-secondary);
}

.ashby-application-form-section-header-title {
    color: var(--zyphra-text);
    font-weight: 400;
}

.ashby-application-form-section-header-description {
    color: var(--zyphra-muted);
}

.ashby-application-form-question-title {
    color: var(--zyphra-text);
    font-weight: 500;
}

.ashby-application-form-question-description {
    color: var(--zyphra-muted);
}

/* Text inputs, textareas, and selects inside the form */
.ashby-application-form-container input,
.ashby-application-form-container textarea,
.ashby-application-form-container select {
    background-color: var(--zyphra-bg);
    border: 1px solid var(--zyphra-border);
    border-radius: var(--borderRadiusControl);
    color: var(--zyphra-text);
    font-family: var(--fontFamily);
}

.ashby-application-form-container input::placeholder,
.ashby-application-form-container textarea::placeholder {
    color: var(--zyphra-muted);
}

.ashby-application-form-container input:focus,
.ashby-application-form-container textarea:focus,
.ashby-application-form-container select:focus {
    outline: none;
    border-color: var(--zyphra-border-active);
    box-shadow: none;
}

/* Resume autofill / drag-and-drop uploader */
.ashby-application-form-autofill-uploader {
    background-color: var(--zyphra-bg);
    border: 1px dashed var(--zyphra-border);
    border-radius: var(--borderRadiusControl);
}

/* The "Autofill from resume" pane that sits above the form */
.ashby-application-form-autofill-pane,
.ashby-application-form-autofill-input-root,
.ashby-application-form-autofill-input-base-layer {
    background-color: var(--zyphra-bg);   /* #0A0A0A */
    border-color: var(--zyphra-border);
}

.ashby-application-form-autofill-input-title {
    color: var(--zyphra-text);
}

.ashby-application-form-autofill-input-description {
    color: var(--zyphra-muted);
}

.ashby-application-form-autofill-input-icon {
    color: var(--zyphra-orange);
}

/* ============================================================
   RESUME FILE FIELD
   The dropzone, upload button and drag hint use Ashby's hashed
   module classes, but the dropzone root carries role="presentation"
   (a stable hook), so everything is targeted relative to that.
   ============================================================ */

/* The dashed drop-zone box. A fixed lighter-grey fill means it never
   flashes white on drag-over. */
.ashby-application-form-container [role="presentation"] {
    background-color: var(--zyphra-panel) !important;   /* #171717 */
    border-color: var(--zyphra-border) !important;       /* #262626 dotted line */
}

/* "or drag and drop here" hint — neutral light grey, not bluish */
.ashby-application-form-container [role="presentation"] p {
    color: #A3A3A3 !important;
}

/* Upload File buttons — both the resume field button and the autofill
   pane CTA button (they share hashed _button_zyh3g_28 classes). Grey by
   default, orange on hover, taller padding, white icon. */
.ashby-application-form-container [role="presentation"] button,
.ashby-application-form-autofill-input-base-layer button,
.ashby-application-form-autofill-pane button {
    background-color: var(--zyphra-border) !important;   /* #262626 grey */
    color: #FAFAFA !important;
    border: 1px solid var(--zyphra-border) !important;
    border-radius: var(--borderRadiusButton) !important;
    padding: 12px 16px !important;       /* increased top/bottom padding */
    font-size: 14px !important;
    font-weight: 500 !important;
    margin: 0 !important;
    transition: background-color 0.15s ease;
}

.ashby-application-form-container [role="presentation"] button:hover,
.ashby-application-form-autofill-input-base-layer button:hover,
.ashby-application-form-autofill-pane button:hover {
    background-color: var(--zyphra-orange) !important;
}

/* Keep the upload icon #fafafa in both default and hover states */
.ashby-application-form-container [role="presentation"] button svg,
.ashby-application-form-autofill-input-base-layer button svg,
.ashby-application-form-autofill-pane button svg {
    color: #FAFAFA !important;
}

/* ============================================================
   YES / NO OPTION BUTTONS
   Smaller, lighter text, with a gap so they read as separate.
   Background/border are left to Ashby so the selected ("active")
   state stays visible — see note: the active state is a hashed
   class only, so a white selected-fill can't be targeted safely.
   ============================================================ */
.ashby-application-form-field-entry button {
    color: #FAFAFA !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    border-width: 1px !important;
    border-color: #262626;            /* default border; no !important so the active orange border wins */
    padding: 6px 16px !important;
    margin-right: 0 !important;       /* connected — no gap between Yes/No */
}

/* Clean segmented pair: each button keeps its own border on the shared
   side; the No button is pulled left 1px so the two 1px borders overlap
   into a single divider. Inner corners squared, outer corners rounded. */
.ashby-application-form-field-entry button:first-of-type {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.ashby-application-form-field-entry button:last-of-type {
    margin-left: -1px !important;          /* overlap the two borders into one divider */
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* On hover, lift the hovered button so its orange border paints on top of
   the overlapped divider. This makes the divider turn orange and the
   outline close cleanly whether Yes OR No is hovered — and since each
   button has its own border on the shared side, neither overhangs. */
.ashby-application-form-field-entry button:hover {
    position: relative;
    z-index: 1;
}

/* Re-assert the resume Upload File button's full border + corners and
   cancel the segmented overlap margin (it's last-of-type in its own group). */
.ashby-application-form-container [role="presentation"] button {
    border: 1px solid var(--zyphra-border) !important;
    border-radius: var(--borderRadiusButton) !important;
    margin-left: 0 !important;
}

/* Submit button — the one place orange fill earns its keep */
.ashby-application-form-submit-button {
    background-color: var(--zyphra-orange);
    color: #FAFAFA;
    width: 100%;
    box-sizing: border-box;
    margin-top: 1.5rem;
    border: none;
    border-radius: var(--borderRadiusButton);
    font-weight: 500;
    transition: background-color 0.15s ease;
}

.ashby-application-form-submit-button:hover {
    background-color: var(--zyphra-orange-hover);
}

/* Success / failure / blocked messages */
.ashby-application-form-success-container {
    background-color: rgba(77, 158, 114, 0.12);   /* DELTA_POSITIVE tint */
    border: 1px solid #4D9E72;
    border-radius: var(--borderRadiusControl);
    color: var(--zyphra-text);
}

.ashby-application-form-failure-container {
    background-color: rgba(192, 57, 43, 0.12);     /* DELTA_NEGATIVE tint */
    border-left: 1px solid #C0392B;
    border-radius: var(--borderRadiusControl);
    color: var(--zyphra-text);
}

.ashby-application-form-blocked-application-container {
    background-color: var(--zyphra-panel);
    border: 1px solid var(--zyphra-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--zyphra-text-secondary);
}

/* Texting consent note below phone fields */
.ashby-application-form-texting-consent-description {
    color: var(--zyphra-muted);
}

/* ============================================================
   SURVEYS
   ============================================================ */

.ashby-survey-form-container {
    background-color: var(--zyphra-bg);   /* #0A0A0A */
    border: 1px solid var(--zyphra-border);
    border-radius: var(--borderRadiusContainer);
    color: var(--zyphra-text-secondary);
}

/* ============================================================
   FOOTER
   The footer's top border is the line at the bottom of the page.
   Its class is hashed, so target the <footer> element directly
   (element selectors pass validation; only unknown classes don't).
   ============================================================ */

footer {
    border-top-color: #262626 !important;
}

/* "Powered by Ashby" link — its href is the bare ashbyhq.com domain
   (the policy links have /privacy, /security, /disclosure paths). */
footer a[href="https://www.ashbyhq.com"] {
    color: #A3A3A3 !important;
}

footer a[href="https://www.ashbyhq.com"]:hover {
    color: var(--zyphra-orange) !important;
}

/* Privacy Policy / Security / Vulnerability Disclosure links — they sit
   inside the footer's <p>, so target paragraph anchors. */
footer p a {
    color: #A3A3A3 !important;
}

footer p a:hover {
    color: var(--zyphra-orange) !important;
}