/* Muwathaq — Pearl Standard design tokens & shared shell */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Poppins:wght@400;500;600;700&display=swap');
:root {
  --bg:#F8F0E1; --surface:#FFFFFF; --surface2:#F2E6CE; --line:#E5D9BE;
  --ink:#16232E; --dim:#6B7A86; --teal:#0E5E52; --teal-soft:#E3EFEC;
  --gold:#B8862D; --gold-soft:#F7EFDD; --red:#B3432B; --red-soft:#F9E9E5;
  --ok:#1E7D4E; --ok-soft:#E5F2EA;
  --radius:18px; --shadow:0 6px 18px rgb(29 42 36 / 7%);
  --kufi:"Poppins","Cairo",sans-serif;
  --font:"Poppins","Cairo","Segoe UI",system-ui,sans-serif;
}
* { box-sizing:border-box; margin:0; }
/* keyboard accessibility: clear focus ring for tab users (mouse clicks unaffected) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, label:focus-visible, [tabindex]:focus-visible {
  outline:3px solid var(--teal); outline-offset:2px; border-radius:4px;
}
body { background:var(--bg); color:var(--ink); font-family:var(--font); min-height:100vh; }
/* sadu-woven UAE flag band on every page */
body::before { content:""; display:block; height:10px; background:repeating-linear-gradient(135deg,
  #EF3340 0 14px, #FBF7EE 14px 18px, #00843D 18px 32px,
  #FBF7EE 32px 36px, #1A1A1A 36px 50px, #FBF7EE 50px 54px); }
a { color:var(--teal); }

/* shell */
header.shell { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink); }
.brand svg { flex:none; }
.brand .wm { font-weight:700; font-size:1.12rem; letter-spacing:.2px; }
.brand .wm span { color:var(--teal); }
.brand .ar { font-size:.72rem; color:var(--dim); }
.spacer { flex:1; }
nav.shell-nav { display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
nav.shell-nav a { color:var(--dim); text-decoration:none; font-size:.88rem; padding:8px 12px; border-radius:8px;
  border-bottom:2px solid transparent; }
nav.shell-nav a:hover { color:var(--ink); background:var(--surface2); }
nav.shell-nav a.here { color:var(--teal); border-bottom-color:var(--teal); font-weight:600; }

main.page { max-width:880px; margin:28px auto; padding:0 20px 70px; }

/* components */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px; margin-bottom:16px; box-shadow:var(--shadow); }
.card h2 { font-size:1.1rem; margin-bottom:12px; font-family:var(--kufi); }
label { display:block; font-size:.8rem; color:var(--dim); margin:12px 0 5px; font-weight:500; }
input, textarea, select { width:100%; background:var(--surface); border:1px solid var(--line); color:var(--ink);
  padding:11px 14px; border-radius:10px; font-size:.92rem; outline:none; font-family:inherit; }
input:focus, textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgb(14 94 82 / 12%); }
textarea { min-height:110px; resize:vertical; }
.btn { border:0; background:linear-gradient(120deg,#0E5E52,#17836F); color:#fff; padding:12px 22px; min-height:44px;
  border-radius:13px; cursor:pointer; font-size:.9rem; font-family:inherit; font-weight:700; margin-top:12px; transition:.2s;
  box-shadow:0 6px 16px rgb(14 94 82 / 22%); }
.btn:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgb(14 94 82 / 30%); }
.btn.secondary { background:#fff; color:var(--teal); border:2px solid var(--teal); box-shadow:none; }
.btn.ghost { background:transparent; color:var(--dim); box-shadow:none; }
.btn.danger { background:transparent; border:2px solid var(--red); color:var(--red); box-shadow:none; }
.btn:disabled { opacity:.5; cursor:wait; }
.banner { border-radius:10px; padding:13px 17px; font-size:.88rem; margin-bottom:16px; border:1px solid; }
.banner.pending { border-color:var(--gold); background:var(--gold-soft); color:#7a5a1c; }
.banner.verified { border-color:var(--ok); background:var(--ok-soft); color:var(--ok); }
.banner.rejected { border-color:var(--red); background:var(--red-soft); color:var(--red); }
.tag { display:inline-block; font-size:.72rem; padding:4px 11px; border-radius:999px;
  background:var(--surface2); border:1px solid var(--line); color:var(--dim); margin:2px 3px 2px 0; }
.tag.verified { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); font-weight:600; }
.tabs { display:flex; gap:8px; margin-bottom:18px; }
.tab { padding:9px 18px; border-radius:999px; cursor:pointer; font-size:.86rem; border:1px solid var(--line);
  background:var(--surface); color:var(--dim); }
.tab.on { border-color:var(--teal); color:var(--teal); background:var(--teal-soft); font-weight:600; }
.row { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.muted { color:var(--dim); font-size:.82rem; }
.score { font-weight:700; color:var(--teal); font-size:1.05rem; font-variant-numeric:tabular-nums; }
.cand { border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-top:10px; background:var(--surface); }
.cand .ref { color:var(--teal); font-size:.76rem; font-weight:700; letter-spacing:.5px; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(80px); z-index:50;
  background:var(--ink); color:#fff; padding:12px 22px; border-radius:10px;
  font-size:.86rem; box-shadow:0 8px 30px rgb(22 35 46 / 25%); transition:.3s; opacity:0; max-width:90vw; }
#toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
.statgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; text-align:center; }
.stat b { display:block; font-size:1.7rem; color:var(--gold); font-family:var(--kufi); }
.stat span { font-size:.74rem; color:var(--dim); }

/* onboarding steps + role chip */
.steps { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; }
.step { flex:1; min-width:150px; background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:10px 14px; font-size:.78rem; color:var(--dim); display:flex; gap:9px; align-items:center; }
.step .n { width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface2); font-weight:700; font-size:.72rem; flex:none; }
.step.done { border-color:var(--ok); color:var(--ok); }
.step.done .n { background:var(--ok-soft); color:var(--ok); }
.step.on { border-color:var(--teal); color:var(--ink); font-weight:600; }
.step.on .n { background:var(--teal); color:#fff; }
.rolechip { font-size:.72rem; padding:5px 12px; border-radius:999px; background:var(--teal-soft);
  color:var(--teal); font-weight:600; white-space:nowrap; }

/* legacy-page compatibility */
.flagbar, .sadu { display:none; }
header { position:sticky; top:0; z-index:20; background:rgba(255,255,255,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line); padding:12px 24px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.brand .mark { display:none; }
.brand h1 { font-size:1.2rem; font-family:"Poppins","Cairo",sans-serif; } .brand h1 b { color:var(--teal); }
.brand .sub { font-size:.7rem; color:var(--dim); }
nav a { color:var(--dim); text-decoration:none; font-size:.88rem; margin-inline-start:14px; }
nav a:hover { color:var(--ink); } nav a.here { color:var(--teal); font-weight:600; }
/* phones: keep nav a single balanced row instead of wrapping one link onto its own line */
@media (max-width:560px){
  header { padding:10px 16px; gap:8px; }
  nav { width:100%; display:flex; justify-content:center; flex-wrap:wrap; gap:6px 4px; }
  nav a { margin-inline-start:0; font-size:.8rem; padding:2px 5px; white-space:nowrap; }
}
main { max-width:880px; margin:28px auto; padding:0 20px 70px; }
.btn.gold { background:linear-gradient(120deg,#8A6114,#C99327); }
.tag.gold { color:var(--gold); border-color:var(--gold); background:var(--gold-soft); font-weight:600; }
.card h2 .g { color:var(--teal); }
.mark-svg { flex:none; }