/* Optimise CV (js/retouch.js): a card over the page, in the app's tokens, light and dark. The badge and the main buttons are
   the brand blue deepening to indigo (the AI mark, as on Find Job's Optimise CV button). Done, it widens to show the CV as a
   white page (a document stays white in dark mode too), the ad's keywords marked: yellow in their experience, blue named as
   ready to learn; the keyword chips beside it in the same colours. */
#rt-pop{position:fixed;inset:0;z-index:96;display:flex;align-items:center;justify-content:center;padding:16px;
  font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink);--rt-ai:linear-gradient(135deg,var(--brand),oklch(.55 .15 262));
  --rt-hit:color-mix(in oklab,#FACC15 34%,var(--surface));--rt-lrn:color-mix(in oklab,#60A5FA 30%,var(--surface))}
#rt-pop .rt-bg{position:absolute;inset:0;background:rgb(0 0 0 / .5)}
#rt-pop .rt-box{position:relative;width:min(580px,100%);max-height:calc(100vh - 32px);display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--pop)}
#rt-pop button,#rt-pop a{font:inherit}
#rt-pop :focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#rt-pop .hide{display:none!important}
#rt-pop .rt-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#rt-pop .rt-spin{display:inline-block;width:14px;height:14px;flex:none;border-radius:50%;border:2px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){#rt-pop .rt-spin{animation-duration:2.4s}}
/* head */
#rt-pop .rt-hd{display:flex;align-items:center;gap:12px;padding:14px 14px 14px 18px;border-bottom:1px solid var(--line)}
#rt-pop .rt-badge{width:36px;height:36px;border-radius:10px;background:var(--rt-ai);color:#fff;display:grid;place-items:center;flex:none}
#rt-pop .rt-badge svg{width:19px;height:19px;fill:currentColor}
#rt-pop .rt-hm{flex:1;min-width:0;line-height:1.3}
#rt-pop .rt-ht{font-size:15px;font-weight:700}
#rt-pop .rt-hs{font-size:12.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rt-pop .rt-x{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;flex:none}
#rt-pop .rt-x:hover{background:var(--hover);color:var(--ink)}
/* body */
#rt-pop .rt-bd{padding:18px;overflow-y:auto;min-height:232px;display:flex;flex-direction:column;gap:14px;font-size:13.5px;line-height:1.5}
#rt-pop .rt-wait{display:flex;align-items:center;gap:10px;color:var(--ink2);margin:auto 0}
#rt-pop .rt-steps{list-style:none;margin:0;padding:0;display:grid;gap:4px}
#rt-pop .rt-steps li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink3)}
#rt-pop .rt-steps li.on{background:var(--tint);color:var(--ink);font-weight:600}
#rt-pop .rt-steps li.ok{color:var(--ink)}
#rt-pop .rt-steps li.ok .rt-mk{color:var(--good)}
#rt-pop .rt-steps li.bad{color:var(--bad)}
#rt-pop .rt-mk{display:grid;place-items:center;width:24px;height:24px}
#rt-pop .rt-dot{width:7px;height:7px;border-radius:50%;background:var(--line2)}
#rt-pop .rt-sl{min-width:0;overflow-wrap:anywhere}
#rt-pop .rt-ss{font-size:12px;font-weight:500;color:var(--brand-d);min-width:70px;text-align:right}
#rt-pop .rt-note{margin:0;color:var(--ink3);font-size:12.5px}
#rt-pop .rt-el{display:inline-block;min-width:40px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
#rt-pop .rt-err,#rt-pop .rt-stale,#rt-pop .rt-warn{display:flex;gap:8px;align-items:flex-start;margin:0;padding:10px 12px;border-radius:10px;font-size:13px}
#rt-pop .rt-err{background:var(--bad-s);color:var(--bad)}
#rt-pop .rt-stale,#rt-pop .rt-warn{background:var(--warn-s);color:var(--warn)}
#rt-pop .rt-err .rt-i,#rt-pop .rt-stale .rt-i,#rt-pop .rt-warn .rt-i{margin-top:2px}
#rt-pop .rt-lead{display:flex;gap:8px;align-items:flex-start;margin:0}
#rt-pop .rt-lead .rt-i{color:var(--good);margin-top:2px}
/* the two files */
#rt-pop .rt-files{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#rt-pop .rt-file{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;min-width:0}
#rt-pop .rt-fi{width:34px;height:34px;border-radius:9px;background:var(--tint);color:var(--brand-d);display:grid;place-items:center;flex:none}
#rt-pop .rt-fm{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
#rt-pop .rt-fm b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rt-pop .rt-fm small{font-size:12px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* keywords and gaps */
#rt-pop .rt-sec{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
#rt-pop .rt-h{font-size:12px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.04em}
#rt-pop summary.rt-h{cursor:pointer}
#rt-pop .rt-kws{display:flex;flex-wrap:wrap;gap:6px}
#rt-pop .rt-kws span{background:var(--chip);color:var(--ink2);border-radius:9999px;padding:3px 10px;font-size:12px}
#rt-pop .rt-gaps ul{margin:8px 0 0;padding:0;list-style:none;display:grid;gap:8px}
#rt-pop .rt-gaps li{display:grid;gap:2px;font-size:13px}
#rt-pop .rt-gaps li span{color:var(--ink2)}
/* the CV asked for first */
#rt-pop .rt-need{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:12px}
#rt-pop .rt-need b{display:block;font-size:14px;font-weight:600}
#rt-pop .rt-link{border:0;background:none;padding:0;color:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
/* the keyword match */
#rt-pop .rt-mh{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
#rt-pop .rt-mh b{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums}
#rt-pop .rt-bar{height:8px;border-radius:9999px;background:var(--chip);overflow:hidden}
#rt-pop .rt-bar i{display:block;height:100%;border-radius:inherit;background:var(--rt-ai)}
#rt-pop .rt-kws span.hit{display:inline-flex;align-items:center;gap:4px;background:var(--rt-hit);color:var(--ink)}
#rt-pop .rt-kws span.hit .rt-i{width:12px;height:12px}
#rt-pop .rt-kws span.miss{background:none;border:1px dashed var(--line2);color:var(--ink3)}
#rt-pop .rt-kws span.learn{display:inline-flex;align-items:center;gap:4px;background:var(--rt-lrn);color:var(--ink)}
#rt-pop .rt-kws span.learn .rt-i{width:12px;height:12px}
#rt-pop .rt-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0;font-size:12px;color:var(--ink3)}
#rt-pop .rt-legend span{display:inline-flex;align-items:center;gap:4px}
#rt-pop .rt-legend .rt-i{width:12px;height:12px}
#rt-pop .rt-legend .hit .rt-i,#rt-pop .rt-legend .learn .rt-i{width:16px;height:16px;padding:2px;border-radius:4px;box-sizing:border-box;color:var(--ink)}
#rt-pop .rt-legend .hit .rt-i{background:var(--rt-hit)}
#rt-pop .rt-legend .learn .rt-i{background:var(--rt-lrn)}
#rt-pop .rt-legend .miss::before{content:"";width:10px;height:10px;border-radius:3px;border:1px dashed var(--line2)}
/* what the ad asks for that the sources don't show, and the person's own facts */
#rt-pop .rt-nl{font-size:13px;color:var(--ink2);margin-top:4px}
#rt-pop .rt-nt{width:100%;box-sizing:border-box;border:1px solid var(--line2);border-radius:10px;padding:9px 11px;background:var(--surface);color:var(--ink);
  font:inherit;font-size:13.5px;line-height:1.45;resize:vertical;min-height:64px;outline:none}
