/* 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 */
/* A quiet block of prose set apart from what surrounds it: a method note, a caveat, a
   disclaimer. It is NOT .note — that is the toast in the corner of the screen, and it is a three
   column grid holding an icon, a message and a dismiss button. Prose given that class comes out
   with its first paragraph in the icon column and its last one squeezed into the button column,
   one word to a line, which is exactly what happened to "How this report was produced". */
.panel{background:#f7f9fc;border:1px solid var(--line);border-left:4px solid var(--ipc-blue);
  border-radius:10px;padding:16px 18px;color:var(--ink);line-height:1.65}
.panel p{margin:0 0 10px}
.panel p:last-child{margin-bottom:0}
.panel.small{font-size:13px}
@media print{
  .panel{background:#fff;box-shadow:none;break-inside:avoid;page-break-inside:avoid}
}

/* ---------- the market report ----------
   One document carrying every dashboard on the platform. It is read on screen and printed at
   least as often, so it is set like a document rather than like a page: a measure that does not
   run the width of a monitor, sections that announce themselves, and headings that stay with
   what they introduce when it goes to paper.
   ------------------------------------------------------------------------------------------ */
.rep{max-width:1120px}
.rep-top{border-bottom:3px solid var(--ipc-blue);padding-bottom:18px;margin-bottom:6px}
.rep-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:bold}
.rep-h1{font-size:32px;line-height:1.15;margin:6px 0 0}
.rep-sub{color:var(--muted);font-size:15px;line-height:1.6;margin:8px 0 0;max-width:70ch}
.rep-stamp{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12px;color:var(--muted)}
.rep-stamp .warn{color:#b45309;font-weight:bold}
.rep-sec{margin-top:40px}
.rep-sec:first-child{margin-top:22px}
.rep-h2{font-size:21px;color:var(--ipc-blue);margin:0;padding-bottom:7px;border-bottom:1px solid var(--line)}
.rep-lead{color:var(--muted);font-size:14px;line-height:1.65;margin:10px 0 0;max-width:78ch}
.rep-h4{margin:0 0 10px;font-size:14px}
.rep-note{background:#f7f9fc}
.rep-stampline{margin:16px 0 0;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.rep-toc ol{margin:0;padding-left:22px}
.rep-toc li{font-size:14px;line-height:1.9;color:var(--ink)}

@media print{
  /* On paper the screen's masthead is replaced by the cover page the download builds, and each
     section starts clear of the one before it rather than wherever the last chart happened to
     end. Nothing is allowed to be cut in half. */
  .rep{max-width:none}
  .rep-sec{margin-top:20pt;break-inside:auto}
  .rep-h2{break-after:avoid;page-break-after:avoid;font-size:14pt}
  .rep-lead{break-after:avoid;page-break-after:avoid}
  .rep-h4{break-after:avoid;page-break-after:avoid}
  .rep-toc,.note{break-inside:avoid;page-break-inside:avoid}
  .rep .card,.rep .stat,.rep .barchart{break-inside:avoid;page-break-inside:avoid}
}

/* ---------- how many people are here ----------
   A pill at the foot of every page. It sits at the bottom left, above the join dock when that
   is showing, and it is deliberately quiet: a white card, a green light and one number. It is
   the first thing a stranger uses to decide whether this market is alive, so it must never look
   like an advertisement and must never be in the way of the page.
   ------------------------------------------------------------------------------------------ */
.presence{position:fixed;left:20px;bottom:20px;z-index:45;display:none;align-items:center;gap:9px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 16px 9px 10px;box-shadow:0 6px 24px rgba(16,42,80,.14);
  font-size:13.5px;color:var(--ink);cursor:default;user-select:none;max-width:calc(100vw - 40px)}
.presence.show{display:flex}
/* The light. A ring around it so the dot reads as live rather than as a bullet point, and a
   slow pulse that says the number is being kept up to date without demanding attention. */
.presence-dot{width:11px;height:11px;border-radius:50%;background:#16a34a;flex:none;
  box-shadow:0 0 0 5px rgba(22,163,74,.14);animation:presence-pulse 2.4s ease-in-out infinite}
@keyframes presence-pulse{
  0%,100%{box-shadow:0 0 0 5px rgba(22,163,74,.14)}
  50%{box-shadow:0 0 0 7px rgba(22,163,74,.05)}
}
.presence-n{font-weight:bold;font-variant-numeric:tabular-nums}
.presence-l{color:var(--muted);white-space:nowrap}
/* The join dock stands in the same corner and is the more important of the two, so the pill
   steps up out of its way rather than sitting on top of it. */
body:has(#joindock.show) .presence{bottom:82px}
@media(max-width:720px){
  .presence{left:12px;bottom:12px;padding:7px 13px 7px 9px;font-size:12.5px}
  body:has(#joindock.show) .presence{bottom:74px}
}
/* An animation that never stops is a battery cost and, for some people, a distraction. */
@media(prefers-reduced-motion:reduce){ .presence-dot{animation:none} }

.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}
/* A value that is two figures rather than one: the count, and the share of the whole it is.
   Written as a single run of text they read as one number — "181 22%" — and since neither had a
   column of its own, nothing lined up with anything below it. Each gets its own width here. The
   share is the lighter of the two because the count is the fact and the share is arithmetic on
   it. Only rows that carry both take this class, so every other bar chart is untouched: several
   of them put a whole phrase in this space and need it to wrap, which a flex row would not. */
.barval.split{width:122px;display:flex;justify-content:flex-end;align-items:baseline;gap:12px}
.barval.split .barcount{flex:none}
.barval.split .barshare{flex:none;width:46px;text-align:right;font-weight:600;color:#5b6b7f}

/* 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}

/* The social marks. One rule for both places they appear, so the footer and the contact page
   cannot drift apart. Sized to the 44px touch target a thumb needs rather than to the 18px
   glyph inside it, and given a visible focus ring, because these are among the few links on
   the site with no words in them to show focus on. */
.social-marks{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.social-mark{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:50%;border:1px solid rgba(255,255,255,.22);color:inherit;flex:0 0 auto;
  transition:background .15s ease,border-color .15s ease,transform .15s ease}
.social-mark:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.social-mark:focus-visible{outline:2px solid #fff;outline-offset:2px}
.foot-social{margin-top:16px}
/* On the contact page the ground is light, so the ring has to be drawn against it instead. */
.contact-social{margin-top:var(--s3)}
.contact-social h4{margin:0 0 10px;font-size:12px;font-weight:bold;letter-spacing:.09em;text-transform:uppercase;color:#5a6b7f}
.contact-social .social-mark{border-color:#d3dbe4;color:var(--ipc-blue)}
.contact-social .social-mark:hover{background:#eef3f9;border-color:#b7c5d6}
.contact-social .social-mark:focus-visible{outline-color:var(--ipc-blue)}

@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}
  /* A curriculum vitae runs to two or three pages and was being cut wherever the page ended:
     a job title at the foot of one page and the dates at the head of the next, a heading left
     stranded alone. The page box itself is declared once, further down this file, because a
     stylesheet has one of them however many kinds of document it prints. */
  .cvd-name,.cvd-title,.cvd-contact{break-inside:avoid;page-break-inside:avoid}
  .cvd-h{break-after:avoid;page-break-after:avoid}
  .cvd-role,.cvd-edu,.cvd-p,.cvd-plain,.cvd-skills,.cvd-foot{break-inside:avoid;page-break-inside:avoid}
  .cvd-foot{break-before:avoid}
}
@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)}
/* The kind of job, in four words, from the fields the employer filled in. Only our own adverts
   have these; a gathered one has a body of text and nothing structured behind it. */
.sizzle-facts{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.sizzle-fact{font-size:11px;color:#40587a;background:#eef4fb;border-radius:5px;padding:2px 7px;white-space:nowrap}
/* The first lines of the advert. Clamped, because the point of a card is to be scanned: three
   lines is enough to decide whether to open it and not enough to read instead of opening it. */
.sizzle-teaser{margin-top:9px;font-size:12.5px;line-height:1.55;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sizzle-foot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px}
.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)}
/* The figures under the search box. They are the only hard evidence on the hero and they were
   the quietest thing on it — small, grey, and run together in one sentence. The number is white
   and bold now and the label stays quiet beside it, with a hairline between each pair so four
   facts read as four facts rather than as a line of prose. */
.lp-facts{margin-top:20px;display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 26px}
.lp-fact{display:inline-flex;align-items:baseline;gap:7px;position:relative}
.lp-fact + .lp-fact::before{content:'';position:absolute;left:-13px;top:2px;bottom:2px;
  width:1px;background:rgba(255,255,255,.22)}
.lp-fact-n{color:#fff;font-weight:bold;font-size:19px;letter-spacing:-.2px;
  font-variant-numeric:tabular-nums}
.lp-fact-l{color:#cfe0f2;font-size:13px;letter-spacing:.2px}
@media(max-width:640px){
  .lp-facts{gap:8px 18px}
  .lp-fact + .lp-fact::before{left:-9px}
  .lp-fact-n{font-size:17px}
}

/* 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 {
  /* The page box holds the browser's own header and footer — the address, the date and the
     page number — which the print dialogue draws in the margin and which we cannot switch off
     from here. Chrome puts them about 8mm from the top edge and 6mm from the bottom, so the
     margin has to clear those and nothing else: our own running lines are no longer in the
     margin at all. See the note on .prunning-head below for why. */
  @page { size: A4; margin: 16mm 14mm 14mm; }

  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, .presence, .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; }
  /* A table that runs past the foot of a page keeps its column headings on the next one.
     Without this a column of bare numbers carried on overleaf with nothing above it saying
     what they were. */
  thead { display: table-header-group; }
  tfoot { display: table-footer-group; }
  tr, td, th { break-inside: avoid; page-break-inside: avoid; }
  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; }
  /* A figure and its label are one thing and are not to be separated by a page break. */
  .stat, .kpi, .barrow, .funnel-step, .dash-lab { break-inside: avoid; page-break-inside: avoid; }
  .dash-lab { break-after: avoid; page-break-after: avoid; }
  svg, img { break-inside: avoid; page-break-inside: avoid; max-width: 100%; }

  /* 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. */
  /* The running header and footer, on every page after the cover.
     These were position:fixed with a negative offset, which is the obvious way to write it and
     does not work. Chrome resolves those offsets against something other than the page area:
     printed and measured, the header landed 266mm down the paper and the footer 27mm down —
     swapped, and both sitting on top of the data. That is the "header and footer encroaching on
     the report" that had been reported twice.
     There is no positioned way to do this that Chrome honours. The mechanism it does honour is
     the oldest one there is: a table whose thead repeats at the top of every page and whose
     tfoot repeats at the bottom, with the document flowing through the tbody between them. The
     browser reserves the space itself, so content cannot be drawn underneath them — not because
     the offsets happen to work out, but because a table row cannot overlap another table row.
     downloadDashboard in public/js/pages/lmiui.js builds that table. These rules only dress it. */
  .prunning-head { font-size: 9pt; font-weight: bold; color: #1B5EA9; text-align: right;
    border-bottom: 0.5pt solid #1B5EA9; padding: 0 0 3pt; margin-bottom: 8pt; }
  .prunning-foot { font-size: 8pt; color: #666666; border-top: 0.5pt solid #1B5EA9;
    padding: 3pt 0 0; margin-top: 8pt; display: flex; justify-content: space-between; }
  /* The table is scaffolding and must not look like one. */
  .prunning-table { width: 100%; border-collapse: collapse; }
  .prunning-table > thead > tr > td, .prunning-table > tfoot > tr > td,
  .prunning-table > tbody > tr > td { border: none !important; padding: 0 !important; background: none; }
  .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%}
}