/* assets/careers/hiring/common.css · the role cards' extras, the job details window and Step 2's salary / who-can-apply
   blocks (common.js). Sober: the site's colours and type, plain lists, one clear note. */
:root{
  --cl-ink:#0E1E35; --cl-body:#34414F; --cl-mute:#5B6878; --cl-blue:#0760C6; --cl-deep:#004594;
  --cl-ground:#E6EEF9; --cl-tint:#F2F7FE; --cl-line:#D6E0EE; --cl-line2:#E3E9F2; --cl-paper:#FFFFFF;
}

/* ---- card ---- */
.cl-card-focus strong{ color:var(--cl-ink); font-weight:750; }
.cl-btns{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.cl-b{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px;
  border:1.5px solid var(--cl-blue); border-radius:6px; background:var(--cl-paper); color:var(--cl-blue);
  font:inherit; font-size:15px; font-weight:750; white-space:nowrap; cursor:pointer; transition:background-color .15s, color .15s;
}
.cl-b:hover{ background:var(--cl-tint); }
.cl-b:focus-visible{ outline:2px solid #003F8A; outline-offset:3px; }
.cl-b[aria-expanded="true"]{ background:var(--cl-tint); }          /* open, but never looks like the solid Apply button */
.cl-rs{ display:grid; place-items:center; width:20px; height:20px; border-radius:50%; background:var(--cl-blue); color:#FFFFFF; font-size:12px; font-weight:800; line-height:1; }
.cl-btns-k{ width:100%; margin:0 0 -2px; font-size:14.5px; font-weight:700; color:var(--cl-ink); }
@media (max-width:640px){
  /* the card's .n1-mid is display:contents on phones: span the full card like .n1-s / .n1-works */
  #roles.n1-roles .n1-row .cl-btns{ grid-column:1 / -1; flex-wrap:nowrap; }
  #roles.n1-roles .n1-row .cl-btns .cl-b{ flex:1 1 0; min-width:0; padding:0 10px; }
  #roles.n1-roles .n1-row .cl-btns.cl-wrap{ flex-wrap:wrap; }
  #roles.n1-roles .n1-row .cl-btns-k{ flex:0 0 100%; }
}

/* ---- the owner's content blocks ---- */
.cl-focus-h, .cl-lv{ margin:0; font-size:20px; line-height:1.25; font-weight:800; letter-spacing:-.01em; color:var(--cl-ink); }
.cl-focus-p{ margin:8px 0 0; font-size:15.5px; line-height:1.6; color:var(--cl-body); }
.cl-focus-p strong{ color:var(--cl-ink); }
.cl-pay{ margin-top:10px; }
.cl-pay p{ margin:0; }
.cl-ih{ font-size:15.5px; line-height:1.45; color:var(--cl-ink); }
.cl-ih strong{ font-weight:750; }
.cl-amt{ font-size:19px; font-weight:800; color:var(--cl-deep); white-space:nowrap; font-variant-numeric:tabular-nums; }
.cl-ctc, .cl-shown{ margin-top:6px !important; font-size:14.5px; line-height:1.5; font-style:italic; color:var(--cl-body); }
.cl-ctc strong{ font-style:normal; font-weight:750; color:var(--cl-ink); }
.cl-req{ margin-top:10px !important; font-size:15px; line-height:1.45; color:var(--cl-ink); }
.cl-req strong{ font-weight:750; }
.cl-who{ margin-top:16px; }
.cl-who-h{ margin:0; font-size:16.5px; line-height:1.3; font-weight:800; color:var(--cl-ink); }
.cl-lead{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--cl-body); }
.cl-lead strong, .cl-list strong{ color:var(--cl-ink); font-weight:700; }
.cl-list{ margin:8px 0 0; padding:0; list-style:none; }
.cl-list li{ position:relative; padding:4px 0 4px 18px; font-size:15px; line-height:1.5; color:var(--cl-body); }
.cl-list li::before{ content:""; position:absolute; left:2px; top:13px; width:6px; height:6px; border-radius:50%; background:var(--cl-blue); }
.cl-note{                     /* a quiet tinted box with a small "i" — no coloured side line (the owner's rule) */
  position:relative; margin:14px 0 0; padding:10px 12px 10px 40px; border:1px solid #D3E3F8; border-radius:8px;
  background:#F5F9FF; font-size:14.5px; line-height:1.5; color:var(--cl-ink);
}
.cl-note::before{ content:"i"; position:absolute; left:12px; top:11px; display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:#DCE8F8; color:var(--cl-deep); font:italic 800 12.5px/1 Georgia, 'Times New Roman', serif; }
.cl-note strong{ font-weight:800; }

/* ---- plain switch: Fresher | Experienced ---- */
.cl-sw{ display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:4px; border-radius:8px; background:var(--cl-ground); }
.cl-tab{ display:flex; align-items:center; justify-content:center; height:42px; margin:0; padding:0 12px; border:0; border-radius:6px; background:transparent;
  color:var(--cl-ink); font:inherit; font-size:15.5px; font-weight:750; text-align:center; line-height:1; cursor:pointer; }
.cl-tab[aria-selected="true"]{ background:var(--cl-blue); color:#FFFFFF; }
.cl-tab:focus-visible{ outline:2px solid #003F8A; outline-offset:2px; }
/* windows whose height changes (switching level) stay anchored at the top, so nothing jumps under the pointer */
@media (min-width:641px){
  .cl-k-sheet.cl-top .cl-panel{ top:max(24px, calc(50vh - 430px)); transform:translate(-50%, 12px); }
  .cl-k-sheet.cl-top.is-in .cl-panel{ transform:translate(-50%, 0); }
}

/* ---- window ---- */
html.cl-locked, html.cl-locked body{ overflow:hidden !important; }
.cl-layer{ position:fixed; inset:0; z-index:1000; font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, sans-serif; }
.cl-layer[hidden]{ display:none; }
.cl-bd{ position:absolute; inset:0; background:rgba(14,30,53,.5); opacity:0; transition:opacity .2s; }
.cl-layer.is-in .cl-bd{ opacity:1; }
.cl-panel{ position:absolute; display:flex; flex-direction:column; background:var(--cl-paper); color:var(--cl-ink); box-shadow:0 24px 64px rgba(14,30,53,.28);
  outline:none; transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.cl-layer .cl-panel:focus, .cl-layer .cl-panel:focus-visible{ outline:none !important; }
.cl-panel.is-drag{ transition:none; }
.cl-grab{ display:none; }
.cl-hd{ display:flex; align-items:flex-start; gap:12px; padding:18px 18px 14px 24px; border-bottom:1px solid var(--cl-line2); }
.cl-hd-t{ flex:1; min-width:0; }
.cl-kick{ margin:0; font-size:12px; line-height:16px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; color:var(--cl-blue); }
.cl-ttl{ margin:4px 0 0; font-size:19px; line-height:1.25; font-weight:800; letter-spacing:-.015em; color:var(--cl-ink); }
.cl-x{ flex:none; display:grid; place-items:center; width:44px; height:44px; margin:-6px -6px 0 0; border:0; border-radius:6px; background:transparent; color:var(--cl-ink); cursor:pointer; }
.cl-x svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.cl-x:hover{ background:var(--cl-tint); }
.cl-x:focus-visible{ outline:2px solid var(--cl-blue); outline-offset:-2px; }
.cl-bdy{ flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; padding:18px 24px 18px; }
.cl-ft{ display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:12px 18px 14px 24px; border-top:1px solid var(--cl-line2); }
.cl-ft .cl-ft-l{ margin-right:auto; }
.cl-apply{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:48px; padding:0 22px; border-radius:6px;
  background:var(--cl-blue); color:#FFFFFF; font-size:16px; font-weight:800; text-decoration:none; white-space:nowrap; }
.cl-apply:hover{ background:#004EA6; }
.cl-apply:focus-visible{ outline:2px solid #003F8A; outline-offset:3px; }
.cl-apply .nar{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.cl-link{ height:44px; padding:0 6px; border:0; background:transparent; color:var(--cl-blue); font:inherit; font-size:15px; font-weight:750;
  text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
.cl-link:focus-visible{ outline:2px solid var(--cl-blue); outline-offset:2px; border-radius:4px; }

.cl-k-sheet .cl-panel{ left:50%; top:50%; width:min(var(--cl-w, 640px), calc(100vw - 32px)); max-height:calc(100vh - 48px); border-radius:10px;
  transform:translate(-50%, calc(-50% + 12px)); opacity:0; }
.cl-k-sheet.is-in .cl-panel{ transform:translate(-50%, -50%); opacity:1; }
.cl-k-side .cl-panel{ top:0; right:0; bottom:0; width:min(var(--cl-w, 560px), 100vw); transform:translateX(24px); opacity:0; }
.cl-k-side.is-in .cl-panel{ transform:none; opacity:1; }

@media (max-width:640px){
  .cl-k-sheet .cl-panel{ left:0; right:0; top:auto; bottom:0; width:auto; max-height:calc(100dvh - 32px); border-radius:16px 16px 0 0; transform:translateY(24px); opacity:0; }
  .cl-k-sheet.is-in .cl-panel{ transform:none; opacity:1; }
  .cl-k-sheet .cl-grab{ display:block; flex:none; width:40px; height:4px; margin:8px auto 0; border-radius:4px; background:#C5CFDC; }
  .cl-k-side .cl-panel{ width:100vw; }
  .cl-hd{ padding:10px 8px 12px 16px; }
  .cl-ttl{ font-size:17px; }
  .cl-bdy{ padding:16px 16px 14px; }
  .cl-ft{ flex-direction:column; align-items:stretch; gap:2px; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .cl-ft .cl-apply{ order:-1; height:50px; }
  .cl-ft .cl-ft-l{ margin:0 auto; }
}
@media (prefers-reduced-motion: reduce){ .cl-panel, .cl-bd{ transition:none !important; } }

/* =====================================================================================================
   2026-10-06 · Full job details, three placements
   ===================================================================================================== */

/* ---- chips under the description (1–4 words, from the owner's text) ---- */
.cl-chips{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.cl-chip{ display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid #C6D9F4; border-radius:999px;
  background:#FFFFFF; color:var(--cl-deep); font-size:13.5px; font-weight:650; line-height:1; white-space:nowrap; }
@media (max-width:640px){
  #roles.n1-roles .n1-row .cl-chips{ grid-column:1 / -1; margin-top:12px; gap:6px; }
  .cl-chip{ height:28px; padding:0 10px; font-size:13px; }
}

/* ---- "View full job details" next to "Apply for this role" ---- */
.cl-dbtn{ height:46px; }
#roles.n1-roles .n1-row .n1-act.cl-act-stack{ display:flex; flex-direction:column; align-items:stretch; gap:10px; }
#roles.n1-roles .n1-row .n1-act.cl-act-stack .n1-go{ justify-content:center; }
#roles.n1-roles .n1-row .n1-act.cl-act-link{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.cl-dlink{ display:inline-flex; align-items:center; gap:6px; height:40px; padding:0 8px; border:0; background:transparent; color:var(--cl-blue);
  font:inherit; font-size:15px; font-weight:750; text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:1.5px; cursor:pointer; }
.cl-dlink-a{ font-size:20px; line-height:1; text-decoration:none; }
.cl-dlink:hover{ color:#004EA6; }
.cl-dlink:focus-visible{ outline:2px solid #003F8A; outline-offset:2px; border-radius:4px; }
#roles.n1-roles .n1-row .n1-act.cl-act-pair{ display:flex; flex-direction:row; align-items:center; gap:10px; }
#roles.n1-roles .n1-row .n1-act.cl-act-pair .cl-dbtn{ height:52px; padding:0 18px; }
@media (max-width:980px){
  #roles.n1-roles .n1-row .n1-act.cl-act-stack{ flex-direction:row; flex-wrap:wrap; }
  #roles.n1-roles .n1-row .n1-act.cl-act-link{ flex-direction:row; flex-wrap:wrap; gap:6px 14px; }
}
@media (max-width:640px){
  #roles.n1-roles .n1-row .n1-act.cl-act-stack{ flex-direction:column; }
  #roles.n1-roles .n1-row .n1-act.cl-act-link{ flex-direction:column; align-items:stretch; }
  #roles.n1-roles .n1-row .n1-act.cl-act-link .cl-dlink{ align-self:center; }
  #roles.n1-roles .n1-row .n1-act.cl-act-pair .cl-dbtn{ flex:0 0 auto; height:52px; padding:0 14px; }
  #roles.n1-roles .n1-row .n1-act.cl-act-pair .n1-go{ flex:1 1 auto; width:auto; min-width:0; padding:0 14px; }
}

/* ---- closing: let clicks through while it slides away ---- */
.cl-layer.is-closing{ pointer-events:none; }

/* ---- desktop: a bottom sheet window (option 3) ---- */
.cl-k-bottom .cl-panel{ left:50%; bottom:0; width:min(var(--cl-w, 920px), calc(100vw - 32px)); height:min(70vh, 760px); border-radius:14px 14px 0 0;
  transform:translate(-50%, 100%); transition:transform .5s cubic-bezier(.22,.9,.24,1); }
.cl-k-bottom.is-in .cl-panel{ transform:translate(-50%, 0); }
.cl-k-bottom .cl-grab{ display:block; flex:none; width:44px; height:4px; margin:8px auto 0; border-radius:4px; background:#C5CFDC; }

/* ---- phones: every window is a bottom sheet, 70% of the screen, sliding up slowly ---- */
@media (max-width:640px){
  .cl-layer .cl-panel{
    top:auto !important; left:0 !important; right:0 !important; bottom:0 !important; width:auto !important;
    height:78dvh !important; max-height:none !important; border-radius:18px 18px 0 0 !important; opacity:1 !important;
    transform:translateY(100%) !important; transition:transform .55s cubic-bezier(.22,.9,.24,1) !important;
  }
  .cl-layer.is-in .cl-panel{ transform:translateY(var(--cl-drag, 0px)) !important; }
  .cl-layer.is-closing .cl-panel{ transition-duration:.32s !important; }
  .cl-layer.is-in .cl-panel.is-drag{ transition:none !important; }
  .cl-layer .cl-grab{ display:block !important; flex:none; width:40px; height:4px; margin:8px auto 0; border-radius:4px; background:#C5CFDC; }
  .cl-bd{ transition:opacity .45s; }
  .cl-layer.is-closing .cl-bd{ opacity:0; transition-duration:.3s; }
}
@media (prefers-reduced-motion: reduce){ .cl-layer .cl-panel{ transition:none !important; } }

/* ---- the full job details window ---- */
.cl-jump{ display:flex; gap:8px; padding:12px 24px; border-bottom:1px solid var(--cl-line2); background:var(--cl-paper); }
.cl-j{ height:38px; padding:0 16px; border:1.5px solid var(--cl-line); border-radius:999px; background:var(--cl-paper); color:var(--cl-deep);
  font:inherit; font-size:14.5px; font-weight:750; cursor:pointer; }
.cl-j[aria-current="true"]{ border-color:var(--cl-blue); background:var(--cl-blue); color:#FFFFFF; }
.cl-j:focus-visible{ outline:2px solid #003F8A; outline-offset:2px; }
.cl-jd .cl-focus{ padding-bottom:18px; border-bottom:1px solid var(--cl-line); }
.cl-jd .cl-focus-h{ font-size:16.5px; }
.cl-jd .cl-level{ padding:18px 0; }
.cl-jd .cl-level + .cl-level{ border-top:1px solid var(--cl-line); }
.cl-jd .cl-level:last-child{ padding-bottom:4px; }
.cl-jd .cl-pay{ margin-top:8px; }
@media (max-width:640px){
  .cl-jump{ padding:10px 16px; gap:6px; }
  .cl-jump{ flex-wrap:wrap; }
  .cl-j{ flex:1 1 auto; height:40px; padding:0 10px; font-size:14px; white-space:nowrap; }   /* long level names wrap to a second row, never cut */
  .cl-jd .cl-hd{ padding-top:6px; }
}

/* ---- how relevant experience is counted ---- */
.cl-rel{ margin-top:4px; }
.cl-rel-h{ margin:0; font-size:16.5px; line-height:1.3; font-weight:800; color:var(--cl-ink); }
.cl-rel-p{ margin:6px 0 0; font-size:15px; line-height:1.5; color:var(--cl-body); }
.cl-rel-p strong{ color:var(--cl-ink); font-weight:700; }
.cl-areas{ display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; padding:0; list-style:none; }
.cl-areas li{ display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:999px; background:var(--cl-ground); color:var(--cl-deep);
  font-size:14px; font-weight:700; white-space:nowrap; }
.cl-rel-k2{ margin:14px 0 0; font-size:15px; font-weight:750; color:var(--cl-ink); }
.cl-not{ margin:6px 0 0; padding:0; list-style:none; }
.cl-not li{ position:relative; padding:3px 0 3px 22px; font-size:15px; line-height:1.5; color:var(--cl-body); }
.cl-not li::before{ content:""; position:absolute; left:3px; top:12px; width:10px; height:2px; border-radius:2px; background:#8A97A8; }
.cl-rel-w{ margin:12px 0 0; padding:10px 12px; border-radius:6px; background:var(--cl-tint); font-size:14.5px; line-height:1.5; color:var(--cl-ink); }
.cl-rel-cols{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:14px; margin-top:10px; }
.cl-rel-yes, .cl-rel-no{ padding:12px 14px; border-radius:8px; border:1px solid var(--cl-line); }
.cl-rel-yes{ border-color:#BFD8F7; background:#F5F9FF; }
.cl-rel-k{ margin:0; font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--cl-deep); }
.cl-rel-no .cl-rel-k{ color:#5B6878; }
.cl-rel-split .cl-rel-p{ margin-top:6px; font-size:14.5px; }
@media (max-width:640px){ .cl-rel-cols{ grid-template-columns:minmax(0,1fr); } }
.cl-wait{ margin:8px 0 0; padding:8px 12px; border:1px solid #F3D9A4; border-radius:8px; background:#FFFBEB; color:#78350F; font-size:13.5px; line-height:1.45; font-weight:600; }
.cl-jd .cl-relsec{ border-top:1px solid var(--cl-line); }
/* "Works on" under Role Focus (posts whose owner text has one) */
.cl-works{ margin:8px 0 0; font-size:14.5px; line-height:1.55; color:#34414F; }
.cl-works strong{ color:#0E1E35; font-weight:750; }
/* tablets: "View full job details" and "Apply for this role" side by side at the same height */
@media (min-width:641px) and (max-width:980px){ #roles.n1-roles .n1-row .n1-act.cl-act-stack .cl-dbtn{ height:52px; } }
/* a post's own job-description sections in the details window ("What You'll Do" …) */
.cl-sec-out{ margin:12px 0 0; font-size:15px; line-height:1.6; color:#34414F; }
.cl-sec-sub{ margin:14px 0 2px; font-size:15px; font-weight:700; font-style:italic; line-height:1.45; color:var(--cl-ink); }
.cl-sec-sub + .cl-list{ margin-top:6px; }