/* ipcjobs.org design system (Appendix F). Arial throughout, IPC Blue anchor,
   clear white backgrounds, 8-point spacing rhythm, calm and trustworthy. */
:root{
  --ipc-blue:#1B5EA9; --dark-blue:#0D3B6E; --medium:#2E86AB; --gold:#D4A843;
  --success:#228B22; --warn:#FFA500; --danger:#DC143C; --magenta:#A23B72;
  --ink:#152238; --muted:#5b6b82; --line:#e2e8f0; --bg:#f6f8fb; --card:#ffffff;
  --radius:12px; --shadow:0 1px 3px rgba(16,42,80,.08),0 6px 20px rgba(16,42,80,.05);
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* The page is a column that always fills the window. Without this a short page — signing in,
   an empty result, an error — left the footer floating partway up with dead grey beneath it,
   which reads as a page that failed to finish loading. */
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg);font-size:15px;line-height:1.55;
  min-height:100vh;display:flex;flex-direction:column}
#app{flex:1 0 auto}
#footer{margin-top:auto}
a{color:var(--ipc-blue);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0 0 var(--s1);line-height:1.2}
h1{font-size:30px;font-weight:bold}
h2{font-size:21px;font-weight:bold}
h3{font-size:16px;font-weight:bold}
.muted{color:var(--muted)}
.small{font-size:13px}
.tiny{font-size:11.5px}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s3)}
.loading{padding:80px;text-align:center;color:var(--muted)}

/* The opening screen: a briefcase settling while three vacancies fill in beneath it. It stands
   in for what the site is about to do, rather than announcing that something is happening. */
