/* ==========================================================================
   Careers: filter bar, role rows, and the application modal.

   Loaded only by company.php (via $pageStyles), so it lands after pages.css
   and can refine the shared .job rules there.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Filter bar
   -------------------------------------------------------------------------- */
.jobs-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 24px;
  margin-bottom: 22px;
  /* .reveal sets will-change, which makes this a stacking context, without a
     z-index of its own the open dropdown paints under the list below it. */
  position: relative;
  z-index: 5;
}
.jobs-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1 1 auto;
}
.jobs-bar__filters .field {
  margin-bottom: 0;
  flex: 0 1 250px;
  min-width: 0;
}

.jobs-bar__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 4px;
}
.jobs-bar__count {
  font-size: 0.88rem;
  color: var(--muted);
  margin: 0;
}
.jobs-bar__count b {
  color: var(--ink);
  font-weight: 700;
}
.jobs-bar__clear {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--blue);
  position: relative;
}
.jobs-bar__clear::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.3s var(--ease);
}
.jobs-bar__clear:hover::after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Role rows
   -------------------------------------------------------------------------- */
.job {
  /* Now a <button>, so the element defaults have to be undone. */
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  align-items: center;
}
/* The accent bar that wipes in from the left on hover. */
.job::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--cyan), var(--blue));
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.42s var(--ease);
}
.job:hover::before,
.job:focus-visible::before {
  transform: scaleY(1);
}
.job:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.job__main {
  flex: 1 1 300px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.job__title {
  transition: color var(--t) var(--ease);
}
.job:hover .job__title {
  color: var(--blue);
}
.job__summary {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.5;
  /* Two lines is enough to sell the role; the modal carries the rest. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.job__meta {
  flex: none;
}
.job__go {
  flex: none;
}
.job.is-hidden {
  display: none;
}

.jobs__empty {
  text-align: center;
  padding: 54px 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-lg);
  background: var(--paper);
  animation: emptyIn 0.42s var(--ease-out-soft) both;
}
@keyframes emptyIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.jobs__emptyicon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
}
.jobs__empty h3 {
  font-size: 1.16rem;
  margin-bottom: 8px;
}
.jobs__empty p {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 44ch;
  margin: 0 auto 22px;
}
.jobs__emptyacts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* ==========================================================================
   Application modal
   ========================================================================== */
.kmodal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: grid;
  place-items: center;
  padding: clamp(12px, 2.4vw, 28px);
  pointer-events: none;
}
.kmodal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(7, 42, 68, 0.46);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.kmodal__dialog {
  --kmodal-h: min(92vh, 800px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.82fr);
  /* The row must be allowed to shrink below its content, or the long role pane
     sizes the grid and both columns overflow instead of scrolling. The panes
     carry the same cap so the track never sizes to their content in the first
     place: filling them from JS after layout otherwise leaves the row stale. */
  grid-template-rows: minmax(0, 1fr);
  width: min(1080px, 100%);
  height: var(--kmodal-h);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  opacity: 0;
  transform: translateY(20px) scale(0.976);
  transition:
    opacity 0.34s var(--ease),
    transform 0.52s var(--ease-out-soft);
}
body.is-apply .kmodal {
  pointer-events: auto;
}
body.is-apply .kmodal__scrim {
  opacity: 1;
}
body.is-apply .kmodal__dialog {
  opacity: 1;
  transform: none;
}

.kmodal__x {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 6;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.kmodal__x:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* ---------- Left: the form ---------- */
.kmodal__main {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  max-height: var(--kmodal-h);
}
.kmodal__rail {
  position: sticky;
  top: 0;
  z-index: 4;
  flex: none;
  height: 3px;
  background: var(--line);
}
.kmodal__rail i {
  display: block;
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  transition: width 0.55s var(--ease-out-soft);
}

.kmodal__head,
.kmodal__form,
.adone {
  padding-inline: clamp(24px, 3vw, 40px);
}
.kmodal__head {
  padding-top: clamp(24px, 2.6vw, 34px);
}
.kmodal__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cyan);
}
.kmodal__title {
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1.12;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  margin: 10px 0 0;
  letter-spacing: -0.02em;
}
.kmodal__sub {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 10px 0 0;
}

