/* TM · Job Search (v2) — ported from page.css.
   Candidate-in → extracted-recipe → best-fit-roles flow, plus gap analysis.
   Self-contained: includes the shared .cs-flow/.cs-jd/.cs-reads/.cs-recipe base
   that this block uses (duplicated with candidate-search; identical rules are harmless).
   The #recommend-jobs .panel__col--side rule is global scaffold and is NOT redefined here. */

/* ---------- results head / pill (shared) ----------------- */
.cs-results__head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px;
}
.cs-results__title { font: 700 16px/1 var(--font-body); }
.cs-results__pill {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
  font: 700 13px/1 var(--font-body);
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--adept-green);
  color: #000;
}
.cs-results__pill--ok { background: var(--adept-green); color: #000; }

/* ---------- candidate in -> extract -> ranked flow ------- */
.cs-flow {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr;
  align-items: stretch;
  gap: 0;
  padding: 28px 48px 40px;
}
.cs-flow__in { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.cs-jd {
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 22px 24px;
}
.cs-jd__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cs-jd__label {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.75);
}
.cs-jd__role { font: 700 14px/1 var(--font-body); color: var(--adept-green); }
.cs-jd__body {
  margin: 0;
  font: 400 16px/1.7 var(--font-body);
  color: #ffffff;
}
.cs-jd__body mark {
  background: transparent;
  color: #fff;
  font-weight: 700;
}
.cs-reads__label {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  margin-bottom: 14px;
}
.cs-reads__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-read {
  font: 700 13px/1.3 var(--font-body);
  color: #000;
  background: var(--adept-green);
  border: 0;
  padding: 9px 13px;
  border-radius: 999px;
}
.cs-read--beyond {
  color: #000;
  background: var(--adept-yellow);
  border: 0;
}
.cs-reads__label--beyond { color: rgba(255,255,255,0.92); }

/* Reading sequence: extracted recipe rows arrive, then the beyond-the-resume set lands. */
@media (prefers-reduced-motion: no-preference) {
  .cs-read-seq .cs-map__link,
  .cs-read-seq .cs-reads__label,
  .cs-read-seq .cs-recipe__row,
  .cs-read-seq .cs-read { opacity: 0; }
  .cs-read-seq.is-revealed .cs-recipe__row {
    animation: chipIn 950ms cubic-bezier(0.2,0.55,0.15,1) forwards;
    animation-delay: calc(1.15s + var(--c, 0) * 0.4s);
  }
  .cs-read-seq.is-revealed .cs-recipe .cs-reads__label:first-child {
    animation: seqFade 500ms ease forwards;
    animation-delay: 0.85s;
  }
  .cs-read-seq.is-revealed .cs-map__link {
    animation: seqFade 500ms ease forwards;
    animation-delay: 0.7s;
  }
  .cs-read-seq.is-revealed .cs-reads--beyond .cs-reads__label {
    animation: seqFade 700ms ease forwards;
    animation-delay: 2.3s;
  }
  .cs-read-seq.is-revealed .cs-reads--beyond .cs-read {
    animation: chipSlide 1100ms cubic-bezier(0.16,0.55,0.12,1) forwards;
    animation-delay: calc(2.6s + var(--c, 0) * 0.3s);
  }
}
@keyframes seqFade { to { opacity: 1; } }
@keyframes chipIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes chipSlide {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}
.cs-map__link {
  width: 2px;
  height: 20px;
  margin: 12px 0 12px 26px;
  background: #3a3a3a;
}
.cs-flow__arrow {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 0 28px;
}
.cs-flow__arrow svg { width: 48px; height: 24px; }
.cs-flow__arrow-line { stroke-dasharray: 40; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .cs-flow__arrow-line { animation: csArrowFlow 2.4s ease-in-out infinite; }
}
@keyframes csArrowFlow {
  0%   { stroke-dashoffset: 40; opacity: 0.3; }
  50%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -40; opacity: 0.3; }
}
.cs-flow__arrow-lbl {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.08em;
  color: var(--adept-green);
}
.cs-flow__arrow-sub {
  font: 500 10.5px/1.3 var(--font-body);
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  text-align: center;
  max-width: 90px;
}
.jobs-count {
  font: 500 13px/1.4 var(--font-body);
  color: var(--fg-muted);
  margin-bottom: 16px;
}
.jobs-count b { color: var(--adept-green); font-weight: 700; }
.cs-flow__out { border-radius: 14px; }

