/* The application form's card, shared by the careers page
   (/join-our-team/) and every role's own page (/join-our-team/<slug>/),
   2026-10-15. One stylesheet so the two copies of the form cannot drift
   apart, which they did for a month in 2026-09. The fields, the
   honeypot and the success and error notes are /css/fmc.css's; this is
   the card, the resume picker and the human check. js/fmc.js drives both. */
.jt-apply{min-width:0}
.apply-card{
  background:#fff; border:1px solid var(--paper-line); border-radius:24px;
  padding:clamp(26px,3vw,34px) clamp(22px,3.2vw,40px);
  box-shadow:0 22px 50px -32px rgba(10,17,32,.26);
}
.jt-apply__title{font-size:clamp(25px,2.6vw,32px); font-weight:650; letter-spacing:-.02em; line-height:1.12; margin:0 0 8px}
.jt-apply__sub{font-size:15.5px; color:var(--mid-on-paper); line-height:1.6; max-width:52ch; margin:0 0 22px}
.jt-apply__foot{margin-top:22px; padding-top:18px; border-top:1px solid var(--paper-line); font-size:14px; color:var(--mid-on-paper); line-height:1.6}
.jt-apply__foot a{color:var(--teal-ink); font-weight:600; text-decoration:none; white-space:nowrap}
.jt-apply__foot a:hover{text-decoration:underline}
.file-hint{font-size:12.5px; color:var(--faint-on-paper); margin-top:6px}
input[type="file"]{
  width:100%; font-family:var(--font-d); font-size:13.5px; color:var(--mid-on-paper);
}
input[type="file"]::file-selector-button{
  font-family:var(--font-d); font-size:13.5px; font-weight:600; color:var(--dark-on-paper);
  background:rgba(255,255,255,.5); border:1px solid var(--paper-line); border-radius:980px;
  padding:8px 16px; margin-right:12px; cursor:pointer; transition:border-color .18s;
}
input[type="file"]::file-selector-button:hover{border-color:var(--mid-on-paper)}
/* The resume picker (2026-10-05): up to three files, each on its own
   line. js/fmc.js turns it on (is-on); until it does, or without
   JavaScript, the input above shows exactly as it always has. Once on,
   the real input lies over the "Choose files" row, invisible, so it still
   takes the click, the keyboard, a screen reader and a phone's picker.
   Each file then gets a line under it: the name (shortened, never the
   size), the size, a remove button, and a check mark in the Send
   button's teal at the form's right edge. */
.file-pick{position:relative}
.file-pick__btn,.file-pick__none{display:none}
.file-pick.is-on{display:flex; align-items:center; gap:12px; min-height:38px}
.file-pick.is-on input[type="file"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0;
  opacity:0; cursor:pointer; z-index:1;
}
.file-pick.is-on .file-pick__btn{
  display:inline-block; flex:0 0 auto;
  font-family:var(--font-d); font-size:13.5px; font-weight:600; color:var(--dark-on-paper);
  background:rgba(255,255,255,.5); border:1px solid var(--paper-line); border-radius:980px;
  padding:8px 16px; transition:border-color .18s;
}
.file-pick.is-on:hover .file-pick__btn{border-color:var(--mid-on-paper)}
.file-pick.is-on input:focus-visible ~ .file-pick__btn{outline:2px solid var(--fmc-teal); outline-offset:2px}
.file-pick.is-on .file-pick__none:not([hidden]){
  display:inline; font-family:var(--font-d); font-size:13.5px; color:var(--mid-on-paper); white-space:nowrap;
}
.file-list{list-style:none; margin:10px 0 0; padding:0}
.file-list[hidden]{display:none}
.file-item{display:flex; align-items:center; gap:6px; min-height:40px; border-top:1px solid var(--paper-line)}
.file-item:last-child{border-bottom:1px solid var(--paper-line)}
/* Basis and width 0: a long name must never be what sizes the form. On a
   phone the form's column grows to fit its widest unbreakable content, and
   a one-line file name would otherwise push the card off the screen. */
.file-item__name{
  display:flex; flex:1 1 0; width:0; min-width:0; white-space:nowrap;
  font-family:var(--font-d); font-size:13.5px; color:var(--dark-on-paper);
}
.file-item__file{min-width:0; overflow:hidden; text-overflow:ellipsis}
.file-item__size{flex:0 0 auto; margin-left:.35em; color:var(--mid-on-paper)}
.file-item__x{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; margin:0; padding:0; border:0; border-radius:50%;
  background:transparent; color:var(--mid-on-paper); cursor:pointer;
  transition:background-color .18s, color .18s;
}
.file-item__x:hover{background:rgba(0,0,0,.06); color:var(--dark-on-paper)}
.file-item__x:focus-visible{outline:2px solid var(--fmc-teal); outline-offset:1px}
.file-item__x svg{width:14px; height:14px; display:block}
.file-item__ok{flex:0 0 auto; display:inline-flex; color:var(--fmc-teal)}
.file-item__ok svg{width:22px; height:22px; display:block}
/* High contrast forces the disc to the text colour; the tick takes the
   background colour so it still shows on a dark theme. */
@media (forced-colors: active){ .file-item__ok path{stroke:Canvas} }
.file-err{font-size:12.5px; color:#B4433A; margin-top:6px}
.file-err[hidden]{display:none}
.file-live,.file-status{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap}
/* While a send is on its way the list is what is being sent, so it
   cannot be changed until the answer comes back. */
.file-pick.is-on input[type="file"]:disabled{cursor:default}
.file-pick.is-on input:disabled ~ .file-pick__btn{opacity:.55}
.file-item__x:disabled{opacity:.4; cursor:default; background:transparent}
/* A refusal from the server names the file; a long unbroken name must
   wrap rather than widen the form past a phone's screen. */
.apply-card .form-error{overflow-wrap:anywhere}
/* The human check (Cloudflare Turnstile, 2026-10-05). The slot takes no
   room until js/fmc.js draws the widget into it, so with the server's keys
   unset the form looks exactly as it always has. The widget fills the
   form's width; it needs 300px, so a narrow phone gets a little less card
   padding to keep the form at least that wide. */
.human-check{margin:0}
.human-check.is-on{margin-bottom:18px}
.human-slot{width:100%}
.human-msg{font-size:12.5px; color:#B4433A; margin-top:6px}
.human-msg[hidden]{display:none}
@media (max-width:440px){ .apply-card{padding:24px 18px} }
/* Phones from 345 to 392px wide (iPhone SE and mini, most Androids): the
   form comes out a little under the widget's 300px, so the widget reaches
   into the card's padding, centred, by just what it needs (10px a side at
   360px). Narrower than that, js/fmc.js draws the compact widget. */
@media (min-width:345px) and (max-width:392px){
  .human-slot{min-width:300px; margin-left:min(0px, calc((100% - 300px) / 2))}
}