/* stylelint-disable */

/* ============================================================================
   LINRO JOB BOARD THEME v21

   Complete and self-contained. Replace the entire contents of the Ashby
   custom CSS box with this file. Nothing to append.

   Contains no relational pseudo-class, which Ashby's validator rejects.

   Edit the token block. Nothing below it should need touching.
   ============================================================================ */

:root {
    color-scheme: dark;

    /* ---- Linro tokens ------------------------------------------------- */

    /*  Page ground. Near-black rather than pure black, per the brand
        direction. If the logo asset keeps its baked-in black background,
        set this to #000000 or re-export the logo with transparency. */
    --linroBase: #0b0c0b;

    /*  Cards, form panels, anything lifted off the ground */
    --linroSurface: #141715;
    --linroSurfaceHover: #1a1e1c;

    /*  Hairline borders and dividers */
    --linroLine: #262b28;

    /*  Primary text. Eggshell, not white. */
    --linroEggshell: #ede8da;

    /*  Secondary text: meta, labels, help copy */
    --linroMuted: #8d948e;

    /*  Slate green. Positive states only. */
    --linroGreen: #7c9a85;

    /*  Error and validation */
    --linroAlert: #d2564a;

    --linroFontBody: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        "Helvetica Neue", Arial, sans-serif;

    --linroFontMono: ui-monospace, "Berkeley Mono", "JetBrains Mono",
        "IBM Plex Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

/* ============================================================================
   PRIMARY COLOR

   These did not take in v1 because Ashby scopes them tighter than :root when
   they are set in the admin theme settings. Redeclared here at several scopes
   with !important to win. The cleaner fix is still to set them in the Ashby
   admin so the two agree.
   ============================================================================ */

:root,
html,
body,
[class^="ashby-"],
[class*=" ashby-"] {
    --colorPrimary900: #e9682e !important;
    --colorPrimary600: #f79055 !important;
    --colorAppBackground: #0b0c0b !important;

    /* Undocumented, and the actual source of the white surfaces. Ashby
       re-scopes these per component, so :root alone does not reach them.
       Higher number means darker, matching colorPrimary900 being the darker
       primary, so a dark theme wants the whole ramp inverted: the low end
       carries surfaces, the high end carries text. Inverting only the low
       end is what left the consent modal with dark text on dark. */
    --colorNeutral000: #0b0c0b !important;
    --colorNeutral100: #101312 !important;
    --colorNeutral200: #141715 !important;
    --colorNeutral300: #1a1e1c !important;
    --colorNeutral400: #262b28 !important;
    --colorNeutral500: #5c625e !important;
    --colorNeutral600: #8d948e !important;
    --colorNeutral700: #b4b8b0 !important;
    --colorNeutral800: #d6d2c6 !important;
    --colorNeutral900: #ede8da !important;

    --widthMaxJobBoard: 800px;
    --borderRadiusContainer: 3px;
    --borderRadiusControl: 2px;
    --borderRadiusButton: 2px;
    --fontFamily: var(--linroFontBody);
}

/* ============================================================================
   STRIP

   The full-page div strip was making the fixed logo bar transparent with no
   way to repaint it without knowing its exact class name. Removed in v21.

   The neutral ramp (--colorNeutral000 through --colorNeutral900) covers
   most Ashby surfaces via its own token system. Elements that still need
   explicit repainting are handled by the specific ashby-* rules below.
   ============================================================================ */

html,
body {
    background-color: var(--linroBase) !important;
    color: var(--linroEggshell);
    font-family: var(--linroFontBody);
}

/* Inherit the ground color rather than blanket-assigning it, so anything
   placed on a light surface only needs its container's color changed. */
[class^="ashby-"],
[class*=" ashby-"] {
    color: inherit;
}

[class^="ashby-"]:focus-visible,
[class*=" ashby-"]:focus-visible {
    outline: 2px solid var(--colorPrimary600);
    outline-offset: 2px;
}

::selection {
    background-color: var(--colorPrimary900);
    color: var(--linroBase);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--linroBase);
}

::-webkit-scrollbar-thumb {
    background: var(--linroLine);
    border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--linroMuted);
}

/* ============================================================================
   JOB BOARD LIST
   ============================================================================ */

.ashby-job-board-heading {
    font-family: var(--linroFontMono);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--linroEggshell);
}