/* ---------- Step indicator ---------- */
.ksteps {
  display: flex;
  gap: 10px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}
.ksteps__item {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--muted-2);
  padding-top: 13px;
  border-top: 2px solid var(--line);
  transition:
    color 0.34s var(--ease),
    border-color 0.34s var(--ease);
}
.ksteps__item.is-current,
.ksteps__item.is-done {
  color: var(--ink);
  border-top-color: var(--cyan);
}
.ksteps__dot {
  width: 23px;
  height: 23px;
  border-radius: 50%;
  flex: none;
  display: grid;
  place-items: center;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--paper-2);
  color: var(--muted);
  border: 1px solid var(--line-2);
  transition:
    background 0.34s var(--ease),
    color 0.34s var(--ease),
    border-color 0.34s var(--ease);
}
.ksteps__item.is-current .ksteps__dot {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.ksteps__item.is-done .ksteps__dot {
  background: var(--cyan);
  color: #fff;
  border-color: var(--cyan);
}

/* ---------- Form ---------- */
.aform {
  padding-top: 24px;
  padding-bottom: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  flex: 1;
}
.aform__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aform__step {
  display: none;
}
.aform__step.is-current {
  display: block;
  animation: stepIn 0.44s var(--ease-out-soft) both;
}
.aform__step.is-current.is-back {
  animation-name: stepBack;
}
@keyframes stepIn {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes stepBack {
  from {
    opacity: 0;
    transform: translateX(-16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.field__opt {
  font-weight: 500;
  color: var(--muted-2);
  font-size: 0.78rem;
}
.field--chips {
  margin-bottom: 18px;
}
.field--chips legend {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-2);
  padding: 0;
  margin-bottom: 9px;
}
.field__count {
  font-size: 0.76rem;
  color: var(--muted-2);
  align-self: flex-end;
  margin-top: -2px;
}
.field__count b {
  font-weight: 600;
}
.field__count.is-near {
  color: #c07a26;
}

/* Bare filter fields keep the label above but sit tighter than form fields. */
.field--bare label {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- CV dropzone ---------- */
.drop {
  position: relative;
  border: 1.6px dashed var(--line-2);
  border-radius: var(--r);
  background: var(--paper);
  padding: 24px 20px;
  text-align: center;
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease);
}
.drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.drop:hover,
.drop:focus-within {
  border-color: var(--muted-2);
}
.drop.is-over {
  border-color: var(--cyan);
  background: rgba(0, 180, 229, 0.07);
}
.drop.has-file {
  border-style: solid;
  border-color: #57b894;
  background: #fff;
  padding: 14px;
  text-align: left;
}
.drop.has-file .drop__idle {
  display: none;
}

.drop__idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  pointer-events: none;
}
.drop__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--blue);
  transition: transform var(--t) var(--ease);
}
.drop:hover .drop__icon,
.drop.is-over .drop__icon {
  transform: translateY(-2px);
}
.drop__text {
  font-size: 0.92rem;
  color: var(--ink-2);
}
.drop__text u {
  color: var(--blue);
  text-underline-offset: 3px;
}
.drop__hint {
  font-size: 0.78rem;
  color: var(--muted-2);
}

.drop__file {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.drop__fileicon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(87, 184, 148, 0.12);
  color: #3d8f70;
}
.drop__filemeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.drop__filemeta b {
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drop__filemeta em {
  font-style: normal;
  font-size: 0.77rem;
  color: var(--muted-2);
}
.drop__remove {
  margin-left: auto;
  flex: none;
  pointer-events: auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid var(--line-2);
  background: #fff;
  color: var(--muted);
  display: grid;
  place-items: center;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.drop__remove:hover {
  color: #c02626;
  border-color: #e0796f;
}

/* ---------- Chip radios ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chips__opt {
  position: relative;
  cursor: pointer;
}
.chips__opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chips__opt span {
  display: inline-block;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: #fff;
  font-size: 0.86rem;
  color: var(--ink-2);
  transition:
    border-color var(--t) var(--ease),
    background var(--t) var(--ease),
    color var(--t) var(--ease),
    transform var(--t) var(--ease);
}
.chips__opt:hover span {
  border-color: var(--muted-2);
  transform: translateY(-1px);
}
.chips__opt input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.chips__opt input:focus-visible + span {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

/* ---------- Consent ---------- */
.acheck {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  margin-top: 4px;
}
.acheck input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.acheck__box {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--line-2);
  background: #fff;
  display: grid;
  place-items: center;
  color: #fff;
  transition:
    background var(--t) var(--ease),
    border-color var(--t) var(--ease);
}
.acheck__box svg {
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.18s var(--ease),
    transform 0.24s var(--ease);
}
.acheck input:checked + .acheck__box {
  background: var(--cyan);
  border-color: var(--cyan);
}
.acheck input:checked + .acheck__box svg {
  opacity: 1;
  transform: none;
}
.acheck input:focus-visible + .acheck__box {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.acheck__text {
  font-size: 0.84rem;
  color: var(--muted);
  line-height: 1.5;
}
.acheck__text a {
  color: var(--blue);
}
.field__err--consent {
  margin-top: 6px;
}
.field__err--consent:not(:empty) {
  display: block;
}

/* ---------- Footer actions ---------- */
.aform__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 22px;
}
.aform__back {
  padding: 14px 20px;
}
.aform__next,
.aform__send {
  margin-left: auto;
}
.aform__status {
  font-size: 0.85rem;
  margin: 12px 0 0;
  min-height: 1em;
}
.aform__status.is-error {
  color: #c02626;
}
.aform__status.is-ok {
  color: #2f7f63;
}

/* ---------- Success state ---------- */
.adone {
  padding-top: 40px;
  padding-bottom: 40px;
  text-align: center;
  margin: auto 0;
}
.adone__tick {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  background: var(--cyan);
  color: #fff;
  position: relative;
  animation: tickPop 0.5s var(--ease-out-soft) both;
}
.adone__tick::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--cyan);
  opacity: 0;
  animation: tickRing 1.5s var(--ease) 0.28s infinite;
}
.adone__tick svg {
  animation: tickDraw 0.44s var(--ease-out-soft) 0.16s both;
}
@keyframes tickPop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tickDraw {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes tickRing {
  0% {
    opacity: 0.55;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.28);
  }
}
.adone__title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
}
.adone__text {
  color: var(--muted);
  font-size: 0.94rem;
  max-width: 40ch;
  margin: 12px auto 0;
}
.adone__ref {
  display: inline-block;
  margin: 20px 0 0;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  font-size: 0.82rem;
  color: var(--muted);
}
.adone__ref b {
  color: var(--ink);
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.adone__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 26px;
}

