/* =====================================================================
   Nerve Media — Careers (/careers/)

   Loaded ONLY by the careers page, on top of the shared styles.css it
   takes its tokens, fonts and base from. The homepage pays nothing for
   this file, which is the same split admin.css already uses.

   The page borrows rather than invents: the card wash and 1px border
   come from .contact-panel, the two-tone display heading from .case-copy,
   .section-label / [data-reveal] / .ghost-button are used as they are.
   Sharp corners everywhere. No new design language.

   v0.8.3 cut the hero and the role grid: the page IS the application
   panel now, so it carries the page's own top padding and no top border.
   ===================================================================== */

.careers-main {
  position: relative;
  z-index: 2;
}

.careers-section {
  width: min(calc(100% - (var(--pad) * 2)), var(--max));
  margin: 0 auto;
  scroll-margin-top: 96px;
}

/* ---------------------------------------------------------------- form */
/* The panel is the whole page, so the top padding here is what clears the
   fixed header (74px tall plus its own 14px offset) rather than a gap
   between two sections. */
.careers-apply {
  display: grid;
  align-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(116px, 15vh, 168px) 0 clamp(48px, 7vh, 92px);
}

.apply-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  gap: clamp(26px, 4vw, 58px);
  align-items: start;
  padding: clamp(24px, 3.4vw, 46px);
  border-top: 1px solid rgba(var(--theme-fg-rgb), 0.22);
  border-bottom: 1px solid rgba(var(--theme-fg-rgb), 0.22);
  background:
    linear-gradient(90deg, rgba(var(--theme-fg-rgb), 0.07), transparent 54%),
    linear-gradient(180deg, rgba(var(--theme-fg-rgb), 0.05), transparent 42%);
  /* Same readability wash the contact panel uses: the nerve network reads
     as atmosphere behind the panel, never across the fields. */
  box-shadow: inset 0 0 0 100vmax rgba(var(--theme-bg-rgb), 0.66);
  transition: border-color 220ms ease;
}

.apply-aside h1 {
  max-width: 12ch;
  margin: 0 0 16px;
  font-family: var(--display);
  font-size: clamp(2.6rem, min(6vw, 10vh), 5rem);
  font-weight: 400;
  line-height: 0.88;
  text-transform: uppercase;
}

.apply-aside h1 em {
  display: block;
  color: rgba(var(--theme-fg-rgb), 0.42);
  font-style: normal;
}

.apply-aside > p {
  max-width: 42ch;
  margin: 0 0 22px;
  color: var(--soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

.apply-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--dark-line);
}

.apply-points li {
  display: grid;
  gap: 4px;
  padding: 13px 0;
  border-bottom: 1px solid var(--dark-line);
}

.apply-points strong {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.apply-points span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.5;
}

.apply-form {
  display: grid;
  gap: 16px;
}

.apply-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field > span {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: rgba(var(--theme-fg-rgb), 0.62);
  font-family: var(--body);
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.field > span i {
  color: rgba(var(--theme-fg-rgb), 0.34);
  font-size: 0.94em;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.2);
  border-radius: 0;
  background: rgba(var(--theme-fg-rgb), 0.035);
  color: rgb(var(--theme-fg-rgb));
  font: 600 0.98rem var(--body);
  outline: none;
  transition: border-color 200ms ease, background 200ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  min-height: 112px;
  line-height: 1.5;
  resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
  color: rgba(var(--theme-fg-rgb), 0.3);
  font-weight: 500;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: rgb(var(--theme-fg-rgb));
  background: rgba(var(--theme-fg-rgb), 0.07);
}

.field.is-invalid input,
.field.is-invalid select,
.field.is-invalid textarea,
.field.is-invalid .cv-drop {
  border-color: rgba(var(--theme-fg-rgb), 0.85);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-fg-rgb), 0.5);
}

