/* Arabic layer. Loaded only by ar.html, after styles.css.
   It changes nothing about the design: it supplies an Arabic typeface, gives Arabic
   the line height it needs, and mirrors the few rules that were written left-to-right. */
@font-face{font-family:"Noto Kufi Arabic";src:url("fonts/noto-kufi-arabic-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

html[dir="rtl"] body{font-family:"Noto Kufi Arabic","Archivo",Tahoma,sans-serif;line-height:1.85}
html[dir="rtl"] .phone{font-family:"Noto Kufi Arabic","Archivo",Tahoma,sans-serif}
html[dir="rtl"] .ph-google{font-family:"Noto Kufi Arabic",Tahoma,Arial,sans-serif}

/* Arabic letters join, so tracking is off; its ascenders and marks need taller lines */
html[dir="rtl"] *{letter-spacing:0!important}
html[dir="rtl"] .reveal,html[dir="rtl"] .press p{font-style:normal}
html[dir="rtl"] .gate-line{font-size:clamp(52px,12.5vw,230px);line-height:1.2;margin-left:0}
html[dir="rtl"] .gate-line.is-done{font-size:clamp(34px,6.4vw,118px);line-height:1.3}
html[dir="rtl"] .who-name{line-height:1.15;margin-left:0}
html[dir="rtl"] .guess-q{line-height:1.4}
html[dir="rtl"] .guess-out,html[dir="rtl"] .calc-field output{line-height:1.3}
html[dir="rtl"] .guess-truth{font-size:clamp(44px,9vw,170px);line-height:1.2;margin-left:0}
html[dir="rtl"] .leak-num{font-size:clamp(48px,10.5vw,200px);line-height:1.2;margin-left:0}
html[dir="rtl"] .leak-lead,html[dir="rtl"] .who-count{line-height:1.6}
html[dir="rtl"] .check-title,html[dir="rtl"] .channels-title,html[dir="rtl"] .matrix-title,html[dir="rtl"] .log-title,html[dir="rtl"] .debrief-title{line-height:1.3}
html[dir="rtl"] .decoy-title,html[dir="rtl"] .certs-title{line-height:1.25;font-size:clamp(38px,6.4vw,118px)}
html[dir="rtl"] .verdict,html[dir="rtl"] .finale{line-height:1.45}
html[dir="rtl"] .gift-title,html[dir="rtl"] .plan h3,html[dir="rtl"] .deeper h3,html[dir="rtl"] .asks h3{line-height:1.35}
html[dir="rtl"] .win-num,html[dir="rtl"] .stats dd,html[dir="rtl"] .plan-steps .days,html[dir="rtl"] .track .yr{line-height:1.3}
html[dir="rtl"] .win-num{font-size:clamp(24px,2.3vw,40px);white-space:normal;text-align:right}
html[dir="rtl"] .lead-num{line-height:1.1}
html[dir="rtl"] .ph-head{line-height:1.3;font-size:clamp(22px,1.9vw,30px)}
html[dir="rtl"] .ph-sub{line-height:1.5}
html[dir="rtl"] .quiz p,html[dir="rtl"] .fold summary b{line-height:1.6}
html[dir="rtl"] .seal-issuer{line-height:1.25}
html[dir="rtl"] .bottle .ml{line-height:1.3}
html[dir="rtl"] .short{line-height:1.8}
html[dir="rtl"] .short h2{line-height:1.3}

/* mirrored rules */
html[dir="rtl"] .reveal{border-left:0;border-right:3px solid var(--you);padding-left:0;padding-right:18px}
html[dir="rtl"] .ad-side .ad-why{border-left:0;border-right:3px solid var(--you);padding-left:0;padding-right:16px}
html[dir="rtl"] .ladder-list li{margin-left:0;margin-right:calc(var(--i) * clamp(8px,2.4vw,34px));border-left:0;border-right:3px solid var(--you)}
html[dir="rtl"] .asks .fold p{padding-left:0;padding-right:50px}
html[dir="rtl"] .bar-exp{margin-left:0;margin-right:14px}
html[dir="rtl"] .wins li{padding:22px 0 6px clamp(14px,1.8vw,28px)}
html[dir="rtl"] .wins li + li{padding-left:clamp(14px,1.8vw,28px);padding-right:clamp(14px,1.8vw,28px);border-left:0;border-right:1.5px solid var(--line)}
html[dir="rtl"] .ticker{left:auto;right:var(--gutter);unicode-bidi:plaintext}
html[dir="rtl"] .aside{right:auto;left:var(--gutter)}
html[dir="rtl"] .dots{right:auto;left:18px;justify-items:end}
html[dir="rtl"] .skip{left:auto;right:-999px}
html[dir="rtl"] .skip:focus{left:auto;right:8px}
html[dir="rtl"] .row button,html[dir="rtl"] .gate-mode .linkish,html[dir="rtl"] .gate-resume .linkish{text-align:right}
html[dir="rtl"] .short ul{padding-left:0;padding-right:1.2em}
html[dir="rtl"] .short-roles{padding-right:0!important}
html[dir="rtl"] .short-roles b{min-width:8.6em}
html[dir="rtl"] .paint-off{right:auto;left:var(--gutter)}
html[dir="rtl"] .tile .first{left:auto;right:0}
html[dir="rtl"] .ph-rail{right:auto;left:10px}
html[dir="rtl"] .track{scroll-padding-left:0;scroll-padding-right:var(--gutter)}
html[dir="rtl"] .pair .from{margin-right:0;margin-left:.5em}
html[dir="rtl"] .debug-log li span:nth-child(2){direction:ltr;text-align:right}
/* Latin brand names keep their own reading direction, so a trailing full stop stays at the end */
html[dir="rtl"] .cafe{direction:ltr}
html[dir="rtl"] .ph-top span{unicode-bidi:plaintext;text-align:right}
html[dir="rtl"] .g-url,html[dir="rtl"] .ph-cta span:not(.ph-swipe){unicode-bidi:plaintext}

@media (max-width:1023px){
  html[dir="rtl"] .wins li:nth-child(3){padding-right:0;border-right:0}
}
@media (max-width:767px){
  html[dir="rtl"] .wins li,html[dir="rtl"] .wins li + li{padding-right:0;padding-left:0;border-right:0}
  html[dir="rtl"] .seal,html[dir="rtl"] .seal:nth-child(even){text-align:right}
  html[dir="rtl"] .bar-exp{margin-right:8px}
  html[dir="rtl"] .bar{font-size:12.5px;padding-left:14px;padding-right:14px}
  html[dir="rtl"] .bar *{white-space:nowrap}
  html[dir="rtl"] .bar-links{gap:10px}
  html[dir="rtl"] .bar-short{font-size:12px}
  /* when the faster channel appears there is no room for both on a phone */
  html[dir="rtl"] .bar-wa:not([hidden]) ~ .bar-mail{display:none}
}