/* ============================================================
   Runway — careers pages.

   Layout and page-specific rules for /careers/, each role page and
   /careers/received/, plus the careers-status markup that the
   application Function's HTML error page shares.

   Built on the design system, which every careers page links first:
     /assets/runway-brand/dist/runway.css        tokens
     /assets/runway-brand/brand/fonts/fonts.css  faces
     /assets/runway-brand/components.css         rw-* components
   Every visual value here is a var(--…) token. Plain pixel values are
   layout measures only (content widths, the nav height).

   The careers pages are served with a CSP of style-src 'self', so all
   styling lives in this file: no inline <style>, no style="".

   Errors: the palette has no error colour (DESIGN.md §6), so a problem is
   carried by words, a mono "Needs attention" capsule and heavier borders,
   all in the brand's Aqua (see Errors below). Nothing here
   introduces a colour outside the tokens.
   ============================================================ */

/* -------------------- Base -------------------- */

.careers-page,
.careers-page *,
.careers-page *::before,
.careers-page *::after { box-sizing: border-box; }

body.careers-page {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-sans);
  color: var(--color-text);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

.careers-page img { max-width: 100%; display: block; }
/* Zero-specificity class part, so a component's own ink (.rw-button--primary's
   white, for one) still wins over this reset. */
:where(.careers-page) a { color: inherit; }
.careers-page ::selection { background: var(--color-accent); color: var(--color-on-accent); }
.careers-page [hidden] { display: none !important; }

/* Runway Green (--color-text-brand, --color-primary) is 4.37:1 on white and
   4.05:1 on the muted surface, so as small text, or as the fill behind a
   button's white label, it misses AA. Point those roles at the press token,
   an existing brand value (6.07:1). Same workaround as privacy-policy.html;
   the fix belongs upstream — see ACCESSIBILITY-BACKLOG.md item 3. */
.careers-page .rw-eyebrow--brand,
.careers-page .rw-button--secondary,
.careers-page .rw-button--ghost { color: var(--color-primary-press); }
.careers-page .rw-button--secondary { border-color: var(--color-primary-press); }
.careers-page .rw-button--primary {
  background: var(--color-primary-press);
  border-color: var(--color-primary-press);
  color: var(--color-on-primary);
}

/* Focus. The brand ring (--shadow-focus-ring) is soft; on its own it is too
   faint to find on white, so a solid ring in the focus colour sits inside it. */
.careers-page :focus-visible {
  outline: var(--border-icon) solid var(--color-focus-ring);
  outline-offset: 2px;
  box-shadow: var(--shadow-focus-ring);
}
.careers-page .rw-button:focus-visible {
  outline: var(--border-icon) solid var(--color-focus-ring);
  outline-offset: 2px;
}
.careers-page .rw-button--accent:focus-visible {
  box-shadow: var(--shadow-chip-inset), var(--shadow-focus-ring);
}
/* Form controls already move their border to the focus colour. */
.careers-page .rw-form-field__control:focus-visible { outline: none; }

.careers-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Visible [Placeholder] marker on copy that must be replaced before launch. */
.careers-placeholder {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--ui-mint);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  margin-right: var(--space-1);
  vertical-align: 0.1em;
}

/* -------------------- Skip link -------------------- */

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 300;
  background: var(--color-surface);
  color: var(--color-text);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}
.skip-link:focus { left: var(--space-4); top: var(--space-2); }

/* -------------------- Nav --------------------
   Mirrors privacy-policy.html. The error page from /careers/apply carries
   only .site-nav > .nav-inner > a.nav-logo > img, so nothing below assumes
   the links or the toggle exist. */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--color-surface);
  border-bottom: var(--border-hairline) solid var(--color-border);
}

.nav-inner {
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--page-margin);
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.nav-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: 24px;
  padding: 2px 0;
  text-decoration: none;
  border-radius: var(--radius-sm);
}
/* 152px wide, matching the Jodi Phase 1 iteration of the main site
   (assets/main-site.css .logo on the jodi-phase-2 branch). */
