/* The careers pages: /careers, /careers/:slug, /careers/apply and /careers/status.

   Built from site.css: the page hero, cards, the estimate form's step card,
   progress rail, service cards, segments and add-on checkboxes are all the
   site's own, so the application looks and behaves like the estimate. This
   sheet adds only what those do not cover: the role card and pay ladder, the
   week grid, job entries, the resume tile, the save bar, the review summary
   and the status page. Tokens only; breakpoints on the site ladder (40rem
   and 48rem). Every animation is behind prefers-reduced-motion. */

/* ------------------------------------------------------------ shared */

.careers-optional {
  margin-left: var(--space-1);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-muted);
}

.careers-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.careers-boot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 12rem;
  justify-content: center;
  color: var(--color-muted);
  font-weight: 600;
}

.careers-spinner {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
}
@media (prefers-reduced-motion: no-preference) {
  .careers-spinner { animation: careers-spin 800ms linear infinite; }
  @keyframes careers-spin { to { transform: rotate(360deg); } }
}

.careers-danger-link { color: var(--color-danger); }
.careers-danger-link:hover { color: var(--color-danger-dark); }
.careers-danger-outline { color: var(--color-danger); border-color: var(--color-danger-border); }
.careers-danger-outline:hover { color: var(--color-danger-dark); border-color: var(--color-danger); background: var(--color-danger-bg); }

.careers-problem__card,
.careers-confirm__card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(16, 39, 71, 0.05), 0 14px 36px -16px rgba(16, 39, 71, 0.16);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-3);
}
.careers-problem__card > *,
.careers-confirm__card > * { margin: 0; }
.careers-problem__title {
  font-size: var(--fs-2xl);
  color: var(--color-ink);
}
.careers-problem__sub { font-size: var(--fs-lg); margin-top: var(--space-3); }
.careers-problem:focus { outline: none; }

.careers-lost { max-width: 28rem; }
.careers-lost .form-status { margin: 0; }
/* The error belongs to the field above it, not a full form gap away. */
.careers-lost .field-error { margin-top: calc(var(--space-3) * -1); }

/* ------------------------------------------------------------ /careers */

