/* NNEXORIS — phone layer for every page (an addition after mobile.css).
   Only active at phone and small tablet widths; desktop layouts are not touched.
   Active with html.nxs-plus (on for everyone; ?nxs_plus=0 turns it off per browser). responsive-guard.js handles what CSS cannot know: elements actually wider than the screen. */

@media (max-width: 800px) {
  html.nxs-plus :is(.content, .nxs-standalone) { min-width: 0; }
  html.nxs-plus :is(.content, .nxs-standalone) :where(img, svg:not(.icon-sprite), canvas, video, iframe) { max-width: 100%; }
  html.nxs-plus :is(.content, .nxs-standalone) :where(img, video) { height: auto; }
  html.nxs-plus :is(.content, .nxs-standalone) :where(pre, code, kbd) { white-space: pre-wrap; overflow-wrap: anywhere; }
  /* Wide tables scroll inside their own box instead of widening the page. */
  html.nxs-plus :is(.content, .nxs-standalone) table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html.nxs-plus :is(.content, .nxs-standalone) table :where(th, td) { white-space: nowrap; }
  /* Dialogs and pop-ups fit the screen. */
  html.nxs-plus :where(dialog, .modal, .modal-dialog, .dialog, [role="dialog"]) {
    max-width: calc(100vw - 16px) !important; max-height: calc(100dvh - 16px); overflow: auto;
  }
}

@media (max-width: 640px) {
  html.nxs-plus :is(.content, .nxs-standalone) { overflow-wrap: break-word; }
  /* Pages without the main layout: their main blocks never exceed the screen. */
  html.nxs-plus body.nxs-standalone { padding-inline: 10px !important; }
  html.nxs-plus body.nxs-standalone > :is(main, section, form, div, header, footer) {
    max-width: calc(100vw - 20px) !important; box-sizing: border-box;
  }
  /* 16px inputs: iOS does not zoom into the field. */
  html.nxs-plus :is(.content, .nxs-standalone) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea) {
    max-width: 100%; font-size: 16px;
  }
  html.nxs-plus :is(.content, .nxs-standalone) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([size]), select, textarea) {
    min-width: 0;
  }
  /* Comfortable touch targets. */
  html.nxs-plus :is(.content, .nxs-standalone) :where(button, .button, .btn, a.button, [role="button"], select) { min-height: 40px; }
  /* Long names, codes and links never push the layout wider. */
  html.nxs-plus :is(.content, .nxs-standalone) :where(h1, h2, h3, p, li, dd, dt, label, small, strong, b, span, a) { overflow-wrap: anywhere; }
  html.nxs-plus :is(.content, .nxs-standalone) :where(h1) { font-size: clamp(20px, 6vw, 26px); }
  html.nxs-plus :is(.content, .nxs-standalone) :where(h2) { font-size: clamp(17px, 5vw, 22px); }
}

/* Arabic/English button on pages without the main layout's language menu. */
html.nxs-plus .nxs-lang-toggle {
  position: fixed; z-index: 9999; inset-block-start: calc(12px + env(safe-area-inset-top));
  inset-inline-end: 12px; min-height: 36px; padding: 0 14px; border-radius: 999px;
  border: 1px solid rgba(127, 127, 127, .35); background: rgba(15, 23, 42, .78); color: #fff;
  font: 600 13px/1 system-ui, "Readex Pro", sans-serif; cursor: pointer; backdrop-filter: blur(6px);
}
html.nxs-plus .nxs-lang-toggle:focus-visible { outline: 2px solid #5b8def; outline-offset: 2px; }
@media print { html.nxs-plus .nxs-lang-toggle { display: none; } }

/* While a non-Arabic dictionary loads (first visit only), the page waits up to 1.5 s
   instead of showing Arabic and then switching. The <head> script lifts it after 1.5 s anyway. */
html.nxs-i18n-pending body { opacity: 0; }