.nav-logo img { display: block; width: 152px; height: auto; transform: translateY(2px); }

.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 24px;
  font-family: var(--font-sans);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm);
  transition: color var(--duration-base) var(--ease-standard);
}
.nav-links a:hover { color: var(--color-primary-press); }

.nav-links a[aria-current] {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-thickness: var(--border-icon);
  /* Ink, not Bright Green: the hero eyebrow's tick is the one accent in view,
     and an ink rule is a current-page cue with contrast of its own. */
  text-decoration-color: var(--color-text);
  text-underline-offset: 6px;
}

.nav-cta { flex: none; }
.nav-links .nav-cta { display: none; }
/* The in-menu CTA is also a .nav-links a; keep it a button. */
.careers-page .nav-links a.rw-button {
  font-size: var(--text-small);
  letter-spacing: var(--tracking-sans);
  text-transform: none;
  color: var(--color-primary-press);
  min-height: var(--control-sm);
}

.nav-toggle {
  display: none;
  flex: none;
  align-items: center;
  justify-content: center;
  width: calc(var(--control-sm) + var(--space-1));
  height: calc(var(--control-sm) + var(--space-1));
  padding: 0;
  background: none;
  color: var(--color-text);
  border: var(--border-hairline) solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 18px;
  height: var(--border-hairline);
  background: var(--color-text);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }

@media (max-width: 1240px) {
  .nav-links { gap: var(--space-2) var(--space-4); }
}

/* Below this width the links no longer fit on one row. */
@media (max-width: 1120px) {
  .nav-inner > .nav-cta { display: none; }
  .nav-links .nav-cta { display: list-item; margin-top: var(--space-2); }

  /* JavaScript off: the links stay on the page, stacked under the logo, and
     the bar stops being sticky so the stack doesn't cover the page. */
  .site-nav { position: static; }
  .nav-inner { flex-wrap: wrap; padding-block: var(--space-4); }
  .nav-inner > nav { flex: 1 1 100%; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

/* JavaScript on: careers.js wires the toggle, so the links fold behind it. */
@media (max-width: 1120px) and (scripting: enabled) {
  .site-nav { position: sticky; }
  .nav-inner { flex-wrap: nowrap; padding-block: 0; }
  .nav-inner > nav { flex: 0 0 auto; }
  /* The toggle comes before <nav> in the markup, so Tab moves from it
     straight into the open menu; order puts it back at the right. */
  .nav-toggle { display: inline-flex; order: 1; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--space-6) var(--page-margin);
    gap: var(--space-5);
    background: var(--color-surface);
    border-bottom: var(--border-hairline) solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  /* Opened with the bar stuck, or on a short landscape screen, the panel can
     run past the fold, so it scrolls itself and the last link stays reachable.
     vh first, dvh as the progressive override. */
  .nav-links.open {
    display: flex;
    flex-wrap: nowrap; /* scroll, rather than wrap into a second column */
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* -------------------- Page frame -------------------- */

.careers-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-inline: var(--page-margin);
}

/* A reading measure inside the full-width frame, aligned with the header. */
.careers-narrow > * { max-width: 760px; }

@media (max-width: 640px) {
  .nav-inner,
  .careers-wrap,
  .site-footer { padding-inline: var(--space-4); }
}
@media (max-width: 640px) and (scripting: enabled) {
  .nav-links { padding-inline: var(--space-4); }
}

.careers-section {
  padding-block: var(--space-8);
  border-top: var(--border-hairline) solid var(--color-border);
}
.careers-section--muted {
  background: var(--color-surface-muted);
  border-top: none;
}

.careers-section__head { max-width: 760px; margin-bottom: var(--space-6); }

/* Zero specificity, so the heading classes below set their own margins. */
:where(.careers-page) :where(h1, h2, h3, h4) {
  font-weight: var(--weight-regular);
  margin: 0;
}

.careers-h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-h3), 3.4vw, var(--text-h2));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: var(--space-4) 0 0;
}

