/* =====================================================================
   Ishtaghel — one stylesheet. Mobile first, RTL first.
   Colours and radii come straight from the brand sheet; everything uses
   logical properties so Arabic (rtl) and English (ltr) mirror correctly.
   ===================================================================== */

:root{
  /* #088B37 stays the brand colour for large areas. For text and for
     buttons it fails the 4.5:1 contrast minimum, so those use a darker
     shade — same hue, legible for people with weaker eyesight or a cheap
     phone screen in daylight. */
  --green:#088B37; --green-btn:#077A30; --green-dark:#06622A; --green-tint:#E7F3EB;
  --ink:#121A15; --ink-soft:#3D4A42; --muted:#5C6B61;
  --paper:#F5F4F1; --white:#fff; --line:#E4E2DC; --line-soft:#EFEDE8;
  --warn:#8A5B00; --warn-bg:#FBF1DC; --bad:#A32B21; --bad-bg:#FAE9E7;
  --info:#1A5E86; --info-bg:#E5F0F6;
  --r:10px; --r-sm:8px; --pill:999px;
  --shadow:0 1px 2px rgba(18,26,21,.05), 0 6px 18px rgba(18,26,21,.04);
  /* If the webfont is slow or blocked, fall back to a real Arabic system
     face rather than whatever system-ui happens to be — that substitution
     is what makes Arabic pages look wrong on Windows. */
  --font-ar:'IBM Plex Sans Arabic','Noto Sans Arabic','Segoe UI',Tahoma,
            'Geeza Pro','Arabic Typesetting',sans-serif;
  --font-en:'IBM Plex Sans', system-ui, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-en); font-size:16px; line-height:1.6;
  padding-block-end:72px; /* room for the mobile bottom nav */
}
html[dir="rtl"] body{font-family:var(--font-ar)}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 .5rem;line-height:1.3;font-weight:600;color:var(--ink)}
p{margin:0 0 .75rem}
:focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;inset-inline-start:-9999px}
.skip-link:focus{inset-inline-start:8px;top:8px;background:#fff;padding:8px 12px;z-index:99}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:1080px;margin-inline:auto;padding-inline:16px}
.wrap.narrow{max-width:620px}
.wrap.medium{max-width:840px}
.section{padding-block:28px}
.section-tight{padding-block:16px}
.site-main{min-height:60vh}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.row-between{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
.grid-4{grid-template-columns:repeat(2,1fr)}
.stack>*+*{margin-block-start:14px}
.center{text-align:center}
.small{font-size:.85rem}
.muted{color:var(--muted)}
.h1{font-size:1.6rem}.h2{font-size:1.28rem}.h3{font-size:1.06rem}
.section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-block-end:12px}

/* ---------- Header ---------- */
.site-header{background:var(--white);border-block-end:1px solid var(--line);position:sticky;top:0;z-index:40}
.header-row{display:flex;align-items:center;gap:8px;height:56px}
.brand{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
.brand:hover{text-decoration:none}
.brand-name{font-size:1.15rem;letter-spacing:-.01em}
/* The wordmark is sized by height so it keeps its proportions everywhere.
   max-height is a hard ceiling: even if this stylesheet fails to load, the
   width/height attributes on the tag itself keep it small. */
.brand-logo{height:24px;max-height:24px;width:auto;max-width:42vw;display:block}
.brand-footer .brand-logo{height:22px;max-height:22px}
.brand{min-width:0;flex:none}
@media (min-width:640px){
  .brand-logo{height:28px;max-height:28px;max-width:none}
  .brand-footer .brand-logo{height:24px;max-height:24px}
}
.top-nav{display:none;gap:18px;margin-inline-start:10px}
.top-nav a{color:var(--ink-soft);font-weight:500;font-size:.95rem}
.top-nav a.is-active{color:var(--green-dark);font-weight:600}
.header-actions{display:flex;align-items:center;gap:6px;margin-inline-start:auto;min-width:0}
/* Nothing in this row may push the row wider than the screen. */
.header-row{max-width:100%;overflow:hidden}
.header-actions .btn{max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.lang-toggle{display:inline-flex;align-items:center;gap:5px;font-size:.85rem;color:var(--ink-soft);
  border:1px solid var(--line);border-radius:var(--pill);padding:6px 9px;background:var(--white);flex:none}
.lang-toggle:hover{text-decoration:none;border-color:var(--green);color:var(--green-dark)}
.lang-word{display:none}            /* icon only until there is room for the word */
.header-actions{flex-wrap:nowrap}
.header-actions .btn{white-space:nowrap}
.btn-compact{padding:8px 13px;font-size:.85rem}

/* Shown on phones only, or hidden on phones only. The breakpoint matches the
   one where the bottom navigation appears, so nothing becomes unreachable. */
.hide-sm{display:none!important}
.only-sm{display:inline-flex}
/* A compact text link, for where a button would not fit */
.text-link{color:var(--ink-soft);font-size:.85rem;font-weight:600;white-space:nowrap;padding-inline:2px}
.text-link:hover{color:var(--green-dark);text-decoration:none}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 16px;border-radius:var(--pill);border:1px solid transparent;
  font:inherit;font-weight:600;font-size:.92rem;cursor:pointer;text-align:center}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--green-btn);color:#fff}
.btn-primary:hover{background:var(--green-dark);color:#fff}
.btn-quiet{background:var(--green-tint);color:var(--green-dark)}
.btn-quiet:hover{background:#DCEDE2}
.btn-ghost{background:transparent;color:var(--ink-soft);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green);color:var(--green-dark)}
.btn-danger{background:var(--bad-bg);color:var(--bad);border-color:#F0D2CE}
.btn-danger:hover{background:#F6DBD7}
.btn-sm{padding:7px 12px;font-size:.85rem}
.btn-lg{padding:13px 22px;font-size:1rem}

/* Google's button: white, bordered, their mark on the leading side. */
.btn-google{background:#fff;border:1px solid var(--line);color:var(--ink);gap:10px;
  box-shadow:0 1px 2px rgba(18,26,21,.06)}
.btn-google:hover{background:#FAFAF9;border-color:#CFCEC9;color:var(--ink)}
.btn-google .icon{width:19px;height:19px}
.or-line{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:.82rem;margin-block:16px}
.or-line::before,.or-line::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.icon-btn{background:none;border:1px solid var(--line);border-radius:var(--pill);
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);cursor:pointer;padding:0}
.icon-btn:hover{border-color:var(--green);color:var(--green)}
.icon-btn.is-on{background:var(--green-tint);border-color:var(--green);color:var(--green-dark)}
.icon-btn.is-on svg{fill:currentColor}
.inline-form{display:inline}
.icon{width:20px;height:20px;flex:none}
.icon-sm{width:16px;height:16px}
.icon-xs{width:13px;height:13px}

/* ---------- Cards ---------- */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card.pad{padding:18px}
.card-head{padding:14px 18px;border-block-end:1px solid var(--line-soft);display:flex;
  justify-content:space-between;align-items:center;gap:10px}
.card-body{padding:18px}
.card-foot{padding:12px 18px;border-block-start:1px solid var(--line-soft);background:#FCFCFB;
  border-end-start-radius:var(--r);border-end-end-radius:var(--r)}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-block-start:8px}
.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--pill);
  background:var(--paper);border:1px solid var(--line-soft);color:var(--ink-soft);font-size:.78rem;white-space:nowrap}
.chip-soft{background:var(--green-tint);border-color:#D3E7DA;color:var(--green-dark)}
.chip-ok{background:var(--green-tint);border-color:#D3E7DA;color:var(--green-dark)}
.chip-warn{background:var(--warn-bg);border-color:#EFE0BE;color:var(--warn)}
.chip-bad{background:var(--bad-bg);border-color:#F0D2CE;color:var(--bad)}
.chip-info{background:var(--info-bg);border-color:#D3E4EE;color:var(--info)}
.chip-mute{background:var(--paper);border-color:var(--line);color:var(--muted)}
.chip-link:hover{border-color:var(--green);text-decoration:none}
.verified{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;
  border-radius:var(--pill);background:var(--green);color:#fff;vertical-align:middle}

/* ---------- Forms ---------- */
label,.label{display:block;font-size:.88rem;font-weight:500;color:var(--ink-soft);margin-block-end:5px}
.hint{font-size:.8rem;color:var(--muted);margin-block-start:4px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],
input[type=date],input[type=url],input[type=search],select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--white);color:var(--ink);font:inherit;font-size:.95rem}
textarea{min-height:110px;resize:vertical}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7A70' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:left 12px center;padding-inline-end:34px}
html[dir=ltr] select{background-position:right 12px center;padding-inline-end:34px;padding-inline-start:13px}
input:focus,select:focus,textarea:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(8,139,55,.12)}
.field{margin-block-end:14px}
.field-error input,.field-error select,.field-error textarea{border-color:var(--bad)}
.err{color:var(--bad);font-size:.8rem;margin-block-start:4px}
.check{display:flex;align-items:flex-start;gap:8px;font-weight:400;color:var(--ink-soft)}
.check input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--green);flex:none}
.choice-grid{display:grid;gap:10px;grid-template-columns:1fr}
.choice{border:1.5px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;background:#fff;display:block}
.choice:has(input:checked){border-color:var(--green);background:var(--green-tint)}
.choice input[type=checkbox],.choice input[type=radio]{position:absolute;opacity:0}
/* the text box inside a choice (link, WhatsApp number, email…) must stay visible */
.choice input:not([type=checkbox]):not([type=radio]),.choice textarea{display:block;width:100%;margin-top:8px;cursor:text}
.choice strong{display:block}
/* A long form reads far better broken into named stages than as one wall. */
.form-step{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:600;margin:22px 0 10px;padding-block-end:6px;border-block-end:1px solid var(--line-soft)}
html[dir="rtl"] .form-step{text-transform:none;letter-spacing:normal;font-size:.9rem}

fieldset{border:0;padding:0;margin:0 0 14px}
legend{font-weight:600;margin-block-end:8px;padding:0}

/* ---------- Flash ---------- */
.flash{border-radius:var(--r);padding:12px 14px;margin-block:14px;font-size:.92rem;border:1px solid}
.flash-ok{background:var(--green-tint);border-color:#CFE5D7;color:var(--green-dark)}
.flash-error{background:var(--bad-bg);border-color:#F0D2CE;color:var(--bad)}
.flash-info{background:var(--info-bg);border-color:#D3E4EE;color:var(--info)}

/* ---------- Home ---------- */

/* The hero: one full-bleed image, darkened enough that white text is always
   legible no matter what photo is dropped in. Swap the picture by replacing
   assets/img/hero.jpg — nothing here needs editing. */
.hero-photo{
  position:relative;
  min-height:440px;
  display:grid;place-items:center;
  padding-block:52px 46px;
  text-align:center;
  color:#fff;
  background-color:#0A2418;
  background-image:linear-gradient(rgba(6,20,13,.58),rgba(6,20,13,.74)),url("../img/hero.jpg");
  background-size:cover;
  background-position:center;
  border-block-end:1px solid rgba(255,255,255,.08);
}
.hero-center{position:relative;z-index:1;width:100%}
.hero-photo h1{
  color:#fff;font-size:1.9rem;line-height:1.25;letter-spacing:-.02em;
  margin:0 auto 10px;max-width:16ch;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.hero-photo .lede{
  color:rgba(255,255,255,.9);font-size:1rem;line-height:1.65;
  margin:0 auto 22px;max-width:46ch;
  text-shadow:0 1px 12px rgba(0,0,0,.3);
}

/* The search bar sits on the image, so it needs a real shadow to lift off it */
.searchbar-hero{
  max-width:840px;margin-inline:auto;
  padding:8px;gap:8px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  text-align:start;
}
.sb-field{position:relative;display:flex;align-items:center}
.sb-icon{position:absolute;inset-inline-start:12px;color:var(--muted);pointer-events:none}
.sb-field input{padding-inline-start:38px;border-color:transparent;background:var(--paper)}
.sb-field input:focus{background:#fff}
.searchbar-hero select{border-color:transparent;background-color:var(--paper)}
.searchbar-hero select:focus{background-color:#fff}
.sb-count{
  display:none;align-items:center;white-space:nowrap;
  color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;
  padding-inline:6px;
}
.searchbar-hero .btn{min-height:46px;padding-inline:24px}

/* Quick category links, tinted glass against the photo */
.hero-photo .hero-links{
  justify-content:center;margin-block-start:16px;
  color:rgba(255,255,255,.78);
}
.hero-photo .hero-links a{
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(2px);
}
.hero-photo .hero-links a:hover{background:rgba(255,255,255,.24);border-color:rgba(255,255,255,.4);color:#fff}


/* The plain hero used by the inner pages (About, Advice, CV builder). */
.hero{background:linear-gradient(180deg,#fff 0%,#FAFBFA 100%);border-block-end:1px solid var(--line);
  padding-block:34px 30px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset-block-start:-140px;inset-inline-end:-120px;
  width:340px;height:340px;border-radius:50%;background:var(--green-tint);opacity:.75;pointer-events:none}
.hero-inner{position:relative}
.hero-slim{padding-block:26px 22px}
.hero-copy{max-width:640px}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:var(--green-tint);color:var(--green-dark);
  border:1px solid #D6E8DC;border-radius:var(--pill);padding:4px 12px;font-size:.78rem;font-weight:600;
  margin-block-end:12px}
.hero h1{font-size:1.85rem;letter-spacing:-.02em;margin-block-end:8px}
.hero p.lede{color:var(--ink-soft);max-width:56ch;margin-block-end:18px;font-size:1.02rem}
.searchbar{display:grid;gap:10px;grid-template-columns:1fr;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--shadow)}
.searchbar .btn{min-height:44px}
.hero-links{margin-block-start:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hero-links a{background:#fff;border:1px solid var(--line);border-radius:var(--pill);
  padding:3px 11px;color:var(--ink-soft);font-size:.8rem}
.hero-links a:hover{border-color:var(--green);color:var(--green-dark);text-decoration:none}

/* three things you can do, and the About page's value cards */
.feature{display:flex;flex-direction:column;gap:6px;position:relative}
.feature-mark{width:38px;height:38px;border-radius:10px;background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;margin-block-end:4px}
.feature-link{color:inherit}
.feature-link:hover{text-decoration:none;border-color:#CFDDD4;transform:translateY(-1px)}
.feature-link{transition:transform .12s ease,border-color .12s ease}
.feature-accent{border-color:#CFE5D7;background:linear-gradient(180deg,#fff 0%,#F6FBF7 100%)}
.feature-tag{position:absolute;inset-block-start:14px;inset-inline-end:14px;background:var(--green);
  color:#fff;border-radius:var(--pill);padding:2px 9px;font-size:.68rem;font-weight:600}

.cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.cat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:8px;color:var(--ink);font-size:.92rem}
.cat:hover{border-color:var(--green);text-decoration:none;background:#FCFEFD}
.cat b{font-weight:500}
.cat span{color:var(--green-dark);background:var(--green-tint);border-radius:var(--pill);
  padding:1px 8px;font-size:.75rem;font-variant-numeric:tabular-nums}

/* full-width tinted band (CV maker pitch) */
.band{background:var(--green-tint);border-block:1px solid #D6E8DC}
.band-inner{padding-block:28px;display:grid;gap:20px;grid-template-columns:1fr;align-items:center}
.band h2{color:var(--green-dark)}
.band .lede{color:var(--ink-soft);max-width:48ch}
.ticks{list-style:none;padding:0;margin:0 0 16px}
.ticks li{display:flex;align-items:center;gap:8px;padding-block:4px;color:var(--ink-soft);font-size:.92rem}
.ticks .icon{color:var(--green);flex:none}
.band-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center}

/* career advice cards */
.advice-card{display:flex;flex-direction:column;gap:6px;color:inherit;transition:transform .12s ease,border-color .12s ease}
.advice-card:hover{text-decoration:none;border-color:#CFDDD4;transform:translateY(-1px)}
.advice-mark{width:34px;height:34px;border-radius:9px;background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;margin-block-end:2px}
.advice-more{color:var(--green-dark);font-size:.82rem;font-weight:600;margin-block-start:4px}
.article-body h2{font-size:1.05rem;margin-block:18px 6px}
.article-body ul{margin:0 0 .9rem;padding-inline-start:20px;color:var(--ink-soft)}
.article-body li{margin-block-end:6px}
.article-body p{line-height:1.75}

.cta-card{display:flex;flex-direction:column;gap:14px;align-items:flex-start;
  background:linear-gradient(180deg,#fff 0%,#F7FAF8 100%)}

/* Alternating bands give the page a rhythm; without them every section is
   white cards on the same paper and the eye has nothing to hold on to. */
.section-alt{background:var(--white);border-block:1px solid var(--line)}
.section-alt .card{box-shadow:none}

/* ---------- Job list & detail ---------- */
.job-card{display:flex;flex-direction:column}
.job-card-main{display:flex;gap:12px;padding:14px 16px;color:inherit}
.job-card-main:hover{text-decoration:none}
.job-card:hover{border-color:#CFDDD4}
.logo{width:46px;height:46px;border-radius:var(--r-sm);object-fit:contain;background:var(--paper);
  border:1px solid var(--line-soft);padding:3px;flex:none}
.job-card-body{min-width:0}
.job-title{font-size:1.02rem;margin:0 0 3px;font-weight:600}
.job-company{margin:0;color:var(--muted);font-size:.86rem;display:flex;align-items:center;gap:5px}
.job-card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:8px 16px;border-block-start:1px solid var(--line-soft)}
/* Pay is what a job seeker looks for first, so it is not just another chip. */
.chip-pay{background:var(--green-tint);border-color:#CFE5D7;color:var(--green-dark);font-weight:600}
.job-card-foot .muted{display:inline-flex;align-items:center;gap:4px}

.filters{display:grid;gap:10px}
.filters-toggle{width:100%}
.job-head{display:flex;gap:14px;align-items:flex-start}
.job-head .logo{width:60px;height:60px}
.job-meta{display:grid;gap:10px;grid-template-columns:1fr}
.meta-item{display:flex;gap:8px;align-items:flex-start;font-size:.9rem}
.meta-item .icon{color:var(--green);margin-block-start:2px}
.meta-item b{display:block;font-weight:500}
.meta-item span{color:var(--muted);font-size:.82rem}
.prose{color:var(--ink-soft)}
.prose p{margin:0 0 .8rem}
.sticky-apply{position:sticky;bottom:76px;z-index:20}

/* ---------- Dashboards ---------- */
.dash-grid{display:grid;gap:14px;grid-template-columns:1fr}
.stat{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.stat b{display:block;font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font-size:.82rem;color:var(--muted)}
.progress{height:8px;border-radius:var(--pill);background:var(--line-soft);overflow:hidden}
.progress i{display:block;height:100%;background:var(--green);border-radius:var(--pill)}
.side-menu{display:flex;gap:6px;overflow-x:auto;padding-block-end:4px;-webkit-overflow-scrolling:touch}
.side-menu a{white-space:nowrap;padding:8px 13px;border-radius:var(--pill);border:1px solid var(--line);
  background:#fff;color:var(--ink-soft);font-size:.87rem}
.side-menu a.is-active{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
.side-menu a:hover{text-decoration:none;border-color:var(--green)}

/* ---------- Tables (admin) ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--r)}
table.tbl{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem;min-width:560px}
table.tbl th,table.tbl td{padding:11px 13px;border-block-end:1px solid var(--line-soft);text-align:start;vertical-align:middle}
table.tbl th{background:#FBFBFA;font-weight:600;color:var(--ink-soft);font-size:.82rem}
table.tbl tr:last-child td{border-block-end:0}
.tbl-actions{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- Timeline ---------- */
.timeline{list-style:none;margin:0;padding:0}
.timeline li{position:relative;padding-inline-start:22px;padding-block-end:14px}
.timeline li::before{content:"";position:absolute;inset-inline-start:0;top:6px;width:9px;height:9px;
  border-radius:var(--pill);background:var(--green)}
.timeline li::after{content:"";position:absolute;inset-inline-start:4px;top:16px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child{padding-block-end:0}
.timeline li:last-child::after{display:none}
.timeline .muted{font-size:.8rem}

/* ---------- Empty states ---------- */
.empty{text-align:center;padding:38px 18px;color:var(--muted)}
.empty-mark{width:46px;height:46px;border-radius:var(--pill);background:var(--green-tint);color:var(--green-dark);
  display:grid;place-items:center;margin:0 auto 10px}
.empty-title{font-weight:600;color:var(--ink);margin-block-end:4px}
.empty .btn{margin-block-start:12px}

/* ---------- Pager ---------- */
.pager{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-block-start:18px}
.pager-link{min-width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:.88rem}
.pager-link.is-current{background:var(--green-btn);border-color:var(--green-btn);color:#fff}
.pager-link:hover{text-decoration:none;border-color:var(--green)}
.pager-gap{padding-inline:4px;color:var(--muted)}

/* ---------- CV builder ---------- */
.cv-layout{display:grid;gap:16px;grid-template-columns:1fr}
.repeat-item{border:1px solid var(--line);border-radius:var(--r);padding:14px;background:#FCFCFB;margin-block-end:10px}
.repeat-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-block-end:8px}
.cv-paper{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;font-size:.9rem}
.cv-paper h1{font-size:1.3rem;margin-block-end:2px}
.cv-paper h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--green-dark);
  border-block-end:1px solid var(--line);padding-block-end:4px;margin-block:16px 8px}
.cv-entry{margin-block-end:10px}
.cv-entry b{display:block}
.cv-entry .muted{font-size:.82rem}
.cv-tags{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- Footer ---------- */
.site-footer{background:var(--white);border-block-start:1px solid var(--line);margin-block-start:34px;padding-block:24px 18px}
.footer-grid{display:grid;gap:18px;grid-template-columns:1fr}
.site-footer nav{display:flex;flex-direction:column;gap:8px}
.foot-head{font-weight:600;color:var(--ink);font-size:.88rem;margin-block-end:2px}
.social{display:flex;gap:8px;margin-block-start:12px}
.social a{width:36px;height:36px;border-radius:var(--pill);border:1px solid var(--line);
  display:grid;place-items:center;color:var(--ink-soft);background:#fff}
.social a:hover{border-color:var(--green);color:var(--green);text-decoration:none}
.site-footer nav a{color:var(--ink-soft);font-size:.9rem}
.brand-footer{margin-block-end:8px}
.safety-note{display:flex;gap:8px;align-items:flex-start;background:var(--green-tint);border-radius:var(--r);
  padding:12px;color:var(--green-dark);font-size:.85rem}
.safety-note .icon{flex:none;margin-block-start:2px}
.footer-base{display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-block-start:1px solid var(--line-soft);margin-block-start:18px;padding-block-start:14px;
  font-size:.82rem;color:var(--muted)}

/* ---------- Mobile bottom nav ---------- */
.bottom-nav{position:fixed;inset-inline:0;bottom:0;z-index:50;background:var(--white);
  border-block-start:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);
  padding-block:6px 4px;padding-block-end:calc(4px + env(safe-area-inset-bottom))}
.bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--muted);font-size:.68rem}
.bottom-nav a:hover{text-decoration:none}
.bottom-nav a.is-active{color:var(--green-dark);font-weight:600}
.bottom-nav a.is-active svg{stroke-width:2.1}

/* ---------- Bigger screens ---------- */
@media (min-width:640px){
  .header-row{gap:14px;height:60px}
  .lang-word{display:inline}
  .lang-toggle{padding:5px 10px}
  .hide-sm{display:inline-flex!important}
  .only-sm{display:none}
  .btn-compact{padding:10px 16px;font-size:.92rem}
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .tstats{grid-template-columns:repeat(4,1fr)}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .choice-grid{grid-template-columns:1fr 1fr}
  .job-meta{grid-template-columns:1fr 1fr}
  .searchbar{grid-template-columns:1.4fr 1fr auto}
  .dash-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr .6fr 1fr}
  .hero h1{font-size:2.15rem}
}
@media (min-width:900px){
  body{padding-block-end:0}
  .filters-toggle{display:none}
  #filters[hidden]{display:grid}
  .bottom-nav{display:none}
  .top-nav{display:flex}
  .dash-grid{grid-template-columns:repeat(4,1fr)}
  .cv-layout{grid-template-columns:1.05fr .95fr;align-items:start}
  .cv-preview-col{position:sticky;top:76px}
  .with-side{display:grid;grid-template-columns:260px 1fr;gap:20px;align-items:start}
  .filters{position:sticky;top:76px}
  .sticky-apply{position:static}
  .cat-grid{grid-template-columns:repeat(4,1fr)}
  .hero{padding-block:52px 44px}
  .hero-photo{min-height:520px;padding-block:70px}
  .hero-photo h1{font-size:3rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =====================================================================
   Arabic presentation.
   The layout uses logical properties so it mirrors on its own; what Arabic
   also needs is different type. Arabic script has no capitals, taller
   ascenders and connected letterforms, so the tight tracking and small
   sizes that suit Latin text make it look cramped and badly set.
   ===================================================================== */
html[dir="rtl"]{font-size:16.5px}
html[dir="rtl"] body{font-family:var(--font-ar);line-height:1.85}

/* Negative tracking is for Latin display type; on Arabic it collides glyphs. */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,
html[dir="rtl"] .brand-name,html[dir="rtl"] .hero h1,
html[dir="rtl"] .hero-photo h1{letter-spacing:normal;line-height:1.45}
html[dir="rtl"] .hero-photo h1{max-width:18ch}

/* Arabic has no upper case, so uppercasing does nothing but widen the gaps. */
html[dir="rtl"] .cv-paper h2{text-transform:none;letter-spacing:normal;font-size:.92rem}

/* Form controls do not inherit the family on every browser. */
html[dir="rtl"] input,html[dir="rtl"] select,html[dir="rtl"] textarea,
html[dir="rtl"] button,html[dir="rtl"] .btn{font-family:var(--font-ar)}

/* Small text needs a touch more room in Arabic than in Latin. */
html[dir="rtl"] .small,html[dir="rtl"] .muted.small{font-size:.9rem;line-height:1.7}
html[dir="rtl"] .chip{font-size:.8rem;padding-block:4px}
html[dir="rtl"] .hint,html[dir="rtl"] .err{font-size:.85rem}
html[dir="rtl"] label,html[dir="rtl"] .label{font-size:.92rem}
html[dir="rtl"] .prose p,html[dir="rtl"] .article-body p{line-height:1.95}
html[dir="rtl"] table.tbl{font-size:.94rem}
html[dir="rtl"] .side-menu a{font-size:.92rem}

/* Five labels across a phone screen: Arabic words are wider, so give them
   the full width and stop them wrapping to two lines. */
html[dir="rtl"] .bottom-nav a{font-size:.66rem}
html[dir="rtl"] .bottom-nav span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}

/* Latin fragments inside Arabic pages (emails, URLs, phone numbers) keep
   their own direction, otherwise punctuation jumps to the wrong end. */
html[dir="rtl"] [dir="ltr"]{text-align:start;unicode-bidi:isolate}

/* Arrows are directional: flip them with the text. */
.arrow::after{content:" →"}
html[dir="rtl"] .arrow::after{content:" ←"}
.arrow-back::before{content:"← "}
html[dir="rtl"] .arrow-back::before{content:"→ "}

/* ---------- Print (CV) ---------- */
@media print{
  .site-header,.site-footer,.bottom-nav,.no-print,.btn,
  .hero,.side-menu,.flash,#cv-form{display:none!important}
  body{background:#fff;padding:0}
  .cv-paper{border:0;border-radius:0;padding:0;box-shadow:none}
  .wrap{max-width:none;padding:0}
  .cv-layout{display:block}
  .cv-preview-col{position:static!important;width:100%}
  .cv-paper .chip{border:1px solid #ccc;background:none;color:#000}
}

/* =====================================================================
   V2 — professional profiles, CV builder, candidate search, ATS.
   Same tokens and logical properties as everything above.
   ===================================================================== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.only-sm-flex{display:inline-flex}
.field-wide{grid-column:1/-1}
.grid-tight{gap:8px}
.grid-tight .field{margin-block-end:0}
.stack-sm>*+*{margin-block-start:8px}
.callout{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  border-color:#CFE5D7;background:linear-gradient(180deg,#fff 0%,#F6FBF7 100%)}
.tabs{display:flex;gap:4px;overflow-x:auto;border-block-end:1px solid var(--line);margin-block-end:14px;-webkit-overflow-scrolling:touch}
.tabs a{white-space:nowrap;padding:9px 12px;color:var(--ink-soft);font-size:.9rem;border-block-end:2px solid transparent;margin-block-end:-1px}
.tabs a b{font-weight:600;color:var(--muted);font-size:.8rem;margin-inline-start:4px}
.tabs a.is-active{color:var(--green-dark);border-color:var(--green);font-weight:600}
.tabs a:hover{text-decoration:none;color:var(--green-dark)}
.icon-btn-sm{width:30px;height:30px}
.save-bar{position:sticky;bottom:72px;z-index:15;margin-block-start:16px}
.save-bar .btn-lg{box-shadow:0 8px 22px rgba(8,139,55,.18)}
.note-box{background:#FFFBEF;border:1px solid #F1E6C4;border-radius:var(--r-sm);padding:8px 10px;margin:8px 0 0;color:var(--ink-soft)}
.prefix-input{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.prefix-input span{background:var(--paper);color:var(--muted);padding:11px 10px;font-size:.85rem;white-space:nowrap;border-inline-end:1px solid var(--line)}
.prefix-input input{border:0;border-radius:0;min-width:0}
.prefix-input:focus-within{border-color:var(--green);box-shadow:0 0 0 3px rgba(8,139,55,.12)}
html[dir="rtl"] .prefix-input{flex-direction:row-reverse}

/* ---------- Avatars ---------- */
.avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;background:var(--green-tint);
  display:inline-grid;place-items:center;color:var(--green-dark);font-weight:600;border:1px solid var(--line-soft)}
.avatar-lg{width:56px;height:56px;font-size:1.05rem}
.avatar-xl{width:76px;height:76px;font-size:1.35rem}
.avatar-xxl{width:112px;height:112px;font-size:2rem;border:4px solid #fff;box-shadow:var(--shadow)}
.avatar-initials{letter-spacing:.02em}

/* ---------- Completion ---------- */
.completion .progress{margin-block:10px 2px;height:10px}
.completion-pct{font-size:1.4rem;color:var(--green-dark);font-variant-numeric:tabular-nums}
.todo{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.todo a{display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);background:#fff;font-size:.92rem}
.todo a:hover{border-color:var(--green);text-decoration:none;background:#FBFDFB}
.todo-box{width:18px;height:18px;border:1.5px solid #B9C4BC;border-radius:5px;flex:none}
.todo-pts{margin-inline-start:auto;color:var(--green-dark);font-size:.78rem;font-weight:600;background:var(--green-tint);
  border-radius:var(--pill);padding:1px 8px}

/* ---------- Choice rows, switches, chip checkboxes ---------- */
.choice-stack{display:grid;gap:8px}
.choice-row{display:flex;gap:12px;align-items:flex-start;position:relative}
.choice-row .choice-icon{width:36px;height:36px;border-radius:10px;background:var(--paper);display:grid;place-items:center;color:var(--ink-soft);flex:none}
.choice-row:has(input:checked) .choice-icon{background:#fff;color:var(--green-dark)}
.choice-row strong{margin-block-end:1px}
.choice-row .muted{display:block}
.switch-row{margin-block:16px 6px;padding:14px;border:1.5px dashed #CFE5D7;border-radius:var(--r);background:#FBFDFB}
.switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer;margin:0;color:var(--ink)}
.switch input{position:absolute;opacity:0;width:1px;height:1px}
.switch-ui{width:44px;height:26px;border-radius:var(--pill);background:#C9D1CC;position:relative;flex:none;transition:background .15s}
.switch-ui::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:20px;height:20px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.2);transition:inset-inline-start .15s}
.switch input:checked+.switch-ui{background:var(--green)}
.switch input:checked+.switch-ui::after{inset-inline-start:21px}
.switch input:focus-visible+.switch-ui{outline:2.5px solid var(--green);outline-offset:2px}
.switch strong{display:block}
.switch .muted{display:block;font-weight:400}
.privacy-more{margin-block-start:14px}
.privacy-more .check{margin-block-end:8px}
.chips-check{display:flex;flex-wrap:wrap;gap:6px}
.chip-check{margin:0;cursor:pointer}
.chip-check input{position:absolute;opacity:0;width:1px;height:1px}
.chip-check span{display:inline-flex;padding:6px 12px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;font-size:.86rem;color:var(--ink-soft)}
.chip-check input:checked+span{background:var(--green-tint);border-color:var(--green);color:var(--green-dark);font-weight:600}
.chip-check input:focus-visible+span{outline:2.5px solid var(--green);outline-offset:2px}

/* ---------- Tips inside the builder ---------- */
.tip{display:flex;gap:10px;align-items:flex-start;background:var(--info-bg);border:1px solid #D3E4EE;border-radius:var(--r-sm);
  padding:10px 12px;margin-block:8px 14px;color:var(--ink-soft);font-size:.9rem}
.tip .icon{color:var(--info);margin-block-start:3px}
.tip p{margin:0}
.tip p+p{margin-block-start:4px}

/* ---------- CV builder ---------- */
.cvb-top{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-block:14px 10px}
.cvb-title{display:flex;align-items:center;gap:8px;flex:1;min-width:220px}
.cvb-title-input{font-size:1.15rem;font-weight:600;border-color:transparent;background:transparent;padding-inline:6px}
.cvb-title-input:hover{border-color:var(--line)}
.cvb-actions{gap:8px}
.save-state{font-size:.82rem;color:var(--muted);min-width:72px}
.save-state.is-saved{color:var(--green-dark)}
.save-state.is-error{color:var(--bad)}
.cvb-steps{display:flex;gap:6px;overflow-x:auto;padding-block:4px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.cvb-steps a{display:flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 11px 6px 7px;border-radius:var(--pill);
  border:1px solid var(--line);background:#fff;color:var(--ink-soft);font-size:.84rem}
html[dir="rtl"] .cvb-steps a{padding:6px 7px 6px 11px}
.cvb-steps a b{width:22px;height:22px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-size:.72rem;color:var(--muted)}
.cvb-steps a.is-filled b{background:var(--green-tint);color:var(--green-dark)}
.cvb-steps a.is-current{border-color:var(--green-btn);background:var(--green-btn);color:#fff}
.cvb-steps a.is-current b{background:rgba(255,255,255,.22);color:#fff}
.cvb-steps a:hover{text-decoration:none;border-color:var(--green)}
.js .cvb-step:not(.is-current){display:none}
.cvb-step{margin-block-end:14px}
.cvb-nav{margin-block:6px 14px}
.cvb-nav .btn[disabled]{visibility:hidden}
.cvb-photo{margin-block:4px 14px;gap:14px}
.repeat-title{flex:1}
.repeat-tools{display:inline-flex;gap:4px}
.repeat-item .grid-2{gap:0 14px}
.repeat-item.is-imported{border-color:#BFD9E8;background:#F6FAFD}
.field.is-imported input,.field.is-imported textarea{border-color:#BFD9E8;background:#F6FAFD}
.hint.is-good{color:var(--green-dark)}
.hint.is-long{color:var(--warn)}
.onb-banner{display:flex;gap:10px;align-items:center;flex-wrap:wrap;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:10px 14px;font-size:.92rem}

/* skill picker */
.skill-chips{display:flex;flex-wrap:wrap;gap:6px;min-height:34px;margin-block-end:10px}
.skill-chip{display:inline-flex;align-items:center;gap:4px;padding:4px 6px 4px 11px;border-radius:var(--pill);
  background:var(--paper);border:1px solid var(--line);font-size:.87rem}
html[dir="rtl"] .skill-chip{padding:4px 11px 4px 6px}
.skill-chip.is-listed{background:var(--green-tint);border-color:#CFE5D7;color:var(--green-dark)}
.skill-chip.is-imported{box-shadow:0 0 0 2px #D3E4EE}
.skill-chip button{border:0;background:none;color:inherit;cursor:pointer;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;opacity:.7}
.skill-chip button:hover{opacity:1;background:rgba(0,0,0,.06)}
.skill-search{position:relative}
.skill-suggest{position:absolute;inset-inline:0;top:100%;z-index:30;list-style:none;margin:4px 0 0;padding:4px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:0 10px 26px rgba(18,26,21,.12);max-height:280px;overflow:auto}
.skill-suggest li{padding:8px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.skill-suggest li small{color:var(--muted)}
.skill-suggest li:hover,.skill-suggest li.is-active{background:var(--green-tint)}

/* template choice + arranging */
.tpl-grid{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.tpl-choice{text-align:center;padding:10px}
.tpl-choice strong{font-size:.9rem;margin-block-start:6px}
.tpl-choice .muted{display:block;font-size:.76rem}
.tpl-thumb{display:block;height:74px;border:1px solid var(--line);border-radius:6px;background:#fff;position:relative;overflow:hidden}
.tpl-thumb i{position:absolute;display:block;background:#E1E6E2;border-radius:2px}
.tpl-thumb-classic i:nth-child(1){top:9px;inset-inline:30%;height:6px;background:var(--green)}
.tpl-thumb-classic i:nth-child(2){top:22px;inset-inline:12%;height:3px}
.tpl-thumb-classic i:nth-child(3){top:32px;inset-inline:12%;bottom:10px;background:repeating-linear-gradient(#E1E6E2 0 3px,transparent 3px 8px)}
.tpl-thumb-modern i:nth-child(1){top:0;bottom:0;inset-inline-start:0;width:32%;background:#E7F3EB;border-radius:0}
.tpl-thumb-modern i:nth-child(2){top:10px;inset-inline-start:40%;inset-inline-end:12%;height:6px;background:var(--green)}
.tpl-thumb-modern i:nth-child(3){top:24px;inset-inline-start:40%;inset-inline-end:10%;bottom:10px;background:repeating-linear-gradient(#E1E6E2 0 3px,transparent 3px 8px)}
.tpl-thumb-compact i:nth-child(1){top:8px;inset-inline-start:10%;width:40%;height:5px;background:var(--ink-soft)}
.tpl-thumb-compact i:nth-child(2){top:20px;inset-inline-start:10%;width:18%;bottom:10px;background:repeating-linear-gradient(var(--green) 0 2px,transparent 2px 14px)}
.tpl-thumb-compact i:nth-child(3){top:20px;inset-inline-start:32%;inset-inline-end:10%;bottom:10px;background:repeating-linear-gradient(#E1E6E2 0 2px,transparent 2px 6px)}
.arrange{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px;counter-reset:ar}
.arrange li{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 8px 6px 10px;background:#fff}
.arrange li .check{margin:0;align-items:center}

/* The CV sheet on screen: fluid, keeping A4 proportions, and every size in em
   so the preview shrinks as one piece. */
.cv-sheet-wrap{container-type:inline-size;margin-block-start:8px}
.cv-sheet{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 12px 30px rgba(18,26,21,.08);
  aspect-ratio:210/297;overflow:hidden;font-size:1.72cqw;padding:6.5% 6%}
.cv-sheet-print{max-width:210mm;margin-inline:auto;aspect-ratio:auto;min-height:297mm;font-size:10pt;padding:15mm 14mm}
@supports not (font-size:1cqw){.cv-sheet{font-size:9px}}
.print-bar{display:flex;flex-direction:column;gap:10px;margin-block-end:16px}

/* ---------- The CV document (all templates) ---------- */
.cvdoc{color:#1A1F1C;line-height:1.45;font-family:var(--font-en)}
.cvdoc[dir="rtl"]{font-family:var(--font-ar);line-height:1.7}
.cvdoc h1{font-size:2.15em;margin:0;letter-spacing:-.01em;line-height:1.15;color:#101512}
.cvdoc[dir="rtl"] h1{letter-spacing:normal;line-height:1.35}
.cvdoc h2{font-size:.95em;margin:1.5em 0 .6em;color:#06622A;font-weight:700}
.cvdoc p{margin:0 0 .35em}
.cvdoc ul{margin:.25em 0 .4em;padding-inline-start:1.15em}
.cvdoc li{margin-block-end:.15em}
.cvd-headline{font-size:1.12em;color:#3D4A42;margin:.15em 0 0!important}
.cvd-contact{color:#4B5750;font-size:.92em;margin-block-start:.5em!important}
.cvd-contact i{font-style:normal;color:#9AA59E}
.cvd-head{display:flex;gap:1.2em;align-items:center}
.cvd-photo{width:6.2em;height:6.2em;border-radius:50%;object-fit:cover;flex:none}
.cvd-entry{margin-block-end:.8em;break-inside:avoid}
.cvd-entry.cvd-tight{margin-block-end:.45em}
.cvd-row{display:flex;justify-content:space-between;gap:1em;align-items:baseline}
.cvd-row b{font-weight:650}
.cvd-when{color:#5C6B61;font-size:.88em;white-space:nowrap;font-variant-numeric:tabular-nums}
.cvd-sub{color:#4B5750;font-size:.93em}
.cvd-tags{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:.35em .4em}
.cvd-tags li{border:1px solid #CFE0D5;background:#F3F9F5;border-radius:1em;padding:.1em .7em;font-size:.9em;margin:0}
.cvd-pairs,.cvd-lines{list-style:none;padding:0!important}
.cvd-pairs li{display:flex;justify-content:space-between;gap:1em}
.cvd-pairs li span{color:#5C6B61;font-size:.9em}
.cvd-lines li{margin-block-end:.3em;word-break:break-word}
.cvd-refs{display:grid;grid-template-columns:1fr 1fr;gap:.2em 1.4em}

/* classic: centred name, green rules under headings */
.cv-t-classic .cvd-head{flex-direction:column;text-align:center;gap:.7em}
.cv-t-classic h2{border-block-end:1.5px solid #CFE0D5;padding-block-end:.25em;text-transform:uppercase;letter-spacing:.08em;font-size:.86em}
.cv-t-classic[dir="rtl"] h2{text-transform:none;letter-spacing:normal;font-size:.98em}

/* modern: tinted side column */
.cv-t-modern .cvd-head{padding-block-end:1em;border-block-end:3px solid #088B37}
.cv-t-modern .cvd-cols{display:grid;grid-template-columns:32% 1fr;gap:1.6em;margin-block-start:1.2em}
.cv-t-modern .cvd-side{background:#F1F7F3;border-radius:.5em;padding:.2em 1em 1em;font-size:.93em}
.cv-t-modern .cvd-side h2{color:#06622A;font-size:.92em}
.cv-t-modern .cvd-main h2{font-size:1.05em;color:#101512;display:flex;align-items:center;gap:.5em}
.cv-t-modern .cvd-main h2::before{content:"";width:.9em;height:.25em;background:#088B37;border-radius:.2em}
.cv-t-modern .cvd-refs{grid-template-columns:1fr}
.cv-t-modern .cvd-main>.cvd-sec:first-child h2{margin-block-start:.2em}

/* compact: headings as a narrow label column, dense text */
.cv-t-compact{font-size:.94em}
.cv-t-compact .cvd-head{border-block-end:1px solid #DDE3DF;padding-block-end:.7em}
.cv-t-compact h1{font-size:1.85em}
.cv-t-compact .cvd-sec{display:grid;grid-template-columns:21% 1fr;gap:1em;margin-block-start:.9em}
.cv-t-compact h2{margin:0;font-size:.82em;text-transform:uppercase;letter-spacing:.06em;color:#088B37;padding-block-start:.15em}
.cv-t-compact[dir="rtl"] h2{text-transform:none;letter-spacing:normal;font-size:.95em}
.cv-t-compact .cvd-entry{margin-block-end:.55em}

/* ---------- CV cards (My CVs) ---------- */
.cv-card.is-primary{border-color:#BFDCC9;box-shadow:0 0 0 1px #BFDCC9,var(--shadow)}
.cv-card .card-foot{gap:6px}
.cv-card details summary{cursor:pointer;color:var(--ink-soft)}

/* ---------- Onboarding ---------- */
.onb-progress{display:flex;align-items:center;gap:6px;margin-block-end:18px}
.onb-progress i{flex:1;height:5px;border-radius:var(--pill);background:var(--line)}
.onb-progress i.is-on{background:var(--green)}
.onb-progress span{margin-inline-start:8px;white-space:nowrap}
.onb-hero{text-align:center;margin-block:10px 20px}
.onb-hero .lede{max-width:46ch;margin-inline:auto}
.onb-choices{display:grid;gap:12px;grid-template-columns:1fr}
.onb-choice{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:24px 18px;color:inherit;
  border-width:1.5px;transition:border-color .12s,transform .12s}
.onb-choice:hover{border-color:var(--green);text-decoration:none;transform:translateY(-2px)}
.onb-choice strong{font-size:1.1rem}
.onb-choice .btn{margin-block-start:6px}
.onb-icon{width:54px;height:54px;border-radius:16px;background:var(--green-tint);color:var(--green-dark);display:grid;place-items:center}
.onb-icon .icon{width:26px;height:26px}
.onb-why{list-style:none;padding:0;margin:20px auto 10px;max-width:440px;display:grid;gap:6px;color:var(--ink-soft);font-size:.92rem}
.onb-why li{display:flex;gap:8px;align-items:center}
.onb-why .icon{color:var(--green)}
.onb-done-mark{width:64px;height:64px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;margin:0 auto 12px}
.onb-done-mark .icon{width:32px;height:32px;stroke-width:2.4}

/* ---------- CV import ---------- */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:26px 16px;margin-block:14px;
  border:2px dashed #BFD2C6;border-radius:var(--r);background:#FBFDFB;cursor:pointer;color:var(--ink)}
.dropzone:hover,.dropzone:focus-within{border-color:var(--green);background:var(--green-tint)}
.dropzone .icon{width:30px;height:30px;color:var(--green-dark)}
.dropzone input[type=file]{max-width:100%;margin-block-start:6px}
.raw-text{white-space:pre-wrap;font-size:.8rem;max-height:340px;overflow:auto;background:var(--paper);padding:10px;border-radius:var(--r-sm)}
.import-review .save-bar{position:static}

/* ---------- Public profile ---------- */
.owner-bar{margin-block-end:14px;border-color:#D3E4EE;background:#F7FBFD}
.view-as{gap:6px;align-items:center}
.pp-head{overflow:hidden;padding-block-end:16px}
.pp-band{height:96px;background:linear-gradient(120deg,#06622A 0%,#088B37 55%,#3FA968 100%);position:relative}
.pp-band::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%,rgba(255,255,255,.18) 0 60px,transparent 61px),
  radial-gradient(circle at 10% 120%,rgba(255,255,255,.12) 0 90px,transparent 91px)}
.pp-id{display:flex;gap:16px;align-items:flex-end;padding-inline:18px;margin-block-start:-44px;position:relative;flex-wrap:wrap}
.pp-names{flex:1;min-width:220px;padding-block-start:48px}
.pp-names h1{margin-bottom:2px}
.pp-headline{color:var(--ink-soft);font-size:1.02rem;margin:0}
.pp-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:14px 18px 0}
.pp-note{padding:12px 18px 0}
.pp-note textarea{min-height:44px}
.pp-grid{display:grid;gap:14px;margin-block-start:14px}
.pp-sec+.pp-sec{margin-block-start:14px}
.pp-sec h2{display:flex;align-items:center;gap:6px}
.pp-sec h2 .icon{color:var(--green)}
.pp-timeline{list-style:none;margin:0;padding:0}
.pp-timeline>li{position:relative;padding-inline-start:18px;padding-block-end:14px;border-inline-start:2px solid var(--line-soft);margin-inline-start:4px}
.pp-timeline>li::before{content:"";position:absolute;inset-inline-start:-6px;top:7px;width:10px;height:10px;border-radius:50%;
  background:#fff;border:2px solid var(--green)}
.pp-timeline>li:last-child{padding-block-end:0}
.pp-text{color:var(--ink-soft);font-size:.93rem;margin-block-start:4px}
.pp-text ul{margin:.2rem 0;padding-inline-start:18px}
.pp-text p{margin:0 0 .3rem}
.pp-pairs,.pp-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pp-pairs li{display:flex;justify-content:space-between;gap:10px}
.pp-list li b{display:block;font-weight:500}
.pp-dl{margin:0;display:grid;gap:2px}
.pp-dl dt{font-size:.8rem;color:var(--muted);margin-block-start:8px}
.pp-dl dt:first-child{margin-block-start:0}
.pp-dl dd{margin:0}
.pp-since{text-align:center;margin-block-start:10px}

/* ---------- Matching ---------- */
.match{margin-block-start:8px}
.match-reasons{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.82rem}
.match-reasons li{display:inline-flex;align-items:center;gap:4px;color:var(--ink-soft)}
.match-reasons li.is-ok .icon{color:var(--green)}
.match-reasons li.is-no{color:var(--muted)}
.match-reasons li.is-no .icon{color:#B7A7A4}
.fit-box{margin-block:16px;padding:12px 14px;border:1px solid #CFE5D7;border-radius:var(--r);background:#F8FCF9}

/* ---------- Candidate search ---------- */
.cand-card .cand-main{display:flex;gap:14px;padding:16px}
.cand-body{min-width:0;flex:1}
.cand-body h2 a{color:var(--ink)}
.cand-skills{margin-block-start:6px}
.cand-card .card-foot{gap:8px}

/* ---------- Pipeline / ATS ---------- */
.pipeline{display:flex;gap:6px;overflow-x:auto;padding-block-end:6px;margin-block:8px 14px;-webkit-overflow-scrolling:touch}
.pipeline a{flex:1 0 auto;min-width:98px;display:flex;flex-direction:column;gap:2px;padding:9px 12px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);color:var(--ink-soft);font-size:.82rem;position:relative}
.pipeline a b{font-size:1.25rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.2}
.pipeline a:hover{text-decoration:none;border-color:var(--green)}
.pipeline a.is-active{border-color:var(--green-btn);box-shadow:inset 0 -3px 0 var(--green-btn);color:var(--green-dark)}
.pipeline a::before{content:"";position:absolute;top:0;inset-inline:0;height:3px;border-radius:var(--r-sm) var(--r-sm) 0 0;background:transparent}
.pipeline .stage-submitted::before{background:#9DB4A5}
.pipeline .stage-viewed::before{background:#5E9EC2}
.pipeline .stage-shortlisted::before{background:#46A56A}
.pipeline .stage-interview::before{background:#088B37}
.pipeline .stage-hired::before{background:#06622A}
.pipeline .stage-rejected::before{background:#C9776F}
.pipeline-compact{margin-block-end:0}
.bulk-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-block-end:10px;padding:10px 14px}
.bulk-bar .check{margin:0;align-items:center}
.app-row{display:flex;gap:12px;align-items:center;padding:12px 14px}
.app-check{margin:0;display:flex}
.app-check input{width:18px;height:18px;accent-color:var(--green)}
.app-body{flex:1;min-width:0}
.app-name{font-weight:600;color:var(--ink)}
.app-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.stage-buttons{display:flex;flex-wrap:wrap;gap:6px}
.stage-btn{margin:0;cursor:pointer}
.stage-btn input{position:absolute;opacity:0;width:1px;height:1px}
.stage-btn span{display:inline-flex;padding:8px 14px;border-radius:var(--pill);border:1px solid var(--line);background:#fff;font-size:.88rem;color:var(--ink-soft)}
.stage-btn input:checked+span{background:var(--green-btn);border-color:var(--green-btn);color:#fff;font-weight:600}
.stage-rejected input:checked+span{background:var(--bad);border-color:var(--bad)}
.stage-btn input:focus-visible+span{outline:2.5px solid var(--green);outline-offset:2px}
.notes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.notes li{border-inline-start:3px solid #E9D98F;background:#FFFCF2;border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px;font-size:.92rem}
html[dir="rtl"] .notes li{border-radius:var(--r-sm) 0 0 var(--r-sm)}

/* ---------- Company profile ---------- */
.company-head{overflow:hidden;padding-block-end:16px}
.company-cover{height:140px;background:linear-gradient(120deg,#0B3A22,#088B37);background-size:cover;background-position:center}
.company-id{display:flex;gap:16px;align-items:flex-end;padding-inline:18px;margin-block-start:-36px;flex-wrap:wrap}
.company-id>div{padding-block-start:40px;flex:1;min-width:220px}
.company-logo{width:84px;height:84px;border:3px solid #fff;box-shadow:var(--shadow);background:#fff}
.company-links{padding:12px 18px 0;gap:8px}
.cover-preview{width:100%;max-height:140px;object-fit:cover;border-radius:var(--r-sm);margin-block-end:8px}

/* ---------- Dashboards ---------- */
.dash-hello{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.dash-cols{display:grid;gap:14px;grid-template-columns:1fr}
.dash-grid-2{grid-template-columns:repeat(2,1fr)!important;align-content:start}
a.stat{color:inherit}
a.stat:hover{text-decoration:none;border-color:#CFDDD4}

@media (min-width:640px){
  .onb-choices{grid-template-columns:1fr 1fr}
  .only-sm-flex{display:none}
}
@media (min-width:900px){
  .pp-grid{grid-template-columns:1fr 300px;align-items:start}
  .dash-cols{grid-template-columns:1.2fr 1fr}
  .save-bar{bottom:12px}
  .cvb .cv-layout{grid-template-columns:1fr minmax(0,440px)}
}
@media (max-width:899px){
  .js [data-cvb]:not([data-at="finish"]) .cv-preview-col{display:none}
  .js [data-cvb][data-at="finish"] .cv-preview-col{order:-1}
}
@media (max-width:520px){
  .tpl-grid{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .app-row{flex-wrap:wrap}
  .app-side{flex-direction:row;align-items:center;width:100%;justify-content:space-between}
  .cand-card .cand-main{padding:14px}
  .pp-id{justify-content:center;text-align:center}
  .pp-names .chips{justify-content:center}
}

/* ---------- Printing a CV: only the A4 sheet ---------- */
@media print{
  @page{size:A4;margin:0}
  .page-print .site-header,.page-print .site-footer,.page-print .bottom-nav,.page-print .print-bar,
  .page-print .flash,.page-print .side-menu{display:none!important}
  .page-print .wrap{max-width:none;padding:0}
  .page-print .section{padding:0}
  .cv-sheet,.cv-sheet-print{border:0;border-radius:0;box-shadow:none;max-width:none;width:210mm;min-height:297mm;
    aspect-ratio:auto;overflow:visible;padding:14mm 14mm 12mm;font-size:10pt}
  .cvdoc{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .cv-t-modern .cvd-side{background:#F1F7F3!important}
  .cvd-entry{break-inside:avoid}
  .cvdoc h2{break-after:avoid}
}

/* =====================================================================
   V2.1 — verification bar, invitations, reports, career, admin tools
   ===================================================================== */
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.verify-bar{background:var(--warn-bg);border-block-end:1px solid #EFE0BE;color:var(--warn);font-size:.9rem;padding-block:8px}
.verify-bar .icon{vertical-align:-3px}
.invite-box{display:inline-block;position:relative}
.invite-box>summary{list-style:none;cursor:pointer}
.invite-box>summary::-webkit-details-marker{display:none}
.invite-box[open]>summary{background:var(--green-btn);color:#fff}
.invite-pop{position:absolute;z-index:25;top:calc(100% + 6px);inset-inline-start:0;width:min(340px,86vw);box-shadow:0 12px 30px rgba(18,26,21,.14)}
.inv-card.is-new{border-color:#BFD9E8;box-shadow:0 0 0 1px #BFD9E8,var(--shadow)}
.inv-callout{color:inherit;border-color:#BFD9E8;background:linear-gradient(180deg,#fff 0%,#F4F9FC 100%)}
.inv-callout:hover{text-decoration:none;border-color:var(--info)}
.pp-report{margin-block-start:10px;text-align:center}
.pp-report summary{cursor:pointer}
.pp-report form{text-align:start}
.danger-zone{border-color:#F0D2CE}
.switch-card .btn{white-space:nowrap}
.gap-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));margin-block:8px}
.gap{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
.gap:hover{border-color:var(--green);text-decoration:none;background:#FBFDFB}
.course-card .chips{margin-block-start:10px}
.tbl-num td:not(:first-child),.tbl-num th:not(:first-child){text-align:end;font-variant-numeric:tabular-nums}

/* ---------- V2.2: abroad, team-posted jobs, places ---------- */
.chip-abroad{background:#EAF1FB;color:#1D4E89;border-color:#CFE0F5}
.region-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-block:2px 14px}
.region-tabs a{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;color:var(--ink-soft);font-size:.9rem;background:#fff}
.region-tabs a:hover{border-color:var(--green);text-decoration:none}
.region-tabs a.is-active{background:var(--green-tint);border-color:var(--green);color:var(--green-dark);font-weight:600}
.staff-note{display:flex;gap:6px;align-items:flex-start;margin:14px 0 0;padding:10px 12px;border-radius:var(--r-sm);background:#F5F8F6;color:var(--ink-soft)}
.staff-note .icon{flex:none;margin-top:2px;color:var(--green-dark)}
.hero-links a .icon{vertical-align:-2px}
[data-copy].is-on{border-color:var(--green);color:var(--green-dark)}
.howto-apply{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff}
.howto-apply .prose{margin-top:6px}
.biz-more{margin-bottom:8px}
.biz-more summary{cursor:pointer;color:var(--green-dark);font-weight:600;font-size:.92rem}
.apply-gate{margin-top:12px;padding:14px;border:1.5px dashed var(--green);border-radius:var(--r-sm);background:var(--green-tint);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.apply-gate .icon{vertical-align:-2px;color:var(--green-dark)}

/* ---- featured jobs ---- */
.job-card.is-featured{border-color:#E9C46A;box-shadow:0 0 0 1px #E9C46A inset;background:linear-gradient(180deg,#FFFBEF 0,#fff 60%)}
.job-card.is-featured:hover{border-color:#D9A93A}
.chip-featured{background:#FDF0C8;border-color:#EBCB72;color:#7A5300;font-weight:600;margin-block-end:4px}
.feature-box{border:1px solid #EBCB72;background:#FFFBEF}
.feature-box .row{flex-wrap:wrap}

/* ---- welcome tour ---- */
.tour{position:fixed;inset:0;z-index:90}
.tour[hidden],.tour [hidden]{display:none!important}
.tour-backdrop{position:absolute;inset:0;background:rgba(18,26,21,.48)}
.tour-card{position:absolute;inset-inline:0;margin-inline:auto;bottom:max(84px,10vh);width:min(420px,calc(100% - 32px));
  background:var(--white);border-radius:16px;padding:22px 20px 14px;box-shadow:0 18px 50px rgba(18,26,21,.28);z-index:2;
  animation:tour-in .22s ease-out}
@media (min-width:860px){.tour-card{bottom:auto;top:50%;transform:translateY(-50%)}}
@keyframes tour-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.tour-step{text-align:center}
.tour-icon{display:inline-grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--green-tint);color:var(--green-dark);margin-block-end:6px}
.tour-icon .icon{width:28px;height:28px}
.tour-count{margin:0 0 2px}
.tour-step .h3{margin:0 0 6px}
.tour-text{color:var(--ink-soft);margin:0 0 12px;line-height:1.6}
.tour-cta{margin-block-end:4px}
.tour-dots{display:flex;justify-content:center;gap:6px;margin:6px 0 10px}
.tour-dots span{width:7px;height:7px;border-radius:50%;background:var(--line)}
.tour-dots span.is-on{background:var(--green);width:18px;border-radius:4px}
.tour-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;border-block-start:1px solid var(--line-soft);padding-block-start:10px}
.tour-nav{display:flex;gap:6px}
.tour-spot{position:relative;z-index:91;outline:3px solid #E9C46A;outline-offset:3px;border-radius:var(--pill);background:var(--white);
  animation:tour-pulse 1.4s ease-in-out infinite}
@keyframes tour-pulse{50%{outline-color:#F4DC98;outline-offset:6px}}
.site-header.tour-lift,.bottom-nav.tour-lift{z-index:91}
html.tour-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.tour-card,.tour-spot{animation:none}}

/* ---- featured businesses, feature buttons ---- */
.fco-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fco-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:16px 12px;border-color:#E9C46A;background:linear-gradient(180deg,#FFFBEF 0,#fff 70%);color:inherit;text-decoration:none}
.fco-card:hover{border-color:#D9A93A}
.fco-card .logo{width:56px;height:56px}
.fco-card b{font-size:.95rem;line-height:1.3}
.card.job-card-main.is-featured{border-color:#E9C46A;box-shadow:0 0 0 1px #E9C46A inset;background:linear-gradient(180deg,#FFFBEF 0,#fff 60%)}
.btn-feature{background:#FDF0C8;border:1px solid #EBCB72;color:#7A5300}
.btn-feature:hover{background:#FAE6A8}
.sel-sm{width:auto;min-height:32px;padding:2px 8px;font-size:.85rem}

/* ---- where a job came from ---- */
.chip-collected{background:#EEF2F7;border-color:#CBD5E1;color:#334155;margin-block-end:4px}
.src-box{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:12px 14px;border:1px solid #CBD5E1;background:#F4F7FB;border-radius:10px;color:#1F2937}
.src-box p{margin:2px 0 0}
.src-box .icon{flex:none;margin-top:2px;color:#475569}
.src-direct{margin:12px 0 0;color:#166534}

/* ---- onboarding: optional details folded away ---- */
.onb-more{margin-top:4px;border:1px solid var(--line-soft);border-radius:10px;padding:0 12px}
.onb-more>summary{cursor:pointer;padding:12px 0;font-weight:600;color:var(--brand,#1E6B3A);list-style:none}
.onb-more>summary::-webkit-details-marker{display:none}
.onb-more>summary::after{content:"＋";float:inline-end;font-weight:400}
.onb-more[open]>summary::after{content:"－"}
.onb-more[open]{padding-bottom:12px}