/* =====================================================================
   «نقش» responsive layer — RUKN TECH
   Loaded after naqsh.css and the page <style>. The desktop design (≥1281px)
   is untouched; every rule below lives inside a max-width query.
   Breakpoints: 1280 (small laptop) · 1100 (tablet landscape) · 900 (tablet)
                · 720 (large phone) · 420 (small phone)
   ===================================================================== */

/* ---------- mobile-only elements (hidden on desktop) ---------- */
.menu-btn{display:none}
.m-dock{display:none}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* ===================== ≤1280 : small laptops ===================== */
@media (max-width:1280px){
  .wrap{padding-inline:32px}
  .nav .wrap{gap:18px}
  .nav .search{min-width:0}
  .nav .search span{display:none}
  h1{font-size:58px}
  .hero .hero-grid{gap:40px}
  .cta h2{font-size:46px}
  .wordmark{font-size:22vw}
}

/* ===================== ≤1100 : tablet landscape ===================== */
@media (max-width:1100px){
  h1{font-size:52px}
  h2{font-size:40px}
  .phero h1{font-size:50px}
  section.sec{padding-top:96px}
  .cream{margin-top:96px;padding:96px 0!important}
  .sec-head{flex-direction:column;align-items:flex-start;gap:18px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .stats .cells{grid-template-columns:repeat(2,1fr)}
  .stats .c:nth-child(3)::before,.stats .c:nth-child(3) .sepc{display:none}
  .stats .c:nth-child(n+3){border-top:1px solid var(--line)}
  .svc{grid-template-columns:260px 1fr}
  .svc-d{grid-template-columns:1fr;gap:26px}
  .gal{grid-template-columns:1fr;gap:32px}
  .git{grid-template-columns:1fr}
  .docs{grid-template-columns:280px 1fr}
  .cta-in{grid-template-columns:1fr;padding:56px 44px}
  .cta-vis{display:none}
  .foot{grid-template-columns:repeat(3,1fr);gap:32px}
  .foot > div:first-child{grid-column:1/-1}
  .phero-grid{grid-template-columns:1fr;gap:36px;align-items:start}
  .alayout,.lgrid{grid-template-columns:minmax(0,1fr) 260px;gap:48px}
}

/* ===================== ≤1100 : header collapses to menu ===================== */
@media (max-width:1100px){
  /* header → logo · search icon · menu */
  .nav .wrap{height:64px;gap:10px}
  .nav ul,.nav .lang,.nav .btn{display:none}
  .nav .search{margin-inline-start:auto;width:40px;padding:0;justify-content:center}
  .nav .search kbd{display:none}
  .menu-btn{display:inline-grid;place-content:center;gap:5px;width:40px;height:40px;border-radius:9px;border:1px solid var(--line-2);background:var(--panel);cursor:pointer;padding:0}
  .menu-btn span{display:block;width:18px;height:1.75px;border-radius:2px;background:var(--ink);transition:transform .25s var(--ease),opacity .2s}
  .nav.open .menu-btn span:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
  .nav.open .menu-btn span:nth-child(2){opacity:0}
  .nav.open .menu-btn span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}
  .nav.open ul{display:flex;flex-direction:column;align-items:stretch;gap:2px;position:fixed;inset:64px 0 0;padding:18px 20px 170px;background:var(--bg);overflow:auto;z-index:60;border-top:1px solid var(--line)}
  .nav.open ul a{display:block;font-family:var(--f-display);font-weight:700;font-size:22px;padding:14px 8px;border-bottom:1px solid var(--line);border-radius:0;background:none}
  .nav.open .btn{display:flex;justify-content:center;position:fixed;inset-inline:20px;bottom:calc(24px + env(safe-area-inset-bottom));height:54px;font-size:16px;z-index:61}
  .nav.open .lang{display:flex;justify-content:center;align-items:center;position:fixed;inset-inline:20px;bottom:calc(90px + env(safe-area-inset-bottom));height:48px;border:1px solid var(--line-2);border-radius:10px;font-size:15px;z-index:61}
  body.menu-open{overflow:hidden}
  .nav.open{backdrop-filter:none;-webkit-backdrop-filter:none;background:var(--bg)}
  .nav.open ul{margin:0}
  .nav.open ul a[aria-current="page"]{color:var(--accent)}
  .nav.open ul li{list-style:none}
}