.careers-openings { display: grid; gap: var(--space-5); }
.careers-role {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(16, 39, 71, 0.05), 0 14px 36px -16px rgba(16, 39, 71, 0.16);
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
}
.careers-role--loading { min-height: 18rem; align-content: start; }
.careers-role--error { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.careers-role--empty { background: var(--color-off-white); }
.careers-openings__status { margin: 0; color: var(--color-muted); font-weight: 600; }
.careers-skeleton {
  display: block;
  height: 14px;
  border-radius: var(--radius-pill);
  background: var(--color-cream-deep);
}
.careers-skeleton--title { height: 28px; width: 40%; }
.careers-skeleton--short { width: 60%; }
@media (prefers-reduced-motion: no-preference) {
  .careers-skeleton { animation: careers-pulse 1.4s var(--ease-out) infinite alternate; }
  @keyframes careers-pulse { from { opacity: 0.55; } to { opacity: 1; } }
}
.careers-role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.careers-role__title { margin: 0; font-size: var(--fs-2xl); color: var(--color-ink); }
.careers-role__summary { margin: 0; color: var(--color-text); max-width: 60ch; }
.careers-role__actions { display: grid; gap: var(--space-2); justify-items: start; }
.careers-role__hint { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }

.careers-pay {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.careers-pay__title {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.careers-pay__ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.careers-pay__rung {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2px var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-off-white);
}
.careers-pay__name { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.careers-pay__rate {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--color-primary-dark);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.careers-pay__when { grid-column: 1 / -1; font-size: var(--fs-sm); color: var(--color-muted); }
.careers-pay__note { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); max-width: 60ch; }

.careers-already { margin: var(--space-5) 0 0; }
.careers-card-heading { font-size: var(--fs-xl); margin: 0 0 var(--space-3); }
.careers-steps { list-style: none; margin: 0; padding: 0; }
.careers-eeo__title { font-size: var(--fs-xl); }

/* ------------------------------------------------------------ hero on the form pages */

.careers-hero--compact { padding: var(--space-12) 0 var(--space-10); }
.careers-hero--compact h1 { font-size: var(--fs-4xl); }

.careers-apply-section,
.careers-status-section { padding-top: var(--space-10); }

/* ------------------------------------------------------------ the application */

.careers-applying {
  margin: 0 0 var(--space-4);
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.careers-applying strong { color: var(--color-ink); }

.careers-savebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-4);
  min-height: 44px;
}
.careers-savebar__status {
  margin: 0;
  margin-right: auto;
  font-size: var(--fs-sm);
  color: var(--color-muted);
  font-weight: 600;
}
/* Steps, the confirmation and fields scrolled into view clear the sticky
   site header instead of tucking their first line under it. */
.careers-apply .wizard-progress,
.careers-apply [data-step],
.careers-confirm,
.careers-form :is(input, select, textarea, fieldset) {
  scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.careers-savebar__status[data-kind="saved"] { color: var(--color-success-text); }
.careers-savebar__status[data-kind="failed"] { color: var(--color-danger-text); }

.careers-panel {
  margin: 0 0 var(--space-5);
  padding: var(--space-5);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  display: grid;
  gap: var(--space-3);
}
.careers-panel:focus { outline: none; }
.careers-panel > p { margin: 0; color: var(--color-primary-dark); font-size: var(--fs-sm); }
.careers-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.careers-panel__title { margin: 0; font-size: var(--fs-lg); color: var(--color-ink); }
.careers-panel__email { display: grid; gap: var(--space-2); }
.careers-panel__email > label { margin: 0; font-weight: 700; }
.careers-panel__email .hint { margin: 0; }
.careers-panel__email-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.careers-panel__email-row input { flex: 1 1 14rem; }
.careers-panel__result:empty { display: none; }

.careers-link {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.careers-link__field {
  flex: 1 1 16rem;
  max-width: none;
  font-size: var(--fs-sm);
  background: var(--color-off-white);
}
.careers-link__said { flex-basis: 100%; font-size: var(--fs-xs); color: var(--color-muted); min-height: 1em; }

.careers-conflict { margin: 0 0 var(--space-4); }
.careers-conflict__box .cluster { gap: var(--space-2); }
.careers-conflict__note:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .careers-step[data-step-enter] { animation: careers-step-in 320ms var(--ease-out) both; }
  @keyframes careers-step-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}
.careers-step:focus { outline: none; }

/* Inner groups inside the step card: a field label's weight, not the card title's. */
.careers-form fieldset fieldset > legend {
  float: none;
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 var(--space-2);
  color: var(--color-ink);
}
.careers-form fieldset fieldset { margin-top: var(--space-5); }
.careers-form fieldset fieldset[aria-invalid="true"] { border-radius: var(--radius-md); }

.careers-field { margin: var(--space-4) 0 0; }
.careers-field > label { margin: 0 0 var(--space-2); font-weight: 600; color: var(--color-ink); }
.careers-field > .hint { margin: var(--space-1) 0 0; }
.careers-field textarea { max-width: none; }

.careers-grid-2 { display: grid; gap: 0 var(--space-4); }
@media (min-width: 40rem) {
  .careers-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.careers-counter {
  margin: var(--space-1) 0 0;
  font-size: var(--fs-xs);
  color: var(--color-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.careers-counter.is-near { color: var(--color-warning-text); font-weight: 600; }

.careers-segments-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
.careers-segments-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 28rem; }
.careers-segments-transport { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* A one-line chip fills its row as tall as a two-line neighbour. */
.careers-segments-transport .segment { display: flex; }
.careers-segments-transport .segment > input + span { flex: 1; }
@media (min-width: 48rem) {
  .careers-segments-transport { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.careers-note {
  margin: var(--space-3) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-info-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--fs-sm);
}

.careers-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin: var(--space-3) 0 0;
  font-weight: 600;
  cursor: pointer;
}
.careers-check input { width: 20px; height: 20px; margin: 0; }

/* Resume upload */
.careers-dropzone { max-width: none; }
.careers-dropzone.is-dragover { border-style: solid; }
.careers-resume:empty { display: none; }
.careers-resume__tile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.careers-resume__tile.is-done { border-color: var(--color-success-border); background: var(--color-success-bg); }
.careers-resume__tile.is-error { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.careers-resume__tile.is-confirm { border-color: var(--color-warning-border); background: var(--color-warning-bg); }
.careers-resume__icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.careers-resume__icon svg { width: 16px; height: 16px; }
.careers-resume__body { flex: 1 1 12rem; min-width: 0; display: grid; gap: 2px; }
.careers-resume__body > p { margin: 0; }
.careers-resume__name { font-weight: 700; color: var(--color-ink); overflow-wrap: anywhere; }
.careers-resume__meta { font-size: var(--fs-sm); color: var(--color-muted); }
.careers-resume__problem { font-size: var(--fs-sm); color: var(--color-danger-text); font-weight: 600; }
.careers-resume__problem:empty { display: none; }
.careers-resume__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.careers-resume__bar {
  width: 100%;
  height: 8px;
  margin-top: var(--space-2);
  accent-color: var(--color-primary);
}

.careers-suggest {
  margin: var(--space-4) 0 0;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-info-border);
  border-radius: var(--radius-lg);
  background: var(--color-primary-light);
  display: grid;
  gap: var(--space-2);
}
.careers-suggest > * { margin: 0; }
.careers-suggest__title { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.careers-suggest__list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
}
.careers-suggest__list dt { font-weight: 600; color: var(--color-muted); }
.careers-suggest__list dd { margin: 0; overflow-wrap: anywhere; color: var(--color-ink); }
.careers-suggest__said:empty { display: none; }
.careers-suggest__done { color: var(--color-primary-dark); font-weight: 600; }

/* Past jobs */
.careers-jobs { display: grid; gap: var(--space-4); }
.careers-form fieldset.careers-job {
  margin: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-off-white);
}
.careers-form fieldset.careers-job > legend.careers-job__legend {
  float: left;
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 800;
}
.careers-job > .careers-grid-2 > .careers-field { margin-top: var(--space-2); }
.careers-monthpair__row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.careers-monthpair__row select { flex: 1 1 9rem; max-width: 14rem; }
.careers-job__foot { display: flex; justify-content: flex-end; margin-top: var(--space-3); }
.careers-job__remove { color: var(--color-danger); }
.careers-job__confirm {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-warning-border);
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  display: grid;
  gap: var(--space-2);
}
.careers-job__confirm p { margin: 0; font-weight: 600; color: var(--color-warning-text); }
.careers-jobs__add { margin-top: var(--space-4); }
.careers-jobs__add .hint { margin: 0; }

/* First job */
.careers-areas { display: grid; gap: var(--space-2); }
.careers-area__detail { margin: var(--space-2) 0 var(--space-2) var(--space-6); }
@media (prefers-reduced-motion: no-preference) {
  .careers-area__detail:not([hidden]) { animation: careers-step-in 220ms var(--ease-out) both; }
}

/* The week: a card per day on a phone, a grid with column heads from 48rem. */
.careers-week__head { display: none; }
.careers-week__days { display: grid; gap: var(--space-2); }
.careers-form .careers-week .careers-day {
  margin: 0;
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.careers-form .careers-day > legend.careers-day__name {
  float: left;
  width: 100%;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-sm);
}
.careers-day__slots {
  clear: both;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
}
.careers-slot { display: block; margin: 0; font-weight: 500; }
.careers-slot__face {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
}
.careers-slot__box {
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}
.careers-slot__box svg { width: 11px; height: 11px; transform: scale(0); }
.careers-slot:hover .careers-slot__face { border-color: var(--color-primary); background: var(--color-primary-light); }
.careers-slot input:checked + .careers-slot__face {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}
.careers-slot input:checked + .careers-slot__face .careers-slot__box {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
.careers-slot input:checked + .careers-slot__face .careers-slot__box svg { transform: scale(1); }
.careers-slot input:focus-visible + .careers-slot__face { outline: 2px solid var(--color-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .careers-slot__face { transition: border-color var(--dur-quick) var(--ease-out), background-color var(--dur-quick) var(--ease-out); }
  .careers-slot__box svg { transition: transform var(--dur-quick) var(--ease-spring); }
}
@media (min-width: 48rem) {
  .careers-week__head {
    display: grid;
    grid-template-columns: 8rem repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
    padding: 0 var(--space-3);
    margin-bottom: var(--space-1);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-muted);
    text-align: center;
  }
  .careers-week__days { gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
  .careers-form .careers-week .careers-day {
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    align-items: center;
    border: 0;
    border-bottom: 1px solid var(--color-rule);
    border-radius: 0;
    padding: var(--space-1) var(--space-3);
  }
  .careers-form .careers-week .careers-day:last-child { border-bottom: 0; }
  .careers-form .careers-week .careers-day:nth-child(even) { background: var(--color-off-white); }
  .careers-form .careers-day > legend.careers-day__name {
    float: left;
    width: 8rem;
    margin: 0;
  }
  .careers-day__slots { clear: none; grid-column: 2; }
  /* The column heads name the slots; the words stay for screen readers. */
  .careers-slot__word {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .careers-slot__face { border-color: transparent; background: transparent; }
  .careers-slot__box { width: 22px; height: 22px; }
}

.careers-towns { display: grid; gap: var(--space-3); }
.careers-towns__title {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.careers-town input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-white);
}
.careers-town input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }

/* Review */
.careers-review { display: grid; gap: var(--space-3); }
.careers-review__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  background: var(--color-off-white);
}
.careers-review__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.careers-review__title { margin: 0; font-size: var(--fs-md); color: var(--color-ink); }
.careers-review__rows {
  display: grid;
  gap: var(--space-1) var(--space-4);
  margin: var(--space-2) 0 0;
}
.careers-review__rows dt { font-size: var(--fs-xs); font-weight: 700; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.careers-review__rows dd { margin: 0 0 var(--space-2); overflow-wrap: anywhere; white-space: pre-line; }
@media (min-width: 40rem) {
  .careers-review__rows { grid-template-columns: 12rem minmax(0, 1fr); }
  .careers-review__rows dt { padding-top: 3px; }
  .careers-review__rows dd { margin-bottom: 0; }
}
.careers-review__drop { margin: var(--space-4) 0 0; }

.careers-disclosure {
  margin: var(--space-5) 0 0;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-cream-deep);
}
.careers-disclosure__title { margin: 0 0 var(--space-3); font-size: var(--fs-md); color: var(--color-ink); }
.careers-disclosure .feature-list { margin: 0; }
.careers-disclosure__eeo { margin: var(--space-3) 0 0; font-size: var(--fs-sm); color: var(--color-muted); }

.careers-attest { margin-top: var(--space-5); }
.careers-attest__option .addon-option__name { font-weight: 600; line-height: 1.45; }
.careers-attest[aria-invalid="true"] { border-radius: var(--radius-lg); }

.careers-submit[aria-busy="true"] { cursor: progress; }

/* Confirmation */
.careers-confirm:focus { outline: none; }
.careers-confirm__card { border-color: var(--color-success-border); }
.careers-confirm__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--color-success);
  color: var(--color-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.careers-confirm__icon svg { width: 24px; height: 24px; }
.careers-confirm__title { font-size: var(--fs-3xl); color: var(--color-ink); }
/* Headings that take focus after a send, a load or a broken link
   (tabindex="-1"): the keyboard can never Tab to them, so a ring would only
   ever mark a script focus. Chrome counts a script focus on a fresh page as
   :focus-visible, which drew a box tight around "This link has expired". */
.careers-confirm__title:focus,
.careers-problem__title:focus { outline: none; }
.careers-confirm__lead { font-size: var(--fs-md); }
.careers-confirm__ref { font-family: var(--font-display); letter-spacing: 0.04em; }
.careers-confirm__sub { font-size: var(--fs-lg); margin-top: var(--space-3) !important; }
@media (prefers-reduced-motion: no-preference) {
  .careers-confirm:not([hidden]) .careers-confirm__card { animation: careers-step-in 360ms var(--ease-out) both; }
}

/* ------------------------------------------------------------ status */

.careers-status { display: grid; gap: var(--space-5); }
.careers-status:focus { outline: none; }
.careers-status > section,
.careers-status > article { margin: 0; }
.careers-status__sub { margin: 0 0 var(--space-2); font-size: var(--fs-lg); color: var(--color-ink); }
.careers-status__announce { margin: 0; }

.careers-stage {
  position: relative;
  padding: var(--space-8);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-primary);
  background: var(--color-white);
  box-shadow: 0 1px 2px rgba(16, 39, 71, 0.05), 0 14px 36px -16px rgba(16, 39, 71, 0.16);
  display: grid;
  gap: var(--space-2);
}
.careers-stage[data-tone="good"] { border-top-color: var(--color-success); }
.careers-stage[data-tone="closed"] { border-top-color: var(--color-muted); }
.careers-stage > * { margin: 0; }
.careers-stage__eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.careers-stage__label { font-size: var(--fs-3xl); color: var(--color-ink); }
.careers-stage__label:focus { outline: none; }
.careers-stage__sentence { font-size: var(--fs-md); color: var(--color-text); }
.careers-stage__meta { font-size: var(--fs-sm); color: var(--color-muted); }

.careers-next p,
.careers-hiring p,
.careers-contact p,
.careers-actions p { margin: 0 0 var(--space-2); }

.careers-interview,
.careers-hiring {
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-info-border);
  background: var(--color-primary-light);
}
.careers-interview__rows {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-4);
  margin: 0 0 var(--space-2);
}
.careers-interview__rows dt { font-weight: 700; color: var(--color-primary-dark); }
.careers-interview__rows dd { margin: 0; overflow-wrap: anywhere; }