#rt-pop .rt-nt:focus{border-color:var(--brand)}
#rt-pop .rt-nt::placeholder{color:var(--ink3)}
/* foot */
#rt-pop .rt-ft{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;border-top:1px solid var(--line);flex-wrap:wrap}
#rt-pop .rt-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:500;font-size:13.5px;white-space:nowrap;cursor:pointer;text-decoration:none}
#rt-pop .rt-btn:hover{background:var(--hover)}
#rt-pop .rt-btn.pri{background:var(--rt-ai);border-color:transparent;color:#fff;font-weight:600}
#rt-pop .rt-btn.pri:hover{filter:brightness(.95)}
#rt-pop .rt-btn:disabled{opacity:.55;cursor:default}
#rt-pop .rt-btn.pri:disabled{filter:none}
#rt-pop .rt-btn.sm{height:32px;padding:0 10px;font-size:12.5px;flex:none}
/* done: the page view (the CV, or the candidate profile in the second tab) beside the keyword match */
#rt-pop .rt-box.wide{width:min(1120px,100%);height:calc(100vh - 32px);height:calc(100dvh - 32px)}
#rt-pop .rt-box.wide .rt-bd{flex:1}
#rt-pop .rt-two{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
#rt-pop .rt-view{display:grid;gap:10px;min-width:0}
#rt-pop .rt-side{display:grid;gap:14px;min-width:0}
#rt-pop .rt-vbar{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap}
#rt-pop .rt-vt{font-size:14px;font-weight:600}
#rt-pop .rt-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--chip)}
#rt-pop .rt-tab{height:30px;padding:0 12px;border:0;border-radius:8px;background:none;color:var(--ink2);font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap}
#rt-pop .rt-tab[aria-selected="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgb(0 0 0 / .14)}
#rt-pop .rt-swr{display:inline-flex;align-items:center;gap:2px}
#rt-pop .rt-sw{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink2);cursor:pointer}
#rt-pop .rt-sw input{width:16px;height:16px;margin:0;accent-color:var(--brand)}
#rt-pop .rt-pwrap{background:var(--page);border:1px solid var(--line);border-radius:12px;padding:22px}
/* Edit (Max 2026-10-17): the button, how it saves, and each line of the page a box to type in (the paper stays white) */
#rt-pop .rt-edr{display:inline-flex;align-items:center;gap:4px;margin-right:auto}
#rt-pop .rt-edb{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
#rt-pop .rt-edb:hover{background:var(--hover)}
#rt-pop .rt-edb .rt-i{width:15px;height:15px}
#rt-pop .rt-edb.on{background:var(--brand);border-color:transparent;color:#fff}
#rt-pop .rt-svs{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
#rt-pop .rt-svs .rt-i{width:14px;height:14px;color:var(--good)}
#rt-pop .rt-paper.editing .rt-e{border-radius:3px;outline:1px dashed #C3CAD4;outline-offset:1px;cursor:text}
#rt-pop .rt-paper.editing .rt-e:hover{background:#EEF3F9}
#rt-pop .rt-paper.editing .rt-e:focus{outline:2px solid #2E7BCF;outline-offset:1px;background:#fff}
#rt-pop .rt-paper.editing .rt-e:empty{display:inline-block;min-width:5em}
#rt-pop .rt-paper.editing .rt-e:empty::before{content:attr(data-ph);color:#9CA3AF}
#rt-pop .rt-paper.editing .pr-top .rt-e{outline-color:#5B6170}
#rt-pop .rt-paper.editing .pr-top .rt-e:hover,#rt-pop .rt-paper.editing .pr-top .rt-e:focus{background:rgb(255 255 255 / .07)}
#rt-pop .rt-paper.editing .pr-top .rt-e:focus{outline-color:#F5B719}
#rt-pop .rt-ask{margin:0 auto 0 0;align-self:center;font-size:13.5px;color:var(--ink2)}
#rt-pop .rt-paper{max-width:760px;margin:0 auto;padding:44px 48px;background:#fff;color:#111;border-radius:4px;box-shadow:0 1px 3px rgb(0 0 0 / .12),0 10px 28px rgb(0 0 0 / .08);
  font-family:"Noto Sans","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";font-size:13px;line-height:1.55;overflow-wrap:anywhere;color-scheme:light}
