/*
  orkhon.ai careers: the open roles and the application form, filled by
  careers.js from Orkhon's applicant system. Loaded after site.css and uses its
  tokens only: kit colours, the two kit fonts, no gradients, glow, shadows or
  transparency.

  Shape rule: square corners for everything, as on the rest of the site. The
  one round shape is the radio mark inside a role tile, because it is the
  radio symbol itself.

  Grid: from 1024 px the section uses the site's 12 columns. The heading takes
  columns 1 to 3 and everything else starts on column 4, the site's shared
  reading column (as the contact block does).

  Actions: "Send application" is the page's one filled action (button-primary).
  "Apply for this role", "Try again" and the file chooser are outlined, like
  the router choices on System One.

  Motion: none of its own. Every state (loading, empty, error, sending,
  confirmation, a role's ad opening or closing) changes at once. The only movement is the press feedback of
  the buttons, which follows touch and is removed under reduced motion.
*/

.roles {
  border-top: 1px solid var(--ink);
}

.roles__grid {
  display: grid;
  gap: var(--space-lg);
}

.roles__side,
.roles__main {
  display: grid;
  align-content: start;
  min-width: 0;
}

@media (min-width: 1024px) {
  .roles__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }

  .roles__side {
    grid-column: 1 / span 3;
  }

  .roles__main {
    grid-column: 4 / span 9;
  }
}

/* Everything the module shows and hides stays hidden while it is hidden, even
   where a rule below gives it a display value. */
.roles [hidden] {
  display: none;
}

/* Location choice: only when the open roles are at more than one place. */

.ats-branches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-sm);
  margin-bottom: var(--space-md);
}

.ats-branches label {
  font-weight: 500;
}

.ats-branches select {
  min-width: min(100%, 16rem);
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--lichen);
  border-radius: 0;
  background-color: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
}

/* The list: one ruled row per role. The row is the role's button: its title, then
   type · pay and the place; a plus that turns to a minus while its ad is open.
   One ad is open at a time, under its row: the role facts on the left and the
   description on the right from 768 px. Opening and closing change at once. */

.ats-list {
  display: grid;
}

.ats-opening {
  border-top: 1px solid var(--ink);
}

.ats-opening-title {
  margin: 0;
  font: inherit;
}

.ats-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-md);
  width: 100%;
  min-height: 48px;
  padding: var(--space-md) 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ats-row__text {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.ats-row__title {
  font-size: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Open: the facts under the row repeat type, pay and place, so the row shows the title only, close to its facts. */
.ats-row[aria-expanded="true"] {
  padding-bottom: var(--space-xs);
}

.ats-row[aria-expanded="true"] .ats-row__meta {
  display: none;
}

.ats-row__icon {
  position: relative;
  width: 20px;
  height: 20px;
  margin-top: 0.35em;
}

.ats-row__icon::before,
.ats-row__icon::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: currentColor;
}

.ats-row__icon::after {
  top: 0;
  left: 9px;
  width: 2px;
  height: 20px;
}

.ats-row[aria-expanded="true"] .ats-row__icon::after {
  display: none;
}

@media (hover: hover) and (pointer: fine) {
  .ats-row:hover {
    color: var(--kok);
  }

  .ats-row:hover .ats-row__title {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
  }
}

.ats-ad {
  display: grid;
  gap: var(--space-md);
  padding-bottom: var(--space-lg);
}

.ats-opening-meta,
.ats-row__meta,
.ats-choice-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lichen);
}

/* Role facts under the title: a small mono label over each value, so type, pay and dates read at a glance. On a
   phone two aligned columns, the place across both; wider, each fact takes its own width and the row wraps between
   facts. A date or a place never breaks mid-phrase. */

.ats-opening-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: row dense;
  gap: var(--space-sm) var(--space-md);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--stone);
}

.ats-fact {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
}

.ats-fact dt {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lichen);
}

.ats-fact dd {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.ats-fact-location {
  grid-column: 1 / -1;
}

/* Phone: the two-column facts first (type, pay, dates), the place across both columns last, so no cell stays empty. */
@media (max-width: 767px) {
  .ats-fact-location {
    order: 1;
  }
}

@media (min-width: 768px) {
  .ats-opening-facts {
    display: flex;
    flex-wrap: wrap;
  }
}

.ats-opening-body {
  display: grid;
  gap: var(--space-sm);
  justify-items: start;
  align-content: start;
  min-width: 0;
}

/* The description, built by the module as headings, paragraphs and lists, never from the ATS markup. */

.ats-opening-desc {
  max-width: 36em;
  overflow-wrap: anywhere;
}

.ats-opening-desc > * + * {
  margin-top: var(--space-sm);
}

.ats-opening-desc p,
.ats-desc-list li {
  text-wrap: pretty;
}

/* A heading sits close to what it introduces and far from what came before. */
.ats-opening-desc > .ats-desc-heading {
  margin-top: var(--space-md);
  margin-bottom: 0; /* the site reset covers h1-h3 only */
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}

.ats-opening-desc > .ats-desc-heading + * {
  margin-top: 6px;
}

.ats-desc-list {
  display: grid;
  gap: 12px;
}

.ats-desc-list li {
  position: relative;
  padding-inline-start: 1.25em;
}

.ats-desc-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.75em;
  width: 0.5em;
  height: 1px;
  background-color: var(--ink);
}

