/* CV Mojo app (v2 preview): the job page (jd-). Builds on the ap-, db-, tool- and cvm- toolkit in app.css. */

.jd [hidden] { display: none !important; }
.jd a:focus-visible, .jd button:focus-visible, .jd select:focus-visible, .jd summary:focus-visible, .jd-panel:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; box-shadow: none; }
.jd [tabindex="-1"]:focus { outline: none; }
.jd-panel:focus:not(:focus-visible) { outline: none; }

/* Header ------------------------------------------------------------------- */
.jd .ap-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 15px; color: var(--navy); }
.jd-logo { flex: none; display: inline-grid; place-items: center; width: 38px; height: 38px; font-size: 16px; font-weight: 800; color: var(--navy); background: var(--cyan); border-radius: 11px; transform: rotate(-5deg); box-shadow: 0 6px 14px rgba(25, 29, 59, .1); }
.jd-employer { min-width: 0; overflow-wrap: anywhere; }
.jd .ap-title { overflow-wrap: anywhere; }
.jd-where { display: inline-flex; align-items: center; gap: 6px; }
.jd-where svg { color: var(--indigo); }
.ap-crumbs.jd-crumbs { flex-wrap: nowrap; min-width: 0; }
.jd-crumbs > li { flex: none; white-space: nowrap; }
.jd-crumbs > li.jd-crumb-now { display: flex; flex: 0 1 auto; min-width: 0; }
.jd-crumb-now > span { min-width: 0; max-width: 46ch; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.jd-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.jd-pills:empty { display: none; }

/* Layout: tabs on the left, the glance card sticks on the right ------------- */
.jd-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.jd-main { display: grid; gap: 20px; min-width: 0; }
.jd-aside { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: 20px; min-width: 0; }
.jd-tabs { margin-bottom: 0; }
.jd-panel { display: grid; gap: 20px; min-width: 0; }
.jd-panel-title { margin: 4px 0 0; }
.jd-stack { display: grid; gap: 20px; min-width: 0; }
.jd-acc--cyan { --accent: var(--cyan); }
.jd-acc--channel { --accent: var(--channel); }
.jd-label { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jd-small { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.jd-lead { margin: 0 0 14px; font-size: 15px; line-height: 1.6; color: var(--text); }
.jd-sub { margin: 18px 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jd-sub span { letter-spacing: 0; }
.jd .ap-card .db-card-h h3 { margin: 0; font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
/* Stickers sit inside the cards: accent cards clip anything that pokes out. */
.jd-sticker { top: 18px; right: 18px; }
.jd-sticker--soon { transform: rotate(3deg); }

/* The role ------------------------------------------------------------------ */
.jd-h2 { margin: 0 0 16px; font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.jd-desc { position: relative; font-size: 15.5px; line-height: 1.7; color: var(--text); overflow-wrap: anywhere; }
.jd-desc > :first-child { margin-top: 0; }
.jd-desc p { margin: 0 0 12px; }
.jd-desc ul, .jd-desc ol { margin: 0 0 14px; padding-left: 22px; }
.jd-desc li { margin: 4px 0; padding-left: 4px; }
.jd-desc ul > li::marker { color: var(--indigo); }
.jd-desc ol > li::marker { font-weight: 700; color: var(--indigo); }
.jd-desc li > ul, .jd-desc li > ol { margin: 4px 0 0; }
.jd-desc .jd-desc-h { margin: 22px 0 8px; font-size: 1rem; font-weight: 800; letter-spacing: -.01em; color: var(--navy); }
.jd-desc .jd-desc-h:first-child { margin-top: 0; }
.jd-desc a { font-weight: 600; text-underline-offset: 3px; }
.jd-desc strong { color: var(--navy); }
.jd-desc blockquote { margin: 0 0 14px; padding: 10px 16px; background: var(--mist); border-left: 4px solid var(--channel); border-radius: 0 12px 12px 0; }
.jd-desc hr { margin: 18px 0; border: 0; border-top: 1px dashed var(--line); }
.jd-desc.is-clamped { max-height: 720px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.jd-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 16px; font: inherit; font-size: 14px; font-weight: 700; color: var(--navy); background: var(--cyan-soft); border: 0; border-radius: 999px; cursor: pointer; }
.jd-more:hover { background: var(--cyan); }
.jd-more svg { transition: transform .2s ease; }
.jd-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.jd-none { margin: 0; color: var(--muted); }
.jd-source { display: flex; align-items: flex-start; gap: 8px; margin: 20px 0 0; padding-top: 14px; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line); }
.jd-source svg { flex: none; margin-top: 1px; }

/* At a glance ---------------------------------------------------------------- */
.jd-glance { display: grid; gap: 14px; }
.jd-glance .jd-label { margin: 0; }
.jd-pay { margin: 0; line-height: 1.2; color: var(--navy); }
.jd-pay b { font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; background: linear-gradient(transparent 64%, var(--yellow) 64%, var(--yellow) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.jd-pay span { font-size: 14.5px; font-weight: 700; color: var(--muted); }
.jd-pay b.jd-pay-none { font-size: 1.15rem; color: var(--muted); background: none; }
.jd-pay-alt { margin: -8px 0 0; font-size: 13.5px; color: var(--muted); }
.jd-facts { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jd-facts li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--text); }
.jd-facts svg { flex: none; margin-top: 2px; color: var(--indigo); }
.jd-closed { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 12px; font-size: 14px; line-height: 1.5; color: var(--amber); background: var(--amber-soft); border-radius: 12px; }
.jd-closed svg { flex: none; margin-top: 2px; }
.jd-mini:empty { display: none; }
.jd-mini-btn { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; font: inherit; text-align: left; color: var(--text); background: var(--channel-soft); border: 1.5px solid transparent; border-radius: 16px; cursor: pointer; transition: border-color .15s ease, transform .15s ease; }
.jd-mini-btn:hover { border-color: var(--indigo); transform: translateY(-1px); }
.jd-mini-btn > svg { flex: none; margin-left: auto; color: var(--indigo); }
.jd-mini-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; color: var(--navy); background: #fff; border-radius: 12px; transform: rotate(-4deg); }
.jd-mini-text { min-width: 0; }
.jd-mini-text b { display: block; font-size: 14.5px; color: var(--navy); }
.jd-mini-text span { display: block; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.btn.jd-apply { display: flex; justify-content: center; gap: 8px; width: 100%; min-height: 50px; font-size: 15.5px; text-decoration: none; }
.btn.jd-apply:hover { color: #fff; text-decoration: none; }
.jd-apply-host { margin: -8px 0 0; font-size: 12.5px; text-align: center; color: var(--muted); }
.jd-noapply { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 14px; color: var(--muted); }
.jd-noapply svg { flex: none; margin-top: 2px; }
.jd-btn-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.jd-btn-row > span { display: grid; }
.jd-btn-row .btn { justify-content: center; gap: 6px; width: 100%; text-decoration: none; }
.jd-save[aria-pressed="true"] { color: var(--navy); background: var(--yellow-soft); border-color: var(--navy); }
.jd-save[aria-pressed="true"] svg { fill: currentColor; }
.btn.jd-track.is-on { color: #1d6b45; background: var(--ok-soft); border-color: #b9e6a3; }
.btn.jd-track.is-on:hover { color: #1d6b45; border-color: var(--ok); }
.jd-cal { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.jd-cal svg { flex: none; }

/* A job that has closed on Reed --------------------------------------------- */
.jd-closed-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 13px; font-weight: 800; line-height: 1.4; color: #9a3a00; background: #ffe1cc; border-radius: 999px; white-space: nowrap; }
.jd-closed-chip svg { flex: none; }
.jd-logo--closed { color: var(--muted); background: var(--mist); transform: none; box-shadow: none; }
.jd-gone { display: flex; align-items: flex-start; gap: 14px; margin: 18px 0 22px; padding: 16px 18px; color: var(--navy); background: #fff5ee; border: 1px solid #ffd9bf; border-radius: 18px; }
.jd-gone-empty { margin-top: 20px; }
.jd-gone-ic { flex: none; display: grid; place-items: center; width: 42px; height: 42px; color: #9a3a00; background: #ffe1cc; border-radius: 12px; }
.jd-gone-text { min-width: 0; }
.jd-gone-text p { margin: 0; font-size: 15.5px; line-height: 1.55; }
.jd-gone-text p b { font-weight: 800; }
.jd-gone-text .jd-gone-sub { margin-top: 2px; font-size: 14px; color: var(--muted); }
.jd-glance--closed .jd-facts li:nth-child(n) svg { color: var(--muted); }
.jd-gone-notes { padding: 12px 14px; background: var(--mist); border-radius: 14px; }
.jd-gone-notes .jd-label { margin: 0 0 6px; }
.jd-gone-notes p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.jd-btn-col { display: grid; gap: 10px; }
.jd-btn-col > span { display: grid; }
.jd-btn-col .btn { justify-content: center; gap: 6px; width: 100%; text-decoration: none; }
.jd-similar-head .jd-h2 { margin-bottom: 4px; }
.jd-similar-head .jd-small { margin-bottom: 14px; }
.jd-sim-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.jd-sim { display: flex; align-items: center; gap: 12px; height: 100%; padding: 12px 14px; color: var(--text); text-decoration: none; background: #fff; border: 1.5px solid var(--line); border-radius: 16px; transition: border-color .15s ease, transform .15s ease; }
.jd-sim:hover { color: var(--text); text-decoration: none; border-color: var(--indigo); transform: translateY(-1px); }
.jd-sim > svg { flex: none; margin-left: auto; color: var(--indigo); }
.jd-sim-logo { flex: none; display: grid; place-items: center; width: 38px; height: 38px; font-size: 15px; font-weight: 800; color: var(--navy); background: var(--cyan-soft); border-radius: 11px; }
.jd-sim-text { display: grid; gap: 2px; min-width: 0; }
.jd-sim-text b { font-size: 14.5px; line-height: 1.35; color: var(--navy); overflow-wrap: anywhere; }
.jd-sim-text > span { overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.jd-sim-text .jd-sim-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; white-space: normal; }
.jd-sim-meta i { font-style: normal; font-weight: 700; color: var(--navy); }
.jd-sim-meta em { font-style: normal; font-weight: 700; color: var(--amber); }
.jd-sim-more { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.jd-similar .jd-none + .jd-sim-more { margin-top: 12px; }

/* Inline confirmations (unsave, add a skill, after applying) */
.jd-ask { display: grid; gap: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--navy); background: var(--yellow-soft); border-radius: 14px; animation: db-in .3s ease both; }
.jd-ask p { margin: 0; }
.jd-ask .ap-error { margin: 0; }
.jd-ask-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-ask-btns .btn { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.jd-nudge { background: var(--cyan-soft); }
.btn.jd-btn-danger { color: #fff; background: #b42318; border-color: #b42318; box-shadow: none; }
.btn.jd-btn-danger:hover { color: #fff; background: #8f1c13; }

/* People who have worked there */
.jd-people { padding: 22px; }
.jd-people .db-card-h { margin-bottom: 6px; }
.jd-people .db-card-h h2 { font-size: 1.05rem; }
.jd-people-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.jd-person { display: flex; align-items: center; gap: 8px; }
.jd-person-main { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 8px; color: var(--text); text-decoration: none; border-radius: 12px; }
.jd-person-main:hover { text-decoration: none; background: var(--mist); }
.jd-person-text { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.jd-person-text b { max-width: 100%; overflow: hidden; font-size: 14.5px; color: var(--navy); white-space: nowrap; text-overflow: ellipsis; }
.jd-person-text > span:not(.cvm-status) { max-width: 100%; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; }
.jd-person-text .cvm-status { padding: 1px 8px; font-size: 11.5px; }
.btn.jd-ask-btn { flex: none; min-height: 36px; padding: 6px 12px; font-size: 13.5px; }

/* The CV in use ------------------------------------------------------------- */
.jd-cvbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 16px; background: var(--channel-soft); border-radius: 18px; }
.jd-cvbar .cvm-sheet { flex: none; width: 40px; gap: 3px; padding: 6px 5px; box-shadow: 0 4px 10px rgba(25, 29, 59, .12); }
.jd-cvbar .cvm-sheet i { height: 2.5px; }
.jd-cvbar-text { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 200px; }
.jd-cvbar-text label, .jd-cvbar-label { font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.jd-cvbar-text b { font-size: 15px; color: var(--navy); overflow-wrap: anywhere; }
.ap-select.jd-cv-select { flex: 1; width: auto; min-width: 0; max-width: 420px; min-height: 40px; padding: 7px 12px; font-weight: 600; }
.ap-select.jd-cv-select:disabled { opacity: .6; cursor: default; }
.jd-cvbar-link { font-size: 14px; font-weight: 700; white-space: nowrap; }

/* Skills check and AI match ------------------------------------------------- */
.jd-quick, .jd-ai { padding-top: 30px; }
.jd-quick .db-card-h, .jd-ai .db-card-h { padding-right: 80px; }
.jd-quick-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; }
.jd-quick-top > div { flex: 1; min-width: 200px; }
.jd-quick-msg { margin: 0 0 6px; font-size: 15.5px; line-height: 1.5; color: var(--text); }
.jd-quick-msg b { color: var(--navy); }
.jd-quick .ap-hint { margin: 0; }
.jd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.jd-tag { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--navy); background: var(--mist); border-radius: 999px; }
.jd-tag--ok { color: #1d6b45; background: var(--ok-soft); }
.jd-tag--need { color: var(--amber); background: var(--amber-soft); }
button.jd-tag--add { font: inherit; font-size: 13px; font-weight: 600; color: var(--navy); background: var(--yellow-soft); border: 1.5px dashed #cdd36a; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background-color .15s ease; }
button.jd-tag--add:hover { background: var(--yellow); border-color: var(--navy); border-style: solid; transform: translateY(-1px); }
button.jd-tag--add svg { color: var(--indigo); }
.jd-quick .jd-ask { margin-top: 12px; }
.jd-allgood { display: flex; align-items: center; gap: 8px; margin: 16px 0 0; font-size: 14.5px; font-weight: 600; color: #1d6b45; }
.jd-allgood svg { flex: none; color: var(--ok); }
.jd-prev { display: flex; align-items: flex-start; gap: 8px; margin: -4px 0 14px; padding: 9px 12px; font-size: 14px; line-height: 1.5; color: var(--navy); background: var(--mist); border-radius: 12px; }
.jd-prev svg { flex: none; margin-top: 2px; color: var(--indigo); }
.jd-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jd-go-row .btn { min-height: 46px; }
.jd-cost { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tool-cost.jd-cost-out { color: #b42318; background: #fdecea; }
.tool-cost.jd-cost-out svg { color: #b42318; }
.jd-upgrade { font-size: 14px; font-weight: 700; }
.jd-ai-out:empty, .jd-tool-out:empty { display: none; }
.jd-ai-out, .jd-tool-out { margin-top: 18px; }
.jd .tool-working.jd-working { min-height: 240px; padding: 28px 20px; background: var(--paper); border: 0; border-radius: 18px; }
.jd .jd-working .cvm-sheet { width: 80px; }
.jd-fail { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; color: #b42318; background: #fdecea; border-radius: 14px; }
.jd-fail svg { flex: none; margin-top: 1px; }
.jd-fail p { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.5; }
.jd-ai-res { display: grid; gap: 4px; padding-top: 18px; border-top: 1px dashed var(--line); animation: db-in .4s ease both; }
.jd-ai-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px; margin-bottom: 6px; }
.jd-ai-top > div { flex: 1; min-width: 220px; }
.jd-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.jd-kicker .cvm-status { letter-spacing: 0; text-transform: none; }
.jd-ai-top h4 { margin: 0 0 6px; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--navy); }
.jd-sum { margin: 0; font-size: 15px; line-height: 1.6; }
.jd-kw { margin-top: 12px; padding: 12px 14px; background: var(--mist); border-radius: 14px; }
.jd-kw .ap-field-row { margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.jd-kw b { color: var(--navy); white-space: nowrap; }
.jd-bar--ok i { background: var(--ok); }
.jd-bar--warn i { background: #e0a800; }
.jd-bar--low i { background: #e5484d; }
.jd-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.jd-ticks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jd-ticks li { display: flex; align-items: flex-start; gap: 8px; font-size: 14.5px; line-height: 1.55; }
.jd-ticks svg { flex: none; margin-top: 3px; color: var(--ok); }
.jd-ticks--warn svg { color: #c27c00; }
.jd-fixes { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: jdfix; }
.jd-fixes li { position: relative; padding: 10px 14px 10px 50px; font-size: 14.5px; line-height: 1.55; background: var(--yellow-soft); border-radius: 14px; counter-increment: jdfix; }
.jd-fixes li::before { content: counter(jdfix); position: absolute; left: 12px; top: 9px; display: grid; place-items: center; width: 26px; height: 26px; font-size: 13px; font-weight: 800; color: var(--navy); background: var(--yellow); border-radius: 8px; transform: rotate(-4deg); }
.jd-refnote { display: flex; align-items: flex-start; gap: 6px; margin: 14px 0 0; }
.jd-refnote svg { flex: none; margin-top: 2px; color: var(--indigo); }
.jd-res-actions { margin-top: 18px; }

/* Get ready: tool tiles and the tool in use ---------------------------------- */
.jd-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.jd-tile { position: relative; display: grid; align-content: start; justify-items: start; gap: 6px; padding: 20px; font: inherit; text-align: left; color: var(--text); background: var(--tone-soft, var(--mist)); border: 2px solid transparent; border-radius: 20px; cursor: pointer; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.jd-tile:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-3px); box-shadow: 0 14px 30px rgba(25, 29, 59, .1); }
.jd-tile:disabled { opacity: .6; cursor: default; }
.jd-tile.is-open { background: #fff; border-color: var(--navy); box-shadow: 0 0 0 4px var(--tone, var(--mist)); }
.jd-tile--yellow { --tone-soft: var(--yellow-soft); --tone: var(--yellow); }
.jd-tile--cyan { --tone-soft: var(--cyan-soft); --tone: var(--cyan); }
.jd-tile--channel { --tone-soft: var(--channel-soft); --tone: var(--channel); }
.jd-tile--mist { --tone-soft: var(--mist); --tone: #dfe1f1; }
.jd-tile-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; color: var(--navy); background: #fff; border-radius: 13px; box-shadow: 0 6px 14px rgba(25, 29, 59, .08); transform: rotate(-4deg); }
.jd-tile b { font-size: 1.05rem; color: var(--navy); }
.jd-tile-d { font-size: 14px; line-height: 1.5; }
.jd-tile-go { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--indigo); }
.jd-tool { display: grid; gap: 16px; animation: db-in .35s ease both; }
.jd-tool-head { display: flex; align-items: center; gap: 12px; }
.jd-tool-head h3 { flex: 1; margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.jd-tool-head .jd-tile-ic { width: 40px; height: 40px; margin: 0; box-shadow: none; }
.jd-tile-ic--yellow { background: var(--yellow); }
.jd-tile-ic--cyan { background: var(--cyan); }
.jd-tile-ic--channel { background: var(--channel); }
.jd-using { margin: -6px 0 0; font-size: 14px; color: var(--muted); }
.jd-using b { color: var(--navy); }
.jd-tool-form { display: grid; gap: 16px; }
.jd-tool-form .ap-field + .ap-field { margin-top: 0; }
.jd-tool .ap-error { margin: 0; }
.jd-row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.jd .ap-seg { justify-self: start; }
.jd .ap-seg button:focus-visible { outline: 3px solid var(--indigo); outline-offset: 2px; }
.jd-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 11px 14px; font-size: 14px; line-height: 1.5; color: var(--navy); background: var(--channel-soft); border-radius: 12px; }
.jd-note svg { flex: none; margin-top: 2px; color: var(--indigo); }
.jd-note--yellow { background: var(--yellow-soft); }
.jd-tool-out { margin-top: 2px; }
.jd-out { display: grid; gap: 14px; padding-top: 18px; border-top: 1px dashed var(--line); animation: db-in .4s ease both; }
.jd-out-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
.jd-out-head h4 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; color: var(--navy); }
.jd-out-head .btn { min-height: 38px; padding: 7px 14px; font-size: 14px; }
.jd-out .ap-hint { margin: 0; }
.jd-done { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; }
.jd-done-ic { display: grid; place-items: center; width: 52px; height: 52px; color: #fff; background: var(--ok); border-radius: 50%; box-shadow: 0 0 0 8px var(--ok-soft); }
.jd-done h4 { margin: 4px 0 6px; font-size: 1.15rem; font-weight: 800; color: var(--navy); }
.jd-done p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.55; }
.jd-done .ap-actions { margin-top: 14px; }
.ap-doc.jd-letter { padding: 28px 30px; font-size: 15px; overflow-wrap: anywhere; }
.jd-ph { padding: 1px 7px; font-size: .94em; font-weight: 600; color: var(--amber); background: var(--amber-soft); border-radius: 6px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.jd-more-box { padding: 0 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; }
.jd-more-box > summary { display: flex; align-items: center; gap: 6px; padding: 13px 0; font-size: 14.5px; font-weight: 700; color: var(--navy); list-style: none; cursor: pointer; }
.jd-more-box > summary::-webkit-details-marker, .jd-coach > summary::-webkit-details-marker { display: none; }
.jd-more-box > summary::after, .jd-coach > summary::after { content: ''; width: 8px; height: 8px; margin-left: auto; border-right: 2px solid var(--indigo); border-bottom: 2px solid var(--indigo); transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; }
.jd-more-box[open] > summary::after, .jd-coach[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.jd-more-box > summary span { font-weight: 600; color: var(--muted); }
.jd-more-box[open] { padding-bottom: 14px; }
.jd-more-box .jd-sub:first-of-type { margin-top: 2px; }
.jd-tips { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jd-tips li { display: grid; gap: 2px; font-size: 14px; line-height: 1.55; }
.jd-tips b { color: var(--navy); }
.jd-checks { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.jd-check { display: flex; align-items: flex-start; gap: 10px; padding: 6px 4px; font-size: 14px; line-height: 1.5; border-radius: 8px; cursor: pointer; }
.jd-check:hover { background: var(--mist); }
.jd-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--indigo); cursor: pointer; }
.jd-check input:checked + span { color: var(--muted); text-decoration: line-through; }
.jd-qs { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jd-q { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }
.jd-q-n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; font-size: 14px; font-weight: 800; color: var(--navy); background: var(--cyan); border-radius: 10px; transform: rotate(-4deg); }
.jd-q-main { flex: 1; min-width: 0; }
.jd-q-text { margin: 4px 0 8px; font-size: 1.05rem; font-weight: 700; line-height: 1.45; color: var(--navy); }
/* readAloudWithHighlight colours the current word inline; keep it on brand. */
.jd-q-text .tts-word[style*="background"] { color: var(--navy) !important; background: var(--yellow) !important; }
.jd-q-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.jd-q-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.jd-read { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy); background: var(--mist); border: 1.5px solid transparent; border-radius: 999px; cursor: pointer; }
.jd-read:hover { border-color: var(--indigo); }
.jd-read[aria-pressed="true"] { color: #fff; background: var(--navy); }
#jdReadAll[aria-pressed="true"] { color: #fff; background: var(--navy); border-color: var(--navy); }
.jd-coach { margin-top: 10px; }
.jd-coach > summary { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--indigo); list-style: none; cursor: pointer; }
.jd-coach[open] > summary { margin-bottom: 10px; }
.jd-coach-block { margin-top: 8px; padding: 10px 14px; background: var(--mist); border-radius: 12px; }
.jd-coach-block h5 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.jd-coach-block p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.jd-coach-block--tip { background: var(--cyan-soft); border-left: 4px solid var(--cyan); border-radius: 0 12px 12px 0; }
.jd-coach-block--tip h5 { color: var(--navy); }
.jd-coach-block--tip svg { color: var(--indigo); }
.jd-pack { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 12px 16px; font-size: 14.5px; line-height: 1.5; color: var(--navy); background: var(--paper); border-radius: 14px; }
.jd-pack:empty { display: none; }
.jd-pack svg { flex: none; margin-top: 2px; color: var(--indigo); }
.jd-pack a { font-weight: 700; }
.jd-state { justify-items: start; }
.jd-copy-buffer { position: fixed; top: -1000px; left: 0; width: 1px; height: 1px; opacity: 0; }

/* Motion: settle in once, respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .jd-ask, .jd-ai-res, .jd-tool, .jd-out { animation: none; }
  .jd-tile, .jd-mini-btn, button.jd-tag--add, .jd-more svg, .jd-more-box > summary::after, .jd-coach > summary::after, .jd-sim { transition: none; }
  .jd-tile:hover:not(:disabled), .jd-mini-btn:hover, button.jd-tag--add:hover, .jd-sim:hover { transform: none; }
}
/* A sticky aside taller than the window would hide its own buttons. */
@media (max-height: 820px) { .jd-aside { position: static; } }
/* One column: the glance card comes first, people last. */
@media (max-width: 1180px) {
  .jd-layout { grid-template-columns: minmax(0, 1fr); }
  .jd-aside { display: contents; }
  .jd-glance { order: -1; }
  .jd-main { order: 0; }
  .jd-people { order: 1; }
}
@media (max-width: 760px) {
  .jd-tiles, .jd-two, .jd-sim-list { grid-template-columns: minmax(0, 1fr); }
  .jd-gone { padding: 14px; gap: 12px; }
  .jd-q { padding: 14px; gap: 12px; }
  .ap-doc.jd-letter { padding: 22px 18px; }
  .jd-desc { font-size: 15px; }
}
@media (max-width: 520px) {
  .jd-row2 { grid-template-columns: minmax(0, 1fr); }
  .jd .ap-tabs { width: 100%; }
  .jd .ap-tab { flex: 1; justify-content: center; gap: 6px; padding: 8px 10px; font-size: 13.5px; }
  .jd-go-row .btn, .jd-out-head .ap-actions, .jd-out-head .btn, .jd-res-actions .btn { width: 100%; justify-content: center; }
  .jd-cvbar-link { margin-left: 54px; }
  .ap-select.jd-cv-select { max-width: none; width: 100%; flex-basis: 100%; }
  .jd-q-n { width: 28px; height: 28px; font-size: 13px; }
}