/* Arabic mode: font swap + RTL corrections */
.langtoggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:50%;flex:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:none;color:#fff;
  font-family:'IBM Plex Sans Arabic','Inter',sans-serif;font-size:.85rem;font-weight:600;
  transition:border-color .3s,color .3s;
}
.langtoggle:hover{border-color:#CFFF04;color:#CFFF04}
/* On subpage navs (logo | toggle | back) the toggle is the middle flex child of a
   space-between row, which strands it mid-nav. Push it and the back link together. */
nav > .langtoggle{margin-inline-start:auto}

/* Mono counters like "/01 — 06" must not reorder under RTL */
html.ar .stepno,html.ar .sn,html.ar .n,html.ar .hudno,html.ar .plate .sid{
  direction:ltr;display:inline-block;
}

html.ar body,
html.ar .stitle,
html.ar h1,html.ar h2,html.ar h3,
html.ar .ah,html.ar .btn,html.ar .pill,
html.ar .mmenu a,html.ar .step h1{
  font-family:'IBM Plex Sans Arabic','Inter',system-ui,sans-serif;
  letter-spacing:0;
}
html.ar .kicker,html.ar .mono,html.ar .fh,html.ar .ftag,
html.ar .sn,html.ar .n,html.ar .stepno,html.ar .hint,
html.ar .tool,html.ar .chips i,html.ar .meta i,html.ar .scope i,
html.ar .plate,html.ar .uhead,html.ar .logline,html.ar .mmenu a span{
  letter-spacing:.06em;
}
/* rows and grids that assume LTR */
html.ar .mmenu a{flex-direction:row}
html.ar .entries a,html.ar .srow-head{direction:rtl}
html.ar .review .rline{flex-direction:row}
html.ar .arr,html.ar .nextcase .arr{transform:scaleX(-1)}
html.ar .more,html.ar .guide span{display:inline-block;transform:scaleX(-1)}
/* keep latin brand/tech names unflipped */
html.ar .logo,html.ar .fmono,html.ar .tool img{direction:ltr}

/* Arabic needs more leading than Clash's tight display metrics */
html.ar #hero h1,html.ar .stitle,html.ar h1,html.ar h2{line-height:1.35}
html.ar .rotator{height:1.4em}
html.ar #hero .sub,html.ar .lede,html.ar .sline{line-height:1.85}

/* ---------- page transition veil ---------- */
.pageveil{
  position:fixed;inset:0;z-index:400;background:#0E0E0E;
  border-top:2px solid #CFFF04;
  transform:translateY(100%);pointer-events:none;
  transition:transform .42s cubic-bezier(.7,0,.2,1);
}
.pageveil.on{transform:translateY(0);pointer-events:auto}
/* arrival fade for pages without GSAP reveals */
@media(prefers-reduced-motion:no-preference){
  body > main,body > article{animation:pagein .55s cubic-bezier(.16,1,.3,1) both}
}
@keyframes pagein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* labels must never wrap when swapping languages */
.pill,.btn,.langtoggle,nav .links a,#nav .links a,.mmenu a{white-space:nowrap}
@media(max-width:420px){
  nav .pill,#nav .pill{padding:.5em .85em;font-size:.76rem}
}

/* Text without an Arabic translation must stay LTR or punctuation mangles */
html.ar article p:not([data-ar]),
html.ar article h2:not([data-ar]),
html.ar article h3:not([data-ar]),
html.ar article li:not([data-ar]),
html.ar article blockquote:not([data-ar]),
html.ar article table,
html.ar .rev p:not([data-ar]),
html.ar .ab p:not([data-ar]){
  direction:ltr;text-align:left;
}