/* ---------- Right: the role ---------- */
.kmodal__side {
  position: relative;
  overflow-y: auto;
  min-height: 0;
  max-height: var(--kmodal-h);
  background: linear-gradient(
    158deg,
    var(--blue-900) 0%,
    var(--blue) 46%,
    #0d8fc0 100%
  );
  color: #fff;
}
/* .kmodal__sidefx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      520px 320px at 108% -8%,
      rgba(111, 220, 255, 0.5),
      transparent 62%
    ),
    radial-gradient(
      420px 300px at -18% 108%,
      rgba(0, 180, 229, 0.38),
      transparent 60%
    );
} */
.kmodal__sidebody {
  position: relative;
  padding: clamp(28px, 3vw, 40px);
}
/* Content arrives just after the dialog, one block at a time. */
body.is-apply .kmodal__sidebody > * {
  animation: sideIn 0.5s var(--ease-out-soft) both;
}
body.is-apply .kmodal__sidebody > *:nth-child(1) {
  animation-delay: 0.1s;
}
body.is-apply .kmodal__sidebody > *:nth-child(2) {
  animation-delay: 0.16s;
}
body.is-apply .kmodal__sidebody > *:nth-child(3) {
  animation-delay: 0.22s;
}
body.is-apply .kmodal__sidebody > *:nth-child(4) {
  animation-delay: 0.28s;
}
body.is-apply .kmodal__sidebody > *:nth-child(5) {
  animation-delay: 0.34s;
}
body.is-apply .kmodal__sidebody > *:nth-child(6) {
  animation-delay: 0.4s;
}
body.is-apply .kmodal__sidebody > *:nth-child(7) {
  animation-delay: 0.46s;
}
@keyframes sideIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.kside__title {
  /* The global heading rule paints h3 in ink, which is unreadable on the
     gradient, the pane's inherited white has to be restated. */
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(1.24rem, 1.8vw, 1.5rem);
  line-height: 1.2;
  padding-right: 44px;
}
.kside__summary {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.84);
}