/* ===================== ≤900 : tablet portrait ===================== */
@media (max-width:900px){

  .wrap{padding-inline:24px}
  h1{font-size:44px;line-height:1.5}
  h2{font-size:34px}
  .lead{font-size:17px}
  section.sec{padding-top:80px}
  .cream{margin-top:80px;padding:80px 0!important}

  /* hero: copy first, palette under it */
  .hero{padding-top:44px}
  .hero .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero::after{width:420px;height:420px}
  .p-body{min-height:0}
  .proof .wrap{height:auto;flex-wrap:wrap;padding-block:16px;white-space:normal;gap:14px 26px}
  .proof .items{flex-wrap:wrap;gap:12px 22px}

  .g3,.blog{grid-template-columns:repeat(2,1fr)}
  .bridge-body{grid-template-columns:1fr}
  .code-pane{border-inline-end:0;border-bottom:1px solid var(--line)}
  .render-pane{min-height:340px}
  .rules{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .svc-nav{border-inline-end:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  .svc-nav::-webkit-scrollbar{display:none}
  .svc-nav .g{display:none}
  .svc-i{width:auto;flex:none;white-space:nowrap}
  .svc-i .x{display:none}
  .svc-d{padding:26px 24px}
  .docs{grid-template-columns:1fr}
  .docs-nav{border-inline-end:0;border-bottom:1px solid var(--line)}
  .docs-a{padding:26px 24px}
  .cta h2{font-size:38px}
  .cta-band{grid-template-columns:1fr;padding:40px 32px;gap:24px}
  .cta-band h2{font-size:34px}
  .seal{display:none}
  .wordmark{font-size:24vw}
  .gstatus{height:auto;flex-wrap:wrap;padding-block:10px;row-gap:6px}
  .gstatus .end{flex-wrap:wrap;row-gap:6px}
  .alayout,.lgrid{grid-template-columns:1fr;gap:32px}
  .phero{padding:56px 0 48px}
  .phero h1{font-size:42px}
  .card{padding:24px 22px 22px}
  .filters{flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none}

  /* command palette: full-screen sheet */
  .cmdk .win{width:100%;max-width:none;height:calc(100% - 24px);margin-top:24px;border-radius:18px 18px 0 0;display:flex;flex-direction:column}
}

/* ===================== ≤720 : phones ===================== */
@media (max-width:720px){
  .wrap{padding-inline:18px}
  h1{font-size:36px;line-height:1.55;margin:20px 0 16px}
  h1 .k{font-size:18px;margin-inline-start:8px;border-bottom-width:3px}
  h2{font-size:28px;line-height:1.5}
  .phero h1{font-size:34px}
  .lead,.phero .lead{font-size:16px;line-height:1.9}
  section.sec{padding-top:64px}
  .cream{margin-top:64px;padding:64px 0!important}
  .sec-head{margin-bottom:26px}
  .btn{height:48px;padding-inline:20px;font-size:15px}
  .hero-cta{flex-wrap:wrap}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}

  .p-body{grid-template-columns:1fr}
  .p-foot{display:none}
  .stats .v{font-size:36px}
  .stats .c{padding:18px 18px 16px}
  .stats .sbar{display:none}

  .g2,.g3,.g4,.blog{grid-template-columns:1fr}
  .thumbs{grid-template-columns:repeat(2,1fr)}
  .mat{padding:12px}
  .svc-d h3{font-size:23px}
  .mini{min-height:0}
  .cta-in{padding:40px 22px}
  .cta h2{font-size:32px}
  .contact{flex-wrap:wrap;gap:12px 20px}
  .cta-band{padding:32px 22px}
  .cta-band h2{font-size:28px}
  .cta-band .acts{flex-wrap:wrap}
  .foot{grid-template-columns:1fr 1fr;gap:28px 20px}
  .status .end{display:none}
  .status,.win-bar{overflow:hidden}

  /* floating WhatsApp → bottom dock with the main CTA */
  .wa{display:none!important}
  .m-dock{display:flex;gap:10px;position:fixed;inset-inline:0;bottom:0;z-index:50;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(20,21,24,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--line);transition:transform .3s var(--ease)}
  .m-dock .btn{flex:1;justify-content:center;height:50px}
  .m-dock .wa-i{flex:none;width:50px;height:50px;display:grid;place-items:center;border-radius:12px;background:var(--panel-2);border:1px solid var(--line-2);color:var(--accent)}
  .m-dock .wa-i svg{width:22px;height:22px}
  .m-dock.hide{transform:translateY(110%)}
  body{padding-bottom:76px}
}

/* ===================== ≤420 : small phones ===================== */
@media (max-width:420px){
  .wrap{padding-inline:16px}
  h1{font-size:32px}
  .phero h1{font-size:30px}
  h2{font-size:25px}
  .stats .v{font-size:30px}
}

/* ===================== batch 2: grid children, code panes, page sections ===================== */
@media (max-width:1100px){
  :is(.prints,.tiles,.qlinks,.g2,.g3,.g4,.blog,.res-grid,.screens,.relgrid,.pn,.foot,.hero-grid,.phero-grid,.svc-d,.bridge-body,.gal,.git,.docs,.cta-in,.alayout,.lgrid,.brief-grid,.faq-grid,.chap,.svc-row,.feat,.nl,.where,.readme-grid,.stack-grid,.print.wide,.done-grid,.hc-grid,.p-body,.nf .wrap,.def-body,.quote-slot,.pn-i,.slot) > *{min-width:0}
  .print.wide{grid-template-columns:1fr;gap:28px}
  .diffs{grid-template-columns:repeat(2,1fr)}
  .diffs .d:nth-child(3)::before,.diffs .d:nth-child(3) .sepd{display:none}
  .diffs .d:nth-child(n+3){border-top:1px solid var(--line)}
  .brief-grid{grid-template-columns:1fr}
  .side{position:static;grid-template-columns:repeat(2,1fr);align-items:start}
  .readme-grid{grid-template-columns:1fr}
  .readme-side{border-inline-start:0;border-top:1px solid var(--line)}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .screens{grid-template-columns:1fr 1fr}
  .screens > :nth-child(2){grid-column:1/-1;order:-1}
  .mx-row{grid-template-columns:160px repeat(4,1fr) 170px;padding:0 18px}
  .lock .row{grid-template-columns:170px 180px 1fr}
  .wlog .git{grid-template-columns:1fr}
}
@media (max-width:900px){
  /* LTR code blocks scroll instead of clipping */
  .code-pane,.code,.code-s,.term pre,.term2 pre,.prose pre,.article pre{overflow-x:auto;max-width:100%}
  .code-s{font-size:12px}
  .code .line,.code .ln{white-space:pre}
  .svc-row{grid-template-columns:1fr;gap:32px;padding:56px 0}
  .svc-row h2{font-size:32px}
  .chap{grid-template-columns:1fr;gap:18px;padding:36px 0}
  .ch-side h3{font-size:28px}
  .ch-body .big{font-size:19px}
  .pn{grid-template-columns:1fr}
  .prints{grid-template-columns:1fr;gap:48px}
  .slot{grid-template-columns:1fr;gap:20px;padding:32px 26px;text-align:center;justify-items:center}
  .slot-art{width:160px}
  .faq-grid{grid-template-columns:1fr;gap:28px}
  .qlinks{grid-template-columns:repeat(2,1fr)}
  .nf .wrap{grid-template-columns:1fr;gap:20px}
  .art{min-height:300px;order:-1}
  .art .iso{height:240px}
  .nf h1{font-size:44px}
  .feat{grid-template-columns:1fr}
  .feat .im{min-height:260px;order:-1}
  .feat .bd{padding:28px 26px}
  .feat h2{font-size:26px}
  .nl{grid-template-columns:1fr}
  .nl .l{border-inline-end:0;border-bottom:1px solid var(--line);padding:32px 26px}
  .nl .r{padding:32px 26px}
  .states{grid-template-columns:repeat(2,1fr)}
  .where{grid-template-columns:1fr}
  .where-map{border-inline-end:0;border-bottom:1px solid var(--line);min-height:280px}
  .where-txt{padding:30px 26px}
  .where-txt .big{font-size:30px}
  .stack-grid{grid-template-columns:1fr}
  .stack-grid .code{border-inline-end:0;border-bottom:1px solid var(--line)}
  .dlv{grid-template-columns:1fr}
  .lock .row{grid-template-columns:1fr;gap:6px;padding:14px 20px}
  .lock .tn{justify-content:flex-start}
  .mx{overflow-x:auto}
  .mx-row{min-width:760px}
  .quote-slot{grid-template-columns:1fr;padding:28px 24px}
  .quote-slot .note-s{grid-column:auto}
  .res-head{flex-direction:column;align-items:flex-start}
  .md p,.md-meta{margin-inline-start:0}
  .readme-grid > div{padding:26px 24px}
  .md[data-panel="studio"]{margin:-26px -24px}
  .def-body{grid-template-columns:120px 1fr;padding:22px}
  .def-art{height:140px}
  .def-art svg{height:120px}
  .def-word{font-size:32px}
  .hc-grid{grid-template-columns:1fr;gap:24px}
  .phero-c h1{font-size:44px}
  .ahead h1{font-size:36px}
  .ahead .dek{font-size:17px}
  .article{font-size:17px}
  .article > p.first{font-size:18.5px}
  .article h2{font-size:26px;margin-top:44px}
  .pull p{font-size:22px}
  .relgrid{grid-template-columns:1fr}
  .dhead h2{font-size:30px}
  .legal{font-size:16px}
  .done-grid{grid-template-columns:1fr}
  .ksb{order:-1}
  .ksb svg{height:140px}
  /* proof strip */
  .proof .lbl{width:100%}
  .proof .items{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;width:100%}
  .proof .items > .cbi{display:none}
  .proof .items a{display:flex;flex-direction:column;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:720px){
  /* hero palette: pyramid first, short result list */
  .p-prev{order:-1;border-bottom:1px solid var(--line);min-height:320px}
  .p-group[data-at="13"],.p-group[data-at="13"] ~ *{display:none!important}
  .p-input .q{font-size:16px}
  .diffs{grid-template-columns:1fr}
  .diffs .d + .d::before,.diffs .sepd{display:none}
  .diffs .d + .d{border-top:1px solid var(--line)}
  .side{grid-template-columns:1fr}
  .res-grid{grid-template-columns:1fr 1fr}
  .res-cell{padding:16px}
  .res-cell .val{font-size:24px}
  .screens{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .g2f{grid-template-columns:1fr}
  .prog{grid-template-columns:repeat(5,auto);overflow-x:auto;padding-inline:18px}
  .prog li span:not(.cbi):not(.n){display:none}
  .steps{padding:24px 18px 8px;min-height:0}
  .sh legend{font-size:24px}
  .brief-foot{padding:16px 18px 18px;flex-wrap:wrap}
  .brief-foot #next{flex:1}
  .out .row{grid-template-columns:110px 1fr}
  .pn-i,.pn-i.next{grid-template-columns:96px 1fr;text-align:start}
  .pn-i.next > :last-child{order:-1}
  .pn-i b{font-size:18px}
  .print .label dl{grid-template-columns:auto 1fr}
  .print .label dd.stk{grid-column:2}
  .slot h3{font-size:26px}
  .qlinks{grid-template-columns:1fr}
  .def-body{grid-template-columns:1fr;text-align:start}
  .def-art{height:120px;justify-self:start}
  .catchip{font-size:12px}
  .ameta{gap:12px 18px}
  .md-h h3{font-size:26px}
  .where-map .rl{font-size:11px}
  .cats{flex-wrap:wrap}
  .def-tag{display:none}
}

/* ===================== batch 3 ===================== */
@media (max-width:720px){
  .commit{grid-template-columns:72px minmax(0,1fr);column-gap:8px;padding-inline-end:14px}
  .commit .h,.commit .w{display:none}
  .commit .m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13.5px}
  .commit .m .ty{font-size:11.5px;margin-inline-start:6px}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .crumb > span:nth-last-child(-n+2){display:none}
}

@media (max-width:720px){
  .foot > div:first-child,.foot > div:last-child{grid-column:1/-1}
  .dl{grid-template-columns:30px 24px 1fr;min-height:48px}
  .diff{font-size:15px}
  .post .im{aspect-ratio:16/9;height:auto}
}
@media (max-width:720px){ body.menu-open .m-dock{display:none} }
@media (max-width:900px){
  .chero{padding-bottom:56px}
  .shot-wrap{margin-top:-24px}
  .chero h1 .soft{font-size:30px}
}
@media (max-width:720px){
  .chero h1 .soft{font-size:24px}
  .toolbar{gap:8px;padding:10px}
  .toolbar .url{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .openlive{padding:5px 9px;font-size:12px}
  .meta-win .meta{grid-template-columns:80px 1fr;padding:6px 18px}
}

/* ---------- article TOC / legal index → bottom sheet ---------- */
.toc-fab,.toc-veil{display:none}
@media (max-width:900px){
  .toc-fab{display:inline-flex;align-items:center;gap:8px;position:fixed;z-index:55;inset-inline-start:16px;bottom:24px;height:44px;padding-inline:14px 16px;border-radius:999px;border:1px solid var(--line-2);background:rgba(27,28,32,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font:inherit;font-size:14px;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.4);cursor:pointer}
  .toc-fab svg{color:var(--accent)}
  .toc-veil{display:block;position:fixed;inset:0;z-index:68;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .25s}
  .toc-veil.on{opacity:1;pointer-events:auto}
  aside.toc,aside.outline{position:fixed!important;inset:auto 0 0 0!important;z-index:70;max-height:78vh;overflow:auto;background:var(--bg);border-top:1px solid var(--line-2);border-radius:18px 18px 0 0;padding:14px 14px calc(18px + env(safe-area-inset-bottom));transform:translateY(105%);transition:transform .32s var(--ease);visibility:hidden}
  aside.toc.sheet-open,aside.outline.sheet-open{transform:none;visibility:visible}
  aside.toc .win{border:0;box-shadow:none}
}
@media (max-width:720px){
  .toc-fab{bottom:calc(86px + env(safe-area-inset-bottom))}
  .ahead h1{font-size:28px;line-height:1.6}
  .feat h2{font-size:23px}
}
@media (max-width:1100px){ .rprog .cap{display:none} }
@media (max-width:720px){
  .art{min-height:210px}
  .art .iso{height:170px}
  .nf h1{font-size:36px}
  .nf{padding-top:28px}
}
.nav ul a{white-space:nowrap}

/* ---------- contact form: spam trap + send failure ---------- */
.hp-field{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.send-fail{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:10px 28px 0;padding:14px 16px;border:1px solid rgba(248,113,113,.35);background:rgba(248,113,113,.07);border-radius:12px;font-size:14px;color:var(--ink);line-height:1.8}
.send-fail span{flex:1 1 260px}
.send-fail .btn{height:42px}
@media (max-width:720px){ .send-fail{margin:10px 18px 0} }
@media (max-width:900px){ .svc-row > .txt{order:-1} }

/* ===================== English (LTR) ===================== */
html[lang="en"]{
  --f-display:"Readex Pro","Noto Kufi Arabic",system-ui,sans-serif;
  --f-ui:"IBM Plex Sans","IBM Plex Sans Arabic",system-ui,sans-serif;
  --f-mono:"JetBrains Mono","IBM Plex Sans",ui-monospace,monospace;
}
html[lang="en"] h1,html[lang="en"] h2{letter-spacing:-.015em;line-height:1.18}
html[lang="en"] h1{line-height:1.12}
html[lang="en"] .wordmark{font-family:var(--f-display);letter-spacing:-.04em;line-height:1}
html[lang="en"] [lang="ar"]{font-family:"IBM Plex Sans Arabic",sans-serif}
html[lang="en"] .out .row{direction:ltr}
html[lang="en"] :is(.stk,.commit .h,.mx-row > b.mono){text-align:left}
html[lang="en"] :is(.t-rtl,.term2 .rt){direction:ltr;text-align:left}
html[lang="en"] .tree .dir{justify-content:flex-start}