.field select {
  padding-right: 42px;
  /* Chevron drawn in the mark, not fetched: appearance:none removed the
     native one and this page loads no icon font. currentColor cannot be
     used inside a data URI, so it is the dark theme's foreground. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='0.55'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px 17px;
  cursor: pointer;
}

.field select option {
  background: #0a0a0c;
  color: #fff;
}


/* ------------------------------------------------- areas (multi-select)
   A button that opens a panel of tick rows. It has to LOOK exactly like the
   selects beside it (same height, border, wash and chevron), because it
   sits in the same column and any difference reads as a broken control
   rather than a different one.

   The panel is absolutely positioned so opening it never reflows the form,
   and .field is the containing block for that. */
.field[data-field="areas"] {
  position: relative;
  z-index: 3;
}

.multi {
  position: relative;
}

.multi-trigger {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 11px 15px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.2);
  background: rgba(var(--theme-fg-rgb), 0.035);
  color: rgb(var(--theme-fg-rgb));
  font: 600 0.98rem var(--body);
  text-align: left;
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease;
}

.multi-trigger:hover {
  background: rgba(var(--theme-fg-rgb), 0.055);
}

.multi-trigger:focus-visible,
.multi.is-open .multi-trigger {
  border-color: rgb(var(--theme-fg-rgb));
  background: rgba(var(--theme-fg-rgb), 0.07);
  outline: none;
}

.multi-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.multi-value {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.multi-placeholder {
  color: rgba(var(--theme-fg-rgb), 0.3);
  font-weight: 500;
}

/* The picked areas, shown in the closed control. They are spans, not
   buttons: a button inside a button is invalid markup and the panel is one
   tap away, so a per-chip remove would buy nothing. */
.multi-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.28);
  background: rgba(var(--theme-fg-rgb), 0.07);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}

/* WHILE THE PANEL IS OPEN THE TRIGGER MUST NOT CHANGE HEIGHT. Chips wrap
   when the control is closed, which is what makes a five-area pick readable
   at a glance. But the panel is anchored to the bottom of the trigger, so a
   chip that wraps to a second line mid-session pushes the panel down and, on
   a 390px phone, straight off the bottom of the screen (measured: 38px of it,
   after three picks). Open, the value is one clipped line and the ticks below
   are the real answer anyway; closed, it goes back to showing everything. */
.multi.is-open .multi-value {
  flex-wrap: nowrap;
  overflow: hidden;
  mask-image: linear-gradient(90deg, #000 82%, transparent);
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent);
}

.multi.is-open .multi-chip {
  flex: 0 0 auto;
}

.multi-caret {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  transition: transform 220ms var(--ease);
}

.multi.is-open .multi-caret {
  transform: rotate(180deg);
}

.multi-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  z-index: 8;
  border: 1px solid rgb(var(--theme-fg-rgb));
  /* Opaque, not a wash: the nerve canvas runs behind this panel and tick
     rows over a moving network are unreadable. */
  background: #0a0a0c;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55);
}

.multi-panel[hidden] {
  display: none;
}

.multi-list {
  max-height: min(320px, 44vh);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
  -webkit-overflow-scrolling: touch;
}

.multi-list:focus {
  outline: none;
}

.multi-option {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 11px 15px;
  color: rgba(var(--theme-fg-rgb), 0.82);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.multi-option + .multi-option {
  border-top: 1px solid rgba(var(--theme-fg-rgb), 0.1);
}

.multi-option:hover,
.multi-option.is-active {
  background: rgba(var(--theme-fg-rgb), 0.08);
  color: rgb(var(--theme-fg-rgb));
}

.multi-option.is-picked {
  color: rgb(var(--theme-fg-rgb));
}

/* Monochrome, so the tick is the only mark: an empty square fills in and
   grows a check. No colour is doing any work here. */
.multi-box {
  position: relative;
  flex: 0 0 auto;
  width: 19px;
  height: 19px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.4);
  transition: background 160ms ease, border-color 160ms ease;
}

.multi-box::after {
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 10px;
  content: "";
  border: solid rgb(var(--theme-inverse-rgb));
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 140ms ease, transform 180ms var(--ease);
}

.multi-option.is-picked .multi-box {
  border-color: rgb(var(--theme-fg-rgb));
  background: rgb(var(--theme-fg-rgb));
}

.multi-option.is-picked .multi-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.multi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 15px;
  border-top: 1px solid rgba(var(--theme-fg-rgb), 0.16);
  background: rgba(var(--theme-fg-rgb), 0.045);
}