/* Recipe-style extraction card (job search) */
.cs-recipe {
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 28px 30px;
}
.cs-recipe .cs-reads__label { margin-bottom: 10px; }
.cs-recipe__row {
  display: grid; grid-template-columns: 124px 1fr; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font: 400 14px/1.4 var(--font-body);
}
.cs-recipe__row:last-of-type { border-bottom: 0; }
.cs-recipe__k {
  font: 700 12px/1.65 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
}
.cs-recipe__v { color: #ffffff; font-weight: 600; }
.cs-recipe__beyond { margin-top: 26px; }

/* Job-search candidate card: plain text (no highlights) */
.cs-flow--jobs .cs-jd {
  background: #1f1f1f;
  border-color: #2e2e2e;
}
.cs-flow--jobs .cs-jd__body { color: #ffffff; }
.cs-flow--jobs .cs-jd__label { color: rgba(255,255,255,0.75); }
@media (max-width: 860px) {
  .cs-flow {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
  .cs-flow__arrow { flex-direction: row; padding: 0; }
  .cs-flow__arrow svg { transform: rotate(90deg); }
}

/* ---------- jobs ranked list ----------------------------- */
.jobs-list { display: flex; flex-direction: column; gap: 12px; }
.jobs-row {
  display: grid;
  grid-template-columns: 34px 38px 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 20px 26px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.10);
}
.jobs-row--top {
  background: #1f1f1f;
  border: 1px solid #ffffff;
}
.jobs-row--top .jobs-row__rank { color: var(--adept-green); }
.jobs-row__allstar {
  display: inline-flex; align-items: center; gap: 5px;
  font: 700 10px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  color: #000; background: var(--adept-green);
  padding: 4px 8px; border-radius: 999px;
  margin-bottom: 7px;
}
.jobs-row__rank {
  font: 700 13px/1 var(--font-body);
  color: var(--fg-subtle);
}
.jobs-row__icon {
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  display: grid; place-items: center;
}
.jobs-row__icon svg { width: 20px; height: 20px; }
.jobs-row__title { font: 700 16px/1.2 var(--font-body); }
.jobs-row__meta { font: 400 14px/1.3 var(--font-body); color: rgba(255,255,255,0.7); margin-top: 4px; }
.jobs-row__score {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
}
.jobs-row__score--green { color: var(--adept-green); }
.jobs-row__score--yel   { color: var(--adept-yellow); }
.jobs-row__score--dim   { color: var(--adept-yellow); }
.jobs-explain {
  margin-top: 24px;
  padding: 22px 26px;
  border-radius: 12px;
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,0.10);
  font: 500 15px/1.7 var(--font-body);
  color: #fff;
}
.jobs-explain b { color: var(--adept-blue); font-weight: 700; }
.cs-result, .jobs-row { transition: background 650ms ease, transform 650ms ease; }
.cs-result:hover, .jobs-row:hover {
  background: rgba(255,255,255,0.05);
  transform: translateX(3px);
}

/* ---------- expanded gap analysis (full-width) ----------- */
.gap-intro,
.adept-type .gap-intro {   /* beat `.adept-type p` (keep 32px bottom margin + 17px size) */
  margin: 0 0 32px;
  font: 400 17px/1.7 var(--font-body);
  color: rgba(255,255,255,0.86);
}
.gap-intro b { color: #fff; font-weight: 700; }
.gap-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: 36px;
}
.gap-from { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.gap-from__lbl {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.gap-from__role {
  font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.05;
  color: #fff; letter-spacing: -0.01em;
}

.cp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cp-tag {
  font: 700 12.5px/1 var(--font-body);
  padding: 6px 10px;
  border-radius: 999px;
  color: #000;
}
.cp-tag--have { background: var(--adept-green); }

.gap-list { display: flex; flex-direction: column; }
.gap-row {
  display: grid; grid-template-columns: 132px 1fr; gap: 28px; align-items: center;
  padding: 22px 24px;
  margin: 0 -24px;
  border-top: 1px solid rgba(255,255,255,0.09);
}
.gap-row:first-child { border-top: 0; }
.gap-row__score { display: flex; flex-direction: column; gap: 8px; }
.gap-row__num {
  font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1;
  letter-spacing: -0.01em;
}
.gap-row--vhigh .gap-row__num { color: var(--adept-green); }
.gap-row--high  .gap-row__num { color: var(--adept-blue); }
.gap-row--med   .gap-row__num { color: var(--adept-yellow); }
.gap-row--low   .gap-row__num { color: #8a8a8a; }
.gap-row__bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,0.10); overflow: hidden; }
.gap-row__fill {
  display: block; height: 100%; border-radius: 999px;
  transform-origin: left center; transform: scaleX(1);
}
@keyframes gapGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.subpanel.is-revealed .gap-row__fill { animation: gapGrow 2400ms cubic-bezier(0.2,0.55,0.15,1) both; }
.subpanel.is-revealed .gap-row:nth-child(1) .gap-row__fill { animation-delay: 120ms; }
.subpanel.is-revealed .gap-row:nth-child(2) .gap-row__fill { animation-delay: 240ms; }
.subpanel.is-revealed .gap-row:nth-child(3) .gap-row__fill { animation-delay: 360ms; }
.subpanel.is-revealed .gap-row:nth-child(4) .gap-row__fill { animation-delay: 480ms; }
.gap-row { transition: background 700ms ease; border-radius: 8px; }
@media (hover: hover) {
  .gap-row:hover { background: var(--adept-green); }
  .gap-row:hover .gap-row__num,
  .gap-row:hover .gap-row__role,
  .gap-row:hover .gap-row__why,
  .gap-row:hover .gap-row__flag { color: #000 !important; }
  .gap-row:hover .gap-row__flag { border-color: #000; }
  .gap-row:hover .gap-row__bar { background: rgba(0,0,0,0.22); }
  .gap-row:hover .gap-row__fill { background: #000; }
  .gap-row:hover .gap-row__num { transform: scale(1.07); }
}
.gap-row__num { transition: transform 700ms cubic-bezier(0.2,0.55,0.15,1); }
.gap-row--vhigh .gap-row__fill { background: var(--adept-green); }
.gap-row--high  .gap-row__fill { background: var(--adept-blue); }
.gap-row--med   .gap-row__fill { background: var(--adept-yellow); }
.gap-row--low   .gap-row__fill { background: #6b6b6b; }
.gap-row__role {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.1;
  color: #fff;
}
.gap-row--low .gap-row__role { color: rgba(255,255,255,0.6); }
.gap-row__flag {
  font: 700 10.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap;
  color: var(--adept-green); border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 8px; border-radius: 999px;
}
.gap-row__band {
  font: 700 11px/1 var(--font-body); letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap;
  color: #000;
  padding: 5px 10px; border-radius: 999px;
}
.gap-row__band--vhigh { background: var(--adept-green); }
.gap-row__band--high  { background: var(--adept-blue); }
.gap-row__band--med   { background: var(--adept-yellow); }
.gap-row__band--low   { background: #8a8a8a; }
@media (hover: hover) {
  .gap-row:hover .gap-row__band { background: #000; color: var(--adept-green); }
  .gap-row:hover .gap-row__band--high { color: var(--adept-blue); }
  .gap-row:hover .gap-row__band--med { color: var(--adept-yellow); }
  .gap-row:hover .gap-row__band--low { color: #fff; }
}
.gap-row__why {
  margin-top: 7px; font: 400 15px/1.65 var(--font-body); color: rgba(255,255,255,0.74);
}

/* ---------- responsive ----------------------------------- */
@media (max-width: 560px) {
  .cs-results__head { flex-wrap: wrap; gap: 8px 12px; }
  .cs-results__pill { flex: none; }
  .jobs-row {
    padding: 16px 20px;
    grid-template-columns: auto auto 1fr;
    grid-template-areas:
      "rank icon score"
      "body body body";
    column-gap: 8px;
    row-gap: 8px;
    align-items: center;
  }
  .jobs-row__rank { grid-area: rank; align-self: center; }
  .jobs-row__icon { grid-area: icon; width: 30px; height: 30px; align-self: center; }
  .jobs-row__icon svg { width: 17px; height: 17px; }
  .jobs-row__score { grid-area: score; justify-self: end; font-size: 18px; }
  .jobs-row__body { grid-area: body; min-width: 0; }
  .jobs-row__title { font-size: 15px; }
  .jobs-row__meta { font-size: 13px; margin-top: 3px; }

  .gap-from__role { font-size: 22px; }
  .gap-row { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px 0; margin: 0; }
  .gap-row__num { font-size: 22px; }
  .gap-row__role { font-size: 17px; gap: 8px; }
  .gap-row__band { padding: 4px 8px; }
  .gap-row__why { font-size: 14px; }
}