.kside__meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 14px;
  margin: 24px 0 0;
  padding: 20px 0;
  border-block: 1px solid rgba(255, 255, 255, 0.18);
}
.kside__meta dt {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 600;
}
.kside__meta dt .k-icon {
  opacity: 0.8;
}
.kside__meta dd {
  margin: 5px 0 0;
  font-weight: 700;
  font-size: 0.93rem;
  font-family: var(--font-display);
}

.kside__block {
  margin-top: 24px;
}
.kside__block h4 {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  font-weight: 700;
  margin-bottom: 11px;
}
.kside__block p {
  font-size: 0.89rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}
.kside__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kside__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.89rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
}
.kside__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42em;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.kside__list li::after {
  content: "";
  position: absolute;
  left: 4.4px;
  top: 0.72em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan-soft);
}
.kside__foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
}

/* Scrollbars inside the dialog, so they do not look like OS furniture. */
.kmodal__main::-webkit-scrollbar,
.kmodal__side::-webkit-scrollbar {
  width: 9px;
}
.kmodal__main::-webkit-scrollbar-thumb {
  background: var(--line-2);
  border-radius: 9px;
  border: 3px solid #fff;
}
.kmodal__side::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 9px;
}
.kmodal__side::-webkit-scrollbar-track {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* One column: the form first, the role beneath it, and the whole dialog
     scrolls rather than two panes fighting over the same gesture. */
  .kmodal__dialog {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow-y: auto;
    height: auto;
    max-height: 94vh;
  }
  .kmodal__main,
  .kmodal__side {
    overflow: visible;
    max-height: none;
  }
  .kmodal__rail {
    top: -1px;
  }
  .kmodal__x {
    background: #fff;
    border-color: var(--line-2);
    color: var(--ink);
  }
  .kmodal__x:hover {
    background: var(--paper-2);
  }
  .kside__title {
    padding-right: 0;
  }
}

@media (max-width: 700px) {
  .job {
    padding: 18px 20px;
  }
  .job__go {
    margin-left: 0;
  }
  .kside__meta {
    grid-template-columns: 1fr 1fr;
  }
  .jobs-bar__filters {
    flex: 1 1 100%;
  }
  /* The row went full width but the selects kept their 250px basis, so they
     sat in a column of half-empty pills. One per row, each the full width. */
  .jobs-bar__filters .field {
    flex: 1 1 100%;
  }
  .jobs-bar__filters .field select,
  .jobs-bar__filters .ksel,
  .jobs-bar__filters .ksel__btn {
    width: 100%;
  }
  .jobs-bar {
    align-items: stretch;
  }
  .aform__foot {
    flex-wrap: wrap;
  }
  .aform__next,
  .aform__send {
    flex: 1;
  }
}

@media (max-width: 520px) {
  .kmodal {
    padding: 0;
  }
  /* Edge to edge, but still content-height, a fixed height would shrink the
     auto rows and let the form spill over the role pane. */
  .kmodal__dialog {
    border-radius: 0;
    border: 0;
    height: auto;
    max-height: 100vh;
  }
  .ksteps {
    gap: 8px;
  }
  .ksteps__item {
    font-size: 0.78rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .kmodal__dialog,
  .aform__step.is-current,
  body.is-apply .kmodal__sidebody > *,
  .adone__tick,
  .adone__tick svg {
    animation: none;
    transition: none;
  }
  .adone__tick::after {
    animation: none;
    opacity: 0;
  }
}

/* The open country list has to sit above the form's footer button, which comes
   later in the document. Raising the field alone does nothing: .aform__step
   carries a transform for the step slide, and that makes it a stacking
   context, so a z-index inside it can only win against its own siblings.
   The step itself is what has to come forward. */
.kmodal .aform__step.is-current {
  position: relative;
  z-index: 20;
}
.kmodal .field--tel {
  position: relative;
  z-index: 2;
}