/* Kadima Payments — Careers.
   Page-specific, loaded only by /careers and the two position pages, following
   the apply.css precedent. Everything here builds on the tokens and components
   already defined in redesign.css (--green, --line, --card, .btn, .field,
   .devform, .bento-card); nothing re-declares a colour or a font. */

/* ── Job cards ─────────────────────────────────────────────── */

.job-list { display: grid; gap: 20px; }
@media (min-width: 900px) { .job-list { grid-template-columns: 1fr 1fr; } }

.job-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius, 20px);
  padding: 32px;
  transition: background .25s cubic-bezier(.4,0,.2,1), border-color .25s cubic-bezier(.4,0,.2,1);
}
.job-card:hover, .job-card:focus-within {
  background: var(--card-hover);
  border-color: var(--line-hover);
}

.job-card-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 18px;
}
.job-dept {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-mute);
}
.job-card-head .status-pill { margin-left: auto; }

/* The commission-only basis is the single most important fact about one of
   these roles. It is stated on the card, not buried on the detail page, so
   nobody invests time in an application before they know. */
.job-pill-commission {
  border-color: rgba(39,169,226,.35);
  color: #7cc9ee;
  background: rgba(39,169,226,.08);
}

.job-card h3 { font-size: 1.375rem; line-height: 1.3; letter-spacing: -.02em; margin: 0 0 12px; }
.job-card h3 a { color: var(--text); text-decoration: none; }
.job-card h3 a:hover { color: var(--green); }
.job-card h3 a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.job-summary { color: var(--text-dim); font-size: 15px; line-height: 1.65; margin: 0 0 20px; }

.job-meta { display: grid; gap: 10px; margin: 0 0 20px; }
.job-meta > div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; align-items: start; }
.job-meta dt { font-size: 12px; font-weight: 600; color: var(--text-mute); text-transform: uppercase; letter-spacing: .05em; padding-top: 1px; }
.job-meta dd { margin: 0; font-size: 14px; color: var(--text-dim); line-height: 1.5; }

.job-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0 0 24px; }
.job-tags li {
  font-size: 12.5px; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px;
}

.job-card .btn { margin-top: auto; align-self: flex-start; }

/* ── Values list ───────────────────────────────────────────── */

.values-grid { display: grid; gap: 14px; }
@media (min-width: 720px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }

.value-item {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px;
  background: rgba(255,255,255,.02);
}
.value-item svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--green); }
.value-item h3 { font-size: 15px; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.value-item p { font-size: 13.5px; color: var(--text-mute); line-height: 1.55; margin: 0; }

/* ── Position detail pages ─────────────────────────────────── */

.job-header-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0;
  list-style: none; padding: 0;
}
.job-header-meta li {
  font-size: 13px; color: var(--text-dim);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}

/* A standing note that repeats the commission basis at the top of the AE page.
   Informational, not a warning: this is the deal, stated plainly. */
.job-callout {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid rgba(39,169,226,.3);
  background: rgba(39,169,226,.06);
  border-radius: 14px; padding: 16px 18px; margin: 24px 0 0;
}
.job-callout svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: #7cc9ee; }
.job-callout p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.job-callout strong { color: var(--text); }

.job-body { display: grid; gap: 44px; }
.job-block h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.02em; margin: 0 0 16px; }
.job-block h3 { font-size: 1.05rem; margin: 24px 0 10px; letter-spacing: -.01em; }
.job-block p { color: var(--text-dim); font-size: 15.5px; line-height: 1.75; margin: 0 0 14px; }

.job-ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 11px; }
.job-ul li {
  position: relative; padding-left: 26px;
  color: var(--text-dim); font-size: 15px; line-height: 1.65;
}
.job-ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #31be72, #27a9e2);
}

.job-outcomes { counter-reset: outcome; list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.job-outcomes li {
  counter-increment: outcome;
  position: relative; padding-left: 42px;
  color: var(--text-dim); font-size: 15px; line-height: 1.65;
}
.job-outcomes li::before {
  content: counter(outcome); position: absolute; left: 0; top: -1px;
  width: 26px; height: 26px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--green);
  background: rgba(49,190,114,.1); border: 1px solid rgba(49,190,114,.22);
}

/* ── Application form ──────────────────────────────────────── */

.apply-panel {
  border: 1px solid var(--line); border-radius: 24px;
  background: var(--card); padding: clamp(24px, 4vw, 44px);
}

.fieldset-block { border: 0; padding: 0; margin: 0 0 8px; }
.fieldset-block legend {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-mute); padding: 0; margin-bottom: 14px;
}

/* Radio pairs for the yes/no screening questions. The whole control is the
   label, so the hit target is the visible box rather than a 13px circle. */
.yesno { display: flex; gap: 10px; flex-wrap: wrap; }
.yesno label {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line); border-radius: 11px;
  padding: 10px 18px; cursor: pointer;
  font-size: 14px; font-weight: 500; color: var(--text-dim);
  transition: border-color .2s, background .2s, color .2s;
  margin-bottom: 0;
}
.yesno input { accent-color: #31be72; width: 16px; height: 16px; margin: 0; }
.yesno label:hover { border-color: var(--line-hover); color: var(--text); }
.yesno label:has(input:checked) {
  border-color: rgba(49,190,114,.55);
  background: rgba(49,190,114,.08);
  color: var(--text);
}
/* Focus must be visible on the box, not just the hidden-ish input. */
.yesno label:focus-within { outline: 2px solid var(--green); outline-offset: 2px; }

.field-hint { font-size: 12.5px; color: var(--text-mute); margin: 6px 0 0; line-height: 1.5; }

/* Per-field validation messages, announced to screen readers via aria-live. */
.field-msg { display: none; font-size: 12.5px; color: #fca5a5; margin: 6px 0 0; }
.field.has-error .field-msg { display: block; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: rgba(239,68,68,.55); }

/* File input: the native control is unstyleable across browsers, so the label
   carries the appearance and the input stays a real, focusable file input. */
.file-field input[type="file"] {
  width: 100%; font-size: 14px; color: var(--text-dim);
  padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,.03); border: 1px dashed var(--line);
  cursor: pointer;
}
.file-field input[type="file"]::file-selector-button {
  font: inherit; font-size: 13px; font-weight: 600;
  margin-right: 12px; padding: 7px 14px; cursor: pointer;
  color: var(--text); background: rgba(255,255,255,.06);
  border: 1px solid var(--line); border-radius: 8px;
}
.file-field input[type="file"]:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.consent-row { display: flex; gap: 11px; align-items: flex-start; margin: 4px 0 0; }
.consent-row input { margin-top: 3px; width: 16px; height: 16px; accent-color: #31be72; flex: none; }
.consent-row label { font-size: 13.5px; color: var(--text-mute); line-height: 1.6; margin: 0; font-weight: 400; }
.consent-row a { color: var(--green); }

/* ── Closed-role state ─────────────────────────────────────── */

.role-closed {
  border: 1px solid var(--line); border-radius: 20px;
  background: rgba(255,255,255,.02); padding: 32px; text-align: center;
}
.role-closed h2 { font-size: 1.25rem; margin: 0 0 10px; }
.role-closed p { color: var(--text-mute); font-size: 15px; margin: 0 0 20px; }

/* ── Small screens ─────────────────────────────────────────── */

@media (max-width: 640px) {
  .job-card { padding: 24px; }
  .job-meta > div { grid-template-columns: 1fr; gap: 2px; }
  .devform-grid { grid-template-columns: 1fr; }
}