/* Bismillah - static/ui/job_page.css — the job detail page (job-single.html,
   2026-10-04). Everything is under .jp (an .x-ui block, so the legacy type
   scale in expertini-ui.css leaves it alone) and uses the x-* tokens.
   Phone first: works from 360px. No layout shift: the ad slots keep the
   .x-ad min-height, the panel's loading state reserves its height, and
   anything filled in by job_page.js sits below the first screen. */

/* .jp sits in the legacy .row (margin 0 -15px) inside .auto-container (padding
   15px desktop, ~2.5px on phones): cancel the row's margin, then add a phone
   gutter so the cards keep 16px from the screen edge. */
.jp{flex:0 0 calc(100% - 30px);max-width:calc(100% - 30px);margin:0 15px;padding:0 0 8px;min-width:0;color:var(--x-text);font-size:14px;line-height:1.55}
.jp{padding:0 13px 8px}
.jp *{min-width:0}
.jp [hidden]{display:none!important}
.jp a{color:var(--x-primary)}
.jp a:hover{color:var(--x-secondary)}

/* breadcrumbs (markup unchanged; schema.org BreadcrumbList) */
.jp .jp-crumbs{margin:18px 0 12px;font-size:12px;color:var(--x-subtext);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.jp .jp-crumbs::-webkit-scrollbar{display:none}
.jp .jp-crumbs ul,.jp .jp-crumbs ol{margin:0;padding:0;display:inline}
.jp .jp-crumbs li{display:inline;list-style:none;margin:0;padding:0}
.jp .jp-crumbs a,.jp .jp-crumbs span{color:var(--x-text-3)!important;font-size:12px!important}
.jp .jp-crumbs svg{vertical-align:-2px}

/* layout */
.jp .jp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:1024px){.jp .jp-grid{grid-template-columns:minmax(0,1fr) 320px;gap:24px}}
@media (min-width:1280px){.jp .jp-grid{grid-template-columns:minmax(0,1fr) 340px}}
.jp .jp-main,.jp .jp-side{display:flex;flex-direction:column;gap:18px;min-width:0}

/* cards */
.jp .jp-card{background:var(--x-surface);border:1px solid var(--x-border);border-radius:var(--x-r);padding:18px;box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(37,99,235,.05)}
@media (min-width:720px){.jp .jp-card{padding:22px 24px}}
.jp .jp-h1{font:700 clamp(21px,2.4vw,27px)/1.25 var(--x-f-disp)!important;letter-spacing:-.02em;color:var(--x-text)!important;margin:0 0 4px!important;word-break:break-word}
.jp .jp-h2{font:700 18px/1.3 var(--x-f-disp)!important;color:var(--x-text)!important;margin:0 0 10px!important;letter-spacing:-.015em}
.jp .jp-h3{font:600 15px/1.35 var(--x-f-disp)!important;color:var(--x-text)!important;margin:0 0 8px!important}
.jp .jp-muted,.jp .jp-note{color:var(--x-subtext);font-size:13px;line-height:1.5;margin:0}
.jp .jp-note{margin-top:10px;font-size:12.5px}
.jp .jp-lead{font-size:14.5px;color:var(--x-text-2);margin:0 0 12px}
.jp .jp-err{color:var(--x-danger);font-size:13px;margin:6px 0 0;min-height:0}
.jp .jp-err:empty{display:none}
.jp .jp-warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e;border-radius:12px;padding:9px 12px;font-size:13px;margin:0 0 10px}
.jp .jp-link{background:none;border:0;padding:0;color:var(--x-primary);font:inherit;font-size:13px;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.jp .jp-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px}