.multi-count {
  color: rgba(var(--theme-fg-rgb), 0.5);
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.multi-done {
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgb(var(--theme-fg-rgb));
  background: rgb(var(--theme-fg-rgb));
  color: rgb(var(--theme-inverse-rgb));
  font: 900 0.64rem var(--body);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.multi-done:focus-visible {
  outline: 2px solid rgb(var(--theme-fg-rgb));
  outline-offset: 2px;
}

.field.is-invalid .multi-trigger {
  border-color: rgba(var(--theme-fg-rgb), 0.85);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-fg-rgb), 0.5);
}

/* --------------------------------------------------------------- the CV */
.cv-drop {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 92px;
  padding: 16px 17px;
  border: 1px dashed rgba(var(--theme-fg-rgb), 0.28);
  background: rgba(var(--theme-fg-rgb), 0.025);
  color: rgb(var(--theme-fg-rgb));
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease,
    transform 200ms var(--ease);
}

.cv-drop:hover,
.cv-drop:focus-within,
.cv-drop.is-over {
  border-color: rgb(var(--theme-fg-rgb));
  background: rgba(var(--theme-fg-rgb), 0.07);
}

/* Armed the moment a file is dragged anywhere over the page, not only over
   the tile — the drop is accepted document-wide, so the target has to say
   so from wherever the person happens to be looking. */
.cv-drop.is-over {
  background: rgba(var(--theme-fg-rgb), 0.11);
  box-shadow: inset 0 0 0 1px rgba(var(--theme-fg-rgb), 0.45);
  transform: translateY(-1px);
}

body.is-dropping .apply-panel {
  border-color: rgba(var(--theme-fg-rgb), 0.4);
}

.cv-drop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.cv-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.22);
  background: rgba(var(--theme-fg-rgb), 0.05);
}

.cv-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cv-text {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.cv-title {
  overflow: hidden;
  font-size: 0.92rem;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cv-hint {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 500;
}

.cv-clear {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  margin-left: auto;
  padding: 8px 12px;
  border: 1px solid rgba(var(--theme-fg-rgb), 0.24);
  background: rgba(var(--theme-bg-rgb), 0.6);
  color: rgb(var(--theme-fg-rgb));
  font: 900 0.62rem var(--body);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease;
}

.cv-clear:hover,
.cv-clear:focus-visible {
  border-color: currentColor;
  background: rgba(var(--theme-fg-rgb), 0.1);
  outline: none;
}

.cv-drop.is-set {
  border-style: solid;
}

/* ------------------------------------------------------------- submit */
.apply-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 62px;
  margin-top: 4px;
  padding: 0 22px;
  border: 1px solid rgb(var(--theme-fg-rgb));
  background: rgb(var(--theme-fg-rgb));
  color: rgb(var(--theme-inverse-rgb));
  font: 900 0.78rem var(--body);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), opacity 200ms ease;
}

.apply-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 260ms var(--ease);
}

.apply-submit:hover,
.apply-submit:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(var(--theme-fg-rgb), 0.16);
  outline: none;
}

.apply-submit:hover svg,
.apply-submit:focus-visible svg {
  transform: translateX(4px);
}

.apply-submit:disabled {
  cursor: progress;
  opacity: 0.6;
  transform: none;
  box-shadow: none;
}

/* Progress hairline across the button while the CV uploads: a 3 MB file
   takes long enough on a Beirut connection that a dead button reads as a
   dead form. */
.apply-submit::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: var(--send, 0%);
  content: "";
  background: rgb(var(--theme-inverse-rgb));
  opacity: 0.36;
  transition: width 260ms linear;
}

