/* Find Job (ported from Vacancy Identifier 2026-10-14), styled like simplify.jobs: everything here is scoped to
   #sec-findjob. The colours come from css/app.css's tokens (--fj-* point at them), so the page follows light and dark. */
/* Find Job, styled like simplify.jobs (Max 2026-10-13: the mock-up "AGREED ... ship it, keep the original side panels
   styles for others"): everything here is scoped to this panel. Colours and sizes are Simplify's own computed values. */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop){--fj-bg:var(--page);--fj-surface:var(--surface);--fj-hover:var(--hover);--fj-chip:var(--chip);--fj-line:var(--line);--fj-line2:var(--line2);
  --fj-ink:var(--ink);--fj-ink2:var(--ink2);--fj-ink3:var(--ink3);--fj-brand:var(--brand);--fj-brand-h:var(--brand-h);--fj-brand-d:var(--brand-d);
  --fj-tint:var(--tint);--fj-tint2:color-mix(in oklch,var(--tint) 35%,transparent);--fj-tintline:color-mix(in oklch,var(--brand-d) 30%,transparent);
  --fj-m5:#15803D;--fj-m4:#22C55E;--fj-m3:#F59E0B;--fj-m2:#A3A3A3;--fj-m1:#D4D4D4;--fj-warn:var(--warn);--fj-warn-s:var(--warn-s);--fj-good-s:var(--good-s);--fj-good:var(--good);
  --fj-pop-bg:color-mix(in oklch,var(--surface) 97%,transparent);
  --fj-soft:0 1px 10px rgba(0,0,0,.008),0 3px 10px -2px rgba(0,0,0,.016),0 6px 16px rgba(0,0,0,.02);
  --fj-pop:0 0 0 1px var(--fj-line),0 10px 15px -3px rgba(0,0,0,.06),0 4px 6px -4px rgba(0,0,0,.06);
  font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) button,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) select{font-family:inherit;color:inherit}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) svg.fj-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sp{flex:1}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-view{display:grid;gap:14px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-view>*{min-width:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pane{background:var(--fj-surface);border:1px solid var(--fj-line);border-radius:10px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:8px 16px;border-radius:10px;border:1px solid var(--fj-line);background:var(--fj-surface);color:var(--fj-ink);font-weight:500;font-size:14px;line-height:20px;white-space:nowrap;box-shadow:var(--fj-soft);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) a.fj-btn,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) a.fj-btn:hover{text-decoration:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn:hover:not(:disabled){background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn:disabled{opacity:.45;cursor:not-allowed}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.pri{background:var(--fj-brand);border-color:var(--fj-brand);color:#fff}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.pri:hover:not(:disabled){background:var(--fj-brand-h);border-color:var(--fj-brand-h)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.sm{height:32px;padding:0 12px;font-size:13px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn svg{width:15px;height:15px}
/* AI retouch (js/retouch.js): the brand blue, deepening to indigo, with the sparkle mark */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-ai{background:linear-gradient(135deg,var(--fj-brand),oklch(.55 .15 262));border-color:transparent;color:#fff;font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-ai:hover:not(:disabled){background:linear-gradient(135deg,var(--fj-brand-h),oklch(.5 .15 262))}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-ai svg{width:15px;height:15px;fill:currentColor;stroke:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;background:var(--fj-chip);font-size:13px;font-weight:500;line-height:18px;color:var(--fj-ink);white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-chip.cy{background:var(--fj-tint);color:var(--fj-brand-d)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-chips{display:flex;flex-wrap:wrap;gap:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-h2{margin:0;font-size:18px;font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-empty{padding:40px 16px;text-align:center;color:var(--fj-ink3);font-size:14px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-empty b{display:block;color:var(--fj-ink);font-size:16px;margin-bottom:12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=checkbox],:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=radio]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;border:1.5px solid var(--fj-line2);background:var(--fj-surface);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=checkbox]{border-radius:4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=checkbox]:checked{background:var(--fj-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=checkbox]:indeterminate{background:var(--fj-brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/12px no-repeat;border-color:var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=radio]{border-radius:50%}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) input[type=radio]:checked{border:5px solid var(--fj-brand)}
/* Working */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-run{padding:22px;display:grid;gap:12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-run h3{margin:0;font-size:16px;font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs i{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--fj-line2);display:grid;place-items:center;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.on{color:var(--fj-ink)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.on i{border-color:var(--fj-brand);border-top-color:transparent;animation:fjspin .8s linear infinite}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.done{color:var(--fj-ink2)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.done i{background:var(--fj-brand);border-color:var(--fj-brand);color:#fff}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.done i svg{width:11px;height:11px;stroke-width:3}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.err{color:var(--fj-warn)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.err i{border-color:var(--fj-warn)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs small{margin-left:auto;color:var(--fj-ink3);font-size:13px}
@keyframes fjspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rs.on i{animation:none}}
/* 2. Jobs: the bar */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bar{display:flex;align-items:flex-start;gap:8px;flex-wrap:nowrap;position:relative}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox{flex:1 1 420px;min-width:260px;display:flex;align-items:flex-start;gap:6px;min-height:36px;border:1px solid var(--fj-line);border-radius:18px;padding:4px 6px 4px 12px;background:var(--fj-surface);box-shadow:var(--fj-soft);cursor:text}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox:focus-within{border-color:var(--fj-line2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox>svg{width:16px;height:16px;color:var(--fj-ink3);margin:5px 2px 0 0;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kws{flex:1;min-width:0;display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwl{display:contents}   /* the chips' wrapper: on a computer they flow with the box; a phone gives it a row (the end of this file) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw{flex:none;display:inline-flex;align-items:center;gap:2px;height:26px;padding:0 3px 0 10px;border-radius:9999px;background:var(--fj-tint);color:var(--fj-brand-d);font-size:13px;font-weight:500;line-height:18px;white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw button{width:20px;height:20px;border-radius:50%;border:0;background:transparent;color:var(--fj-brand-d);display:grid;place-items:center;padding:0;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw button:hover{background:color-mix(in oklch,var(--fj-brand-d) 15%,transparent)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw button svg{width:11px;height:11px;stroke-width:2.4}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox input{flex:1 0 120px;min-width:120px;border:0;background:transparent;height:26px;font-size:16px;color:var(--fj-ink);outline:none;padding:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox input::placeholder,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch input::placeholder{color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns{display:flex;gap:8px;flex-wrap:nowrap;align-items:center;margin-left:auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw{position:relative}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 8px 0 14px;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);font-size:14px;line-height:20px;letter-spacing:-.084px;color:var(--fj-ink);white-space:nowrap;box-shadow:var(--fj-soft);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb:hover,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb.open{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb>svg{width:14px;height:14px;margin:0 3px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-n{min-width:20px;height:20px;border-radius:9999px;background:var(--fj-chip);font:500 11px/20px system-ui,sans-serif;display:grid;place-items:center;padding:0 6px;color:var(--fj-ink);font-variant-numeric:tabular-nums}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fsep{width:1px;height:24px;background:var(--fj-line);margin:6px 2px 0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib{width:36px;height:36px;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);display:grid;place-items:center;padding:0;color:var(--fj-ink);position:relative;box-shadow:var(--fj-soft);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib.open,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib.act{border-color:var(--fj-brand);color:var(--fj-brand);box-shadow:0 0 0 1px var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib.act svg{fill:currentColor}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib svg{width:16px;height:16px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib .fj-n{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;font-size:11px;line-height:18px;border:1px solid var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd{position:absolute;top:calc(100% + 6px);left:0;z-index:15;width:256px;background:var(--fj-pop-bg);backdrop-filter:blur(8px);border-radius:10px;box-shadow:var(--fj-pop);padding:4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd.r{left:auto;right:0}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd.w{width:340px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-scroll{max-height:300px;overflow:auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;min-height:32px;border-radius:6px;font-size:14px;line-height:20px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt:hover{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt.sub{padding-left:34px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-oc{margin-left:auto;padding-left:8px;font-size:12px;color:var(--fj-ink3);font-variant-numeric:tabular-nums}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-onone{display:flex;align-items:center;gap:8px;padding:8px;font-size:13px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-negr{padding:0 4px 4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-crow{display:flex;align-items:center}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-crow .fj-opt{flex:1;min-width:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-xp{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--fj-ink3);display:grid;place-items:center;padding:0;flex:none;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-xp:hover{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-xp svg{width:14px;height:14px;transition:transform .15s}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-xp.on svg{transform:rotate(90deg)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch{display:flex;align-items:center;gap:8px;height:38px;padding:0 10px;margin:-4px -4px 4px;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch svg{width:14px;height:14px;color:var(--fj-ink3)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;color:var(--fj-ink);outline:none;height:34px;padding:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ddf{padding:8px 8px 4px;margin-top:4px;border-top:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-clr{border:0;background:transparent;padding:4px 6px;margin-left:-6px;border-radius:6px;color:var(--fj-brand);font-size:14px;font-weight:500;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-clr:hover:not(:disabled){background:var(--fj-tint2)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-clr:disabled{color:var(--fj-ink3);cursor:default}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-avgl{padding:8px 8px 10px;border-bottom:1px solid var(--fj-line);margin-bottom:4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-avgl small{display:block;font-size:12px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-avgl b{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-avgl span{font-size:13px;color:var(--fj-ink3);margin-left:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-utabs{display:flex;gap:16px;padding:2px 8px 0;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-utabs button{border:0;background:transparent;padding:6px 0 8px;font-size:14px;color:var(--fj-ink3);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-utabs button.on{color:var(--fj-ink);border-bottom-color:var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ft{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px 8px 6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ft label{display:grid;gap:5px;font-size:12px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ft select,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tsel{height:36px;border:1px solid var(--fj-line);border-radius:10px;background:var(--fj-surface);padding:0 8px;font-size:14px;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-menu{width:250px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mlbl{font-size:12px;color:var(--fj-ink3);padding:10px 8px 2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mrow{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;padding:7px 8px;border-radius:6px;font-size:14px;color:var(--fj-ink);text-align:left;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mrow:hover,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mrow.on{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mrow svg{width:14px;height:14px;color:var(--fj-ink3);margin-left:auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-subm{position:absolute;top:0;right:calc(100% + 8px);width:220px;background:var(--fj-pop-bg);border-radius:10px;box-shadow:var(--fj-pop);padding:4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pst{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:13px;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-spin{width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--fj-brand);border-top-color:transparent;animation:fjspin .8s linear infinite}
@media (prefers-reduced-motion:reduce){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-spin{animation:none}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est{font-size:13px;color:var(--fj-ink3);min-width:210px;text-align:right;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est b{color:var(--fj-ink);font-weight:600}
/* Jobs per board, beside Run */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cap{display:inline-flex;align-items:center;gap:8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-capl{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--fj-ink2);white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg{display:inline-flex;border:1px solid var(--fj-line);border-radius:10px;overflow:hidden;background:var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg label{position:relative;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg span{display:block;padding:7px 12px;font-size:13px;font-weight:500;color:var(--fj-ink2);font-variant-numeric:tabular-nums}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg label + label span{border-left:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg input:checked + span{background:var(--fj-tint);color:var(--fj-brand-d);font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg input:focus-visible + span{outline:2px solid var(--fj-brand);outline-offset:-2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg input:disabled + span{opacity:.55;cursor:default}
/* Run (green): its name never changes (Max 2026-10-15) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-go{color:#fff;font-weight:600;border-color:transparent;background:#16a34a;min-width:96px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-go:hover:not(:disabled){background:#15803d}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-go svg{width:15px;height:15px;fill:currentColor;stroke:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-go .fj-spin{border-color:#fff;border-top-color:transparent}
/* 2. Jobs: list and detail */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-two{display:grid;grid-template-columns:420px minmax(0,1fr);background:var(--fj-surface);border:1px solid var(--fj-line);border-radius:16px;overflow:hidden}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-list,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-det{display:flex;flex-direction:column;height:min(760px,calc(100vh - 170px));min-height:520px;overflow:hidden}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-list{border-right:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd{display:flex;align-items:center;gap:6px;padding:10px 12px 10px 16px;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{font-size:12px;line-height:16px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd select{height:28px;border:0;background:transparent;font-size:13px;font-weight:500;color:var(--fj-ink);padding:0 4px;border-radius:6px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd select:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bad{color:var(--fj-warn)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 6px 0 10px;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);font-size:13px;font-weight:500;color:var(--fj-ink);white-space:nowrap;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb:hover,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb.open{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb svg{width:12px;height:12px;color:var(--fj-ink3)}
/* the list's search box (job titles and companies), a row of its own under the count */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch{flex:1 0 100%;display:flex;align-items:center;gap:8px;height:34px;padding:0 10px;border:1px solid var(--fj-line);border-radius:10px;background:var(--fj-surface);min-width:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch:focus-within{border-color:var(--fj-brand);box-shadow:0 0 0 1px var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch svg{width:14px;height:14px;flex:none;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch input{flex:1;min-width:0;border:0;background:transparent;font-size:14px;color:var(--fj-ink);outline:none;height:32px;padding:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch input::placeholder{color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi{width:28px;height:28px;flex:none;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);display:grid;place-items:center;padding:0;color:var(--fj-ink);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi:hover{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi svg{width:14px;height:14px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi.act{border-color:var(--fj-brand);color:var(--fj-brand)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi.act svg{fill:currentColor}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rows{flex:1;overflow-y:auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;gap:12px;padding:16px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row:hover{background:var(--fj-hover)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row.sel{background:var(--fj-tint)}
/* A company's real logo on white; with none, a plain building (never made-up initials). */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo{width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none;background:#fff;border:1px solid var(--fj-line);color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo.none{background:var(--fj-chip);border-color:transparent}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo svg.fj-i{width:20px;height:20px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo.lg{width:48px;height:48px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo.lg svg.fj-i{width:24px;height:24px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .t{font-size:16px;font-weight:500;line-height:20px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .c,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .m2{font-size:14px;line-height:19.25px;color:var(--fj-ink3);margin-top:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .a{font-size:12px;line-height:18px;color:var(--fj-ink3);margin-top:3px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .a b{font-weight:500}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bm{width:28px;height:28px;border:0;border-radius:6px;background:transparent;color:var(--fj-ink);display:grid;place-items:center;padding:0;align-self:start;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bm:hover{background:var(--fj-line)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bm.on svg{fill:currentColor}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv5,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv4{color:var(--fj-good)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv3{color:var(--fj-warn)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv2,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv1,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lv0{color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtop{display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--fj-line);min-height:56px;flex-wrap:wrap}
/* a job's tabs look like tabs at first glance (Max 2026-10-17: "make over view company and decsion tabs more obviously
   exist, they seem dissapear for user first glance"): a grey track, the open one raised on it */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs{display:flex;gap:4px;align-self:center;padding:4px;border-radius:12px;background:var(--fj-hover);border:1px solid var(--fj-line);max-width:100%;overflow-x:auto;scrollbar-width:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs::-webkit-scrollbar{display:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button{flex:none;border:0;background:transparent;font-size:15px;line-height:20px;font-weight:600;color:var(--fj-ink2);padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button:hover{color:var(--fj-ink);background:var(--fj-chip)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button.on{background:var(--fj-surface);color:var(--fj-brand-d);box-shadow:0 1px 3px rgb(0 0 0 / .14)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button:focus-visible{outline:2px solid var(--fj-brand);outline-offset:-2px}
@media (max-width:640px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button{font-size:14px;padding:7px 10px}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dbody{flex:1;overflow-y:auto;padding:20px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cohead{display:flex;gap:12px;align-items:center}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coname{font-size:18px;font-weight:500;line-height:24px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cotag{font-size:14px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-jt{margin:18px 0 14px;font-size:24px;font-weight:700;line-height:32px;text-wrap:balance}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 20px;margin:20px 0;padding-bottom:20px;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-facts div{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:20px;font-weight:700}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-facts svg{width:20px;height:20px;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px;align-items:start}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ahd{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ahd h2{margin:0;font-size:24px;line-height:32px;font-weight:700}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg{display:inline-flex;border:1px solid var(--fj-line2);background:var(--fj-hover);border-radius:9999px;padding:0;margin-left:auto;height:32px;box-shadow:var(--fj-soft)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg button{border:0;background:transparent;border-radius:9999px;padding:0 12px;font-size:14px;color:var(--fj-ink3);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg button.on{background:var(--fj-surface);color:var(--fj-ink);box-shadow:0 0 0 1px var(--fj-line2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about h3{margin:16px 0 8px;font-size:18px;line-height:28px;font-weight:700}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about p{margin:0 0 8px;font-size:14px;line-height:20px;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:20px;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-full{white-space:pre-line;font-size:14px;line-height:20px;color:var(--fj-ink)}
/* a JobsDB job with only the search's preview: its full ad being read (js/findjob.js fjAdText) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-adr{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mcard{border:1px solid var(--fj-tintline);border-radius:16px;padding:16px;background:linear-gradient(to right bottom,var(--fj-tint),color-mix(in oklch,var(--fj-tint) 10%,transparent));display:grid;gap:16px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mh{display:flex;align-items:center;gap:10px;font-size:16px;line-height:24px;font-weight:700}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mh svg{width:32px;height:32px;color:var(--fj-brand);stroke-width:1.5}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mn{font-size:14px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mn b{font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-why{font-size:13px;color:var(--fj-ink2);margin:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kc{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9999px;font-size:13px;line-height:18px;font-weight:500;border:1px solid var(--fj-line);background:var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kc.y{background:color-mix(in oklch,var(--fj-tint) 70%,transparent);border-color:transparent;color:var(--fj-brand-d)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kc svg{width:13px;height:13px;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kc.n{color:var(--fj-ink2)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kc.n svg{color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-req{display:grid;gap:8px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-req>small{font-size:12px;line-height:16px;font-weight:500;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lvl{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m{display:inline-flex;gap:3px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m i{width:12px;height:5px;border-radius:2px;background:var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m.l5 i{background:var(--fj-m5)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m.l4 i:nth-child(-n+4){background:var(--fj-m4)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m.l3 i:nth-child(-n+3){background:var(--fj-m3)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m.l2 i:nth-child(-n+2){background:var(--fj-m2)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-m.l1 i:nth-child(1){background:var(--fj-m1)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts small{display:block;font-size:12px;color:var(--fj-ink3)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts span{font-size:14px;font-weight:500}
@media (max-width:1500px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bar,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns{flex-wrap:wrap}}
@media (max-width:1150px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about{grid-template-columns:1fr}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback{display:none}
@media (max-width:1000px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-two{grid-template-columns:1fr}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-det{scroll-margin-top:8px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback{display:block;padding:12px 16px 0}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback .fj-i{transform:rotate(180deg)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-list,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-det{height:auto;min-height:0}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-list{border-right:0;border-bottom:1px solid var(--fj-line)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rows{max-height:420px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw{position:static}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd.r,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dd.w,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-menu{left:0;right:0;width:auto}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-subm{position:static;width:auto;box-shadow:none;border-left:2px solid var(--fj-line);border-radius:0;margin:2px 0 6px 12px;padding:0 0 0 4px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns{margin-left:0}}
@media (max-width:640px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-facts,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts{grid-template-columns:1fr 1fr}}

/* MyRecruiterBee: the Company tab shows the company's own page (its logo over the initials, tagline, About, facts) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo{position:relative;overflow:hidden}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-co>[data-fjcoall]{margin-top:18px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-co{margin-top:20px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-costate{display:flex;align-items:center;gap:8px;margin:12px 0 0;font-size:14px;line-height:20px;color:var(--fj-ink2)}
/* a company page not read yet: read on the button, once its cost is approved */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coread{flex-wrap:wrap;gap:8px 12px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coread span{flex-basis:100%}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coread small{font-size:13px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cotl{margin:12px 0 0;font-size:16px;line-height:24px;font-weight:500;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coab{margin-top:10px;font-size:14px;line-height:20px;color:var(--fj-ink);white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-coab.open{display:block;-webkit-line-clamp:unset;line-clamp:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-more{border:0;background:transparent;padding:2px 0;margin-top:4px;color:var(--fj-brand-d);font-size:14px;font-weight:500;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-more:hover{text-decoration:underline}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-co .fj-cofacts{margin-top:20px;gap:16px 12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts span{overflow-wrap:anywhere}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts a{font-size:14px;font-weight:500;color:var(--fj-brand-d);text-decoration:none;overflow-wrap:anywhere}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cofacts a:hover{text-decoration:underline}
/* MyRecruiterBee: nothing moves when a filter changes. The estimate keeps its line when it is empty; the Match button is
   as wide as its widest value; at phone width the list header holds its Match menu. */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est{min-height:20px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-stk{display:inline-grid;text-align:left}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-stk>span{grid-area:1/1}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-stk>span.off{visibility:hidden}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd{position:relative;flex-wrap:wrap;row-gap:6px}
/* the count on its own line, the filters under it (Source made the row too wide for the list) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{flex:1 0 100%}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb.act{border-color:var(--fj-brand,var(--brand));color:var(--fj-brand-d,var(--brand-d));background:var(--fj-tint,var(--tint))}
@media (max-width:520px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd{flex-wrap:wrap;row-gap:6px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{flex:1 0 100%}}

@media (max-width:640px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tools .fj-sp{display:none}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est{min-width:0;flex:1;justify-content:flex-start;text-align:left}
  /* the line beside Run and the estimate each take their own row, so neither pushes the page sideways at 390 */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pst{flex:1 1 100%;flex-wrap:wrap}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est{flex-wrap:wrap}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est > span{white-space:normal}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est > span{white-space:nowrap}

/* Advanced filters: the button in the bar opens a panel from the right over a dimmed page (Max 2026-10-16: "this should
   be pop up on the right side not underneth"); each filter is a section of it, the page behind doesn't scroll */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-advb svg.fj-i{width:15px;height:15px}
/* the button is orange so it stands out from the bar's own filters (Max 2026-10-16: "orange the advanced filter option") */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop){--fj-or:#F97316;--fj-or-s:#FFF7ED;--fj-or-h:#FFEDD5;--fj-or-ink:#C2410C;--fj-or-on:#fff}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(#sec-findjob,#sec-dm .fjx,#fj-pop){--fj-or:#FB923C;--fj-or-s:color-mix(in oklab,#FB923C 14%,var(--surface));--fj-or-h:color-mix(in oklab,#FB923C 24%,var(--surface));--fj-or-ink:#FDBA74;--fj-or-on:#2A1003}}
:root[data-theme="dark"] :is(#sec-findjob,#sec-dm .fjx,#fj-pop){--fj-or:#FB923C;--fj-or-s:color-mix(in oklab,#FB923C 14%,var(--surface));--fj-or-h:color-mix(in oklab,#FB923C 24%,var(--surface));--fj-or-ink:#FDBA74;--fj-or-on:#2A1003}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb.fj-advb{border-color:var(--fj-or);background:var(--fj-or-s);color:var(--fj-or-ink);font-weight:500}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb.fj-advb:hover,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb.fj-advb.open{background:var(--fj-or-h)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb.fj-advb>svg{color:var(--fj-or-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-advb .fj-n{background:var(--fj-or-ink);color:var(--fj-or-on)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-advb:focus-visible{outline:2px solid var(--fj-or);outline-offset:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-nv{background:var(--fj-tint);color:var(--fj-brand-d)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbg{position:fixed;inset:0;z-index:45;background:rgb(0 0 0 / .32)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side{position:fixed;top:0;right:0;bottom:0;z-index:46;width:min(420px,100vw);display:flex;flex-direction:column;background:var(--fj-surface);border-left:1px solid var(--fj-line);box-shadow:-12px 0 32px -8px rgb(0 0 0 / .18)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbg.in{animation:fj-fade .18s ease-out}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side.in{animation:fj-slide .22s cubic-bezier(.2,.8,.2,1)}
@keyframes fj-fade{from{opacity:0}}
@keyframes fj-slide{from{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbg.in,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side.in{animation:none}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-shd{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-shd h2{margin:0;font-size:18px;line-height:26px;font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-shd .fj-ib{box-shadow:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:4px 20px 16px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sec{padding:16px 0;border-bottom:1px solid var(--fj-line)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sec:last-child{border-bottom:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sech{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px;margin-bottom:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sech h3{margin:0;font-size:15px;line-height:22px;font-weight:600;display:flex;align-items:center;gap:8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sech .fj-clr{margin:0 -6px 0 0}
/* Read hiring signals: a switch (js/findjob.js fjSide) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:15px;line-height:22px;color:var(--fj-ink);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:42px;height:24px;margin:0;border-radius:12px;background:var(--fj-line2);cursor:pointer;transition:background .15s}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgb(0 0 0 / .25);transition:left .15s}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input:checked{background:var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input:checked::after{left:21px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input:focus-visible{outline:2px solid var(--fj-brand);outline-offset:2px}
@media (prefers-reduced-motion:reduce){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tog input::after{transition:none}}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-dd{position:static;width:auto;background:none;backdrop-filter:none;box-shadow:none;border-radius:0;padding:0;margin:0 -8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-scroll{max-height:none;overflow:visible}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-ddf{display:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-dsrch{margin:0 8px 6px;border:1px solid var(--fj-line);border-radius:10px;background:var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-dsrch:focus-within{border-color:var(--fj-brand);box-shadow:0 0 0 1px var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sft{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px max(14px,env(safe-area-inset-bottom));border-top:1px solid var(--fj-line);background:var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sft .fj-btn.pri{flex:1;max-width:220px}
html:has(:is(#sec-findjob,#sec-dm):not(.hide) .fj-side),html.fj-pop-on{overflow:hidden}
/* a computer: a toast while a panel is open shows beside it, not over its price and Run */
@media (min-width:900px){html:has(:is(#sec-findjob,#sec-dm):not(.hide) .fj-side) #toast{right:436px}}
@media (max-width:480px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side{border-left:0}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-shd,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbody,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sft{padding-left:16px;padding-right:16px}}

/* A Run in progress (no panel for its team: Max 2026-10-19): Stop by the line beside Run, and the list's live row at its
   top with placeholder rows shimmering where the next jobs land (js/findjob.js fjStatus, fjLive, fjSkel) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hbtn{border:1px solid var(--fj-line);background:var(--fj-surface);color:var(--fj-ink);border-radius:8px;height:28px;padding:0 10px;font-size:13px;cursor:pointer;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hbtn:hover:not(:disabled){background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hbtn:disabled{opacity:.6;cursor:default}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-live{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:13px;color:var(--fj-ink2);background:var(--fj-tint);border-bottom:1px solid var(--fj-line);position:sticky;top:0;z-index:1}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;padding:16px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel i{width:40px;height:40px;border-radius:8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel div{display:flex;flex-direction:column;gap:8px;padding-top:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b{display:block;height:12px;border-radius:6px}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b:nth-child(1){width:78%}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b:nth-child(2){width:46%}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b:nth-child(3){width:30%}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel i,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b{background:linear-gradient(90deg,var(--fj-chip) 25%,var(--fj-hover) 50%,var(--fj-chip) 75%);background-size:200% 100%;animation:fjShimmer 1.3s linear infinite}
@keyframes fjShimmer{from{background-position:200% 0}to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel i,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-skel b{animation:none}}

/* new decision makers at a job's company (js/decision.js dm.fresh): a red dot on its row and on its Decision makers tab */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dmnew{display:inline-block;width:9px;height:9px;border-radius:50%;background:#DC2626;margin-right:7px;vertical-align:2px;box-shadow:0 0 0 2px var(--fj-surface)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs .fj-dmnew{margin:0 0 0 6px;vertical-align:1px}
/* the job's buttons as one group (Optimise CV, Save, Apply): beside the tabs, or under them on the right */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dact{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-left:auto}
/* a job opened from an AI agent that the filters would hide (js/findjob.js fj.pin) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pin{display:inline-block;margin:3px 0 1px;padding:0 8px;border-radius:9999px;background:var(--warn-s);color:var(--warn);font-size:11.5px;font-weight:600;line-height:19px}

/* A phone (Max 2026-10-20: "Make it like real monile app UI now its confusing to look at on phone"), the same phone as app.html's
   top bar and tab bar. The page's h1 only repeats the top bar; the keyword chips are one row that scrolls sideways under the box
   (the box keeps its own line, so its words are never cut); the filters are one row that scrolls sideways; their menus open as
   sheets from the bottom; the list is the page itself (no box with its own scroll); a tapped job is a view of its own, pushed
   over the list, with Back to jobs at its top and Optimise CV, Save and Apply in a bar above the tab bar (js/findjob.js
   fjDetOpen). A computer is untouched. */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) button,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt{-webkit-tap-highlight-color:transparent}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop)>h1{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-view{gap:12px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn{height:44px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.sm{height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-more,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-clr{min-height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hbtn{height:40px;padding:0 14px;font-size:14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .rm-tip{position:relative}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .rm-tip::after{content:"";position:absolute;inset:-9px}
  /* the bar: the box, then the filters */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox{display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;column-gap:8px;flex:none;min-width:0;min-height:48px;padding:0 12px;border-radius:14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox>svg{grid-area:1/1;width:18px;height:18px;margin:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kws{display:contents}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox input{grid-area:1/2;flex:none;width:100%;min-width:0;height:48px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwl{grid-area:2/1/3/3;display:flex;flex-wrap:nowrap;gap:8px;margin:0 -12px;padding:0 12px 10px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwl::-webkit-scrollbar{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwl:empty{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw{height:38px;padding:0 3px 0 12px;gap:4px;font-size:14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw button{position:relative;width:34px;height:34px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw button::after{content:"";position:absolute;inset:-3px -3px -3px -6px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns{display:flex;flex-wrap:nowrap;align-items:center;gap:8px;margin:0 -16px;padding:2px 16px 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns::-webkit-scrollbar{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fbtns>*{flex:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fsep{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-advb{order:-1}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fb{height:40px;padding:0 10px 0 14px;font-size:15px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib{width:40px;height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-n,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ib .fj-n{font-size:12px}
  /* Run is the main action: at the right of its estimate, 44 px high */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px 12px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tools .fj-sp{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pst{grid-column:1/-1;flex:none;flex-wrap:nowrap;gap:8px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pst .fj-hbtn{margin-left:auto}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pst:empty{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est{display:block;grid-column:1;min-width:0;text-align:left}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est>span{white-space:normal}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tools>.fj-btn{grid-column:2}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-btn.fj-go{min-width:112px;font-size:15px}
  /* the menus under the filters: a sheet from the bottom over a dimmed page (the dimmed page closes it; so does Close) */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw{position:static}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw.on::before{content:"";position:fixed;inset:0;z-index:59;background:rgb(0 0 0 / .35)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw.on>.fj-dd{position:fixed;inset:auto 0 0 0;z-index:60;width:auto;max-height:74vh;max-height:74dvh;overflow-y:auto;overscroll-behavior:contain;padding:0 8px calc(12px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;background:var(--fj-surface);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 -10px 32px rgb(0 0 0 / .2)}
  html:has(:is(#sec-findjob,#sec-dm .fjx,#fj-pop):not(.hide) .fj-pw.on){overflow:hidden}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dh{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;height:56px;margin:0 -8px;padding:0 8px 0 20px;background:var(--fj-surface)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dh b{font-size:17px;line-height:24px;font-weight:700}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dx{width:40px;height:40px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--fj-chip);color:var(--fj-ink);cursor:pointer}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dx svg{width:16px;height:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw.on>.fj-dd .fj-scroll{max-height:none;overflow:visible}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw.on>.fj-dd .fj-dsrch{position:sticky;top:56px;z-index:2;margin:0 4px 6px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pw.on>.fj-dd .fj-ddf{padding:8px 4px 4px}
  /* options, the sheets' and the Advanced filters panel's: 48 px rows, 16 px text, 20 px ticks */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt{min-height:48px;padding:10px 12px;gap:12px;font-size:16px;line-height:22px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt.sub{padding-left:44px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt input[type=checkbox],:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-opt input[type=radio]{width:20px;height:20px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-oc{font-size:13px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-xp{width:44px;height:44px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch{height:48px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dsrch input{height:46px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ft select,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tsel{height:44px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-utabs button{min-height:44px;padding:10px 0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sech{min-height:44px}
  /* the list is the page: no box with its own scroll, edge to edge */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-two{display:block;margin:0 -16px;border-width:1px 0;border-radius:0;overflow:visible}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-list{height:auto;min-height:0;overflow:visible;border:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rows{flex:none;max-height:none;overflow:visible}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd{padding:12px 16px;gap:6px;row-gap:10px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{font-size:13px;line-height:18px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch{height:44px;border-radius:12px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lsrch input{height:42px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hb{height:40px;padding:0 8px 0 12px;font-size:14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-hi{width:40px;height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd select{height:40px;padding:0 0 0 4px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-live{top:var(--mbar-h)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row{grid-template-columns:44px minmax(0,1fr) 40px;gap:12px;padding:14px 8px 14px 16px;background:transparent}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row+.fj-row{border-top:1px solid var(--fj-line)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row:hover,:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row.sel{background:transparent}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row.was{background:var(--fj-tint)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row:active{background:var(--fj-hover)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .t{line-height:21px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row .a b{white-space:nowrap}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bm{width:40px;height:40px;margin-top:-6px}
  /* a tapped job: its own view over the list */
  #fj-view:not(.fj-push) .fj-two .fj-det{display:none}
  #fj-view.fj-push .fj-bar,#fj-view.fj-push .fj-tools,#fj-view.fj-push .fj-list{display:none}
  /* up under the top bar and down to the tab bar (main's own padding taken back), so the bar of buttons sits at the bottom */
  #fj-view.fj-push .fj-two{margin:-16px -16px -24px;border:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-det{display:flex;flex-direction:column;height:auto;min-height:0;overflow:visible}
  #fj-view.fj-push .fj-det{min-height:calc(100vh - var(--mbar-h) - var(--mtabs-h) - env(safe-area-inset-bottom));min-height:calc(100dvh - var(--mbar-h) - var(--mtabs-h) - env(safe-area-inset-bottom))}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback{position:sticky;top:var(--mbar-h);z-index:6;display:flex;align-items:center;height:48px;padding:0 8px;background:var(--fj-surface);border-bottom:1px solid var(--fj-line)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback .fj-btn{height:44px;padding:0 14px 0 6px;gap:2px;border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--fj-brand-d);font-size:16px;font-weight:600}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback .fj-btn:hover:not(:disabled){background:transparent}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dback .fj-btn svg{width:22px;height:22px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtop{display:contents}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtop>.fj-sp{display:none}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs{order:1;align-self:stretch;max-width:none;margin:0;padding:8px 16px;border-width:0 0 1px;border-radius:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dtabs button{min-height:44px;padding:10px 14px;font-size:15px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dbody{order:2;flex:1 0 auto;overflow:visible;padding:16px 16px 20px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dact{order:3;position:sticky;bottom:calc(var(--mtabs-h) + env(safe-area-inset-bottom));z-index:6;flex-wrap:nowrap;justify-content:stretch;gap:8px;margin:0;padding:10px 16px;background:var(--fj-surface);border-top:1px solid var(--fj-line)}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dact .fj-btn{flex:1 1 0;min-width:0;height:44px;padding:0 8px;gap:5px;font-size:14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dact .fj-btn.fj-ai{flex-grow:1.25}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dact .fj-btn[data-fjsave]{flex:0 0 auto;padding:0 14px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-jt{margin:14px 0 12px;font-size:22px;line-height:28px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-facts{margin:16px 0;padding-bottom:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about{gap:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-mcard{order:-1}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ahd h2{font-size:20px;line-height:28px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-co>.fj-h2{font-size:20px!important;line-height:28px!important}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dbody select{min-height:44px;font-size:16px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-dbody .co-btn{min-height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg{height:40px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-seg button{min-height:38px;padding:0 14px}
}

/* ── Jobs and companies (Max 2026-10-20, the sample he approved): one header and one tab bar on both tabs (js/findjob.js
   jcHead and jcTabs; js/decision.js draws them on the Companies tab), Track on jobs, the Find new jobs panel (the search
   rules), a company's jobs as one list, and a job over the page (#fj-pop). The header and the tabs use the app's tokens, so
   they look the same on either tab. ── */
.jc-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.jc-tt{flex:1;min-width:0;display:grid;gap:2px}
main .jc-head h1,#sec-dm .jc-head h1{margin:0;font-size:24px;line-height:32px;font-weight:700}
.jc-sub{display:flex;align-items:center;flex-wrap:wrap;gap:2px 6px;min-height:20px;font-size:13.5px;line-height:20px;color:var(--ink3)}
.jc-sub b{color:var(--ink2);font-weight:600}
.jc-sub .jc-chg{color:var(--warn);font-weight:600}
.jc-sub .jc-chg::before{content:"·";margin-right:6px;color:var(--ink3);font-weight:400}
.jc-go{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border:0;border-radius:12px;background:#16a34a;color:#fff;font:inherit;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer}
.jc-go:hover:not(:disabled){background:#15803d}.jc-go:disabled{opacity:.5;cursor:default}
.jc-go:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.jc-go svg{width:17px;height:17px;flex:none}
.jc-tabs{flex:1 0 100%;min-width:0;display:flex;gap:4px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--hover)}
.jc-t{flex:1 1 0;min-width:0;display:flex;align-items:center;border-radius:9px}
.jc-t.on{background:var(--surface);box-shadow:0 1px 3px rgb(0 0 0 / .14)}
.jc-t>[role="tab"]{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 2px 0 10px;border:0;background:none;color:var(--ink2);font:inherit;font-size:14.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.jc-t.on>[role="tab"]{color:var(--brand-d)}
.jc-t small{font-size:12.5px;font-weight:500;color:var(--ink3)}
.jc-t>[role="tab"]:focus-visible,.jc-fb:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
/* the filters' buttons lit a little, with a "!" (Max 2026-10-21: "Give exclaimation marks for the settings and lights up abit so
   that each setting is obviously clickablw"); the number of filters in use takes the "!"'s place */
.jc-fb{position:relative;flex:none;display:grid;place-items:center;width:36px;height:36px;margin-right:2px;padding:0;border:1px solid color-mix(in oklab,var(--brand) 35%,transparent);border-radius:9px;background:color-mix(in oklab,var(--brand) 12%,var(--surface));color:var(--brand-d);cursor:pointer;box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 8%,transparent)}
.jc-fb:hover{background:color-mix(in oklab,var(--brand) 22%,var(--surface))}
.jc-x{position:absolute;top:-6px;right:-6px;display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--warn);color:var(--surface);font-size:11px;line-height:1;font-weight:800;box-shadow:0 0 0 2px var(--surface)}
.jc-fb.on{color:var(--brand-d)}
.jc-fb svg{width:18px;height:18px}
.jc-n{position:absolute;top:-6px;right:-6px;box-shadow:0 0 0 2px var(--surface);min-width:16px;height:16px;padding:0 4px;border-radius:9999px;background:var(--brand);color:#fff;font-size:10px;line-height:16px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
#fj-view>.jc-head{margin-bottom:0}   /* the view's own gap spaces it */
/* none yet (js/findjob.js fjNoneView, js/decision.js view; Max 2026-10-21: "weird UI moments when there is no company/jobs
   listed"): one card the whole width, the same on both tabs */
#sec-findjob .jc-solo>.fj-pane,#sec-dm .jc-solo>.co-pane{border-radius:16px}
.jc-none{display:grid;justify-items:center;gap:14px;padding:40px 16px 52px;text-align:center}
.jc-none b{display:inline-flex;align-items:center;gap:4px;font-size:17px;line-height:24px;font-weight:700;color:var(--ink)}
.jc-none-ic{display:grid;place-items:center;width:64px;height:64px;border-radius:20px;background:var(--tint);color:var(--brand-d)}
.jc-none-ic svg{width:30px;height:30px}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){#sec-findjob .jc-none .fj-btn,#sec-dm .jc-none .co-btn{min-height:44px;padding:0 22px}}
/* Location in Find new jobs (js/findjob.js fjLocBox): a box like JobsDB's own, its places as plain rows under it */
:is(#sec-findjob,#sec-dm .fjx) .fj-locb{position:relative;display:grid}
:is(#sec-findjob,#sec-dm .fjx) .fj-loci{display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 12px;border:1px solid var(--fj-line);border-radius:12px;background:var(--fj-surface);cursor:text}
:is(#sec-findjob,#sec-dm .fjx) .fj-locb.on .fj-loci,:is(#sec-findjob,#sec-dm .fjx) .fj-loci:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in oklab,var(--brand) 18%,transparent)}
:is(#sec-findjob,#sec-dm .fjx) .fj-loci>.fj-i{width:18px;height:18px;flex:none;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx) .fj-loci input{flex:1;min-width:0;height:100%;border:0;outline:0;background:none;font:inherit;font-size:15px;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx) .fj-locx{display:grid;place-items:center;width:34px;height:34px;flex:none;border:0;border-radius:8px;background:none;color:var(--fj-ink2);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx) .fj-locx:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx) .fj-locx .fj-i{width:16px;height:16px}
/* the places float over the panel (as JobsDB's), so nothing under the box moves when they close */
:is(#sec-findjob,#sec-dm .fjx) .fj-locl{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:5;display:grid;padding:4px;max-height:min(320px,50vh);overflow:auto;overscroll-behavior:contain;border:1px solid var(--fj-line);border-radius:12px;background:var(--fj-surface);box-shadow:0 8px 24px rgba(0,0,0,.14)}
:is(#sec-findjob,#sec-dm .fjx) .fj-loci input::placeholder{color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx) .fj-loco{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border:0;border-radius:10px;background:none;color:var(--fj-ink);font:inherit;font-size:15px;text-align:left;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx) .fj-loco:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx) .fj-loco.on,:is(#sec-findjob,#sec-dm .fjx) .fj-loco:focus-visible{background:var(--fj-hover);outline:2px solid var(--fj-brand);outline-offset:-2px}
:is(#sec-findjob,#sec-dm .fjx) .fj-loco .fj-i{width:18px;height:18px;flex:none;color:var(--fj-ink3)}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){:is(#sec-findjob,#sec-dm .fjx) .fj-loci{height:48px}:is(#sec-findjob,#sec-dm .fjx) .fj-loci input{font-size:16px}:is(#sec-findjob,#sec-dm .fjx) .fj-locx{width:40px;height:40px}}
.jc-solo{display:grid;gap:12px}
.jc-solo .jc-tabs{max-width:420px}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  main .jc-head h1,#sec-dm .jc-head h1{display:none}
  .jc-head{flex-wrap:nowrap;margin-bottom:12px}
  .jc-sub{font-size:13px;line-height:18px}
  .jc-go{height:40px;padding:0 14px;font-size:14px}
  .jc-t>[role="tab"]{height:40px}
  .jc-fb{width:40px;height:40px}
}
/* Track on a job (it is the job's save) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-row{grid-template-columns:40px minmax(0,1fr) auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk{display:inline-flex;align-items:center;gap:5px;align-self:start;height:28px;padding:0 10px;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);color:var(--fj-ink);font-size:12.5px;font-weight:500;line-height:16px;white-space:nowrap;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk[aria-disabled=true]{opacity:.45;cursor:default}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk svg{width:14px;height:14px;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk.on{border-color:transparent;background:var(--fj-tint);color:var(--fj-brand-d)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk.lg{height:32px;padding:0 12px;border-radius:10px;font-size:13px;align-self:center}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk:focus-visible{outline:2px solid var(--fj-brand);outline-offset:2px}
/* Track and Tracking the same width, so a title doesn't wrap again when it is pressed */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-trk{justify-content:center;min-width:86px}
/* Sort's arrow, as on Companies: down, highest first; up, lowest first */
:is(#sec-findjob,#sec-dm .fjx) .fj-dirb{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;padding:0;border:1px solid var(--fj-line);border-radius:9999px;background:var(--fj-surface);color:var(--fj-ink2,var(--ink2));cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx) .fj-dirb:hover{background:var(--fj-hover);color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx) .fj-dirb svg{width:16px;height:16px}
:is(#sec-findjob,#sec-dm .fjx) .fj-dirb:focus-visible{outline:2px solid var(--fj-brand);outline-offset:2px}
/* the header's button and the tabs' colours over the section's button reset (color:inherit) */
:is(#sec-findjob,#sec-dm .fjx) .jc-go{color:#fff}
:is(#sec-findjob,#sec-dm .fjx) .jc-t>[role="tab"]{color:var(--ink2)}:is(#sec-findjob,#sec-dm .fjx) .jc-fb{color:var(--brand-d)}
:is(#sec-findjob,#sec-dm .fjx) .jc-t.on>[role="tab"],:is(#sec-findjob,#sec-dm .fjx) .jc-fb.on{color:var(--brand-d)}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) :is(.fj-row,.fj-dact) .fj-trk{height:40px}
  :is(#sec-findjob,#sec-dm .fjx) .fj-dirb{width:40px;height:40px}
  html.fj-pop-on #toast{top:12px;bottom:auto;pointer-events:none}
}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-tn{margin-left:6px;font-size:13px;font-weight:500;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lhd .fj-cnt{flex:none}
/* Find new jobs: the last search, the groups of rules, the roles box, the price and Run */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-grp{margin:20px 0 0;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-last{display:grid;justify-items:start;gap:4px;margin:14px 0 0;padding:12px 14px;border:1px solid var(--fj-line);border-radius:12px;background:var(--fj-bg);font-size:13.5px;line-height:20px;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-last b{color:var(--fj-ink);font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-chg{color:var(--fj-warn);font-weight:500}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lnk{min-height:32px;padding:0;border:0;background:none;color:var(--fj-brand-d);font:inherit;font-size:13px;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-sbox{flex:none;min-width:0;border-radius:12px;padding:6px 8px 6px 12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-kws{gap:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-kwl{display:contents}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-kw{height:30px;font-size:13.5px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-sbox input{flex:1 0 160px;height:30px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rft{gap:12px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rst{flex:1;min-width:0;display:flex;align-items:center}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rft .fj-est{min-width:0;justify-content:flex-start;text-align:left;flex-wrap:wrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rft .fj-est>span{white-space:normal}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rft .fj-pst{flex-wrap:wrap}
/* a job's whole ad: headings, paragraphs and bullet points */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ad h3:first-child{margin-top:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-ad ul{margin:0 0 8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-about.fj-one{grid-template-columns:minmax(0,1fr)}
/* a company's jobs: from your searches, more at the company, its hiring posts */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjs{display:grid;gap:8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjh{display:flex;align-items:baseline;gap:6px;padding:6px 2px 2px;font-size:13px;line-height:18px;font-weight:600;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjh:not(:first-child){padding-top:14px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjh span{font-weight:500;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;border:1px solid var(--fj-line);border-radius:12px;background:var(--fj-surface);color:var(--fj-ink);font:inherit;text-align:left;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr:hover{background:var(--fj-hover)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr[aria-current]{border-color:var(--fj-brand)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr:focus-visible{outline:2px solid var(--fj-brand);outline-offset:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr>span:first-child{flex:1;min-width:0;display:grid;gap:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr>span:first-child>b{font-size:15px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjr small{font-size:12.5px;line-height:17px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjgo{display:inline-flex;align-items:center;gap:2px;flex:none;color:var(--fj-brand-d);font-size:13px;font-weight:500;white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-cjgo svg{width:14px;height:14px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-new{color:var(--fj-good)}
/* a job over the page */
#fj-pop .fj-pbk{position:fixed;inset:0;z-index:64;background:rgb(0 0 0 / .4)}
#fj-pop .fj-pcard{position:fixed;z-index:65;left:50%;top:50%;transform:translate(-50%,-50%);width:min(940px,calc(100vw - 48px));max-height:min(88vh,960px);display:flex;flex-direction:column;background:var(--fj-surface);border:1px solid var(--fj-line);border-radius:16px;box-shadow:var(--pop);overflow:hidden;color:var(--fj-ink)}
#fj-pop .fj-phd{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 20px;border-bottom:1px solid var(--fj-line)}
#fj-pop .fj-phn{flex:1;min-width:0;display:grid}
#fj-pop .fj-phn b{font-size:16px;line-height:22px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fj-pop .fj-phn small{font-size:13px;line-height:18px;color:var(--fj-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#fj-pop .fj-pbody{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding:20px 24px 24px}
#fj-pop .fj-pact{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 14px}
#fj-pop .fj-pbody .fj-jt{margin-top:0}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #fj-pop .fj-pcard{inset:0;left:0;top:0;transform:none;width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  #fj-pop .fj-phd{padding-left:16px}
  #fj-pop .fj-pbody{padding:16px 16px 28px}
  #fj-pop .fj-pact .fj-btn,#fj-pop .fj-pact .fj-trk{min-height:40px}
}
/* the header's line reads as one line of text (its (i) stays at its end, also when it wraps) */
.jc-sub{display:block}
.jc-sub>span{margin-right:4px}
.jc-sub .rm-tip{vertical-align:-3px}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  /* Find new jobs: the roles wrap in their box (the old bar's one sideways row was the list's) */
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-sbox{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:48px;padding:8px 10px 8px 12px}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-sbox>svg{margin:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-kws{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1;min-width:0}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-kwl{display:contents}
  :is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-sbox input{flex:1 0 160px;width:auto;height:36px}
}
/* Nearest to me: where the distances are from, and the offices still to find (js/findjob.js fjNearNote) */
:is(#sec-findjob,#sec-dm .fjx) .fj-near{display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid var(--fj-line);font-size:13px;color:var(--fj-ink3);min-width:0}
:is(#sec-findjob,#sec-dm .fjx) .fj-nearf{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#sec-findjob,#sec-dm .fjx) .fj-nearf b{font-weight:600;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx) .fj-nearw{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
/* Possible matches under their own fold (Max 2026-10-23) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fold{display:flex;align-items:center;gap:8px;width:100%;min-height:44px;padding:10px 16px;border:0;border-top:1px solid var(--fj-line,var(--line));border-bottom:1px solid var(--fj-line,var(--line));background:var(--fj-hover,var(--hover));color:var(--fj-ink2,var(--ink2));font:inherit;font-size:13px;font-weight:500;text-align:left;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fold svg{width:16px;height:16px;margin-left:auto;flex:none}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-fold-n{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:20px;padding:0 6px;border-radius:999px;background:var(--fj-tint,var(--chip));color:var(--fj-ink2,var(--ink2));font-size:12px}
/* Spend at most (Max 2026-10-23) */
/* the Run's Budget: its figure, the slider (a 40 px tall target), its ends */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bud{display:grid;gap:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bud b{font-size:15px;font-weight:600;color:var(--fj-ink)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-bud input{width:100%;height:40px;margin:0;accent-color:var(--fj-brand);cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-budr{display:flex;justify-content:space-between;font-size:12px;color:var(--fj-ink3)}
/* the Run's Match: 90% marked red under the slider; past it the figure and the slider turn red (a strict Match finds fewer
   jobs; Max 2026-10-23, then "i do not need extra small bar underneath") */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pct .fj-budr{position:relative}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pct .fj-pcts{position:absolute;top:0;transform:translateX(-50%);color:var(--bad);font-weight:600}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pct.strict b{color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pct.strict input{accent-color:var(--bad)}
/* What I am looking for (fjWantBox): a title that isn't a real one red, with real ones to swap in; its fixed choices */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-sbox.bad{border-color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw.bad{background:var(--bad-s);color:var(--bad);border-color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kw.chk{opacity:.6}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwbad{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:13px;line-height:18px;color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwfix{min-height:40px;padding:0 12px;border:1px solid var(--fj-line2);border-radius:999px;background:var(--fj-surface);color:var(--fj-ink);font:inherit;font-size:13px;cursor:pointer}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-kwfix:hover{border-color:var(--fj-brand)}
/* Find new jobs: Industry ticked (up to 5) in a box of its own that scrolls, and the agencies' tick box (js/findjob.js fjWantBox) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-indb{display:grid;gap:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-side .fj-indb .fj-dsrch{margin:0}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-indl{max-height:252px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--fj-line);border-radius:10px;padding:4px;background:var(--fj-surface)}
/* All industries / All levels on top of their lists; Level's list in two columns where there is room (Max 2026-10-24) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) :is(.fj-indl,.fj-lvll) .fj-opt.fj-all{font-weight:600;border-bottom:1px solid var(--fj-line);border-radius:6px 6px 0 0;margin-bottom:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) :is(.fj-lvll,.fj-srcl){border:1px solid var(--fj-line);border-radius:10px;padding:4px;background:var(--fj-surface);display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lvll .fj-all{grid-column:1 / -1}
@media (max-width:520px){:is(#sec-findjob,#sec-dm .fjx,#fj-pop) :is(.fj-lvll,.fj-srcl){grid-template-columns:1fr}}
/* Where to look: none ticked, the box goes red (Run waits) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-srcl.bad{border-color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-indf{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:32px;font-size:13px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-agt{display:flex;align-items:center;gap:2px;margin:0 -8px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-negr{display:flex;align-items:center;gap:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-rules .fj-negr .fj-opt{flex:0 1 auto}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-agt .fj-opt{min-height:40px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-pctn{margin-top:2px;font-size:12px;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lim{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lim input{width:140px;height:40px;padding:0 12px;border:1px solid var(--fj-line2);border-radius:8px;background:var(--fj-surface);color:var(--fj-ink);font:inherit;font-size:15px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-lim input:focus{outline:2px solid var(--fj-brand);outline-offset:1px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est .fj-bad{color:var(--bad)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-est .fj-bad b{color:var(--bad)}
/* the Your match card: What I am looking for, checked (Max 2026-10-23) */
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-want{display:grid;gap:6px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wl{display:flex;align-items:flex-start;gap:8px;font-size:13px;line-height:19px;color:var(--fj-ink2)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wl svg{width:16px;height:16px;flex:none;margin-top:2px}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wl.y svg{color:var(--fj-good)}:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wl.n svg{color:var(--bad)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wd{width:16px;flex:none;text-align:center;color:var(--fj-ink3)}
:is(#sec-findjob,#sec-dm .fjx,#fj-pop) .fj-wl.u{color:var(--fj-ink3)}