.ashby-job-board-heading-count {
    font-family: var(--linroFontMono);
    color: var(--linroMuted);
    font-weight: 400;
}

.ashby-job-board-filters-label {
    font-family: var(--linroFontMono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--linroMuted);
}

.ashby-job-board-reset-filters-label {
    font-family: var(--linroFontMono);
    font-size: 11px;
    letter-spacing: 0.08em;
    color: var(--colorPrimary600);
    cursor: pointer;
}

.ashby-job-board-filter {
    background-color: var(--linroBase) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusControl);
    color: var(--linroEggshell);
    font-family: inherit;
    font-size: 14px;
    padding: 8px 11px;
}

.ashby-job-board-filter:hover {
    border-color: var(--linroMuted) !important;
}

.ashby-job-board-back-to-all-jobs-button {
    font-family: var(--linroFontMono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--linroMuted);
    background-color: transparent !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusButton);
    padding: 8px 14px;
    transition: color 120ms linear, border-color 120ms linear;
}

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

.ashby-department-heading,
.ashby-department-heading-level,
.ashby-job-posting-brief-department-heading,
.ashby-job-posting-brief-department-heading-level {
    font-family: var(--linroFontMono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--linroMuted);
    padding-bottom: 8px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--linroLine) !important;
}

.ashby-job-posting-brief {
    /* This adds some space between posting briefings. */
    margin-bottom: 10px;

    background-color: var(--linroSurface) !important;
    border: 1px solid var(--linroLine) !important;
    /* The left rule is the only ornament here. It lights on hover, nowhere
       else. Set after the shorthand or it gets reset. */
    border-left: 2px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 15px 18px;
    transition: background-color 120ms linear, border-color 120ms linear;
}

.ashby-job-posting-brief:hover {
    background-color: var(--linroSurfaceHover) !important;
    border-left-color: var(--colorPrimary900) !important;
}

.ashby-job-posting-brief-title {
    font-weight: 500;
    font-size: 15px;
    color: var(--linroEggshell);
}

.ashby-job-posting-brief-details {
    font-family: var(--linroFontMono);
    font-size: 12px;
    color: var(--linroMuted);
    letter-spacing: 0.03em;
    margin-top: 5px;
}

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

   The white block in the v1 screenshot lived here. Backgrounds are forced
   transparent by the strip above; these rules set the intended surfaces.
   ============================================================================ */

.ashby-job-posting-header {
    border-bottom: 1px solid var(--linroLine) !important;
    padding-bottom: 18px;
}

.ashby-job-posting-heading {
    font-weight: 500;
    color: var(--linroEggshell);
}

/* Left column: the LOCATION / EMPLOYMENT TYPE / COMPENSATION rail. */
.ashby-job-posting-left-pane {
    background-color: transparent !important;
    color: var(--linroEggshell);
    line-height: 1.65;
    padding-right: 28px;
}

/* Label above each value. */
.ashby-job-posting-left-pane dt,
.ashby-job-posting-left-pane th {
    font-family: var(--linroFontMono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--linroMuted);
}

.ashby-job-posting-left-pane dd,
.ashby-job-posting-left-pane td {
    color: var(--linroEggshell);
}

.ashby-job-posting-left-pane hr {
    border: 0;
    border-top: 1px solid var(--linroLine) !important;
    margin: 18px 0;
}

.ashby-job-posting-right-pane {
    background-color: transparent !important;
    color: var(--linroEggshell);
    line-height: 1.65;
}

.ashby-job-posting-right-pane p,
.ashby-job-posting-right-pane li {
    color: var(--linroEggshell);
}

.ashby-job-posting-right-pane strong,
.ashby-job-posting-right-pane b {
    color: #ffffff;
    font-weight: 600;
}

