/* Conjoin · Convites, entrevistas, processos e cursos no padrão da prancha aprovada
   Carregado depois de ref.css. */

/* ===== Convites (55) ===== */
.inv-intro { color: var(--ink-soft); }
.invite-row .tag { flex: none; }
.invite-row .pills { margin-top: 2px; }
.invite-row .pill { min-height: 30px; padding: 0 10px; font-size: 0.8125rem; }

/* ===== Aceitar / recusar (58, 59) ===== */
.job-summary { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); }
.job-summary .cover { margin-bottom: var(--s-5); }
.job-summary .js-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); padding: 0 var(--s-1); }
.job-summary .card-sub, .job-summary .pills, .job-summary .metas { padding: 0 var(--s-1); }
.authz { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--ouro-veu); }
.authz .check { padding: 0; }
.authz .check input:checked { background-color: var(--azul); }
.steps-list { display: flex; flex-direction: column; gap: var(--s-3); }
.steps-list li { display: flex; gap: var(--s-3); align-items: flex-start; }
.steps-list .sl-n { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--ouro); color: var(--noite); font-weight: 700; }

/* ===== Contato liberado (61) ===== */
.co-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-5) var(--s-4) var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); text-align: center; }
.co-card .brand { --br: 80px; border-radius: 50%; box-shadow: 0 0 0 4px var(--alva), 0 8px 20px rgba(16, 28, 38, 0.16); }
.co-card h2 { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: 800; color: var(--azul); margin-top: var(--s-1); }
.co-card .co-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.co-card .co-who { color: var(--ink-soft); }
.contact-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.contact-actions .btn { padding-inline: var(--s-3); }
.contact-actions .btn .ic { flex: none; }

/* ===== Entrevista agendada (65) ===== */
.iv-hero { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); }
.iv-hero .date-badge { background: var(--ouro); color: var(--noite); }
.iv-hero h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); }
.iv-hero .metas { margin-top: 2px; }
.iv-guides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.iv-guide { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-whisper); }
.iv-guide strong { font-size: var(--fs-label); color: var(--noite); }
.iv-guide small { font-size: 0.8125rem; line-height: 1.15rem; color: var(--ink-soft); }
.iv-link-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-4); border-radius: var(--r-xl); background: var(--azul-veu); }
.iv-link-card .iv-link { overflow-wrap: anywhere; font-size: var(--fs-label); color: var(--porto); }
.iv-actions .set-row .sr-ic { background: var(--azul-veu); color: var(--azul); }

/* ===== QR, código, scanner (68, 69, 72) ===== */
.qr-card { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-5) var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); text-align: center; }
.qr-card .qr { width: min(240px, 100%); border: 0; padding: 0; }
.qr-card .qr-who { font-weight: 700; color: var(--azul); }
.qr-card .qr-sub { font-size: var(--fs-label); color: var(--ink-soft); }
.scanner { max-width: 300px; }
.scanner.is-flash { background: var(--costa); }
.scanner.is-flash .scan-frame { box-shadow: 0 0 0 999px rgba(255, 255, 255, 0.06); }
.code-box { background: var(--surface); box-shadow: var(--shadow-whisper); }
.code-box .kbd-code { color: var(--azul); }
.code-box .cb-label { font-size: var(--fs-label); font-weight: 700; color: var(--ink-soft); }

