/* Language switcher, detection bar and right-to-left support. */

.lang-switch{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s5);
  border-top:1px solid var(--line);padding:var(--s6) 0;
  font-size:12px;color:var(--muted)
}
.lang-switch .lang-label{
  font-family:ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing:1.25px;color:var(--dim);text-transform:uppercase
}
.lang-switch a{min-height:32px;display:inline-flex;align-items:center}
.lang-switch a:hover{color:var(--blue)}
.lang-switch [aria-current]{color:var(--text);font-weight:550}

/* Suggestion bar, only shown by locale.js when the browser language differs. */
.lang-offer{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--s4) var(--s6);
  background:var(--surface2);border-bottom:1px solid var(--line);
  padding:var(--s4) var(--s12);font-size:13px
}
.lang-offer p{margin:0;color:var(--muted)}
.lang-offer a{color:var(--blue);font-weight:550;text-decoration:underline;
  text-underline-offset:3px;min-height:32px;display:inline-flex;align-items:center}
.lang-offer button{
  margin-inline-start:auto;background:none;border:0;color:var(--dim);
  font-size:20px;line-height:1;width:44px;height:44px
}
.lang-offer button:hover{color:var(--text)}
@media(max-width:520px){
  .lang-offer{padding:var(--s3) var(--s6);font-size:12px;gap:var(--s3)}
  .lang-offer button{margin-inline-start:auto}
}

/* Right-to-left. The layout is flex/grid, so only the directional
   exceptions written as physical properties need flipping. */
[dir=rtl] .flow-step{text-align:right}
[dir=rtl] .flow-step+.flow-step{border-left:0;border-right:1px solid var(--line)}
[dir=rtl] .benefits article{padding:var(--s8) 0 var(--s8) var(--s8)}
[dir=rtl] .benefits article+article{
  padding-left:0;padding-right:var(--s8);
  border-left:0;border-right:1px solid var(--line)
}
[dir=rtl] .benefits article:last-child{padding-left:0}
[dir=rtl] .paths article+article{
  border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:var(--s12)
}
[dir=rtl] .step-arrow{right:auto;left:var(--s8);transform:scaleX(-1)}
[dir=rtl] .closing-symbol{right:auto;left:var(--s12)}
[dir=rtl] .footer-top>.quiet-link{margin:0 auto 0 0}
[dir=rtl] .footer-bottom>div{justify-content:flex-start}
[dir=rtl] .clean-list li::before{margin-right:0;margin-left:var(--s3);
  display:inline-block;transform:scaleX(-1)}
[dir=rtl] .code-foot span,[dir=rtl] #copy-code span{
  margin-right:0;margin-left:var(--s2)}
[dir=rtl] h1{margin-left:0;margin-right:-4px}
[dir=rtl] .skip{left:auto;right:16px}
[dir=rtl] .text-link:hover span{transform:translateX(-4px)}
[dir=rtl] .pursekeeper-visual>.eyebrow{left:auto;right:var(--s8)}
[dir=rtl] .pk-mark span{right:auto;left:-42px}
/* Latin fragments (Nano, XNO, code, URLs) inside Arabic prose */
[dir=rtl] code,[dir=rtl] pre{direction:ltr;text-align:left}
[dir=rtl] .faucet-links a,[dir=rtl] .lang-switch{text-align:right}

/* Arabic and Devanagari sit lower than Latin: a touch more line height,
   and no negative tracking, which mangles connected scripts. */
[lang=ar] h1,[lang=ar] h2,[lang=ar] h3,
[lang=hi] h1,[lang=hi] h2,[lang=hi] h3,
[lang=zh-Hans] h1,[lang=zh-Hans] h2,[lang=zh-Hans] h3{
  letter-spacing:normal;line-height:1.3
}
[lang=ar] h1,[lang=hi] h1,[lang=zh-Hans] h1{
  font-size:clamp(40px,4.6vw,64px);margin-left:0
}
[lang=ar] .closing h2,[lang=hi] .closing h2,[lang=zh-Hans] .closing h2{
  font-size:clamp(40px,5vw,60px)
}
[lang=ar] .eyebrow,[lang=hi] .eyebrow,[lang=zh-Hans] .eyebrow,
[lang=ar] .micro,[lang=hi] .micro,[lang=zh-Hans] .micro,
[lang=ar] .path-tag,[lang=hi] .path-tag,[lang=zh-Hans] .path-tag{
  font-family:var(--font-body);letter-spacing:.4px
}
[lang=hi] body,[lang=ar] body{line-height:1.75}

/* Monospaced, wide-tracked labels break connected and CJK scripts:
   they de-join Arabic letterforms and space Devanagari incorrectly.
   For those locales the labels take the body font at normal tracking. */
[lang=ar] .eyebrow,[lang=hi] .eyebrow,[lang=zh-Hans] .eyebrow,
[lang=ar] .micro,[lang=hi] .micro,[lang=zh-Hans] .micro,
[lang=ar] .art-eyebrow,[lang=hi] .art-eyebrow,[lang=zh-Hans] .art-eyebrow,
[lang=ar] .breadcrumb,[lang=hi] .breadcrumb,[lang=zh-Hans] .breadcrumb,
[lang=ar] .demo-badge,[lang=hi] .demo-badge,[lang=zh-Hans] .demo-badge,
[lang=ar] .step-number,[lang=hi] .step-number,[lang=zh-Hans] .step-number,
[lang=ar] .code-top,[lang=hi] .code-top,[lang=zh-Hans] .code-top,
[lang=ar] .status-label,[lang=hi] .status-label,[lang=zh-Hans] .status-label,
[lang=ar] .photo-caption span,[lang=hi] .photo-caption span,[lang=zh-Hans] .photo-caption span,
[lang=ar] .photo-caption small,[lang=hi] .photo-caption small,[lang=zh-Hans] .photo-caption small,
[lang=ar] .journey-grid article>span,[lang=hi] .journey-grid article>span,[lang=zh-Hans] .journey-grid article>span,
[lang=ar] .faucet-card .micro,[lang=hi] .faucet-card .micro,[lang=zh-Hans] .faucet-card .micro,
[lang=ar] .safety-list article>span,[lang=hi] .safety-list article>span,[lang=zh-Hans] .safety-list article>span,
[lang=ar] .lang-switch .lang-label,[lang=hi] .lang-switch .lang-label,[lang=zh-Hans] .lang-switch .lang-label{
  font-family:var(--font-body);letter-spacing:.4px;font-size:12.5px
}
/* Digits and Latin tokens inside those labels keep their own direction */
[dir=rtl] .art-eyebrow,[dir=rtl] .graphic-facts{text-align:center}

/* English content inside a translated page: blog card titles and summaries,
   and article bodies, which are not translated. Keep the Latin typeface and
   left-to-right reading order even on Arabic, Hindi and Chinese pages. */
body [lang=en]{font-family:"DM Sans",system-ui,sans-serif;letter-spacing:normal}
[dir=rtl] body [lang=en]{direction:ltr;text-align:left}
.article-lang-note{
  margin:var(--s6) 0 0;padding:var(--s4) var(--s6);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  font-size:13px;color:var(--muted)
}
.article-lang-note+.article-tools{margin-top:var(--s3)}