/* 120ft — Ashby job board. Generated by build.sh; edit src/, not this.
 *
 * Contains no custom properties of its own: Ashby discards them. The eight
 * variables below are the only ones it honours. Every other token has been
 * resolved to a literal at build time.
 *
 * Class names are tripled to raise specificity to (0,3,0). Ashby styles the
 * board with single-class rules and we do not control which stylesheet loads
 * last, so a tie would be decided against us. Authored once in src/. */

:root {
  --colorPrimary900: black;
  --colorPrimary600: #151515;
  --colorAppBackground: #ebebe0;
  --fontFamily: "Geist", system-ui, sans-serif;
  --widthMaxJobBoard: 52rem;
  --borderRadiusContainer: 0px;
  --borderRadiusControl: 0px;
  --borderRadiusButton: 0px;
}

/* 120ft — Ashby job board: font loading
 *
 * NO @import. Ashby's uploaded-CSS pipeline is not a plain stylesheet include —
 * it discards custom-property declarations it does not recognise (see build.sh),
 * and @import is fragile besides: it is only legal before any other rule, so a
 * single line prepended upstream silently kills it. @font-face has neither
 * constraint, so every face is declared directly.
 *
 * Ashby's board sends a Content-Security-Policy with:
 *   style-src 'self' https://cdn.ashbyprd.com https: 'unsafe-inline'
 *   font-src  https://cdn.ashbyprd.com https:
 *
 * The bare `https:` in both means any HTTPS origin is permitted. The policy also
 * sets block-all-mixed-content — every URL here must be https, never http.
 *
 * All three origins were checked with an Origin: https://jobs.ashbyhq.com header
 * and return 200 with access-control-allow-origin: *. @font-face is a
 * CORS-restricted fetch; without that header a font fails silently to fallback.
 *
 * Geist faces are the latin and latin-ext subsets lifted from Google's own css2
 * response. The gstatic URLs are version-pinned (v5, v6) and immutable. If Geist
 * ever stops rendering, re-fetch:
 *   https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap
 */

/* --- Display: Barnum Condensed Book, hosted on the Webflow CDN ---------- *
 *
 * Verified against the file itself, not the filename:
 *   name table family  "Barnum Condensed Book"   (PostScript BarnumCondensed-Book)
 *   usWeightClass      400, italicAngle 0, not a variable font
 *
 * This is a font binary, not a stylesheet — the board does not depend on any CSS
 * from Webflow.
 *
 * There is exactly ONE weight. Do not let anything ask for bold: the browser will
 * synthesise it, and faux-bold on a condensed face smears the counters. Every
 * rule that uses this family must also pin font-weight: 400.
 */
