/* PeopleSeek Talent: the job lists and the job page, outside Find jobs.
   The cards, tags, chips, facts and buttons are the export's own classes from
   /brand/job-site/talent.css; this file only lays them out on a page (the
   export draws them inside the Find jobs panes) and adds the few pieces the
   export has no class for. Every class here starts with jl-; colours, lines,
   radii and fonts are the export's tokens only, so light and dark follow
   :root[data-theme="dark"] with no rule of ours. */

/* The export sizes the card and the job by their pane (@container); here the
   list and the job are that container, so the same rules apply on a page. */
.jl-list,.jl-detail{container-type:inline-size;min-width:0}

/* page head */
.jl-head .jp-crumb{margin-bottom:18px}

/* the board: the form, the chips, the count, the cards, the pager */
.jl-board{display:grid;gap:18px;min-width:0}
.jl-form{display:grid;gap:14px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--rim);min-width:0}
.jl-fields{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px 14px;min-width:0}
.jl-fields .jl-grow{grid-column:span 2}
.jl-acts{display:flex;align-items:center;gap:10px 20px;flex-wrap:wrap}
.jl-acts .btn{margin-left:auto}
.jl-form .tog{font-size:13.5px}
.jl-where{font-size:14px;color:var(--ink2);overflow-wrap:anywhere}
.jl-where a{color:var(--ink)}
.jl-miss{color:var(--mute)}
.jl-active{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.jl-chips{margin:0;padding:0;list-style:none}
.jl-chips li{display:contents}
.jl-x{width:20px;height:20px;border-radius:50%;color:var(--mute);display:grid;place-items:center;flex-shrink:0}
.jl-x:hover{background:var(--bg2);color:var(--ink)}
.jl-active .clear{display:inline-flex;align-items:center}
.jl-count{font-family:var(--mono);font-size:12.5px;color:var(--mute)}
.jl-count b{font-weight:500;color:var(--ink2);font-variant-numeric:tabular-nums}
.jl-pager{display:flex;justify-content:space-between;gap:10px}

/* the card as a page link: the title link covers the card, as the button does in Find jobs */
.jl-list .jt{text-decoration:none}
.jl-list .job h3,.jl-list .job .co{overflow-wrap:anywhere}
.jl-sum{grid-column:1/-1;font-size:13.5px;color:var(--ink2);max-width:72ch;overflow-wrap:anywhere}

/* company tiles with a real logo */
.jl-lg{overflow:hidden}
.jl-lg:has(img){background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.jl-lg img{width:100%;height:100%;object-fit:contain;border-radius:inherit;display:block}

/* the zero state */
.jl-empty ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:14px}
.jl-empty a{color:var(--ink)}

/* the job page: the export's job pane, at page width */
.jl-banner{overflow-wrap:anywhere}
.jl-banner+.jl-detail{margin-top:14px}
.jp-crumb+.jl-detail,.jp-crumb+.jl-banner{margin-top:18px}
.jl-detail .dbody h1{font-size:clamp(24px,3vw,36px);line-height:1.1;letter-spacing:-.035em;font-weight:600;margin-top:4px;overflow-wrap:anywhere}
.jl-detail .dsec>h2{font-size:14px;font-weight:600;margin-bottom:10px}
.jl-detail .facts a{color:inherit}
.jl-elig,.jl-places{font-size:14.5px;color:var(--ink2);max-width:68ch}
.jl-note{font-size:12.5px;color:var(--mute);max-width:68ch;margin-top:-12px}
.jl-none{color:var(--mute)}
.jl-detail .srcline{display:grid;gap:6px;overflow-wrap:anywhere}
.jl-detail .srcline a{color:var(--ink2)}
.jl-h2{font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.25;margin:10px 0 16px}

@media (max-width:1100px){
  .jl-fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .jl-fields .jl-grow{grid-column:span 3}
}
@media (max-width:640px){
  .jl-form{padding:14px}
  .jl-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .jl-fields .jl-grow{grid-column:1/-1}
  .jl-acts .btn{margin-left:0;width:100%}
  .jl-detail .dacts .btn{flex:1 1 auto}
}