/* /talent/join/ (P3 Join the talent pool). Loads after app.css and site.css; only what the shared layers do not already give. */

/* hero: same dark band as the search page; it tightens once a CV is in */
.join-page .hero{transition:padding .22s var(--ease)}
.join-page .site-top.is-compact .hero{padding:28px 24px 34px}
.join-page .site-top.is-compact .hero h1{font-size:38px;line-height:44px}
.join-page .site-top.is-compact .lede,.join-page .site-top.is-compact .hero-sub{display:none}
.join-page .hero h1{transition:font-size .22s var(--ease),line-height .22s var(--ease)}
.jn-box{max-width:760px;margin:40px auto 0;text-align:left;color:var(--ink);background:var(--panel);border-radius:22px;padding:8px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)}
.join-page .site-top.is-compact .jn-box{margin-top:20px}
.jn-box .drop{padding:38px 20px;border-radius:16px;background:var(--surface-2)}
.jn-box .drop b{font-size:18px;line-height:24px;font-weight:600;letter-spacing:-.01em}
.jn-box .drop span{font-size:14.5px}
.jn-box .drop :focus-visible,.jn-box :focus-visible{outline-color:var(--ink)}
.jn-box .drop:focus-visible{outline:2px solid var(--ink);outline-offset:0}
.jn-box .files{display:none}
.jn-file{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:var(--surface-2)}
.jn-file .fi{width:40px;height:40px;border-radius:10px;background:var(--panel);box-shadow:0 0 0 1px var(--hair);display:grid;place-items:center;flex:none}
.jn-file .fn{min-width:0;flex:1}
.jn-file .fn b{display:block;font-size:15px;line-height:20px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jn-file .fn span{display:block;font-size:13.5px;line-height:18px;color:var(--muted)}
.join-page .hero-sub{max-width:640px;margin-left:auto;margin-right:auto}

/* the flow under the hero */
.jn-flow{max-width:760px;margin:0 auto;padding:36px 24px 8px}
.jn-read{min-height:20px;margin-bottom:16px}
.jn-read .sl-sum{text-align:left}
.jn-card{background:var(--panel);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-2);padding:28px;display:flex;flex-direction:column;gap:24px}
.jn-card.is-new,.jn-done.is-new{animation:jnIn .26s var(--ease) both}
@keyframes jnIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.jn-head h2{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em;outline:0}
.jn-head p{font-size:15.5px;line-height:23px;color:var(--muted);margin-top:4px}
.jn-grp{display:flex;flex-direction:column;gap:16px}
.jn-grp>h3{font-size:16px;line-height:22px;font-weight:600}
.jn-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.jn-grid .wide{grid-column:1 / -1}
select.inp{appearance:none;-webkit-appearance:none;padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235E6A6A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
.jn-money{display:flex;align-items:center;gap:8px}
.jn-money .u{font-size:15px;color:var(--muted);flex:none}
.jn-money .inp{flex:1;min-width:0}
.jn-mods{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.jn-mod{display:inline-flex;align-items:center;gap:2px;height:32px;padding:0 4px 0 12px;border-radius:var(--r-pill);background:var(--surface);font-size:14px;font-weight:500}
.jn-mod button{width:24px;height:24px;border:0;border-radius:50%;background:transparent;display:grid;place-items:center;padding:0;color:var(--muted)}
.jn-mod button:hover{background:rgba(3,48,48,.12);color:var(--ink)}
.jn-mod button .ico{width:14px;height:14px}
.jn-addmod{height:32px}
.jn-modpick{padding:6px;min-width:220px;max-height:min(320px,55vh);overflow:auto}
.jn-modpick button{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)}
.jn-modpick button:hover,.jn-modpick button:focus-visible{background:var(--surface);outline:0}
.jn-modpick small{margin-left:auto;color:var(--muted);font-size:12.5px}

/* the one thing MONTECO was not sure of */
.jn-unsure{background:var(--amber);border-radius:12px;padding:14px 14px 14px}
.jn-unsure .lbl{color:var(--amber-ink)}
.jn-unsure .inp{border-color:#E2C27A}
.jn-why{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--amber-ink);margin-top:2px}
.jn-why .ico{margin-top:1px;flex:none}
.jn-why-row{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.jn-why-row .btn{align-self:flex-start;background:var(--panel)}
.jn-ok{display:flex;gap:8px;align-items:center;font-size:14px;line-height:20px;color:var(--tint-ink);margin-top:2px}
.jn-ok .ico{color:var(--green-text)}
.jn-unsure.is-ok{background:var(--tint)}
.jn-unsure.is-ok .lbl{color:var(--ink)}
.jn-unsure.is-ok .inp{border-color:var(--hair)}

/* consent, in plain words */
.jn-consent{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:12px;min-width:0}
.jn-consent legend{font-size:16px;line-height:22px;font-weight:600;padding:0;margin-bottom:12px}
.jn-choice{padding:14px 16px;border:1px solid var(--hair);border-radius:12px;background:var(--surface-2)}
.jn-choice.is-on{background:var(--tint);border-color:var(--tint-line)}
.jn-choice b{font-weight:600;font-size:15px}
.jn-choice small{font-size:13.5px;line-height:20px;margin-top:3px}
.jn-choice .req{display:inline-block;margin-left:6px;font-size:12.5px;font-weight:500;color:var(--muted)}
.jn-acts{display:flex;flex-direction:column;gap:12px}
.jn-acts .btn-go{height:48px;font-size:16px;border-radius:10px}
.jn-fine{font-size:13.5px;line-height:20px;color:var(--muted);text-align:center}

/* done */
.jn-done{background:var(--panel);border:1px solid var(--hair);border-radius:16px;box-shadow:var(--shadow-2);padding:32px 28px;display:flex;flex-direction:column;gap:26px}
.jn-done .ok{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--tint-ink);display:grid;place-items:center}
.jn-done .ok .ico{width:26px;height:26px;stroke-width:2.2}
.jn-done h2{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;outline:0}
.jn-done .by{font-size:16px;line-height:24px;color:var(--muted);margin-top:6px}
.jn-steps{display:flex;flex-direction:column;gap:16px}
.jn-step{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:22px}
.jn-step i{font-style:normal;flex:none;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:grid;place-items:center;margin-top:-1px}
.jn-step b{display:block;font-weight:600}.jn-step span{color:var(--muted)}
.jn-preview h3{font-size:16px;line-height:22px;font-weight:600}
.jn-preview p.sub{font-size:14.5px;line-height:21px;color:var(--muted);margin:2px 0 14px}
.jn-preview .tcard{max-width:420px;box-shadow:var(--shadow-2)}
.jn-preview .tcard .push{display:none}
.jn-preview .tcard .tags{margin-bottom:0;min-height:0}
.jn-done .jn-again{align-self:flex-start}

@media (max-width:760px){.jn-box{margin-left:0;margin-right:0}}
@media (max-width:600px){
  .join-page .site-top.is-compact .hero{padding:22px 16px 26px}
  .join-page .site-top.is-compact .hero h1{font-size:30px;line-height:34px}
  .jn-box{margin-top:26px;border-radius:18px;padding:6px}
  .jn-box .drop{padding:30px 14px}
  .jn-flow{padding:24px 16px 4px}
  .jn-card,.jn-done{padding:20px 16px;gap:22px}
  .jn-grid{grid-template-columns:1fr}
  .jn-head h2{font-size:23px;line-height:29px}
  .jn-done h2{font-size:25px;line-height:31px}
  .jn-file{padding:12px}
  .jn-file .btn{flex:none}
}
@media (prefers-reduced-motion:reduce){
  .join-page .hero,.join-page .hero h1{transition:none}
  .jn-card.is-new,.jn-done.is-new{animation:none}
}