/*
 * Wazifati — OFFICIAL BRAND PALETTE (v3.96.0 trial). Forest green #233B2E + gold #C9A86B on cream
 * #fdf8ec, from the brand identity guide. The variable NAMES are kept (emerald/navy/sand) so nothing
 * that references them breaks; only their VALUES now carry the brand. Reverting is one file:
 * `cp styles.pre-brand.css public/styles.css`.
 */
:root{
  --emerald:#233B2E;      /* primary action — brand forest green */
  --emerald-d:#1a2c22;    /* pressed / hover */
  --emerald-l:#345441;
  --emerald-soft:#e9efe9; /* tinted surfaces */
  --navy:#233B2E;         /* headings — brand green */
  --ink:#28312b;          /* body text — dark green-charcoal, legible on cream */
  --muted:#63705f;
  --sand:#fdf8ec;         /* page background — brand cream */
  --sand-d:#f6efdf;
  --card:#fffdf8;
  --line:#e8e0cf;
  --blue:#233B2E;         /* legacy alias: links follow the brand green */
  --blue-d:#1a2c22;
  --teal:#345441;
  --gold:#c9a86b;         /* brand gold */
  --bg:var(--sand);
  --soft:var(--emerald-soft);
  --green:#233B2E;--red:#b3261e;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",Tahoma,system-ui,sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}
/* Arabic needs a little more line height and a font stack that actually has the glyphs. */
html[lang="ar"] body{font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,system-ui,sans-serif;line-height:1.9}
a{cursor:pointer;text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
/* v3.255.0 (R9-O, Command Center Phase 1): dashboards use a wider workspace so the
   Command Center layout (brief + action queue + wider tables) has room to breathe. The
   default .wrap stays at 1140px for content pages (home, jobs, legal, help) so long-form
   reading stays comfortable — dashboards are scanned, not read. */
.wrap-wide{max-width:1440px;margin:0 auto;padding:0 20px}
.hidden{display:none!important}
/* v3.255.0 AI Daily Brief — the narrative summary at the top of the employer Command
   Center. A quiet card, not a hero — it sits above the numbers row and links to the
   actions the org needs to take today. */
.brief-card{background:linear-gradient(135deg,#fdfaf3 0%,#f7f2e6 100%);
  border:1px solid var(--line);border-inline-start:4px solid var(--emerald,#233B2E);
  border-radius:14px;padding:20px 24px;margin:0 0 18px;
  box-shadow:0 2px 8px rgba(35,59,46,.04)}
.brief-card .brief-h{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 10px}
.brief-card .brief-h b{font-size:16.5px;color:var(--navy);font-weight:800;letter-spacing:.1px}
.brief-card .brief-h .brief-time{font-size:12.5px;color:var(--muted);font-weight:600}
.brief-card .brief-lines{margin:0;padding:0;list-style:none;font-size:14.5px;
  line-height:1.85;color:var(--ink)}
.brief-card .brief-lines li{padding:3px 0;display:flex;align-items:baseline;gap:8px}
.brief-card .brief-lines li .dot{color:var(--emerald,#233B2E);font-weight:800;flex:0 0 auto}
.brief-card .brief-empty{color:var(--muted);font-style:italic;font-size:14px;margin:6px 0 0}
.brief-card .brief-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.brief-card .brief-actions button{padding:8px 14px;font-size:13.5px;font-weight:600;
  border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--navy);
  cursor:pointer;transition:all .15s}
.brief-card .brief-actions button:hover{background:var(--sand-d);border-color:var(--navy)}
.brief-card .brief-actions button.primary{background:var(--emerald,#233B2E);color:#fff;
  border-color:var(--emerald,#233B2E)}
.brief-card .brief-actions button.primary:hover{background:var(--navy);border-color:var(--navy)}
@media(max-width:640px){.brief-card{padding:16px}.brief-card .brief-lines{font-size:14px}}
/* v3.256.0 (R9-P, Command Center Phase 2): Action Center — the unified «Needs Your
   Attention» queue. Sits directly under the AI Daily Brief. Each row = one class of
   pending decision, colour-coded by tier: red for a hard block, amber for time-
   sensitive, blue for routine. The whole card hides when the queue is empty (no
   attention needed, no chrome shown). */
.action-center{border:1px solid var(--line);border-radius:14px;background:#fff;
  margin:0 0 18px;overflow:hidden;
  box-shadow:0 2px 8px rgba(35,59,46,.04)}
.action-center .ac-head{padding:14px 20px;background:#fff8ec;
  border-bottom:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.action-center .ac-head b{font-size:15.5px;color:var(--navy);font-weight:800;letter-spacing:.1px}
.action-center .ac-head .ac-hint{font-size:12.5px;color:var(--muted);font-weight:500}
.action-center .ac-row{display:flex;align-items:center;gap:14px;padding:14px 20px;
  border-bottom:1px solid var(--line);transition:background .15s}
.action-center .ac-row:last-child{border-bottom:none}
.action-center .ac-row:hover{background:#faf9f5}
.action-center .ac-row .ac-icon{flex:0 0 38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:10px;font-size:18px}
.action-center .ac-row.tier-block .ac-icon{background:#fee2e2;color:#7f1d1d}
.action-center .ac-row.tier-urgent .ac-icon{background:#fef3c7;color:#7c2d12}
.action-center .ac-row.tier-routine .ac-icon{background:#e0e7ff;color:#1e3a8a}
.action-center .ac-row .ac-body{flex:1;min-width:0}
.action-center .ac-row .ac-title{font-size:14.5px;font-weight:700;color:var(--navy);margin:0 0 2px}
.action-center .ac-row .ac-why{font-size:13px;color:var(--muted);line-height:1.55}
.action-center .ac-row .ac-cta{flex:0 0 auto;padding:8px 14px;font-size:13px;font-weight:600;
  border-radius:8px;border:1px solid var(--navy);background:var(--navy);color:#fff;cursor:pointer;
  transition:all .15s;white-space:nowrap}
.action-center .ac-row .ac-cta:hover{background:var(--emerald,#233B2E);border-color:var(--emerald,#233B2E)}
.action-center .ac-row .ac-cta.secondary{background:#fff;color:var(--navy)}
.action-center .ac-row .ac-cta.secondary:hover{background:var(--sand-d)}
@media(max-width:640px){
  .action-center .ac-row{flex-wrap:wrap;padding:12px 16px}
  .action-center .ac-row .ac-cta{flex:1 1 100%;text-align:center;margin-top:6px}
}
/* v3.258.0 (R9-R, Command Center Phase 4): Job Readiness live card at top of the
   post-job form. Refreshes on every input; every factor is a deterministic check
   on a form value the employer just typed. */
.readiness-card{background:#fff;border:1px solid var(--line);border-inline-start:4px solid var(--emerald,#233B2E);
  border-radius:14px;padding:18px 22px;margin:0 0 16px;
  box-shadow:0 2px 8px rgba(35,59,46,.04)}
.readiness-card .rd-head{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;flex-wrap:wrap;margin-bottom:12px}
.readiness-card .rd-head b{font-size:15.5px;color:var(--navy);font-weight:800}
.readiness-card .rd-score-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.readiness-card .rd-score{font-size:20px;font-weight:800}
.readiness-card .rd-tier{color:#fff;font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:999px}
.readiness-card .rd-bar{height:8px;background:var(--sand-d);border-radius:999px;overflow:hidden;margin-bottom:14px}
.readiness-card .rd-bar-fill{height:100%;transition:width .25s,background .25s;border-radius:999px}
.readiness-card .rd-passed{margin:0 0 10px}
.readiness-card .rd-passed summary{cursor:pointer;color:#16a34a;font-weight:600;font-size:13.5px;padding:4px 0}
.readiness-card .rd-pending{background:#fff8ec;border-radius:10px;padding:12px 14px;margin:0 0 10px}
.readiness-card .rd-pending-h{font-weight:700;color:#7c2d12;margin-bottom:8px;font-size:14px}
.readiness-card .rd-item{display:flex;gap:10px;align-items:baseline;padding:5px 0;font-size:13.5px;line-height:1.65}
.readiness-card .rd-item.ok{color:var(--muted)}
.readiness-card .rd-item.bad{color:var(--ink)}
.readiness-card .rd-item .rd-mark{flex:0 0 18px;font-weight:800;font-size:15px}
.readiness-card .rd-item.ok .rd-mark{color:#16a34a}
.readiness-card .rd-item.bad .rd-mark{color:#b91c1c}
.readiness-card .rd-item .rd-lbl-wrap{flex:1}
.readiness-card .rd-item .rd-lbl{font-weight:600}
.readiness-card .rd-item .rd-hint{font-size:12.5px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.55}
.readiness-card .rd-item .rd-weight{flex:0 0 auto;color:var(--muted);font-size:11.5px;font-weight:600;
  background:var(--sand-d);padding:2px 7px;border-radius:6px}
.readiness-card .rd-note{margin:8px 0 0;color:var(--muted);font-size:12px;font-style:italic;line-height:1.6}
@media(max-width:640px){.readiness-card{padding:14px 16px}.readiness-card .rd-score{font-size:18px}}

header{background:rgba(253,248,236,.92);backdrop-filter:saturate(1.4) blur(8px);color:var(--navy);
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;min-height:64px}
.logo{font-weight:800;font-size:22px;display:flex;align-items:center;gap:9px;color:var(--navy)}
.logo .ai{color:var(--emerald);font-weight:800}
.logo .mark{display:block}
.links{display:flex;gap:18px}
.links a{font-size:14.5px;color:var(--ink);opacity:.85;padding:7px 2px;border-bottom:2px solid transparent;font-weight:600}
.links a.active{opacity:1;color:var(--emerald);border-bottom-color:var(--emerald)}
.links a:hover{opacity:1;color:var(--emerald)}
.spacer{flex:1}
.actions{display:flex;align-items:center;gap:10px}
/* v3.206.0 (Batch K, K7): min-height:44px on every interactive control so touch targets meet the
   WCAG 2.5.5 AAA large-target guidance. Padding stays as-is (visual density unchanged); the button
   box just no longer collapses below 44px when the intrinsic content is short. */
.lang-btn,.ghost{border:1px solid var(--line);color:var(--navy);border-radius:10px;padding:8px 14px;font-size:13.5px;font-weight:600;background:transparent;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.lang-btn:hover,.ghost:hover{background:var(--emerald-soft);border-color:var(--emerald)}
.btn{background:var(--emerald);color:#fff;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:700;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.btn:hover{background:var(--emerald-d)}
.btn.teal{background:var(--teal)} .btn.block{width:100%;text-align:center}
.btn.lg{padding:12px 22px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.usertag{color:var(--navy);font-size:13.5px;opacity:.85;font-weight:600}
.burger{display:none;color:var(--navy);font-size:24px;padding:2px 8px}

.hero{background:var(--sand);color:var(--navy);padding:16px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;min-height:520px}
.hero-copy h1{font-size:clamp(30px,4.4vw,52px);line-height:1.25;margin:0 0 14px;font-weight:800;color:var(--navy);letter-spacing:-.5px}
.hero-copy h1 .hl{color:var(--emerald)}
.hero-copy p{font-size:17.5px;color:var(--muted);margin:0 0 26px;max-width:520px;line-height:1.9}
.hero-figure{position:relative;min-height:300px;display:flex;align-items:center;justify-content:center;padding:18px}
.hero-figure img{width:100%;max-width:560px;height:auto;object-fit:cover;border-radius:22px;display:block;
  box-shadow:0 24px 60px rgba(35,59,46,.12)}
/* Floating badges over the photo — decorative, and each carries its own label. */
.float-card{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:11px 14px;box-shadow:0 14px 34px rgba(35,59,46,.13);display:flex;gap:10px;align-items:center;max-width:230px}
.float-card b{font-size:13.5px;color:var(--navy);display:block}
.float-card span{font-size:11.5px;color:var(--muted);display:block}
.float-a{top:-14px;inset-inline-end:-18px}
.float-b{bottom:-18px;inset-inline-start:-22px}
.tickmark{width:26px;height:26px;border-radius:50%;background:var(--emerald);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:14px;flex:0 0 auto}
.searchbar{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:9px;display:flex;gap:8px;
  box-shadow:0 16px 40px rgba(35,59,46,.10);flex-wrap:wrap;align-items:center}
.searchbar input,.searchbar select{border:none;outline:none;font-size:15px;padding:12px 12px;border-radius:11px;color:var(--ink);flex:1;min-width:150px;background:transparent}
.searchbar .divider{width:1px;align-self:stretch;background:var(--line);margin:6px 0}
.hero-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:16px}
.trust-row{display:flex;gap:20px;align-items:center;flex-wrap:wrap;margin-top:22px;color:var(--muted);font-size:13.5px}
.trust-row .t{display:flex;gap:8px;align-items:center}
.trust-row svg{color:var(--emerald)}
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .hero-figure{order:-1;min-height:0;margin-bottom:8px}
  .float-card{display:none}
}

main{min-height:60vh}
/* The server-rendered crawlable copy (search engines + no-JS readers) is hidden from a JavaScript
   browser so it never flashes before the app paints; a <noscript> rule in index.html reveals it when
   scripting is off. The app clears #view and renders over it on boot, so this only affects the flash. */
.ssr-fallback{display:none}
.sec{padding:38px 0}
.sec h2{font-size:24px;color:var(--navy);margin:0 0 4px}
.sec .sub{color:var(--muted);margin:0 0 22px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:980px){ .grid3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }
.browse{display:grid;grid-template-columns:270px 1fr;gap:22px;padding:26px 0}
.filters{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;align-self:start}
.filters h4{margin:0 0 8px;font-size:13px;color:var(--navy);text-transform:uppercase;letter-spacing:.5px}
.fgroup{padding:10px 0;border-bottom:1px solid var(--line)}
.fgroup:last-child{border:none}
.fgroup label{display:flex;align-items:center;gap:8px;font-size:14px;margin:5px 0}
.searchrow{display:flex;gap:8px;margin-bottom:16px}
.searchrow input{flex:1;padding:11px 14px;border:1px solid var(--line);border-radius:9px;font-size:15px;outline:none}

.jcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.jcard:hover{box-shadow:0 8px 22px rgba(35,59,46,.1);border-color:var(--blue)}
.jcard .top{display:flex;gap:12px;align-items:flex-start}
.clogo{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:18px;background:var(--navy);flex-shrink:0}
.jcard h3{margin:0;font-size:16.5px;color:var(--navy);cursor:pointer}
.jcard .co{color:var(--blue);font-size:14px;font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:8px;margin:11px 0}
.tag{background:var(--soft);color:var(--blue);border-radius:6px;padding:3px 10px;font-size:12.5px;font-weight:600}
.tag.gray{background:var(--sand-d);color:var(--muted)}
.tag.gold{background:#f2e8cf;color:#6b5624} /* v3.223.0 R6-A11Y-2: fg darkened from #8a6d2e (3.95:1) to #6b5624 (~5.4:1) so 12.5px text passes WCAG 1.4.3 AA */
.tag.green{background:var(--emerald-soft);color:var(--green)}
.salary{font-weight:700;font-size:14.5px}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.posted{color:var(--muted);font-size:12.5px}

.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px}
.panel h1{font-size:24px;color:var(--navy);margin:0 0 4px}
.panel h3{color:var(--navy);margin:20px 0 8px}
.detail{display:grid;grid-template-columns:1fr 320px;gap:20px;padding:24px 0}
.box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
.kv{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border:none}.kv span{color:var(--muted)}
.back{color:var(--blue);font-weight:600;font-size:14px;display:inline-block;margin:16px 0 4px}

.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px;min-width:0}
.fld.full{grid-column:1/-1}
.fld label{font-size:13.5px;font-weight:600;color:var(--navy)}
/* width:100% + min-width:0 so a control fills its cell and can shrink below its content — otherwise a
   native <select> whose current option is a long name (an ISIC/ISCO label, a country) sizes to that
   text and forces the whole form, and the page, to scroll sideways on a narrow phone. */
.fld input,.fld select,.fld textarea{padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:14.5px;outline:none;width:100%;min-width:0;box-sizing:border-box}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--blue)}
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.hint{font-size:12px;color:var(--muted)}
.err{color:var(--red);font-size:13px;margin:6px 0}

.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{padding:9px 18px;border-radius:9px;font-weight:600;font-size:14px;background:#fff;border:1px solid var(--line);color:var(--muted);min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
/* v3.234.0 (rank 20): on a phone, ten profile tabs wrap to 3-4 rows and eat ~176px before
 * any content shows. Switch to a single-row horizontal scroller with snap points; keyboard
 * users on desktop keep the wrap layout (min-width:641px). The 44px min-height stays. */
@media (max-width:640px){
  .tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .tabs button{flex:0 0 auto;scroll-snap-align:start}
}
/* Collapsible detail cards used by the v3.234.0 rank-16 mobile collapse of renderDashV228.
 * On desktop the sections remain open; on phone they collapse to a chip with a count. */
.dash-chip{background:var(--card);border:1px solid var(--line);border-radius:10px;margin-bottom:8px}
.dash-chip[open]>summary{border-bottom:1px solid var(--line)}
.dash-chip>summary{list-style:none;padding:12px 14px;cursor:pointer;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:10px;min-height:44px}
.dash-chip>summary::-webkit-details-marker{display:none}
.dash-chip>summary::after{content:'▾';margin-inline-start:auto;color:var(--muted);transition:transform .15s}
.dash-chip[open]>summary::after{transform:rotate(180deg)}
.dash-chip .badge-count{background:var(--emerald-soft,#e8f0eb);color:var(--emerald-d,#233B2E);padding:2px 8px;border-radius:10px;font-size:12px;font-weight:700;min-width:24px;text-align:center}
.dash-chip .badge-count.zero{background:var(--sand-d,#eee);color:var(--muted)}
.dash-chip>div{padding:12px 14px}
/* A hub tab with vertical side sub-tabs: the nav is a column beside the content pane.
   In RTL the document direction puts the nav on the right automatically. */
.settings-hub{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.settings-nav{display:flex;flex-direction:column;gap:8px;flex:0 0 220px;min-width:180px}
.settings-nav button{text-align:inherit;padding:11px 16px;border-radius:9px;font-weight:600;font-size:14px;background:#fff;border:1px solid var(--line);color:var(--muted);cursor:pointer}
.settings-nav button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.settings-pane{flex:1 1 420px;min-width:0}
@media (max-width:640px){ .settings-nav{flex-basis:100%;flex-direction:row;flex-wrap:wrap} }
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}
.statcard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.statcard b{font-size:26px;color:var(--navy);display:block}
.statcard span{color:var(--muted);font-size:13.5px}
/* The moderation strip: visibly the platform speaking, not part of the item itself.
   A control that looks like the author's own control is a control a moderator uses by
   accident. */
.modstrip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;
  border-radius:10px;border:1px dashed var(--line);background:rgba(0,0,0,.02)}
.modstrip .kpi-meta{margin:0}
.modstrip button{font-size:13px;padding:5px 10px}
.modstrip button[disabled]{opacity:.45;cursor:not-allowed}
/* v3.206.0 (Batch K, K2): flex-wrap so admin rows with 5-8 buttons don't push the page wider than
   the viewport. row-gap tightens vertical rhythm when the row does wrap. */
.approw{display:flex;flex-wrap:wrap;align-items:center;gap:12px;row-gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.stbadge{font-size:12px;font-weight:700;padding:4px 11px;border-radius:20px;white-space:nowrap}
.st_new{background:var(--emerald-soft);color:#233B2E}.st_shortlisted{background:#f2e8cf;color:#6b5624} /* v3.223.0 R6-A11Y-2: fg darkened to pass WCAG 1.4.3 AA at 12px */
.st_interview{background:var(--emerald-soft);color:var(--green)}.st_offer{background:var(--emerald-soft);color:var(--emerald-d)}.st_rejected{background:#f7e2e0;color:var(--red)}
.empty{color:var(--muted);text-align:center;padding:34px;background:var(--card);border:1px dashed var(--line);border-radius:12px}
.faq{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:2px 16px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;color:var(--navy);padding:13px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--blue);font-weight:800;margin-inline-end:8px}
.faq[open] summary::before{content:'–'}
.faq[open] summary{border-bottom:1px solid var(--line)}
.salnote{background:#f7f0dd;border-inline-start:4px solid var(--gold);padding:12px 16px;border-radius:8px;font-size:13.5px;color:#6b5a2e;margin-top:14px}

.toast{position:fixed;bottom:24px;inset-inline-end:24px;background:var(--navy);color:#fff;padding:13px 20px;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);z-index:200;font-weight:600;opacity:0;transform:translateY(20px);transition:.3s;max-width:340px}
.toast.show{opacity:1;transform:translateY(0)}
.toast.ok{background:var(--green)}.toast.bad{background:var(--red)}
.modal{position:fixed;inset:0;background:rgba(35,59,46,.55);display:flex;align-items:center;justify-content:center;z-index:150;padding:20px}
.modal .mbox{background:#fff;border-radius:16px;max-width:440px;width:100%;padding:28px;position:relative;max-height:90vh;overflow:auto}
/* v3.259.0 (R9-S, Command Center Phase 5): a wide Candidate-360 dialog — 1180px on
   desktop, 96vw on tablet, full-screen on phones. Same modal chrome, just breathable. */
.modal .mbox.wide{max-width:1180px}
@media(max-width:1200px){.modal .mbox.wide{max-width:96vw}}
.c360{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:8px}
@media(max-width:900px){.c360{grid-template-columns:1fr}}
.c360-head{display:flex;gap:16px;align-items:flex-start;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.c360-head .clogo{width:64px;height:64px;font-size:22px}
.c360-head .who{flex:1;min-width:0}
.c360-head .who .nm{font-size:20px;font-weight:800;color:var(--navy);margin:0 0 4px}
.c360-head .who .hl{color:var(--muted);font-size:14px;margin:0 0 6px}
.c360-head .who .meta{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.c360-sec{background:#faf9f5;border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin:0 0 12px}
.c360-sec h4{margin:0 0 8px;font-size:14px;color:var(--navy);font-weight:800;letter-spacing:.2px}
.c360-sec .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13.5px;line-height:1.7}
.c360-sec .kv dt{color:var(--muted);font-weight:600}
.c360-sec .kv dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.c360-sec .exp-item{padding:8px 0;border-bottom:1px dashed var(--line)}
.c360-sec .exp-item:last-child{border-bottom:none}
.c360-sec .exp-item .role{font-weight:700;color:var(--navy);font-size:14px}
.c360-sec .exp-item .co-line{color:var(--muted);font-size:13px;margin:2px 0}
.c360-sec .exp-item .dates{font-size:12.5px;color:var(--muted)}
.c360-sec .skill-chip{display:inline-block;padding:4px 10px;font-size:12.5px;background:var(--sand-d);border-radius:999px;margin:3px 4px 3px 0;color:var(--navy)}
.c360-match{background:#f2f7f2;border:1px solid var(--emerald,#233B2E);border-radius:10px;padding:14px 16px;margin:0 0 12px}
.c360-match .m-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.c360-match .m-head b{font-size:15px;color:var(--navy);font-weight:800}
.c360-match .m-score{font-size:22px;font-weight:800;color:var(--emerald,#233B2E)}
.c360-match .m-factor{display:flex;align-items:baseline;gap:10px;padding:5px 0;font-size:13px;border-bottom:1px dashed var(--line)}
.c360-match .m-factor:last-child{border-bottom:none}
.c360-match .m-factor .mf-key{min-width:96px;font-weight:600;color:var(--navy)}
.c360-match .m-factor .mf-sc{min-width:60px;color:var(--navy);font-weight:700}
.c360-match .m-factor .mf-reason{flex:1;color:var(--muted)}
.c360-match .m-factor .mf-w{color:var(--muted);font-size:11.5px;background:#fff;padding:1px 6px;border-radius:5px}
.c360-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.c360-actions button{padding:8px 14px;font-size:13.5px;font-weight:600;border-radius:8px;
  border:1px solid var(--navy);background:#fff;color:var(--navy);cursor:pointer}
.c360-actions button:hover{background:var(--sand-d)}
.c360-actions button.primary{background:var(--navy);color:#fff}
.c360-actions button.primary:hover{background:var(--emerald,#233B2E);border-color:var(--emerald,#233B2E)}
/* v3.260.0 (R9-T, Package F): the rebuilt Employers marketing landing. Every
   section is a full-width band inside .wrap-wide, with alternating light/dark
   tone to keep the eye moving. No fake logo strip; the design carries no
   trust-badges pretending we already have Fortune 500 clients. */
.emp-hero{padding:56px 0 40px;text-align:start}
.emp-hero-copy{max-width:820px}
.emp-hero-eyebrow{color:var(--emerald,#233B2E);font-weight:800;font-size:13px;letter-spacing:.6px;text-transform:uppercase;margin-bottom:10px}
.emp-hero-h1{font-size:46px;line-height:1.2;font-weight:800;color:var(--navy);margin:0 0 14px;letter-spacing:-.5px}
.emp-hero-h1 .hl{color:var(--emerald,#233B2E)}
.emp-hero-p{font-size:18px;line-height:1.75;color:var(--muted);margin:0 0 22px;max-width:70ch}
.emp-hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.emp-hero-cta .btn{padding:12px 22px;font-size:15.5px;font-weight:700;border-radius:10px;cursor:pointer;transition:all .15s}
.emp-hero-cta .btn.primary{background:var(--navy);color:#fff;border:1px solid var(--navy)}
.emp-hero-cta .btn.primary:hover{background:var(--emerald,#233B2E);border-color:var(--emerald,#233B2E)}
.emp-hero-cta .btn.ghost{background:#fff;color:var(--navy);border:1px solid var(--line)}
.emp-hero-cta .btn.ghost:hover{background:var(--sand-d)}
.emp-hero-trust{display:flex;flex-wrap:wrap;gap:16px;font-size:13px;color:var(--muted);margin-top:8px}
.emp-hero-trust span{display:inline-flex;align-items:center;gap:4px}
@media(max-width:640px){.emp-hero-h1{font-size:32px}.emp-hero-p{font-size:16px}}
.emp-sec{padding:50px 0;text-align:start;border-top:1px solid var(--line)}
.emp-sec.emp-sec-alt{background:#faf9f5}
.emp-sec-h{font-size:30px;color:var(--navy);font-weight:800;margin:0 0 8px;letter-spacing:-.3px}
.emp-sec-sub{color:var(--muted);font-size:15px;line-height:1.75;margin:0 0 24px;max-width:70ch}
.emp-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px;border-bottom:1px solid var(--line);padding-bottom:0}
.emp-tab{background:none;border:none;color:var(--muted);font-size:14px;font-weight:600;padding:12px 16px;cursor:pointer;
  border-bottom:3px solid transparent;margin-bottom:-1px;transition:all .15s}
.emp-tab:hover{color:var(--navy)}
.emp-tab.on{color:var(--navy);border-bottom-color:var(--emerald,#233B2E)}
.emp-tab-content{background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px;
  box-shadow:0 2px 10px rgba(35,59,46,.04)}
.emp-tab-copy{max-width:820px}
.emp-tab-icon{font-size:44px;margin-bottom:10px}
.emp-tab-content h3{font-size:24px;color:var(--navy);margin:0 0 10px;font-weight:800}
.emp-tab-pitch{font-size:16px;line-height:1.75;color:var(--ink);margin:0 0 18px}
.emp-tab-points{margin:0 0 20px;padding:0;list-style:none}
.emp-tab-points li{padding:8px 0;padding-inline-start:26px;position:relative;font-size:14.5px;line-height:1.65;color:var(--ink)}
.emp-tab-points li::before{content:'✓';position:absolute;inset-inline-start:0;color:var(--emerald,#233B2E);font-weight:800;font-size:16px}
.emp-tab-content .btn{padding:10px 20px;font-size:14.5px;font-weight:700;border-radius:9px;cursor:pointer;
  background:var(--navy);color:#fff;border:1px solid var(--navy);transition:all .15s}
.emp-tab-content .btn:hover{background:var(--emerald,#233B2E);border-color:var(--emerald,#233B2E)}
.emp-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.emp-steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.emp-steps{grid-template-columns:1fr}}
.emp-step{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px}
.emp-step-n{width:36px;height:36px;border-radius:10px;background:var(--emerald,#233B2E);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;margin-bottom:10px}
.emp-step b{display:block;color:var(--navy);font-size:15px;margin-bottom:6px}
.emp-step p{color:var(--muted);font-size:13.5px;line-height:1.7;margin:0}
.emp-charter{background:#fff;border:1px solid var(--emerald,#233B2E);border-radius:14px;padding:32px;
  display:flex;flex-direction:column;gap:14px;text-align:center;max-width:640px}
.emp-charter-line{font-size:20px;color:var(--navy);font-weight:800;margin:0;letter-spacing:-.2px}
.emp-charter-line:not(:last-child)::after{content:'·';display:block;color:var(--emerald,#233B2E);font-size:24px;margin-top:6px;opacity:.5}
.emp-markets{display:flex;flex-wrap:wrap;gap:8px}
.emp-market-chip{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 16px;
  display:flex;flex-direction:column;gap:2px;min-width:120px}
.emp-market-chip b{color:var(--navy);font-size:14px;font-weight:700}
.emp-market-chip .hint{font-size:11px;letter-spacing:.6px;color:var(--muted);font-weight:600}
.emp-honesty{background:#fff8ec;border:1px solid #f0e2c0;border-radius:14px;padding:24px 28px;max-width:900px}
.emp-honesty h3{color:#7c2d12;margin:0 0 10px;font-size:17px;font-weight:800}
.emp-honesty p{margin:0;color:var(--ink);font-size:14.5px;line-height:1.85}
.emp-final-cta{padding:60px 0;text-align:center;background:var(--emerald,#233B2E);color:#fff;
  border-radius:0;margin-top:40px;margin-inline:-20px}
.emp-final-cta h2{font-size:32px;color:#fff;font-weight:800;margin:0 0 10px;letter-spacing:-.3px}
.emp-final-cta p{color:rgba(255,255,255,.85);font-size:16px;margin:0 0 24px}
.emp-final-cta .btn.primary{background:#fff;color:var(--navy);border-color:#fff}
.emp-final-cta .btn.primary:hover{background:#fdf8ec}
.emp-final-cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.emp-final-cta .btn.ghost:hover{background:rgba(255,255,255,.1)}
.modal h3{margin:0 0 4px;color:var(--navy)}
/* v3.205.0 (Batch J, J9): expand the modal close button hit area to 44x44 (WCAG 2.5.5 large-target
   guidance, safely over the 2.5.8 24x24 minimum). It stays visually the same 22px glyph; the
   surrounding button box just grows to the touch-friendly minimum with a real focus ring. */
.modal .x{position:absolute;top:8px;inset-inline-end:8px;font-size:22px;color:var(--muted);
  min-width:44px;min-height:44px;padding:6px 10px;line-height:1;border:0;background:transparent;
  border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.modal .x:focus-visible{outline:2px solid var(--emerald);outline-offset:2px}
.seg{display:flex;gap:8px;margin:12px 0}
.seg button{flex:1;padding:9px;border:1px solid var(--line);border-radius:8px;font-weight:600;color:var(--muted)}
.seg button.on{background:var(--navy);color:#fff;border-color:var(--navy)}

footer{background:var(--navy);color:var(--line);padding:28px 0;margin-top:40px;text-align:center;font-size:13px}
.demo-banner{background:var(--emerald-soft);color:var(--emerald-d);text-align:center;font-size:13px;padding:7px;font-weight:600}

@media(max-width:860px){
  /* v3.206.0 (Batch K, K3): !important so inline `grid-template-columns` set on stat-row usage
     in app.js (Shortlist/Interview/Hire rate row, avg-days row) cannot override the single-column
     mobile collapse. Without this, inline styles won and stat cards ran off the 375px viewport. */
  .grid2,.grid3,.browse,.detail,.form-grid,.stat-row{grid-template-columns:minmax(0,1fr) !important}
  .links{display:none;position:absolute;top:64px;inset-inline:0;background:var(--navy);flex-direction:column;padding:8px 20px;box-shadow:0 10px 24px rgba(0,0,0,.25)}
  body.menu-open .links{display:flex}
  .links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .burger{display:block}
  .hero h1{font-size:26px}
}

/* Responsive hardening (v3.109.0): a long unbreakable string — a URL, an email, an ID, a token, or a
   long run in any language — wraps inside its container instead of forcing the whole page to scroll
   sideways on a narrow phone; and no image, media, table or preformatted block may exceed the screen. */
.box, .approw, .hint, .statcard, .mbox, .settings-pane, .kv, td, th, li, p, h1, h2, h3, h4 { overflow-wrap: anywhere; }
img, video, svg, table, pre { max-width: 100%; }
pre { overflow-x: auto; }

/* ---------- Accessibility (v2.2.0) ---------- */
/* Visible only when focused, so keyboard users can jump past the navigation. */
.skip-link{
  position:absolute; inset-inline-start:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 8px 0;
  font-weight:700; font-size:14px; text-decoration:none;
}
.skip-link:focus{ inset-inline-start:0; }

/* A clearly visible focus ring on every interactive element. Never remove this:
   without it, keyboard users cannot tell where they are on the page. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible{
  outline:3px solid #233B2E;
  outline-offset:2px;
  border-radius:4px;
}

/* Respect a user's request for reduced motion. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* The muted grey used for hints sits at roughly 4.6:1 on white — above the WCAG AA
   threshold of 4.5:1 for body text. Do not lighten it further. */
.hint{ color:#63705f; }

/* ---------- Brand pass over shared components (v2.4.0) ---------- */
.jcard,.panel,.box,.approw,.statcard,.mbox{background:var(--card);border-color:var(--line)}
.jcard:hover{border-color:var(--emerald);box-shadow:0 10px 28px rgba(35,59,46,.10)}
.clogo{background:var(--emerald-soft);color:var(--emerald)}
.tag{background:var(--sand-d);color:var(--ink);border:1px solid var(--line)}
.tag.green{background:var(--emerald-soft);color:var(--emerald-d);border-color:#c6d1c2}
.stbadge.st_offer{background:var(--emerald-soft);color:var(--emerald-d)}
footer{background:var(--navy)}
.demo-banner{background:var(--emerald-soft);color:var(--emerald-d);border:1px solid #d2dcce}
h1,h2,h3,h4{color:var(--navy)}
.kv b{color:var(--navy)}
input:focus,select:focus,textarea:focus{border-color:var(--emerald)}

/* Section rhythm on the sand canvas */
.sec h2{font-size:28px;letter-spacing:-.3px}
.panel,.box{border-radius:16px}
.btn{box-shadow:0 6px 16px rgba(35,59,46,.18)}
.btn:hover{box-shadow:0 8px 22px rgba(35,59,46,.24)}
.ghost{background:var(--card)}

/* The signed-in navigation carries up to ten destinations. Keep the header on one
   line and let the link row scroll rather than wrapping into a tall block. */
.nav{gap:14px}
/* When the destinations do not fit on one line the row WRAPS to a second line rather than clipping or
   scrolling, so the horizontal bar always shows the exact same complete list the ☰ menu does — the two
   are never out of sync. row-gap keeps the wrapped lines legible. */
.links{flex-wrap:wrap;row-gap:2px;max-width:100%}
.links a{white-space:nowrap}
.actions{flex:0 0 auto}
.usertag{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1200px){ .links a{font-size:13.5px} .nav{gap:10px} }

/* A signed-in reader (especially an administrator) carries up to ten destinations, plus the market
   selector and the account actions. On a medium desktop that crowds the single row and the last
   link — "Admin" — is clipped to "الإد". Rather than scroll-and-fade it, collapse the whole link row
   into the burger menu from a wider breakpoint than the content grids use, so every destination is
   shown in full, never truncated. Above this width the horizontal bar shows and the row scrolls if it
   overflows.
   v3.111.0: kept at 1080 (not raised) — the admin console moved OUT of this scrolling row into the
   always-visible account actions on the right, so an overflowing row can no longer hide it. The
   horizontal top bar is therefore shown on normal desktops/laptops, and only genuinely narrow widths
   fold into the burger. */
@media(max-width:1080px){
  .links{display:none;position:absolute;top:64px;inset-inline:0;background:var(--navy);
    flex-direction:column;flex-wrap:nowrap;padding:8px 20px;box-shadow:0 10px 24px rgba(0,0,0,.25);
    max-width:none;-webkit-mask-image:none;mask-image:none;
    /* The collapsed menu can be taller than the screen (an admin carries a dozen destinations); cap it to
       the viewport below the bar and let it scroll, so the last items — Admin included — are always reachable. */
    max-height:calc(100vh - 64px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  body.menu-open .links{display:flex}
  .links a{padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);white-space:normal}
  .burger{display:block}
}

/* The collapsed dropdown (861–1500px) sits on a dark forest-green panel (var(--navy) = #233B2E
   since the brand palette landed), but the inline link colour is dark ink — so every destination,
   "Admin" included, rendered dark-on-dark and read as an empty green sheet. Light text here, gold
   for the active/hovered row. Scoped to this range only: at ≤860 the panel is transparent over the
   cream page and keeps its dark-on-cream text (rule above), so it must not be touched. */
@media(min-width:861px) and (max-width:1080px){
  body.menu-open .links a{color:#fff; opacity:.95}
  body.menu-open .links a.active, body.menu-open .links a:hover{color:var(--gold); opacity:1}
}

/* Phones (v3.110.0): beside the logo and the burger, the bar also carried the market selector, the
   account actions and the language button — and a native <select> whose current option is a long
   name ("الإمارات العربية المتحدة") sizes to that text, so the whole row measured ~666px on a 375px
   screen and forced the page to scroll sideways. On a narrow screen the ENTIRE control cluster folds
   into the burger menu: the bar becomes just the logo and ☰, the menu opens as an in-flow column
   (links + actions + language), and nothing can push the document wider than the viewport. Placed
   after the ≤1080 rule so it wins for the widths where both match. */
@media(max-width:860px){
  .nav{flex-wrap:wrap; height:auto; min-height:64px; row-gap:8px}
  .spacer{display:none}
  .logo{order:1}
  .burger{display:block; order:2; margin-inline-start:auto}
  .links, .actions, .lang-btn{order:3; width:100%; display:none; position:static; inset:auto}
  body.menu-open .links{display:flex; flex-direction:column; background:transparent; box-shadow:none;
    padding:4px 0; max-width:none; -webkit-mask-image:none; mask-image:none;
    /* On a phone the menu is in-flow and the whole page scrolls, so it needs no inner cap or scrollbar. */
    max-height:none; overflow:visible}
  body.menu-open .links a{color:var(--ink); border-bottom:1px solid var(--line); white-space:normal}
  body.menu-open .actions{display:flex; flex-wrap:wrap; gap:8px}
  body.menu-open .lang-btn{display:block; width:auto}
  .actions .mktsel{flex:1 1 150px; min-width:150px; max-width:100%}
}

/* --- Strategic indicators (README 5.1) ------------------------------------ */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:14px 0}
.kpicard{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:6px}
.kpicard.unknown{background:var(--sand-d)}
.kpi-name{color:var(--muted);font-size:13px;font-weight:600}
.kpi-val{color:var(--navy);font-size:26px;line-height:1.2}
.kpi-val.na{font-size:16px;color:var(--muted);font-weight:600}
.kpi-meta{color:var(--muted);font-size:12px}
.kpi-basis{color:var(--muted);font-size:12px;line-height:1.6;border-top:1px solid var(--line);padding-top:8px;margin-top:4px}

/* --- Printing the assembled profile (v3.15.0) ---------------------------------
 * A person printing their profile wants the profile, not the navigation, the tabs or
 * the buttons that produced it. Everything outside the printed card is dropped, and the
 * card loses its shadow and border so it does not print as a grey box on white paper.
 */
@media print {
  header, nav, footer, .tabs, .no-print, #toast, .btn, button { display: none !important; }
  body { background: #fff !important; }
  .cv-print { box-shadow: none !important; border: 0 !important; margin: 0 !important;
              padding: 0 !important; max-width: 100% !important; }
  .cv-print, .cv-print * { color: #000 !important; }
  .cv-print .tag { border: 1px solid #999 !important; background: transparent !important; }
  a[href]:after { content: ''; }
}

/* --- Toggle switch (v3.61.0) -------------------------------------------------
 * A pill switch for an on/off setting, used where a plain checkbox reads as a form field
 * rather than a control (the admin Activation panel). The checkbox stays the REAL control —
 * keyboard-focusable and screen-reader-labelled — and the slider is only its skin, so the
 * accessible behaviour is unchanged. */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .slider { position: absolute; inset: 0; background: #c7ccd6; border-radius: 999px; transition: background .18s ease; pointer-events: none; }
.switch .slider::before { content: ''; position: absolute; width: 20px; height: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: transform .18s ease; }
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::before { transform: translateX(20px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--navy); outline-offset: 2px; }
.switch input:disabled + .slider { opacity: .55; }
.switch input:disabled { cursor: default; }
/* Right to left: the knob rests on the right and travels left. */
[dir="rtl"] .switch .slider::before { left: auto; right: 3px; }
[dir="rtl"] .switch input:checked + .slider::before { transform: translateX(-20px); }

/* ---- Sector picker (v3.69.0) ----------------------------------------------
   A search-and-chips control over the 55-sector taxonomy. Chosen sectors show
   as removable chips; the preferred-sectors variant adds a per-chip interest
   select and a row of two flags. Built from design tokens so it follows the
   theme, and laid out with logical properties so it mirrors correctly in RTL. */
.sector-picker{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--card)}
.sector-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
/* v3.206.0 (Batch K, K1): bound chip width so a long ISIC section label like "Telecommunications,
   computer programming, consultancy and information services" (79 chars) ellipsises inside the chip
   instead of forcing a chip ~500px wide and horizontal page scroll on a 375px viewport. `min-width:0`
   lets the chip shrink inside the flex-wrap parent; the .sector-chip-name gets overflow:hidden +
   ellipsis with flex:1 1 auto so the ✕ button beside it stays fully visible. */
.sector-chip{display:inline-flex;align-items:center;gap:6px;background:var(--sand);
  border:1px solid var(--line);border-radius:999px;padding:5px 6px 5px 12px;font-size:13px;
  color:var(--navy);font-weight:600;max-width:100%;min-width:0}
[dir="rtl"] .sector-chip{padding:5px 12px 5px 6px}
.sector-chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto}
.sector-interest{border:1px solid var(--line);border-radius:8px;padding:2px 6px;font-size:12px;
  background:#fff;color:var(--ink);font-weight:600}
/* v3.205.0 (Batch J, J8): raise chip-remove hit target to 24x24 (WCAG 2.5.8 Target Size Minimum).
   Glyph size stays 15px; the button box grows to meet the minimum touch target. */
.sector-x{border:none;background:var(--emerald);color:#fff;width:24px;height:24px;border-radius:50%;
  line-height:1;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.sector-x:hover{filter:brightness(1.1)}
.sector-search{width:100%;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:14px;background:#fff}
.sector-search:disabled{background:#f6efdf;color:#999}
.sector-results{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;
  max-height:220px;overflow-y:auto}
.sector-result{display:block;width:100%;text-align:start;border:none;border-bottom:1px solid var(--line);
  background:#fff;padding:9px 12px;font-size:13.5px;color:var(--ink);cursor:pointer}
.sector-result:last-child{border-bottom:none}
.sector-result:hover:not(:disabled){background:var(--sand)}
.sector-result:disabled{color:#aaa;cursor:default}
.sector-result.picked{color:var(--emerald);font-weight:700;background:#eaefe9}
.sector-result.picked:hover{background:#e0e8dd}
.sector-result.muted{color:#999;cursor:default}
.sector-count{margin-top:6px}
.sector-flags{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px}
.sector-flag{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13.5px;color:var(--navy)}

/* ---- Languages editor (v3.70.0) -------------------------------------------
   A card per language: general level, professional use, an opt-out of per-skill
   detail, and the four skill selects when detail is kept. Laid out with logical
   properties so it mirrors correctly in RTL. */
.lang-card{border:1px solid var(--line);border-radius:12px;padding:12px;margin:10px 0;background:var(--card)}
.lang-name{font-weight:800;color:var(--navy);font-size:15px;margin-bottom:8px}
.lang-body .fld{margin-bottom:8px}
.lang-flag{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13.5px;color:var(--navy);margin:6px 0}
.lang-skills-h{font-size:13px;font-weight:700;color:var(--navy);margin:4px 0}
.lang-skills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lang-actions{display:flex;gap:10px;margin-top:8px}
@media (max-width:640px){ .lang-skills{grid-template-columns:1fr} }

/* ---- Residency & work eligibility (v3.71.0) --------------------------------
   A grouped block of the cascading residency fields, laid out two-up on wide
   screens and stacked on small ones. */
.residency-block{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--card);margin-top:6px}
.residency-block .fld.full{grid-column:1 / -1}
@media (max-width:640px){ .residency-block{grid-template-columns:1fr} }

/* Searchable single-select (combobox) — a type-to-filter replacement for a long native <select>,
   used for the country and nationality fields (190+ options). The list floats over the form. */
.combo{position:relative}
/* The closed trigger looks like a select; clicking it opens a panel with a search box + list. */
.combo-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;
  text-align:start;font:inherit;color:inherit;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;cursor:pointer}
.combo.open .combo-trigger{border-color:#233B2E;box-shadow:0 0 0 2px rgba(35,59,46,.18)}
.combo-trigger-label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.combo-trigger-label.is-placeholder{color:var(--muted)}
.combo-chevron{color:var(--muted);flex:none}
.combo-panel{position:absolute;z-index:60;inset-inline:0;top:100%;margin-top:4px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 10px 28px rgba(35,59,46,.16);overflow:hidden}
.combo-search-wrap{padding:8px;border-bottom:1px solid var(--line)}
.combo-search{width:100%}
.combo-list-inner{max-height:240px;overflow-y:auto}
.combo-opt{padding:9px 12px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combo-opt:hover,.combo-opt.sel{background:rgba(35,59,46,.06)}
.combo-empty{padding:10px 12px;color:var(--muted)}

/* Collapsible "Additional details" section in the qualification form — a light separator above
   the summary, and a subtle open/closed marker. Purely visual grouping of optional fields. */
.more-details{border-top:1px solid var(--line);padding-top:6px}
.more-details>summary{list-style:none}
.more-details>summary::-webkit-details-marker{display:none}
.more-details>summary::before{content:'▸ ';color:var(--muted)}
.more-details[open]>summary::before{content:'▾ '}