.ashby-job-posting-right-pane a,
.ashby-job-posting-left-pane a {
    color: var(--colorPrimary600);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.ashby-job-posting-right-pane h1,
.ashby-job-posting-right-pane h2,
.ashby-job-posting-right-pane h3,
.ashby-job-posting-right-pane h4 {
    font-family: var(--linroFontMono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--linroMuted);
    margin-top: 34px;
    margin-bottom: 10px;
}

.ashby-job-posting-right-pane li::marker {
    color: var(--colorPrimary900);
}

/* Overview / Application tabs. The underline was still Ashby blue in v1. */
.ashby-job-posting-right-pane-tab-slider {
    font-family: var(--linroFontMono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--colorPrimary900) !important;
    /* On mobile Ashby makes this sticky. The strip earlier in the file
       forced its background transparent, so page content scrolls visibly
       through it. An opaque background stops that regardless of whether
       position is sticky or static. z-index keeps it on top of content. */
    background: var(--linroBase) !important;
    z-index: 10;
}

/* The tabs are anchors inside the right pane, so the link rule above gives
   them an underline on top of the slider's indicator. The link rule is the
   more specific selector, so this needs !important to win. */
.ashby-job-posting-right-pane-application-tab,
.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab a,
.ashby-job-posting-right-pane-overview-tab a,
a.ashby-job-posting-right-pane-application-tab,
a.ashby-job-posting-right-pane-overview-tab {
    color: var(--linroMuted);
    text-decoration: none !important;
}

.ashby-job-posting-right-pane-application-tab[data-state="active"],
.ashby-job-posting-right-pane-overview-tab[data-state="active"] {
    color: var(--linroEggshell);
}

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

.ashby-application-form-container {
    background-color: var(--linroSurface) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 22px;
    color: var(--linroEggshell);
}

.ashby-application-form-section-container {
    border-top: 1px solid var(--linroLine) !important;
    padding-top: 20px;
    margin-top: 24px;
}

.ashby-application-form-section-container:first-of-type {
    border-top: none !important;
    padding-top: 0;
    margin-top: 0;
}

.ashby-application-form-section-header {
    margin-bottom: 16px;
}

.ashby-application-form-section-header-title {
    font-family: var(--linroFontMono);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--linroMuted);
}

.ashby-application-form-section-header-description {
    color: var(--linroMuted);
    font-size: 13px;
    line-height: 1.6;
}

.ashby-application-form-field-entry {
    margin-bottom: 18px;
}

.ashby-application-form-question-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--linroEggshell);
    margin-bottom: 6px;
}

.ashby-application-form-question-description {
    color: var(--linroMuted);
    font-size: 12px;
    line-height: 1.55;
    margin-bottom: 8px;
}

/* Ashby exposes no class on the inputs themselves, so these are targeted as
   descendants. Inputs are not covered by the strip above, so they are set
   explicitly here. */
.ashby-application-form-field-entry input,
.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry select,
.ashby-survey-form-container input,
.ashby-survey-form-container textarea,
.ashby-survey-form-container select {
    background-color: var(--linroBase) !important;
    color: var(--linroEggshell) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusControl);
    font-family: inherit;
    font-size: 14px;
    padding: 9px 11px;
    transition: border-color 120ms linear, box-shadow 120ms linear;
}

.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry textarea::placeholder {
    color: var(--linroMuted);
}

.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry select:hover {
    border-color: var(--linroMuted) !important;
}

.ashby-application-form-field-entry input:focus,
.ashby-application-form-field-entry textarea:focus,
.ashby-application-form-field-entry select:focus {
    outline: none;
    border-color: var(--colorPrimary900) !important;
    box-shadow: 0 0 0 2px rgba(233, 104, 46, 0.22);
}

/* Chrome paints autofilled inputs light blue and ignores background-color.
   The inset shadow is the only way to override it. */
.ashby-application-form-field-entry input:-webkit-autofill,
.ashby-application-form-field-entry input:-webkit-autofill:hover,
.ashby-application-form-field-entry input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--linroEggshell);
    -webkit-box-shadow: 0 0 0 1000px var(--linroBase) inset;
    caret-color: var(--linroEggshell);
}

.ashby-application-form-texting-consent-description {
    color: var(--linroMuted);
    font-size: 11px;
    line-height: 1.5;
}