.careers-timeline__list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-4);
  border-left: 2px solid var(--color-border);
  display: grid;
  gap: var(--space-3);
}
.careers-timeline__item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}
.careers-timeline__item::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-4) - 6px);
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}
.careers-timeline__label { font-weight: 600; }
.careers-timeline__date { font-size: var(--fs-sm); color: var(--color-muted); font-variant-numeric: tabular-nums; }

.careers-actions {
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-rule);
}
.careers-confirm-panel {
  margin-top: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-danger-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  display: grid;
  gap: var(--space-3);
}
.careers-confirm-panel > * { margin: 0; }
.careers-confirm-panel__title { font-size: var(--fs-lg); color: var(--color-ink); }
.careers-confirm-panel .careers-field { margin: 0; }
.careers-confirm-panel__said { color: var(--color-danger-text); font-weight: 600; font-size: var(--fs-sm); }
.careers-confirm-panel__buttons { gap: var(--space-2); }
@media (prefers-reduced-motion: no-preference) {
  .careers-confirm-panel:not([hidden]) { animation: careers-step-in 220ms var(--ease-out) both; }
}

/* ------------------------------------------------------------ phones */

@media (max-width: 40rem) {
  .careers-role,
  .careers-problem__card,
  .careers-confirm__card,
  .careers-stage { padding: var(--space-5); }
  .careers-form fieldset.careers-job { padding: var(--space-4); }
  .careers-hero--compact { padding: var(--space-10) 0 var(--space-8); }
  .careers-hero--compact h1 { font-size: var(--fs-3xl); }
  .careers-segments-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .careers-area__detail { margin-left: 0; }
  .careers-role__actions .btn { width: 100%; }
  /* The status gets its own line, so a long failure never moves the buttons. */
  .careers-savebar__status { flex-basis: 100%; }
}

