/* ==============================================================================================
   RAVENOR — CAREERS
   ----------------------------------------------------------------------------------------------
   Layout only. Every control on this page — the inputs, the buttons, the error line, the
   attachment list — is the shell's or the quote form's, unchanged. A careers page that invented
   its own field styling would be a second form system in the product, and a visitor would feel
   the difference before they could name it.

   The page is a LIST and a FORM, and nothing else. No hero, no statistics, no testimonial from a
   welder. A workshop with four employees does not need a recruitment marketing page; it needs the
   open roles to be legible and the form to be short enough to finish on a phone.
   ============================================================================================== */

/* ---------------------------------------------------------------- open roles */
.cr-list{display:grid;gap:clamp(12px,1.6vw,18px)}

/* A role is a ROW, not a card in a grid. There are rarely more than three, and three cards in a
   four-column grid is the hole the services page already had to solve. A full-width row also
   gives the description somewhere to go. */
.cr-item{display:grid;gap:10px;padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px);
  border:1px solid var(--border);border-radius:var(--r-surface,12px);
  background:linear-gradient(180deg,var(--raised),var(--surface));
  position:relative}
/* The same machined hairline the service rows use on hover — one decoration language across the
   product, drawn rather than glowed. */
.cr-item::before{content:'';position:absolute;top:0;left:0;right:100%;height:1px;
  background:linear-gradient(90deg,var(--sage),transparent);transition:right .45s var(--ease)}
.cr-item:hover::before{right:0}
/* Arriving from /careers/<slug> marks the role you came for. A left edge, not a background wash:
   the marking has to survive a photograph in greyscale and must not restate the sage accent. */
.cr-item.is-current{border-left:2px solid var(--sage);padding-left:calc(clamp(20px,2.4vw,28px) - 1px)}
.cr-item h3{font-size:clamp(19px,2.2vw,23px);color:var(--text-hi);letter-spacing:.01em;
  line-height:1.3}
.cr-item p{color:var(--card-tx);font-size:14.5px;line-height:1.7;max-width:64ch;
  white-space:pre-line}
.cr-metas{display:flex;flex-wrap:wrap;gap:8px 18px}
/* THE LABEL IS THE TARGET, not the 20x20 box inside it. 760px of clickable surface answered to
   nothing, so somebody reading the consent sentence had no way to tell that pressing it was what
   ticked the box. Quiet — this is a sentence, and a background on a sentence reads as a
   selection. */
.cr-check{transition:color .15s ease}
.cr-check:hover{color:var(--text-hi)}
.cr-check:hover input{accent-color:var(--sage-br,#C2DCC6)}
/* THE SECTIONS, on the role's own page only.

   A heading here is doing one job: letting somebody scanning for "do I qualify" land on
   Requirements without reading the rest. So it is small, spaced and quiet — the same treatment
   the rest of the site gives a label — and the thing that separates sections is SPACE rather
   than a rule, because five rules in a card is a table of contents nobody asked for. */
.cr-item.is-full{gap:14px}
.cr-sec{margin-top:6px}
.cr-sec-h{margin:0 0 7px;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--sage)}
.cr-sec p{margin:0}
.cr-sec-list{margin:0;padding-left:1.15em;display:grid;gap:5px;
  color:var(--card-tx);font-size:14.5px;line-height:1.7;max-width:64ch}
.cr-sec-list li::marker{color:var(--faint)}
/* Facts, set in the drawing register the rest of the site uses for measurements. Not chips:
   a location is not a filter and should not look like one. */
.cr-meta{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);
  font-variant-numeric:tabular-nums}
.cr-item .rv-btn{justify-self:start;margin-top:4px}

/* ---------------------------------------------------------------- the empty state */
.cr-none{max-width:62ch}
.cr-none .rv-h2{margin-bottom:12px}