.apply-note {
  margin: 0;
  color: rgba(var(--theme-fg-rgb), 0.42);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------- toast */
/* WHY IT IS PINNED TO THE VIEWPORT. This message used to be a line above the
   submit button, and the one time it mattered it was invisible: a field near
   the top of the form is wrong, focusing it scrolls the page up, and the
   explanation stays behind at the bottom. Fixed, it is wherever the person
   already is.

   Bottom on a phone (thumb end of the screen, and it clears the address bar
   with the safe-area inset), bottom-right on a desktop where the form is a
   column and the right side is empty. It is INVERTED - solid foreground with
   inverse text - because it is the only element on this page that has to win
   attention against a form full of outlined boxes, and monochrome has no red
   to spend. */
.apply-toast {
  position: fixed;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(14px + env(safe-area-inset-bottom));
  left: max(14px, env(safe-area-inset-left));
  z-index: 60;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  max-width: 460px;
  margin-left: auto;
  padding: 14px 12px 14px 15px;
  border: 1px solid rgb(var(--theme-fg-rgb));
  background: rgb(var(--theme-fg-rgb));
  color: rgb(var(--theme-inverse-rgb));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 200ms ease, transform 260ms var(--ease);
}

.apply-toast[hidden] {
  display: none;
}

.apply-toast.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Monochrome has no red, so the alert needs a shape rather than a colour:
   a small filled square, the same mark the console uses. */
.apply-toast-mark {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  background: currentColor;
}

.apply-toast-text {
  flex: 1 1 auto;
  margin: 0;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.45;
}

.apply-toast-text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.apply-toast-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: -2px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 160ms ease;
}

.apply-toast-close:hover,
.apply-toast-close:focus-visible {
  opacity: 1;
  outline: none;
}

.apply-toast-close svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
}

/* A toast that is going to clear itself says so, with a hairline that runs
   out. The sticky one - the WhatsApp fallback, which is a recovery path and
   not a notice - has no bar, because nothing is going to take it away. */
.apply-toast::after {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  content: "";
  background: rgb(var(--theme-inverse-rgb));
  opacity: 0.42;
  transform-origin: left center;
  transform: scaleX(1);
}

.apply-toast.is-shown::after {
  transition: transform 5200ms linear;
  transform: scaleX(0);
}

.apply-toast.is-sticky::after {
  display: none;
}

/* The other half of the answer: the toast says what is wrong, this says
   where. Short and small on purpose - it is a nudge toward the field, not a
   punishment. */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.field.is-shaking {
  animation: field-shake 420ms var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .field.is-shaking {
    animation: none;
  }

  .apply-toast {
    transition: none;
  }

  .apply-toast.is-shown::after {
    transition: none;
    transform: scaleX(0);
  }
}

.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* --------------------------------------------------------------- sent */
.apply-done {
  display: none;
  align-content: center;
  gap: 14px;
  min-height: 300px;
}

.apply-done.is-shown {
  display: grid;
}

.apply-form.is-hidden {
  display: none;
}

.apply-done h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.6rem, min(6vw, 10vh), 5rem);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}

.apply-done p {
  max-width: 44ch;
  margin: 0;
  color: var(--soft);
  font-size: 0.98rem;
  line-height: 1.6;
}

.apply-done-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}

/* --------------------------------------------------------- responsive */
@media (max-width: 1000px) {
  .apply-panel {
    grid-template-columns: 1fr;
  }

  .apply-aside h1 {
    max-width: none;
    font-size: clamp(2.4rem, 9vw, 3.6rem);
  }
}

@media (max-width: 640px) {
  .careers-apply {
    min-height: 0;
    padding-top: clamp(104px, 13vh, 136px);
  }

  .apply-row {
    grid-template-columns: 1fr;
  }

  .apply-panel {
    padding: 20px 18px 24px;
  }

  .cv-drop {
    flex-wrap: wrap;
    min-height: 0;
  }

  .cv-clear {
    margin-left: 0;
  }

  .apply-submit {
    min-height: 58px;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
  }

  /* A phone panel opens over a page that can scroll under it, so the list
     gets less height and the rows get more finger. */
  .multi-list {
    max-height: min(292px, 42vh);
  }

  .multi-option {
    min-height: 52px;
    padding: 12px 14px;
  }

  .multi-chip {
    font-size: 0.66rem;
    letter-spacing: 0.04em;
  }

  .multi-trigger {
    padding: 10px 13px;
  }

  .field textarea {
    min-height: 122px;
  }

  .apply-toast {
    max-width: none;
    padding: 13px 10px 13px 13px;
  }

  .apply-toast-text {
    font-size: 0.85rem;
  }

  .apply-toast-close {
    width: 34px;
    height: 34px;
  }
}