.careers-h3 {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.careers-prose p,
.careers-prose ul,
.careers-prose ol { margin: 0 0 var(--space-4); max-width: 68ch; }
.careers-prose > :last-child { margin-bottom: 0; }
.careers-prose ul,
.careers-prose ol { padding-left: var(--space-5); }
.careers-prose li { margin-bottom: var(--space-2); }
.careers-prose li::marker { color: var(--color-primary-press); }

.careers-page .careers-prose a,
.careers-page .careers-link {
  color: var(--color-primary-press);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
}
.careers-page .careers-prose a:hover,
.careers-page .careers-link:hover { text-decoration-thickness: var(--border-icon); }

.careers-lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-prose);
  color: var(--color-text);
  max-width: 60ch;
  margin: var(--space-5) 0 0;
}

/* -------------------- Hero -------------------- */

.careers-hero {
  padding-block: var(--space-9) var(--space-8);
  background: var(--color-surface-muted);
}

.careers-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-h2), 6vw, var(--text-display-m));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  margin-top: var(--space-5);
}

/* The dolphin beside the role title (see the page for why it floats). */
.careers-hero__dolphin {
  float: right;
  width: clamp(72px, 14vw, 200px);
  height: auto;
  margin: var(--space-5) 0 var(--space-3) var(--space-4);
}

.careers-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

@media (max-width: 640px) {
  .careers-hero { padding-block: var(--space-7) var(--space-7); }
}

/* A little texture. The brand's light-field network texture sits behind the
   hero at low opacity, faded out towards the text so it never competes with it
   (graphic-language.md: atmosphere, not subject matter; if you notice it
   first, turn it down). The mask only uses alpha, so no colour is introduced. */
.careers-hero--textured {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.careers-hero--textured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/assets/runway-brand/brand/textures/light-field-network-ribbon.webp") right center / auto 115% no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(to right, transparent 30%, black 80%);
  mask-image: linear-gradient(to right, transparent 30%, black 80%);
  pointer-events: none;
}
@media (max-width: 820px) {
  /* Narrow screens: the text spans the width, so the texture drops to the
     bottom edge and fades up instead of sitting behind the copy. */
  .careers-hero--textured::before {
    background-position: right bottom;
    background-size: 150% auto;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to bottom, transparent 55%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 55%, black 100%);
  }
}

/* -------------------- About -------------------- */

.careers-about {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  column-gap: var(--space-7);
  row-gap: 0;
  align-items: start;
}

/* The eyebrow spans both columns, so the "How we will build" box lines up
   with the heading rather than the eyebrow. */
/* Its margin carries the heading's top margin too, which the heading drops
   here so its top edge is the row's top edge. */
.careers-about__eyebrow { grid-column: 1 / -1; margin-bottom: calc(var(--space-3) + var(--space-4)); }
.careers-about > div > .careers-h2:first-child { margin-top: 0; }

.careers-about .careers-lead { margin-bottom: var(--space-5); }
.careers-about__stat .careers-h3 { margin: 0 0 var(--space-4); }

/* "How we build": a mono label over each line, divided by hairlines. */
.careers-build-list { list-style: none; margin: 0; padding: 0; }
.careers-build-list li {
  padding-block: var(--space-4);
  border-top: var(--border-hairline) solid var(--color-border);
  font-size: var(--text-small);
  line-height: var(--leading-prose);
}
.careers-build-list li:last-child { padding-bottom: 0; }
.careers-build-list__label {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-primary-press);
}

@media (max-width: 820px) {
  .careers-about { grid-template-columns: minmax(0, 1fr); }
  .careers-about__stat { margin-top: var(--space-6); }
}

/* The dolphin at the foot of the ad: small and centred under the ad. */
.careers-prose .careers-ad__signoff { display: block; margin-top: 0; text-align: center; line-height: 0; }
.careers-ad__signoff img { width: 96px; height: auto; display: inline-block; }

/* -------------------- Principles -------------------- */