.boot{min-height:62vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:60px 24px}
/* The same wordmark as the top bar and the footer, so the very first frame is already the site. */
.boot-mark{display:flex;align-items:center;gap:8px;margin-bottom:2px}
.boot-tile{width:26px;height:26px;border-radius:7px;background:var(--ipc-blue);color:#fff;display:grid;place-items:center;font-size:15px;font-weight:bold}
.boot-name{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:20px;color:var(--ipc-blue);letter-spacing:-.01em}
.boot-scene{position:relative;display:grid;place-items:center;width:110px;height:110px}
/* A quiet ring opening outward, like a search going out. */
.boot-scene::before,.boot-scene::after{content:'';position:absolute;width:74px;height:74px;border-radius:50%;
  border:2px solid var(--ipc-blue);opacity:0;animation:boot-ring 2.8s ease-out infinite}
.boot-scene::after{animation-delay:1.4s}
@keyframes boot-ring{
  0%{transform:scale(.72);opacity:.34}
  70%{opacity:0}
  100%{transform:scale(1.5);opacity:0}
}
.boot-case{position:relative;color:var(--ipc-blue);animation:boot-bob 2.8s ease-in-out infinite}
@keyframes boot-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.bc-handle{animation:boot-handle 2.8s ease-in-out infinite;transform-origin:32px 14px}
@keyframes boot-handle{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
.bc-clasp{animation:boot-clasp 2.8s ease-in-out infinite}
@keyframes boot-clasp{0%,100%{opacity:1}45%{opacity:.35}}

/* Three vacancies arriving, one after another. */
.boot-rows{display:flex;flex-direction:column;gap:9px;width:230px}
.boot-rows span{display:block;height:11px;border-radius:6px;background:#e6ecf5;position:relative;overflow:hidden}
.boot-rows span:nth-child(2){width:82%}
.boot-rows span:nth-child(3){width:64%}
.boot-rows span::after{content:'';position:absolute;inset:0;border-radius:6px;
  background:linear-gradient(90deg,transparent,rgba(27,94,169,.42),transparent);
  transform:translateX(-100%);animation:boot-sweep 1.9s ease-in-out infinite}
.boot-rows span:nth-child(2)::after{animation-delay:.22s}
.boot-rows span:nth-child(3)::after{animation-delay:.44s}
@keyframes boot-sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

.boot-text{margin:0;font-size:14px;color:var(--muted);text-align:center}

/* Movement is decoration here, so anyone who has asked for less of it gets the scene standing
   still rather than a screen that will not sit quiet. */
@media(prefers-reduced-motion:reduce){
  .boot-case,.bc-handle,.bc-clasp,.boot-rows span::after,.boot-scene::before,.boot-scene::after{animation:none}
  .boot-scene::before{opacity:.22}
}
.mt1{margin-top:var(--s1)}.mt2{margin-top:var(--s2)}.mt3{margin-top:var(--s3)}.mt4{margin-top:var(--s4)}
.row{display:flex;gap:var(--s2);flex-wrap:wrap}
.row.between{justify-content:space-between;align-items:center}
.grow{flex:1}
.center{text-align:center}

/* top bar */
.topbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topbar .wrap{display:flex;align-items:center;gap:var(--s2);height:60px}
.brand{font-weight:bold;font-size:20px;color:var(--ipc-blue);display:flex;align-items:center;gap:8px;flex-shrink:0}
.brand .dot{width:26px;height:26px;border-radius:7px;background:var(--ipc-blue);color:#fff;display:grid;place-items:center;font-size:15px}
/* One name, set once: the same face, weight, size and colour across both words. It was briefly
   two-tone, which made "Jobs" read as a lesser second word rather than half of the name. */
.brand-name{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:20px;color:var(--ipc-blue);letter-spacing:-.01em}

/* Sign in and Register: a matched pair, one quiet and one solid, kept on a single line. */
.authbar{display:flex;align-items:center;gap:8px;flex-shrink:0;white-space:nowrap}
.authbar-in,.authbar-up{font-family:inherit;font-size:14px;font-weight:bold;cursor:pointer;border-radius:8px;padding:8px 16px;transition:.12s;line-height:1.4}
.authbar-in{background:transparent;color:var(--ipc-blue);border:1px solid transparent}
.authbar-in:hover{background:#eef4fb;border-color:#d5e4f5}
.authbar-up{background:var(--ipc-blue);color:#fff;border:1px solid var(--ipc-blue)}
.authbar-up:hover{background:var(--dark-blue);border-color:var(--dark-blue)}
.authbar-up:active,.authbar-in:active{transform:translateY(1px)}
.authbar-up{display:inline-flex;align-items:center;gap:6px}
.authbar-caret{font-size:10px;opacity:.85}

/* Registering means a different thing depending on who is doing it, so the button offers the
   choice rather than guessing. Each door says who it is for in its own words. */
/* Written against .reg-menu as well as the item, because .acct-item is defined further down the
   stylesheet and its display:block would otherwise win and put each door on a single line. */
.reg-menu{min-width:300px;max-width:340px;padding:7px}
.reg-menu .reg-item{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;line-height:1.4}
.reg-menu .reg-item b{font-size:14px;color:var(--ipc-blue)}
.reg-menu .reg-item span{font-size:12.5px;color:var(--muted);white-space:normal}
.reg-menu .reg-item:hover{background:#f2f8ff}
@media(max-width:560px){ .reg-menu{min-width:0;width:calc(100vw - 32px);right:-8px} }
.navlinks{display:flex;align-items:center;gap:6px;margin-left:var(--s3);flex-wrap:nowrap}
.navlinks>a{color:var(--ink);font-size:14.5px;font-weight:600;padding:8px 12px;border-radius:8px;white-space:nowrap;line-height:1.5}
.navlinks>a:hover{background:var(--bg)}
.navlinks>a.active{color:var(--ipc-blue);background:rgba(13,59,110,.08)}
.nav-drop{position:relative}
.nav-head{display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);padding:8px 12px;border-radius:8px;white-space:nowrap}
.nav-head:hover{background:var(--bg)}
.nav-head.active{color:var(--ipc-blue);background:rgba(13,59,110,.08)}
.nav-head .caret{font-size:10px;opacity:.6}
.nav-menu{display:none;position:absolute;top:46px;left:0;min-width:320px;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(13,59,110,.18);padding:8px;z-index:60}
.nav-menu.open{display:block}
.nav-item{display:block;padding:9px 12px;border-radius:8px;color:var(--ink);text-decoration:none}
.nav-item b{display:block;font-size:14px}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:rgba(13,59,110,.08)}
.nav-item.active b{color:var(--ipc-blue)}
@media(max-width:1180px){.navlinks{gap:2px}.nav-head,.navlinks>a{padding:8px 8px;font-size:13.5px}}
.spacer{flex:1}
.ctxchip{display:inline-flex;align-items:center;gap:9px;background:var(--bg);border:1px solid var(--line);border-radius:999px;
  padding:5px 11px 5px 14px;font-family:inherit;font-size:13px;text-align:left;cursor:pointer;max-width:230px;
  transition:border-color .15s,background .15s}
.ctxchip:hover{border-color:var(--ipc-blue);background:#fff}
.ctxchip.open{border-color:var(--ipc-blue);background:#fff}
.ctxchip:focus-visible{outline:2px solid var(--ipc-blue);outline-offset:2px}
/* Stacked, and narrow enough to truncate: a long company name used to wrap the pill onto three
   lines rather than shortening itself. */
.ctx-who{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ctxchip .mode{font-size:9.5px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;color:var(--ipc-blue)}
.ctxchip.super .mode{color:var(--magenta)}
.ctx-name{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ctx-caret{font-size:10px;color:var(--muted);flex:none;transition:transform .15s}
.ctxchip.open .ctx-caret{transform:rotate(180deg)}
@media(max-width:720px){ .ctxchip{max-width:150px} }
.acct-menu{position:absolute;right:0;top:44px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(16,42,80,.18);min-width:190px;padding:6px;display:none;z-index:60}
.acct-menu.open{display:block}
.acct-item{display:block;width:100%;text-align:left;background:none;border:none;padding:9px 12px;font-size:14px;font-family:inherit;cursor:pointer;border-radius:7px;color:var(--ink)}
.acct-item:hover{background:var(--bg)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ipc-blue);color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:bold;cursor:pointer;font-family:inherit;transition:.12s}
.btn:hover{background:var(--dark-blue);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.sec{background:#fff;color:var(--ipc-blue);border:1.5px solid var(--ipc-blue)}
.btn.sec:hover{background:#eef4fb}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--bg)}
.btn.gold{background:var(--gold);color:#3a2c05}
.btn.sm{padding:6px 12px;font-size:13px}
.btn.block{width:100%;justify-content:center}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s3);box-shadow:var(--shadow)}
.card.tight{padding:var(--s2)}
.grid{display:grid;gap:var(--s2)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}.navlinks{display:none}}

/* stat tiles */
.stat{background:linear-gradient(135deg,#fff 0%,#f8faff 100%);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s2);box-shadow:0 1px 3px rgba(11,37,69,.05),0 4px 12px rgba(11,37,69,.03)}
.stat .n{font-size:26px;font-weight:bold;color:var(--ipc-blue);line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin-top:4px}
.stat .d{font-size:12px;color:var(--success)}
/* The padding is stated here rather than left to .stat, because "hero" is also the class on a
   full-width page header further down this file, and that rule sets padding:56px 0 40px. Both
   selectors are one class wide, so the later one was winning and every hero stat tile on the
   site was being given the page header's padding: no padding at the sides, so the number and
   its label sat flush against the left edge, and 56px at the top, so they sank to the bottom of
   the tile. Two classes here settles it whatever the order of the file. The extra pixel makes up
   for the border this tile drops, so it lines up with the plain tiles beside it. */
.stat.hero{background:linear-gradient(135deg,#0D3B6E 0%,#1B5EA9 100%);border:none;padding:calc(var(--s2) + 1px)}
.stat.hero .n{color:#F2C94C}
.stat.hero .l{color:#cbd9ea}
.stat.hero .d{color:#9fd6a9}

/* tracker flavour */
.trend-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;font-size:11.5px;font-weight:bold}
.trend-chip.up{background:#EAF7F2;color:#0E8A6F}
.trend-chip.down{background:#FBE9EA;color:#B23A3F}
.trend-chip.flat{background:#EEF1F7;color:#4B5A78}
.filter-pill{padding:6px 14px;border-radius:999px;font-size:12.5px;font-weight:500;background:#fff;border:1px solid var(--line);cursor:pointer;transition:all .15s;font-family:inherit}
.filter-pill:hover{border-color:var(--ipc-blue)}
.filter-pill.active{background:var(--ipc-blue);color:#fff;border-color:var(--ipc-blue)}
.gradient-top{position:relative;overflow:hidden}
.gradient-top::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#D4A843,#2E86AB,#A23B72);border-radius:var(--radius) var(--radius) 0 0}
.pulse-dot{width:8px;height:8px;border-radius:50%;background:#13C4A3;display:inline-block;animation:ipcpulse 2s infinite}
@keyframes ipcpulse{0%,100%{opacity:1}50%{opacity:.35}}
.fade-in{animation:ipcfade .4s ease-out}
@keyframes ipcfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.badge.diaspora{background:#e8f1fb;color:#0D3B6E}

/* badges & chips */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:bold;padding:3px 9px;border-radius:999px}
.badge.verified{background:#e7f2ea;color:var(--success)}
.badge.hot{background:#fff0e0;color:#c9720a}
.badge.remote{background:#e9f0fb;color:var(--ipc-blue)}
.badge.agg{background:#f2edf6;color:var(--magenta)}
.badge.close{background:#fdeaea;color:var(--danger)}
.chip{display:inline-block;font-size:12px;background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:3px 9px;margin:2px 4px 2px 0}
.chip.met{background:#e7f2ea;border-color:#bfe0c6}
.chip.miss{background:#fbecec;border-color:#f0c9c9;color:#a12}

/* job cards */
.job{border:1px solid var(--line);border-radius:10px;padding:var(--s2);background:#fff;transition:.12s;cursor:pointer}
.job:hover{border-color:var(--ipc-blue);box-shadow:var(--shadow)}
.job .t{font-weight:bold;font-size:16px}
.job .m{color:var(--muted);font-size:13px;margin-top:2px}

/* match meter */
.meter{height:8px;background:#eef1f6;border-radius:99px;overflow:hidden}
.meter>span{display:block;height:100%;background:linear-gradient(90deg,var(--medium),var(--ipc-blue))}
.matchpill{font-weight:bold;color:var(--ipc-blue)}

/* forms */
label{font-size:13px;font-weight:bold;display:block;margin-bottom:4px}
input,select,textarea{width:100%;font-family:inherit;font-size:14px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
/* A tick box is not a text field. The rule above stretched every checkbox and radio to the full
   width of its row, so the box floated on a line of its own with its own label pushed underneath
   it — the tick no longer sitting beside the words it belongs to. */
input[type=checkbox],input[type=radio]{width:auto;flex:none;margin:0;padding:0;border:0;background:none;accent-color:var(--ipc-blue)}
input:focus,select,textarea:focus{outline:2px solid #bcd3ef;border-color:var(--ipc-blue)}
textarea{min-height:120px;resize:vertical}
.field{margin-bottom:var(--s2)}
.field.req label:after{content:" *";color:var(--danger)}
.field.missing input,.field.missing select,.field.missing textarea{border-color:var(--danger);background:#fff8f8}
.field.missing label{color:var(--danger)}
.hint{font-size:12px;color:var(--muted);margin-top:3px}
.hint.redhint{color:var(--danger);font-weight:bold}
.cvpreview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;max-height:56vh;overflow:auto;font-size:14px;line-height:1.6}
.cvpreview p{margin:0 0 8px}

/* about-this-page expandable panel */
.about{background:#f0f5fb;border:1px solid #d8e6f5;border-left:4px solid var(--ipc-blue);border-radius:10px;padding:14px 16px;margin-bottom:var(--s3)}
.about .short{margin:0}
.about .more{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink)}
.about.open .more{max-height:900px;margin-top:10px}
.about .toggle{background:none;border:none;color:var(--ipc-blue);font-weight:bold;font-size:13px;cursor:pointer;padding:6px 0 0;font-family:inherit}
.about .more p{margin:0 0 10px}

/* safety banner */
.safety{background:#fff6ea;border:1px solid #f4dcb0;color:#8a5a10;font-size:13px;padding:8px 16px;text-align:center}

/* tables */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.rank{font-weight:bold;color:var(--ipc-blue)}

/* protected box */
.protected{background:#f4f6f9;border:1px dashed #c3cede;border-radius:10px;padding:14px;color:var(--muted);font-size:13px}
.redwarn{background:#fdecec;border:1.5px solid var(--danger);border-radius:10px;padding:16px;color:#7a1220}

/* landing hero */
.hero{background:linear-gradient(160deg,#0D3B6E,#1B5EA9 60%,#2E86AB);color:#fff;padding:56px 0 40px}
.hero h1{color:#fff;font-size:36px;max-width:640px}
.hero p.sub{color:#dbe8f7;font-size:17px;max-width:620px}
.searchbar{display:flex;align-items:center;gap:0;background:#fff;border-radius:12px;padding:8px;margin-top:var(--s3);box-shadow:var(--shadow)}
.searchbar input{border:none;background:transparent}
.searchbar input:focus{outline:none}
/* A hairline between the two fields, so it reads as one search with two parts rather than two
   inputs that happen to touch. Inset from the edges so it never looks like a border. */
.searchbar input + input{border-left:1px solid var(--line);padding-left:16px}
.searchbar .btn{margin-left:8px;flex-shrink:0}
@media(max-width:620px){
  .searchbar{flex-wrap:wrap;gap:4px}
  .searchbar input + input{border-left:none;border-top:1px solid var(--line);padding-left:12px;padding-top:12px}
  .searchbar .btn{margin-left:0;width:100%;justify-content:center}
}
@media(max-width:640px){.searchbar{flex-direction:column}.hero h1{font-size:28px}}
.doors{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s2);margin-top:var(--s3)}
@media(max-width:980px){.doors{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.doors{grid-template-columns:1fr}}
.door{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:20px;color:#fff;transition:transform .15s ease,background .15s ease}
.door:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.door h3{color:#fff}
.door .btn{margin-top:10px}
.door.wide{grid-column:span 2;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45)}
.door.wide h3{font-size:22px}
.door-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.door-acts .btn{margin-top:0}
.door-acts.stack{flex-direction:column;align-items:stretch}
.door-acts.stack .btn{width:100%;text-align:center}
.door-acts .door-sec{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.55)}
.door-acts .door-sec:hover{background:rgba(255,255,255,.28)}
@media(max-width:560px){.door.wide{grid-column:span 1}.door-acts .btn{width:100%}}

/* always visible join dock */
.joindock{position:fixed;left:20px;bottom:20px;z-index:50;display:none;flex-direction:column;align-items:flex-start;gap:10px}
.joindock.show{display:flex}
.joindock-fab{background:var(--ipc-blue);color:#fff;border:none;border-radius:999px;padding:12px 18px;font-weight:bold;font-size:14px;box-shadow:var(--shadow);cursor:pointer;display:flex;gap:8px;align-items:center}
.joindock-fab:hover{filter:brightness(1.1)}
.joindock-ico{font-size:15px}
.joindock-panel{display:none;position:relative;flex-direction:column;gap:8px;width:288px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--ipc-blue);border-radius:14px;padding:14px 16px 16px;box-shadow:0 14px 40px rgba(13,59,110,.22)}
.joindock.open .joindock-panel{display:flex}
.joindock-lead{font-weight:bold;font-size:14px;color:var(--ipc-blue)}
/* Two doors rather than one, each saying who it is for. The first is the likelier of the two on
   a job site, so it keeps the solid treatment and the second is quieter without being hidden. */
.joindock-cta{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--ipc-blue);color:#fff;border:1px solid var(--ipc-blue);border-radius:9px;padding:10px 12px;cursor:pointer;font-family:inherit}
.joindock-cta b{font-size:13.5px;font-weight:bold}
.joindock-cta span{font-size:11.5px;opacity:.9;line-height:1.35}
.joindock-cta:hover{filter:brightness(1.1)}
.joindock-cta.second{background:#fff;color:var(--ipc-blue);border-color:#cfe0f5}
.joindock-cta.second span{color:var(--muted);opacity:1}
.joindock-cta.second:hover{background:#f2f8ff;filter:none}
.joindock-alt{background:none;border:1px solid var(--line);border-radius:9px;padding:9px 12px;font-size:13px;color:var(--ink);cursor:pointer}
.joindock-alt:hover{background:var(--bg)}
.joindock-x{position:absolute;top:6px;right:8px;background:none;border:none;font-size:17px;line-height:1;color:var(--muted);cursor:pointer}
@media(max-width:640px){.joindock{left:12px;bottom:12px}.joindock-panel{width:min(288px,calc(100vw - 24px));padding:10px 12px 12px}.joindock-fab{padding:10px 14px;font-size:13px}}

/* sizzling rail */
.rail{display:flex;gap:var(--s2);overflow-x:auto;padding-bottom:8px}
.rail .job{min-width:280px}

/* bar charts */
.barchart{width:100%}
.barrow{display:flex;align-items:center;gap:10px;margin:6px 0;padding:2px 4px;border-radius:7px;transition:background .12s}
.barrow.clickable{cursor:pointer}
.barrow.clickable:hover{background:#f2f6fc}
.barlabel{font-size:13px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:20px;background:#eef2f7;border-radius:6px;overflow:hidden;position:relative}
.barfill{height:100%;border-radius:6px;transition:width .7s cubic-bezier(.22,1,.36,1)}
.barval{width:96px;text-align:right;font-size:13px;font-weight:bold;flex:none;font-variant-numeric:tabular-nums}

/* map */
.mapwrap{position:relative;background:#fbfcfe;border:1px solid var(--line);border-radius:12px;padding:10px}
.bubble{cursor:pointer}
.bubble:hover circle{stroke:var(--ipc-blue);stroke-width:2}

/* assistant */
.asst-fab{position:fixed;right:20px;bottom:20px;z-index:50;background:var(--ipc-blue);color:#fff;border:none;border-radius:999px;padding:12px 18px;font-weight:bold;box-shadow:var(--shadow);cursor:pointer;display:flex;gap:8px;align-items:center}
.asst-panel{position:fixed;right:20px;bottom:76px;width:360px;max-width:calc(100vw - 40px);height:460px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 40px rgba(16,42,80,.25);z-index:50;display:flex;flex-direction:column;overflow:hidden}
.asst-head{background:var(--ipc-blue);color:#fff;padding:12px 16px;font-weight:bold;display:flex;justify-content:space-between;align-items:center}
.asst-head .live{font-size:11.5px;font-weight:normal;opacity:.85}
.asst-body{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.bubble-msg{max-width:85%;padding:10px 13px;border-radius:12px;font-size:14px}
.bubble-msg.user{align-self:flex-end;background:var(--ipc-blue);color:#fff;border-bottom-right-radius:3px}
.bubble-msg.bot{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:3px}
.asst-actions{display:flex;flex-wrap:wrap;gap:6px}
.asst-foot{display:flex;gap:6px;padding:10px;border-top:1px solid var(--line);background:#fff}
.asst-foot input{border-radius:999px}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(16,30,55,.45);z-index:60;display:grid;place-items:center;padding:20px}
.modal{background:#fff;border-radius:14px;max-width:560px;width:100%;max-height:88vh;overflow:auto;padding:var(--s3);box-shadow:0 20px 60px rgba(0,0,0,.3)}

/* footer */
.footer{background:#0D3B6E;color:#cdddf0;margin-top:var(--s4);padding:40px 0 0}
.footer a{color:#dce9f8;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}

.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--s3) var(--s2);padding-bottom:var(--s3)}
.foot-brand{max-width:340px}
.foot-logo{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px}
.foot-logo .dot{width:26px;height:26px;border-radius:7px;background:#fff;color:var(--ipc-blue);display:grid;place-items:center;font-size:15px;font-weight:bold}
/* The same wordmark as the top of the page — same face, weight and size — carried in white so
   it reads on the dark ground. */
.foot-name{font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:20px;color:#fff;letter-spacing:-.01em}
.footer a:hover .foot-name{color:#fff}
.foot-org{margin:0;font-size:13.5px;color:#e3edf9;font-weight:bold}
.foot-tag{margin:2px 0 0;font-size:13px;color:#a8c4e2;font-style:italic}

/* The warning a job seeker most needs to see, given a shape that carries it. */
.foot-warn{margin-top:16px;background:rgba(212,168,67,.12);border:1px solid rgba(212,168,67,.45);border-radius:10px;padding:11px 14px;display:flex;flex-direction:column;gap:3px}
.foot-warn b{color:var(--gold);font-size:13.5px}
.foot-warn span{color:#cdddf0;font-size:12.5px;line-height:1.5}

.foot-col h4{margin:0 0 12px;font-size:12px;font-weight:bold;letter-spacing:.09em;text-transform:uppercase;color:#8fb4dc}
.foot-col a{display:block;font-size:13.5px;padding:4px 0;line-height:1.45}

.foot-base{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
  border-top:1px solid rgba(255,255,255,.14);padding-top:16px;padding-bottom:20px;margin-top:4px;font-size:12.5px;color:#9fb9d6}
.foot-base-links{display:flex;gap:18px;flex-wrap:wrap}

@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:var(--s3) var(--s2)}
  .foot-brand{grid-column:1 / -1;max-width:none}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr}
  .foot-base{justify-content:flex-start}
}

/* Sign in. One task, centred, with room around it. */
.authpage{display:flex;justify-content:center;padding:var(--s4) var(--s3) var(--s4)}
.authcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 1px 3px rgba(16,42,80,.06),0 12px 34px rgba(16,42,80,.08);
  padding:32px 30px;width:100%;max-width:420px}
.authcard-h{margin:0;font-size:24px;color:var(--ink)}
.authcard-sub{margin:6px 0 22px;font-size:14px;color:var(--muted);line-height:1.5}
.authcard .field{margin-bottom:14px}
.authcard .field label{display:block;font-size:13px;font-weight:bold;margin-bottom:6px;color:var(--ink)}
.authcard input{padding:11px 13px;font-size:14.5px}
.authcard input:focus{outline:none;border-color:var(--ipc-blue);box-shadow:0 0 0 3px rgba(27,94,169,.13)}
.authcard .btn.block{margin-top:6px;padding:12px 18px;font-size:15px}
.authcard-dev{background:#fff4e5;border:1px solid #f0d0a0;border-radius:9px;padding:10px 13px;
  margin-bottom:18px;font-size:12.5px;color:#7a5314;line-height:1.5}

/* A labelled hairline, rather than a bare row of links after a button. */
.authcard-rule{position:relative;text-align:center;margin:26px 0 16px}
.authcard-rule::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)}
.authcard-rule span{position:relative;background:var(--card);padding:0 12px;font-size:12.5px;color:var(--muted)}

.authcard-paths{display:flex;flex-direction:column;gap:8px}
.authpath{display:flex;flex-direction:column;gap:2px;text-align:left;width:100%;cursor:pointer;
  font-family:inherit;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 14px;transition:.12s}
.authpath:hover{border-color:var(--ipc-blue);background:#f7fbff}
.authpath b{font-size:13.5px;color:var(--ipc-blue)}
.authpath span{font-size:12.5px;color:var(--muted);line-height:1.45}

/* Registration: one centred column, the same width whichever kind of account is being made. */
.regpage{max-width:720px;margin:0 auto;padding-top:var(--s4);padding-bottom:var(--s4)}
.regpage-h{margin:0 0 var(--s2);font-size:28px}
/* The step cards each carried their own narrow width, so the form sat in the left half of its
   own column with a ragged right edge down the page. Inside this column they share its width. */
.regpage .card{width:100%;max-width:none}

.stepper{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:var(--s2) 0}
.stepper-item{display:flex;align-items:center;gap:7px;padding-right:6px}
.stepper-item + .stepper-item{border-left:1px solid var(--line);padding-left:12px}
.stepper-dot{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:bold;color:#fff;background:#c7d2e0;flex-shrink:0}
.stepper-label{font-size:13px;color:var(--muted);white-space:nowrap}
.stepper-item.done .stepper-dot{background:var(--success)}
.stepper-item.done .stepper-label{color:var(--ink)}
.stepper-item.now .stepper-dot{background:var(--ipc-blue);box-shadow:0 0 0 3px rgba(27,94,169,.16)}
.stepper-item.now .stepper-label{color:var(--ink);font-weight:bold}
@media(max-width:620px){
  .stepper-item + .stepper-item{border-left:none;padding-left:0}
  .stepper-label{display:none}
  .stepper-item.now .stepper-label{display:inline}
}

/* ---------- What was advertised in past years ---------- */
.hs-can{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.hs-can{grid-template-columns:1fr}}
.hs-yes,.hs-no{border-radius:10px;padding:12px 14px}
.hs-yes{background:#eefaf0;border:1px solid #bfe3c6}
.hs-no{background:#fff6e9;border:1px solid #f0d7ae}
.hs-yes b{color:var(--success)}
.hs-no b{color:#a06808}
.hs-yes p,.hs-no p{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--ink)}

/* The sample behind every share on the page, shown before any of them. */
.hs-years{display:flex;flex-wrap:wrap;gap:8px}
.hs-year{border:1px solid var(--line);border-radius:10px;padding:9px 14px;min-width:82px;text-align:center;background:#fff}
.hs-year.thin{background:var(--bg);border-style:dashed;opacity:.72}
.hs-yearn{font-size:19px;font-weight:bold;color:var(--ipc-blue);line-height:1.2}
.hs-year.thin .hs-yearn{color:var(--muted)}
.hs-yeary{font-size:13px;font-weight:bold;color:var(--ink)}
.hs-yeart{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

/* Years side by side, so they are compared rather than read one at a time. */
.hs-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px}
.hs-col{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.hs-colhead{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:10px;
  border-bottom:1px solid var(--line);padding-bottom:7px}
.hs-colyear{font-size:17px;font-weight:bold;color:var(--ipc-blue)}
.hs-coln{font-size:11.5px;color:var(--muted)}

.breadcrumb{font-size:13px;color:var(--muted);margin-bottom:8px}
.breadcrumb a{cursor:pointer}
/* Toolkits. Cards that are plainly links off this platform: the arrow says so, and each one
   carries what the tool does rather than only what it is called. */
.tkit-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.tkit{display:flex;align-items:flex-start;gap:12px;padding:15px 16px;border:1px solid var(--line);
  border-radius:12px;background:#fff;color:var(--ink);text-decoration:none;transition:border-color .14s,transform .14s,box-shadow .14s}
.tkit:hover{border-color:var(--ipc-blue);transform:translateY(-2px);box-shadow:var(--shadow)}
.tkit-b{min-width:0;flex:1}
.tkit-n{display:block;font-size:14.5px;margin-bottom:4px}
.tkit-w{font-size:12.5px;line-height:1.55;color:var(--muted)}
.tkit-go{flex:none;color:var(--muted);font-size:14px;margin-top:2px}
.tkit:hover .tkit-go{color:var(--ipc-blue)}
/* The workspace rail.
   Named wsrail, not rail: .rail already exists above for the horizontal scrolling job rails on the
   landing page, and it carries display:flex. A workspace rail inheriting that laid its links out
   sideways across the top of the column instead of down it.
   Only for somebody signed in: .has-wsrail is put on the body by script once there is a workspace
   to show, so a visitor's page keeps its full width and never shifts. Collapsing leaves the icons,
   which is enough to navigate by once the shape is familiar, and the choice is remembered.
   This comment used to close after its first paragraph, which left the three lines below it
   standing as a selector. Everything up to the next brace was read as one, so the rule that hides
   the rail from a visitor was swallowed with it and never applied. */
#siderail{display:none}
body.has-wsrail #siderail{display:block}
.wsrail{display:block;position:fixed;top:60px;bottom:0;left:0;width:232px;overflow-y:auto;z-index:40;
  background:#fff;border-right:1px solid var(--line);padding:14px 10px 24px;
  transition:width .16s ease}
body.wsrail-collapsed .wsrail{width:62px}
body.has-wsrail #app,body.has-wsrail #footer{margin-left:232px;transition:margin-left .16s ease}
body.has-wsrail.wsrail-collapsed #app,body.has-wsrail.wsrail-collapsed #footer{margin-left:62px}

.wsrail-head{display:flex;align-items:flex-start;gap:8px;padding:0 6px 12px;border-bottom:1px solid var(--line);margin-bottom:10px}
.wsrail-who{min-width:0;flex:1}
.wsrail-name{display:block;font-size:13.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wsrail-sub{font-size:11px;color:var(--muted);margin-top:2px}
.wsrail-toggle{flex:none;width:26px;height:26px;border-radius:7px;border:1px solid var(--line);
  background:#fff;color:var(--muted);cursor:pointer;font-family:inherit;font-size:12px;line-height:1}
.wsrail-toggle:hover{background:var(--ipc-blue);color:#fff;border-color:var(--ipc-blue)}

.wsrail-group{margin-bottom:14px}
.wsrail-glabel{font-size:10.5px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:0 8px;margin-bottom:5px}
.wsrail-item{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;
  color:var(--ink);text-decoration:none;font-size:13.5px;line-height:1.3}
.wsrail-item:hover{background:#f2f7fd}
.wsrail-item.on{background:var(--ipc-blue);color:#fff;font-weight:bold}
.wsrail-ic{flex:none;width:20px;text-align:center;font-size:14px}
.wsrail-l{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

body.wsrail-collapsed .wsrail-l,body.wsrail-collapsed .wsrail-glabel,body.wsrail-collapsed .wsrail-who{display:none}
body.wsrail-collapsed .wsrail-head{justify-content:center;padding-left:0;padding-right:0}
body.wsrail-collapsed .wsrail-item{justify-content:center;padding:9px 0}

/* A rail is a poor fit for a phone: it would take a third of the screen from the work. Below the
   breakpoint the top bar carries everything, as it did before. */
@media(max-width:900px){
  body.has-wsrail #siderail{display:none}
  body.has-wsrail #app,body.has-wsrail #footer,
  body.has-wsrail.wsrail-collapsed #app,body.has-wsrail.wsrail-collapsed #footer{margin-left:0}
}
@media print{
  #siderail{display:none!important}
  body.has-wsrail #app{margin-left:0!important}
}
/* Sections on a dashboard, and the space between them.
   Everything on the employer dashboard was spaced the same: heading, filter, explainer, two rows
   of tiles, the funnel, the roles table, all a single step apart. Eight tiles in two rows with
   the same gap above each read as one block of sixteen, and nothing told the eye where one
   question ended and the next began. A section is a bigger step than a row, and it carries a
   quiet label saying what it answers. */
.dash-sec{margin-top:34px}
.dash-sec:first-child{margin-top:0}
.dash-lab{font-size:11.5px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px;display:flex;align-items:baseline;gap:8px}
.dash-lab:after{content:'';flex:1;height:1px;background:var(--line)}
/* A wide panel with a narrow one beside it, wherever that shape is needed. Same behaviour as the
   posting page: a real column rather than a pixel width inside a wrapping row. */
.splitgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:22px;align-items:start}
@media(max-width:1040px){.splitgrid{grid-template-columns:1fr}}
/* Posting a job: the form and the rail beside it.
   The two used to be a flex row with the rail pinned at 330px, which squeezed the form on a
   laptop and, once it wrapped, left the rail sitting under fields still stretched the full width
   of the page. A grid gives the form whatever is left and lets the rail drop cleanly beneath it. */
.postgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.post-rail{min-width:0;position:sticky;top:84px}
@media(max-width:1040px){
  .postgrid{grid-template-columns:1fr}
  .post-rail{position:static}
}
/* The pill toggle sat at its natural width, so on the rail the two choices were cramped against
   each other and on a phone they overflowed it. Each choice now takes half. */
.postgrid .pill-toggle{display:grid;grid-template-columns:1fr 1fr;width:100%}
.postgrid .pill-toggle button{padding:9px 10px;line-height:1.3}
/* Room to breathe between a tick box and the paragraph explaining what ticking it does. */
.postgrid .aud:last-of-type{border-bottom:0}
.postgrid textarea{min-height:220px;line-height:1.6}
.pill-toggle{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.pill-toggle button{background:#fff;border:none;padding:7px 14px;font-size:13px;cursor:pointer;font-family:inherit}
.pill-toggle button.on{background:var(--ipc-blue);color:#fff}
/* How far an application has got, shown as the steps it actually took.
   A person applying in Zimbabwe hears back about very little, so the difference between "sent"
   and "somebody opened it" is the whole of what they have to go on, and it was not being shown
   anywhere. */
.appsteps{display:flex;gap:0;margin-top:14px;flex-wrap:wrap}
.appstep{flex:1;min-width:96px;position:relative;padding-top:16px;text-align:center}
.appstep:before{content:'';position:absolute;top:5px;left:0;right:0;height:2px;background:var(--line)}
.appstep:first-child:before{left:50%}
.appstep:last-child:before{right:50%}
.appstep.on:before{background:var(--ipc-blue)}
.appstep-dot{position:absolute;top:0;left:50%;transform:translateX(-50%);width:12px;height:12px;
  border-radius:50%;background:#fff;border:2px solid var(--line)}
.appstep.on .appstep-dot{background:var(--ipc-blue);border-color:var(--ipc-blue)}
.appstep.now .appstep-dot{box-shadow:0 0 0 4px rgba(27,94,169,.18)}
.appstep-l{display:block;font-size:11px;line-height:1.3;color:var(--muted);padding:0 4px}
.appstep.on .appstep-l{color:var(--ink);font-weight:bold}
@media(max-width:640px){
  .appsteps{flex-direction:column;gap:8px}
  .appstep{text-align:left;padding:0 0 0 22px;min-width:0}
  .appstep:before{display:none}
  .appstep-dot{top:3px;left:0;transform:none}
}
/* Where a company stands with the trust desk, on the company's own page. */
.standing{border:1px solid var(--line);border-left:4px solid var(--medium);border-radius:10px;padding:13px 15px;background:#fbfcfe}
.standing-ok{border-left-color:var(--success);background:#f6fbf7}
.standing-part{border-left-color:var(--ipc-blue);background:#f4f8ff}
.standing-wait{border-left-color:var(--gold);background:#fffaf0}
.standing-bad{border-left-color:var(--danger);background:#fff6f6}
/* In-system alerts. Built to sit with the cards rather than on top of them: same radius, same
   line, same shadow, a coloured spine saying which of the four kinds it is. */
.note-tray{position:fixed;top:74px;right:18px;z-index:90;display:flex;flex-direction:column;gap:10px;
  width:min(380px,calc(100vw - 36px));pointer-events:none}
.note{pointer-events:auto;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;
  align-items:start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--medium);
  border-radius:10px;padding:13px 14px;box-shadow:0 8px 26px rgba(13,59,110,.14);
  animation:note-in .18s ease-out}
.note.going{opacity:0;transform:translateX(8px);transition:opacity .2s,transform .2s}
@keyframes note-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.note-mark{width:24px;height:24px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:bold;background:#eef3fa;color:var(--dark-blue)}
.note-body{min-width:0}
.note-body b{display:block;font-size:13.5px;margin-bottom:2px}
.note-msg{font-size:13px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.note-x{background:none;border:0;color:var(--muted);cursor:pointer;font-size:13px;line-height:1;
  padding:2px 4px;font-family:inherit}
.note-x:hover{color:var(--ink)}
.note-problem{border-left-color:var(--danger)}
.note-problem .note-mark{background:#fdecec;color:var(--danger)}
.note-blocked{border-left-color:var(--gold)}
.note-blocked .note-mark{background:#fbf3df;color:#8a6a12}
.note-done{border-left-color:var(--success)}
.note-done .note-mark{background:#e4f4e8;color:var(--success)}
@media(max-width:560px){.note-tray{top:auto;bottom:16px;right:12px;left:12px;width:auto}}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;z-index:80;font-size:14px;box-shadow:var(--shadow)}

/* ---- additions: tooltips, deltas, report header, advert preview, decisions ---- */
.tip{position:relative;display:inline-flex;align-items:center;cursor:help;vertical-align:middle}
.tip-host{display:inline-flex;align-items:center;gap:4px}
.tip-mark{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;background:var(--medium);color:#fff;font-size:10px;font-weight:bold;font-style:normal}
.tip-bubble{position:absolute;bottom:130%;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:8px 11px;border-radius:8px;font-size:12px;font-weight:normal;line-height:1.45;width:230px;opacity:0;visibility:hidden;transition:opacity .15s;z-index:60;box-shadow:0 6px 20px rgba(0,0,0,.25);text-transform:none;letter-spacing:normal}
.tip-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--ink)}
.tip:hover .tip-bubble,.tip:focus .tip-bubble{opacity:1;visibility:visible}
.delta{display:inline-block;padding:1px 7px;border-radius:999px;font-size:12px;font-weight:bold}
.delta.up{background:#e6f4ea;color:#1a7f45}
.delta.down{background:#fdecea;color:#c0392b}
.delta.flat{background:#eef1f6;color:#5b6b82}
.rep-logo{width:56px;height:56px;border-radius:12px;background:var(--ipc-blue);color:#fff;display:grid;place-items:center;font-weight:bold;font-size:18px;letter-spacing:1px;flex:none}
.rep-head{border-left:4px solid var(--ipc-blue)}
.badge.local{background:#eef4fb;color:var(--ipc-blue)}
.pill-good{display:inline-block;background:#e6f4ea;color:#1a7f45;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:bold;white-space:nowrap}
.pill-no{display:inline-block;background:#eef1f6;color:#5b6b82;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:bold;white-space:nowrap}
.pill-ko{display:inline-block;background:#fdecea;color:#c0392b;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:bold;white-space:nowrap}
.sltable td{vertical-align:top}
.advert-preview{border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:12px;background:#fff}
.advert-preview h4{margin:0 0 6px;font-size:14px;color:var(--ipc-blue)}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.kv-row{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:5px 0;font-size:13px}
.kv-k{color:var(--muted)}
.kv-v{font-weight:bold;text-align:right}
label .tip-host,h3 .tip-host{font-weight:inherit}
/* A tick box beside what it means, and it stays beside it.
   These rows were flex with wrapping switched on, and the explanation under each choice is a
   block, so the text claimed the full width and wrapped to the next line — leaving the box
   hovering on its own above the words it belonged to, and the words reading as a heading for
   whatever came next. Every one of them is this grid now: two columns, no wrapping, the box
   aligned to the first line of the text. The declarations an employer signs at registration were
   never covered by the earlier fix at all, because they were built with their own inline styles
   rather than a class anybody could reach. */
/* Choosing a file, made to look like something worth doing.
   A bare file input inherits the full-width bordered box every input gets, and then carries the
   browser's own grey button inside it — which is what an employer met at the moment they hand
   over their certificate of incorporation. */
.dropzone{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:16px 18px;border:2px dashed var(--line);border-radius:12px;background:#fbfcfe;
  cursor:pointer;transition:border-color .15s,background .15s}
.dropzone:hover{border-color:var(--medium);background:#f6f9fd}
.dropzone.over{border-color:var(--ipc-blue);background:#eef5fd}
.dropzone.has{border-style:solid;border-color:#cfe6d3;background:#f6fbf7}
.dz-icon{width:40px;height:40px;flex:none;border-radius:10px;display:grid;place-items:center;
  background:#eef3fa;font-size:18px}
.dz-icon.ok{background:#e4f4e8;color:#1f8a4c;font-weight:bold}
.dz-main{min-width:0}
.dz-main b{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:560px){
  .dropzone{grid-template-columns:auto minmax(0,1fr);row-gap:10px}
  .dropzone>.btn{grid-column:1/-1}
}
.tickrow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;cursor:pointer}
.tickrow>input[type=checkbox],.tickrow>input[type=radio]{margin-top:3px}
.tickrow b{display:block;font-size:13.5px}
.tickrow .tiny{margin-top:3px;line-height:1.55}
/* Centred where there is only one line to sit beside. */
.tickrow.mid{align-items:center}
.tickrow.mid>input[type=checkbox]{margin-top:0}
/* The audience choices add a rule between them, because each is a separate decision. */
.aud{padding:9px 0;border-bottom:1px solid var(--line)}
.aud:last-child{border-bottom:0}
/* hard to fill + growth */
.htf-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.htf-idx{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;font-weight:bold;color:#fff;flex:none}
.band-veryhard{background:#c0392b}.band-hard{background:#e67e22}.band-moderate{background:#D4A843}.band-manageable{background:#228B22}
.driverbar{height:8px;border-radius:5px;background:#eef1f6;overflow:hidden}
.driverbar>span{display:block;height:100%;background:linear-gradient(90deg,#c0392b,#e67e22)}
.growth-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.growth-card .v{font-size:22px;font-weight:bold;color:var(--ipc-blue)}

/* ---- Hire Me Now controls, tag inputs, CV preview ---- */
.hmn-badge{display:inline-block;background:linear-gradient(90deg,#e67e22,#e74c3c);color:#fff;font-weight:bold;border-radius:999px;padding:6px 14px;font-size:13px;box-shadow:0 2px 8px rgba(231,76,60,.35)}
.hmn-badge.sm{padding:2px 10px;font-size:11px}
.hmn-card{border:2px solid #f0d9c4}
.hmn-card.on{border-color:#e67e22;background:linear-gradient(180deg,#fff8f2,#fff)}
.hmn-toggle{display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:12px 16px;border-radius:999px;border:2px solid #cbd5e1;background:#eef1f6;cursor:pointer;font-size:15px;font-weight:bold;color:#5b6b82;transition:all .2s}
.hmn-toggle .hmn-knob{width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:all .2s;flex:none}
.hmn-toggle.on{background:linear-gradient(90deg,#e67e22,#e74c3c);border-color:#e74c3c;color:#fff;justify-content:flex-start}
.hmn-toggle.on .hmn-knob{margin-left:auto;order:2}
.hmn-toggle.on .hmn-txt{order:1}
.hmn-toggle.flash{animation:hmnflash 1.25s ease-in-out infinite}
@keyframes hmnflash{0%,100%{box-shadow:0 0 0 0 rgba(231,126,34,.45);border-color:#e67e22}50%{box-shadow:0 0 0 10px rgba(231,126,34,0);border-color:#e74c3c}}
.taginput{display:flex;flex-wrap:wrap;gap:6px;align-items:center;border:1px solid var(--line);border-radius:8px;padding:6px;min-height:42px;background:#fff}
.taginput .chip{margin:0}
.cv-preview{border:1px solid var(--line);border-radius:12px;padding:22px 26px;background:#fff}
.cv-preview h4{margin:0 0 4px;font-size:14px;color:var(--ipc-blue);border-bottom:1px solid var(--line);padding-bottom:3px}

/* ---- big highlighted talent database tabs ---- */
.dbtabs{display:flex;gap:14px;flex-wrap:wrap}
.dbtab{display:flex;align-items:center;gap:14px;flex:1;min-width:220px;padding:16px 20px;border-radius:14px;border:2px solid var(--line);background:#fff;cursor:pointer;text-align:left;transition:all .18s;box-shadow:0 1px 2px rgba(16,42,80,.05)}
.dbtab:hover{border-color:#b9d0ec;transform:translateY(-2px);box-shadow:0 6px 18px rgba(16,42,80,.10)}
.dbtab-ic{font-size:32px;line-height:1;width:56px;height:56px;flex:none;display:grid;place-items:center;border-radius:12px;background:#eef4fb}
.dbtab-tx{display:flex;flex-direction:column}
.dbtab-lb{font-size:17px;font-weight:bold;color:var(--ink)}
.dbtab-sb{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.dbtab.on{border-color:var(--ipc-blue);background:linear-gradient(180deg,#f2f8ff,#ffffff);box-shadow:0 4px 16px rgba(27,94,169,.18)}
.dbtab.on .dbtab-lb{color:var(--ipc-blue)}
.dbtab.db-local.on{border-color:#1B5EA9}.dbtab.db-local.on .dbtab-ic{background:#dcebfa}
.dbtab.db-diaspora.on{border-color:#0D3B6E;background:linear-gradient(180deg,#eef3fb,#fff)}.dbtab.db-diaspora.on .dbtab-ic{background:#d7e6f7}
.dbtab.db-hmn.on{border-color:#e67e22;background:linear-gradient(180deg,#fff6ee,#fff)}.dbtab.db-hmn.on .dbtab-ic{background:#fde3cc}
.dbtab.db-hmn.on .dbtab-lb{color:#d35400}
.dbtab.db-hmn .dbtab-ic{animation:hmnpulse 1.6s ease-in-out infinite}
.dbtab.db-attachment.on{border-color:#228B22;background:linear-gradient(180deg,#f0faef,#fff)}.dbtab.db-attachment.on .dbtab-ic{background:#d8f0d6}
.dbtab.db-attachment.on .dbtab-lb{color:#1d6f1d}
.dbtab.db-graduate.on{border-color:#7d3cb5;background:linear-gradient(180deg,#f7f1fd,#fff)}.dbtab.db-graduate.on .dbtab-ic{background:#eadcf8}
.dbtab.db-graduate.on .dbtab-lb{color:#65309a}
@keyframes hmnpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ---- seeker completeness checklist ---- */
.complist{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.comprow{display:flex;gap:7px;align-items:center;padding:2px 0}
.ci-done{color:var(--success);font-weight:bold}
.ci-todo{color:#c4ccd6;font-weight:bold}

/* ---- work history editor ---- */
.wh-edit{border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:10px;background:#fbfcfe}

/* ---- professional CV preview ---- */
/* ---------------- The candidate's CV ----------------
   A CV is read by a person in a hurry and then, very often, printed. So it is set as a
   document: black text on white, one clear column, generous margins, and no colour except a
   rule under each heading. The gradient banner and the circular initials that were here before
   looked like a web page rather than a curriculum vitae, and both wasted the top third of the
   first sheet — the part a reader actually looks at. */
.cvd{background:#fff;color:#333;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.cvd-inner{padding:38px 44px}
.cvd-name{font-size:26px;font-weight:bold;color:var(--ink);line-height:1.15;letter-spacing:-.2px}
.cvd-title{font-size:15px;color:var(--ipc-blue);font-weight:bold;margin-top:4px}
.cvd-contact{font-size:12.5px;color:var(--muted);margin-top:10px;padding-top:10px;border-top:2px solid var(--ipc-blue)}
.cvd-contact span:not(:last-child)::after{content:'  ·  ';color:#c3ccd8}
.cvd-h{font-size:11.5px;font-weight:bold;text-transform:uppercase;letter-spacing:1.4px;color:var(--ipc-blue);
  border-bottom:1px solid var(--line);padding-bottom:4px;margin:26px 0 12px}
.cvd-p{font-size:13.5px;line-height:1.62;color:#333;margin:0}
.cvd-role{margin-bottom:16px;break-inside:avoid}
.cvd-role-top{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cvd-role-title{font-weight:bold;font-size:14px;color:var(--ink)}
.cvd-role-dates{font-size:12px;color:var(--muted);white-space:nowrap;flex:none}
.cvd-role-emp{font-size:13px;color:#444;margin-top:1px}
.cvd-role ul{margin:7px 0 0 18px;padding:0}
.cvd-role li{font-size:13px;line-height:1.55;margin:3px 0;color:#333}
.cvd-edu{margin-bottom:10px}
.cvd-edu-q{font-weight:bold;font-size:13.5px;color:var(--ink)}
.cvd-edu-m{font-size:12.5px;color:var(--muted);margin-top:1px}
/* Skills as plain comma-separated text rather than coloured pills: a pill is a web control,
   it prints badly, and a machine reading the CV for keywords finds the words either way. */
.cvd-skills{font-size:13px;line-height:1.7;color:#333}
.cvd-plain{margin:0 0 0 18px;padding:0}
.cvd-plain li{font-size:13px;line-height:1.55;margin:3px 0;color:#333}
.cvd-foot{margin-top:26px;padding-top:12px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}

/* The preview frame around the document, and its expanded state. */
.cvw{background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.cvw-bar{display:flex;align-items:center;gap:10px;padding:10px 14px;background:#fff;border-bottom:1px solid var(--line)}
.cvw-bar .grow{flex:1}
.cvw-scroll{max-height:420px;overflow:auto;padding:18px;transition:max-height .18s ease}
.cvw.open .cvw-scroll{max-height:none}
.cvw-fade{position:relative}
.cvw:not(.open) .cvw-fade::after{content:'';position:absolute;left:0;right:0;bottom:0;height:60px;
  background:linear-gradient(to bottom,rgba(246,248,251,0),var(--bg));pointer-events:none}
/* Expanded, the document takes the whole screen so it can be read at its real size. */
.cvw.full{position:fixed;inset:0;z-index:1200;border-radius:0;display:flex;flex-direction:column}
.cvw.full .cvw-scroll{flex:1;max-height:none;padding:26px}
.cvw.full .cvd{max-width:820px;margin:0 auto}

/* What the system has noticed about this CV and what it suggests doing next. */
.cvtip{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:8px;font-size:13px;margin-bottom:8px}
.cvtip b{display:block;margin-bottom:2px}
.cvtip.warn{background:#fff8ec;border:1px solid #f0dcb4;color:#6b4d12}
.cvtip.info{background:#eef4fb;border:1px solid #d7e6f7;color:#1c3f66}
.cvtip.good{background:#f1f8f2;border:1px solid #cbe5cf;color:#25562c}
.cvtip-mark{flex:none;width:18px;height:18px;border-radius:50%;margin-top:1px}
.cvtip.warn .cvtip-mark{background:var(--warn)}
.cvtip.info .cvtip-mark{background:var(--medium)}
.cvtip.good .cvtip-mark{background:var(--success)}
.cvscore{display:flex;align-items:center;gap:12px}
.cvscore-n{font-size:26px;font-weight:bold;color:var(--ipc-blue);line-height:1}
.cvscore-bar{flex:1;height:7px;background:#e6ebf2;border-radius:4px;overflow:hidden}
.cvscore-fill{height:100%;background:var(--ipc-blue);border-radius:4px;transition:width .3s ease}

@media print{
  /* Only when a CV is open full screen. This used to hide every child of the body on any print
     at all, which was right for the one case it was written for and wrong for every other: a
     dashboard sent to the printer came out as a single blank page, because the page itself had
     been hidden before anything could be laid out on it. */
  body:has(.cvw.full)>*{display:none !important}
  .cvw.full{position:static;display:block}
  .cvw.full .cvw-bar{display:none}
  .cvw.full{display:block !important}
  .cvw.full .cvw-scroll{padding:0;overflow:visible}
  .cvd{border:none;border-radius:0}
  .cvd-inner{padding:0}
}
@media(max-width:720px){ .cvd-inner{padding:24px 20px} .cvd-name{font-size:22px} }

/* ---- professional advert preview ---- */
.adx{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 4px 24px rgba(16,42,80,.10)}
.adx-head{display:flex;align-items:center;gap:16px;padding:22px 24px;border-bottom:3px solid var(--ipc-blue);background:#f8fbff}
.adx-logo{width:56px;height:56px;border-radius:12px;background:var(--ipc-blue);color:#fff;display:grid;place-items:center;font-weight:bold;font-size:20px;letter-spacing:1px;flex:none}
.adx-title{font-size:21px;font-weight:bold;line-height:1.15}
.adx-emp{font-size:13px;color:var(--muted);margin-top:3px}
.adx-sal{text-align:right;flex:none}
.adx-sal-v{font-size:16px;font-weight:bold;color:var(--success)}
.adx-sal-l{font-size:11px;color:var(--muted)}
.adx-chips{display:flex;flex-wrap:wrap;gap:8px;padding:16px 24px 0}
.adx-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;padding:18px 24px}
.adx-fact-k{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.adx-fact-v{font-size:14px;font-weight:bold;margin-top:2px}
.adx-sec{padding:0 24px 18px}
.adx-h{font-size:12px;font-weight:bold;text-transform:uppercase;letter-spacing:1.2px;color:var(--ipc-blue);margin-bottom:8px}
.adx-skills{display:flex;flex-wrap:wrap;gap:6px}
.adx-skill{background:#e9f6ee;color:#1a7f45;border:1px solid #c6e8d3;border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600}
.adx-desc{font-size:13.5px;color:#334155;white-space:pre-wrap;margin:0}

/* ---- modal close button ---- */
.modal{position:relative}
/* A dialog that can be widened, for the ones that carry a whole document. */
.modal.wide{max-width:900px}
.modal.full{max-width:min(1400px,96vw);max-height:94vh}
.modal-grow{position:absolute;top:12px;right:52px;width:32px;height:32px;border-radius:50%;border:none;
  background:#eef1f6;color:#5b6b82;font-size:14px;cursor:pointer;font-family:inherit;line-height:1;
  transition:background .15s,color .15s}
.modal-grow:hover{background:var(--ipc-blue);color:#fff}
.modal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;border:none;background:#eef1f6;color:#5b6b82;font-size:15px;cursor:pointer;display:grid;place-items:center;transition:all .15s;z-index:5}
.modal-x:hover{background:#e0453c;color:#fff;transform:rotate(90deg)}

/* ---- enlarged sizzling grid ---- */
.sizzle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:900px){.sizzle-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.sizzle-grid{grid-template-columns:1fr}}
.job.sizzle{display:flex;flex-direction:column;min-height:170px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;transition:all .18s}
.job.sizzle:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,42,80,.12);border-color:#b9d0ec}
.job.sizzle .t{font-size:16px;font-weight:bold}
.job.sizzle .m{font-size:13px;color:var(--muted)}
.sizzle-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto}
.sizzle-sal{font-weight:bold;color:var(--success);font-size:14px}
.sizzle-apply{margin-top:10px;font-size:13px;font-weight:bold;color:var(--ipc-blue)}

/* ---- aggregated jobs section ---- */
.agg-banner{display:flex;gap:20px;align-items:center;background:linear-gradient(120deg,#0D3B6E,#1B5EA9);color:#fff;border-radius:16px;padding:24px 28px}
.agg-ic{font-size:52px;line-height:1;flex:none;width:84px;height:84px;display:grid;place-items:center;background:rgba(255,255,255,.14);border-radius:18px}
.agg-typepill{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:5px 13px;font-size:13px}
.agg-typepill b{font-size:14px}
.agg-list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(max-width:820px){.agg-list{grid-template-columns:1fr}}
.agg-card{display:flex;gap:14px;align-items:stretch;border:1px solid var(--line);border-radius:12px;padding:16px 18px;background:#fff;text-decoration:none;color:var(--ink);transition:all .16s}
.agg-card:hover{border-color:var(--ipc-blue);box-shadow:0 6px 18px rgba(16,42,80,.10);text-decoration:none;transform:translateY(-2px)}
.agg-src{display:inline-flex;align-items:center;font-size:12px;padding:3px 10px;border-radius:999px;font-weight:600}
.agg-src.src-emp{background:#eaf3fb;color:#0D3B6E}
.agg-src.src-agy{background:#f3ecf7;color:#7a3b93}
.agg-src.src-brd{background:#eef4ee;color:#2a7a45}
.agg-title{font-size:16px;font-weight:bold;margin-top:8px;line-height:1.25}
.agg-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.agg-sum{font-size:13px;color:#475569;margin-top:8px;line-height:1.45}
.agg-go{flex:none;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;border-left:1px solid var(--line);padding-left:14px;min-width:118px}
.agg-type{font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-weight:bold;padding:2px 7px;border-radius:5px}
.agg-type.src-emp{background:#eaf3fb;color:#0D3B6E}.agg-type.src-agy{background:#f3ecf7;color:#7a3b93}.agg-type.src-brd{background:#eef4ee;color:#2a7a45}
.agg-apply{font-size:13px;font-weight:bold;color:var(--ipc-blue);white-space:nowrap}

/* ---- external advert (full read on our site) ---- */
.btn.lg{font-size:15px;padding:12px 24px}
/* ---------------- Job advert ----------------
   An advert is a document, not a dashboard. The weight belongs to the words: one clear
   title, a quiet line of facts under it, and body copy set to a width the eye can follow
   without losing its place. Colour appears as a hairline rule and a single soft panel and
   nowhere else, which is what lets somebody read nine hundred words without tiring. */
.ad{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
/* An advert that has a page to itself is set as a column rather than stretched across the
   full width. Left wide, the card runs to the edge of the screen while the words stop where
   the eye can still follow them, and the reader is left staring at a field of empty white. */
.ad.reading{max-width:900px;margin-left:auto;margin-right:auto}
.ad-rule{height:3px;background:var(--ipc-blue)}
.ad-head{padding:28px 32px 22px}
.ad-eyebrow{font-size:11px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ad-title{font-size:27px;font-weight:bold;line-height:1.22;margin:7px 0 0;color:var(--ink)}
.ad-sub{font-size:14.5px;color:var(--muted);margin-top:9px}
.ad-sub b{color:var(--ink);font-weight:bold}
/* The facts a reader checks first, in the order they check them. Labels stay small and
   grey so the eye lands on the answers, not the questions. */
.ad-facts{display:flex;flex-wrap:wrap;gap:26px 34px;padding:16px 32px;background:#fbfcfe;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ad-fact-k{font-size:10.5px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.ad-fact-v{font-size:14.5px;color:var(--ink);margin-top:4px}
.ad-fact-v.soon{color:var(--danger);font-weight:bold}
.ad-body{padding:26px 32px 10px;font-size:15.5px;line-height:1.72;color:#333333;max-width:76ch}
/* One advert, set the same way wherever it is read: on a native job page, on an advert gathered
   from around Zimbabwe, and in the preview an employer checks before publishing. Before this each
   of the three did its own thing, and the gathered ones printed their markup as words. */
.advert-body{font-size:15.5px;line-height:1.72;color:#333;max-width:76ch}
.advert-body .ab-h{font-size:14px;font-weight:bold;color:var(--ipc-blue);letter-spacing:.02em;
  text-transform:uppercase;margin:24px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.advert-body .ab-h:first-child{margin-top:0}
.advert-body .ab-p{margin:0 0 14px}
/* A label at the head of a line, and the handful of things a person scans an advert for. Enough
   weight to catch the eye, not so much that the page turns into a shouting match. */
.advert-body strong{font-weight:600;color:var(--ink)}
.advert-body .ab-list{margin:0 0 16px;padding:0;list-style:none}
/* A tick rather than a bullet: these are the things the job asks of somebody, and a list of
   duties reads better as a checklist than as dots. */
.advert-body .ab-list li{position:relative;padding-left:22px;margin-bottom:7px}
.advert-body .ab-list li:before{content:'';position:absolute;left:2px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--ipc-blue);opacity:.55}
.advert-body>*:last-child{margin-bottom:0}
@media(max-width:640px){.advert-body{font-size:15px;line-height:1.66}}
.ad-body h3,.ad-body h4,.ad-body h5{font-size:15px;font-weight:bold;color:var(--ipc-blue);margin:26px 0 8px}
.ad-body p{margin:0 0 14px}
.ad-body ul,.ad-body ol{margin:0 0 16px 22px;padding:0}
.ad-body li{margin:6px 0}
.ad-body b,.ad-body strong{color:var(--ink)}
.ad-body>:first-child{margin-top:0}
.ad-apply{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;margin:18px 32px 30px;padding:18px 22px;background:#E8F0FA;border:1px solid #cfe0f5;border-radius:10px}
.ad-note{margin:0 32px 26px;padding-top:16px;border-top:1px solid var(--line);font-size:12px;color:var(--muted)}
/* A required skill the reader either has or does not. The state is carried by a coloured
   dot drawn in CSS rather than a tick or a cross typed into the text, so the meaning
   survives a screen reader and the advert keeps its typography clean. */
.skill{display:inline-block;position:relative;font-size:12.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:6px;padding:4px 10px 4px 23px;margin:3px 5px 3px 0}
.skill::before{content:'';position:absolute;left:9px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#b9c4d2}
.skill.met{background:#f4f9f5;border-color:#c6e2cc}
.skill.met::before{background:var(--success)}
.skill.miss{background:#fdf7f7;border-color:#e8d5d5}
.skill.miss::before{background:var(--danger)}
@media(max-width:720px){
  .ad-head,.ad-facts,.ad-body{padding-left:20px;padding-right:20px}
  .ad-apply,.ad-note{margin-left:20px;margin-right:20px}
  .ad-title{font-size:23px}
}
.agg-fam{font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:bold;color:var(--medium);background:#eef4fb;padding:3px 9px;border-radius:5px}
.agg-readmore{margin-top:10px;font-size:13px;font-weight:bold;color:var(--ipc-blue)}
.agg-card{display:block}

/* ---- Labour Market Intelligence layer (ZW-LMI-MASTER v1.0) ---- */
.subnav{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:4px}
.subnav-a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:9px 14px;border-bottom:3px solid transparent;white-space:nowrap;font-weight:600}
.subnav-a:hover{color:var(--ipc-blue);background:#f2f7fd;border-radius:8px 8px 0 0}
.subnav-a.active{color:var(--dark-blue);border-bottom-color:var(--ipc-blue)}

.dashtabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.dashtab{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 13px;cursor:pointer;text-align:left;min-width:132px;box-shadow:var(--shadow)}
.dashtab:hover{border-color:var(--medium)}
.dashtab.active{border-color:var(--ipc-blue);background:linear-gradient(120deg,#0D3B6E,#1B5EA9);color:#fff;box-shadow:0 4px 14px rgba(27,94,169,.28)}
.dashtab-t{font-size:13px;font-weight:bold}
.dashtab .tiny{color:var(--muted)}
.dashtab.active .tiny{color:#d6e6f8}

.covwrap{display:inline-flex;align-items:center;gap:6px}
.covgrade{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 13px 5px 5px;border:1px solid var(--line);background:#fff;white-space:nowrap}
.covletter{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;color:#fff;font-weight:bold;font-size:14px}
.covtext{font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
.covgrade.gA .covletter{background:var(--success)}
.covgrade.gB .covletter{background:var(--medium)}
.covgrade.gC .covletter{background:var(--warn)}
.covgrade.gD .covletter{background:var(--danger)}

.stat.lmistat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat.lmistat .n{font-size:28px;font-weight:bold;color:var(--dark-blue);line-height:1.1}
.stat.lmistat.hero .n{font-size:34px}
.stat.lmistat .l{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.35}

.caveat{display:flex;gap:10px;align-items:flex-start;background:#fff8e8;border:1px solid #f0dcae;border-left:4px solid var(--gold);border-radius:10px;padding:12px 16px;margin-top:16px;font-size:13.5px;line-height:1.55;color:#4a3d1c}
.caveat-mark{flex:none;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.7px;color:#8a6d1f;padding-top:2px}

.lawnote{background:#eef4fb;border:1px solid #d7e6f7;border-left:4px solid var(--ipc-blue);border-radius:10px;padding:13px 16px;font-size:13.5px;line-height:1.6;color:#22364f}

.tablewrap{overflow-x:auto}
table.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
table.dtable th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);border-bottom:2px solid var(--line);padding:9px 12px 9px 0;white-space:nowrap}
table.dtable td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink)}
table.dtable tbody tr:last-child td{border-bottom:none}
table.dtable tr.clickable{cursor:pointer}
table.dtable tr.clickable:hover td{background:#f2f7fd}
table.dtable.wrapcells td{max-width:340px;white-space:normal;line-height:1.5}

.modtile{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.modtile:hover{border-color:var(--ipc-blue);transform:translateY(-2px)}
.modtile-t{font-size:15.5px;font-weight:bold;color:var(--dark-blue)}
.modtile-b{font-size:13px;color:var(--muted);margin-top:6px;line-height:1.55}

.pathline{display:flex;flex-direction:column;gap:0}
.pathstep{display:flex;gap:14px;padding:14px 0;border-bottom:1px dashed var(--line)}
.pathstep:last-child{border-bottom:none}
.pathdot{flex:none;width:32px;height:32px;border-radius:50%;background:linear-gradient(120deg,#0D3B6E,#1B5EA9);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:14px}
.pathlevel{font-size:15px;font-weight:bold;color:var(--dark-blue)}
.pathpay{font-size:13px;color:var(--ipc-blue);font-weight:600;margin-top:4px}
.pathbody{flex:1}

.lawprod{border-bottom:1px solid var(--line);padding:12px 0}
.lawprod:last-child{border-bottom:none}
.lawprod-t{font-size:14.5px;font-weight:bold;color:var(--dark-blue)}

.radaritem{margin-bottom:12px}
.radar-t{font-size:15px;font-weight:bold;color:var(--dark-blue);line-height:1.3}

.ctxitem{border-left:3px solid var(--medium);padding:4px 0 4px 14px;margin-bottom:14px;font-size:14px;line-height:1.6}
.ctxitem:last-child{margin-bottom:0}

.limitrow{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.6}
.limitrow:last-child{border-bottom:none}
.limitnum{flex:none;width:24px;height:24px;border-radius:50%;background:#eef4fb;color:var(--ipc-blue);display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:12px}

@media (max-width:820px){
  .dashtab{min-width:calc(50% - 4px)}
  .subnav{overflow-x:auto;flex-wrap:nowrap}
}

/* Early careers: attachment students and graduate trainees. */
.earlylayout{display:grid;grid-template-columns:290px 1fr;gap:20px;align-items:start}
.earlyside{position:sticky;top:78px}
.earlymain{min-width:0}
.famblock{border-bottom:1px solid var(--line);padding:8px 0}
.famblock:last-child{border-bottom:none}
.famhead{padding:2px 0;align-items:center}
.famhead:hover b{color:var(--ipc-blue)}
.famlist{margin:4px 0 2px 14px;border-left:2px solid var(--line);padding-left:10px}
.famrow{padding:3px 0;align-items:center}
.famrow:hover span{color:var(--ipc-blue)}
.card.tight.arch{opacity:.72;background:#fbfbfc;border-style:dashed}
.chip.tiny{font-size:11px;padding:2px 8px}
.btn.ghost.on{background:var(--ipc-blue);color:#fff;border-color:var(--ipc-blue)}
@media (max-width:900px){
  .earlylayout{grid-template-columns:1fr}
  .earlyside{position:static}
}

/* The labour law library. Additive only. */
.lawtabs{display:flex;gap:6px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px;box-shadow:var(--shadow)}
.lawtab{padding:9px 18px;border-radius:999px;border:none;background:transparent;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;white-space:nowrap}
.lawtab:hover{color:var(--dark-blue);background:#eef4fb}
.lawtab.active{background:linear-gradient(120deg,#0D3B6E,#1B5EA9);color:#fff;box-shadow:0 2px 8px rgba(13,59,110,.28)}
.lawtab .cnt{display:inline-block;margin-left:7px;font-size:11px;font-weight:bold;opacity:.75}

.lawsearch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:16px}
.lawsearch input{flex:1;min-width:240px;padding:12px 16px;border:1px solid var(--line);border-radius:999px;font-family:inherit;font-size:14px;background:#fff;box-shadow:var(--shadow)}
.lawsearch input:focus{outline:none;border-color:var(--ipc-blue)}

.lawitem{background:#fff;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow);transition:border-color .15s,transform .15s}
.lawitem:hover{transform:translateY(-1px);border-color:#cfe0f2}
.lawitem.live{border-left-color:var(--success)}
.lawitem.dead{border-left-color:#b9c4d2;background:#fbfcfe}
.lawitem.due{border-left-color:var(--gold)}
.lawitem-t{font-size:15.5px;font-weight:bold;color:var(--dark-blue);line-height:1.35}
.lawitem-c{font-size:12.5px;color:var(--muted);margin-top:3px}
.lawitem-s{font-size:13.5px;line-height:1.6;margin-top:10px;color:var(--ink)}
.lawitem-n{font-size:12.5px;line-height:1.6;margin-top:10px;color:#4a3d1c;background:#fff8e8;border:1px solid #f0dcae;border-radius:8px;padding:9px 13px}
.lawitem-f{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;font-size:12px;color:var(--muted)}

.lawpill{display:inline-block;padding:4px 11px;border-radius:999px;font-size:11px;font-weight:bold;letter-spacing:.3px;white-space:nowrap}
.lawpill.on{background:#e8f6e8;color:#1c6b1c;border:1px solid #bfe4bf}
.lawpill.off{background:#eef1f5;color:#5b6b82;border:1px solid #dbe2ea}
.lawpill.due{background:#fff4de;color:#8a6d1f;border:1px solid #f0dcae}
.lawpill.ref{background:#eef4fb;color:var(--dark-blue);border:1px solid #d7e6f7}
.lawpill.conf-high{background:#e8f6e8;color:#1c6b1c;border:1px solid #bfe4bf}
.lawpill.conf-medium{background:#fff4de;color:#8a6d1f;border:1px solid #f0dcae}
.lawpill.conf-low{background:#fdeaee;color:#a11b36;border:1px solid #f4c6d0}

.lawgroup{margin-top:26px}
.lawgroup-h{display:flex;align-items:baseline;gap:12px;padding-bottom:9px;border-bottom:2px solid var(--line);margin-bottom:14px}
.lawgroup-t{font-size:17px;font-weight:bold;color:var(--dark-blue)}
.lawgroup-n{font-size:12px;color:var(--muted)}

.langpair{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:14px;box-shadow:var(--shadow)}
.langhead{grid-column:1 / -1;background:linear-gradient(120deg,#0D3B6E,#1B5EA9);color:#fff;padding:13px 20px}
.langhead-t{font-size:15px;font-weight:bold}
.langhead-s{font-size:12.5px;opacity:.86;margin-top:3px;line-height:1.5}
.langcell{padding:16px 20px;font-size:13.5px;line-height:1.65}
.langcell + .langcell{border-left:1px solid var(--line)}
.langcell-l{font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:.7px;color:var(--medium);margin-bottom:7px}
@media(max-width:760px){.langpair{grid-template-columns:1fr}.langcell + .langcell{border-left:none;border-top:1px solid var(--line)}}

.lawnotes p{font-size:13.8px;line-height:1.72;margin:0 0 14px}
.lawnotes p:last-child{margin-bottom:0}

/* Workforce events feed: each record shows its own plain summary and its evidence. */
.evfeed { display: grid; gap: 12px; }
.evcard { border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  padding: 16px 18px; border-left: 5px solid var(--medium); transition: box-shadow .15s, transform .15s; }
.evcard:hover { box-shadow: var(--shadow); transform: translateY(-1px); }
.evcard.t-retrenchment, .evcard.t-layoff { border-left-color: #C0392B; }
.evcard.t-closure { border-left-color: #7F4A2E; }
.evcard.t-hiring_freeze { border-left-color: #8E7CC3; }
.evcard.t-mass_hiring { border-left-color: var(--success); }
.evcard.t-restructuring { border-left-color: var(--gold); }
.evcard.t-industrial_action { border-left-color: var(--ipc-blue); }
.evtop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; }
.evtype { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; background: #eef4fb; color: var(--dark-blue); }
.evcard.t-retrenchment .evtype, .evcard.t-layoff .evtype { background: #fdecea; color: #922b21; }
.evcard.t-mass_hiring .evtype { background: #eaf6ea; color: #1d6b1d; }
.evcard.t-closure .evtype { background: #f6eee9; color: #6b3d24; }
.evcard.t-restructuring .evtype { background: #fbf3e0; color: #8a6712; }
.evcard.t-hiring_freeze .evtype { background: #f1eefa; color: #524080; }
.evdate { font-size: 12px; color: #64748b; font-weight: 600; }
.evtitle { font-size: 17px; font-weight: 700; color: var(--dark-blue); line-height: 1.3; }
.evmeta { display: flex; flex-wrap: wrap; gap: 14px; margin: 6px 0 8px; font-size: 12.5px; color: #64748b; }
.evmeta b { color: #0f172a; font-weight: 700; }
.evsum { font-size: 14.5px; line-height: 1.62; color: #253244; margin: 0; }
.evfoot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line); font-size: 12.5px; }
.evfoot a { font-weight: 600; }
.evsrc { color: #64748b; }
.evwhy { background: #f8fafc; border-radius: 8px; padding: 12px 14px; font-size: 13.5px;
  line-height: 1.6; color: #334155; margin-top: 10px; }
.evwhy b { color: var(--dark-blue); }
.evsumbig { font-size: 16.5px; line-height: 1.68; color: #1e293b; }

/* Five across for the workforce events headline tiles. */
.g5{grid-template-columns:repeat(5,1fr)}
@media(max-width:1100px){.g5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:820px){.g5{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   Build your own analytics. A pick and drop board (Batch L).
   --------------------------------------------------------------------------- */
.bgrid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
@media(max-width:980px){.bgrid{grid-template-columns:1fr}}

/* The palette was already sticky, but it is taller than most windows, and a sticky box taller
   than the viewport cannot hold its place — it rides up with the page until its own bottom
   arrives. So reaching a chip near the foot of the list scrolled the drop zones off the top of
   the screen, and there was nothing left to drag onto. Giving the palette its own scrollbar
   keeps it inside the window, which lets it genuinely stick. */
.bpal{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;
  position:sticky;top:12px;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain}
@media(max-width:980px){.bpal{position:static;max-height:none;overflow:visible}}
.bpalhead{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--dark-blue);font-size:15px;margin-bottom:10px}
.bstep{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:var(--ipc-blue);color:#fff;font-size:13px;font-weight:800;flex:none}
.bpalgroup{margin-top:14px}
.bpallabel{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5b6b82;margin-bottom:7px}

.bsets{display:grid;gap:8px}
.bset{display:block;width:100%;text-align:left;background:#f7f9fc;border:1.5px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;transition:.15s}
.bset:hover{border-color:var(--medium);background:#fff}
.bset.on{border-color:var(--ipc-blue);background:#eef4fc;box-shadow:0 0 0 2px rgba(27,94,169,.12)}
.bsetname{display:block;font-weight:800;color:var(--dark-blue);font-size:14px}
.bsetblurb{display:block;font-size:11.5px;color:#5b6b82;line-height:1.35;margin-top:2px}

.bchips{display:flex;flex-wrap:wrap;gap:6px}
.bchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 11px 5px 8px;font-size:12.5px;font-weight:600;color:#152238;cursor:grab;user-select:none;transition:.15s}
.bchip:hover{border-color:var(--ipc-blue);background:#f3f8ff;transform:translateY(-1px)}
.bchip:active{cursor:grabbing}
.bchip.dragging{opacity:.45;transform:scale(.96)}
.bchipgrip{color:#b6c2d3;font-size:11px;letter-spacing:-1px}
.bchip.k-measure{border-left:4px solid var(--ipc-blue)}
.bchip.k-slice{border-left:4px solid var(--gold)}
.bchip.k-narrow{border-left:4px solid var(--success)}

.bwork{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}
.bsentence{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--dark-blue);font-size:15px;margin-bottom:12px}
/* And the targets stay put while the answer beneath them scrolls, so there is always somewhere
   to drop whatever has just been picked up. */
/* A box now holds several pieces, each with its own way out. */
.bfills{display:flex;flex-direction:column;gap:7px}
.bfills .bfill + .bfill{border-top:1px solid var(--line);padding-top:7px}
.bfillrow{display:flex;align-items:center;justify-content:space-between;gap:8px}
.bfillx{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;
  padding:2px 4px;border-radius:5px;font-family:inherit;flex:none}
.bfillx:hover{background:#fde8e8;color:var(--danger)}

/* Several counts, each on its own scale. */
.bmulti{display:flex;flex-direction:column;gap:16px}
.bmulticharts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
.bmutual{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:#fff}
.bmutualhead{font-size:13px;font-weight:bold;color:var(--ipc-blue);margin-bottom:9px;
  border-bottom:1px solid var(--line);padding-bottom:6px}
.caveat.refused{background:#fff4e5;border-color:#f0d0a0}

.bzones{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;
  position:sticky;top:12px;z-index:5;background:#fff;padding-bottom:12px}
@media(max-width:820px){.bzones{grid-template-columns:1fr;position:static}}
/* While something is being carried, every target says so, rather than waiting to be hovered. */
body.bdragging .bzone{border-color:var(--ipc-blue);background:#f5faff}
body.bdragging .bzone .bzonehint{color:var(--ipc-blue)}
.bzone{border:2px dashed #c7d3e3;border-radius:12px;background:#fbfcfe;padding:11px 12px;min-height:104px;transition:.15s}
.bzone.full{border-style:solid;background:#fff}
.bzone.over{border-color:var(--ipc-blue);background:#eef4fc;box-shadow:0 0 0 3px rgba(27,94,169,.14)}
body.bdragging .bzone{border-color:var(--medium);background:#f4f9ff}
.bzone.z-measure.full{border-color:var(--ipc-blue)}
.bzone.z-slice.full{border-color:var(--gold)}
.bzone.z-narrow.full{border-color:var(--success)}
.bzonetop{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:6px}
.bzonetitle{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#5b6b82}
.bzonex{border:none;background:transparent;color:#8b98ab;cursor:pointer;font-size:12px;line-height:1;padding:3px 5px;border-radius:6px}
.bzonex:hover{background:#f0f3f8;color:#152238}
.bzonehint{font-size:12.5px;color:#8b98ab;line-height:1.4}
.bfilltext{font-weight:800;color:var(--dark-blue);font-size:16px;line-height:1.25}
.bfillhelp{font-size:12px;color:#5b6b82;line-height:1.4;margin-top:4px}
.bnarrow{display:flex;align-items:center;gap:6px;margin-bottom:6px}
.bnarrowname{font-size:12px;font-weight:700;color:var(--dark-blue);flex:none}
.bnarrow select{flex:1;min-width:0;font-size:12.5px;padding:4px 6px}

.bpicker{margin-top:16px}
.bpicklabel{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#5b6b82;margin-bottom:7px}
.bcharts{display:flex;flex-wrap:wrap;gap:8px}
.bchart{display:flex;flex-direction:column;align-items:center;gap:4px;width:88px;padding:9px 4px;background:#fff;border:1.5px solid var(--line);border-radius:10px;cursor:pointer;color:var(--ipc-blue);transition:.15s}
.bchart:hover{border-color:var(--ipc-blue);background:#f3f8ff}
.bchart.on{border-color:var(--ipc-blue);background:#eef4fc;box-shadow:0 0 0 2px rgba(27,94,169,.12)}
.bchart.off{opacity:.4;color:#8b98ab}
.bchartname{font-size:11.5px;font-weight:700;color:#152238}
.bwins{display:flex;flex-wrap:wrap;gap:6px}
.bwin{background:#fff;border:1.5px solid var(--line);border-radius:999px;padding:5px 13px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.15s}
.bwin:hover{border-color:var(--ipc-blue)}
.bwin.on{border-color:var(--ipc-blue);background:var(--ipc-blue);color:#fff}

.bstarters{display:flex;flex-wrap:wrap;gap:8px}
.bstarter{background:#f7f9fc;border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--dark-blue);cursor:pointer;transition:.15s}
.bstarter:hover{border-color:var(--ipc-blue);background:#eef4fc;transform:translateY(-1px)}

.bfigure{min-height:120px}
.breading{font-size:15.5px;line-height:1.6;color:#152238;font-weight:600;background:#f7f9fc;border-left:4px solid var(--gold);border-radius:0 8px 8px 0;padding:11px 14px}
.bbignum{text-align:center;padding:26px 10px}
.bbigv{font-size:56px;font-weight:800;color:var(--ipc-blue);line-height:1}
.bbigl{font-size:15px;font-weight:700;color:var(--dark-blue);margin-top:8px}
.plainlist{margin:0;padding-left:18px}
.plainlist li{font-size:13.5px;line-height:1.6;color:#3d4a5c;margin-bottom:6px}

/* ==========================================================================
   Zimbabwe Employer Brand Index (bx-) and Padare, the job hunt talking
   circle (pd-). Both are additive: nothing above this line is changed.
   ========================================================================== */

.subnav-a.on{color:var(--dark-blue);border-bottom-color:var(--ipc-blue)}
.filter-pill.on{background:var(--ipc-blue);color:#fff;border-color:var(--ipc-blue)}

/* ---------- Employer Brand Index ---------- */

.bx-head{margin:0 0 18px}
.bx-head h1{font-size:32px}
.bx-head .lead{color:var(--muted);font-size:16px;max-width:760px;margin-top:6px}
.bx-sample{background:#fff8e8;border:1px solid #f0dcae;border-left:4px solid var(--gold);
  border-radius:10px;padding:12px 16px;font-size:13px;color:#6b551e;margin:14px 0}

.bx-search{background:linear-gradient(135deg,#0D3B6E,#1B5EA9);border-radius:16px;padding:26px 24px;color:#fff}
.bx-search h2{color:#fff;font-size:23px}
.bx-search .sub{color:#cfe2f7;font-size:14px;margin-bottom:14px}
.bx-searchrow{display:flex;gap:10px;flex-wrap:wrap}
.bx-searchrow input,.bx-searchrow select{flex:1;min-width:170px;padding:12px 14px;border-radius:10px;
  border:none;font-size:15px;font-family:inherit}
.bx-searchrow input{flex:2.2}
.bx-results{margin-top:14px;display:grid;gap:10px}

.bx-card{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:13px 16px;cursor:pointer;transition:transform .13s,box-shadow .13s,border-color .13s}
.bx-card>.grow>b{display:block;font-size:15.5px;margin-bottom:2px}
.bx-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--ipc-blue)}
.bx-logo{width:44px;height:44px;flex:none;border-radius:10px;background:#eef3fa;color:var(--dark-blue);
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:16px}
.bx-logo.big{width:64px;height:64px;font-size:22px;border-radius:14px}
.bx-cardnum{text-align:right;flex:none;min-width:92px}
.bx-cardnum b{font-size:24px;line-height:1}
.bx-cardnum span{display:block;font-size:11px;color:var(--muted)}
.bx-mini{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;cursor:pointer;
  border:1px solid transparent}
.bx-mini:hover{background:#f2f7fd;border-color:#d6e6f7}
.bx-mini .bx-rbar{margin-top:0}
.bx-two{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
@media(max-width:900px){.bx-two{grid-template-columns:1fr}}

.bx-why{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bx-why > div{background:#f7fafd;border:1px solid var(--line);border-radius:12px;padding:16px}
@media(max-width:820px){.bx-why{grid-template-columns:1fr}}

.bx-top-preview{display:grid;gap:8px}
.bx-rank{width:28px;height:28px;flex:none;border-radius:8px;background:var(--dark-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:bold;font-size:13px}
.bx-num{width:52px;flex:none;text-align:right;font-weight:bold;font-size:16px}

.bx-pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12.5px;font-weight:bold;color:#fff}
.bx-hero{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:center}
@media(max-width:820px){.bx-hero{grid-template-columns:1fr}}
.bx-hero-l{display:flex;gap:16px;align-items:flex-start;text-align:left}
.bx-hero-l h1,.bx-hero-l h2{font-size:28px;margin:0 0 4px}
.bx-hero-r{display:flex;justify-content:center}
.bx-big{font-size:15px;color:var(--muted);margin-top:8px;max-width:640px}

.bx-raters{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:820px){.bx-raters{grid-template-columns:1fr}}
.bx-rater{background:#f7fafd;border:1px solid var(--line);border-radius:12px;padding:15px}
.bx-rater-n{font-size:29px;font-weight:bold;line-height:1}
.bx-rbar{height:8px;border-radius:999px;background:#e6edf5;overflow:hidden;margin-top:9px}
.bx-rbar > span{display:block;height:100%;border-radius:999px;transition:width .8s cubic-bezier(.22,1,.36,1)}

.bx-dim{display:flex;align-items:center;gap:12px;margin:11px 0}
.bx-dim-l{width:38%;max-width:210px;flex:none;font-size:13.5px;font-weight:600;
  display:flex;flex-direction:column;gap:1px;line-height:1.25}
.bx-dim-l .tiny{font-weight:normal}
.bx-dim-v{width:78px;flex:none;text-align:right;font-weight:bold;font-size:15px;
  display:flex;flex-direction:column;align-items:flex-end;gap:1px;line-height:1.25}
.bx-dim-v .tiny{font-weight:normal;white-space:nowrap}
.bx-track{position:relative;height:16px;border-radius:999px;background:#eef2f7;flex:1;overflow:visible}
.bx-fill{height:100%;border-radius:999px;width:0;transition:width .85s cubic-bezier(.22,1,.36,1)}
.bx-mark{position:absolute;top:-4px;width:2px;height:24px;background:#33455f;opacity:.55}
.bx-note{font-size:12.5px;color:var(--muted);width:150px;flex:none;text-align:right}
.bx-note.good{color:var(--success);font-weight:600}
.bx-note.bad{color:#c0392b;font-weight:600}
.bx-note.flat{color:var(--muted)}

.bx-themes{display:grid;gap:9px}
.bx-theme{display:flex;align-items:center;gap:12px}
.bx-theme-n{width:190px;flex:none;font-size:13.5px}
.bx-theme-bar{height:12px;border-radius:999px;background:linear-gradient(90deg,#2E86AB,#7cc3e0);min-width:4px}

.bx-verbs{display:grid;gap:12px}
.bx-verb{border:1px solid var(--line);border-radius:12px;padding:15px 17px;background:#fff}
.bx-verb-n{font-size:12px;color:var(--muted);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.bx-quote{border-left:3px solid var(--line);padding:2px 0 2px 12px;margin:9px 0;font-size:14.5px}
.bx-quote.good{border-left-color:var(--success)}
.bx-quote.bad{border-left-color:#e07b39}
.bx-quote-k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:bold}
.bx-reply{background:#f2f7fd;border:1px solid #d6e6f7;border-radius:10px;padding:12px 14px;margin-top:10px;font-size:14px}
.bx-gate{background:linear-gradient(135deg,#0D3B6E,#2E86AB);color:#fff;border-radius:16px;padding:26px}
.bx-gate h3{color:#fff}
.bx-gate p{color:#d7e7f7}

.bx-podium{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:end}
@media(max-width:820px){.bx-podium{grid-template-columns:1fr}}
.bx-pod{border-radius:16px;padding:22px 18px;text-align:center;color:#fff;box-shadow:var(--shadow)}
.bx-pod.p1{background:linear-gradient(160deg,#d9a520,#b8860b);padding-top:34px;padding-bottom:34px}
.bx-pod.p2{background:linear-gradient(160deg,#8fa3b8,#6d8299)}
.bx-pod.p3{background:linear-gradient(160deg,#c08457,#a0653c)}
.bx-pod-rank{font-size:12px;letter-spacing:.14em;text-transform:uppercase;opacity:.9}
.bx-pod-n{font-size:18px;font-weight:bold;margin:7px 0 3px}
.bx-pod-i{font-size:40px;font-weight:bold;line-height:1;color:#fff !important}
.bx-pod .bx-pill{background:rgba(255,255,255,.22) !important;color:#fff !important;margin-top:8px}
.bx-pod .tiny.muted{color:rgba(255,255,255,.85);margin-top:8px}
.bx-pod{cursor:pointer;transition:transform .18s ease}
.bx-pod:hover{transform:translateY(-3px)}

.bx-rate{max-width:780px;margin:0 auto}
.bx-steps{display:flex;gap:6px;margin-bottom:20px;flex-wrap:wrap}
.bx-step{flex:1;min-width:88px;text-align:center;font-size:11.5px;color:var(--muted);
  border-top:4px solid var(--line);padding-top:8px}
.bx-step.on{color:var(--dark-blue);font-weight:bold;border-top-color:var(--ipc-blue)}
.bx-step.done{border-top-color:var(--success);color:var(--success)}
.bx-step-n{display:block;font-size:11px}

.bx-choices{display:grid;gap:10px}
.bx-choice{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:12px;
  padding:14px 16px;cursor:pointer;font-family:inherit;font-size:15px;transition:all .13s}
.bx-choice:hover{border-color:var(--ipc-blue);background:#f7fbff}
.bx-choice.on{border-color:var(--ipc-blue);background:#eaf3fc;box-shadow:0 0 0 3px rgba(27,94,169,.12)}

.bx-q{margin:26px 0;padding-bottom:22px;border-bottom:1px solid var(--line)}
.bx-q:last-child{border-bottom:none}
.bx-scale{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:12px}
@media(max-width:700px){.bx-scale{grid-template-columns:1fr}}
/* The number and its meaning are two lines, not one word. Inline they ran together and the
   scale read "1Very poor", "2Poor", which is the first thing a person sees on this form. */
.bx-sc{background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:11px 10px;
  cursor:pointer;font-family:inherit;font-size:12.5px;text-align:center;line-height:1.35;transition:all .13s;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px}
.bx-sc>b{font-size:17px;line-height:1}
.bx-sc>.tiny{font-size:11.5px;opacity:.85}
/* The empty state for a ranking nobody has entered yet. */
.bx-empty{text-align:center;padding:34px 22px}
.bx-empty .row{justify-content:center}
.bx-sc:hover{border-color:var(--medium)}
.bx-sc.on{color:#fff;font-weight:bold;border-color:transparent}
.bx-sc.on.v1{background:#c0392b}
.bx-sc.on.v2{background:#e07b39}
.bx-sc.on.v3{background:#D4A843;color:#3a2c05}
.bx-sc.on.v4{background:#4a9d3f}
.bx-sc.on.v5{background:#1f8a4c}

.bx-nps{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.bx-npsn{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--line);background:#fff;
  cursor:pointer;font-family:inherit;font-weight:bold;font-size:14px;transition:all .12s}
.bx-npsn:hover{border-color:var(--ipc-blue)}
.bx-npsn.on{background:var(--ipc-blue);color:#fff;border-color:var(--ipc-blue)}
.bx-prio{display:flex;gap:8px;flex-wrap:wrap}

.bx-rules{display:grid;gap:8px;margin-top:10px}
.bx-rule{background:#f7fafd;border-left:3px solid var(--medium);border-radius:8px;padding:10px 13px;font-size:13.5px}

/* ---------- Padare ---------- */

.pd-mast{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;
  background:linear-gradient(135deg,#123f2c,#1f7a52);border-radius:18px;padding:28px 26px;color:#fff}
.pd-mast-l{flex:1;min-width:280px}
.pd-mast-r{flex:none;text-align:right}
.pd-mast-r .btn{background:#fff;color:#155c3c}
.pd-mast-r .btn:hover{background:#eafaf1}
.pd-mast-r .muted{color:#c8e8d8 !important}
.pd-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#a8dcc2;font-weight:bold}
.pd-kicker2{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:bold}
.pd-h1{font-size:32px;color:#fff;margin:6px 0 8px}
.pd-h1.sm{font-size:26px;color:var(--ink)}
.pd-lead{color:#d5efe2;font-size:15.5px;max-width:640px;margin:0}
.pd-h1.sm + .muted,.card .pd-lead{color:var(--muted)}

.pd-sample{background:#fff8e8;border:1px solid #f0dcae;border-left:4px solid var(--gold);
  border-radius:10px;padding:12px 16px;font-size:13px;color:#6b551e;margin:14px 0}

.pd-layout{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start;margin-top:16px}
@media(max-width:980px){.pd-layout{grid-template-columns:1fr}}
.pd-side{display:grid;gap:14px}
.pd-main{min-width:0}

.pd-filters{padding:16px 18px}
.pd-search{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);
  font-size:15px;font-family:inherit}
.pd-search:focus{outline:none;border-color:var(--ipc-blue)}
.pd-chiprow{margin-top:12px}
.pd-chiplabel{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:bold}
.pd-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}

.pd-sorts{display:flex;gap:4px;background:#eef2f7;border-radius:999px;padding:3px}
.pd-sort{border:none;background:none;padding:7px 15px;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:13px;color:var(--muted);font-weight:600}
.pd-sort.on{background:#fff;color:var(--dark-blue);box-shadow:0 1px 3px rgba(16,42,80,.14)}

.pd-list{display:grid;gap:14px;margin-top:12px}
.pd-card{padding:18px 20px;transition:box-shadow .15s,transform .15s}
.pd-card:hover{box-shadow:0 6px 22px rgba(16,42,80,.09)}
.pd-card.pinned{border:1.5px solid var(--gold)}
.pd-pin{display:inline-block;background:var(--gold);color:#3a2c05;font-size:11px;font-weight:bold;
  padding:3px 10px;border-radius:999px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}

.pd-who{display:flex;align-items:center;gap:11px}
.pd-face{width:38px;height:38px;flex:none;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:bold;font-size:13px;letter-spacing:.02em}
.pd-who.small .pd-face{width:30px;height:30px;font-size:11px}
.pd-handle{font-weight:bold;font-size:14.5px}
.pd-handle.small{font-size:13.5px}

.pd-mood{font-size:11px;font-weight:bold;padding:4px 11px;border-radius:999px;flex:none;
  text-transform:uppercase;letter-spacing:.05em}
.pd-mood-hard{background:#fdecec;color:#a5271b}
.pd-mood-learned{background:#e9f3fa;color:#1a5c7d}
.pd-mood-good{background:#e8f6ec;color:#166b38}

.pd-title{font-size:19px;margin:12px 0 6px;cursor:pointer;line-height:1.3}
.pd-title:hover{color:var(--ipc-blue)}
.pd-body{margin:0;color:#3b4a60;font-size:14.5px;cursor:pointer;white-space:pre-wrap}
.pd-img{width:100%;max-height:330px;object-fit:cover;border-radius:12px;margin-top:12px;cursor:pointer;
  border:1px solid var(--line)}
.pd-img.big{max-height:none;object-fit:contain;cursor:default}
.pd-foot{display:flex;align-items:center;gap:10px;margin-top:13px;flex-wrap:wrap}
.pd-topic{font-size:12px;background:#eef3fa;color:var(--dark-blue);padding:4px 12px;border-radius:999px;font-weight:600}
.pd-topic:hover{text-decoration:none;background:#dfeaf7}
.pd-open{border:none;background:none;color:var(--ipc-blue);font-family:inherit;font-size:13.5px;
  font-weight:600;cursor:pointer;padding:0}

.pd-react{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.pd-r{display:flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:7px 14px;cursor:pointer;font-family:inherit;font-size:12.5px;
  color:var(--muted);transition:all .13s}
.pd-r:hover{border-color:var(--medium);color:var(--dark-blue)}
.pd-r b{color:var(--ink)}
.pd-r-ico{font-size:13px}
.pd-r.on{background:#eaf3fc;border-color:var(--ipc-blue);color:var(--dark-blue);font-weight:600}
.pd-r-heart.on{background:#fdeef2;border-color:#c94f77;color:#a12d52}
.pd-r-metoo.on{background:#fff5e6;border-color:var(--gold);color:#7a5c12}
.pd-react.big .pd-r{padding:10px 18px;font-size:13.5px}

.pd-story{padding:24px 26px}
.pd-storyt{font-size:29px;margin:16px 0 12px;line-height:1.22}
.pd-storyb p{font-size:16px;line-height:1.68;color:#2b3a4f;margin:0 0 14px}
.pd-storyfoot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.pd-flag{border:none;background:none;color:var(--muted);font-family:inherit;font-size:12.5px;
  cursor:pointer;text-decoration:underline}
.pd-flag:hover{color:var(--danger)}

.pd-writeback{margin-bottom:18px}
.pd-reply{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14.5px;resize:vertical}
.pd-reply:focus{outline:none;border-color:var(--ipc-blue)}
.pd-comments{display:grid;gap:2px}
.pd-comment{padding:14px 0;border-top:1px solid var(--line)}
.pd-comment.nested{border-top:none;padding:10px 0 0}
.pd-cbody{margin:8px 0 0;font-size:14.5px;color:#33425a;white-space:pre-wrap}
.pd-crow{display:flex;align-items:center;gap:14px;margin-top:8px}
.pd-chelp,.pd-creply{border:none;background:none;font-family:inherit;font-size:12.5px;
  color:var(--muted);cursor:pointer;padding:0;font-weight:600}
.pd-chelp:hover,.pd-creply:hover{color:var(--ipc-blue)}
.pd-chelp.on{color:var(--ipc-blue)}
.pd-replies{margin:8px 0 0 22px;padding-left:14px;border-left:2px solid var(--line)}

.pd-strip h4,.pd-side h4{margin:0 0 10px;font-size:15px}
.pd-nums{display:grid;gap:11px}
.pd-num{display:flex;gap:10px;align-items:baseline}
.pd-num b{font-size:21px;color:var(--dark-blue);min-width:56px}
.pd-num span{font-size:12.5px;color:var(--muted)}
.pd-sotw{border-left:4px solid var(--gold)}
.pd-sotw-t{display:block;font-size:15.5px;margin:6px 0 6px;line-height:1.3}
.pd-mostrow{display:flex;gap:11px;align-items:center;padding:9px 8px;border-radius:9px;cursor:pointer}
.pd-mostrow:hover{background:#f2f7fd}
.pd-mostn{width:24px;height:24px;flex:none;border-radius:7px;background:var(--dark-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold}
.pd-mostt{font-size:13.5px;font-weight:600;line-height:1.32}
.pd-mostrow.big{padding:13px 10px;border-bottom:1px solid var(--line);border-radius:0}
.pd-mostrow.big .pd-mostt{font-size:15px}
.pd-mostc{width:120px;flex:none;text-align:right}
.pd-mostc b{display:block;font-size:17px}
@media(max-width:700px){.pd-mostc{display:none}}

.pd-rulesbox .pd-rule{background:#f7fafd;border-left:3px solid var(--medium);border-radius:8px;
  padding:9px 12px;font-size:12.5px;margin-bottom:6px}
.pd-rulelist{display:grid;gap:9px;margin-top:10px}
.pd-rulebig{background:#f7fafd;border-left:4px solid var(--medium);border-radius:10px;padding:13px 16px;font-size:14.5px}

.pd-step{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);
  font-weight:bold;margin:24px 0 10px;padding-top:16px;border-top:1px solid var(--line)}
.pd-picks{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.pd-picks.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.pd-picks,.pd-picks.three{grid-template-columns:1fr}}
.pd-pick{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:11px;
  padding:12px 14px;cursor:pointer;font-family:inherit;transition:all .13s;display:block}
.pd-pick b{display:block;font-size:14px;margin-bottom:3px}
.pd-pick:hover{border-color:var(--ipc-blue);background:#f7fbff}
.pd-pick.on{border-color:var(--ipc-blue);background:#eaf3fc;box-shadow:0 0 0 3px rgba(27,94,169,.12)}
.pd-pick.mood.on{border-color:var(--pdm);background:#fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--pdm) 18%,transparent)}
.pd-in-title{width:100%;padding:13px 15px;border-radius:10px;border:1.5px solid var(--line);
  font-size:17px;font-family:inherit;font-weight:600}
.pd-in-body{width:100%;padding:14px 16px;border-radius:10px;border:1.5px solid var(--line);
  font-size:15.5px;font-family:inherit;line-height:1.6;resize:vertical}
.pd-in-title:focus,.pd-in-body:focus{outline:none;border-color:var(--ipc-blue)}
.pd-warn{color:#c0392b !important;font-weight:600}
.pd-imgprev{margin-top:12px;display:grid;gap:9px;justify-items:start}
.pd-imgprev img{max-width:100%;max-height:260px;border-radius:12px;border:1px solid var(--line)}
.pd-prompts{display:grid;gap:7px}
.pd-prompt{text-align:left;background:#f7fafd;border:1px solid var(--line);border-radius:9px;
  padding:10px 12px;font-family:inherit;font-size:13px;cursor:pointer;color:#33425a}
.pd-prompt:hover{border-color:var(--ipc-blue);background:#eef5fd}
.pd-member{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--muted)}

.pd-readings{display:grid;gap:9px}
.pd-reading{background:#f7fafd;border-left:4px solid var(--ipc-blue);border-radius:10px;
  padding:13px 16px;font-size:15px}
.pd-big{text-align:center;padding:22px 14px}
.pd-bign{font-size:34px;font-weight:bold;color:var(--dark-blue);line-height:1}
.pd-bigl{font-size:12.5px;color:var(--muted);margin-top:6px}
.pd-rise{display:flex;justify-content:space-between;align-items:center;padding:10px 0;
  border-bottom:1px solid var(--line)}
.pd-riseup{color:var(--success);font-weight:bold;font-size:13px}
.pd-held{background:#fff8e8;border:1px solid #f0dcae;border-radius:10px;padding:12px 15px;
  font-size:13.5px;color:#6b551e;margin-top:12px}
.pd-empty{text-align:center;padding:36px 20px}
.pd-more{text-align:center;margin-top:16px}

/* ---------------- The landing page ----------------
   The old hero carried nine entry cards inside the blue, which filled the first screen with
   choices of equal weight and left a visitor to work out which one was theirs. A person arrives
   to do one of two things. So the hero asks that, the jobs follow immediately because they are
   the product, and the other seven doors are set out below as a directory rather than as seven
   more invitations competing with the first two. */
.lp-hero{background:linear-gradient(160deg,var(--dark-blue) 0%,var(--ipc-blue) 100%);color:#fff;padding:56px 0 44px}
.lp-h1{font-size:40px;line-height:1.12;letter-spacing:-.5px;margin:0;max-width:22ch}
.lp-sub{font-size:16px;line-height:1.55;color:#cfe0f3;margin:14px 0 0;max-width:60ch}
.lp-search{margin-top:26px;box-shadow:0 10px 30px rgba(8,24,48,.22)}
.lp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.lp-chip{background:rgba(255,255,255,.10);color:#fff;border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:6px 14px;font-size:13px;font-family:inherit;cursor:pointer;transition:.12s}
.lp-chip:hover{background:rgba(255,255,255,.20)}
.lp-facts{margin-top:18px;font-size:13px;color:#a9c6e6;letter-spacing:.2px}

/* The two things somebody is actually here to do. */
.lp-paths{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:30px}
.lp-path{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.20);border-radius:12px;padding:20px 22px}
.lp-path h3{margin:0;font-size:17px;color:#fff}
.lp-path p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:#cfe0f3}
.lp-path-a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.lp-path-a .btn{background:#fff;color:var(--dark-blue)}
.lp-path-a .btn:hover{background:#eaf2fb}
.lp-path-a .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45)}
.lp-path-a .btn.ghost:hover{background:rgba(255,255,255,.12)}

/* What the platform promises, stated once and plainly. */
.lp-trust{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.lp-trust-i{background:#fff;border:1px solid var(--line);border-left:3px solid var(--ipc-blue);
  border-radius:8px;padding:16px 18px}
.lp-trust-i b{display:block;font-size:14px;color:var(--ink)}
.lp-trust-i p{margin:6px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}

/* Everything else, as a directory. */
.lp-doors{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.lp-door{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px 20px;
  text-decoration:none;color:inherit;transition:.14s}
.lp-door:hover{border-color:var(--ipc-blue);box-shadow:0 4px 18px rgba(16,42,80,.09);text-decoration:none;transform:translateY(-1px)}
.lp-door b{display:block;font-size:15px;color:var(--ink)}
.lp-door p{margin:7px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}
.lp-door-cta{display:inline-block;margin-top:12px;font-size:13px;font-weight:bold;color:var(--ipc-blue)}
.lp-sector{cursor:pointer;transition:.14s}
.lp-sector:hover{border-color:var(--ipc-blue)}
.lp-empty{text-align:center;padding:38px 24px}
.lp-empty p{max-width:60ch;margin:10px auto 0}

@media(max-width:900px){
  .lp-paths,.lp-trust,.lp-doors{grid-template-columns:1fr}
  .lp-h1{font-size:30px;max-width:none}
  .lp-hero{padding:38px 0 32px}
}

/* ---------------- The operations console ----------------
   Each panel answers one question — is this part working — so the state has to be readable
   before any of the words are. Colour carries it, a dot repeats it for anybody who cannot use
   the colour, and the word says it outright so nothing depends on either. */
.ops-overall{font-size:12px;font-weight:bold;padding:6px 14px;border-radius:999px;white-space:nowrap}
.ops-overall.ok{background:#e7f2ea;color:var(--success)}
.ops-overall.attention{background:#fff4e2;color:#a8690c}
.ops-overall.off{background:#fdeaea;color:var(--danger)}
.ops{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:14px}
.ops-card{background:#fff;border:1px solid var(--line);border-left:4px solid #cbd5e1;border-radius:10px;padding:16px 18px}
.ops-card.ok{border-left-color:var(--success)}
.ops-card.attention{border-left-color:var(--warn)}
.ops-card.off{border-left-color:var(--danger)}
.ops-top{display:flex;align-items:center;gap:9px}
.ops-dot{width:9px;height:9px;border-radius:50%;flex:none;background:#cbd5e1}
.ops-card.ok .ops-dot{background:var(--success)}
.ops-card.attention .ops-dot{background:var(--warn)}
.ops-card.off .ops-dot{background:var(--danger)}
.ops-name{font-size:11px;font-weight:bold;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ops-state{font-size:12px;font-weight:bold}
.ops-card.ok .ops-state{color:var(--success)}
.ops-card.attention .ops-state{color:#a8690c}
.ops-card.off .ops-state{color:var(--danger)}
.ops-head{font-size:15px;font-weight:bold;color:var(--ink);margin-top:10px;line-height:1.3}
.ops-detail{font-size:13px;line-height:1.55;color:var(--muted);margin:6px 0 0}
/* The command that fixes it, so nobody has to go and look it up. */
.ops-action{display:block;margin-top:10px;background:#f4f7fb;border:1px solid var(--line);border-radius:6px;
  padding:7px 10px;font-family:Consolas,Menlo,monospace;font-size:12px;color:var(--dark-blue);word-break:break-all}
.ops-nums{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.ops-num{font-size:13px}
.ops-num-k{color:var(--muted);margin-right:6px}
.ops-log{width:100%;border-collapse:collapse;font-size:13px}
.ops-log td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.ops-log tr:last-child td{border-bottom:none}
.ops-act{font-weight:bold;color:var(--ipc-blue);white-space:nowrap}

/* ---------------------------------------------------------------------------
   Printing a dashboard, and saving it as a PDF.
   ---------------------------------------------------------------------------
   There is no PDF library here, and there does not need to be one: every browser
   can already write a PDF, and asking it to do so costs nothing and adds nothing
   to install. What was missing was a page worth printing, so this is that page —
   A4, Arial throughout, IPC Blue for the headings and the rules, body text in
   dark grey rather than black, and the mark on the cover only, which is where the
   brand standard puts it.
   --------------------------------------------------------------------------- */
.printonly { display: none; }

@media print {
  @page { size: A4; margin: 18mm 14mm 16mm; }

  html, body { background: #fff !important; }
  body { font-family: Arial, Helvetica, sans-serif; color: #333333; font-size: 10.5pt; }

  /* Everything that belongs to the screen and not to the page. */
  #topbar, #footer, #assistant-root, .joindock, .asst-launch, .asst-panel,
  .subnav, .lmi-subnav, .bpal, .starterstrip, .bzones, .bpicker, .bwins, .bcharts,
  .btn, button, select, input, textarea, .copylink, .noprint { display: none !important; }

  .printonly { display: block; }
  .wrap { max-width: none; padding: 0; }
  .card { break-inside: avoid; page-break-inside: avoid; box-shadow: none; border: 1px solid #CCCCCC; }
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }

  /* Heading 1 carries a rule beneath it, in IPC Blue. */
  h1 { font-size: 16pt; color: #1B5EA9; border-bottom: 1.5pt solid #1B5EA9; padding-bottom: 4pt; }
  h2 { font-size: 14pt; color: #2E86AB; }
  h3 { font-size: 12pt; color: #1B5EA9; }

  table { border-collapse: collapse; width: 100%; font-size: 9pt; }
  thead th { background: #1B5EA9 !important; color: #fff !important; font-weight: bold;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  th, td { border: 0.5pt solid #CCCCCC; padding: 4pt 6pt; }

  /* Bars and tints have to keep their colour or the charts say nothing. */
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* The cover. A left sidebar in IPC Blue, which is the standard's choice for a
     technical analysis, with the mark centred on the white beside it. */
  /* overflow keeps the sidebar on the cover. Without it the bar was drawn taller than the page
     it belongs to and carried on down the left edge of the dashboard that follows. */
  .pcover { display: block; position: relative; height: 247mm; page-break-after: always;
    padding: 0 0 0 34mm; overflow: hidden; }
  .pcover::before { content: ''; position: absolute; left: -14mm; top: -18mm;
    width: 24mm; bottom: -16mm; background: #1B5EA9; }
  .pcover-mark { width: 280px; max-width: 70%; height: auto; display: block; margin: 40mm 0 0; }
  .pcover-kicker { margin-top: 26mm; font-size: 10pt; letter-spacing: .12em;
    text-transform: uppercase; color: #666666; }
  .pcover-title { font-size: 26pt; font-weight: bold; color: #1B5EA9; margin: 6pt 0 0; line-height: 1.25; }
  .pcover-sub { font-size: 12pt; color: #333333; margin: 10pt 0 0; max-width: 120mm; }
  .pcover-meta { position: absolute; bottom: 12mm; left: 34mm; font-size: 9pt; color: #666666; }
  .pcover-meta b { color: #333333; }
  .pcover-rule { width: 60mm; height: 2pt; background: #D4A843; margin: 14pt 0 0; }

  /* Repeated on every page after the cover. The standard puts the company name in
     the header as text and keeps the mark off it entirely. */
  .prunning-head { position: fixed; top: -12mm; left: 0; right: 0;
    font-size: 9pt; font-weight: bold; color: #1B5EA9; text-align: right;
    border-bottom: 0.5pt solid #1B5EA9; padding-bottom: 3pt; }
  .prunning-foot { position: fixed; bottom: -11mm; left: 0; right: 0;
    font-size: 8pt; color: #666666; border-top: 0.5pt solid #1B5EA9; padding-top: 3pt;
    display: flex; justify-content: space-between; }
  .prunning-foot .r { color: #1B5EA9; }
}

/* ---------- The pages a platform holding people's CVs has to have ---------- */
.legalpage{max-width:760px;margin:0 auto;padding-top:var(--s4);padding-bottom:var(--s4)}
.legal-h{margin:0 0 8px;font-size:30px}
.legal-lead{margin:0 0 6px;font-size:16px;color:var(--muted);line-height:1.6}
.legal-stamp{font-size:12px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:8px}
.legal-h2{margin:28px 0 8px;font-size:18px;color:var(--ipc-blue)}
.legal-p{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--ink)}
.legal-list{margin:0 0 12px;padding-left:20px}
.legal-list li{font-size:15px;line-height:1.7;color:var(--ink);margin-bottom:7px}
.legal-note{margin-top:28px;background:#fff8ec;border:1px solid #f0d7ae;border-radius:10px;
  padding:13px 15px;font-size:13.5px;line-height:1.6;color:#7a5314}
.legal-foot{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.legal-foot a{color:var(--ipc-blue)}
.legal-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:18px 0 8px}
.legal-card{border:1px solid var(--line);border-radius:12px;padding:16px;background:#fff}
.legal-card h3{margin:0 0 6px;font-size:15px}
.legal-card p{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--muted)}
.legal-card p b{color:var(--ipc-blue);font-size:13.5px}

/* ---------- The hamburger, for a telephone ----------
   Below 820 pixels the navigation was hidden outright and nothing put in its place, so on a
   telephone there was no way to reach Find Jobs, or any section of this site at all. Most people
   looking for work in Zimbabwe are holding a telephone. */
.burger{display:none;position:relative;margin-left:auto}
.burger-btn{display:flex;flex-direction:column;justify-content:center;gap:4px;width:40px;height:38px;
  padding:0 9px;background:none;border:1px solid var(--line);border-radius:9px;cursor:pointer}
.burger-btn span{display:block;height:2px;background:var(--ipc-blue);border-radius:2px;transition:.15s}
.burger-btn:hover{background:var(--bg)}
.burger-panel{display:none;position:absolute;right:0;top:46px;width:min(360px,calc(100vw - 24px));
  max-height:calc(100vh - 90px);overflow-y:auto;overscroll-behavior:contain;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 16px 44px rgba(16,42,80,.24);padding:8px;z-index:70}
.burger-panel.open{display:block}
.burger-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px;
  border-bottom:1px solid var(--line);font-size:12px;font-weight:bold;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted)}
.burger-x{background:none;border:none;font-size:15px;color:var(--muted);cursor:pointer;padding:2px 6px;border-radius:6px}
.burger-x:hover{background:var(--bg);color:var(--ink)}
.burger-link{display:block;padding:11px 10px;border-radius:8px;text-decoration:none;color:var(--ink)}
.burger-link b{font-size:15px;color:var(--ipc-blue)}
.burger-link:hover{background:#f2f8ff;text-decoration:none}
.burger-group{margin-top:8px}
.burger-grouphead{font-size:11.5px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px 4px}
.burger-item{display:flex;flex-direction:column;gap:1px;padding:9px 10px;border-radius:8px;
  text-decoration:none;color:var(--ink)}
.burger-item b{font-size:14px;color:var(--ink);font-weight:600}
.burger-item span{font-size:12px;color:var(--muted);line-height:1.4}
.burger-item:hover{background:#f2f8ff;text-decoration:none}
.burger-item:hover b{color:var(--ipc-blue)}

@media(max-width:820px){
  .burger{display:block}
  /* The spacer would push the hamburger away from the buttons it belongs beside. */
  .topbar .spacer{display:none}
  .topbar .wrap{gap:10px}
  /* Anchored to the button, the panel hung off the left edge of the screen, because the button
     is not at the edge — the sign-in and register buttons sit to the right of it. On a screen
     this size it belongs to the screen, not to the button. */
  .burger-panel{position:fixed;top:64px;left:12px;right:12px;width:auto;max-width:none;
    max-height:calc(100vh - 84px)}
}

/* The operator's own testing accounts, inside the identity switcher. Marked off from the real
   accounts around it, because the whole point is that nothing in it is real. */
.sandbox-box{border:1px solid #cfe0f5;background:#f7fbff;border-radius:12px;padding:14px 15px}
.sandbox-box h3{color:var(--ipc-blue)}

/* Two ways to the same law: the file from here, and the publisher's own page beside it. */
.law-links{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.law-pdf{display:inline-flex;align-items:center;gap:7px;font-weight:bold;color:var(--ipc-blue);text-decoration:none}
.law-pdf::before{content:'⤓';font-size:14px}
.law-pdf:hover{text-decoration:underline}
.law-size{font-weight:normal;font-size:11.5px;color:var(--muted)}
.law-src{font-size:12.5px;color:var(--muted);text-decoration:none}
.law-src:hover{color:var(--ipc-blue);text-decoration:underline}

/* ---------------------------------------------------------------------------
   Where the jobs come from.
   ---------------------------------------------------------------------------
   The operations console says whether the collector ran. This says what it
   brought back and from whom, so the visual weight is on two things: how many
   adverts a source contributed, and how close to the employer that source sits.
   Everything else is deliberately quiet. */
.prov-summary{display:flex;flex-wrap:wrap;gap:10px 28px;background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:14px 18px}
.prov-stat{display:flex;flex-direction:column;gap:2px}
.prov-stat-k{font-size:11px;font-weight:bold;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.prov-stat b{font-size:19px;color:var(--ink)}

.prov-source{padding:0;overflow:hidden}
/* The whole header is the control, so the count and the name are both a hit target. */
.prov-head{display:flex;align-items:center;gap:12px;width:100%;padding:13px 16px;background:none;
  border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
.prov-head:hover{background:#f7f9fc}
.prov-head:focus-visible{outline:2px solid var(--ipc-blue);outline-offset:-2px}
.prov-who{font-size:14px;font-weight:bold;color:var(--ink);line-height:1.3}
/* A caret that turns, so an open section is obvious without relying on colour. */
.prov-head::after{content:'';flex:none;width:7px;height:7px;margin-left:2px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.prov-head.open::after{transform:rotate(-135deg)}
.prov-count{flex:none;min-width:34px;text-align:center;font-weight:bold;font-size:13px;
  background:#eaf0f8;color:var(--dark-blue);border-radius:999px;padding:3px 10px}
/* Nothing collected is a fact, not an alarm — several of these are careers pages
   that simply have no vacancy on them today. */
.prov-count.zero{background:#f1f4f8;color:var(--muted)}

.prov-adverts{border-top:1px solid var(--line)}
.prov-advert{display:flex;align-items:center;gap:12px;padding:9px 16px;border-bottom:1px solid var(--line)}
.prov-advert:last-child{border-bottom:none}
.prov-advert:hover{background:#fafbfd}
.prov-title{font-size:13.5px;font-weight:600;color:var(--ipc-blue);text-decoration:none;line-height:1.35}
.prov-title:hover{text-decoration:underline}
.prov-when{flex:none;white-space:nowrap}
/* How the employer on the advert became known, which is the whole point of the tiers. */
.prov-kind{flex:none;font-size:10.5px;font-weight:bold;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;background:#f1f4f8;color:var(--muted);white-space:nowrap}
.prov-kind.employer{background:#e7f2ea;color:var(--success)}
.prov-kind.named-employer{background:#eaf0f8;color:var(--dark-blue)}
.prov-kind.agency{background:#f6ecf3;color:var(--magenta)}
@media (max-width:640px){
  .prov-advert{flex-wrap:wrap;gap:6px 10px}
  .prov-when{width:100%}
}