/* بوصلة الذكاء: shared stylesheet */
:root{
  --bg:#EDF2F4;--surface:#FFFFFF;--surface-2:#E3EBEF;
  --ink:#0D2230;--ink-2:#46596A;--line:#C5D3DB;
  --accent:#0F6C7A;--accent-ink:#FFFFFF;--accent-soft:#D5EBEE;--needle:#B4781C;
  --warn-bg:#F6EBD3;--warn-line:#C9A15A;--warn-ink:#5E3E08;
  --free-bg:#DDF1E5;--free-ink:#14583A;
  --freemium-bg:#DCEBF8;--freemium-ink:#164E86;
  --paid-bg:#F3E6C9;--paid-ink:#6B4709;
  --shadow:0 1px 2px rgba(13,34,48,.06),0 8px 24px rgba(13,34,48,.06);
  --font-body:"IBM Plex Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-display:"Reem Kufi","IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0A1820;--surface:#112630;--surface-2:#173341;
    --ink:#E7EFF4;--ink-2:#A3B7C4;--line:#27424F;
    --accent:#4FC3CF;--accent-ink:#052229;--accent-soft:#17414A;--needle:#E4B35E;
    --warn-bg:#2B2514;--warn-line:#7A6230;--warn-ink:#F0DDB0;
    --free-bg:#16372A;--free-ink:#7FE0AE;
    --freemium-bg:#15324A;--freemium-ink:#9CCBF5;
    --paid-bg:#3A2F17;--paid-ink:#EBC47C;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.75;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:20px 0;
}
img{max-width:100%}
a{color:var(--accent)}
.wrap{max-width:1120px;margin-inline:auto}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.3;text-wrap:balance;margin:0}
h1{font-size:clamp(2rem,6vw,3.2rem);font-weight:700}
h2{font-size:clamp(1.4rem,3.2vw,1.9rem);font-weight:600}
h3{font-size:1.2rem;font-weight:600}
h4{font-size:.95rem;font-weight:600}
p{margin:0}
.muted{color:var(--ink-2)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;inset-inline-start:8px;inset-block-start:-60px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:30;text-decoration:none}
.skip:focus{inset-block-start:8px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.block{margin-top:56px}
.section-head{display:grid;gap:6px;margin-bottom:18px;max-width:46rem}

/* header */
.site-header{display:flex;align-items:center;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.3rem;color:var(--ink);text-decoration:none}
.logo{width:40px;height:40px;flex:none}
.logo .ring{fill:none;stroke:var(--ink);stroke-width:2.5}
.logo .tick{stroke:var(--ink-2);stroke-width:2;stroke-linecap:round}
.logo .n{fill:var(--needle)}
.logo .s{fill:var(--accent)}
.nav{display:flex;flex-wrap:wrap;gap:2px 16px}
.nav a{color:var(--ink);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;font-size:.9375rem}
.nav a:hover{border-color:var(--line)}
.nav a[aria-current="page"]{border-color:var(--accent);font-weight:600}
.crumbs{font-size:.875rem;color:var(--ink-2);margin-top:18px}
.crumbs a{color:inherit}

/* hero + search */
.hero{padding-block:36px 4px}
.lead{max-width:40rem;font-size:1.125rem;color:var(--ink-2);margin-top:12px}
.search{position:relative;margin-top:24px}
.search svg{position:absolute;inset-inline-start:16px;inset-block-start:50%;transform:translateY(-50%);width:22px;height:22px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:56px;padding-inline:50px 16px;border:2px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:1.125rem}
.search input:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search input::placeholder{color:var(--ink-2);opacity:.8}
.hero .chips{margin-top:14px}
.notice{margin-top:22px;padding:12px 16px;border:1px dashed var(--warn-line);background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--r);font-size:.9375rem}

/* chips and filters */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:inherit;font-size:.9375rem;line-height:1.5;padding:5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);font-weight:600}
.filters{display:grid;gap:12px}
.filter-row{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.filter-label{font-size:.875rem;color:var(--ink-2);min-width:3.2rem}
.results-head{margin-top:16px}

/* cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px;margin-top:12px;align-items:start}
.card{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:10px}
.tool-name{overflow-wrap:anywhere}
.tool-name a{color:inherit;text-decoration:none}
.tool-name a:hover{text-decoration:underline}
.maker{font-size:.875rem;color:var(--ink-2)}
.tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.cat{font-size:.8125rem;color:var(--ink-2)}
.badge{font-size:.75rem;padding:0 8px;border-radius:6px;white-space:nowrap;line-height:1.8}
.b-free,.b-verified{background:var(--free-bg);color:var(--free-ink)}
.b-freemium{background:var(--freemium-bg);color:var(--freemium-ink)}
.b-paid,.b-partial{background:var(--paid-bg);color:var(--paid-ink)}
.b-unverified{border:1px dashed var(--ink-2);color:var(--ink-2)}
.best{min-height:3.5em}
.small{font-size:.875rem;color:var(--ink-2)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.btn{font:inherit;font-size:.9375rem;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:6px 14px;border:1px solid var(--line);border-radius:10px;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;line-height:1.6}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn-primary:hover{background:var(--accent);filter:brightness(1.1)}
.empty{margin-top:12px}

/* panels and forms */
.panel{min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:grid;gap:14px;align-content:start}
.workshop{display:grid;gap:16px;grid-template-columns:minmax(0,1fr);margin-top:16px}
@media (min-width:880px){.workshop{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.field{display:grid;gap:6px}
.field label{font-size:.9375rem;font-weight:500}
.field select,.field textarea,.field input{font:inherit;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink)}
.field textarea{min-height:96px;resize:vertical}
.hint{font-size:.8125rem;color:var(--ink-2)}
pre.out,pre.code{margin:0;padding:14px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;font-family:var(--font-mono);font-size:.875rem;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere;text-align:start}
pre.out{min-height:150px}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));gap:16px}
.kind{font-size:.8125rem;color:var(--ink-2)}