.careers-principles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.careers-principle { display: flex; flex-direction: column; gap: var(--space-3); }
.careers-principle__num {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
}
.careers-principle p { margin: 0; color: var(--color-text); }

@media (max-width: 900px) {
  .careers-principles { grid-template-columns: minmax(0, 1fr); }
}

/* -------------------- Role list -------------------- */

.careers-roles {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.careers-role-card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-6);
  transition: filter var(--duration-base) var(--ease-standard);
}
.careers-role-card:hover { filter: brightness(0.94); }
.careers-role-card:focus-within {
  border-color: var(--color-focus-ring);
  box-shadow: var(--shadow-focus-ring);
  outline: var(--border-icon) solid var(--color-focus-ring);
  outline-offset: 2px;
}

.careers-role-card__title a {
  text-decoration: none;
  border-radius: var(--radius-sm);
}
/* The whole card is the link's target; the link itself is the title. */
.careers-role-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
}
.careers-role-card__title a:focus-visible { outline: none; box-shadow: none; }

.careers-role-card__cta {
  font-size: var(--text-small);
  color: var(--color-primary-press);
  white-space: nowrap;
}

/* -------------------- Role facts (overview cards and role header) -------------------- */

.careers-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-3) 0 0;
  padding: 0;
}
.careers-facts div { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: baseline; }
.careers-facts dt {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.careers-facts dd { margin: 0; font-size: var(--text-small); color: var(--color-text); }

.careers-facts--large { gap: var(--space-4) var(--space-7); margin-top: var(--space-6); }
.careers-facts--large div { flex-direction: column; gap: var(--space-2); }
.careers-facts--large dd { font-size: var(--text-body); }

/* -------------------- Role page -------------------- */

.careers-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.careers-breadcrumb li { display: inline-flex; align-items: center; gap: var(--space-2); }
.careers-breadcrumb li + li::before { content: "/"; color: var(--color-text-muted); }
.careers-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  color: var(--color-primary-press);
  border-radius: var(--radius-sm);
}

.careers-ad { display: grid; gap: var(--space-7); }

/* "One job, two titles" note at the top of each role page. */
.careers-titles .careers-h3 { margin: 0 0 var(--space-3); }
.careers-titles p { margin: 0; line-height: var(--leading-prose); }
.careers-ad__section h2 { margin-top: 0; margin-bottom: var(--space-4); }

.careers-steps {
  counter-reset: careers-step;
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: grid;
  gap: var(--space-4);
  max-width: 68ch;
}
.careers-steps li {
  counter-increment: careers-step;
  position: relative;
  margin: 0;
  padding-left: var(--space-7);
}
.careers-steps li::before {
  content: counter(careers-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-prose);
  color: var(--color-text-muted);
  padding-top: 2px;
}


/* -------------------- Form -------------------- */

.careers-apply { padding-block: var(--space-8) var(--space-9); }

/* Keep whatever is scrolled to (a focused control on Tab or Shift+Tab, a
   summary link's target, an in-page anchor) clear of the sticky nav. Not when
   the nav is static: narrow screens with JavaScript off. */
@media (min-width: 1121px), (scripting: enabled) {
  html:has(body.careers-page) { scroll-padding-top: calc(76px + var(--space-5)); }
}

.careers-form { max-width: 720px; margin-top: var(--space-6); }

.careers-form__intro { margin: 0 0 var(--space-6); color: var(--color-text-muted); }

.careers-form__section {
  margin: 0 0 var(--space-5);
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  min-width: 0;
}

/* <fieldset> resets, for the either/or groups. */
fieldset.careers-form__section { margin-inline: 0; }
.careers-form__section > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0;
}
.careers-form__section > legend + * { clear: left; }

.careers-form__heading {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--space-5);
}
.careers-form__heading-num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.careers-form__fields { display: grid; gap: var(--space-5); }