.ats-opening .ats-apply {
  margin-top: var(--space-xs);
}

@media (min-width: 768px) {
  .ats-ad {
    grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
    column-gap: var(--gutter);
    align-items: start;
  }

  /* Side by side, the description starts on the same Stone line as the facts. */
  .ats-ad > .ats-opening-body {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--stone);
  }
}

/* Outlined actions: "Apply for this role" and "Try again". */

.ats-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    transform 160ms var(--ease-out);
}

.ats-secondary:active {
  transform: scale(0.97);
}

.ats-secondary:disabled {
  border-color: var(--lichen);
  color: var(--lichen);
  cursor: default;
  transform: none;
}

@media (hover: hover) and (pointer: fine) {
  .ats-secondary:not(:disabled):hover {
    border-color: var(--kok);
    color: var(--kok);
  }
}

/* Loading: the shape of two rows in Stone, shown only while the list loads. */

.ats-skeleton {
  display: grid;
}

.ats-bone {
  display: grid;
  gap: 12px;
  padding-block: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--stone);
}

.ats-bone span {
  display: block;
  width: 62%;
  height: 16px;
  background-color: var(--stone);
}

.ats-bone span:first-child {
  width: 38%;
  height: 32px;
}

.ats-bone span:last-child {
  width: 80%;
}

/* Without JavaScript. */

.ats-note {
  display: grid;
  gap: var(--space-xs);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink);
}

.ats-note__title {
  font-size: clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.ats-note p {
  max-width: 36em;
}

/* No open roles: the first public state, set as a finished Paper plate with
   the stele, not as a gap in the page. */

.ats-empty {
  display: grid;
  gap: var(--space-md);
  align-items: end;
  padding: var(--space-lg) var(--space-md);
  background-color: var(--paper);
  border-top: 1px solid var(--ink);
}

.ats-empty__text {
  display: grid;
  gap: var(--space-sm);
  min-width: 0;
}

.ats-empty__title {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ats-empty__text p {
  max-width: 30em;
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  color: var(--lichen);
  text-wrap: pretty;
}

.ats-empty__mark {
  grid-row: 1;
  width: 48px;
}

@media (min-width: 768px) {
  .ats-empty {
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: var(--space-lg);
    min-height: 320px;
    padding: var(--space-lg);
  }

  .ats-empty__mark {
    grid-row: auto;
    width: 104px;
  }
}

/* Status: loading, errors and the confirmation. */

.ats-status {
  display: grid;
  gap: var(--space-xs);
}

.ats-status:focus {
  outline: none;
}

.ats-status[data-state="loading"] {
  padding-block: var(--space-sm);
  color: var(--lichen);
}

.ats-status[data-state="error"] {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-top: 2px solid var(--ink);
  background-color: var(--white);
}

.ats-status-title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.ats-status-text {
  max-width: 36em;
}

.ats-status-list {
  display: grid;
  gap: 4px;
}

/* A wrapped message stays one block with its own room above and below, so two
   messages never read as one. */
.ats-status-list a,
.ats-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 8px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration-color: currentColor;
}

.ats-status-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
}

/* The confirmation is the kit's dark section: it is the one moment the page
   says the application arrived. */
.ats-status[data-state="success"] {
  gap: var(--space-sm);
  margin-top: var(--space-md);
  padding: clamp(32px, 4vw, 56px);
  background-color: var(--ink);
  color: var(--limestone);
}

.ats-status[data-state="success"] .ats-status-title {
  max-width: 20em;
  margin-bottom: var(--space-xs);
  font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.ats-status[data-state="success"] .ats-status-text {
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
}

/* The form */

.ats-form {
  display: grid;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--ink);
}