.ashby-application-form-submit-button {
    font-family: var(--linroFontMono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background-color: var(--colorPrimary900) !important;
    color: var(--linroBase) !important;
    border: 1px solid var(--colorPrimary900) !important;
    border-radius: var(--borderRadiusButton);
    padding: 11px 22px;
    transition: background-color 120ms linear, border-color 120ms linear;
}

.ashby-application-form-submit-button:hover {
    background-color: var(--colorPrimary600) !important;
    border-color: var(--colorPrimary600) !important;
}

.ashby-application-form-submit-button:disabled {
    background-color: var(--linroLine) !important;
    border-color: var(--linroLine) !important;
    color: var(--linroMuted) !important;
}

.ashby-application-form-success-container {
    background-color: var(--linroSurface) !important;
    border: 1px solid var(--linroLine) !important;
    border-left: 3px solid var(--linroGreen) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 16px 18px;
}

.ashby-application-form-failure-container {
    background-color: var(--linroSurface) !important;
    border: 1px solid var(--linroLine) !important;
    border-left: 3px solid var(--linroAlert) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 16px 18px;
}

.ashby-application-form-blocked-application-container {
    background-color: var(--linroSurface) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 16px 18px;
    color: var(--linroMuted);
}

/* ============================================================================
   RESUME AUTOFILL
   ============================================================================ */

.ashby-application-form-autofill-pane {
    margin-bottom: 22px;
}

.ashby-application-form-autofill-input-root {
    background-color: var(--linroBase) !important;
    border: 1px dashed var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer);
    padding: 20px;
    transition: border-color 120ms linear, background-color 120ms linear;
}

.ashby-application-form-autofill-input-root[data-state="drag"] {
    border-color: var(--colorPrimary600) !important;
    background-color: rgba(233, 104, 46, 0.06) !important;
}

.ashby-application-form-autofill-input-root[data-state="pending"] {
    border-style: solid !important;
}

.ashby-application-form-autofill-input-title {
    font-family: var(--linroFontMono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--linroEggshell);
}

.ashby-application-form-autofill-input-description {
    color: var(--linroMuted);
    font-size: 12px;
    line-height: 1.55;
}

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

.ashby-application-form-autofill-input-drag-layer,
.ashby-application-form-autofill-input-pending-layer {
    background-color: rgba(11, 12, 11, 0.9) !important;
}

/* Note: the comment above this selector was unterminated in the original
   file, which silently commented out both it and the root selector below. */
.ashby-application-form-autofill-input-pending-layer {
    color: var(--linroMuted);
}

.ashby-application-form-autofill-input-form-alert {
    font-family: var(--linroFontMono);
    font-size: 11px;
    letter-spacing: 0.04em;
}

.ashby-application-form-autofill-input-form-alert[data-highlight="positive"] {
    color: var(--linroGreen);
}

.ashby-application-form-autofill-input-form-alert[data-highlight="negative"] {
    color: var(--linroAlert);
}

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

.ashby-survey-form-container {
    border-top: 1px solid var(--linroLine) !important;
    padding-top: 20px;
    margin-top: 24px;
    color: var(--linroEggshell);
}

/* ============================================================================
   MOTION
   ============================================================================ */

@media (max-width: 768px) {
    /* On narrow viewports Ashby stacks the two-column layout. The left pane
       (metadata rail) comes first, then the right pane (content + tabs).
       These rules keep both readable on mobile. */

    .ashby-job-posting-left-pane {
        padding-right: 0 !important;
        padding-bottom: 24px;
        border-bottom: 1px solid var(--linroLine) !important;
        margin-bottom: 24px;
    }

    /* Metadata labels: a touch smaller on mobile is fine, they already
       work at 11px on desktop. */
    .ashby-job-posting-left-pane dt,
    .ashby-job-posting-left-pane th {
        font-size: 10px;
    }

    /* Tab slider: padding only. Do not touch position or top — the sticky
       behaviour worked before our CSS, and every attempt to override it
       broke it further. */
    .ashby-job-posting-right-pane-tab-slider {
        padding: 0 4px !important;
    }

    .ashby-job-posting-right-pane-application-tab,
    .ashby-job-posting-right-pane-overview-tab {
        font-size: 13px;
        padding: 10px 12px !important;
    }

    /* Application form: tighten the side padding so it does not feel
       cramped against the viewport edge. */
    .ashby-application-form-container {
        padding: 16px !important;
    }

    .ashby-application-form-field-entry input,
    .ashby-application-form-field-entry textarea,
    .ashby-application-form-field-entry select {
        font-size: 16px !important; /* prevents iOS zoom on focus */
    }

    /* Submit button: full width on mobile reads better than a small pill. */
    .ashby-application-form-submit-button {
        width: 100% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    [class^="ashby-"],
    [class*=" ashby-"] {
        transition: none !important;
    }
}

/* ============================================================================
   OVERRIDES
   These come last on purpose: later rules win, so this section corrects the
   sections above rather than duplicating them.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. THE LOGO BAR

   The bar is position: fixed from Ashby. Our strip made its background
   transparent, so it overlays content while the page scrolls. The fix is
   an opaque background — not a position change, which is what broke the
   tab sticky behaviour in all previous attempts.

   Position is intentionally left untouched.
   ---------------------------------------------------------------------------- */

/* Logo bar background rules removed in v21: without the div strip,
   Ashby paints its own logo bar correctly and we don't need to touch it. */

/* ----------------------------------------------------------------------------
   2. FORM CONTROLS

   The v2 strip covered structural elements only, so inputs, selects and
   buttons kept their white user-agent backgrounds. That is the white filter
   boxes on the list page.
   ---------------------------------------------------------------------------- */

input:not([role="dialog"] *),
textarea:not([role="dialog"] *),
button:not([role="dialog"] *) {
    background-color: var(--linroBase) !important;
    color: var(--linroEggshell) !important;
    border-color: var(--linroLine) !important;
    font-family: inherit;
}

/* Dropdowns are a separate case. A native select is drawn by the OS, and
   the browser ignores background-color on it until appearance is cleared.
   That is why the !important background above did nothing to them.
   color-scheme also makes the opened option list render dark. */
select,
.ashby-job-board-filter,
.ashby-job-board-filter select,
[role="combobox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    color-scheme: dark !important;
    background: var(--linroBase) !important;
    color: var(--linroEggshell) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusControl) !important;
    font-family: inherit;
    padding: 10px 34px 10px 12px !important;
}