.careers-form__group-hint {
  margin: calc(var(--space-2) * -1) 0 var(--space-5);
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

@media (max-width: 640px) {
  .careers-form__section { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }
}

/* Field. rw-form-field supplies the label, control and hint. */
.careers-page .rw-form-field__label { color: var(--color-text-muted); }
.careers-page .rw-form-field__control { min-height: var(--control-md); }
.careers-page .rw-form-field__hint { margin: 0; }

/* Native file input, restyled with button tokens. */
.careers-page input[type="file"].rw-form-field__control {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  cursor: pointer;
}
.careers-page input[type="file"]::file-selector-button {
  font-family: var(--font-sans);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-sans);
  min-height: var(--control-sm);
  margin-right: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--color-primary-press);
  background: var(--color-surface);
  border: var(--border-strong) solid var(--color-primary-press);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: filter var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.careers-page input[type="file"]:hover::file-selector-button { filter: brightness(0.94); }
.careers-page input[type="file"]:active::file-selector-button { transform: scale(0.97); }
.careers-page input[type="file"]:disabled::file-selector-button { cursor: not-allowed; }

/* Character count under a long textarea (careers.js). */
.careers-count {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  color: var(--color-text-muted);
  margin: 0;
}

/* Either/or: the two ways to supply a CV or a cover letter.
   Without JavaScript both options show, split by "or". */
.careers-either { display: grid; gap: var(--space-4); }

.careers-either__or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.careers-either__or::before,
.careers-either__or::after {
  content: "";
  flex: 1 1 auto;
  height: var(--border-hairline);
  background: var(--color-border);
}

/* With JavaScript: a two-way switch picks one option (careers.js). */
.careers-switch {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  margin: 0 0 var(--space-5);
  background: var(--color-surface-muted);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-pill);
}
.careers-switch button {
  min-height: var(--control-sm);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-sans);
  font-size: var(--text-small);
  letter-spacing: var(--tracking-sans);
  line-height: 1;
  color: var(--color-text);
  background: transparent;
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: filter var(--duration-base) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.careers-switch button:hover { filter: brightness(0.94); }
.careers-switch button:active { transform: scale(0.97); }
/* Selected: Dark Green fill with white ink — DESIGN.md §6. */
.careers-switch button[aria-pressed="true"] {
  background: var(--color-surface-deep);
  border-color: var(--color-surface-deep);
  color: var(--color-text-inverse);
}

/* Checkbox (privacy consent). Native control, sized to a 24px target. */
.careers-check {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
}
.careers-check input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-primary-press);
  cursor: pointer;
}
.careers-check label { font-size: var(--text-body); line-height: var(--leading-prose); cursor: pointer; }
.careers-check .careers-error,
.careers-check .rw-form-field__hint { grid-column: 2; }

/* Collection notice (Privacy Act 2020, IPP 3), directly above submit. */
.careers-notice {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
  font-size: var(--text-small);
}
.careers-notice__title {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  letter-spacing: var(--tracking-sans);
  line-height: var(--leading-tight);
  color: var(--color-text);
  margin: 0 0 var(--space-3);
}
.careers-notice p,
.careers-notice ul { margin: 0 0 var(--space-3); color: var(--color-text-muted); }
/* Emphasis by recession (DESIGN.md §4): the lead-ins stay ink, the rest steps back. */
.careers-notice__lead { color: var(--color-text); }
.careers-notice ul { padding-left: var(--space-5); }
.careers-notice li { margin-bottom: var(--space-2); }
.careers-notice > :last-child { margin-bottom: 0; }

.careers-turnstile { margin: var(--space-5) 0 0; }

.careers-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
}
.careers-submit__alt { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }

/* JavaScript off: the Turnstile check cannot run, so the form cannot be sent.
   The submit button gives way to the email route (inside <noscript>, so it
   also shows where the media query is unsupported). */
.careers-noscript {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  border: var(--border-icon) solid var(--color-text);
  border-radius: var(--radius-md);
  max-width: 68ch;
}
@media (scripting: none) {
  .careers-submit > .rw-button[type="submit"] { display: none; }
}