#rt-pop .rt-paper mark{color:inherit;border-radius:3px;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
#rt-pop .rt-paper mark.k{background:#FDE68A}
#rt-pop .rt-paper mark.kl{background:#CFE3FF}
#rt-pop .rt-paper i{font-style:normal;color:#9A9A9A;margin:0 7px}
#rt-pop .rt-paper a{color:#1F4E79;text-decoration:none}
#rt-pop .rt-paper h4{margin:0}
/* the CV: one column, as cvPdf draws it */
#rt-pop .cv-top{display:flex;gap:18px;align-items:flex-start;padding-bottom:14px;margin-bottom:16px;border-bottom:1.5px solid #111}
#rt-pop .cv-id{flex:1;min-width:0}
#rt-pop .cv-name{font-size:26px;line-height:1.2;font-weight:700}
#rt-pop .cv-hl{margin-top:4px;font-size:15px;line-height:1.35;font-weight:700;color:#1F4E79}
#rt-pop .cv-ct{margin-top:8px;font-size:12px;color:#333}
#rt-pop .cv-ph,#rt-pop .pr-ph{flex:none;display:grid;place-items:center;overflow:hidden;font-weight:700}
#rt-pop .cv-ph{width:84px;height:84px;border-radius:7px;border:1px solid #CCC;background:#F4F4F5;color:#555;font-size:22px}
#rt-pop .cv-ph img,#rt-pop .pr-ph img{width:100%;height:100%;object-fit:cover;display:block}
#rt-pop .cv-sec{margin-bottom:14px}
#rt-pop .cv-sec h4{margin-bottom:8px;padding-bottom:4px;border-bottom:1px solid #CCC;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#1F4E79}
#rt-pop .cv-sec p{margin:0 0 5px}
#rt-pop .cv-sk{font-size:12.6px}
#rt-pop .cv-job{margin-bottom:11px}
#rt-pop .cv-jh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
#rt-pop .cv-jh b{font-size:13.6px}
#rt-pop .cv-jh span{flex:none;font-size:12px;color:#666}
#rt-pop .cv-pl{font-size:12.6px;color:#333}
#rt-pop .cv-job ul{margin:5px 0 0;padding-left:18px}
#rt-pop .cv-job li{margin-bottom:3px}
/* the candidate profile: the dark header and the sections, as refinedPdf draws it */
#rt-pop .rt-paper.pr{padding:0;overflow:hidden}
#rt-pop .pr-top{padding:30px 34px 26px;background:#18191D;color:#fff;border-top:5px solid #F5B719}
#rt-pop .pr-top mark{color:#111}
#rt-pop .pr-id{display:flex;align-items:center;gap:14px}
#rt-pop .pr-ph{width:60px;height:60px;border-radius:50%;background:#2A2B31;color:#fff;font-size:18px}
#rt-pop .pr-name{font-size:20px;font-weight:700;line-height:1.25}
#rt-pop .pr-role{font-size:12.5px;color:#A1A1AA}
#rt-pop .pr-top .pr-li{font-size:12.5px;font-weight:700;color:#F5B719;overflow-wrap:anywhere}
#rt-pop .pr-ct{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:4px}
#rt-pop .pr-greet{margin:18px 0 4px;font-size:12.5px;color:#A1A1AA}
#rt-pop .pr-hl{margin:4px 0 0;font-size:22px;line-height:1.3;font-weight:700;color:#fff}
#rt-pop .pr-hl em{font-style:normal;color:#F5B719}
#rt-pop .pr-sum{margin:10px 0 0;color:#D4D4D8}
#rt-pop .pr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));border-bottom:1px solid #E4E4E7}
#rt-pop .pr-stats div{padding:14px 18px;border-right:1px solid #E4E4E7}
#rt-pop .pr-stats b{display:block;font-size:20px;line-height:1.3}
#rt-pop .pr-stats span{font-size:12px;color:#71717A}
#rt-pop .pr-sec{padding:18px 34px 4px}
#rt-pop .pr-sec h4{margin-bottom:10px;padding-left:10px;border-left:3px solid #F5B719;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:#71717A}
#rt-pop .pr-sec p{margin:0 0 8px}
#rt-pop .pr-sec p small{display:block;color:#71717A}
#rt-pop .pr-str{margin-bottom:12px}
#rt-pop .pr-str p{margin:3px 0 0;color:#3F3F46}
#rt-pop .pr-cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
#rt-pop .pr-cases article{padding:14px;border-radius:10px;background:#F4F4F5}
#rt-pop .pr-cases dl{margin:8px 0 0}
#rt-pop .pr-cases dt{margin-top:6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#71717A}
#rt-pop .pr-cases dd{margin:2px 0 0}
#rt-pop .pr-cases .res{color:#8B6200}
#rt-pop .pr-kv{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:6px 14px;margin:0}
#rt-pop .pr-kv dt{font-weight:700}
#rt-pop .pr-kv dd{margin:0;color:#3F3F46}
#rt-pop .pr-tl{display:grid;gap:8px;margin:0;padding:0;list-style:none}
#rt-pop .pr-tl li{display:grid;padding-left:12px;border-left:2px solid #F3DEA3}
#rt-pop .pr-tl span{color:#3F3F46}
#rt-pop .pr-tl small{color:#71717A}
#rt-pop .pr-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#rt-pop .pr-chips span{padding:2px 10px;border-radius:9999px;background:#FFF8E1;border:1px solid #F3DEA3;color:#8B6200;font-size:12px}
#rt-pop .pr-cta{display:grid;gap:2px;margin:18px 34px 30px;padding:16px 18px;border-radius:12px;background:#FFF8E1;border:1px solid #F3DEA3}
#rt-pop .pr-cta span{font-size:12.5px;color:#3F3F46}
#rt-pop .pr-ctb{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#rt-pop .pr-pill{display:inline-flex;align-items:center;max-width:100%;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid #F3DEA3;color:#18181B;font-size:12.5px;font-weight:600;text-decoration:none;overflow-wrap:anywhere}
#rt-pop .pr-pill:hover{border-color:#F5B719}
@media (max-width:900px){#rt-pop .rt-two{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){
  #rt-pop .rt-pwrap{padding:8px;border-radius:10px}
  #rt-pop .rt-paper{padding:22px 16px;font-size:12.5px}
  #rt-pop .cv-name{font-size:21px}
  #rt-pop .cv-hl{font-size:14px}
  #rt-pop .cv-ph{width:58px;height:58px;font-size:17px}
  #rt-pop .cv-jh{flex-direction:column;align-items:flex-start;gap:0}
  #rt-pop .rt-paper.pr{padding:0}
  #rt-pop .pr-top{padding:22px 16px 20px}
  #rt-pop .pr-hl{font-size:18px}
  #rt-pop .pr-sec{padding:16px 16px 2px}
  #rt-pop .pr-kv{grid-template-columns:minmax(0,1fr);gap:2px}
  #rt-pop .pr-kv dd{margin-bottom:8px}
  #rt-pop .pr-cta{margin:16px 16px 22px}
}
@media (max-width:480px){
  #rt-pop{padding:8px;align-items:flex-end}
  #rt-pop .rt-box{max-height:calc(100vh - 16px)}
  #rt-pop .rt-bd{padding:14px}
  #rt-pop .rt-file{flex-wrap:wrap}
  #rt-pop .rt-fm{flex:1 1 calc(100% - 50px)}
  #rt-pop .rt-file .rt-btn.sm{flex:1}
  #rt-pop .rt-ft .rt-btn{flex:1}
  #rt-pop .rt-ask{flex:1 1 100%}
  #rt-pop .rt-box.wide{height:calc(100vh - 16px);height:calc(100dvh - 16px)}
}