/* The class rules further up use !important on a class selector, which beats
   the element selector above, so the submit button and Apply CTA keep their
   orange. */

/* The filter class may sit on a wrapper rather than the control itself,
   so this covers the subtree. */
.ashby-job-board-filter,
.ashby-job-board-filter * {
    background: var(--linroBase) !important;
    color: var(--linroEggshell) !important;
}

.ashby-job-board-filter:hover {
    border-color: var(--linroMuted) !important;
}

.ashby-job-board-filter ::placeholder,
.ashby-job-board-filter [class*="placeholder" i] {
    color: var(--linroMuted) !important;
}

/* ----------------------------------------------------------------------------
   3. OPEN DROPDOWN MENUS

   These render in a portal attached to the body, outside the board container,
   so none of the .ashby- rules reach them. Without this they open white.
   ---------------------------------------------------------------------------- */

[role="listbox"],
[role="menu"],
[class*="dropdown" i],
[class*="popover" i],
[class*="menu" i]:not([class*="ashby-"]) {
    background-color: var(--linroSurface) !important;
    color: var(--linroEggshell) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer);
}

[role="option"],
[role="menuitem"] {
    background-color: transparent !important;
    color: var(--linroEggshell) !important;
}

[role="option"]:hover,
[role="menuitem"]:hover,
[role="option"][aria-selected="true"] {
    background-color: var(--linroSurfaceHover) !important;
}

/* ----------------------------------------------------------------------------
   4. THE APPLY CTA

   This is not the same element as the application form submit button, so the
   v2 rule missed it and it inherited white text. Roughly 2:1 on that orange.
   Targeted as the trailing element of the overview tab so it does not catch
   inline links in the job description. Adjust if it misses.
   ---------------------------------------------------------------------------- */

