/* Symphoni HR — roles listing component. Shared by /careers/ and /for-talent/.
   Kept as a file so the page-level CSS pipeline can never clobber it. */
.cgrid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:1rem;margin:2.4rem auto 4rem}
.jcard{border:1px solid var(--line-light);border-radius:16px;background:#fff;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.85rem;text-decoration:none;transition:border-color .22s,transform .22s,box-shadow .22s;opacity:0;transform:translateY(18px)}
.jcard.in{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease,border-color .22s,box-shadow .22s}
.jcard:hover{border-color:var(--green);transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(11,42,74,.35)}
.jcard h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:1.5rem;line-height:1.15}
.jmeta{display:flex;flex-wrap:wrap;gap:.45rem}
.jskills{display:flex;flex-wrap:wrap;gap:.4rem}
.jskill{font-size:.78rem;background:var(--paper2);border-radius:7px;padding:.32em .7em;color:var(--soft)}
.jfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line-light);padding-top:.9rem}
.japply{font-weight:600;font-size:.88rem;color:var(--green-ink)}
.jsk{height:172px;border-radius:16px;border:1px solid var(--line-light);background:linear-gradient(100deg,var(--paper2) 30%,#fff 50%,var(--paper2) 70%);background-size:200% 100%;animation:shm 1.2s linear infinite}
@keyframes shm{to{background-position:-200% 0}}
.srchwrap{background:#fff;border:1px solid var(--line-light);border-radius:18px;padding:1.2rem;margin-top:2rem;box-shadow:0 26px 54px -44px rgba(11,42,74,.5)}
.srow{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:.7rem;align-items:end}
.sfield label{display:block;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--softer);margin-bottom:.35rem}
.sfield input,.sfield select{width:100%;padding:.75em .9em;border:1px solid var(--line);border-radius:10px;font-size:16px;font-family:'Archivo',sans-serif;color:var(--ink);background:#fff;outline:none;transition:border-color .18s,box-shadow .18s}
.sfield input:focus,.sfield select:focus{border-color:var(--green-ink);box-shadow:0 0 0 3px rgba(11,122,97,.1)}
.sfield.key{position:relative}
.sfield.key input{padding-left:2.4em}
.sfield.key svg{position:absolute;left:.85em;bottom:.82em;width:16px;height:16px;stroke:var(--softer);fill:none;stroke-width:2}
.sclear{background:transparent;border:1.5px solid var(--line);color:var(--soft);border-radius:99px;padding:.72em 1.2em;font:600 .85rem 'Archivo',sans-serif;cursor:pointer;white-space:nowrap;transition:border-color .18s,color .18s}
.sclear:hover{border-color:var(--ink);color:var(--ink)}
.sresult{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:1.6rem 0 .2rem;flex-wrap:wrap}
.sresult .cnt{font-family:'IBM Plex Mono',monospace;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
.sresult .cnt b{color:var(--green-ink)}
.stags{display:flex;gap:.4rem;flex-wrap:wrap}
.stag{font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;background:var(--paper2);border:1px solid var(--line);border-radius:99px;padding:.35em .8em;color:var(--soft);cursor:pointer;display:inline-flex;align-items:center;gap:.5em}
.stag:hover{border-color:var(--green-ink);color:var(--green-ink)}
.stag i{font-style:normal;font-weight:700}
@media(max-width:899px){.srow{grid-template-columns:1fr;gap:.6rem}.sclear{width:100%}}
.shbtn{display:inline-flex;align-items:center;gap:.45em;font-family:'IBM Plex Mono',monospace;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--softer);background:transparent;border:1px solid var(--line);border-radius:99px;padding:.45em .95em;cursor:pointer;transition:border-color .2s,color .2s}
.shbtn:hover{border-color:var(--green-ink);color:var(--green-ink)}
.shbtn svg{width:13px;height:13px;fill:currentColor}
.shpop{position:absolute;right:0;bottom:calc(100% + .55rem);background:#fff;border:1px solid var(--line-light);border-radius:14px;padding:.55rem;display:flex;gap:.35rem;box-shadow:0 22px 44px -26px rgba(11,42,74,.45);opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transition:opacity .22s ease,transform .22s ease,visibility .22s;z-index:20}
.jshare.open .shpop{opacity:1;visibility:visible;transform:none}
.shpop::after{content:"";position:absolute;right:18px;bottom:-6px;width:11px;height:11px;background:#fff;border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);transform:rotate(45deg)}
.shi{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;border:0;background:var(--paper2);cursor:pointer;transition:transform .18s ease,background .18s ease;text-decoration:none}
.shi:hover{transform:translateY(-2px)}
.shi svg{width:17px;height:17px;fill:#fff}
.shi.wa{background:#25D366}
.shi.li{background:#0A66C2}
.shi.fb{background:#1877F2}
.shi.tg{background:#26A5E4}
.shi.xx{background:#0F1419}
.shi.cp{background:var(--paper2)}
.shi.cp svg{fill:var(--soft)}
.shi.cp.done{background:var(--green-ink)}
.shi.cp.done svg{fill:#fff}
.shnat{display:none}
@media(pointer:coarse){.shnat{display:flex}}
@media(max-width:640px){.srchwrap{margin-top:1.2rem;padding:1rem;border-radius:14px;box-shadow:0 14px 30px -26px rgba(11,42,74,.45)}.srow{gap:.7rem}.sresult{margin:1.1rem 0 .2rem}.jsk{height:132px}.cgrid2{gap:.85rem}}
.sfield[hidden]{display:none !important}
.srchwrap{margin-top:1.4rem}
.srchwrap{background:linear-gradient(180deg,#fff,var(--paper2));border-color:var(--line)}
.cgrid2{margin-top:1.4rem}
.jfoot{gap:.9rem;flex-wrap:wrap}
.jfoot .japply{margin-left:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:.35em}
@media(max-width:640px){.cgrid2{margin:1.1rem auto 2.6rem}.jcard{padding:1.25rem 1.15rem;gap:.7rem}.jfoot{padding-top:.75rem}.jfoot .japply{font-size:.86rem}}
@media(max-width:640px){.shpop{right:auto;left:0;
    max-width:calc(100vw - 2.4rem);
    flex-wrap:wrap;
    justify-content:flex-start;}.shpop::after{right:auto;left:18px}}
.crumb, .crumb a, .crumb span,
.fbottom .note, .telem .tcell .tl, .rail .mhud .hl, .net .net-cap,
.scroll-cue, .srchwrap .sfield label, .upload-col .hint,
aside.stepper .legal, figcaption.artcap span, .relh, .expnote{color:var(--softer);}
.jcard{border-color:rgba(10,29,69,.14) !important}
.jcard:hover{border-color:var(--green) !important}
.jcard{border-color:rgba(10,29,69,.14) !important}
.jcard:hover{border-color:var(--green) !important}.jcount-chip{
  display:inline-block;margin-left:.6em;
  border:1px solid var(--line);border-radius:99px;
  padding:.3em .85em;font-size:.86em;letter-spacing:.14em;
  color:var(--green-ink);white-space:nowrap;
}

/* ---- second filter row (skill / level / posted / clear) ---- */
.srow{grid-template-columns:2fr 1fr 1fr 1fr}
.srow2{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem;align-items:end;margin-top:.7rem}
.srow2 .sclr{display:flex;justify-content:flex-end}
@media(max-width:760px){
  .srow{grid-template-columns:1fr 1fr}
  .srow .sfield.key{grid-column:1/-1}
  .srow2{grid-template-columns:1fr 1fr}
  .srow2 .sclr{grid-column:1/-1;justify-content:stretch}
  .srow2 .sclear{width:100%}
}