/* ==========================================================================
   DoctorMo.ai — Arabic / RTL layer
   Loaded only when the page is in Arabic. Everything here either mirrors a
   direction or swaps the typeface; nothing changes the design language.
   ========================================================================== */

html[dir="rtl"] body{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;                 /* Arabic must never be letter-spaced */
}
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] .brand,
html[dir="rtl"] .ep h4,
html[dir="rtl"] .chamber h4,
html[dir="rtl"] .pick b,
html[dir="rtl"] .book-quote{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  font-weight:600;                  /* Bricolage has no Arabic; Plex carries it */
  letter-spacing:0;
  line-height:1.35;                 /* Arabic needs more room for diacritics */
}
html[dir="rtl"] .stat b,
html[dir="rtl"] .res .big,
html[dir="rtl"] .score-num{letter-spacing:0}

/* the brand mark stays Latin and stays left-to-right */
html[dir="rtl"] .brand span{direction:ltr;unicode-bidi:isolate}

/* mono labels: keep Latin metrics for codes and IDs, relax for Arabic words */
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .foot-col h5,
html[dir="rtl"] .app-meta,
html[dir="rtl"] .escape-meta,
html[dir="rtl"] .cert-label,
html[dir="rtl"] .tier,
html[dir="rtl"] .gt-legend,
html[dir="rtl"] .field label{
  font-family:'IBM Plex Sans Arabic','IBM Plex Mono',monospace;
  letter-spacing:.02em;
}

/* --- mirrored decorations --- */
html[dir="rtl"] .eyebrow::before{order:-1}
html[dir="rtl"] h1 em::after{left:0;right:0}
html[dir="rtl"] .card.crit,html[dir="rtl"] .card.high,
html[dir="rtl"] .card.medium,html[dir="rtl"] .card.low{
  border-left:1px solid var(--line);
}
html[dir="rtl"] .card.crit{border-right:3px solid var(--crit)}
html[dir="rtl"] .card.high{border-right:3px solid var(--coral)}
html[dir="rtl"] .card.medium{border-right:3px solid var(--amber)}
html[dir="rtl"] .card.low{border-right:3px solid var(--jade)}
html[dir="rtl"] .tool{border-left:1px solid var(--line)}
html[dir="rtl"] .threat{border-left:0;border-right:2px solid var(--line);
  padding:2px 14px 2px 0}
html[dir="rtl"] .threat.critical{border-right-color:var(--crit)}
html[dir="rtl"] .threat.high{border-right-color:var(--coral)}
html[dir="rtl"] .threat.medium{border-right-color:var(--amber)}
html[dir="rtl"] .threat.low{border-right-color:var(--jade)}
html[dir="rtl"] .disclosure{border-left:0;border-right:2px solid var(--amber);
  border-radius:10px 0 0 10px}
html[dir="rtl"] .gt-missing,html[dir="rtl"] .err{text-align:right}

/* arrows point the other way */
html[dir="rtl"] .tool-link .arw{transform:scaleX(-1)}
html[dir="rtl"] .tool:hover .arw{transform:scaleX(-1) translateX(4px)}
html[dir="rtl"] .back{flex-direction:row-reverse}

/* select chevron moves to the left edge */
html[dir="rtl"] .field select{
  background-position:left 13px center;padding-right:14px;padding-left:34px;
}
html[dir="rtl"] .ep:hover{padding-left:6px;padding-right:14px}

/* numbers, codes and Latin product names stay LTR inside Arabic text */
html[dir="rtl"] .cert-id,
html[dir="rtl"] .chamber-n,
html[dir="rtl"] .msg-from,
html[dir="rtl"] .ep-n,
html[dir="rtl"] .ep-len,
html[dir="rtl"] .foot-col a[href^="mailto"],
html[dir="rtl"] code,
html[dir="rtl"] .flag[data-ltr]{direction:ltr;unicode-bidi:embed;display:inline-block}

/* the phishing sample is a real English email — keep it English and LTR */
html[dir="rtl"] .msg{direction:ltr;text-align:left}
html[dir="rtl"] .hint{direction:rtl;text-align:right}

/* --- KidShield card fixes --- */
/* chips and meta lines were inheriting IBM Plex Mono, which has no Arabic and
   was rendering the letters disconnected and spaced out */
html[dir="rtl"] .chip,
html[dir="rtl"] .risk,
html[dir="rtl"] .meta,
html[dir="rtl"] .threat-h em,
html[dir="rtl"] .detail h4,
html[dir="rtl"] .count,
html[dir="rtl"] .dataset-stamp{
  font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif;
  letter-spacing:0;
}
html[dir="rtl"] .chip{font-size:12px;padding:5px 10px}
html[dir="rtl"] .risk{font-size:11.5px;letter-spacing:0}
html[dir="rtl"] .detail h4{letter-spacing:.04em}

/* the rating and platform line is Latin data - keep it left-to-right so
   "E10+ · Ages 8+" does not get reordered */
html[dir="rtl"] .card-title .meta{direction:ltr;text-align:right;unicode-bidi:isolate}

/* any entry still in English carries dir="ltr" from the script; make sure it
   aligns and punctuates as English rather than inheriting the Arabic side */
html[dir="rtl"] [dir="ltr"]{text-align:left}
html[dir="rtl"] .verdict [dir="ltr"]{display:block}

/* score reads left-to-right: 70/100, not 100/70 */
html[dir="rtl"] .score-row{direction:ltr}
html[dir="rtl"] .score-num{direction:ltr}

/* the toggle needs no mirroring; its styles live in site.css so BOTH
   languages get them. Only the Arabic label's typeface is set here. */
html[dir="rtl"] .lang-btn{font-family:'IBM Plex Sans Arabic','IBM Plex Sans',sans-serif}