/* /talent/ (P1 Find SAP talent). Loads after app.css and site.css; only what the shared layers do not already give. */

/* the hero collapses in place once there is an answer: lede, examples and the pool line leave, the box and its filters stay */
.find-page .hero{transition:padding .22s var(--ease)}
.find-page .hero h1{transition:font-size .22s var(--ease),line-height .22s var(--ease)}
.find-page .site-top.is-compact .hero{padding:28px 24px 34px}
.find-page .site-top.is-compact .hero h1{font-size:38px;line-height:44px}
.find-page .site-top.is-compact .lede,
.find-page .site-top.is-compact .suggest,
.find-page .site-top.is-compact .hero-sub{display:none}
.find-page .site-top.is-compact .askbox-big{margin-top:20px}
.find-page .hero .askbox-big{box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.find-page .hero .ask-in textarea{overflow:hidden}
.find-page .site-top.has-results .ask-go{background:var(--ink);color:#fff}
.find-page .site-top.has-results .ask-go:hover{background:var(--ink-2)}
.find-page .hero .ask-extra{margin-top:14px}
.find-page .hero .ask-extra:empty{display:none}
.find-page .hero .ask-in textarea:focus,.find-page .hero .ask-in textarea:focus-visible{outline:0}
.find-page .hero .askbox:focus-within .ask-in{outline:2px solid var(--ink);outline-offset:0}
.find-page .site-top.is-compact .askbox-big{max-width:960px}
.read-host .sl-sum{text-align:left}

/* the empty-submit nudge sits under the box, readable on ink */
.nudge{max-width:880px;margin:14px auto 0;padding:0 8px;text-align:left;font-size:15px;line-height:22px;color:#fff;display:flex;gap:8px;align-items:flex-start}
.nudge .ico{margin-top:2px;color:#9FD97E}
.hero .suggest{max-width:920px}
.hero-sub{max-width:640px;margin-left:auto;margin-right:auto}
.hero .join-line{margin-top:6px}
.hero .join-line a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;display:inline-block;padding:8px 2px}

/* filter chips that follow the sentence */
.fchip[aria-expanded="true"]{background:#E3E8F0;box-shadow:inset 0 0 0 1px var(--hair)}
.fchip.is-set{background:var(--tint);color:var(--tint-ink)}
.fchip.is-set b{color:var(--tint-ink)}
.fchip.is-set:hover{background:#D8EFCB}
.fchip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.fopts{padding:6px;min-width:220px;max-height:min(340px,60vh);overflow:auto}
.fopts .menu-lbl{padding:6px 10px 4px}
.fopt{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:0 10px;border:0;border-radius:8px;background:none;font-size:14px;text-align:left;color:var(--ink)}
.fopt:hover,.fopt:focus-visible{background:var(--surface);outline:0}
.fopt .ck{width:16px;height:16px;flex:none;color:var(--green-text)}
.fopt .ck .ico{width:16px;height:16px;stroke-width:2.4}
.fopt small{margin-left:auto;color:var(--muted);font-size:12.5px}
.fopt[aria-checked="true"]{font-weight:600}

/* answer */
.answer{padding-top:36px}
.read-host{min-height:20px;margin-bottom:18px}
.read-host.sl{gap:8px}
.read-host .sl-sum{font-size:14px}
.ans-head{align-items:flex-start}
.ans-head h2{outline:0}
.ans-head p{max-width:680px;line-height:22px}
.ans-head .btn-lg{flex:none;height:46px;padding:0 22px}
.ans-head .btn-go[disabled]{cursor:default}
.sent-note{margin:-4px 0 20px;background:var(--tint);color:var(--tint-ink)}
.sent-note .ico{color:var(--tint-ink)}
.tcards{margin-top:0}
.tcard{transition:box-shadow .18s var(--ease),border-color .18s var(--ease)}
.tcard:hover{box-shadow:var(--shadow-2);border-color:#C3CCD8}
.tcard.is-new{animation:cardIn .26s var(--ease) both}
.tcard.is-new:nth-child(3n+2){animation-delay:.05s}
.tcard.is-new:nth-child(3n+3){animation-delay:.1s}
@keyframes cardIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.tcards.is-refresh .tcard{animation:cardFade .18s var(--ease) both}
@keyframes cardFade{from{opacity:.35}to{opacity:1}}
.tcard .tags{min-height:0}
.tcard .tc-sl{transition:background-color .15s var(--ease)}
.tcard .why p:last-child{overflow-wrap:anywhere}
.part-note{grid-column:1 / -1;font-size:15px;line-height:22px;font-weight:500;color:var(--muted);margin-top:8px}
.more-row{display:flex;justify-content:center;margin-top:26px}
.more-row .btn{height:44px;padding:0 22px;background:var(--panel)}
.fine{max-width:640px;margin-left:auto;margin-right:auto}

/* unclear and empty states */
.find-empty{background:var(--panel);border-radius:16px;box-shadow:var(--shadow-2);padding:36px 24px;text-align:center}
.find-empty h3{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.015em}
.find-empty p{color:var(--muted);margin:8px auto 0;max-width:520px}
.find-empty .suggest{justify-content:center;margin-top:20px}

/* trust points */
.trust{padding-top:20px;padding-bottom:64px}
.trust>div{align-items:flex-start}
.trust .ti{color:var(--ink)}
.trust .ti .ico{width:18px;height:18px}
.trust p{margin:0}

/* sticky shortlist bar */
.sbar{padding:12px 24px;gap:14px}
.sbar .sb-text{display:flex;gap:10px;align-items:baseline;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.sbar .sb-text span{color:#C9D6D4}
.sbar .btn-quiet{color:#fff;height:40px}
.sbar .btn-quiet:hover{background:rgba(255,255,255,.12)}
.sbar .btn-go{flex:none}

@media (max-width:1000px){
  .ans-head{flex-direction:column;align-items:stretch;gap:16px}
  .ans-head .btn-lg{width:100%}
}
@media (max-width:600px){
  .find-page .site-top.is-compact .hero{padding:22px 16px 26px}
  .find-page .site-top.is-compact .hero h1{font-size:30px;line-height:34px}
  .hero .suggest button:nth-child(n+5){display:none}
  .hero .suggest{gap:6px}
  .hero .suggest button{height:34px;padding:0 11px;font-size:13.5px}
  .fchip{height:34px}
  .hero .ask-extra{flex-wrap:nowrap;overflow-x:auto;margin:14px -14px 0;padding:0 14px 2px;scrollbar-width:none}
  .hero .ask-extra::-webkit-scrollbar{display:none}
  .hero .ask-extra .fchip{flex:none}
  .nudge{font-size:14.5px}
  .answer{padding-top:28px}
  .sbar{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .sbar .sb-text{flex:1 1 100%;font-size:14px}
  .sbar .btn-go{flex:1 1 auto}
  .more-row .btn{width:100%}
  .find-empty{padding:28px 16px}
  .trust{padding-bottom:40px}
}
@media (prefers-reduced-motion:reduce){
  .find-page .hero,.find-page .hero h1{transition:none}
  .tcard.is-new,.tcards.is-refresh .tcard{animation:none}
}