/* ===== Presença confirmada (71) e heróis de resultado (76, 78, 100) ===== */
.ok-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-3); padding: var(--s-6) var(--s-2) var(--s-2); }
.ok-hero .ok-ic { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: var(--sucesso-veu); color: var(--sucesso-tinta); animation: pop-in 420ms var(--ease-out-expo) both; }
.ok-hero .ok-ic .ic { width: 56px; height: 56px; stroke-width: 2; }
.ok-hero .ok-ic.is-ouro { background: var(--ouro-veu); color: var(--ouro-tinta); }
.ok-hero .ok-ic.is-azul { background: var(--azul-veu); color: var(--azul); }
.ok-hero .ok-ic.is-atencao { background: var(--atencao-veu); color: var(--atencao-tinta); }
.ok-hero h1, .ok-hero h2 { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: 800; color: var(--azul); }
.ok-hero p { color: var(--ink-soft); max-width: 32ch; }
.presence-rows { display: flex; flex-direction: column; gap: var(--s-2); }
.presence-row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-whisper); }
.presence-row .pr-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--sucesso-veu); color: var(--sucesso-tinta); }
.presence-row.is-wait .pr-ic { background: var(--ouro-veu); color: var(--ouro-tinta); }
.presence-row.is-no .pr-ic { background: var(--erro-veu); color: var(--erro-tinta); }
.presence-row strong { display: block; }
.presence-row small { display: block; font-size: var(--fs-label); color: var(--ink-soft); }

/* ===== Processos (74, 75) ===== */
.proc-card { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-3); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); color: var(--ink); text-decoration: none; }
.proc-head { display: flex; gap: var(--s-3); align-items: flex-start; flex-wrap: wrap; }
.proc-head > .tag { margin-left: auto; align-self: flex-start; }
.proc-head .proc-photo { flex: none; width: 64px; height: 64px; border-radius: var(--r-md); overflow: hidden; background: var(--nevoa); }
.proc-head .proc-photo img { width: 100%; height: 100%; object-fit: cover; }
.proc-head .proc-text { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.proc-head .proc-title { font-size: 1.125rem; line-height: 1.5rem; font-weight: 700; color: var(--azul); text-wrap: balance; }
.proc-head .proc-sub { font-size: var(--fs-label); color: var(--ink-soft); }
.proc-card .mini-steps { padding: 0 var(--s-1); }
.proc-next { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-md); background: var(--bruma); font-size: var(--fs-label); font-weight: 600; color: var(--porto); }
.proc-next.is-urgent { background: var(--ouro-veu); color: var(--ouro-tinta); }
.proc-next .ic { width: 18px; height: 18px; flex: none; }
.next-block { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-xl); background: var(--azul); color: var(--alva); box-shadow: 0 14px 32px rgba(3, 49, 89, 0.24); }
.next-block .nb-kicker { font-size: 0.8125rem; font-weight: 600; color: var(--agua-veu); }
.next-block h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 800; }
.next-block p { color: var(--nevoa); font-size: var(--fs-label); line-height: var(--lh-label); }
.next-block .btn { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); }
.next-block.is-done { background: var(--sucesso-veu); color: var(--noite); box-shadow: var(--shadow-whisper); }
.next-block.is-done .nb-kicker { color: var(--sucesso-tinta); }
.next-block.is-done h2 { color: var(--sucesso-tinta); }
.next-block.is-done p { color: var(--porto); }
.next-block.is-quiet { background: var(--surface); color: var(--noite); box-shadow: var(--shadow-whisper); }
.next-block.is-quiet .nb-kicker { color: var(--ouro-tinta); }
.next-block.is-quiet h2 { color: var(--azul); }
.next-block.is-quiet p { color: var(--ink-soft); }
.timeline-card { padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); }
.timeline-card .tl-item.is-done .tl-dot { background: var(--ouro); border-color: var(--ouro); color: var(--noite); }
.timeline-card .tl-item.is-done::before { background: var(--ouro); }
.timeline-card .tl-item.is-current .tl-dot { box-shadow: 0 0 0 4px var(--ouro-veu); }

/* ===== Avaliação (79) ===== */
.rating { flex-wrap: wrap; }
.rating .rate[aria-pressed="true"] { background: var(--ouro); border-color: var(--ouro); color: var(--noite); }
.rate-head { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; padding: var(--s-2) 0; }
.rate-head .brand { --br: 64px; border-radius: 50%; }
.rate-head h2 { font-size: var(--fs-title); font-weight: 700; color: var(--azul); }

