/* Arabic pages only: added by scripts/i18n.mjs after the mirrored stylesheets.
   Tajawal (SIL Open Font License, fonts/Tajawal-OFL.txt) draws Arabic letters inside the
   'Neue Montreal' family, so every existing font-family rule, including canvas text, uses it
   for Arabic while Latin words, codes and digits stay in Neue Montreal. */
/* Each face repeats the weight descriptors of its Neue Montreal face exactly (styles.css), so the two
   form one composite font: with different descriptors the browser picks one face per weight and sends
   characters it lacks (Latin, digits) to the fallback fonts instead of Neue Montreal. */
@font-face{font-family:'Neue Montreal';src:url('fonts/Tajawal-Arabic-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Neue Montreal';src:url('fonts/Tajawal-Arabic-300.woff2') format('woff2');font-weight:300;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}
@font-face{font-family:'Neue Montreal';src:url('fonts/Tajawal-Arabic-500.woff2') format('woff2');font-weight:500 700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF}

/* Arabic is a joined script: letter spacing breaks the joins, and it has no italics. */
html[lang="ar"] *,html[lang="ar"] *::before,html[lang="ar"] *::after{letter-spacing:0!important}
html[lang="ar"]{font-synthesis:none}
html[lang="ar"] em,html[lang="ar"] i{font-style:normal}

/* Arrows point the way the text reads. Only the drawing inside the icon is flipped, so hover
   nudges and other motion on the icon itself still follow the mirrored stylesheets. The build marks
   arrow icons, inline or from a sprite, with data-rtl-flip. */
html[dir="rtl"] [data-rtl-flip]>*{transform:scaleX(-1);transform-box:view-box;transform-origin:center}

/* Drawings made in left-to-right coordinates that the mirrored stylesheets move but cannot flip. */
html[dir="rtl"] .ev-conn{scale:-1 1}
html[dir="rtl"] :is(.cp-threads,.scribe-connector,.wa-links,.wa-branch-lines,.ea-pipes)>*{transform:scaleX(-1);transform-box:view-box;transform-origin:center}
/* Labels inside SVG illustrations keep the anchors they were drawn with (text-anchor and x follow
   the direction property), so the leader lines still meet them. */
html[dir="rtl"] svg text{direction:ltr}

/* Workflows hero: Arabic rows are wider than the English, and the toolbar beside them is short,
   so on desktop each row stays on one line and runs into the free space under the toolbar. */
@media (min-width:1024px){html[lang="ar"] .wa-h1 .wa-l{white-space:nowrap}}

/* Scribe demo composer: the Arabic recording label is about twice as wide as "Transcribing", so on
   phones the pill takes its own row and the plus button, waveform and microphone sit below it. */
@media (max-width:560px){
  html[lang="ar"] :has(>.sc-rec){flex-wrap:wrap;row-gap:12px}
  html[lang="ar"] .sc-rec{order:-1;flex:1 1 100%!important;box-sizing:border-box}
  html[lang="ar"] .sc-rec~.wv{flex-basis:0;min-width:0}
}

/* Scribe hero: Tajawal sets the heading about a quarter wider than Neue Montreal, and on wide screens
   the transcript sits beside it, so the Arabic heading is scaled to the English line length. */
@media (min-width:1440px){html[lang="ar"] .scribe-title{font-size:90px}}
@media (min-width:1200px) and (max-width:1439px){html[lang="ar"] .scribe-title{font-size:5.5vw}}
/* On phones it is sized from the screen width so each row stays on one line. */
@media (max-width:767px){html[lang="ar"] .scribe-title{font-size:min(60px,calc((100vw - 48px) / 9.4))}}