@font-face {
  font-family: "Barnum Condensed Book";
  src: url("https://cdn.prod.website-files.com/6a4b73c7d2b31981e425a995/6a4e093d59adb125eca6c1a1_Barnum-Condensed-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Body: Geist ------------------------------------------------------- */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwSGFWNOITddY4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geist/v5/gyByhwUxId8gMEwcGFWNOITd.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Mono: Geist Mono -------------------------------------------------- */

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrkdmhHkjkotbA.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/geistmono/v6/or3nQ6H-1_WfwkMZI_qYFrcdmhHkjko.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 120ft — brand tokens
 *
 * Two layers, mirroring the Lumos/Webflow setup:
 *
 *   1. Primitives (--swatch--*) — the raw palette. Transcribed from the Webflow
 *      variable collection so the names match one-for-one. Do not consume these
 *      directly in a component; they exist to be mapped in layer 2.
 *   2. Semantic (--_theme---*) — what components actually reference. Swapping a
 *      theme reassigns these, and everything downstream follows.
 *
 * Webflow emits a variable `light-100` in group `swatch` as `--swatch--light-100`,
 * which is why the names below look the way they do. Keeping them identical means
 * this file and the Webflow build share one vocabulary.
 *
 * The palette is subject to change — it is a snapshot of the Webflow build, not
 * an independent source of truth. If they diverge, Webflow wins.
 */

/* --- 1. Primitives ---------------------------------------------------- */



/* --- 2. Semantic (light theme) ---------------------------------------- */

/* PROPOSED mapping. The primitives above are transcribed and reliable; these
 * role assignments are my inference and have not been checked against how the
 * Webflow themes are actually configured. Confirm before shipping. */



/* --- 3. Type, spacing, layout ----------------------------------------- */

/* Spacing and sizes are NOT from the Webflow build — the palette transcription
 * covered colour only. Lumos names its own spacing scale --_spacing---space--1
 * through --8; align with that once the real values are to hand.
 *
 * The font stacks are real. Loading lives in each sub-project, since the route
 * differs: the Ashby board @imports Google Fonts, Webflow loads them itself. */

/* 120ft — Ashby job board
 *
 * Selectors and :root variable names below are taken from Ashby's own example
 * stylesheet, kept at reference/ashby-example.css. Do not invent selectors —
 * Ashby's example file is the published list, and anything not in it is a guess.
 *
 * Ashby serves the board (hosted or in an iframe for the embed route), so this
 * file cannot @import ../../shared/tokens.css. The build concatenates the two.
 * Run ./build.sh and ship dist/job-board.css.
 *
 * WHAT THE DESIGN REFERENCE ASKS FOR THAT CSS CANNOT DELIVER
 * The sketch shows, per posting: category tag pills, a description excerpt, a
 * date, and an "APPLY →" link. None of those elements exist in Ashby's DOM — the
 * brief exposes only a title and a details line. The sketch also draws the
 * filters as a pill row; Ashby renders native <select> boxes. CSS cannot invent
 * content or rewrite markup. Those parts need the custom-board route (Ashby's
 * job posting API). Everything below is the subset the hosted board can express.
 */

/* --- Ashby's supported variable API ----------------------------------- */

/* Prefer these over overriding classes. They are the surface Ashby actually
 * commits to; class names are not versioned and can shift under us. */



/* --- Board heading ---------------------------------------------------- */

/* Barnum is reserved for the two large headings: the board heading and the
 * posting heading.
 *
 * font-weight: 400 is load-bearing, not decoration. Barnum ships one weight, and
 * these are heading elements which default to bold — without this the browser
 * synthesises a fake bold and the condensed counters fill in. */
.ashby-job-board-heading.ashby-job-board-heading.ashby-job-board-heading {
  font-family: "Barnum Condensed Book", "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.15;
  color: black;
  margin-block-end: 3rem;
}

.ashby-job-board-heading-count.ashby-job-board-heading-count.ashby-job-board-heading-count {
  font-weight: 400;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 1.25rem;
  color: rgba(0, 0, 0, 0.6);
}

/* --- Filters ---------------------------------------------------------- */

/* Confirmed from the live DOM: this IS a native <select>. Ashby wraps it in a
 * ._filterContainer_ div and paints its OWN chevron as a sibling
 * ._filterIconContainer_ overlay.
 *
 * So: never draw a chevron here. An earlier version did, and the board showed two
 * — ours stamped in the top-left corner because its background-position had been
 * invalidated. Ashby's arrow stays; we just pad the text clear of it.
 *
 * The hover state does NOT invert to a filled black chip. Ashby's chevron is a
 * sibling we do not style, and it would disappear against a black fill. */
.ashby-job-board-filter.ashby-job-board-filter.ashby-job-board-filter {
  font-weight: 400;
  appearance: none;
  border: 1px solid black;
  border-radius: 999px;
  background-color: transparent;
  color: black;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  padding-block: 0.5rem;
  /* Right padding clears Ashby's own chevron overlay. */
  padding-inline: 1rem 2rem;
  cursor: pointer;
  transition: background-color 150ms, border-color 150ms;
}

.ashby-job-board-filter.ashby-job-board-filter.ashby-job-board-filter:hover {
  background-color: #d4d3c1;
}

.ashby-job-board-filter.ashby-job-board-filter.ashby-job-board-filter:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
}

.ashby-job-board-filters-label.ashby-job-board-filters-label.ashby-job-board-filters-label,
.ashby-job-board-reset-filters-label.ashby-job-board-reset-filters-label.ashby-job-board-reset-filters-label {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

/* --- Departments and teams -------------------------------------------- */

/* Live DOM: <h2 class="ashby-department-heading">
 *             <span class="ashby-department-heading-level">Robotics</span>
 *           </h2>
 * The visible text lives in the span, so the h2 carries only the spacing. Setting
 * a font-size on the h2 alone would do nothing you can see. */
.ashby-department-heading.ashby-department-heading.ashby-department-heading {
  margin-block: 3rem 1rem;
}

/* Geist, not Barnum. At this size the condensed display face loses its character
 * and just reads as an odd serif. */
.ashby-department-heading-level.ashby-department-heading-level.ashby-department-heading-level {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
  color: black;
}

/* --- Posting briefs --------------------------------------------------- */

/* Live DOM:
 *   <div class="ashby-job-posting-brief-list">
 *     <a href="..."> <- unpublished wrapper class; the whole row is the link
 *       <div class="ashby-job-posting-brief">
 *         <h3 class="ashby-job-posting-brief-title">
 *         <div class="ashby-job-posting-brief-details"><p>…</p></div>
 *
 * Flat on the pebble ground — no cards, no shadows. */
.ashby-job-posting-brief.ashby-job-posting-brief.ashby-job-posting-brief {
  padding-block: 2rem;
  border-block-end: 1px solid rgba(0, 0, 0, 0.2);
  background-color: transparent;
}

/* NOT `.ashby-job-posting-brief:last-child`. Each brief is the only child of its
 * own <a>, so that selector matches every row and would erase all the dividers.
 * The anchor is the repeated element, so the anchor is what :last-child applies
 * to. Matched by tag under a published class rather than by Ashby's hashed
 * wrapper class, which is not a stable contract. */
.ashby-job-posting-brief-list.ashby-job-posting-brief-list.ashby-job-posting-brief-list > a:last-child .ashby-job-posting-brief.ashby-job-posting-brief.ashby-job-posting-brief {
  border-block-end: none;
}

/* The <a> wrapper supplies the link semantics, so kill its underline and let the
 * title inherit a colour we control. */
.ashby-job-posting-brief-list.ashby-job-posting-brief-list.ashby-job-posting-brief-list > a {
  text-decoration: none;
  color: inherit;
  display: block;
}

.ashby-job-posting-brief-list.ashby-job-posting-brief-list.ashby-job-posting-brief-list > a:focus-visible {
  outline: 2px solid black;
  outline-offset: 4px;
}

/* An <h3>. Block-level already; no `display` override needed. */
.ashby-job-posting-brief-title.ashby-job-posting-brief-title.ashby-job-posting-brief-title {
  font-family: "Barnum Condensed Book", "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.15;
  color: black;
  margin-block: 0 0.75rem;
}

.ashby-job-posting-brief-list.ashby-job-posting-brief-list.ashby-job-posting-brief-list > a:hover .ashby-job-posting-brief-title.ashby-job-posting-brief-title.ashby-job-posting-brief-title {
  color: rgba(0, 0, 0, 0.65);
}

/* Location, team, employment type. The reference sets this row in mono with wide
 * tracking, which is the one place the metadata earns its own voice.
 *
 * The text sits in a <p> inside this div, and the <p> carries Ashby's margins —
 * styling only the div would leave the type unchanged and the spacing theirs. */
.ashby-job-posting-brief-details.ashby-job-posting-brief-details.ashby-job-posting-brief-details,
.ashby-job-posting-brief-details.ashby-job-posting-brief-details.ashby-job-posting-brief-details p {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
  color: rgba(0, 0, 0, 0.6);
}

.ashby-job-posting-brief-details.ashby-job-posting-brief-details.ashby-job-posting-brief-details p {
  margin: 0;
}

/* --- Individual posting page ------------------------------------------ */

.ashby-job-posting-heading.ashby-job-posting-heading.ashby-job-posting-heading {
  font-family: "Barnum Condensed Book", "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1.15;
  color: black;
}

/* Left pane: Location / Employment Type / Location Type / Department.
 * The h2 labels and p values carry no published class, so they are matched by
 * tag under the pane. Ashby gives the pane a white card; flatten it. */
.ashby-job-posting-left-pane.ashby-job-posting-left-pane.ashby-job-posting-left-pane {
  background-color: transparent;
  box-shadow: none;
}

.ashby-job-posting-left-pane.ashby-job-posting-left-pane.ashby-job-posting-left-pane h2 {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

.ashby-job-posting-left-pane.ashby-job-posting-left-pane.ashby-job-posting-left-pane p {
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  color: black;
}

/* Right pane: Overview / Application tabs. Only the inner spans are published. */
.ashby-job-posting-right-pane-overview-tab.ashby-job-posting-right-pane-overview-tab.ashby-job-posting-right-pane-overview-tab,
.ashby-job-posting-right-pane-application-tab.ashby-job-posting-right-pane-application-tab.ashby-job-posting-right-pane-application-tab {
  font-weight: 400;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.6);
}

/* The underline that tracks the active tab. Ashby paints it with the primary
 * colour; black reads better against the pebble ground. */
.ashby-job-posting-right-pane-tab-slider.ashby-job-posting-right-pane-tab-slider.ashby-job-posting-right-pane-tab-slider {
  background-color: black;
}

/* Overview panel. Ashby renders it as a white card; flatten it. Matched on the
 * ARIA role rather than Ashby's hashed class — role is a semantic contract. */
.ashby-job-posting-right-pane.ashby-job-posting-right-pane.ashby-job-posting-right-pane [role="tabpanel"] {
  background-color: transparent;
  box-shadow: none;
}

/* "Apply for this Job". No published class, so reached by tag under the pane.
 *
 * Scoped through the <a> wrapper deliberately. A bare
 * `.ashby-job-posting-right-pane button` also matches the "Upload file" and
 * "Upload File" secondary buttons in the autofill pane and resume field, which
 * would turn them into orange primaries. Only Apply is wrapped in an anchor. */
.ashby-job-posting-right-pane.ashby-job-posting-right-pane.ashby-job-posting-right-pane [role="tabpanel"] a button {
  padding: 0.75rem 1.5rem;
  background-color: #f67828;
  color: black;
  border: 1px solid #f67828;
  border-radius: var(--borderRadiusButton);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms;
}

.ashby-job-posting-right-pane.ashby-job-posting-right-pane.ashby-job-posting-right-pane [role="tabpanel"] a button:hover {
  background-color: #c56020;
  border-color: #c56020;
}

.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button {
  font-weight: 400;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  color: black;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: var(--borderRadiusButton);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button.ashby-job-board-back-to-all-jobs-button:hover {
  border-color: black;
  color: rgba(0, 0, 0, 0.65);
}

/* --- Application form ------------------------------------------------- */

/* Sections are separated by a generous band; fields breathe inside them. The
 * reference has no form, so this extends its language rather than copies it:
 * mono uppercase labels, square white fields on the pebble ground, hairline
 * borders, black focus ring. */

/* Ashby renders this as a white card. Flatten it onto the pebble ground. */
.ashby-application-form-container.ashby-application-form-container.ashby-application-form-container {
  margin-block-start: 3rem;
  background-color: transparent;
  box-shadow: none;
}

/* Sections separate from each other with the bottom margin alone. A top margin
 * here would stack with it and double every inter-section gap. */
.ashby-application-form-section-container.ashby-application-form-section-container.ashby-application-form-section-container {
  margin-block-end: 4rem;
}

.ashby-application-form-section-header.ashby-application-form-section-header.ashby-application-form-section-header {
  margin-block-end: 2rem;
  padding-block-end: 1rem;
  border-block-end: 1px solid rgba(0, 0, 0, 0.2);
}

.ashby-application-form-section-header-title.ashby-application-form-section-header-title.ashby-application-form-section-header-title {
  font-family: "Geist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.15;
}

.ashby-application-form-section-header-description.ashby-application-form-section-header-description.ashby-application-form-section-header-description {
  color: rgba(0, 0, 0, 0.6);
  margin-block-start: 0.5rem;
}

/* Label. Mono and uppercase so it reads as an annotation, not as body copy —
 * the same voice as the posting metadata. */
.ashby-application-form-question-title.ashby-application-form-question-title.ashby-application-form-question-title {
  font-weight: 400;
  display: block;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: black;
  margin-block-end: 0.5rem;
}

.ashby-application-form-question-description.ashby-application-form-question-description.ashby-application-form-question-description {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  margin-block-end: 0.75rem;
}

.ashby-application-form-texting-consent-description.ashby-application-form-texting-consent-description.ashby-application-form-texting-consent-description {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  margin-block-start: 0.5rem;
}

/* The gap between fields. This is the "more space" — one rule, not a scattering
 * of margins on individual elements. */
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry {
  margin-block-end: 2rem;
}

/* Ashby publishes no class for the input elements themselves, so these are
 * scoped by tag inside the published field wrapper. That keeps the rule off the
 * filter <select>s at the top of the board, which have their own pill styling.
 *
 * If Ashby ever changes the wrapper's markup this stops applying — it is the
 * most fragile rule in the file. */
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry input,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry textarea,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem;
  background-color: #f8f8f4;
  color: black;
  border: 1px solid rgba(0, 0, 0, 0.7);
  border-radius: 8px;
  /* 1rem minimum: anything smaller triggers iOS auto-zoom on focus. */
  font-family: "Geist", system-ui, sans-serif;
  font-size: 1rem;
  transition: border-color 150ms;
}

.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry textarea {
  min-height: 8rem;
  resize: vertical;
}

.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry input::placeholder,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry textarea::placeholder {
  color: rgba(0, 0, 0, 0.6);
}

/* Same native-caret problem as the filter chips: the browser's arrow sits hard
 * against the right border and its gap is not styleable. Redraw it as a
 * background image so the gap is ours to set, and pad the text clear of it. */
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry select {
  appearance: none;
  padding-inline-end: 2rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.25'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 10px 7px;
  cursor: pointer;
}

.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry input:hover,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry textarea:hover,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry select:hover {
  border-color: black;
}

/* Black ring, not orange. brand-500 against white is 2.75:1 and misses the 3:1
 * that WCAG requires of a non-text UI indicator. */
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry input:focus-visible,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry textarea:focus-visible,
.ashby-application-form-field-entry.ashby-application-form-field-entry.ashby-application-form-field-entry select:focus-visible {
  outline: 2px solid black;
  outline-offset: 2px;
  border-color: black;
}

/* Ashby's default is white text on the primary colour. Our palette aliases
 * brand-text to dark-900, i.e. black on orange — 7.63:1, versus 2.75:1 for
 * white on the same orange. Override explicitly rather than relying on whatever
 * Ashby derives from --colorPrimary*. */
.ashby-application-form-submit-button.ashby-application-form-submit-button.ashby-application-form-submit-button {
  font-weight: 400;
  padding: 0.75rem 1.5rem;
  background-color: #f67828;
  color: black;
  border: 1px solid #f67828;
  border-radius: var(--borderRadiusButton);
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms, border-color 200ms;
}

/* The label and paper-plane icon are a <span> and an <svg> inside the button.
 * The svg paints with currentColor; the span needs telling. */
.ashby-application-form-submit-button.ashby-application-form-submit-button.ashby-application-form-submit-button span {
  color: inherit;
}

.ashby-application-form-submit-button.ashby-application-form-submit-button.ashby-application-form-submit-button:hover {
  background-color: #c56020;
  border-color: #c56020;
}

/* Resume autofill. Ashby exposes [data-state] on the root ('pending', 'drag',
 * 'default') and [data-highlight] on the alert ('negative', 'positive'). */
.ashby-application-form-autofill-pane.ashby-application-form-autofill-pane.ashby-application-form-autofill-pane {
  margin-block-end: 4rem;
  background-color: transparent;
  box-shadow: none;
}

/* The sparkles icon. It is an <svg> whose <path> has no fill attribute, so it
 * paints with currentColor — setting `color` is what tints it, not `fill`. */
.ashby-application-form-autofill-input-icon.ashby-application-form-autofill-input-icon.ashby-application-form-autofill-input-icon {
  color: black;
}

/* The root carries its own bottom margin rather than leaning on the pane, so a
 * root that is not wrapped in one still clears whatever follows. Whether Ashby
 * ever renders it unwrapped is unverified — we are locked out of the real DOM —
 * so this is defensive. Inside a pane the two margins collapse and the pane's
 * larger value wins, which is why this does not double the gap. */
.ashby-application-form-autofill-input-root.ashby-application-form-autofill-input-root.ashby-application-form-autofill-input-root {
  padding: 1.5rem;
  margin-block-end: 4rem;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: var(--borderRadiusContainer);
  background-color: transparent;
  transition: border-color 150ms, background-color 150ms;
}

.ashby-application-form-autofill-input-root.ashby-application-form-autofill-input-root.ashby-application-form-autofill-input-root[data-state="drag"] {
  border-color: black;
  background-color: #d4d3c1;
}

.ashby-application-form-autofill-input-title.ashby-application-form-autofill-input-title.ashby-application-form-autofill-input-title {
  font-weight: 400;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-block-end: 0.5rem;
}

.ashby-application-form-autofill-input-description.ashby-application-form-autofill-input-description.ashby-application-form-autofill-input-description {
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
}

/* --- Outcome states --------------------------------------------------- */

.ashby-application-form-success-container.ashby-application-form-success-container.ashby-application-form-success-container {
  border-inline-start: 2px solid #5f8557;
  padding-inline-start: 1rem;
}

.ashby-application-form-failure-container.ashby-application-form-failure-container.ashby-application-form-failure-container,
.ashby-application-form-blocked-application-container.ashby-application-form-blocked-application-container.ashby-application-form-blocked-application-container {
  border-inline-start: 2px solid rgba(0, 0, 0, 0.2);
  padding-inline-start: 1rem;
}

/* --- Narrow screens --------------------------------------------------- */

/* Ashby permits at-rules in the uploaded file. */
@media (max-width: 40rem) {
  .ashby-job-board-heading.ashby-job-board-heading.ashby-job-board-heading {
    font-size: 2rem;
  }

  .ashby-job-posting-brief.ashby-job-posting-brief.ashby-job-posting-brief {
    padding-block: 1.5rem;
  }

  .ashby-job-posting-brief-title.ashby-job-posting-brief-title.ashby-job-posting-brief-title {
    font-size: 1.5rem;
  }

  .ashby-job-posting-brief-details.ashby-job-posting-brief-details.ashby-job-posting-brief-details {
    white-space: normal;
  }
}