/* A phone (Max 2026-10-20: "Make it like real monile app UI now its confusing to look at on phone"): a sheet from the bottom, full
   width, its buttons 44 px high and clear of the home bar. A computer keeps the card. */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #rt-pop{padding:0;align-items:flex-end}
  #rt-pop .rt-box{width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);border-width:1px 0 0;border-radius:18px 18px 0 0}
  #rt-pop .rt-box.wide{width:100%;height:calc(100vh - 24px);height:calc(100dvh - 24px)}
  #rt-pop .rt-hd{padding:12px 12px 12px 16px}
  #rt-pop .rt-x{width:40px;height:40px}
  #rt-pop .rt-bd{padding:16px}
  #rt-pop .rt-ft{gap:8px;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  #rt-pop .rt-ft .rt-btn{flex:1}
  #rt-pop .rt-btn{height:44px}
  #rt-pop .rt-btn.sm{height:40px}
  #rt-pop .rt-tab{height:38px}
  #rt-pop .rt-edb{height:40px}
  #rt-pop .rt-sw{min-height:40px}
  #rt-pop .rt-sw input{width:20px;height:20px}
  #rt-pop .rt-nt{font-size:16px}
  #rt-pop .rm-tip{position:relative}
  #rt-pop .rm-tip::after{content:"";position:absolute;inset:-9px}
}