/* article-like pages */
.prose{max-width:46rem}
.prose p{margin:0 0 1em}
.prose h2{margin:1.8em 0 .5em}
.prose h3{margin:1.4em 0 .4em}
.prose ul,.prose ol{padding-inline-start:1.3rem;margin:0 0 1em}
.prose li{margin-bottom:.3em}
.facts{display:grid;margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.facts>div{display:grid;grid-template-columns:minmax(7rem,12rem) minmax(0,1fr);gap:12px;padding:10px 16px;border-top:1px solid var(--line)}
.facts>div:first-child{border-top:0}
.facts dt{color:var(--ink-2);font-size:.9375rem}
.facts dd{margin:0;overflow-wrap:anywhere}
@media (max-width:520px){.facts>div{grid-template-columns:1fr;gap:2px}}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:600px){.cols{grid-template-columns:1fr}}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.9375rem}
th,td{padding:10px 14px;text-align:start;border-top:1px solid var(--line);vertical-align:top}
thead th{border-top:0;background:var(--surface-2);font-weight:600}
.sources{padding-inline-start:1.2rem;margin:0}
.sources a{overflow-wrap:anywhere}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:14px}
.checks li{border-top:2px solid var(--ink);padding-top:10px}
.checks p{font-size:.9375rem;color:var(--ink-2);margin-top:4px}

/* footer */
.foot{margin-top:64px;padding-block:20px 28px;border-top:1px solid var(--line);font-size:.875rem;color:var(--ink-2)}
.foot .wrap{display:grid;gap:8px}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.foot-links a{color:var(--ink)}

/* toast */
.toast{position:fixed;inset-inline:0;inset-block-end:calc(18px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));pointer-events:none;z-index:20}
.toast span{background:var(--ink);color:var(--bg);padding:8px 18px;border-radius:999px;font-size:.9375rem;opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s}
.toast.show span{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* ---- additions for the multi-page site ---- */
.b-unknown{border:1px dashed var(--ink-2);color:var(--ink-2)}
.callout{border:1px solid var(--line);border-inline-start:4px solid var(--accent);background:var(--surface);border-radius:var(--r);padding:12px 16px}
.callout.warn{border-color:var(--warn-line);background:var(--warn-bg);color:var(--warn-ink)}
.callout h2,.callout h3{font-size:1rem;margin-bottom:6px}
.callout ul{margin:4px 0 0;padding-inline-start:1.2rem}
.codewrap{overflow-x:auto;max-height:340px;overflow-y:auto;border-radius:10px}
.codewrap pre.code{white-space:pre;overflow-wrap:normal;min-width:max-content}
pre.code[dir="ltr"]{text-align:left}
.lib .card h3{font-size:1.05rem}
.lib pre.code{font-size:.8125rem;flex:1}
code{font-family:var(--font-mono);font-size:.875em;background:var(--surface-2);padding:1px 6px;border-radius:6px;direction:ltr;unicode-bidi:isolate}
.stats{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0;padding:0;list-style:none}
.stats li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px 14px;font-size:.9375rem}
.stats b{font-family:var(--font-display);font-size:1.15rem}
.more-links{display:flex;flex-wrap:wrap;gap:8px}
.card-note{font-size:.875rem;color:var(--ink-2)}
.card .card-note b{color:var(--ink)}
.lead-sm{max-width:44rem;color:var(--ink-2)}
.tablewrap td a,.tablewrap th a{color:inherit}
.verdict{font-weight:600}
.page-meta{font-size:.875rem;color:var(--ink-2);margin-top:10px}
.sources li{margin-bottom:4px}
.sources .ko{color:var(--ink-2)}
.placeholder{background:var(--warn-bg);color:var(--warn-ink);border:1px dashed var(--warn-line);padding:0 8px;border-radius:6px}

/* tables become labelled cards on narrow screens */
@media (max-width:640px){
  .tablewrap.stack{border:0;background:transparent;overflow:visible}
  .tablewrap.stack table{min-width:0;display:block}
  .tablewrap.stack thead{display:none}
  .tablewrap.stack tbody{display:grid;gap:10px}
  .tablewrap.stack tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px 14px}
  .tablewrap.stack td{display:block;border:0;padding:3px 0}
  .tablewrap.stack td::before{content:attr(data-label) ": ";color:var(--ink-2);font-size:.875rem}
  .tablewrap.stack td:first-child{font-family:var(--font-display);font-size:1.1rem;font-weight:600;padding-bottom:4px}
  .tablewrap.stack td:first-child::before{content:none}
}