/* The Decision makers page (#sec-dm, js/decision.js: the companies of the jobs pulled in Find Job, with their decision
   makers, company page and jobs) and its decision-maker block in Find Job's Decision makers tab (#sec-findjob .dmk).
   Scoped to :is(#sec-dm,#sec-findjob .dmk,#co-pop); looks like Find Job's list and detail (same sizes), colours from css/app.css's
   tokens so it follows light and dark. */
:is(#sec-dm,#sec-findjob .dmk,#co-pop){font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) h1{margin-bottom:16px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) svg.co-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-sp{flex:1}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-pane{background:var(--surface);border:1px solid var(--line);border-radius:16px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-empty{padding:40px 16px;text-align:center;color:var(--ink3);font-size:14px;display:grid;justify-items:center;gap:12px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-empty b{color:var(--ink);font-size:16px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-empty b .rm-tip{margin-left:2px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-weight:500;font-size:14px;white-space:nowrap;cursor:pointer;text-decoration:none}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn:hover:not(:disabled){background:var(--hover)}:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn:disabled{opacity:.45;cursor:not-allowed}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn.pri:hover:not(:disabled){background:var(--brand-h)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn.sm{height:32px;padding:0 12px;font-size:13px}:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn svg{width:15px;height:15px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-two{display:grid;grid-template-columns:420px minmax(0,1fr);background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-list,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-det{display:flex;flex-direction:column;height:min(820px,calc(100vh - 120px));min-height:520px;overflow:hidden;min-width:0}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-list{border-right:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-lhd{display:flex;align-items:center;gap:8px;padding:12px 12px 8px 16px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-srch{flex:1;min-width:0;display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border:1px solid var(--line2);border-radius:10px;background:var(--surface);color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-srch:focus-within{border-color:var(--brand)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-srch input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:14px;color:var(--ink)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-cnt{display:flex;align-items:center;gap:8px;min-height:32px;padding:0 12px 8px 16px;font-size:12px;line-height:16px;color:var(--ink3);border-bottom:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-cnt>span:first-child{flex:none;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-reading{display:inline-flex;align-items:center;gap:8px;color:var(--ink2);font-size:13px}
/* Reading N companies takes its own line under the count, so the sort and its arrow always fit the list (they ran off a phone) */
#sec-dm .co-cnt{flex-wrap:wrap;row-gap:6px}
#sec-dm .co-cnt .co-reading{order:9;flex-basis:100%;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-rows{flex:1;overflow-y:auto}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;padding:14px 16px;cursor:pointer;align-items:start}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row:hover{background:var(--hover)}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row.sel{background:var(--tint)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row .t,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job .t{font-size:16px;font-weight:500;line-height:20px;overflow-wrap:anywhere}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row .c,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job .c{font-size:14px;line-height:19px;color:var(--ink3);margin-top:2px;overflow-wrap:anywhere}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-row .a,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job .a{font-size:12px;line-height:18px;color:var(--ink3);margin-top:3px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-new{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;background:var(--good-s);color:var(--good);font-size:12px;font-weight:600;white-space:nowrap}
/* A company's real logo on white; with none, a plain building (never made-up initials). */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo{position:relative;overflow:hidden;width:40px;height:40px;border-radius:8px;display:grid;place-items:center;flex:none;background:#fff;border:1px solid var(--line);color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo.none{background:var(--chip);border-color:transparent}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo svg.co-i{width:20px;height:20px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo.lg{width:48px;height:48px}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo.lg svg.co-i{width:24px;height:24px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop{display:flex;align-items:center;gap:10px;padding:0 20px;border-bottom:1px solid var(--line);min-height:56px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-back{display:none;align-items:center;gap:4px;border:0;background:transparent;padding:6px 8px 6px 2px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink2);cursor:pointer;min-width:0;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-back:hover{background:var(--hover)}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-back.show{display:inline-flex}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dbody{flex:1;overflow-y:auto;padding:20px}
/* a company's tabs, as Find Job's job tabs: Decision makers, Company, Jobs */
/* the same tab look as a job's in Find Job: a grey track, the open one raised on it */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs{display:flex;gap:4px;align-self:center;min-width:0;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:4px;border-radius:12px;background:var(--hover);border:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs::-webkit-scrollbar{display:none}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button{display:inline-flex;align-items:center;gap:6px;flex:none;border:0;background:transparent;font-size:15px;line-height:20px;font-weight:600;color:var(--ink2);padding:8px 14px;border-radius:9px;cursor:pointer;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button:hover{color:var(--ink);background:var(--chip)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button.on{background:var(--surface);color:var(--brand-d);box-shadow:0 1px 3px rgb(0 0 0 / .14)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
@media (max-width:640px){:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button{font-size:14px;padding:7px 10px}}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-tn{font-size:13px;color:var(--ink3);font-variant-numeric:tabular-nums}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs .co-new{height:20px;font-size:11.5px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-tabb>.co-h2:first-child{margin-top:22px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-tabb>.co-jobs:first-child{margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-tabb>.co-state:first-child{margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-head{display:flex;gap:12px;align-items:center}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-name{font-size:18px;font-weight:500;line-height:24px}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-tag{font-size:14px;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-h2{margin:22px 0 0;font-size:20px;line-height:28px;font-weight:700}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-state{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 0;font-size:14px;line-height:20px;color:var(--ink2)}
/* a page's price beside its Read button (companies.js about: one read before, not opened by this person yet) */
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-price{font-size:13px;color:var(--ink2);font-variant-numeric:tabular-nums}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-spin{width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
@media (prefers-reduced-motion:reduce){:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-spin{animation:none}}
/* the full read (Max 2026-10-20): Reading on the row until it is done (in the signal badge's place), and a status line in
   the open company; after the spinner's own size above, so the small one wins */
#sec-dm .co-row .co-rd{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--ink2);font-weight:500;white-space:nowrap}
#sec-dm .co-row .co-rd .co-spin{width:11px;height:11px}
#sec-dm .co-row .co-skp{display:inline-block;margin-left:8px;padding:0 7px;border-radius:999px;background:var(--line);color:var(--ink2);font-size:11.5px;font-weight:600;line-height:18px;white-space:nowrap}
#sec-dm .co-rdn{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:var(--chip);color:var(--ink2);font-size:13px;line-height:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-tl{margin:10px 0 0;font-size:16px;line-height:24px;font-weight:500}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-about{margin-top:8px;font-size:14px;line-height:20px;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-dm,#sec-findjob .dmk,#co-pop) .co-about.open{display:block;-webkit-line-clamp:unset;line-clamp:none}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-more{border:0;background:transparent;padding:2px 0;margin-top:4px;color:var(--brand-d);font-size:14px;font-weight:500;cursor:pointer}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-more:hover{text-decoration:underline}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 12px;margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts small{display:block;font-size:12px;color:var(--ink3)}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts span{font-size:14px;font-weight:500;overflow-wrap:anywhere}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts a{font-size:14px;font-weight:500;color:var(--brand-d);text-decoration:none;overflow-wrap:anywhere}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts a:hover{text-decoration:underline}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jhd{display:flex;align-items:center;gap:8px;margin-top:6px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jhd .co-h2{margin-top:22px}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jhd .co-jn,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jhd .co-new{margin-top:22px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jn{font-size:14px;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jobs{margin-top:8px;border:1px solid var(--line);border-radius:12px;overflow:hidden}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job{display:grid;grid-template-columns:minmax(0,1fr) auto 16px;gap:10px;align-items:center;padding:12px 14px;cursor:pointer;border-top:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job:first-child{border-top:0}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job:hover{background:var(--hover)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-job>svg.co-i{color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jt{margin:18px 0 12px;font-size:24px;font-weight:700;line-height:32px;text-wrap:balance}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-chips{display:flex;flex-wrap:wrap;gap:6px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:9999px;background:var(--chip);font-size:13px;font-weight:500;line-height:18px;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-chip.cy{background:var(--tint);color:var(--brand-d)}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-chip.new{background:var(--good-s);color:var(--good)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jfacts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:18px 0 0;padding-bottom:18px;border-bottom:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jfacts div{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:20px;font-weight:600}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jfacts svg{width:20px;height:20px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-full{margin-top:10px;white-space:pre-line;font-size:14px;line-height:20px;overflow-wrap:anywhere}
@media (max-width:1000px){
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-two{grid-template-columns:1fr}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-list,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-det{height:auto;min-height:0;border-right:0}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-two.sel .co-list,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-two:not(.sel) .co-det{display:none}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-back{display:inline-flex}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop:has(.co-dtabs){flex-wrap:wrap;row-gap:0;padding-top:6px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop:has(.co-dtabs) .co-back,:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop:has(.co-dtabs) .co-dli{height:36px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs{order:4;flex:1 0 100%;gap:20px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtabs button{height:44px;font-size:15px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dbody{padding:16px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-facts{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-jfacts{grid-template-columns:1fr}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop{padding:0 12px}}
/* the detail's top bar only when it holds something (a link, or Back at phone width) */
@media (min-width:1001px){:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-dtop:not(:has(a)):not(:has(.co-back.show)):not(:has(.co-dtabs)){display:none}}
/* Decision makers */
/* the Department picker over the block's button (js/decision.js deptPick) */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept label{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept label>span{font-size:13px;font-weight:600;color:var(--ink2);flex:none}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept select{min-width:0;max-width:100%;height:32px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:500;padding:0 8px 0 12px;cursor:pointer;text-overflow:ellipsis}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept select:hover{background:var(--hover)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept select.on{border-color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* what a department shows sits in the (i) after its label (RM.tip) */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept label>span{display:inline-flex;align-items:center;gap:2px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-dept+.dm-act{margin-top:12px}
/* everyone found, narrowed by the search that found them (Max 2026-10-17: "the previous ones should not be wiped out") */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip{height:32px;padding:0 12px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;font-weight:500;display:inline-flex;align-items:center;gap:6px;cursor:pointer;max-width:100%}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip span{color:var(--ink3);font-weight:600}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip:hover{background:var(--hover)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip.on{border-color:var(--brand);color:var(--brand-d);background:color-mix(in oklab,var(--brand) 12%,var(--surface))}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip.on span{color:var(--brand-d)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-chip:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-today{font-size:12px;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats>div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:2px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats small{font-size:12px;color:var(--ink3)}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats b{font-size:28px;line-height:36px;font-weight:700;font-variant-numeric:tabular-nums}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats span{font-size:14px;line-height:36px;font-weight:500}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-nums{color:var(--ink2);font-weight:500}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .co-btn .co-spin{width:12px;height:12px}
@media (max-width:480px){:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats{grid-template-columns:1fr 1fr}:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-stats>div:last-child{grid-column:1/-1}}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-read{margin-top:8px;font-size:12px;color:var(--ink3)}
/* a search that found nobody: its note, then the company's own people (js/decision.js staffOf), then the other searches' */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-none{line-height:20px}
/* a company whose decision makers came in while elsewhere (js/decision.js dm.fresh): red until seen */
#sec-dm .dm-fresh{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:9999px;background:#DC2626;color:#fff;font-size:12px;font-weight:700;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-oth{margin:24px 0 0;font-size:15px;line-height:20px;font-weight:700;color:var(--ink)}
/* The people as RecruiterBee's result list (Max 2026-10-14: "i want people card of DMs to a card as we use on recruiterbee
   design"): a tick, the photo (initials without one), the name with a small LinkedIn link, the email and phone icons and the
   tags; title · company · place; one grey line; Connect on the right, grey and plain (Max: "non colour clean svg gray
   theme"). Every state of that button is as wide, so nothing moves when it changes. The rows fold under the name when the
   block itself is narrow (Find Job's tab, a phone), so they follow the block's width, not the window's. */
:is(#sec-dm,#sec-findjob) .dmk{container-type:inline-size}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-list{margin-top:22px;border:1px solid var(--line);border-radius:16px;padding:2px 8px 6px;background:var(--surface)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bhead{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px 4px 2px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-selall{display:inline-flex;align-items:center;gap:12px;min-height:32px;border:0;background:transparent;padding:0 6px 0 0;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--ink3);cursor:pointer}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-selall:hover{color:var(--ink2)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bsel{margin-left:auto;display:inline-flex;flex-wrap:wrap;gap:6px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-vh{visibility:hidden}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-olim{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-height:26px;padding:0 4px 8px;font-size:12px;line-height:18px;color:var(--ink3);border-bottom:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-olim .dm-conn{height:24px;min-width:0;font-size:12px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-q{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);font-weight:500;font-variant-numeric:tabular-nums}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .dm-q .co-spin{width:11px;height:11px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-gl{display:flex;align-items:baseline;gap:6px;padding:14px 4px 4px;font-size:12px;line-height:16px;font-weight:600;color:var(--ink2)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-gl span{font-weight:500;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bl{display:grid;grid-template-columns:16px 40px minmax(0,1fr) auto;gap:12px;align-items:center;padding:9px 6px;border-top:1px solid var(--line)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-gl+.dm-bl{border-top:0}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bl:hover{background:var(--hover)}
/* the tick: a plain grey box, dark once ticked (as RecruiterBee's), half for "some" on Select all */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pick{width:16px;height:32px;border:0;background:transparent;padding:0;display:grid;place-items:center;cursor:pointer}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-box{width:16px;height:16px;flex:none;border-radius:4px;border:1.5px solid var(--ink3);background:var(--surface);display:grid;place-items:center}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-box svg.co-i{display:none;width:12px;height:12px;stroke-width:3;color:var(--surface)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) [aria-checked="true"] .dm-box,:is(#sec-dm,#sec-findjob .dmk,#co-pop) [aria-checked="mixed"] .dm-box{background:var(--ink);border-color:var(--ink)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) [aria-checked="true"] .dm-box svg.co-i:first-child,:is(#sec-dm,#sec-findjob .dmk,#co-pop) [aria-checked="mixed"] .dm-box svg.co-i:last-child{display:block}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) :is(.dm-pick,.dm-selall):focus-visible{outline:0}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) :is(.dm-pick,.dm-selall):focus-visible .dm-box{outline:2px solid var(--brand);outline-offset:2px}
/* the photo (a button that opens the full card), initials under it for when there is none or its link expired */
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-av{position:relative;width:40px;height:40px;flex:none;border-radius:50%;overflow:hidden;display:grid;place-items:center;border:0;padding:0;background:var(--chip);color:var(--ink2);font-size:13px;font-weight:700;letter-spacing:.02em}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) button.dm-av{cursor:pointer;transition:box-shadow .15s}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) button.dm-av:hover{box-shadow:0 0 0 3px var(--line2)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-blm{min-width:0;display:flex;flex-direction:column;gap:1px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pname{display:flex;flex-wrap:wrap;align-items:center;gap:3px 6px;min-width:0}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnm{display:inline-flex;align-items:center;gap:5px;min-width:0;max-width:100%}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnbtn{min-width:0;border:0;background:transparent;padding:0;font-size:15px;line-height:22px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnbtn:hover{text-decoration:underline}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnli{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:5px;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnli:hover{color:var(--ink);background:var(--chip)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-pnli svg.co-i{width:13px;height:13px;stroke-width:2}
/* an email or phone: grey to look it up, tinted once found (a press copies it) */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ci{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink3);padding:0;cursor:pointer}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ci svg.co-i{width:12px;height:12px;stroke-width:2}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ci:hover:not(:disabled){background:var(--hover);color:var(--ink2);border-color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ci.got{color:var(--brand-d);background:var(--tint);border-color:transparent;cursor:copy}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ci:disabled{opacity:.45;cursor:not-allowed}
:is(#sec-dm,#sec-findjob .dmk,#co-pop,#sec-agent .ag-hsd,#sec-findjob .fjhs) .dm-ci .co-spin{width:10px;height:10px}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-tg{flex:none;font-size:10.5px;line-height:16px;font-weight:600;color:var(--ink2);background:var(--chip);border-radius:6px;padding:1px 7px;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-tg.ok{color:var(--good);background:var(--good-s)}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-tg.warn{color:var(--warn);background:var(--warn-s)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-ptitle{font-size:13px;line-height:18px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-blwhy{font-size:12.5px;line-height:18px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-marks{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* Connect and its states (Queued, Invited, Message, Messaged, Sending): one width for all */
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:108px;height:30px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink2);padding:0 12px;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none;font-variant-numeric:tabular-nums}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn svg.co-i{width:14px;height:14px;stroke-width:2;color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn:hover:not(:disabled):not([aria-disabled="true"]){background:var(--hover);border-color:var(--ink3)}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn:disabled,:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn[aria-disabled="true"]{cursor:default;background:var(--chip);border-color:transparent;color:var(--ink3)}
/* Tracking (a person tracked: Post tracker): a status, so darker than a button that can't be pressed */
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn.dm-trk.on{color:var(--ink2)}
:is(#sec-dm,#sec-findjob .dmk,#dm-side) .dm-conn .co-spin{width:12px;height:12px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bulk{min-width:124px}
/* folded under the name below 640 px (Track and Connect side by side need the room) */
@container (max-width:640px){
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bl{grid-template-columns:16px 40px minmax(0,1fr);row-gap:8px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-marks{grid-column:3}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-marks .dm-conn{min-width:96px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bulk{min-width:0;flex:1 1 0;height:40px}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-bsel{flex:1 0 100%;margin-left:0}
  :is(#sec-dm,#sec-findjob .dmk,#co-pop) .dm-vh{visibility:visible}
}
/* a very narrow block (Find Job's panel on a small laptop): Track and Connect share the row, words only */
@container (max-width:320px){
  :is(#sec-dm,#sec-findjob .dmk) .dm-marks{flex-wrap:nowrap}
  :is(#sec-dm,#sec-findjob .dmk) .dm-marks .dm-conn{min-width:0;flex:1 1 0;padding:0 8px}
  :is(#sec-dm,#sec-findjob .dmk) .dm-marks .dm-conn svg.co-i{display:none}
}
/* The side panel (js/card.js): the full card or the message composer, on the right; the whole screen at phone width */
html.dms-on{overflow:hidden}
html.dms-on #toast{bottom:76px}   /* above the composer's Send, not on it */
#dm-side{position:fixed;inset:0;z-index:40;font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink)}
#dm-side svg.co-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#dm-side .co-spin{width:14px;height:14px;flex:none;border-radius:50%;border:1.5px solid var(--brand);border-top-color:transparent;animation:spin .8s linear infinite}
#dm-side .dms-bg{position:absolute;inset:0;background:rgb(0 0 0 / .4)}
#dm-side .dms-p{position:absolute;top:0;right:0;bottom:0;width:min(560px,100%);display:flex;flex-direction:column;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--pop);animation:dms-in .2s ease-out}
@keyframes dms-in{from{transform:translateX(32px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){#dm-side .dms-p,#dm-side .co-spin{animation:none}}
#dm-side .dms-x{position:absolute;top:12px;right:12px;z-index:2;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink2);box-shadow:var(--soft);cursor:pointer}
#dm-side .dms-x:hover{background:var(--hover);color:var(--ink)}
#dm-side .dms-b{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
#dm-side .dms-cover{height:92px;background:linear-gradient(135deg,var(--chip),var(--hover))}
#dm-side .dms-hd{padding:0 24px 18px;border-bottom:1px solid var(--line)}
#dm-side .dm-av.lg{width:92px;height:92px;margin-top:-46px;font-size:28px;border:4px solid var(--surface);box-sizing:content-box}
#dm-side .dm-av.xs{width:22px;height:22px;font-size:9px}
#dm-side .dms-nm{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
#dm-side h2{font-size:20px;line-height:26px;font-weight:700;margin:0;overflow-wrap:anywhere}
#dm-side .dms-hl{margin-top:4px;font-size:14px;line-height:20px;color:var(--ink2);overflow-wrap:anywhere}
#dm-side .dms-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:13px;line-height:18px;color:var(--ink3)}
#dm-side .dms-meta>span{display:inline-flex;align-items:center;gap:4px;min-width:0}
#dm-side .dms-meta>span svg.co-i{width:14px;height:14px}
#dm-side .dms-li{margin-left:auto;min-width:0}
#dm-side .dms-acts{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px}
#dm-side .dms-acts .dm-conn{height:34px;min-width:124px;font-size:13px}
#dm-side .dms-note{margin-top:8px;font-size:12.5px;line-height:18px;color:var(--ink3);overflow-wrap:anywhere}
#dm-side .dms-ld{display:flex;align-items:center;gap:8px}
#dm-side .dms-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
#dm-side .dms-sec{padding:20px 24px 0}
#dm-side .dms-sec h3{margin:0 0 10px;font-size:11px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
#dm-side .dms-sec h3 span{font-weight:500;margin-left:2px}
#dm-side .dms-ct{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px 10px;font-size:14px;line-height:20px}
#dm-side .dms-cl{color:var(--ink3);font-size:13px;padding-top:3px}
#dm-side .dms-cv{display:flex;flex-direction:column;gap:6px;min-width:0}
#dm-side .dms-cr{display:flex;align-items:center;gap:8px;min-width:0;min-height:26px}
#dm-side .dms-cp{min-width:0;border:0;background:transparent;padding:0;color:var(--brand-d);font-weight:500;text-align:left;cursor:copy;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-side .dms-cp:hover,#dm-side .dms-tel:hover{text-decoration:underline}
#dm-side .dms-tel{color:var(--brand-d);font-weight:500;text-decoration:none;white-space:nowrap}
#dm-side .dms-ms{flex:none;font-size:11px;line-height:16px;font-weight:600;border-radius:9999px;padding:1px 8px;color:var(--warn);background:var(--warn-s)}
#dm-side .dms-ms.ok{color:var(--good);background:var(--good-s)}
#dm-side .dms-ico{flex:none;width:26px;height:26px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:var(--ink3);cursor:pointer}
#dm-side .dms-ico:hover{background:var(--hover);color:var(--ink2)}
#dm-side .dms-ico svg.co-i{width:14px;height:14px}
#dm-side .dms-none{color:var(--ink3);padding-top:3px;font-size:13px}
#dm-side .dms-nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#dm-side .dms-nums>div{border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
#dm-side .dms-nums small{display:block;font-size:12px;line-height:16px;color:var(--ink3)}
#dm-side .dms-nums b{display:block;font-size:20px;line-height:28px;font-weight:700;font-variant-numeric:tabular-nums}
#dm-side .dms-about{font-size:14px;line-height:20px;white-space:pre-line;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
#dm-side .dms-about.open{display:block;-webkit-line-clamp:unset;line-clamp:none}
#dm-side .dms-more{border:0;background:transparent;padding:2px 0;margin-top:4px;color:var(--brand-d);font-size:13px;font-weight:500;cursor:pointer}
#dm-side .dms-more:hover{text-decoration:underline}
/* experience and education as a timeline: the company's logo (or a plain building), a line down to the next */
#dm-side .dms-ex{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;padding-bottom:16px}
#dm-side .dms-ex:not(:last-child)::before{content:"";position:absolute;left:18px;top:42px;bottom:4px;width:1px;background:var(--line2)}
#dm-side .dms-lg{position:relative;width:36px;height:36px;border-radius:8px;overflow:hidden;display:grid;place-items:center;background:var(--chip);color:var(--ink3)}
#dm-side .dms-lg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#fff}
#dm-side .dms-ex .t{font-size:14px;line-height:20px;font-weight:600;overflow-wrap:anywhere}
#dm-side .dms-ex .c{font-size:13px;line-height:18px;color:var(--ink2);overflow-wrap:anywhere}
#dm-side .dms-ex .a{margin-top:2px;font-size:12px;line-height:16px;color:var(--ink3)}
#dm-side .dms-ex .d{margin-top:6px;font-size:13px;line-height:19px;color:var(--ink2);white-space:pre-line;overflow-wrap:anywhere}
#dm-side .dms-chips{display:flex;flex-wrap:wrap;gap:6px}
#dm-side .dms-chips span{font-size:12px;line-height:18px;font-weight:500;padding:3px 10px;border-radius:9999px;background:var(--chip);color:var(--ink2)}
#dm-side .dms-end{height:28px}
/* the message composer */
#dm-side .dms-ch{padding:22px 64px 0 24px}
#dm-side .dms-to{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
#dm-side .dms-who{display:inline-flex;align-items:center;gap:6px;max-width:100%;height:28px;padding:0 10px 0 3px;border-radius:9999px;background:var(--chip);font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dm-side .dms-who.off{background:transparent;border:1px dashed var(--line2);color:var(--ink3)}
#dm-side .dms-lbl{display:block;margin-bottom:6px;font-size:13px;font-weight:600;color:var(--ink2)}
#dm-side .dms-ta{display:block;width:100%;min-height:150px;border:1px solid var(--line2);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;line-height:20px;resize:vertical;outline:0}
#dm-side .dms-ta:focus{border-color:var(--brand);box-shadow:0 0 0 3px oklch(.656 .115 218.497 / .15)}
#dm-side .dms-ins{display:flex;gap:6px;margin-top:8px}
#dm-side .dms-chip{display:inline-flex;align-items:center;height:28px;padding:0 10px;border-radius:9999px;border:1px dashed var(--line2);background:transparent;color:var(--ink2);font-size:12.5px;font-weight:600;cursor:pointer}
#dm-side .dms-chip:hover{background:var(--hover);border-color:var(--ink3)}
#dm-side .dms-pv{margin-top:16px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:var(--page)}
#dm-side .dms-pv small{display:block;font-size:12px;line-height:16px;color:var(--ink3)}
#dm-side .dms-pvt{margin-top:6px;min-height:20px;font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
#dm-side .dms-lim{margin-top:12px;font-size:12px;line-height:18px;color:var(--ink3)}
#dm-side .dms-f{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 24px;border-top:1px solid var(--line);background:var(--surface)}
#dm-side .dms-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:10px;border:1px solid var(--line2);background:var(--surface);color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;cursor:pointer}
#dm-side .dms-btn:hover:not(:disabled){background:var(--hover)}
#dm-side .dms-btn:disabled{opacity:.45;cursor:not-allowed}
#dm-side .dms-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff}
#dm-side .dms-btn.pri:hover:not(:disabled){background:var(--brand-h)}
#dm-side .dms-btn.pri svg.co-i{color:#fff}
#dm-side .dms-btn .co-spin{width:12px;height:12px}
#dm-side .dms-btn.pri .co-spin{border-color:#fff;border-top-color:transparent}
#dm-side .dms-send{margin-left:auto;min-width:132px}
@media (max-width:600px){
  #dm-side .dms-p{width:100%;border-left:0}
  #dm-side .dms-hd,#dm-side .dms-sec,#dm-side .dms-f{padding-left:16px;padding-right:16px}
  #dm-side .dms-ch{padding:20px 60px 0 16px}
  #dm-side .dms-acts .dm-conn{flex:1 1 auto}
  #dm-side .dms-li{margin-left:0}
  #dm-side .dms-nums b{font-size:18px}
}


/* A company's full card over the page (js/companies.js coPop: the agents' company pickers): above the page, below the
   Approve card (300) and the toasts; a sheet from the bottom at phone width */
html.co-pop-on{overflow:hidden}
#co-pop{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;font-family:"Circular Std","Figtree",ui-sans-serif,system-ui,sans-serif,"Noto Sans Thai";color:var(--ink)}
#co-pop[hidden]{display:none}
#co-pop .co-pop-bk{position:absolute;inset:0;background:rgb(0 0 0 / .45)}
#co-pop .co-pop-card{position:relative;display:flex;flex-direction:column;width:min(880px,100%);height:min(820px,calc(100vh - 48px));background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgb(0 0 0 / .28);overflow:hidden}
#co-pop .co-pop-h{display:flex;align-items:flex-start;gap:12px;padding:20px 20px 10px}
#co-pop .co-pop-h .co-head{flex:1;min-width:0}
#co-pop .co-pop-h .co-name{overflow-wrap:anywhere}
#co-pop .co-pop-x{display:grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--ink2);cursor:pointer}
#co-pop .co-pop-x:hover{background:var(--hover)}#co-pop .co-pop-x svg{width:18px;height:18px}
#co-pop .co-pop-x:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#co-pop .co-pop-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0 20px 12px}
#co-pop .co-pop-acts:empty{display:none}
#co-pop .co-pop-note{font-size:12.5px;color:var(--ink3)}
#co-pop > .co-pop-card > .co-dtabs{order:0;flex:none;gap:24px;padding:0 20px;border-bottom:1px solid var(--line)}
#co-pop .co-dtabs button{height:44px}
@media (max-width:640px){#co-pop{padding:0;place-items:end stretch}
  #co-pop .co-pop-card{width:100%;height:92vh;border-radius:18px 18px 0 0;border-bottom:0}
  #co-pop .co-pop-h{padding:16px 16px 8px}#co-pop .co-pop-acts{padding:0 16px 10px}#co-pop > .co-pop-card > .co-dtabs{padding:0 16px}}
/* the list's two groups: Tracked (the Hiring signal agent's companies), then From your jobs (js/decision.js view) */
/* the list's Sort by, its order and Industry (as the Hiring signal agent's company picker) */
#sec-dm .co-fl{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px 16px}
#sec-dm .co-dd{position:relative;flex:0 1 auto;min-width:0}
#sec-dm .co-ddb{display:inline-flex;align-items:center;justify-content:space-between;gap:6px;max-width:100%;height:34px;padding:0 8px 0 12px;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
#sec-dm .co-ddb span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-dm .co-ddb:hover{background:var(--hover)}
#sec-dm .co-ddb .co-i{flex:none;width:16px;height:16px;color:var(--ink3);transform:rotate(90deg);transition:transform .15s}
#sec-dm .co-ddb.open{border-color:var(--brand)}
#sec-dm .co-ddb.open .co-i{transform:rotate(-90deg)}
#sec-dm .co-ddb:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
/* the list's order: an arrow beside Sort by (down, highest first; up, lowest first), not a filter (Max 2026-10-20) */
#sec-dm .co-dirb{display:inline-grid;place-items:center;flex:none;width:34px;height:34px;padding:0;border:1px solid var(--line2);border-radius:9999px;background:var(--surface);color:var(--ink2);cursor:pointer}
#sec-dm .co-dirb:hover{background:var(--hover);color:var(--ink)}
#sec-dm .co-dirb svg{width:18px;height:18px}
#sec-dm .co-dirb:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#sec-dm .co-ddm{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:240px;max-width:calc(100vw - 32px);max-height:320px;overflow-y:auto;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 28px rgb(0 0 0 / .16)}
#sec-dm .co-ddo{display:flex;align-items:center;gap:8px;min-height:34px;padding:6px 8px;border-radius:6px;font-size:14px;line-height:20px;color:var(--ink);cursor:pointer}
#sec-dm .co-ddo:hover{background:var(--hover)}
#sec-dm .co-ddo input{flex:none;width:16px;height:16px;margin:0;accent-color:var(--brand)}
#sec-dm .co-ddo small{margin-left:auto;padding-left:14px;font-size:12.5px;color:var(--ink3);white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:520px){#sec-dm .co-dd{flex:1 1 140px}#sec-dm .co-ddb{width:100%}#sec-dm .co-ddm{min-width:min(280px,calc(100vw - 48px))}}
/* Track (Max 2026-10-19): on each row under its new jobs, and in the company's header */
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-rr{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-rr>span:empty{display:none}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-trk{gap:6px;white-space:nowrap}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-trk .co-i{width:15px;height:15px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-trk.on{background:var(--tint);border-color:transparent;color:var(--brand-d)}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-trk.co-trks{height:28px;padding:0 10px;font-size:12.5px}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-head .co-hn{flex:1;min-width:0}
:is(#sec-dm,#sec-findjob .dmk,#co-pop) .co-head>.co-trk{flex:none;align-self:flex-start}
/* The filter's sheet pieces (js/decision.js dd): a title and a backdrop, shown only on a phone */
#sec-dm .co-ddbg,#sec-dm .co-ddt{display:none}
/* ── A phone (Max 2026-10-20: "Make it like real monile app UI now its confusing to look at on phone") ──
   The top bar already says Companies, so the page's own title goes. The list is one plain page, no box and no inner scroll,
   its search stays under the top bar, the filters are one row that scrolls sideways and a filter opens as a sheet from the
   bottom. A company opens as its own full-screen view (over the tab bar, Back at its top, its tabs under it); its people are
   a full-width list. Selectors start #sec-dm #dm-view so they win over the rules above. */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #sec-dm>h1{display:none}
  /* the list */
  #sec-dm #dm-view .co-two{display:block;margin:-16px -16px 0;border:0;border-radius:0;overflow:visible}
  #sec-dm #dm-view .co-list{display:flex;height:auto;min-height:0;overflow:visible;border:0}
  #sec-dm #dm-view .co-rows{overflow:visible}
  #sec-dm #dm-view .co-lhd{position:sticky;top:var(--mbar-h);z-index:31;padding:10px 16px 8px;background:var(--surface);border-bottom:1px solid var(--line)}
  #sec-dm #dm-view .co-srch{height:44px;padding:0 14px;border-radius:12px}
  #sec-dm #dm-view .co-srch input{font-size:16px}
  #sec-dm #dm-view .co-fl{flex-wrap:nowrap;gap:8px;padding:10px 16px 6px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #sec-dm #dm-view .co-fl::-webkit-scrollbar{display:none}
  #sec-dm #dm-view .co-dd{flex:none}
  #sec-dm #dm-view .co-dirb{width:40px;height:40px}
  #sec-dm #dm-view .co-ddb{width:auto;height:40px;padding:0 10px 0 14px;font-size:14px}
  #sec-dm #dm-view .co-cnt{min-height:28px;padding:0 16px 8px}
  #sec-dm #dm-view .co-row{padding:14px 16px;border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent}
  #sec-dm #dm-view .co-row:active{background:var(--hover)}
  #sec-dm #dm-view .co-trk.co-trks{height:40px;padding:0 14px;font-size:13px}
  #sec-dm #dm-view .co-empty{padding:40px 16px}
  /* a filter: a sheet from the bottom (above the tab bar, under the More sheet) */
  #sec-dm #dm-view .co-ddbg{display:block;position:fixed;inset:0;z-index:60;background:rgb(0 0 0 / .35)}
  #sec-dm #dm-view .co-ddm{position:fixed;left:0;right:0;top:auto;bottom:0;z-index:61;min-width:0;max-width:none;max-height:72vh;max-height:72dvh;padding:6px 8px calc(12px + env(safe-area-inset-bottom));border:0;border-radius:18px 18px 0 0;box-shadow:var(--pop);overscroll-behavior:contain}
  #sec-dm #dm-view .co-ddt{display:block;padding:12px 12px 6px;font-size:12px;line-height:16px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  #sec-dm #dm-view .co-ddo{min-height:52px;padding:8px 12px;border-radius:10px;font-size:16px}
  #sec-dm #dm-view .co-ddo input{width:20px;height:20px}
  #sec-dm #dm-view .co-ddo small{font-size:13px}
  /* buttons: a finger's height */
  :is(#sec-dm #dm-view,#co-pop .co-pop-card) .co-btn{height:44px;font-size:15px}
  :is(#sec-dm #dm-view,#co-pop .co-pop-card) .co-btn.sm{height:40px;font-size:14px}
  /* a company: its own full-screen view */
  #sec-dm #dm-view .co-two.sel .co-list{display:flex;visibility:hidden}
  #sec-dm #dm-view .co-two.sel .co-det{position:fixed;inset:0;z-index:36;height:auto;min-height:0;background:var(--surface);overflow:hidden}
  #sec-dm #dm-view .co-det .co-dtop{flex:none;flex-wrap:wrap;align-items:center;gap:0 8px;min-height:0;padding:env(safe-area-inset-top) 12px 0 4px;border-bottom:1px solid var(--line);background:var(--surface)}
  #sec-dm #dm-view .co-det .co-dtop:has(.co-dtabs){row-gap:0;padding-top:env(safe-area-inset-top)}
  #sec-dm #dm-view .co-det .co-back,#sec-dm #dm-view .co-det .co-dtop:has(.co-dtabs) .co-back{display:inline-flex;align-items:center;gap:2px;height:52px;max-width:calc(100% - 112px);padding:0 14px 0 6px;border-radius:10px;font-size:16px;font-weight:600;color:var(--ink)}
  #sec-dm #dm-view .co-det .co-back svg.co-i{width:22px;height:22px;stroke-width:2}
  #sec-dm #dm-view .co-det .co-dli,#sec-dm #dm-view .co-det .co-dtop:has(.co-dtabs) .co-dli{height:40px}
  #sec-dm #dm-view .co-det .co-dtabs{order:4;flex:none;width:calc(100% + 16px);margin:0 -12px 0 -4px;gap:0;padding:0 8px;border:0;border-radius:0;background:transparent;overscroll-behavior-x:contain}
  #sec-dm #dm-view .co-det .co-dtabs button{height:46px;padding:0 13px;border-radius:0;border-bottom:2px solid transparent;font-size:15px;box-shadow:none}
  #sec-dm #dm-view .co-det .co-dtabs button:hover{background:transparent}
  #sec-dm #dm-view .co-det .co-dtabs button.on{background:transparent;box-shadow:none;border-bottom-color:var(--brand)}
  #sec-dm #dm-view .co-det .co-dbody{flex:1;min-height:0;padding:16px 16px calc(32px + env(safe-area-inset-bottom));overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  #sec-dm #dm-view .co-name{font-size:20px;line-height:26px}
  #sec-dm #dm-view .co-job{min-height:64px;padding:14px}
  /* a company's decision makers */
  #sec-dm #dm-view .dm-dept{margin-top:16px}
  #sec-dm #dm-view .dm-dept label{width:100%}
  #sec-dm #dm-view .dm-dept select{flex:1;height:44px;border-radius:12px;padding:0 12px;font-size:16px}
  #sec-dm #dm-view .dm-act{flex-direction:column;align-items:stretch;gap:8px;margin-top:14px}
  #sec-dm #dm-view .dm-act .co-btn{width:100%}
  #sec-dm #dm-view .dm-today{font-size:13px;line-height:18px;text-align:center}
  #sec-dm #dm-view .dm-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px}
  #sec-dm #dm-view .dm-stats>div,#sec-dm #dm-view .dm-stats>div:last-child{grid-column:auto;padding:10px}
  #sec-dm #dm-view .dm-stats b{font-size:22px;line-height:30px}
  #sec-dm #dm-view .dm-chips{flex-wrap:nowrap;margin:14px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  #sec-dm #dm-view .dm-chips::-webkit-scrollbar{display:none}
  #sec-dm #dm-view .dm-chip{flex:none;height:40px;padding:0 14px;font-size:14px}
  /* the people: a full-width list */
  #sec-dm #dm-view .dm-list{margin:16px -16px 0;padding:0 0 6px;border-width:1px 0;border-radius:0}
  #sec-dm #dm-view .dm-bhead{padding:8px 16px 2px}
  #sec-dm #dm-view .dm-selall{min-height:44px;font-size:13.5px}
  #sec-dm #dm-view .dm-bsel .dm-conn{height:40px}
  #sec-dm #dm-view .dm-olim{padding:0 16px 8px}
  #sec-dm #dm-view .dm-olim .dm-conn{height:36px}
  #sec-dm #dm-view .dm-gl{padding:14px 16px 4px;font-size:12.5px}
  #sec-dm #dm-view .dm-bl{padding:12px 16px}
  #sec-dm #dm-view .dm-pick{width:32px;height:44px;margin:0 -8px 0 -8px}
  #sec-dm #dm-view .dm-pnbtn{font-size:16px}
  #sec-dm #dm-view .dm-pnli{width:28px;height:28px}
  #sec-dm #dm-view .dm-ci{width:30px;height:30px}
  #sec-dm #dm-view .dm-ci svg.co-i{width:14px;height:14px}
  #sec-dm #dm-view .dm-tg{font-size:12px;line-height:18px}
  #sec-dm #dm-view .dm-ptitle,#sec-dm #dm-view .dm-blwhy{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
  #sec-dm #dm-view .dm-ptitle{font-size:14px;line-height:19px}
  #sec-dm #dm-view .dm-blwhy{font-size:13px;line-height:18px}
  #sec-dm #dm-view .dm-conn{height:40px;min-width:120px;font-size:13.5px}
  #sec-dm #dm-view .dm-bulk{min-width:0}
}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  /* a row's Track and Connect in Find Job's tab and the company pop-up: tap-sized, as on the page */
  #sec-findjob .dmk .dm-marks .dm-conn,#sec-findjob .dmk .dm-bsel .dm-conn{height:40px}
  /* Find managers in: its label over a full-width picker, so "All departments (directors and up)" is shown whole */
  #sec-dm #dm-view .dm-dept label{flex-direction:column;align-items:flex-start;gap:6px}
  #sec-dm #dm-view .dm-dept select{flex:none;width:100%}
}
/* the company pop-up: a full-screen view, its Close at the top right, its tabs as an underline bar */
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #co-pop{padding:0;place-items:stretch}
  #co-pop .co-pop-card{width:100%;height:100%;border:0;border-radius:0;box-shadow:none}
  #co-pop .co-pop-h{align-items:center;padding:calc(10px + env(safe-area-inset-top)) 8px 8px 16px}
  #co-pop .co-pop-x{width:44px;height:44px}
  #co-pop .co-pop-acts{padding:0 16px 12px}
  #co-pop > .co-pop-card > .co-dtabs{flex:none;align-self:stretch;width:auto;max-width:none;gap:0;margin:0;padding:0 8px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-radius:0;background:transparent;overscroll-behavior-x:contain}
  #co-pop .co-pop-card .co-dtabs button{height:46px;padding:0 13px;border-radius:0;border-bottom:2px solid transparent;font-size:15px;box-shadow:none}
  #co-pop .co-pop-card .co-dtabs button:hover{background:transparent}
  #co-pop .co-pop-card .co-dtabs button.on{background:transparent;box-shadow:none;border-bottom-color:var(--brand)}
  #co-pop .co-pop-card .co-dbody{padding:16px 16px calc(32px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  #co-pop .co-pop-card .co-dtop{padding:0 12px 0 4px}
  #co-pop .co-pop-card .co-back{height:48px;padding:0 12px 0 6px;font-size:15px;font-weight:600;color:var(--ink)}
}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  /* small print and small targets found by a sweep of every state at 390: nothing under 12 px, links and icons with a finger's reach */
  #sec-dm #dm-view .co-dtabs .co-new{font-size:12px}
  #sec-dm #dm-view .co-more{padding:10px 0;margin-top:0}
  #sec-dm #dm-view .co-facts a{display:inline-block;padding:10px 0}
  #sec-dm #dm-view .dm-pnbtn{padding:5px 0}
  #sec-dm #dm-view .dm-pnli,#sec-dm #dm-view .dm-ci{position:relative}
  #sec-dm #dm-view .dm-pnli::after,#sec-dm #dm-view .dm-ci::after{content:"";position:absolute;inset:-6px}
}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){
  #co-pop .co-pop-card .co-facts a{display:inline-block;padding:10px 0}
  #co-pop .co-pop-card .co-more{padding:10px 0;margin-top:0}
}

/* Jobs and companies: the tab bar over the filter box (js/findjob.js jcTabs), Sort and its order beside the count, and
   the Hiring signal icons in Company filters (Max 2026-10-20: "do the svgs for the hiring signals pro sass products svgs") */
#sec-dm .co-lhd{flex-wrap:wrap}
#sec-dm .co-cnt .co-dd{flex:none}
#sec-dm .co-cnt .co-ddb{height:30px;font-size:13px}
#sec-dm .co-cnt .co-dirb{width:30px;height:30px}
#sec-dm .co-cnt .co-dirb svg{width:16px;height:16px}
#sec-dm .co-oi{display:inline-grid;place-items:center;flex:none;width:24px;height:24px;border-radius:7px}
#sec-dm .co-oi svg{width:15px;height:15px}
#sec-dm .co-oi-expanding{background:var(--good-s);color:var(--good)}
#sec-dm .co-oi-hiring{background:var(--tint);color:var(--brand-d)}
#sec-dm .co-oi-steady{background:var(--chip);color:var(--ink2)}
#sec-dm .co-oi-slowing{background:var(--warn-s);color:var(--warn)}
#sec-dm .co-oi-unclear{background:var(--chip);color:var(--ink3)}
/* the header and the tab bar at the same place on the Jobs and Companies tabs (nothing moves when the tab changes): the
   Jobs view's own gap is 14 px (12 on a phone), its list head 10 px under a 1 px border (12 on a phone) */
#sec-dm .jc-head h1{margin:0}
#sec-dm .jc-head{margin-bottom:14px}
#sec-dm #dm-view .co-lhd{padding-top:10px}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){#sec-dm .jc-head{margin-bottom:12px}#sec-dm #dm-view .co-two{margin-top:0}#sec-dm #dm-view .co-lhd{padding-top:13px}}
/* Remove a company (js/decision.js rmBtn): red beside Track; "N removed" beside the count opens the removed ones to restore */
:is(#sec-dm) .co-hact{display:flex;gap:8px;flex:none;align-self:flex-start;flex-wrap:wrap;justify-content:flex-end}
:is(#sec-dm) .co-btn.co-rm{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,var(--line))}
:is(#sec-dm) .co-btn.co-rm:hover:not(:disabled){background:var(--bad-s);border-color:var(--bad)}
:is(#sec-dm) .co-btn.co-rm:focus-visible{outline:2px solid var(--bad);outline-offset:2px}
:is(#sec-dm) .co-rml{border:0;background:none;padding:4px 2px;font:inherit;font-size:12px;color:var(--brand-d);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
:is(#sec-dm) .jc-none .co-rml{margin-top:8px;font-size:13px}
:is(#sec-dm) .co-rmd{border-bottom:1px solid var(--line);padding:8px 0 4px;background:var(--page)}
:is(#sec-dm) .co-rmh{padding:2px 16px 6px;font-size:12px;font-weight:600;color:var(--ink3)}
:is(#sec-dm) .co-rmr{display:flex;align-items:center;gap:10px;padding:6px 16px;min-height:48px}
:is(#sec-dm) .co-rmr .nm{flex:1;min-width:0;font-size:14px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:800px),(pointer:coarse) and (max-width:950px){:is(#sec-dm) .co-rml{min-height:40px}}
/* Nearest to me: where the distances are from, and the offices still to find (js/decision.js nearNote) */
#sec-dm .co-near{display:flex;align-items:center;gap:6px;padding:9px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--ink3);min-width:0}
#sec-dm .co-nearf{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sec-dm .co-nearf b{font-weight:600;color:var(--ink2)}
#sec-dm .co-nearw{margin-left:auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}