/* ============================================================================ PERSIAN (RTL) EDITION — loaded on every page, active only under . Grids and flex rows mirror by themselves; this file mirrors the explicit left/right offsets of app.css, swaps in a Persian typeface, and keeps English-only blocks (references, credits, formulas, the English report) left-to-right. ============================================================================ */ @font-face{font-family:"Vazirmatn";src:url("/vendor/fonts/Vazirmatn-wght.woff2") format("woff2");font-weight:100 900;font-display:swap} /* Latin keeps its own faces; Persian letters and digits fall through to Vazirmatn. No system aliases in these stacks: -apple-system / BlinkMacSystemFont would silently win over the webfont. */ html[lang="fa"]{ --f-ui:"Instrument Sans","Vazirmatn",Tahoma,sans-serif; --f-disp:"Fraunces","Vazirmatn",Georgia,serif; --f-mono:"JetBrains Mono","Vazirmatn",Consolas,monospace; } html[lang="fa"] body{font-size:15.5px;line-height:1.85} /* letter-spacing breaks the joining of Persian letters; uppercase has no meaning in Persian */ html[lang="fa"] *{letter-spacing:0!important} html[lang="fa"] .hero h1{font-weight:600;line-height:1.35;max-width:22ch} html[lang="fa"] .lhead h2,html[lang="fa"] .dhead h3{font-weight:600;line-height:1.35} html[lang="fa"] .brand b,html[lang="fa"] .verdict .big,html[lang="fa"] .home-card h3,html[lang="fa"] .tile b, html[lang="fa"] .group-head h3,html[lang="fa"] .pcard b,html[lang="fa"] .prose h4,html[lang="fa"] .mod-head h2, html[lang="fa"] .interp h4,html[lang="fa"] .view h4,html[lang="fa"] .algo h3,html[lang="fa"] .fm h4, html[lang="fa"] .ptile b,html[lang="fa"] .modal h3,html[lang="fa"] .sim-pat-btn b,html[lang="fa"] .sim-match b, html[lang="fa"] .sim-pt-head h4,html[lang="fa"] .sim-task-live b,html[lang="fa"] .det h4,html[lang="fa"] .domain header b, html[lang="fa"] .phenotype h4{font-weight:600;line-height:1.45} html[lang="fa"] .sec-intro .lead{line-height:1.8} html[lang="fa"] .stats b,html[lang="fa"] .gdoc .yr{font-weight:400} html[lang="fa"] .eyebrow,html[lang="fa"] legend,html[lang="fa"] .flow-lab,html[lang="fa"] .kpi span, html[lang="fa"] .prof span,html[lang="fa"] .callout b.t,html[lang="fa"] .blk h5,html[lang="fa"] table.t th{font-size:12.5px} html[lang="fa"] .steps>li b.v{font-family:var(--f-ui);font-size:12.5px} /* labels set in the monospace face: Persian letters fall back to Vazirmatn but the spaces stay monospace-wide, so the words drift apart — give them the interface face instead (numbers-only mono stays as it is) */ html[lang="fa"] .dhead .ix,html[lang="fa"] .pcard .ix,html[lang="fa"] .tile .n,html[lang="fa"] .notes .cls, html[lang="fa"] .node .st,html[lang="fa"] .tags span,html[lang="fa"] .pp-step,html[lang="fa"] .pp-read{font-family:var(--f-ui)} /* English-only blocks stay left-to-right */ html[dir="rtl"] .refs li,html[dir="rtl"] .refpop>div,html[dir="rtl"] .credit,html[dir="rtl"] .media-credits, html[dir="rtl"] .fm .eq,html[dir="rtl"] .report pre,html[dir="rtl"] .cine figcaption span, html[dir="rtl"] [data-ltr]{direction:ltr;text-align:left;unicode-bidi:isolate} html[dir="rtl"] .media-credits{padding-left:18px;padding-right:0} html[dir="rtl"] input[type="number"],html[dir="rtl"] input[type="email"],html[dir="rtl"] input[type="password"], html[dir="rtl"] .fi input,html[dir="rtl"] .patient input{direction:ltr;text-align:right} /* ---- mirrored offsets (line numbers refer to app.css) */ html[dir="rtl"] .brand{margin-right:0;margin-left:auto;text-align:right} html[dir="rtl"] .search input{padding:8px 34px 8px 12px} html[dir="rtl"] .search svg{left:auto;right:11px} html[dir="rtl"] .sres{right:auto;left:0} html[dir="rtl"] .sres button,html[dir="rtl"] .home-card,html[dir="rtl"] .tile,html[dir="rtl"] .pcard, html[dir="rtl"] table.t th,html[dir="rtl"] .prose td,html[dir="rtl"] .prose th,html[dir="rtl"] .blk td,html[dir="rtl"] .blk th, html[dir="rtl"] .find button,html[dir="rtl"] .studies button,html[dir="rtl"] .sim-pat-btn,html[dir="rtl"] .sim-pgroup button, html[dir="rtl"] .ptile,html[dir="rtl"] .rel button{text-align:right} html[dir="rtl"] .chip{padding:2px 7px 2px 9px} html[dir="rtl"] .dv{border-right:0;border-left:1px solid var(--line-2);margin:0 0 -1px -1px} html[dir="rtl"] .dv b small{margin-left:0;margin-right:3px} html[dir="rtl"] .sec-intro ul,html[dir="rtl"] .prose ul,html[dir="rtl"] .prose ol,html[dir="rtl"] .blk ul, html[dir="rtl"] .sim-phone-grid ol{padding-left:0;padding-right:20px} html[dir="rtl"] .dside{border-left:0;border-right:1px solid var(--line-2)} @media (max-width:1050px){html[dir="rtl"] .dside{border-right:0}} html[dir="rtl"] .steps>li{padding:12px 52px 12px 14px} html[dir="rtl"] .steps>li::before{left:auto;right:14px} html[lang="fa"] .steps>li::before{content:counter(s,persian)} html[dir="rtl"] .pact{margin-left:0;margin-right:auto} html[dir="rtl"] .fi{padding-right:0;padding-left:8px} html[dir="rtl"] .fi.sel{padding-left:0} html[dir="rtl"] .fs .info-btn{margin-left:0;margin-right:auto} html[dir="rtl"] .results{padding:14px 0 22px 22px} html[dir="rtl"] .pv-legend i{margin-right:0;margin-left:5px} html[dir="rtl"] .domain header .pill{margin-left:0;margin-right:auto} html[dir="rtl"] .det .row b{text-align:left} html[dir="rtl"] .ref-tag{margin-left:0;margin-right:6px} html[dir="rtl"] .sim-ctl{border-left:0;border-right:1px solid var(--line-2)} html[dir="rtl"] .sim-pat-menu{left:auto;right:0} html[dir="rtl"] .sim-match{margin-left:0;margin-right:auto;padding:6px 6px 6px 14px} html[dir="rtl"] .sim-pad{left:auto;right:12px} html[dir="rtl"] .ptile{padding:15px 20px 15px 16px} html[dir="rtl"] .ptile::before{left:auto;right:0} html[dir="rtl"] .dhead .ix .chip{margin-left:0;margin-right:8px} html[dir="rtl"] .sim-phone-x{right:auto;left:12px} html[dir="rtl"] .pp-sub{margin-right:0;margin-left:auto} /* LTR islands inside Persian prose (formulas, thresholds, abbreviations with numbers) */ html[dir="rtl"] .ltr{direction:ltr;unicode-bidi:isolate} html[dir="rtl"] .ltr.nw{white-space:nowrap} /* ---- language switch in the header */ .langbtn{font:600 13px var(--f-ui);min-width:40px;padding:0 10px;width:auto} /* charts keep their own geometry: SVG text anchors must not flip with the page direction */ html[dir="rtl"] svg{direction:ltr} html[lang="fa"] .chip{white-space:normal;text-align:center;line-height:1.35}