/* Upload progress (careers.js, XHR). */
.careers-progress { margin: var(--space-5) 0 0; display: grid; gap: var(--space-2); }
.careers-progress__label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0;
}
.careers-progress progress {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--space-2);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-border);
  color: var(--color-primary-press);
  overflow: hidden;
}
.careers-progress progress::-webkit-progress-bar { background: var(--color-border); border-radius: var(--radius-pill); }
.careers-progress progress::-webkit-progress-value {
  background: var(--color-primary-press);
  border-radius: var(--radius-pill);
  transition: width var(--duration-base) var(--ease-standard);
}
.careers-progress progress::-moz-progress-bar { background: var(--color-primary-press); border-radius: var(--radius-pill); }

.careers-form[aria-busy="true"] .rw-form-field__control,
.careers-form[aria-busy="true"] .careers-switch button { pointer-events: none; }

/* -------------------- Errors --------------------
   Words first; then weight, position and Aqua. The palette has no error
   colour (DESIGN.md §6), so by sign-off (5 October 2026) problems use the
   brand's Aqua (--color-accent-cool): Aqua lines on the control, down the
   field's left edge and round the summary, and the mono marker set as an Aqua
   capsule in Dark Green ink. The message text stays in ink, because Aqua text
   on white is unreadable; the words still carry the meaning on their own. */

.careers-error {
  margin: 0;
  font-size: var(--text-small);
  line-height: var(--leading-prose);
  color: var(--color-text);
}
.careers-error__marker,
.careers-summary__marker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-on-accent-cool);
  margin-bottom: var(--space-2);
}
.careers-error__marker,
.careers-summary__marker {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  background: var(--color-accent-cool);
  border-radius: var(--radius-pill);
}
.careers-error__marker { display: table; }

.careers-field--invalid {
  border-left: var(--space-1) solid var(--color-accent-cool);
  padding-left: var(--space-4);
}
.careers-page .careers-field--invalid .rw-form-field__control,
.careers-page .rw-form-field__control[aria-invalid="true"] {
  border-width: var(--border-icon);
  border-color: var(--color-accent-cool);
}
.careers-page .rw-form-field__control[aria-invalid="true"]:focus {
  border-color: var(--color-focus-ring);
}
.careers-check.careers-field--invalid { padding-left: var(--space-4); }

fieldset.careers-group--invalid { border: var(--border-icon) solid var(--color-accent-cool); }
.careers-group__error { margin: 0 0 var(--space-5); }

.careers-summary {
  margin: 0 0 var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: var(--border-icon) solid var(--color-accent-cool);
  border-left-width: var(--space-1);
  border-radius: var(--radius-md);
}
.careers-summary:focus { outline: var(--border-icon) solid var(--color-focus-ring); outline-offset: 2px; box-shadow: var(--shadow-focus-ring); }
.careers-summary__title {
  font-family: var(--font-display);
  font-size: var(--text-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  margin: var(--space-2) 0 var(--space-4);
}
.careers-summary p { margin: 0 0 var(--space-3); }
.careers-summary ul { margin: 0; padding-left: var(--space-5); }
.careers-summary li { margin: 0 0 var(--space-2); }
.careers-summary a {
  color: var(--color-primary-press);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* -------------------- Status pages --------------------
   /careers/received/ and the HTML error page from /careers/apply share this
   markup exactly:
     main#main.careers-status > .careers-status__inner >
       p.rw-eyebrow + h1.careers-status__title + .careers-status__body
       (may contain ul.careers-status__list) + p.careers-status__actions > a.rw-button */

.careers-status {
  display: block;
  padding: var(--space-9) var(--page-margin) var(--space-10);
  background: var(--color-surface-muted);
  min-height: 60vh;
}

.careers-status__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-7);
  background: var(--color-surface);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* The shared markup's eyebrow carries no tone class or tick element, so both
   are supplied here. */
.careers-status__inner > .rw-eyebrow { color: var(--color-primary-press); margin: 0; }
.careers-status__inner > .rw-eyebrow::before {
  content: "";
  width: var(--space-5);
  height: var(--border-icon);
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  flex: 0 0 auto;
}

.careers-status__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-h3), 5vw, var(--text-h1));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--weight-regular);
  margin: var(--space-5) 0 0;
}