/* ===== Cursos (96–102) ===== */
.course-card { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); color: var(--ink); text-decoration: none; }
.course-cover { position: relative; aspect-ratio: 16 / 7; border-radius: var(--r-lg); overflow: hidden; display: grid; place-items: center; }
.course-cover.is-varejo { background: var(--azul); }
.course-cover.is-geral { background: var(--agua-tinta); }
.course-cover.is-ouro { background: var(--ouro); }
.cc-ic { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--azul); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); }
.cc-ic .ic { width: 30px; height: 30px; }
.course-cover .cc-tag { position: absolute; top: var(--s-2); right: var(--s-2); }
.course-card .cc-title { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); padding: 0 var(--s-1); }
.course-card .card-sub, .course-card .progress, .course-card .row-between { padding: 0 var(--s-1); }
.course-hero { position: relative; margin: calc(var(--s-2) * -1) calc(var(--gutter) * -1) 0; aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden; }
.course-hero.is-varejo { background: var(--azul); }
.course-hero.is-geral { background: var(--agua-tinta); }
.course-hero.is-ouro { background: var(--ouro); }
.course-hero .cc-ic { width: 88px; height: 88px; }
.course-hero .cc-ic .ic { width: 40px; height: 40px; }
.course-head { display: flex; flex-direction: column; gap: var(--s-2); }
.course-head h2 { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: 800; color: var(--azul); }
.course-head p { color: var(--porto); }
.screen[data-screen="/candidate/course/:id"] .screen-body { padding-top: 0; }
.lesson { background: var(--surface); }
.lesson .lesson-text { font-size: 1.0625rem; line-height: 1.7rem; color: var(--porto); }
.lesson-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ouro); color: var(--noite); font-weight: 800; }
.exam-q { padding: var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); }
.exam-q h2 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--azul); }
.exam-q .eq-n { font-size: 0.8125rem; font-weight: 700; color: var(--ouro-tinta); margin-bottom: var(--s-1); }
.score-big { font-size: 3rem; line-height: 1; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; }
.score-big small { font-size: var(--fs-title); color: var(--ink-soft); font-weight: 600; }
.cert { display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-4); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-whisper); text-align: center; border: 2px solid var(--ouro-veu); }
.cert .cert-kicker { font-size: var(--fs-label); font-weight: 700; color: var(--ouro-tinta); }
.cert .cert-name { font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); font-weight: 800; color: var(--azul); }
.cert .cert-course { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 700; color: var(--noite); }
.cert .qr { width: 160px; margin-top: var(--s-2); border: 0; padding: 0; }
.cert .cert-seal { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--ouro); color: var(--noite); margin-bottom: var(--s-1); }
.badges-row { display: flex; gap: var(--s-2); overflow-x: auto; padding: 2px; scrollbar-width: none; }
.badges-row::-webkit-scrollbar { display: none; }
.badge-chip { display: inline-flex; align-items: center; gap: var(--s-2); flex: none; min-height: 44px; padding: 0 var(--s-3) 0 var(--s-1); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-whisper); font-size: var(--fs-label); font-weight: 600; color: var(--noite); }
.badge-chip .bc-ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ouro); color: var(--noite); }
.badge-chip .bc-ic .ic { width: 18px; height: 18px; }

@media (max-width: 359px) {
  .contact-actions, .iv-guides { grid-template-columns: 1fr; }
  .proc-head .proc-photo { width: 52px; height: 52px; }
  .score-big { font-size: 2.5rem; }
}

/* Etapas compactas em telas muito estreitas: rótulos encurtam e deixam de encostar */
@media (max-width: 359px) {
  .proc-card .mini-steps .ms, .screen[data-screen^="/candidate/process/"] .mini-steps .ms, .screen[data-screen^="/candidate/interview/"] .mini-steps .ms { font-size: 0.6875rem; line-height: 1rem; }
  .proc-card .mini-steps .ms::before { left: calc(-50% + 12px); right: calc(50% + 12px); }
  .proc-card .mini-steps .ms-dot { width: 22px; height: 22px; }
}
