/* Faisal colour system v3 - skill v2.0.0. Copy as is; never invent colours (every text pair is checked at 4.5:1 or more). */
:root{
  --ink:#12161c; --muted:#54606f; --line:#d8dee7; --paper:#ffffff; --brand:#0f3460;
  --src-bg:#16213e; --src-ink:#c9d6e5;
  --font:'Noto Naskh Arabic',serif;
  --mono:"Cascadia Mono",Consolas,"DejaVu Sans Mono",monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
html{font-size:clamp(15px,0.32vw + 11px,23px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:'Noto Naskh Arabic',serif;-webkit-print-color-adjust:exact;print-color-adjust:exact}
.doc{direction:rtl;font-family:var(--font);line-height:1.85;width:100%;max-width:2300px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:clamp(20px,3vw,56px) 72px}
h1,h2,h3{text-wrap:balance;line-height:1.3;margin:0}
p{margin:0}
a{color:#0b4f8a}
code,.ltr{font-family:var(--mono);font-size:max(12px,.88em);direction:ltr;unicode-bidi:isolate;background:rgba(15,52,96,.07);border:1px solid rgba(15,52,96,.13);border-radius:5px;padding:0 .35em;white-space:nowrap}
td code,li code,p code,.note code,.card code{white-space:normal;overflow-wrap:anywhere}
.chip code,.src code{font-size:1em}

/* masthead: light, navy title, navy rule under it (no dark block) */
.mast{display:flex;gap:clamp(16px,2vw,32px);align-items:center;flex-wrap:wrap;padding-block:0 clamp(18px,2vw,30px);border-bottom:3px solid var(--brand)}
.mast > div{min-width:0;flex:1 1 20rem}
.mast h1{font-size:clamp(28px,3.2vw,60px);color:var(--brand)}
.mast .sub{font-size:clamp(16px,1.3vw,24px);color:#33445a;margin-top:4px;max-width:75ch}
.mast .when{font-size:max(12px,.88em);color:var(--muted);margin-top:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip{background:#eef2f7;border:1px solid #d5deea;color:var(--brand);border-radius:99px;padding:2px 12px;font-size:max(12px,.86em);font-weight:bold}
.lead{max-width:75ch;color:#253344;margin-block-start:clamp(18px,2vw,30px)}

/* a section is one family from top to bottom: head, description, body, optional SOURCE strip; no white gap */
.fam{margin-block-start:clamp(26px,2.6vw,50px);border-radius:14px;overflow:hidden;border:1px solid var(--edge);background:var(--tint)}
.sec-head{background:var(--c);color:var(--ink-c);padding:14px clamp(16px,1.6vw,30px);display:flex;gap:14px;align-items:baseline}
.sec-head h2{font-size:clamp(19px,1.55vw,30px);flex:1 1 0;min-width:0}
.sec-no{font-weight:bold;font-size:1.25em}
.sec-desc{background:var(--desc);color:var(--ink-c);padding:8px clamp(16px,1.6vw,30px) 12px}
.sec-body{padding:clamp(14px,1.5vw,28px) clamp(16px,1.6vw,30px);display:grid;gap:16px}
.sec-body > *{min-width:0}
.sub3{font-size:1.12em;color:var(--num)}
.src{background:var(--src-bg);color:var(--src-ink);font-family:var(--mono);font-size:max(12px,.82em);line-height:1.7;padding:8px clamp(16px,1.6vw,30px);direction:ltr;text-align:left;overflow-wrap:anywhere}
.src b{color:#fff;margin-right:.6em}
.src a{color:#dbe6f3}

/* tables: short ones take the light rows, long ones (6+ rows or 5+ columns) take class="data" */
.tw{overflow-x:auto;border-radius:10px;border:1px solid var(--edge)}
table{width:100%;table-layout:fixed;border-collapse:collapse;word-break:break-word;direction:rtl;font-variant-numeric:tabular-nums}
th{background:var(--shade);color:#fff;text-align:right;padding:10px 14px;font-weight:bold;vertical-align:top}
td{padding:9px 14px;vertical-align:top;border-top:1px solid rgba(0,0,0,.05)}
tbody tr:nth-child(odd){background:var(--row-a)}
tbody tr:nth-child(even){background:var(--row-b)}
table.data tbody tr:nth-child(odd){background:var(--data-a)}
table.data tbody tr:nth-child(even){background:var(--data-b)}
td.idx,th.idx{text-align:center}
td.idx{font-weight:bold;color:var(--num)}
td.key,.kv td:first-child{font-weight:bold;color:var(--num)}
.tag{display:inline-block;border:1px solid rgba(255,255,255,.75);color:#fff;border-radius:99px;padding:0 10px;font-size:max(12px,.86em);font-weight:bold}

/* cards, notes, quotes, lists */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:14px}
.card{background:#fff;border:1px solid var(--edge);border-radius:12px;padding:14px 16px;display:grid;gap:6px;align-content:start}
.card .big{font-size:clamp(26px,2.2vw,42px);font-weight:bold;color:var(--num);line-height:1.2}
.card h3{font-size:1.02em;color:var(--num)}
.note,blockquote{margin:0;background:#fff;border-inline-start:5px solid var(--c);border-radius:0 10px 10px 0;padding:12px 16px}
.note.warn{border-inline-start-color:#c98a00;background:#fffaf0}
blockquote .who{display:block;font-size:max(12px,.88em);color:var(--muted);margin-bottom:4px}
ol.steps{margin:0;padding-inline-start:1.6em;display:grid;gap:10px;list-style-type:arabic-indic}
ol.steps li::marker{font-weight:bold;color:var(--num)}
ul.plain{margin:0;padding-inline-start:1.3em;display:grid;gap:8px}

/* footer: name and version, then the company line, two centred lines */
footer{margin-top:clamp(30px,3vw,56px);padding-top:16px;border-top:1px solid var(--line);color:var(--muted);font-size:.9em;text-align:center}
footer .rights{display:block;line-height:1.7}
footer .rights b{color:var(--brand)}

/* phones: wide tables scroll inside their own frame instead of crushing Arabic words */
@media (max-width:640px){
  th,td{padding:8px 9px}
  .sec-head{flex-wrap:wrap}
  table.wide{min-width:820px}
  table.mid{min-width:640px}
}
@media print{
  html{font-size:12px}
  .tw{overflow:visible}
  .sec-head,.sec-desc{break-after:avoid}
  tr,.card,.note,blockquote{break-inside:avoid}
}

/* the 12 families, in this order, one per section */
.f1{--c:#0f3460;--desc:#274870;--ink-c:#ffffff;--shade:#0c294b;--tint:#f1f3f5;--edge:#b7c2cf;--row-a:#f9fafb;--row-b:#e8ecf0;--data-a:#e2e7ec;--data-b:#c8d0da;--num:#0d2e54}
.f2{--c:#e67e22;--desc:#e88b38;--ink-c:#40230a;--shade:#af601a;--tint:#fef7f2;--edge:#f8d8bd;--row-a:#fefcf9;--row-b:#fdf3ea;--data-a:#fcf0e4;--data-b:#f9e1cc;--num:#9a5417}
.f3{--c:#6c3483;--desc:#7b488f;--ink-c:#ffffff;--shade:#542966;--tint:#f6f3f8;--edge:#d3c2da;--row-a:#fbfafc;--row-b:#f1ecf3;--data-a:#ede7f0;--data-b:#ddd0e2;--num:#5f2e73}
.f4{--c:#27ae60;--desc:#3db670;--ink-c:#0b311b;--shade:#1d854a;--tint:#f2faf5;--edge:#bee7cf;--row-a:#fafdfb;--row-b:#eaf7f0;--data-a:#e5f5ec;--data-b:#cdecda;--num:#1a7440}
.f5{--c:#c0392b;--desc:#c64d40;--ink-c:#ffffff;--shade:#962c22;--tint:#fbf3f2;--edge:#ecc4bf;--row-a:#fdfafa;--row-b:#f9eceb;--data-a:#f7e7e6;--data-b:#f1d1ce;--num:#a93226}
.f6{--c:#0e7490;--desc:#217f99;--ink-c:#ffffff;--shade:#0b5a70;--tint:#f1f7f8;--edge:#b7d5de;--row-a:#f9fcfc;--row-b:#e8f2f4;--data-a:#e2eef2;--data-b:#c8dfe5;--num:#0c667f}
.f7{--c:#b7770d;--desc:#be8525;--ink-c:#241703;--shade:#8f5d0a;--tint:#fbf7f0;--edge:#e9d6b6;--row-a:#fdfcf9;--row-b:#f8f2e8;--data-a:#f6efe2;--data-b:#eee0c7;--num:#8a5a09}
.f8{--c:#c0186c;--desc:#c62f7b;--ink-c:#ffffff;--shade:#961354;--tint:#fbf1f6;--edge:#ecbad3;--row-a:#fdf9fb;--row-b:#f9e9f1;--data-a:#f7e3ed;--data-b:#f1cadd;--num:#a9155f}
.f9{--c:#4a5568;--desc:#5c6677;--ink-c:#ffffff;--shade:#3a4251;--tint:#f4f5f6;--edge:#c9ccd2;--row-a:#fafbfb;--row-b:#eeeff1;--data-a:#e9ebed;--data-b:#d5d8dc;--num:#414b5c}
.f10{--c:#3730a3;--desc:#4b45ac;--ink-c:#ffffff;--shade:#2b257f;--tint:#f3f3f9;--edge:#c3c1e3;--row-a:#fafafd;--row-b:#ecebf6;--data-a:#e7e6f4;--data-b:#d1cfea;--num:#302a8f}
.f11{--c:#7c4d33;--desc:#895f47;--ink-c:#ffffff;--shade:#613c28;--tint:#f7f4f3;--edge:#d8cac2;--row-a:#fcfbfa;--row-b:#f3eeec;--data-a:#efeae7;--data-b:#e1d6d0;--num:#6d442d}
.f12{--c:#0284c7;--desc:#1b90cd;--ink-c:#00101a;--shade:#02679b;--tint:#f0f8fc;--edge:#b3daee;--row-a:#f9fcfe;--row-b:#e7f3fa;--data-a:#e1f0f8;--data-b:#c5e3f2;--num:#02669a}

/* Docs extras on top of the colour system v3 template (documents are light-only by design). */
:root:root:root{
  --paper:#ffffff; --panel:#f6f8fb; --panel2:#eef2f7; --ink:#12161c; --muted:#54606f; --line:#d8dee7;
  --brand:#0f3460; --brand-ink:#ffffff; --accent:#0b4f8a; --link:#0b4f8a; --code-bg:#16213e; --code-ink:#e3ebf5;
  color-scheme:light;
}
.top [data-act="theme"]{display:none}
.docs{display:grid;grid-template-columns:minmax(11rem,15rem) minmax(0,1fr);gap:clamp(14px,2vw,40px);max-width:2300px;margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.docs .doc{padding-inline:0;max-width:none}
.docnav{position:sticky;top:70px;align-self:start;display:grid;gap:2px;padding-block:clamp(20px,3vw,56px) 20px}
.docnav a{display:block;text-decoration:none;color:var(--ink);padding:5px 10px;border-radius:8px}
.docnav a[aria-current="page"]{background:var(--brand);color:#fff}
.docnav a:hover{background:#eef2f7}
.docnav a[aria-current="page"]:hover{background:var(--brand)}
.doc pre{direction:ltr;text-align:left;background:var(--src-bg);color:#e3ebf5;border-radius:10px;padding:12px 14px;overflow:auto;font-family:var(--mono);font-size:max(12px,.82em);line-height:1.6;margin:0;white-space:pre}
.doc pre code{background:none;border:0;padding:0;color:inherit;white-space:pre;font-size:1em}
.m{display:inline-block;min-width:4.2em;text-align:center;border-radius:6px;padding:0 6px;font-family:var(--mono);font-size:max(12px,.8em);font-weight:bold;color:#fff;direction:ltr}
.m.get{background:#1d854a}.m.post{background:#0f3460}.m.put{background:#8f5d0a}.m.delete{background:#a93226}
.ep{display:grid;gap:10px;background:#fff;border:1px solid var(--edge);border-radius:12px;padding:12px 16px;min-width:0}
.ep h3{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:1.02em}
.ep h3 code{font-size:1em}
.ep details summary{cursor:pointer;color:var(--num);font-weight:bold}
.params td:first-child code{white-space:nowrap}
@media (max-width:860px){
  .docs{grid-template-columns:minmax(0,1fr)}
  .docnav{position:static;display:flex;overflow-x:auto;padding-block:12px 0;gap:4px}
  .docnav a{white-space:nowrap;flex:none;border:1px solid var(--line)}
}