/* 2. application box (breadcrumbs on top, inside the card) */
.jp .jp-sum .jp-crumbs{margin:-4px 0 12px}
.jp .jp-sum__top{display:flex;gap:14px;align-items:flex-start}
.jp .jp-logo{flex:0 0 64px;width:64px;height:64px;border-radius:16px;overflow:hidden;background:#f1f5f9;border:1px solid var(--x-border);display:flex;align-items:center;justify-content:center}
.jp .jp-logo img{width:100%;height:100%;object-fit:contain;display:block}
.jp .jp-logo--sm{flex-basis:52px;width:52px;height:52px;border-radius:14px}
.jp .jp-sum__id{flex:1 1 auto}
.jp .jp-co{margin:0;font-size:15px;font-weight:500;color:var(--x-text-2)}
.jp .jp-facts{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0!important;padding:0}
.jp .jp-fact{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:99px;background:#f1f5f9;color:var(--x-text-2);font-size:12.5px;font-weight:500;line-height:1.35;max-width:100%}
.jp .jp-fact__i{font-size:13px}
.jp .jp-fact--ok{background:#f0fdf4;color:#15803d}
.jp .jp-fact--bad{background:#fef2f2;color:#dc2626}
.jp .jp-dot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 7px}
.jp .jp-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.jp .jp-apply{display:block;flex:1 1 260px;max-width:100%}
.jp .jp-apply .btn-box,.jp .jp-apply .apply-job-container{margin:0;padding:0;width:100%}
.jp .jp-apply__btn{width:100%;white-space:normal;text-align:center;line-height:1.25}
.jp .x-btn--big.jp-apply__btn{height:auto;min-height:52px;padding:12px 22px}
.jp .jp-tools{display:flex;gap:8px;flex-wrap:wrap}
.jp .jp-tbtn{padding:10px 14px;height:46px}
.jp .jp-tbtn[aria-pressed="true"]{background:#eff6ff;border-color:rgba(37,99,235,.45)}
.jp .jp-tbtn[aria-pressed="true"] .x-ico{fill:currentColor}
.jp .jp-state{display:flex;align-items:center;justify-content:center;min-height:52px;padding:12px 18px;border-radius:14px;background:#f1f5f9;color:var(--x-text-2);font-weight:600;font-size:15px;text-align:center}
.jp .jp-state--ok{background:#f0fdf4;color:#15803d}
.jp .jp-state--bad{background:#fef2f2;color:#b91c1c}
.jp .jp-geo{border:1px solid #d0e4ff;background:#f0f7ff;border-radius:14px;padding:16px 18px;text-align:center}
.jp .jp-geo__i{font-size:22px;margin-bottom:6px}
.jp .jp-geo__h{font-weight:600;color:#1a4fa0;margin:0 0 6px;font-size:15px}
.jp .jp-geo__t{color:#4a6fa5;margin:0 0 12px;font-size:13px;line-height:1.6}
.jp .jp-share{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.jp .jp-share a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--x-border);background:#fff}
.jp .jp-share a:hover{border-color:rgba(37,99,235,.4)}
.jp .jp-share .jp-copy{margin-left:4px}
@media (max-width:767px){.jp .jp-share .desktop-only{display:none}}
@media (min-width:768px){.jp .jp-share .mobile-only{display:none}}
.jp .jp-sum__foot{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--x-border);font-size:12px;color:var(--x-subtext);line-height:1.5}
.jp .jp-evalcta{margin-top:14px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,rgba(37,99,235,.07),rgba(6,182,212,.07));border:1px solid rgba(37,99,235,.18)}
.jp .jp-evalcta p{margin:0 0 10px;font-size:13.5px;color:#1e3a8a}
.jp .jp-evalcta__acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ads — label + reserved height come from .x-ad (expertini-ui.css); this
   keeps every unit between dividers, with a clear ad-free gap to anything
   clickable. Exactly three above the toolkit (order in job-single.html). */
.jp .jp-ad{margin:6px 0;padding:14px 0;border-top:1px solid var(--x-border);border-bottom:1px solid var(--x-border);max-width:100%;overflow:hidden}
.jp .jp-ad .x-ad{padding:0;max-width:100%}
.jp .jp-ad ins{max-width:100%}
/* 1: top, full width, above the application box: label, ad, 24px, divider, 24px */
.jp .jp-ad--top{margin:16px 0 24px;padding:0 0 24px;border-top:0}
/* 2: between the requirements and the description */
.jp .jp-ad--mid{margin:6px 0}
/* 3: in-article, last thing in the description card; the card padding, the
   column gap and .jp-apply2's margin keep ≥32px to the second apply box */
.jp .jp-ad--in{margin:22px 0 0;padding:16px 0}
.jp .jp-ad:has(ins[data-ad-status="unfilled"]){display:none}

/* 2. why you match */
.jp .jp-match{scroll-margin-top:90px;border-color:rgba(37,99,235,.25);background:linear-gradient(180deg,#f8fbff 0,#fff 140px)}
.jp .jp-match__head{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.jp .jp-kicker{margin:0 0 2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--x-secondary)}
.jp .jp-sub{margin:0;font-size:13.5px;color:var(--x-text-3)}
.jp .jp-points{display:flex;flex-wrap:wrap;gap:6px 14px;margin:8px 0 0!important;padding:0;font-size:12.5px;color:var(--x-text-3)}
.jp .jp-ring{--p:0;--c:var(--x-primary);flex:0 0 92px;width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(closest-side,#fff 76%,transparent 77% 100%),conic-gradient(var(--c) calc(var(--p)*1%),#e2e8f0 0);text-align:center}
.jp .jp-ring b{font:700 24px/1 var(--x-f-disp);color:var(--x-text)}
.jp .jp-ring .ui-values{font-size:10px;color:var(--x-subtext);line-height:1.2;margin-top:3px;max-width:62px}
@media (max-width:420px){.jp .jp-match__head{align-items:flex-start}.jp .jp-ring{flex-basis:76px;width:76px;height:76px}.jp .jp-ring b{font-size:20px}}
.jp .jp-st{min-height:0}
.jp .jp-skel{min-height:220px;display:flex;flex-direction:column;gap:10px;padding-top:4px}
.jp .jp-skel span{display:block;height:14px;border-radius:7px;background:linear-gradient(90deg,#eef2f7,#f8fafc,#eef2f7);background-size:200% 100%;animation:jp-sk 1.4s linear infinite}
.jp .jp-skel span.is-short{width:55%}
@keyframes jp-sk{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.jp .jp-skel span{animation:none}}
.jp .jp-gets{display:flex;flex-direction:column;gap:10px;margin:0 0 14px!important;padding:0}
.jp .jp-gets li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--x-text-2)}
.jp .jp-gets .x-itile{font-size:12px;font-weight:700}
.jp .jp-steps{display:flex;flex-wrap:wrap;gap:8px;margin:0!important;padding:0;counter-reset:jp}
.jp .jp-steps li{counter-increment:jp;list-style:none;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:99px;background:#fff;border:1px solid var(--x-border);font-size:12.5px;color:var(--x-text-2)}
.jp .jp-steps li::before{content:counter(jp);width:20px;height:20px;border-radius:50%;background:var(--x-grad);color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.jp .jp-go{min-height:46px;white-space:normal;text-align:center}
@media (max-width:520px){.jp .jp-acts--cta .jp-go{flex:1 1 100%}}

/* Profile Fit teaser (guest / no CV): a sample result, blurred and greyed under
   an "Example" ribbon. The sample numbers are CSS content (data-n), not text. */
.jp .jp-match.is-teaser .jp-match__head>.jp-ring{display:none}
.jp .jp-teaser{margin:0 0 14px}
.jp .jp-demo{position:relative;overflow:hidden;margin:0 0 14px;padding:16px 16px 12px;border-radius:16px;border:1px dashed #cbd5e1;background:repeating-linear-gradient(135deg,#f8fafc 0 10px,#f1f5f9 10px 20px)}
.jp .jp-demo__tag{position:absolute;top:14px;right:-38px;z-index:2;width:140px;padding:4px 0;transform:rotate(45deg);background:#f59e0b;color:#fff;font:700 11px/1.2 var(--x-f-body);letter-spacing:.14em;text-transform:uppercase;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.jp .jp-demo__in{display:flex;gap:16px;align-items:center;filter:grayscale(.55) blur(1.2px);opacity:.72;user-select:none;pointer-events:none;padding-right:40px}
.jp .jp-demo [data-n]::before{content:attr(data-n)}
.jp .jp-demo b,.jp .jp-demo small{filter:blur(3.5px)}
.jp .jp-ring--demo{flex:0 0 84px;width:84px;height:84px}
.jp .jp-ring__l{font-size:10px;color:var(--x-subtext);line-height:1.2;margin-top:3px}
.jp .jp-demo__bars{flex:1 1 auto}
.jp .jp-demo .jp-bar{grid-template-columns:minmax(64px,1fr) minmax(60px,2fr) 34px}
.jp .jp-demo__cap{display:flex;align-items:center;justify-content:center;gap:6px;margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--x-text-2);text-align:center}
.jp .jp-teaser__h{font-size:17px!important;margin:0 0 8px!important}
.jp .jp-benefits{display:flex;flex-direction:column;gap:7px;margin:0!important;padding:0}
.jp .jp-benefits li{position:relative;padding-left:24px;font-size:13.5px;color:var(--x-text-2);list-style:none}
.jp .jp-benefits li::before{content:"✓";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;background:#dcfce7;color:#15803d;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
.jp .jp-teaser~[data-jp-st="guest"] .jp-acts{margin-top:0}
@media (max-width:420px){.jp .jp-demo{padding:14px 12px 10px}.jp .jp-demo__in{gap:10px;padding-right:22px}.jp .jp-ring--demo{flex-basis:64px;width:64px;height:64px}.jp .jp-demo .jp-bar{grid-template-columns:minmax(56px,1fr) minmax(40px,1.4fr) 30px;font-size:11.5px}}

/* upload */
.jp .jp-up{display:flex;flex-direction:column;gap:10px}
.jp .jp-drop{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 16px;border:2px dashed rgba(37,99,235,.35);border-radius:16px;background:#f8fbff;text-align:center;cursor:pointer;transition:.15s}
.jp .jp-drop:hover,.jp .jp-drop.is-over{background:#eff6ff;border-color:var(--x-primary)}
.jp .jp-drop.has-file{border-style:solid;background:#f0fdf4;border-color:#86efac}
.jp .jp-file{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.jp .jp-drop__i{font-size:24px}
.jp .jp-drop__t{font-weight:600;font-size:14px;color:var(--x-text);word-break:break-word}
.jp .jp-drop__s{font-size:12px;color:var(--x-subtext)}
.jp .jp-photo{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--x-text-2)}
.jp .jp-photo em,.jp .jp-lbl em{font-style:normal;color:var(--x-subtext)}
.jp .jp-photo input{font-size:12.5px;max-width:100%}

/* with CV */
.jp .jp-est{padding:14px 16px;border-radius:14px;background:#f8fafc;border:1px solid var(--x-border)}
.jp .jp-est__h{margin:0 0 2px;font:600 15px/1.35 var(--x-f-disp);color:var(--x-text)}
.jp .jp-cvline{font-size:12.5px;color:var(--x-subtext);word-break:break-word}
.jp .jp-miss{margin-top:10px}
.jp .jp-miss__h{margin:0 0 6px;font-size:12.5px;color:var(--x-text-3)}
.jp .jp-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0!important;padding:0}
.jp .jp-chips li{padding:4px 10px;border-radius:99px;background:#fff;border:1px solid var(--x-border);font-size:12px;color:var(--x-text-2)}
.jp .jp-chips--bad li{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.jp .jp-chips--ok li{background:#f0fdf4;border-color:#bbf7d0;color:#15803d}
.jp .jp-scores{margin-top:16px}
.jp .jp-scores__intro{margin:0 0 6px;font-size:13px;color:var(--x-text-3)}
.jp .jp-score{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:4px 12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--x-border)}
.jp .jp-score:last-of-type{border-bottom:0}
.jp .jp-score__t b{display:block;font-size:14px;color:var(--x-text)}
.jp .jp-score__t span{display:block;font-size:12.5px;color:var(--x-subtext);line-height:1.45}
.jp .jp-res{grid-column:1/-1;margin-top:8px}
@media (max-width:520px){.jp .jp-score{grid-template-columns:32px minmax(0,1fr)}.jp .jp-score>.x-btn{grid-column:2;justify-self:start}}
.jp .jp-meter{font-weight:600;color:var(--x-secondary);margin-right:4px}
.jp .jp-result{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:14px;background:#f8fafc;border:1px solid var(--x-border)}
.jp .jp-result .jp-ring{flex-basis:72px;width:72px;height:72px}
.jp .jp-result .jp-ring b{font-size:19px}
.jp .jp-result__b{flex:1 1 auto;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--x-text-2)}
.jp .jp-result__h{margin:0;font:600 14.5px/1.35 var(--x-f-disp);color:var(--x-text)}
.jp .jp-bars{display:flex;flex-direction:column;gap:6px;margin:0!important;padding:0}
.jp .jp-bar{display:grid;grid-template-columns:minmax(0,1fr) 120px auto;gap:8px;align-items:center;font-size:12.5px}
.jp .jp-bar i{display:block;height:7px;border-radius:4px;background:#e2e8f0;position:relative;overflow:hidden}
.jp .jp-bar i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--c,var(--x-primary));border-radius:4px}
.jp .jp-bar small{font-size:12px;color:var(--x-subtext);white-space:nowrap}
@media (max-width:420px){.jp .jp-bar{grid-template-columns:minmax(0,1fr) 70px auto}}
.jp .jp-fixes{margin:0!important;padding-left:18px}
.jp .jp-fixes li{list-style:disc;font-size:12.5px;margin:0 0 3px}
.jp .jp-result__more{font-size:12.5px}

/* documents + tailor / cover letter */
.jp .jp-docs{margin-top:18px;display:flex;flex-direction:column;gap:10px}
.jp .jp-docs__list ul{display:flex;flex-direction:column;gap:8px;margin:0;padding:0}
.jp .jp-doc{border:1px solid var(--x-border);border-radius:12px;background:#fff}
.jp .jp-doc>summary{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;list-style:none}
.jp .jp-doc>summary::-webkit-details-marker{display:none}
.jp .jp-doc__t{flex:1 1 auto;font-size:13.5px;font-weight:600;color:var(--x-text);word-break:break-word}
.jp .jp-doc__m{font-size:12px;color:var(--x-subtext);white-space:nowrap}
@media (max-width:520px){.jp .jp-doc>summary{flex-wrap:wrap}.jp .jp-doc__t{flex-basis:calc(100% - 50px)}.jp .jp-doc__m{margin-left:42px}}
.jp .jp-doc__b{padding:0 12px 12px}
.jp .jp-x{border:1px solid var(--x-border);border-radius:14px;background:#fff}
.jp .jp-x>summary{display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;list-style:none}
.jp .jp-x>summary::-webkit-details-marker{display:none}
.jp .jp-x>summary::after{content:"";margin-left:auto;flex:0 0 9px;width:9px;height:9px;border-right:2px solid var(--x-subtext);border-bottom:2px solid var(--x-subtext);transform:rotate(45deg);transition:.15s}
.jp .jp-x[open]>summary::after{transform:rotate(-135deg)}
.jp .jp-x>summary b{display:block;font-size:14px;color:var(--x-text)}
.jp .jp-x>summary small{display:block;font-size:12.5px;color:var(--x-subtext);line-height:1.4}
.jp .jp-x__b{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.jp .jp-cvtext>summary{font-size:12.5px;color:var(--x-primary);cursor:pointer}
.jp .jp-lbl{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:500;color:var(--x-text-2)}
.jp .jp-lbl textarea,.jp .jp-lbl select,.jp .jp-lbl input,.jp .jp-out textarea{width:100%;border:1px solid var(--x-border);border-radius:10px;padding:9px 11px;font:400 13.5px/1.5 var(--x-f-body);color:var(--x-text);background:#fff}
.jp .jp-lbl textarea:focus,.jp .jp-lbl select:focus,.jp .jp-lbl input:focus,.jp .jp-out textarea:focus{outline:0;border-color:var(--x-primary);box-shadow:var(--x-ring)}
.jp .jp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;align-items:end}
.jp .jp-lbl__t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.jp .jp-lbl__t em{font-size:11.5px}
.jp .jp-out{display:flex;flex-direction:column;gap:10px;padding:14px;border-radius:12px;background:#f8fafc;border:1px solid var(--x-border)}
.jp .jp-out textarea{min-height:260px}
.jp .jp-out__ai{font-size:12px;color:var(--x-subtext)}
.jp .jp-out ul{margin:0;padding-left:18px}
.jp .jp-out li{list-style:disc;margin:0 0 4px;font-size:13px}
.jp .jp-rw{border-left:3px solid #86efac;padding:4px 0 4px 10px;margin:0 0 8px}
.jp .jp-rw__old{margin:0;font-size:12.5px;color:var(--x-subtext);text-decoration:line-through;text-decoration-color:#cbd5e1}
.jp .jp-rw__new{margin:2px 0 0;font-size:13px;color:var(--x-text)}
.jp .jp-fine{margin:16px 0 0;font-size:12px;color:var(--x-subtext)}

/* 3. key requirements */
.jp .jp-chips--facts li{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8;font-weight:500}
.jp .jp-reqlist{margin:12px 0 0!important;padding:0;display:flex;flex-direction:column;gap:7px}
.jp .jp-reqlist li{position:relative;padding-left:22px;font-size:13.5px;color:var(--x-text-2)}
.jp .jp-reqlist li::before{content:"";position:absolute;left:4px;top:7px;width:8px;height:8px;border-radius:2px;background:var(--x-grad);transform:rotate(45deg)}

/* 4. description */
.jp .jp-desc__body{font-size:14.5px;line-height:1.7;color:var(--x-text-2);word-break:break-word;overflow-wrap:anywhere}
.jp .jp-desc__body p{margin:0 0 10px;color:inherit;font-size:inherit;line-height:inherit}
.jp .jp-desc__body ul,.jp .jp-desc__body ol{margin:6px 0 12px;padding-left:22px}
.jp .jp-desc__body li{list-style:disc;display:list-item;margin:0 0 4px}
.jp .jp-desc__body ol li{list-style:decimal}
.jp .jp-desc__body h3,.jp .jp-desc__body h4,.jp .jp-desc__body h5,.jp .jp-desc__body h6{font:600 15px/1.4 var(--x-f-disp);margin:14px 0 6px;color:var(--x-text)}
.jp .jp-desc__body strong,.jp .jp-desc__body b{font-weight:600;color:var(--x-text)}
.jp .jp-cat{margin:0}
.jp .jp-cat a{display:inline-block;padding:6px 13px;border-radius:99px;background:#fff;border:1px solid var(--x-border);font-size:13px;color:var(--x-text-2)!important}
.jp .jp-img{border-radius:var(--x-r);overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08);margin:0}
.jp .jp-img img{aspect-ratio:1200/630}

/* 7. second application box: extra margin = ≥32px (with the column gap and the
   description card's padding) below the in-article ad's divider */
.jp .jp-apply2{margin-top:14px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.jp .jp-apply2__t{flex:1 1 240px}
.jp .jp-apply2__t .jp-h3{margin:0 0 2px!important}
.jp .jp-apply2__b{flex:1 1 260px;max-width:100%}

/* 6–7. job lists */
.jp .jp-jobs{display:grid;grid-template-columns:1fr;gap:8px;margin:0!important;padding:0}
@media (min-width:640px){.jp .jp-jobs{grid-template-columns:1fr 1fr}}
.jp .jp-job{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid var(--x-border);border-radius:12px;background:#fff;height:100%}
.jp .jp-job:hover{border-color:rgba(37,99,235,.4)}
.jp .jp-job b{font-size:13.5px;font-weight:600;color:var(--x-text);line-height:1.35}
.jp .jp-job span{font-size:12px;color:var(--x-subtext)}
.jp .jp-more{margin:12px 0 0;font-size:13px}
.jp .jp-rail{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;-webkit-overflow-scrolling:touch}
.jp .jp-rjob{flex:0 0 250px;scroll-snap-align:start;padding:12px 14px;border:1px solid var(--x-border);border-radius:12px;background:#fff}
.jp .jp-rjob p{margin:0}
.jp .jp-rjob__t{font-size:13.5px;font-weight:600;line-height:1.35;margin-bottom:4px!important}
.jp .jp-rjob__t a{color:var(--x-text)!important}
.jp .jp-rjob__m{font-size:12px}
.jp .jp-rjob__m a{color:var(--x-subtext)!important}

/* side column */
.jp .jp-dl{margin:0!important;padding:0;display:flex;flex-direction:column}
.jp .jp-dl li{display:flex;flex-wrap:wrap;gap:4px 8px;padding:9px 0;border-bottom:1px solid #f1f5f9;font-size:13.5px;color:var(--x-text-2)}
.jp .jp-dl li:last-child{border-bottom:0}
.jp .jp-dl__k{flex:0 0 auto;color:var(--x-subtext);font-size:12.5px;min-width:96px}
.jp .jp-pdf{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:500}
.jp .jp-company__top{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.jp .jp-company__n{margin:0;font-weight:600;color:var(--x-text)}
.jp .jp-social{display:flex;flex-wrap:wrap;gap:8px}

/* sign-up / limit dialog plans (kit.css is not loaded on this page). The two
   dialogs are moved to <body> by job_page.js (.page-wrapper is a stacking
   context that would put the sticky header above them), so no .jp prefix. */
.jp-plans{display:flex;flex-direction:column;gap:6px;margin:6px 0 12px!important;padding:0;text-align:left}
.jp-plans li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:10px;background:#f8fafc;font-size:12.5px;list-style:none}
.jp-plans li.is-hl{background:#eff6ff}
.jp .x-btn.is-busy{opacity:.7;cursor:progress}
.jp .x-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}

/* ── phones: tap targets ≥44px and nothing wider than the screen (owner,
   2026-10-04). Inline links get vertical padding (bigger hit area, same line
   height); controls get a 44px minimum. ── */
.jp .jp-sum .jp-crumbs{margin:-14px 0 4px}
.jp .jp-crumbs a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;vertical-align:middle}
.jp .jp-co a,.jp .jp-dl a,.jp .jp-more a,.jp a.jp-more,.jp .jp-social a,.jp .jp-cvline a,.jp .jp-note a,.jp .jp-sub a{padding:14px 0}
.jp .jp-link{display:inline-flex;align-items:center;min-height:44px;min-width:44px}
.jp .x-btn--sm,.jp .x-btn--mini{min-height:44px}
.jp .jp-cvtext>summary{display:flex;align-items:center;min-height:44px}
.jp .jp-lbl select,.jp .jp-lbl input,.jp .jp-photo input{min-height:44px}
.jp .jp-cat a{display:inline-flex;align-items:center;min-height:44px}
.jp .jp-share a{width:44px;height:44px}
.jp .jp-pdf{min-height:44px}
.jp .jp-rjob a{display:flex;align-items:center;min-height:44px}
.jp .jp-rjob__t{margin-bottom:0!important}
.jp .jp-dl li{align-items:center}
.jp .jp-dl li>a{padding:12px 0}
.jp .jp-h1,.jp .jp-co,.jp .jp-h3,.jp .jp-fact,.jp .jp-dl li,.jp .jp-company__n,.jp .jp-rjob,.jp .jp-job b,.jp .jp-sum__foot,.jp .jp-reqlist li,.jp .jp-chips li{overflow-wrap:anywhere}
.jp img,.jp video,.jp iframe{max-width:100%}
.jp .jp-img img{height:auto}

/* The site header's overflow fixes (narrow phones, 1021–1439px) moved to
   expertini-ui.css "Public header fit" on 2026-10-04 — every public page. */

/* Report this job — the original form, collapsed to one line above the toolkit */
.jp .jp-report{margin-top:18px;padding:0}
.jp .jp-report>summary{display:flex;align-items:center;gap:8px;min-height:48px;padding:10px 18px;cursor:pointer;list-style:none;font-size:13.5px;font-weight:500;color:var(--x-text-3)}
.jp .jp-report>summary::-webkit-details-marker{display:none}
.jp .jp-report>summary::after{content:"";margin-left:auto;flex:0 0 8px;width:8px;height:8px;border-right:2px solid var(--x-subtext);border-bottom:2px solid var(--x-subtext);transform:rotate(45deg)}
.jp .jp-report[open]>summary::after{transform:rotate(-135deg)}
.jp .jp-report__i{color:#dc2626}
.jp .jp-report__b{padding:0 18px 18px}
.jp .jp-report .user-dashboard{padding:0!important}
.jp .jp-report .row{margin:0}
.jp .jp-report [class*="col-"]{flex:0 0 100%;max-width:100%;padding:0}
.jp .jp-report .uppertitle-box{font-size:17px!important;line-height:1.35!important}
.jp .jp-report .uppertitle-box .text{font-size:13px;font-weight:400;color:var(--x-text-3);margin-top:4px}
.jp .jp-report .form-group{margin:0 0 12px}
.jp .jp-report label{display:block;font-size:12.5px;font-weight:500;color:var(--x-text-2);margin:0 0 4px}
.jp .jp-report input,.jp .jp-report textarea{width:100%;min-height:44px;border:1px solid var(--x-border);border-radius:10px;padding:9px 11px;font:400 13.5px/1.5 var(--x-f-body);color:var(--x-text);background:#fff}
.jp .jp-report textarea{min-height:96px!important}
.jp .jp-report button[type=submit]{min-height:44px}
@media (min-width:720px){.jp .jp-report .form-group.col-lg-6{flex-basis:calc(50% - 6px);max-width:calc(50% - 6px)}.jp .jp-report .default-form>.row{display:flex;flex-wrap:wrap;gap:0 12px}}

/* The "Your Complete Job Search Toolkit" include (markup unchanged) is a child
   of the same legacy .row as .jp: give it .jp's own sizing so it no longer
   hangs 12px past both screen edges (its scroll arrows were cut off). */
body:has(#jp) .row>.expertini-horizontal-showcase{flex:0 0 calc(100% - 30px);max-width:calc(100% - 30px);margin-left:15px;margin-right:15px;padding-left:13px;padding-right:13px;min-width:0;box-sizing:border-box}

/* Site header for guests on 1021–1439px desktops (job page only). The
   overflow itself is fixed site-wide (expertini-ui.css "Public header fit",
   2026-10-04); this stays because the page has its own CV upload, so the
   header's "Upload your CV" button steps aside below 1440px (as before). */
@media (min-width:1021px) and (max-width:1439px){
  body:has(#jp) .x-nav .x-hide-md{display:none!important}
}

/* Score progress cards (one per score, in place of its result) + "✓ Done" */
.jp .jp-scores__all{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 6px}
.jp .jp-scores__all .jp-muted{font-size:12.5px}
.jp .jp-prog{display:flex;gap:14px;align-items:flex-start;min-height:132px;padding:14px;border-radius:14px;background:linear-gradient(135deg,#f8fbff,#f1f5ff);border:1px solid rgba(37,99,235,.18)}
.jp .jp-prog__ring{flex:0 0 44px;width:44px;height:44px;border-radius:50%;border:4px solid #dbeafe;border-top-color:var(--x-primary);animation:jp-spin .9s linear infinite}
@keyframes jp-spin{to{transform:rotate(360deg)}}
.jp .jp-prog__b{flex:1 1 auto;display:flex;flex-direction:column;gap:6px}
.jp .jp-prog__h{margin:0;font:600 14px/1.35 var(--x-f-disp);color:var(--x-text)}
.jp .jp-prog__steps{margin:0!important;padding:0;display:flex;flex-direction:column;gap:4px;counter-reset:jps}
.jp .jp-prog__steps li{list-style:none;position:relative;padding-left:22px;font-size:12.5px;color:var(--x-subtext);transition:color .2s}
.jp .jp-prog__steps li::before{content:"";position:absolute;left:3px;top:5px;width:9px;height:9px;border-radius:50%;border:2px solid #cbd5e1;background:#fff}
.jp .jp-prog__steps li.is-on{color:var(--x-text);font-weight:600}
.jp .jp-prog__steps li.is-on::before{border-color:var(--x-primary);background:var(--x-primary);animation:jp-pulse 1s ease-in-out infinite}
.jp .jp-prog__steps li.is-done{color:var(--x-text-3)}
.jp .jp-prog__steps li.is-done::before{border-color:#16a34a;background:#16a34a}
@keyframes jp-pulse{50%{box-shadow:0 0 0 4px rgba(37,99,235,.18)}}
.jp .jp-prog__t{margin:0;font-size:12px;color:var(--x-subtext);min-height:16px}
.jp .jp-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.jp .x-btn.is-done,.jp .x-btn.is-done[disabled]{opacity:1;background:#f0fdf4!important;color:#15803d!important;border:1px solid #86efac;box-shadow:none;cursor:default;font-weight:600!important}
@media (prefers-reduced-motion:reduce){.jp .jp-prog__ring,.jp .jp-prog__steps li.is-on::before{animation:none}}