/* Careers pages on top of the company website's stylesheet. On the website the stylesheet is the site's own (from its
   /shell.json); on jobs.ansiblehealth.com it is the copy in static/site/. Only what that sheet does not style lives here,
   in its tokens and its type scale (--t-display, --t-h2, --t-h3, --t-lead, --t-body, --t-small; no other sizes). */

/* Role and apply page mastheads */
.role-head{padding:56px 0 8px}
.role-head h1{max-width:22ch}
.role-head .lead.role-meta{color:var(--faint)}
.crumb{display:inline-block;margin-bottom:22px;font-size:var(--t-small);font-weight:600;color:var(--sky-ink)}
.crumb::before{content:"← "}
.crumb:hover{color:var(--navy)}
.message-page{padding:96px 0 120px}

/* The posting: readable long-form text with a facts panel beside it */
.role-body{padding:48px 0 88px}
.role-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:72px;align-items:start}
.prose{max-width:70ch;font-size:var(--t-body);line-height:1.65;color:var(--ink-soft)}
.prose>:first-child{margin-top:0}
.prose h1,.prose h2{font-size:var(--t-h2);margin:52px 0 14px;max-width:none}
.prose h3,.prose h4{font-size:var(--t-h3);margin:34px 0 10px;max-width:none}
.prose p{margin:0 0 16px}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.prose a{color:var(--sky-ink);font-weight:600}
.prose ul{list-style:none;margin:6px 0 26px;padding:0;border-top:1px solid var(--line)}
.prose ul li{position:relative;padding:12px 0 12px 26px;border-bottom:1px solid var(--line);color:var(--ink)}
.prose ul li::before{content:"";position:absolute;left:2px;top:23px;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.prose ul ul{border-top:0;margin:6px 0 0}
.prose ul ul li{border-bottom:0;padding:4px 0 4px 22px;color:var(--ink-soft)}
.prose ul ul li::before{top:15px;width:6px;height:6px;background:var(--rule)}
.prose ol{margin:6px 0 26px;padding-left:24px}
.prose ol li{padding:6px 0}
.prose blockquote{margin:24px 0;padding-left:20px;border-left:3px solid var(--sky);color:var(--ink)}
.facts{position:sticky;top:104px;background:#fff;border:1px solid var(--line);border-radius:4px;padding:28px}
.facts dl{margin:0 0 22px}
.facts dt{font-size:var(--t-small);color:var(--faint);font-weight:600}
.facts dd{margin:4px 0 16px;color:var(--navy);font-weight:500;font-size:var(--t-body)}
.facts .btn{display:block;text-align:center}
.facts .fine{margin-top:12px;font-size:var(--t-small);color:var(--faint);line-height:1.5}
.apply-band{background:var(--navy);color:#e7eef6;padding:76px 0}
.apply-band h2{color:#fff}
.apply-band p{color:#b9cbe0;margin:16px 0 28px;max-width:56ch}

/* The apply form, in the website's form style */
.apply-body{padding:40px 0 96px}
.apply-body .eform{max-width:780px}
.eform h3.form-section{font-size:var(--t-h2);margin:40px 0 14px;max-width:none}
.eform h3.form-section:first-child{margin-top:0}
.eform h4{font-size:var(--t-h3);margin:30px 0 10px}
.eform .hint{font-weight:400;color:var(--faint);font-size:var(--t-small)}
.eform p.hint{margin:-2px 0 8px}
.eform .row2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.eform input[type=file]{padding:10px;background:var(--paper)}
.eform input[type=checkbox],.eform input[type=radio]{width:auto;margin:0 8px 0 0}
.eform .choice{display:flex;align-items:center;font-weight:500;color:var(--ink);margin:6px 0}
.eform .consent{display:flex;align-items:flex-start;gap:10px;font-weight:500;color:var(--ink);font-size:var(--t-small)}
.eform .consent input{margin-top:4px}
.eform [aria-invalid=true]{border-color:var(--clay);outline:2px solid rgba(192,83,60,.18)}
.eform button[disabled]{opacity:.45;cursor:not-allowed}
.form-section-note,.field-note{color:var(--ink-soft);font-size:var(--t-small);margin:0 0 10px}
.form-section-note p,.field-note p{margin:0 0 8px}
.field-error{color:var(--clay-dk);font-size:var(--t-small);font-weight:600;margin-top:6px}
.errors{background:#fbeeea;border:1px solid #efc9bf;border-radius:4px;padding:16px 20px;margin:0 0 24px;color:var(--clay-dk);max-width:780px}
.errors p,.errors ul{margin:0}
.errors ul{padding-left:20px}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* The voice section */
.voice{margin:44px 0 10px;padding-top:34px;border-top:1px solid var(--line)}
.script{font-family:var(--serif);font-size:var(--t-h3);line-height:1.45;color:var(--navy);padding-left:24px;margin:10px 0 14px}
.script li{margin:8px 0}
.scenario{list-style:none;padding:0;margin:8px 0 14px;border-top:1px solid var(--line)}
.scenario li{position:relative;padding:10px 0 10px 24px;border-bottom:1px solid var(--line);color:var(--ink);font-size:var(--t-body)}
.scenario li::before{content:"";position:absolute;left:2px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--sky)}
.script-prompt{font-family:var(--serif);font-size:var(--t-h3);color:var(--navy);margin:16px 0 8px}
.recorder{background:var(--mist);border-radius:4px;padding:18px 20px}
.rec-controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
.rec-controls .btn{padding:11px 18px;font-size:var(--t-small)}
.rec-time{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:var(--t-small)}
.rec-play{width:100%;margin:8px 0 0}

@media(max-width:900px){
  .role-grid{grid-template-columns:1fr;gap:40px}
  .facts{position:static}
}
@media(max-width:600px){
  .eform .row2{grid-template-columns:1fr;gap:0}
}