.ats-form__title {
  font-size: clamp(1.875rem, 1.2rem + 2.2vw, 3.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.ats-roles {
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.ats-roles legend,
.ats-field label {
  padding: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.ats-roles legend {
  margin-bottom: var(--space-xs);
}

.req {
  font-weight: 400;
  color: var(--lichen);
}

/* Role tiles: the radio itself is the tile's frame and fills it, so the whole
   tile is the control (pressing, focus ring); the text sits above it and lets
   presses through. */
.ats-choices {
  display: grid;
  gap: var(--space-xs) var(--gutter);
}

.ats-choice {
  position: relative;
  display: grid;
  min-height: 72px;
  background-color: var(--white);
  color: var(--ink);
}

.ats-choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 1px solid var(--lichen);
  border-radius: 0;
  background-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.ats-choice label {
  position: relative;
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 14px 18px 14px 52px;
  pointer-events: none;
}

.ats-choice label::before,
.ats-choice label::after {
  content: "";
  position: absolute;
  top: 50%;
  border-radius: 999px;
}

.ats-choice label::before {
  left: 18px;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 2px solid var(--ink);
}

.ats-choice label::after {
  left: 24px;
  width: 8px;
  height: 8px;
  margin-top: -4px;
}

.ats-choice-title {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

/* Selected reads as a choice, not a button: the tile stays white, its outline
   turns Ink and the radio fills. */
.ats-choice input:checked {
  border: 2px solid var(--ink);
}

.ats-choice:has(input:checked) label::after {
  background-color: var(--ink);
}

.ats-choice input:disabled {
  cursor: default;
}

.ats-roles[data-invalid] .ats-choice input {
  border: 2px solid var(--ink);
}

@media (hover: hover) and (pointer: fine) {
  .ats-choice input:not(:checked):not(:disabled):hover {
    border-color: var(--kok);
  }
}

.ats-grid {
  display: grid;
  gap: var(--space-md) var(--gutter);
}

.ats-field {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-width: 0;
}

.ats-field input:not([type="file"]),
.ats-field textarea {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid var(--lichen);
  border-radius: 0;
  background-color: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.ats-field textarea {
  min-height: 168px;
  padding-block: 12px;
  resize: vertical;
}

.ats-field input[readonly],
.ats-field textarea[readonly] {
  background-color: var(--paper);
}

/* As specific as the field rule above (an element plus attribute), so the
   invalid border actually shows. */
.ats-field input[aria-invalid="true"],
.ats-field textarea[aria-invalid="true"] {
  border: 2px solid var(--ink);
}

.ats-hint {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--lichen);
}

/* A field's error: Ink, bold, behind a small solid square (the site's status
   marker, filled). */
.ats-err {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.ats-err::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  background-color: var(--ink);
  transform: translateY(-1px);
}

.ats-err:empty {
  display: none;
}

.ats-field input[type="file"] {
  width: 100%;
  min-height: 60px;
  padding: 7px 14px 7px 7px;
  border: 1px solid var(--lichen);
  border-radius: 0;
  background-color: var(--white);
  color: var(--lichen);
  font: inherit;
  font-size: 1rem;
  cursor: pointer;
}

.ats-field input[type="file"]::file-selector-button {
  min-height: 44px;
  margin-right: 14px;
  padding: 0 18px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background-color: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
}

.ats-field input[type="file"]:disabled,
.ats-field input[type="file"]:disabled::file-selector-button {
  cursor: default;
}

.ats-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-sm);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.ats-remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background-color: transparent;
  color: var(--kok);
  font: inherit;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}

@media (min-width: 768px) {
  .ats-choices,
  .ats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ats-wide {
    grid-column: 1 / -1;
  }
}

/* Honeypot: off-screen, out of the tab order and the accessibility tree;
   people never see or fill it. */
.ats-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ats-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--stone);
}

.ats-send {
  min-height: 56px;
  padding-inline: 28px;
  font-family: inherit;
  cursor: pointer;
}

.ats-send:disabled {
  background-color: var(--lichen);
  color: var(--white);
  cursor: progress;
  transform: none;
}

.ats-privacy {
  flex: 1 1 22em;
  max-width: 34em;
  font-size: 1rem;
  line-height: 1.55;
}

/* The address in the privacy line keeps the sentence in place and gets a
   transparent 46 px tall hit area. */
.ats-mail {
  position: relative;
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  text-decoration-color: currentColor;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .ats-opening .ats-apply,
  .ats-send {
    width: 100%;
  }
}

/* Reduced motion: keep the colour feedback, drop the press scale. */

@media (prefers-reduced-motion: reduce) {
  .ats-secondary {
    transition:
      background-color 150ms ease,
      color 150ms ease,
      border-color 150ms ease;
  }

  .ats-secondary:active {
    transform: none;
  }
}

/* Role rows and choices: "Type · Pay" on one line, the place on the next. */
.ats-meta-line {
  display: block;
}