.ashby-job-posting-right-pane-overview-tab > a:last-child,
.ashby-job-posting-right-pane-overview-tab > button:last-child,
.ashby-job-posting-right-pane-overview-tab > div:last-child > a,
.ashby-job-posting-right-pane-overview-tab > div:last-child > button {
    background-color: var(--colorPrimary900) !important;
    color: var(--linroBase) !important;
    font-family: var(--linroFontMono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none !important;
    border: 1px solid var(--colorPrimary900) !important;
    border-radius: var(--borderRadiusButton);
    transition: background-color 120ms linear, border-color 120ms linear;
}

.ashby-job-posting-right-pane-overview-tab > a:last-child:hover,
.ashby-job-posting-right-pane-overview-tab > button:last-child:hover,
.ashby-job-posting-right-pane-overview-tab > div:last-child > a:hover,
.ashby-job-posting-right-pane-overview-tab > div:last-child > button:hover {
    background-color: var(--colorPrimary600) !important;
    border-color: var(--colorPrimary600) !important;
}

/* ============================================================================
   COOKIE CONSENT MODAL

   The strip further up flattens this widget's backgrounds, which left the
   consent toggles with no visible on/off state. That is a functional problem,
   not a cosmetic one, so it is repaired rather than left alone.
   ============================================================================ */

/* Confirmed via devtools: role="dialog" sits on the full-screen overlay
   itself (a class like _overlay_<hash>), not on the visible card. The card
   is a child div, _modal_<hash>, wrapping header/body/footer sections. The
   earlier attempt put the border on the overlay, which runs off the edge of
   the viewport and is invisible for that reason.

   The <hash> suffix is a build artifact, so this matches the stable prefix
   rather than the full class name, same approach as the Yes/No fix above.
   Scoped to a direct child of the dialog so "_modal_" cannot collide with
   an unrelated component elsewhere that happens to share the word. */

[role="dialog"] {
    /* This is the dimming backdrop. It is a plain div that happens to carry
       role="dialog", so the strip earlier in this file removed its
       background along with every other div's. Restoring it here is what
       actually fixes the page bleeding through around the edges. */
    background: rgba(0, 0, 0, 0.7) !important;
}

[role="dialog"] > [class*="_modal_"] {
    background: var(--linroBase) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusContainer) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6) !important;
}

[role="dialog"] h1,
[role="dialog"] h2,
[role="dialog"] h3,
[role="dialog"] h4,
[role="dialog"] p,
[role="dialog"] span,
[role="dialog"] label,
[role="dialog"] li {
    color: var(--linroEggshell) !important;
}

/* Toggle switches. Covers the ARIA switch pattern and a native checkbox,
   since the widget could be built either way. */
[role="switch"] {
    background: var(--linroLine) !important;
    border: 1px solid var(--linroMuted) !important;
    border-radius: 999px !important;
    opacity: 1 !important;
}

[role="switch"][aria-checked="true"] {
    background: var(--colorPrimary900) !important;
    border-color: var(--colorPrimary900) !important;
}

[role="dialog"] input[type="checkbox"],
[role="dialog"] input[type="radio"] {
    /* No -webkit-appearance here: Ashby's validator accepts the value none
       but rejects auto, and unprefixed appearance covers every current
       browser anyway. */
    appearance: auto !important;
    background: none !important;
    accent-color: var(--colorPrimary900) !important;
}

/* Consent buttons. Equal weight on purpose: accept and reject should not be
   visually unbalanced. */
[role="dialog"] button {
    background: transparent !important;
    color: var(--linroEggshell) !important;
    border: 1px solid var(--linroLine) !important;
    border-radius: var(--borderRadiusButton) !important;
}

[role="dialog"] button:hover {
    border-color: var(--colorPrimary900) !important;
    color: var(--colorPrimary600) !important;
}

/* The "Always Active" label, brought in line with the Linro green. */
[role="dialog"] [class*="active" i] {
    color: var(--linroGreen) !important;
}

/* ============================================================================
   SEGMENTED / SINGLE-SELECT QUESTIONS (e.g. the Yes/No control)

   Confirmed via a CSS attr() probe: this control carries none of
   data-state, aria-checked, aria-pressed, or role. It is a plain component
   styled with CSS-module classes, and Ashby marks the selected button by
   adding an extra class alongside the others: _container_<hash>,
   _option_<hash>, and _active_<hash> only on the selected one.

   The <hash> segment is a build artifact and may change on Ashby's next
   deploy, so this matches on the stable substrings either side of it rather
   than the full class name. Scoped to application form questions so it
   cannot collide with an unrelated component elsewhere that happens to also
   use the word "active" in a class.
   ============================================================================ */

.ashby-application-form-field-entry [class*="_option_"] {
    background: var(--linroBase) !important;
    color: var(--linroEggshell) !important;
    border-color: var(--linroLine) !important;
    transition: background-color 120ms linear, border-color 120ms linear;
}

.ashby-application-form-field-entry [class*="_option_"]:hover {
    border-color: var(--linroMuted) !important;
}

.ashby-application-form-field-entry [class*="_option_"][class*="_active_"] {
    background: var(--colorPrimary900) !important;
    color: var(--linroBase) !important;
    border-color: var(--colorPrimary900) !important;
}