.careers-status__body { margin-top: var(--space-5); }
.careers-status__body p,
.careers-status__body ul,
.careers-status__body ol { margin: 0 0 var(--space-4); }
.careers-status__body > :last-child { margin-bottom: 0; }
.careers-status__body h2 {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: var(--space-6) 0 var(--space-3);
}
.careers-status__body a {
  color: var(--color-primary-press);
  text-decoration: underline;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
}

.careers-status__list { padding-left: var(--space-5); }
.careers-status__list li { margin: 0 0 var(--space-3); }
.careers-status__list li::marker { color: var(--color-primary-press); }

.careers-status__ref {
  padding: var(--space-4) var(--space-5);
  background: var(--color-surface-muted);
  border-radius: var(--radius-md);
}
.careers-status__ref-label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.careers-status__ref-value {
  font-family: var(--font-mono);
  font-size: var(--text-body-l);
  letter-spacing: var(--tracking-mono);
  color: var(--color-text);
}

.careers-status__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
}

@media (max-width: 640px) {
  .careers-status { padding: var(--space-7) var(--space-4) var(--space-8); }
  .careers-status__inner { padding: var(--space-5) var(--space-4); border-radius: var(--radius-md); }
}

/* -------------------- Footer (as privacy-policy.html) -------------------- */

.site-footer { background: var(--color-surface-deep); padding: var(--space-8) var(--page-margin); }
.footer-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.footer-logo img { width: 152px; height: auto; margin-bottom: var(--space-4); }
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--space-2) var(--space-5);
  flex-wrap: wrap;
}
.footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  min-width: 24px;
  padding: 3px 0;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-text-inverse);
  opacity: 0.72;
  border-radius: var(--radius-sm);
}
.footer-links a:hover { color: var(--color-accent-cool); opacity: 1; }
.footer-copy,
.footer-legal {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: var(--leading-prose);
  color: var(--color-text-inverse);
  opacity: 0.72;
}
.footer-copy { display: inline-flex; align-items: center; min-height: 24px; }
.footer-legal { margin: var(--space-5) 0 0; }

/* Bright Green ring on the dark footer: teal on dark green has too little
   contrast — DESIGN.md §6. */
.site-footer :focus-visible { outline-color: var(--color-accent); opacity: 1; }

/* -------------------- Motion -------------------- */

@media (prefers-reduced-motion: reduce) {
  .careers-page *,
  .careers-page *::before,
  .careers-page *::after,
  .careers-page ::file-selector-button,
  .careers-page progress::-webkit-progress-value {
    transition: none !important;
    animation: none !important;
  }
  .careers-switch button:active,
  .careers-page input[type="file"]:active::file-selector-button { transform: none; }
  .careers-page { scroll-behavior: auto; }
}

@media (prefers-reduced-motion: no-preference) {
  html:has(body.careers-page) { scroll-behavior: smooth; }
}

/* -------------------- Application form labels --------------------
   Sentence case in Geist across the form, rather than the form-field
   component's mono uppercase label: every label here is a phrase or a full
   question, and they read better as sentences. */
.careers-form .rw-form-field__label {
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-prose);
  letter-spacing: var(--tracking-sans);
  text-transform: none;
  color: var(--color-text);
}

/* Application questions: the label is the whole question, and <strong> marks
   its key words in Geist Medium (weight 500, from /assets/fonts/geist-medium.css,
   a signed-off exception to the one-weight rule). */
.careers-questions .rw-form-field__label {
  font-size: var(--text-body-l);
  max-width: 68ch;
}
.careers-questions .rw-form-field__label strong { font-weight: 500; }
.careers-questions .careers-form__fields { gap: var(--space-7); }