/* The narrowest phones: three slot chips side by side leave no room for the
   box and "Afternoon" on one line, so the box sits above the word. */
@media (max-width: 30rem) {
  .careers-slot__face {
    flex-direction: column;
    gap: 2px;
    padding: var(--space-1);
    font-size: var(--fs-xs);
  }
  .careers-day__slots { gap: var(--space-1); }
}

/* One careers page, with clearly scoped cleaner and office openings. */
.careers-hero { text-align: center; }
.careers-hero h1,
.careers-hero .lede { margin-inline: auto; }
.careers-hero .cluster { justify-content: center; }
.careers-opening-group { display: grid; gap: var(--space-5); }
.careers-opening-group + .careers-opening-group { margin-top: var(--space-10); }
.careers-group-heading { margin: 0; font-size: var(--fs-2xl); }
.careers-role__terms { color: var(--color-muted); }
.careers-role__details { border-block: 1px solid var(--color-border); padding-block: var(--space-3); }
.careers-role__details summary { cursor: pointer; min-height: 44px; padding-block: var(--space-3); font-weight: 600; }
.careers-role__details summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
.careers-role__details h5 { font-size: var(--fs-base); margin-top: var(--space-4); }

.careers-posting__meta {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}
.careers-posting__meta dt { font-weight: 700; }
.careers-posting__meta dd { margin: 0; }
.careers-posting__meta dd > :first-child { margin-top: 0; }
.careers-posting__meta dd > :last-child { margin-bottom: 0; }
.careers-posting__section { display: grid; gap: var(--space-3); }
.careers-posting__label { margin: 0; font-size: var(--fs-xl); }
.careers-posting__heading { margin: 0; font-size: var(--fs-lg); }
.careers-posting p { margin: 0; max-width: 65ch; }