/* ---------------------------------------------------------------- the form */
.cr-form{margin-top:clamp(18px,2.4vw,26px);max-width:760px;display:grid;gap:16px}
.cr-form .fld{display:grid;gap:7px;margin:0}
/* `:not(.rv-up-pick)`, because the attachment control's trigger is a <label> - the correct
   element, since a label is focusable and activates its input on Enter and Space for free -
   and this rule is more specific than `.rv-btn`. Without the exclusion the button rendered at
   12px in spaced capitals: a button wearing a field label's clothes. */
/* `.rv-up-pick` is the attachment trigger, which is a <label> but is a BUTTON; `.cr-check`
   wraps the consent SENTENCE, which is prose. Both are excluded, and the second one matters:
   this product rendered a consent paragraph in spaced capitals once before, on the
   subscription panel, and the note there says it exactly — that is the hardest way to present
   the one sentence a visitor is actually being asked to agree to.
   `.cr-field-title` is the CV heading, a <span> rather than a <label> because the control
   below it is not a single input; it is listed so it wears the same clothes as its siblings. */
.cr-form label:not(.rv-up-pick):not(.cr-check),
.cr-form .cr-field-title{font-size:12px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-hi)}
/* Two columns where two short answers belong side by side, one column on a phone. Stated with
   auto-fit rather than a media query so the rail decides, and a 430px phone and a 768px tablet
   do not need separate rules. */
.cr-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
/* A select styled as an input keeps the native dropdown — which is the correct control on a
   phone, where a custom listbox is strictly worse than the OS picker. Only the arrow is drawn,
   because the platform's own is the one piece of chrome that looks foreign here. */
.cr-form select.rv-input{appearance:none;-webkit-appearance:none;padding-right:42px;
  background-image:linear-gradient(45deg,transparent 50%,var(--faint) 50%),
                   linear-gradient(135deg,var(--faint) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 1px),calc(100% - 15px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.cr-form select.rv-input:focus{background-image:
  linear-gradient(45deg,transparent 50%,var(--sage) 50%),
  linear-gradient(135deg,var(--sage) 50%,transparent 50%)}

/* ---------------------------------------------------------------- consent */
.cr-consent{margin-top:4px}
/* A real <input type=checkbox>, sized up and accent-coloured, rather than a drawn substitute.
   A custom checkbox has to re-implement focus, the indeterminate state, forced-colours mode and
   the label association, and gets one of them wrong. `accent-color` is the whole job. */
.cr-check{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  cursor:pointer;text-transform:none;letter-spacing:0;font-weight:400}
.cr-check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--sage);flex:0 0 auto;
  cursor:pointer}
.cr-check input:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
.cr-check span{font-size:13.5px;line-height:1.6;color:var(--card-tx)}
/* The tap target is the whole line, not the 20px box. On a phone the box alone is a miss. */
@media (pointer:coarse){.cr-check{min-height:44px;align-items:center}}

.cr-send{justify-self:start;min-width:220px}
.cr-send.is-busy{opacity:.7;pointer-events:none}
@media (max-width:560px){.cr-send{width:100%}}

/* ---------------------------------------------------------------- the thank-you */
.cr-done{max-width:56ch;padding:clamp(26px,3vw,38px) 0}
.cr-done h3{font-size:clamp(20px,2.4vw,26px);color:var(--text-hi);margin:16px 0 10px}
.cr-done p{color:var(--card-tx);font-size:15px;line-height:1.7}
/* The tick is drawn in CSS rather than fetched: it is two strokes, and one more request on a
   success screen is one more thing that can fail after the visitor has already succeeded. */
.cr-done .tick{width:44px;height:44px;border-radius:50%;border:1px solid var(--sage);
  position:relative}
.cr-done .tick::after{content:'';position:absolute;left:14px;top:12px;width:12px;height:20px;
  border:solid var(--sage);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
/* Motion is an enhancement here, never the thing that reveals the message. */
@media (prefers-reduced-motion:no-preference){
  .cr-done{animation:cr-in .5s var(--ease) both}
  @keyframes cr-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
}