/* Hebrew (lang=he) and right-to-left layout for the signed-in app.
   Most layout is already direction-agnostic (logical properties in app.css / components.css: margin-inline-*,
   padding-inline-*, inset-inline-*, text-align: start|end). This file holds what logical properties can't express:
   fonts, mirrored transforms and asymmetric radii, and LTR islands (codes, emails, phones, URLs, keyboard hints). */

/* ---------- Hebrew fonts (Fontsource on jsDelivr, loaded by js/i18n.js only when lang=he) ---------- */
:root[lang="he"] {
  --font-ui: "Heebo Variable", "Heebo", "Assistant", "Rubik", "Inter Variable", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-display: "Frank Ruhl Libre Variable", "Frank Ruhl Libre", "Noto Serif Hebrew", "Fraunces Variable", Georgia, serif;
}
/* Hebrew has no case and reads poorly with negative tracking or slanted type */
:root[lang="he"] :is(h1, h2, h3, h4, .display, .page-hd h1, .hello, .p-hero h1, .tidy-hd h1, .tidy-done h2, .rs-person h2,
  .trip-sum h2, .welcome-card h2, .overlap .big, .stat .v, .clean-num .v, .tc-big b, .org-stats b, .ws-price, .cx-stats b) { letter-spacing: 0; }
:root[lang="he"] .hello em, :root[lang="he"] .focus-or, :root[lang="he"] .focus-and { font-style: normal; }
:root[lang="he"] .brand .wordmark { font-family: "Fraunces Variable", Fraunces, Georgia, serif; } /* the brand stays Latin */
:root[lang="he"] body { line-height: 1.55; }
:root[lang="he"] :is(.label, .nav-sec, .cmdk-group, .eyebrow) { letter-spacing: 0; text-transform: none; }

/* ---------- Mirrored icons and shapes ---------- */
[dir="rtl"] svg.flip-rtl { transform: scaleX(-1); }
[dir="rtl"] .switch input:checked + span::after { transform: translateX(-16px); }
[dir="rtl"] .nav a.active::before { border-radius: 3px 0 0 3px; }
[dir="rtl"] .bar-li .bar, [dir="rtl"] .bar-li .bar i { border-radius: 4px 0 0 4px; }
[dir="rtl"] .ramp .r i:first-child { border-radius: 0 4px 4px 0; }
[dir="rtl"] .ramp .r i:last-child { border-radius: 4px 0 0 4px; }
[dir="rtl"] .old-emails > summary::before { transform: rotate(135deg); }
[dir="rtl"] .old-emails[open] > summary::before { transform: rotate(45deg); }
[data-tip-pos="right"]:hover::after { transform: translateY(-50%); }

/* Side panels slide in from the inline end (left in RTL) */
[dir="rtl"] .drawer:not(.open), [dir="rtl"] .sphere-rc:not(.open) { transform: translateX(calc(-100% - 24px)); }
@media (max-width: 860px) {
  [dir="rtl"] .drawer:not(.open), [dir="rtl"] .sphere-rc:not(.open), [dir="rtl"] .sphere-rail:not(.open) { transform: translateY(105%); }
}

/* ---------- LTR islands inside right-to-left text ---------- */
[dir="rtl"] :is(kbd, code, pre, .mono, .codeblock, .ct-val, .num-ltr) { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .codeblock pre { text-align: left; }
[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], input[inputmode="tel"], input[inputmode="email"], input[inputmode="numeric"], input.ltr) { direction: ltr; text-align: right; }
[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], input.ltr)::placeholder { direction: rtl; }
[dir="rtl"] bdi, [dir="rtl"] .bdi { unicode-bidi: isolate; }

/* Numbers next to Hebrew words keep their own order (e.g. "1,240 אנשים") */
[dir="rtl"] .num, [dir="rtl"] .tabnum { unicode-bidi: isolate; }

/* Selects: the native arrow sits at the inline end; keep room for it on the left */
[dir="rtl"] .select { background-position: left 12px center; }
[dir="rtl"] .select-sm { background-position: left 9px center; }

/* fork A */
/* dir="auto" on names/titles/notes isolates their direction; an English value would otherwise align left inside a
   right-to-left row. Low specificity (:where) so explicit centering (.rate-card h4 etc.) still wins. */
:where([dir="rtl"]) :where([dir="auto"]):not(input, textarea, select) { text-align: right; }

/* fork B: a select inside an LTR island (phone row: country code + number) keeps its arrow on the right */
[dir="rtl"] [dir="ltr"] .select { background-position: right 12px center; }
[dir="rtl"] [dir="ltr"] .select-sm { background-position: right 9px center; }