/* Internationalisation layer.
   Loaded after styles.css on every page, including English.
   Three jobs: the language menu, script-appropriate typography, and
   right-to-left layout overrides. */

/* ---------------------------------------------------------------- language menu
   The menu lives inside the dark header, so it uses the header's palette rather
   than the light content palette. inset-inline-end means it mirrors itself on RTL
   pages with no extra rule. */
.lang{margin:0;position:relative}
.lang>summary{
  list-style:none;display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:7px 12px;border:1px solid #ffffff2e;border-radius:8px;
  font-size:12px;color:#f0f0f8;background:#ffffff0d;white-space:nowrap
}
.lang>summary:hover{border-color:#ffffff52;background:#ffffff17}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.65}
.lang[open]>summary{border-color:#b9a8f0;color:#fff;background:#ffffff1f}
.lang[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.lang .lang-menu{
  position:absolute;inset-inline-end:0;top:calc(100% + 10px);z-index:60;
  min-width:196px;margin:0;padding:6px;list-style:none;
  background:#1b1c30;border:1px solid #ffffff24;border-radius:12px;
  box-shadow:0 22px 50px #05060f5c;display:grid;gap:2px
}
.lang .lang-menu a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:9px 11px;border-radius:8px;text-decoration:none;
  color:#e7e7f2;font-size:13px;white-space:nowrap
}
.lang .lang-menu a:hover{background:#ffffff17}
.lang .lang-menu a[aria-current="true"]{color:#c9b8ff;font-weight:600;background:#ffffff0f}
.lang .lang-menu code{font-family:var(--mono);font-size:10px;color:#9a9ab4;letter-spacing:.06em}
@media(max-width:700px){
  .lang>summary{padding:6px 9px;font-size:11px}
  .lang .lang-menu{min-width:170px;inset-inline-end:-8px}
}

/* Footer language row. Endonyms only, so it reads in any language. */
.lang-row{
  margin:14px 0 0;font-size:12px;color:#ffffff8a;line-height:2;
  display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center
}
.lang-row a{color:#ffffffb8;text-decoration:none;border-bottom:1px solid #ffffff2e;padding-bottom:1px}
.lang-row a:hover{color:#fff;border-bottom-color:#ffffff7a}
.lang-row a[aria-current="true"]{color:#fff;border-bottom-color:#b9a8f0}
@media print{.lang-row{display:none}}

/* ------------------------------------------------------- script-aware typography
   Sora and DM Sans ship as latin subsets, so every non-latin script needs a real
   font stack or the browser falls back to something unpredictable. Tight negative
   letter-spacing (the design uses -3.7px on h1) also damages Arabic, Hebrew and
   CJK, so it is reset for those scripts and the line height is opened up. */

:lang(zh-Hans),:lang(zh-Hant){
  --body:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif;
  --display:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,sans-serif
}
:lang(ja){
  --body:"Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP","Source Han Sans JP",Meiryo,system-ui,sans-serif;
  --display:var(--body)
}
:lang(ko){
  --body:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR","Source Han Sans KR",system-ui,sans-serif;
  --display:var(--body)
}
:lang(ar){
  --body:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Noto Sans Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  --display:var(--body)
}
:lang(he){
  --body:"SF Hebrew","Arial Hebrew","Noto Sans Hebrew","Segoe UI",Arial,system-ui,sans-serif;
  --display:var(--body)
}
:lang(ru),:lang(uk),:lang(bg){
  --body:"DM Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;
  --display:Sora,"Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif
}

:lang(zh-Hans) h1,:lang(zh-Hant) h1,
:lang(ja) h1,:lang(ko) h1,
:lang(ar) h1,:lang(he) h1{
  letter-spacing:0;line-height:1.24;font-weight:600
}
:lang(zh-Hans) h2,:lang(zh-Hant) h2,
:lang(ja) h2,:lang(ko) h2,
:lang(ar) h2,:lang(he) h2{letter-spacing:0}
:lang(zh-Hans) .brand,:lang(zh-Hant) .brand,
:lang(ja) .brand,:lang(ko) .brand,
:lang(ar) .brand,:lang(he) .brand{letter-spacing:0}
:lang(zh-Hans) body,:lang(zh-Hant) body,
:lang(ja) body,:lang(ko) body{
  line-height:1.85;
  word-break:normal;
  line-break:strict
}
:lang(ar) body,:lang(he) body{line-height:1.9}
:lang(ar) .lede,:lang(he) .lede{line-height:1.95}
:lang(zh-Hans) .step>span,:lang(zh-Hant) .step>span,
:lang(ar) .step>span,:lang(he) .step>span{letter-spacing:0;font-size:12px}
:lang(zh-Hans) .toc-label,:lang(ar) .toc-label,:lang(he) .toc-label{letter-spacing:0}

/* Never let the display font fake-bold CJK or Arabic. */
:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3,
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,
:lang(he) h1,:lang(he) h2,:lang(he) h3{font-synthesis-weight:none}

/* ------------------------------------------------------------------- RTL layout
   The stylesheet is written in physical properties (left/right), so an RTL page
   needs each one mirrored. Logical properties are used here where possible. */

[dir="rtl"] .skip{left:auto;right:20px}
[dir="rtl"] .brand-sub{
  border-left:0;border-right:1px solid #ffffff24;
  padding-left:0;padding-right:16px;margin-left:0;margin-right:4px
}
[dir="rtl"] .channel small{margin-left:0;margin-right:auto}
[dir="rtl"] .message-heading small{margin-left:0;margin-right:2px}
[dir="rtl"] .result-card{
  border-left:1px solid #ffffff0b;border-right:2px solid #a99bdc;
  border-radius:7px 3px 3px 7px
}
[dir="rtl"] .skill-sticker{right:auto;left:-19px;transform:rotate(-3deg)}
[dir="rtl"] .journey-step{border-left:0;border-right:1px solid var(--line)}
[dir="rtl"] .journey-step:first-child{padding-left:0;padding-right:0}
[dir="rtl"] .toc-label{padding-left:0;padding-right:12px}
[dir="rtl"] h2.step>span{margin-right:0;margin-left:12px}
[dir="rtl"] ul,[dir="rtl"] ol{padding-left:0;padding-right:22px}
[dir="rtl"] .card ul{padding-left:0;padding-right:16px}
[dir="rtl"] pre:before{left:auto;right:19px}
[dir="rtl"] .copy{right:auto;left:9px}
[dir="rtl"] .note{
  border-left:1px solid var(--line);border-right:3px solid #a899d2;
  border-radius:8px 3px 3px 8px
}
[dir="rtl"] .note.warn{border-right-color:#d1ae75;border-left-color:#e2dfee}
[dir="rtl"] table{text-align:right}
[dir="rtl"] .top{right:auto;left:22px}
[dir="rtl"] .card .price{float:left}
[dir="rtl"] .toast{left:50%;transform:translateX(-50%)}
[dir="rtl"] .journey-step strong{margin-right:0;margin-left:8px}

/* Code, commands and paths stay left-to-right even on an RTL page. Anything the
   reader has to type must read exactly as it will be typed. */
[dir="rtl"] pre,[dir="rtl"] code,[dir="rtl"] kbd,[dir="rtl"] samp,[dir="rtl"] .mono{
  direction:ltr;text-align:left;unicode-bidi:isolate
}
[dir="rtl"] pre code{display:inline-block}
/* Latin brand names inside RTL text should not drag punctuation around. */
[dir="rtl"] .brand,[dir="rtl"] .brand-sub,[dir="rtl"] .stack span,[dir="rtl"] .hero-label{
  unicode-bidi:isolate
}

/* ---------------------------------------------------------------- generated text
   The mobile table hint is drawn by CSS (content:), so the text-node pipeline
   cannot reach it. Each language states it here instead. Same pattern applies
   to any future CSS-generated string. */
html[lang="zh-Hans"] .table-scroll:after { content: "左右滑动查看完整表格" }
html[lang="ar"]      .table-scroll:after { content: "اسحب جانبياً لعرض الجدول كاملاً" }
html[lang="es"]      .table-scroll:after { content: "Desliza de lado para ver la tabla completa" }
html[lang="fr"]      .table-scroll:after { content: "Faites glisser sur le côté pour voir le tableau entier" }
html[lang="de"]      .table-scroll:after { content: "Seitlich scrollen, um die ganze Tabelle zu sehen" }
html[lang="ru"]      .table-scroll:after { content: "Прокрутите вбок, чтобы увидеть всю таблицу" }
html[lang="he"]      .table-scroll:after { content: "גללו לצד כדי לראות את הטבלה במלואה" }
html[lang="ur-Latn"] .table-scroll:after { content: "Poora table dekhne ke liye side mein scroll karein" }
html[lang="ja"]      .table-scroll:after { content: "横にスクロールすると表全体が見られます" }
html[lang="ko"]      .table-scroll:after { content: "옆으로 스크롤하면 표 전체를 볼 수 있습니다" }

/* the sticky table hint is pinned with left:0 in styles.css */
[dir="rtl"] .table-scroll:after { left: auto; right: 0 }

/* ------------------------------------------------- translated copy runs longer
   The English hero was written to fit; other languages are not, so three things
   that are fixed-size in styles.css have to give on translated pages only. The
   English page keeps every rule in styles.css untouched. */

/* 1. Headline lines are nowrap blocks. "Des compétences onchain." cannot be, and
   when it is forced the grid column grows and squeezes the agent window beside
   it (which is what made the demo chips wrap three lines in French). */
html:not([lang="en"]) h1 span{white-space:normal}

/* 2. The sticker is positioned from the stage bottom, which assumes the chip row
   under the window is exactly one line tall. Put the sticker in the window's
   grid cell instead, so it hangs off the window's corner whatever the chips do.
   Offsets reproduce styles.css: right:-19/-10/-4/-3px and 4px below the window
   (8px on phones, where the stage gains 5px side padding and a taller chip row). */
html:not([lang="en"]) .agent-stage{display:grid;grid-template-columns:minmax(0,1fr)}
html:not([lang="en"]) .agent-window,
html:not([lang="en"]) .skill-sticker{grid-row:1;grid-column:1}
html:not([lang="en"]) .demo-controls{grid-row:2;grid-column:1}
html:not([lang="en"]) .skill-sticker{
  position:relative;right:auto;bottom:auto;left:auto;
  align-self:end;justify-self:end;z-index:2;
  transform:translate(19px,4px) rotate(3deg)
}
html:not([lang="en"])[dir="rtl"] .skill-sticker{transform:translate(-19px,4px) rotate(-3deg)}
@media(max-width:1150px){
  html:not([lang="en"]) .skill-sticker{transform:translate(10px,4px) rotate(3deg)}
  html:not([lang="en"])[dir="rtl"] .skill-sticker{transform:translate(-10px,4px) rotate(-3deg)}
}
@media(max-width:900px){
  html:not([lang="en"]) .skill-sticker{transform:translate(4px,4px) rotate(3deg)}
  html:not([lang="en"])[dir="rtl"] .skill-sticker{transform:translate(-4px,4px) rotate(-3deg)}
}
@media(max-width:700px){
  html:not([lang="en"]) .skill-sticker{transform:translate(8px,8px) rotate(3deg)}
  html:not([lang="en"])[dir="rtl"] .skill-sticker{transform:translate(-8px,8px) rotate(-3deg)}
}

/* 3. The header: a translated site name plus the language menu no longer fit
   beside the section links on a phone (Russian needs 476px of a 350px bar),
   Russian overruns a tablet bar by 19px, and between 700 and 800px the links
   broke mid-word. Tighten the tablet spacing, never wrap a link, retire the two
   secondary links a hundred pixels early, and on phones keep only the name, the
   language menu and GitHub; the sticky contents panel provides the section
   links there. */
@media(max-width:900px){
  html:not([lang="en"]) .topbar{gap:16px}
  html:not([lang="en"]) .topnav{gap:16px;font-size:12px}
  html:not([lang="en"]) .topnav>a{white-space:nowrap}
}
@media(max-width:800px){
  /* styles.css hides these two links below 700px for every language; a
     translated bar needs the room a hundred pixels sooner. */
  html:not([lang="en"]) .topnav .pricing-nav{display:none}
}
@media(max-width:700px){
  html:not([lang="en"]) .topnav{gap:12px}
  html:not([lang="en"]) .topnav>a:not(.github-link){display:none}
  html:not([lang="en"]) .brand{min-width:0}
  html:not([lang="en"]) .brand>span:first-of-type{overflow:hidden;text-overflow:ellipsis}
}