/* Shared styles (docs/plan/design.md). Almost everything is Tailwind classes; this file only
   holds what classes can't express: fonts per language, focus, and a few browser details. */

html[lang="en"] body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.55; }
html[lang="ar"] body { font-family: "Tajawal", "Inter", system-ui, sans-serif; font-size: 16px; line-height: 1.7; }

/* One visible focus style everywhere, in the brand's readable colour */
:focus-visible { outline: 2px solid var(--brand-ring); outline-offset: 2px; border-radius: 0.5rem; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* Help tips use <details>: no default triangle */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

dialog::backdrop { background: rgba(16, 24, 40, 0.4); backdrop-filter: blur(2px); }

/* Phone numbers, emails, links, and codes stay left-to-right inside Arabic text */
.ltr-value { direction: ltr; unicode-bidi: isolate; }

/* The bottom bar leaves room for the phone's home indicator */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }