/* Global Skill Manpower Daily News — workwear blue + hi-vis amber */
:root{
  --bg:#f3f5f8; --panel:#fff; --ink:#141c27; --muted:#586577; --line:#d9e0e8;
  --accent:#1f4e8c; --accent-ink:#fff; --accent-soft:#e3ecf8; --hv:#f59e0b; --hv-ink:#1f1300; --hv-soft:#fdf0d9; --hv-text:#9a5b00;
  --good:#2f7d32; --good-soft:#e3f2e3; --bad:#b42318; --bad-soft:#fde8e6; --off:#8a97a1;
  --f-display:"Archivo",system-ui,sans-serif; --f-body:"Source Sans 3",system-ui,sans-serif; --f-ar:"Noto Kufi Arabic","Segoe UI",Tahoma,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e141b; --panel:#151e28; --ink:#e3e9ef; --muted:#94a3b3; --line:#253241;
  --accent:#6ea3e6; --accent-ink:#0b1420; --accent-soft:#16283d; --hv:#f5a524; --hv-soft:#3a2a12; --hv-text:#f3b552;
  --good:#6cc070; --good-soft:#18301a; --bad:#f2786b; --bad-soft:#3b1a17; --off:#7d8b95; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--f-body)}
a{color:var(--accent)}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px}
main{padding-block:24px 40px;min-height:50vh}
h1{font:800 clamp(1.55rem,3.4vw,2.3rem)/1.15 var(--f-display);margin:.2em 0 .3em;text-wrap:balance}
h2{font:700 1.2rem var(--f-display);margin:1.6em 0 .5em}
h3{font:700 1.04rem/1.35 var(--f-display);margin:.3em 0;text-wrap:balance}
h3 a{color:var(--ink);text-decoration:none} h3 a:hover{color:var(--accent)}
.lede{font-size:1.07rem;color:var(--muted);max-width:68ch}
[lang=ar],.ar{font-family:var(--f-ar)}
.muted{color:var(--muted)} .small{font-size:.86rem}
.hide{display:none!important}
a:focus-visible,button:focus-visible,select:focus,input:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px}

