/* Roadyom on the phone (ADR-0153). Every Roadyom interface takes this file, after its own styles. A governing file:
   change a rule here, never in an app. Born from Connect's audit at 390px (owner 2026-11-14: «واجهة كونكت عالموبايل
   تعيسة… كل التطبيقات فيها نفس المشكلة»): pages wider than the screen, headers spilling out, tabs breaking on two lines,
   small tap targets, inputs that make iOS zoom.
   The rules, in order of what users feel first:
   1. Nothing is wider than the screen.
   2. One line of header; what is used less goes behind ⋯ (.ry-more + .ry-hmenu).
   3. Rows of tabs or chips scroll sideways and never wrap (.ry-scroll-x, [role=tablist]).
   4. Every control is at least 44px tall (Apple HIG); the one main action is full width.
   5. Text inputs are 16px, so iOS never zooms in.
   6. Fixed bars respect the home indicator (safe-area). */
html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img, video, canvas, iframe { max-width: 100%; height: auto; }
.ry-more { display: none; width: 40px; height: 40px; padding: 0; border-radius: 50%; align-items: center; justify-content: center; gap: 3px; }
.ry-more i { display: block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.ry-scroll-x, [role=tablist] { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.ry-scroll-x::-webkit-scrollbar, [role=tablist]::-webkit-scrollbar { display: none; }
.ry-scroll-x > *, [role=tablist] > * { flex: none; white-space: nowrap; scroll-snap-align: start; }
.ry-safe-bottom { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
@media (max-width: 760px) {
  body { overflow-wrap: break-word; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px; max-width: 100%; }
  button, select, [role=button], input[type=text], input[type=email], input[type=search], input[type=password], input[type=tel], input[type=date], input[type=datetime-local] { min-height: 44px; }
  .ry-more { display: inline-flex; }
  .ry-hmenu { display: none; position: absolute; top: calc(100% + 6px); inset-inline-end: 12px; z-index: 20; flex-direction: column; align-items: stretch; gap: 6px; padding: 10px; min-width: 210px;
    background: rgba(255,255,255,.94); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid rgba(21,23,25,.08); border-radius: 18px; box-shadow: 0 24px 60px -24px rgba(21,23,25,.35); }
  .ry-hmenu.open { display: flex; }
  .ry-main-action { width: 100%; order: -1; }
  table { display: block; max-width: 100%; overflow-x: auto; }
  pre, code { white-space: pre-wrap; }
}