/* CV Mojo app: the application kit (jk-), "paste a job link, get your application".
   Built on the shared ap-, db-, cvm- and tool- toolkit (app.css). It loads before v3/app-v3.css, so it uses
   the shared tokens (remapped by v3) and keeps the v3 flourishes (display type, blob shapes) under .jk.is-v3,
   which app-jobkit.js adds when the v3 stylesheet is on the page. Also styles the small entry points it adds
   to the Jobs page, the job page and the application pack (.jk-hook-*). */

.jk [hidden] { display: none !important; }
.jk .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.jk-offscreen { position: fixed; top: 0; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jk a:focus-visible, .jk button:focus-visible, .jk select:focus-visible, .jk summary:focus-visible, .jk-cv:focus-within { outline: 3px solid var(--navy); outline-offset: 3px; }
.jk [tabindex="-1"]:focus { outline: none; }
.jk-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.jk-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; animation: db-in .35s ease both; }
.jk-btn-sm { min-height: 38px; padding: 6px 14px; font-size: 14px; }
.jk-h { margin: 0; font-size: 1.45rem; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--navy); }
.jk-h3 { margin: 0 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jk-lead { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.jk-lead b { color: var(--navy); }
.jk-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jk-opt { font-weight: 600; color: var(--muted); }
.jk-hint { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.jk-hint svg { flex: none; margin-top: 2px; }
.jk-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 15px; font-size: 14.5px; line-height: 1.5; color: var(--navy); background: var(--mist); border-radius: 14px; }
.jk-note svg { flex: none; margin-top: 2px; }
.jk-note--yellow { background: var(--amber-soft, #fff3cf); }
.jk-note--sky { background: var(--channel, #cfe8f6); }
.jk-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; }
.jk-actions .ap-linkish { display: inline-flex; align-items: center; gap: 6px; }
.jk-state { display: grid; justify-items: start; gap: 12px; padding: 18px; background: var(--mist); border-radius: 16px; }
.jk-state p { margin: 0; }
.jk-spin { display: inline-block; flex: none; width: 15px; height: 15px; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: jk-spin .8s linear infinite; vertical-align: -2px; }
@keyframes jk-spin { to { transform: rotate(360deg); } }
.jk-blob { flex: none; display: grid; place-items: center; width: 64px; height: 64px; color: var(--navy); background: var(--yellow); border-radius: 20px; transform: rotate(-6deg); }
.jk-blob--mint { background: var(--cyan); }

/* Stepper ------------------------------------------------------------------- */
.jk-steps { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.jk-step { position: relative; display: flex; flex: 1; align-items: center; min-width: 0; }
.jk-step:not(:last-child)::after { content: ''; flex: 1; min-width: 12px; height: 3px; margin: 0 10px; background: var(--line); border-radius: 3px; }
.jk-step.is-done:not(:last-child)::after { background: var(--ok); }
.jk-step-btn { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 6px 4px 4px; font: inherit; color: var(--muted); background: none; border: 0; border-radius: 999px; }
button.jk-step-btn { cursor: pointer; }
button.jk-step-btn:hover .jk-step-l { color: var(--navy); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.jk-step-n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; font-size: 15px; font-weight: 800; color: var(--muted); background: var(--paper); border: 2px solid var(--line); border-radius: 50%; }
.jk-step-l { overflow: hidden; font-size: 14.5px; font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.jk-step.is-done .jk-step-n { color: #fff; background: var(--ok); border-color: var(--ok); }
.jk-step.is-done .jk-step-l { color: var(--navy); }
.jk-step.is-now .jk-step-n { color: #fff; background: var(--navy); border-color: var(--navy); }
.jk-step.is-now .jk-step-l { color: var(--navy); }

/* Step 1: the link ------------------------------------------------------------ */
.jk-paste { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 40px; align-items: start; }
.jk-paste > * { grid-column: 1; }
.jk-paste > .jk-or { display: none; }
.jk-paste > .jk-alts { grid-column: 2; grid-row: 1 / span 6; align-self: stretch; }
.jk-paste .jk-blob { margin-bottom: -4px; }
.jk-link { display: flex; flex-wrap: wrap; gap: 12px; }
.jk-url { position: relative; display: flex; flex: 1 1 320px; align-items: center; min-width: 0; }
.jk-url > svg { position: absolute; left: 16px; color: var(--muted); pointer-events: none; }
.jk-url .ap-input { min-height: 56px; padding-left: 46px; font-size: 16px; }
.jk-link-go { flex: none; min-height: 56px; }
.jk-link-err { display: grid; justify-items: start; gap: 12px; padding: 14px 16px; color: #8c1d18; background: #fdecec; border-radius: 16px; }
.jk-link-err p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 15px; font-weight: 700; line-height: 1.5; }
.jk-link-err svg { flex: none; margin-top: 2px; }
.jk-or { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.jk-or::before, .jk-or::after { content: ''; flex: 1; height: 2px; background: var(--line); }
.jk-alts { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 18px; min-width: 0; padding: 22px; background: var(--mist); border-radius: 22px; }
.jk-alt { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; font: inherit; text-align: left; color: var(--navy); background: var(--paper); border: 2px solid transparent; border-radius: 18px; cursor: pointer; transition: border-color .2s ease, transform .2s ease; }
.jk-alt:hover { border-color: var(--navy); transform: translateY(-2px); }
.jk-alt > span { flex: 1; min-width: 0; }
.jk-alt b { display: block; font-size: 16px; }
.jk-alt small { display: block; font-size: 13.5px; color: var(--muted); }
.jk-saved { min-width: 0; }
.jk-saved-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.jk-saved-job { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; font: inherit; font-size: 14px; text-align: left; color: var(--navy); background: var(--paper); border: 2px solid transparent; border-radius: 14px; cursor: pointer; }
.jk-saved-job:hover { border-color: var(--navy); }
.jk-saved-job > svg { flex: none; }
.jk-saved-job > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jk-saved-job > span > span { color: var(--muted); }

/* Step 1: check the job --------------------------------------------------------- */
.jk-card-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.jk-src { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; font-weight: 800; color: var(--navy); background: var(--mist); border-radius: 999px; }
.jk-src--reed, .jk-src--jobposting { color: #1d6b45; background: var(--ok-soft); }
.jk-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jk-grid3 .ap-field + .ap-field { margin-top: 0; }
.jk-ad-field { margin: 0; }
.jk-ad-field .ap-field-row label { font-size: 14px; font-weight: 800; color: var(--navy); }
.jk.is-v3 .jk-ad-field .ap-field-row label { color: var(--text); }
.jk-ad.ap-textarea { min-height: 340px; font-size: 15px; line-height: 1.6; }
.jk-form .ap-error { margin: 0; }

/* Step 2: the CV ------------------------------------------------------------------ */
.jk-cvs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.jk-cv { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px; color: var(--text); background: var(--mist); border: 2px solid transparent; border-radius: 20px; cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
.jk-cv:hover { border-color: rgba(30, 42, 90, .35); }
.jk-cv.is-on { background: var(--paper); border-color: var(--navy); box-shadow: 0 0 0 4px var(--yellow-soft); }
.jk-cv input { position: absolute; opacity: 0; pointer-events: none; }
.jk-cv-thumb { flex: none; display: grid; place-items: center; width: 52px; height: 62px; background: var(--channel); border-radius: 14px; }
.jk-cv-thumb .cvm-sheet { width: 32px; gap: 3px; padding: 6px 5px; box-shadow: 0 3px 8px rgba(25, 29, 59, .12); }
.jk-cv-thumb .cvm-sheet i { height: 2.5px; }
.jk-cv-text { display: grid; flex: 1; gap: 3px; min-width: 0; }
.jk-cv-text b { font-size: 16px; line-height: 1.3; color: var(--navy); overflow-wrap: anywhere; }
.jk-cv-text > span { font-size: 13.5px; color: var(--muted); }
.jk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jk-radio { flex: none; width: 24px; height: 24px; border: 2.5px solid #c9c2ad; border-radius: 50%; background: var(--paper); }
.jk-cv.is-on .jk-radio { border-color: var(--navy); background: radial-gradient(circle, var(--navy) 0 5px, var(--paper) 6px); }

/* Step 3: what to make ------------------------------------------------------------- */
.jk-for { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: -4px 0 0; font-size: 15px; color: var(--muted); }
.jk-for > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.jk-for b { color: var(--navy); }
.jk-makes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.jk-make { --tone-soft: var(--mist); display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; padding: 18px; background: var(--paper); border: 2px dashed var(--line); border-radius: 22px; transition: background-color .2s ease, border-color .2s ease; }
.jk-make.is-on { background: var(--tone-soft); border: 2px solid transparent; }
.jk-make--yellow { --tone-soft: var(--yellow-soft); --tone: var(--yellow); }
.jk-make--cyan { --tone-soft: var(--cyan-soft); --tone: var(--cyan); }
.jk-make--channel { --tone-soft: var(--channel-soft); --tone: var(--channel); }
.jk-make-toggle { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 0; font: inherit; text-align: left; color: var(--text); background: none; border: 0; cursor: pointer; }
.jk-make-ic { display: grid; place-items: center; width: 46px; height: 46px; color: var(--navy); background: var(--paper); border-radius: 14px; transform: rotate(-4deg); }
.jk-make:not(.is-on) .jk-make-ic { color: var(--muted); background: var(--mist); }
.jk-make-text b { display: block; font-size: 17px; color: var(--navy); }
.jk-make-text span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text); }
.jk-make:not(.is-on) .jk-make-text b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.jk-tick { display: grid; place-items: center; width: 28px; height: 28px; color: transparent; background: var(--paper); border: 2.5px solid #c9c2ad; border-radius: 9px; }
.jk-make.is-on .jk-tick { color: #fff; background: var(--navy); border-color: var(--navy); }
.jk-item-opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.jk-item-opts .ap-label { font-size: 13px; }
.jk-item-opts .ap-seg { justify-self: start; background: rgba(255, 255, 255, .6); }
.jk-item-opts .ap-seg button { padding: 6px 11px; font-size: 13px; }
.jk-item-opts .ap-seg button:disabled, .jk-select:disabled { opacity: .5; cursor: default; }
.jk-select.ap-select { min-height: 40px; padding: 7px 12px; font-size: 14px; }
.jk-item-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13px; line-height: 1.45; color: var(--navy); }
.jk-item-note svg { flex: none; margin-top: 2px; }
.jk-make:not(.is-on) .jk-item-note { opacity: .55; }
.jk-cost { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px; color: var(--navy); background: var(--yellow-soft); border-radius: 18px; }
.jk-cost > svg { flex: none; }
.jk-cost > div { flex: 1; min-width: 220px; }
.jk-cost b { display: block; font-size: 16px; }
.jk-cost span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--text); }
.jk-cost--pro { background: var(--ok-soft); }
.jk-cost--out { background: #fde3d6; }
.jk-actions--go { padding-top: 4px; }
.jk-time { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.jk-go { min-height: 54px; }

/* The run ---------------------------------------------------------------------------- */
.jk-run-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.jk-run-head .jk-lead { margin-top: 6px; }
.jk-run-count { flex: none; padding: 6px 14px; font-size: 15px; font-weight: 800; color: var(--navy); background: var(--mist); border-radius: 999px; }
.jk-bar { display: block; height: 12px; overflow: hidden; background: var(--mist); border-radius: 999px; }
.jk-bar i { display: block; height: 100%; background: var(--ok); border-radius: 999px; transition: width .6s ease; }
.jk-run-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.jk-run-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 16px; padding: 16px 18px; background: var(--mist); border-radius: 18px; }
.jk-run-item.is-run { background: var(--tone-soft); }
.jk-run-item.is-done { background: var(--paper); box-shadow: inset 0 0 0 2px var(--ok-soft); }
.jk-run-item.is-skip { opacity: .7; }
.jk-run-item.is-fail { background: #fdecec; }
.jk-run-item--yellow { --tone-soft: var(--yellow-soft); --tone: var(--yellow); }
.jk-run-item--cyan { --tone-soft: var(--cyan-soft); --tone: var(--cyan); }
.jk-run-item--channel { --tone-soft: var(--channel-soft); --tone: var(--channel); }
.jk-run-ic { display: grid; place-items: center; width: 44px; height: 44px; color: var(--navy); background: var(--tone, var(--paper)); border-radius: 14px; transform: rotate(-4deg); }
.jk-run-item.is-wait .jk-run-ic, .jk-run-item.is-skip .jk-run-ic { background: var(--paper); }
.jk-run-text { display: grid; gap: 3px; min-width: 0; }
.jk-run-text b { font-size: 16.5px; color: var(--navy); }
.jk-st { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--muted); }
.jk-st--run { font-weight: 700; color: var(--navy); }
.jk-st--ok { font-weight: 800; color: #1d6b45; }
.jk-st--err { align-items: flex-start; font-weight: 700; color: #8c1d18; }
.jk-st--err svg { flex: none; margin-top: 2px; }
.jk-run-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

/* Results --------------------------------------------------------------------------- */
.jk-done { position: relative; overflow: hidden; }
.jk-done-sticker { position: absolute; top: 20px; right: 22px; transform: rotate(4deg); }
.jk-done-top { display: flex; align-items: center; gap: 18px 22px; padding-right: 90px; }
.jk-done-top .jk-lead { margin-top: 8px; }
.jk-h--big { font-size: clamp(1.7rem, 3vw, 2.3rem); }
.jk-done-acts .btn { text-decoration: none; }
.jk-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.jk-tab-note { font-size: 12px; font-weight: 700; opacity: .75; }
.jk-panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; padding: 26px; background: var(--paper); border: 1px solid var(--line); border-radius: 22px; }
.jk-bar-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.jk-bar-row .ap-actions { gap: 8px; }
.jk-bar-row .btn { text-decoration: none; }
.jk-saved-chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; font-size: 13.5px; font-weight: 800; color: #1d6b45; background: var(--ok-soft); border-radius: 999px; }
.jk-saved-chip--warn { color: #8a5a00; background: var(--amber-soft, #fff3cf); }
.jk-saved-chip--busy { color: var(--navy); background: var(--mist); }
.jk-aside { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 14px; min-width: 0; padding: 20px; background: var(--mist); border-radius: 18px; }
.jk-aside .jk-h3 { margin: 0; }
.jk-aside p { margin: 0; }
.jk-ticks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jk-ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.5; }
.jk-ticks svg { flex: none; margin-top: 3px; color: var(--ok); }
.jk-gain { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; color: var(--navy); }
.jk-cv-cols, .jk-letter-cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 20px; align-items: start; }
.jk-cv-doc { min-width: 0; }
.jk-paper { min-width: 0; }
.jk-letter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; min-width: 0; }
.jk-letter-ed.ap-textarea { min-height: 520px; padding: 22px 24px; font-size: 15.5px; line-height: 1.7; background: #fff; overflow-y: hidden; resize: none; }
.jk-more { padding: 12px 16px; background: var(--mist); border-radius: 14px; }
.jk-more summary { font-size: 14.5px; font-weight: 800; color: var(--navy); cursor: pointer; }
.jk-more[open] summary { margin-bottom: 12px; }
.jk-draft { font-size: 15px; line-height: 1.65; }
.jk-draft p { margin: 0 0 10px; }
.jk-ph { padding: 1px 5px; color: var(--navy); background: var(--yellow-soft); border-radius: 5px; box-shadow: inset 0 -2px 0 var(--yellow); }
.jk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jk-tag { padding: 5px 11px; font-size: 13px; font-weight: 700; color: var(--navy); background: var(--paper); border-radius: 999px; }
.jk-tag--ok { color: #1d6b45; background: var(--ok-soft); }
.jk-tips { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.jk-tips li { display: grid; gap: 2px; font-size: 14px; line-height: 1.5; }
.jk-tips b { color: var(--navy); }
.jk-prep-lead { font-size: 15px; color: var(--muted); }
.jk-qs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.jk-q { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 18px; background: var(--mist); border-radius: 18px; }
.jk-q-n { display: grid; place-items: center; width: 34px; height: 34px; font-weight: 800; color: var(--navy); background: var(--yellow); border-radius: 50%; }
.jk-q-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.jk-q-t { margin: 0; font-size: 16.5px; font-weight: 800; line-height: 1.45; color: var(--navy); }
.jk-q-meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.jk-q .jk-more { padding: 0; background: none; }
.jk-q .jk-more summary { font-size: 14px; }
.jk-coach { display: grid; gap: 4px; margin-top: 10px; padding: 12px 14px; background: var(--paper); border-radius: 14px; }
.jk-coach h4 { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jk-coach p { margin: 0; font-size: 14.5px; line-height: 1.55; }
.jk-coach--tip { background: var(--yellow-soft); }
.jk-skipped .ap-empty { box-shadow: none; background: var(--mist); }
.jk-again { margin: 0; text-align: center; }
.jk-again .ap-linkish { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }

/* v3: display type, organic shapes ------------------------------------------------------ */
.jk.is-v3 .jk-h { font-family: var(--v-display); font-size: 40px; font-weight: 400; line-height: .92; letter-spacing: .01em; text-transform: uppercase; -webkit-text-stroke: .02em currentColor; }
#app .jk.is-v3 .jk-h { font-size: 40px !important; }
#app .jk.is-v3 .jk-h--big { font-size: clamp(44px, 4.6vw, 64px) !important; }
.jk.is-v3 .jk-h3, .jk.is-v3 .jk-label { font-family: var(--v-slab); font-size: 13px; font-weight: 400; letter-spacing: .05em; color: var(--tang-t); }
.jk.is-v3 .jk-blob, .jk.is-v3 .jk-make-ic, .jk.is-v3 .jk-run-ic, .jk.is-v3 .jk-cv-thumb { border-radius: 52% 46% 55% 45% / 47% 55% 45% 53%; }
.jk.is-v3 .jk-blob { background: var(--sun); }
.jk.is-v3 .jk-blob--mint { background: var(--mint); }
.jk.is-v3 .jk-step-n { font-family: var(--v-display); font-size: 21px; font-weight: 400; border-radius: 50% 46% 52% 48%; }
.jk.is-v3 .jk-step-l { font-size: 15px; }
.jk.is-v3 .jk-step.is-now .jk-step-n { color: var(--cream); }
.jk.is-v3 .jk-step.is-now .jk-step-l { position: relative; z-index: 0; }
.jk.is-v3 .jk-step.is-now .jk-step-l::after { content: ''; position: absolute; z-index: -1; left: -3%; right: -6%; bottom: -.05em; height: .45em; background: var(--sun); -webkit-mask: var(--v-stroke) center / 100% 100% no-repeat; mask: var(--v-stroke) center / 100% 100% no-repeat; }
.jk.is-v3 .jk-step.is-done .jk-step-n { background: var(--teal); border-color: var(--teal); }
.jk.is-v3 .jk-step.is-done:not(:last-child)::after, .jk.is-v3 .jk-bar i { background: var(--teal); }
.jk.is-v3 .jk-alts { background: var(--cream); border-radius: 26px; }
.jk.is-v3 .jk-alt, .jk.is-v3 .jk-saved-job { box-shadow: var(--shadow-sm); }
.jk.is-v3 .jk-alt b { font-family: var(--v-display); font-size: 26px; font-weight: 400; line-height: .95; text-transform: uppercase; }
.jk.is-v3 .jk-alt > svg:first-child { color: var(--tang-t); }
.jk.is-v3 .jk-or::before, .jk.is-v3 .jk-or::after { background: none; border-top: 2px dashed var(--line); height: 0; }
.jk.is-v3 .jk-url .ap-input { border-radius: 999px; }
.jk.is-v3 .jk-link-err { color: #8c1d18; background: #fce3d6; border-radius: 20px; }
.jk.is-v3 .jk-src--reed, .jk.is-v3 .jk-src--jobposting, .jk.is-v3 .jk-saved-chip, .jk.is-v3 .jk-st--ok, .jk.is-v3 .jk-tag--ok { color: var(--teal-t); }
.jk.is-v3 .jk-src--reed, .jk.is-v3 .jk-src--jobposting, .jk.is-v3 .jk-saved-chip, .jk.is-v3 .jk-tag--ok, .jk.is-v3 .jk-cost--pro { background: var(--mint); }
.jk.is-v3 .jk-note--yellow, .jk.is-v3 .jk-saved-chip--warn { color: var(--navy); background: #fff0c2; }
.jk.is-v3 .jk-note--sky { background: var(--sky); }
.jk.is-v3 .jk-cv { background: var(--cream); border-radius: 22px; }
.jk.is-v3 .jk-cv.is-on { background: var(--paper); box-shadow: 0 0 0 4px var(--sun-l); }
.jk.is-v3 .jk-cv-thumb { background: var(--sky); }
.jk.is-v3 .jk-cv-text b { font-family: var(--v-display); font-size: 25px; font-weight: 400; line-height: .95; text-transform: uppercase; }
.jk.is-v3 .jk-make { border-radius: 26px; }
.jk.is-v3 .jk-make--yellow { --tone-soft: #fff0c2; --tone: var(--sun); }
.jk.is-v3 .jk-make--cyan { --tone-soft: var(--mint); --tone: var(--teal); }
.jk.is-v3 .jk-make--channel { --tone-soft: var(--sky); --tone: #8fc4e4; }
.jk.is-v3 .jk-make-text b, .jk.is-v3 .jk-run-text b { font-family: var(--v-display); font-size: 27px; font-weight: 400; line-height: .95; letter-spacing: .01em; text-transform: uppercase; }
.jk.is-v3 .jk-run-item--yellow { --tone-soft: #fff0c2; --tone: var(--sun); }
.jk.is-v3 .jk-run-item--cyan { --tone-soft: var(--mint); --tone: var(--mint); }
.jk.is-v3 .jk-run-item--channel { --tone-soft: var(--sky); --tone: var(--sky); }
.jk.is-v3 .jk-run-item, .jk.is-v3 .jk-q, .jk.is-v3 .jk-aside, .jk.is-v3 .jk-more, .jk.is-v3 .jk-state { background-color: var(--cream); }
.jk.is-v3 .jk-run-item.is-run { background: var(--tone-soft); }
.jk-run-item.is-run .jk-run-ic, .jk.is-v3 .jk-run-item.is-run .jk-run-ic { background: var(--paper); }
.jk.is-v3 .jk-run-item.is-done { background: var(--paper); box-shadow: inset 0 0 0 2px var(--mint); }
.jk.is-v3 .jk-run-item.is-fail { background: #fce3d6; }
.jk.is-v3 .jk-run-count { font-family: var(--v-display); font-size: 24px; font-weight: 400; padding: 4px 14px 2px; background: var(--sun); }
.jk.is-v3 .jk-cost { background: #fff0c2; border-radius: 22px; }
.jk.is-v3 .jk-cost--out { background: #ffd9bf; }
.jk.is-v3 .jk-cost.jk-cost--pro { background: var(--mint); }
.jk.is-v3 .jk-cost--pro > svg { color: var(--teal-t); }
.jk.is-v3 .jk-cost > svg { color: var(--tang-t); }
.jk.is-v3 .jk-cost b { font-family: var(--v-display); font-size: 26px; font-weight: 400; line-height: .95; text-transform: uppercase; }
.jk.is-v3 .jk-panel { border: 0; border-radius: 26px; box-shadow: var(--shadow); }
.jk.is-v3 .jk-q-n { font-family: var(--v-display); font-size: 22px; font-weight: 400; background: var(--sun); border-radius: 50% 46% 52% 48%; }
.jk.is-v3 .jk-coach { background: var(--paper); }
.jk.is-v3 .jk-coach--tip { background: #fff0c2; }
.jk.is-v3 .jk-coach h4 { font-family: var(--v-slab); font-weight: 400; color: var(--tang-t); }
.jk.is-v3 .jk-gain svg { color: var(--teal-t); }
.jk.is-v3 .jk-ph { background: var(--sun-l); box-shadow: inset 0 -3px 0 var(--sun); }
.jk.is-v3 .jk-tick { border-radius: 10px 12px 9px 11px; }

@media (prefers-reduced-motion: reduce) {
  .jk-card, .jk-alt, .jk-bar i { animation: none !important; transition: none !important; }
  .jk-spin { animation-duration: 2s; }
}
@media (max-width: 1180px) {
  .jk-makes { grid-template-columns: minmax(0, 1fr); }
  .jk-cv-cols, .jk-letter-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .jk-paste { grid-template-columns: minmax(0, 1fr); }
  .jk-paste > .jk-alts { grid-column: 1; grid-row: auto; }
  .jk-paste > .jk-or { display: flex; }
  .jk-grid3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jk-grid3 .ap-field:first-child { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .jk-steps { gap: 0; }
  .jk-step { flex: none; }
  .jk-step-l { display: none; }
  .jk-step:not(:last-child)::after { flex: none; width: 10px; min-width: 10px; margin: 0 4px; }
  .jk-step-btn { padding: 2px; }
  .jk-step.is-now { flex: 1 1 auto; min-width: 0; }
  .jk-step.is-now:not(:last-child)::after { flex: 1; }
  .jk-step.is-now .jk-step-l { display: block; overflow: visible; white-space: normal; line-height: 1.1; }
  .jk-item-opts .ap-seg { border-radius: 18px; }
  .jk-item-opts .ap-seg button { padding: 6px 10px; }
  .jk-link-go, .jk-go { width: 100%; justify-content: center; }
  .jk-actions { flex-direction: column-reverse; align-items: stretch; }
  .jk-actions .btn { justify-content: center; }
  .jk-actions .ap-linkish { justify-content: center; }
  .jk-actions--go { flex-direction: column; }
  .jk-grid3 { grid-template-columns: minmax(0, 1fr); }
  .jk-ad.ap-textarea { min-height: 260px; }
  .jk-run-item { grid-template-columns: auto minmax(0, 1fr); padding: 14px; }
  .jk-run-acts { grid-column: 1 / -1; justify-content: flex-start; }
  .jk-done-top { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .jk-done-sticker { top: 16px; right: 16px; }
  .jk-done-acts .btn, .jk-done-acts > span, .jk-done-acts > span .btn { width: 100%; justify-content: center; }
  .jk-panel { padding: 18px 16px; }
  .jk-letter-ed.ap-textarea { min-height: 420px; padding: 16px; }
  .jk-bar-row .ap-actions { width: 100%; }
  .jk-q { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .jk-cv { padding: 14px; }
  #app .jk.is-v3 .jk-h { font-size: 36px !important; }
  #app .jk.is-v3 .jk-h--big { font-size: 46px !important; }
  .jk.is-v3 .jk-make-text b, .jk.is-v3 .jk-run-text b { font-size: 24px; }
}

/* Entry points added to other pages (only shown when this part is loaded) -------------------- */
.jk-hook-glance { display: flex; justify-content: center; gap: 8px; width: 100%; min-height: 50px; text-decoration: none; }
.jk-hook-glance:hover { text-decoration: none; }
.jk-hook-note { margin: -8px 0 0; font-size: 12.5px; text-align: center; color: var(--muted); }
.jk-hook-band { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; padding: 20px 24px; background: var(--paper); border-radius: 22px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(25, 29, 59, .05)); }
.jk-hook-band > span:first-child { flex: none; display: grid; place-items: center; width: 52px; height: 52px; color: var(--navy); background: var(--yellow); border-radius: 50% 46% 55% 45% / 47% 55% 45% 53%; transform: rotate(-6deg); }
.jk-hook-band > div { flex: 1; min-width: 220px; }
.jk-hook-band b { display: block; font-size: 17px; color: var(--navy); }
.jk-hook-band p { margin: 2px 0 0; font-size: 14.5px; color: var(--muted); }
.jk-hook-band .btn { text-decoration: none; }
.jk-hook-prep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0; padding: 14px 18px; font-size: 14.5px; color: var(--navy); background: var(--yellow-soft); border-radius: 16px; }
.jk-hook-prep > span { flex: 1; min-width: 200px; }
.jk-hook-prep .btn { text-decoration: none; }
@media (max-width: 760px) {
  .jk-hook-band .btn, .jk-hook-prep .btn { width: 100%; justify-content: center; }
}