/* top bar + header */
.topbar{background:#0f1722;color:#9fb0c2;font-size:.8rem}
.tbar{display:flex;justify-content:space-between;gap:12px;padding-block:6px;flex-wrap:wrap}
.tbar b{color:var(--hv);font-weight:700}
.tright{display:flex;gap:16px} .tright a{color:#d3dde8;text-decoration:none} .tright a:hover{color:#fff}
.top{position:sticky;top:0;z-index:10;background:rgba(255,255,255,.93);backdrop-filter:saturate(1.4) blur(8px);box-shadow:0 1px 0 var(--line),0 6px 20px -14px rgba(0,0,0,.25)}
@media (prefers-color-scheme:dark){.top{background:rgba(21,30,40,.93)}}
.bar{display:flex;gap:8px 20px;align-items:center;justify-content:space-between;padding-block:10px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.brand .logo{width:42px;height:42px;flex:none}
.brand span{display:flex;flex-direction:column;line-height:1.1;min-width:0}
.brand b{font:800 1.12rem var(--f-display);color:var(--ink);letter-spacing:-.01em}
.brand small{font:400 .76rem var(--f-body);color:var(--muted);margin-top:3px}
nav{display:flex;align-items:center;gap:4px}
nav a{position:relative;padding:8px 11px;border-radius:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.92rem;white-space:nowrap}
nav a:not(.navcta):hover{background:var(--accent-soft);color:var(--accent)}
nav a.on{color:var(--ink)} nav a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--hv);border-radius:2px}
nav a.navcta{background:var(--accent);color:var(--accent-ink);padding:9px 14px;margin-left:6px}
nav a.navcta.alt{background:var(--hv);color:var(--hv-ink)}
nav a.navcta:hover{opacity:.9}
.menu{display:none}
@media (max-width:900px){
 nav.desk{display:none}
 .menu{display:block;position:relative}
 .menu summary{list-style:none;cursor:pointer;width:42px;height:42px;border:1px solid var(--line);border-radius:8px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 10px}
 .menu summary::-webkit-details-marker{display:none}
 .menu summary span{display:block;height:2px;background:var(--ink);border-radius:2px}
 .menu nav{position:absolute;right:0;top:50px;background:var(--panel);border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px -10px rgba(0,0,0,.3);flex-direction:column;align-items:stretch;min-width:230px;padding:8px;gap:2px}
 .menu nav a.navcta{margin:6px 0 0;text-align:center}
 .brand small,.tright .ar{display:none}
}

/* demo ribbon */
.demo{background:var(--hv-soft);color:var(--hv-text);border-bottom:1px solid var(--line);font-size:.86rem}
.demo .wrap{padding-block:7px}

/* hero */
.hero{margin:-24px calc(50% - 50vw) 0;padding:48px max(16px,calc(50vw - 524px)) 28px;color:#e6eef8;position:relative;overflow:hidden;
 background:radial-gradient(900px 400px at 88% -10%,rgba(245,158,11,.30),transparent 60%),radial-gradient(700px 380px at 0% 110%,rgba(110,163,230,.35),transparent 60%),linear-gradient(135deg,#0d2340 0%,#1f4e8c 58%,#173b66 100%)}
.hero::before{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(-45deg,rgba(245,158,11,.10) 0 14px,transparent 14px 28px);mask-image:linear-gradient(to bottom,transparent 82%,#000);pointer-events:none}
.hwrap{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
@media (max-width:900px){.hwrap{grid-template-columns:minmax(0,1fr)}}
.hero h1{color:#fff;margin-top:12px} .hero h1 em{font-style:normal;color:#fbbf24}
.hero .lede{color:#cfdcec} .hero .ar{color:#a9c0dc}
.hpill{display:inline-block;font-size:.8rem;font-weight:600;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.12);color:#bde3ff;border:1px solid rgba(255,255,255,.2)}
.hbtns{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.split{grid-template-columns:1fr}}
.door{display:block;background:rgba(255,255,255,.97);color:#141c27;border-radius:14px;padding:16px;text-decoration:none;box-shadow:0 20px 40px -20px rgba(0,0,0,.5);border-top:4px solid var(--hv)}
.door.co{border-top-color:#6ea3e6}
.door b{display:block;font:800 1.05rem var(--f-display)} .door span{display:block;font-size:.88rem;color:#586577;margin:.3em 0 .6em}
.door i{font-style:normal;font-weight:700;color:#1f4e8c}
.door:hover{transform:translateY(-1px)}
@media (prefers-color-scheme:dark){.door{background:#151e28;color:#e3e9ef}.door span{color:#94a3b3}.door i{color:#6ea3e6}}
.kp{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:700px){.kp{grid-template-columns:repeat(2,minmax(0,1fr))}}
.kp div{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;border-left:4px solid var(--hv)}
.kp b{display:block;color:#fff;font:800 1.6rem/1 var(--f-display);font-variant-numeric:tabular-nums}
.kp span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#cfdcec}

/* buttons */
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);padding:9px 16px;border-radius:6px;text-decoration:none;font:600 1rem var(--f-body);border:0;cursor:pointer;line-height:1.3}
.btn:hover{opacity:.92}
.btn.amber{background:var(--hv);color:var(--hv-ink)}
.btn.ghost{background:transparent;color:inherit;border:1px solid currentColor}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.btn.line{background:transparent;color:var(--accent);border:1px solid var(--line)}
.btn.sm{padding:5px 10px;font-size:.86rem}
.btn.big{font-size:1.05rem;padding:12px 22px}
.btn.danger{background:transparent;color:var(--bad);border:1px solid var(--line)}
.btn[disabled]{opacity:.55;cursor:wait}

/* list + cards */
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.filters select,.filters input{font:inherit;font-size:.92rem;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink);max-width:100%}
.filters input{flex:1;min-width:200px}
.list{display:grid;gap:10px}
.card{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:8px;padding:12px 14px;min-width:0}
.card.hv{border-left-color:var(--hv)}
.meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:.84rem;color:var(--muted)}
.pill{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);letter-spacing:.02em;white-space:nowrap}
.pill.hv{background:var(--hv-soft);color:var(--hv-text)} .pill.good{background:var(--good-soft);color:var(--good)} .pill.bad{background:var(--bad-soft);color:var(--bad)} .pill.off{background:var(--bg);color:var(--off)}
.chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.chip{font-size:.75rem;padding:2px 8px;border-radius:4px;border:1px solid var(--line);color:var(--ink);text-decoration:none;background:var(--panel)}
a.chip:hover{border-color:var(--accent);color:var(--accent)}
.rowx{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:flex-start}
.rowx>div{min-width:0;flex:1}
.empty{color:var(--muted);padding:20px;text-align:center;background:var(--panel);border:1px dashed var(--line);border-radius:8px}
.crumbs{font-size:.85rem;color:var(--muted)}
.detail{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px}
.facts{border-collapse:collapse;width:100%;margin:12px 0;font-size:.95rem}
.facts th{text-align:left;color:var(--muted);font-weight:600;padding:6px 12px 6px 0;width:170px;vertical-align:top}
.facts td{padding:6px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
@media (max-width:560px){.facts th{width:110px}}
.band{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;background:var(--accent-soft);border:1px solid var(--line);border-radius:10px;padding:16px;margin:16px 0}
.band b{display:block;font-family:var(--f-display)} .band span{color:var(--muted);font-size:.92rem}
.band.hv{background:var(--hv-soft)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.box{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;min-width:0}
.box h3{margin:.1em 0 .4em} .box p{margin:0 0 .4em;color:var(--muted)}
.box ol,.box ul{padding-left:20px;margin:.4em 0;color:var(--muted)} .box li{margin:.25em 0}
.ic{font-size:1.5rem}
.tfam{columns:3 240px;padding-left:18px} .tfam li{margin:.2em 0;break-inside:avoid}
.tfam small{color:var(--muted)}
.levels{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;padding:0;list-style:none}
.levels li{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.levels small{display:block;color:var(--muted)}
.eyebrow{font:600 .78rem var(--f-body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0}

/* forms */
.form{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;gap:14px;max-width:820px}
.form.narrow{max-width:440px}
.form fieldset{border:1px solid var(--line);border-radius:8px;padding:12px 14px;margin:0;min-width:0}
.form legend{font:700 1rem var(--f-display);padding:0 6px}
.form label{display:block;font-size:.9rem;font-weight:600;margin:8px 0 0}
.form input:not([type=checkbox]):not([type=radio]),.form select,.form textarea{display:block;width:100%;margin-top:4px;font:inherit;font-size:.95rem;padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--ink)}
.form textarea{min-height:90px;resize:vertical}
.form .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
.form label.ck{font-weight:400;display:flex;gap:8px;align-items:flex-start;padding:3px 0;margin:0}
.form label.ck input{margin-top:4px;accent-color:var(--accent)}
.ckgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:2px 14px;margin:6px 0}
.hint{color:var(--muted);font-size:.85rem;font-weight:400;margin:2px 0}
.req{color:var(--bad)}
.msg{padding:10px 12px;border-radius:8px;font-size:.92rem}
.msg.ok{background:var(--good-soft);color:var(--good)} .msg.err{background:var(--bad-soft);color:var(--bad)} .msg.info{background:var(--accent-soft);color:var(--accent)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:820px;margin:8px 0 14px}
.roles label{display:block;cursor:pointer;background:var(--panel);border:2px solid var(--line);border-radius:10px;padding:14px;font-weight:400}
.roles input{position:absolute;opacity:0}
.roles b{display:block;font:800 1.05rem var(--f-display)} .roles span{font-size:.88rem;color:var(--muted)}
.roles label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.roles label:has(input:focus-visible){outline:2px solid var(--accent)}
@media (max-width:520px){.roles{grid-template-columns:1fr}}
.ticks{display:flex;flex-wrap:wrap;gap:6px 18px;padding:0;list-style:none;color:var(--good);font-weight:600;font-size:.92rem}
.ticks li::before{content:"✓ "}

/* dashboard */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:14px 0 16px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:3px solid transparent;padding:10px 14px;font:600 .95rem var(--f-body);color:var(--muted);cursor:pointer;white-space:nowrap}
.tabs button.on{color:var(--ink);border-bottom-color:var(--hv)}
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.stat div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.stat b{display:block;font:800 1.5rem/1 var(--f-display);color:var(--accent)}
.stat span{font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.applist{display:grid;gap:8px;margin-top:8px}
.app{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--bg)}
.acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.acts select{font:inherit;font-size:.86rem;padding:4px 6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}

/* footer */
.sitefoot{background:#0f1722;color:#9fb0c2;margin-top:40px;padding-top:44px;font-size:.95rem}
.sitefoot a{color:#d3dde8;text-decoration:none} .sitefoot a:hover{color:#fff}
.fgrid{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:36px}
@media (max-width:900px){.fgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.fbrand{grid-column:1/-1}}
@media (max-width:520px){.fgrid{grid-template-columns:minmax(0,1fr)}}
.fname{display:block;font:800 1.6rem/1.15 var(--f-display);color:var(--hv)!important;margin-bottom:10px}
.fbrand p{line-height:1.6;margin:.4em 0}
.sitefoot h4{font:700 1.05rem var(--f-display);color:#fff;margin:0 0 12px}
.sitefoot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;border-top:1px solid #1f2b3a;margin-top:36px;padding-block:18px 28px;font-size:.82rem;color:#6b7c8f}

/* 3-way role choice + doors */
.roles.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.roles.three{grid-template-columns:1fr}}
.doors{display:grid;gap:10px}
.door.ag{border-top-color:#34d399}
.door{padding:12px 14px}
.door span{margin:.2em 0 .4em}