/* Arabic: right-to-left layout. Loaded only when <html dir="rtl"> (layout.php). Puzzle figures, number grids and charts
   keep reading left to right, as their explanations say ("from left to right", "clockwise"). */
:root { --font: 'Cairo', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif; --font-h: 'Cairo', 'Fraunces', Georgia, serif; }
body { letter-spacing: 0; }
h1, h2, h3, .h2, .h3 { letter-spacing: 0; line-height: 1.4; }
h1 { line-height: 1.3; }
.eyebrow, .ls-k, .kp-tag, .plan-tag, .fam-save, .vtag { letter-spacing: 0; text-transform: none; }

/* hidden helpers sit off-screen on the right (off-screen on the left would widen a right-to-left page) */
.skip { left: auto; right: -999px; }
.skip:focus { left: auto; right: 8px; }
.hp { left: auto; right: -5000px; }
html { overflow-x: clip; }

/* header and menus */
.head-row .logo { margin-right: 0; margin-left: auto; }
.logo-text { direction: ltr; }
.nav .btn { margin-left: 0; margin-right: 8px; }
.lang-menu { margin-left: 0; margin-right: 6px; }
.lang-list { right: auto; left: 0; }
@media (min-width: 1241px) and (max-width: 1420px) { .nav .btn { margin-left: 0; margin-right: 4px; } }

/* lists with a tick or bullet on the left -> on the right */
.ticks li { padding-left: 0; padding-right: 30px; }
.ticks li::before { left: auto; right: 0; }
.prose ul, .prose ol, .article ul, .article ol, .sheet-answers ol, .kid-tests { padding-left: 0; padding-right: 1.3em; }

/* arrows point the other way */
svg.ic:has(path[d="M5 12h14M13 6l6 6-6 6"]) { transform: scaleX(-1); }

/* answers and cards */
.opt { text-align: right; }
.opt-fig .opt-l { left: auto; right: 4px; }
#kp-stars { margin-left: 0; margin-right: auto; }
.kp-fb { text-align: right; }

/* things that always read left to right */
.fig-matrix, .fig-series, .fig-target, .opts-fig, .rv-fig, .rv-opts.rv-fig, .num-grid, .vgrid, .sheet-fig, .sheet-optfig, .room, .bell, .kid-bars, .eg-code, .flash-txt, .rcard-score, .ch-score b, .plan-price b, .price-n { direction: ltr; }
.opts-fig { justify-content: center; }
/* codes and memory rows: each line takes the direction of its own text (an Arabic cipher reads right to left, digits left to right) */
.eg-code, .flash-txt { unicode-bidi: plaintext; text-align: center; }
.eg-code { text-align: start; }
/* the last 14 days read right to left in Arabic: today is the bar on the left (kids-corner.php says so) */
.kid-bars { direction: rtl; }
.answer-input, .eg-form input[name=answer] { unicode-bidi: plaintext; }
input[type=email], input[type=password], input[type=url], input[name=code], .copy-row input { direction: ltr; text-align: left; }

/* Arabic review (28 Oct): rules of style.css that still pointed left */
/* test cards: the lock / "unlocked" badge goes to the corner opposite the icon (it covered the icon) */
.tcard-badge { right: auto; left: 16px; }
/* tables and text boxes start on the right; score ranges ("130+", "120-129") keep reading left to right */
.scale-table th, .scale-table td, .adm-table th, .adm-table td, .compare td:first-child, .compare th:first-child,
.name-form, .an-steps, .eg-exp, .eg-teaser .board { text-align: right; }
.scale-table td:first-child { direction: ltr; }
.an-steps li { padding-left: 0; padding-right: 28px; }
.an-steps li::before { left: auto; right: 0; }
/* answer review: coloured stripe on the reading side, verdict and "your answer" pushed to the far end */
.rv { border-left: 1px solid var(--line); border-right: 5px solid var(--ok); }
.rv-bad { border-left-color: var(--line); border-right-color: var(--bad); }
.rv-fig .rv-o .opt-l { left: auto; right: 4px; }
.rv-s, .rv-o em, .rr-score, .run-count { margin-left: 0; margin-right: auto; }
/* small gaps and end-aligned values */
.room-key i { margin-right: 0; margin-left: 4px; }
.bar-n em, .b-p em { margin-left: 0; margin-right: 4px; }
.bar-v, .b-v { text-align: left; }
.eg-hints p { border-left: 0; border-right: 4px solid var(--gold); }
/* answer choices drawn as figures: the figures stay as drawn, but the row of choices starts on the right
   like every other list of choices, so أ is the first box on the right (was أ on the left, د on the right) */
.opts-fig, .rv-opts.rv-fig { direction: rtl; }