/* Gematrixx V31 — final mobile table safety layer, 2026-08-11
   Loaded last. It does not redesign feature tables; it only guarantees that
   a real table stays inside the phone width and scrolls locally when needed. */

@media (max-width: 820px) {
  /* Local scroller created/confirmed by mobile-tables-final-v30.js. */
  .gmx30-table-scroll {
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
    scroll-behavior:smooth;
    scrollbar-width:thin;
    scrollbar-color:var(--gold-dim,var(--gold,#c9a84c)) transparent;
  }

  .gmx30-table-scroll::-webkit-scrollbar{height:7px}
  .gmx30-table-scroll::-webkit-scrollbar-track{background:transparent}
  .gmx30-table-scroll::-webkit-scrollbar-thumb{
    background:var(--gold-dim,var(--gold,#c9a84c));
    border-radius:999px;
  }

  /* Never allow the table itself to be the element that widens the page. */
  .gmx30-table-scroll > table.gmx30-mobile-table {
    max-width:none!important;
    table-layout:auto;
  }

  /* Dense tables keep useful cell width instead of breaking words letter by letter. */
  .gmx30-table-scroll > table.gmx30-mobile-table.gmx30-wide-table {
    width:100%!important;
    min-width:var(--gmx30-table-min,620px)!important;
  }

  .gmx30-table-scroll > table.gmx30-mobile-table :where(th,td) {
    word-break:normal!important;
    overflow-wrap:normal!important;
    hyphens:none!important;
  }

  /* Existing record/card conversions should remain cards, not become scrollers. */
  .gmx30-table-scroll.gmx-card-wrap,
  .gmx30-table-scroll.gmx74-card-wrap {
    overflow-x:visible!important;
  }

  /* Matrix-like tools already preserve geometry; make their existing host reliably touch-scrollable. */
  :where(
    #pageQuran .qoc-matrix-wrap,
    #pageQuran .mq2-heat-wrap,
    #pageQuran .mq2-table-wrap,
    #pagePeriodic .pt-grid-wrap,
    #pageBirthcard .bc109-table-wrap,
    #pageDateMatrix [class*="table-wrap"],
    #pageTreeOfLife .tol81-table-wrap
  ) {
    max-width:100%!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }

  /* Page itself never becomes the horizontal scroller; the table host does. */
  .page-view.active {
    max-width:100%!important;
    min-width:0!important;
  }
}

/* V31 — Moon phases: Full Moon Names is a semantic 3-column table whose
   translated names need a readable fixed lower bound on phones. Keep scrolling
   on the wrapper, never on the table element itself. */
@media (max-width: 820px) {
  #pageMoon .moon-fullnames-scroll {
    display:block!important;
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-inline:contain;
    touch-action:pan-x pan-y;
  }
  #pageMoon .moon-fullnames-scroll > table {
    width:100%!important;
    min-width:560px!important;
    max-width:none!important;
    table-layout:auto!important;
    overflow:visible!important;
  }
  #pageMoon .moon-fullnames-scroll > table :where(th,td) {
    white-space:nowrap!important;
    word-break:normal!important;
    overflow-wrap:normal!important;
  }
}


/* V32 — Moon phases mobile-only compact Full Moon Names layout.
   Desktop keeps the original 3 columns. On phones, English moves below Arabic
   in the same name cell so the table fits the viewport without horizontal scroll. */
#pageMoon .moon-fullname-mobile-en { display:none; }

@media (max-width: 820px) {
  #pageMoon .moon-fullnames-scroll {
    overflow-x:visible!important;
    overflow-y:visible!important;
    touch-action:auto!important;
  }
  #pageMoon .moon-fullnames-scroll > table {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(1),
  #pageMoon .moon-fullnames-scroll > table td:nth-child(1) {
    width:28%!important;
    white-space:normal!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(2),
  #pageMoon .moon-fullnames-scroll > table td:nth-child(2) {
    width:72%!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(3),
  #pageMoon .moon-fullname-desktop-en {
    display:none!important;
  }
  #pageMoon .moon-fullname-mobile-en {
    display:block!important;
    direction:ltr;
    text-align:right;
    margin-top:.32rem;
    padding-top:.28rem;
    border-top:1px solid rgba(255,255,255,.10);
  }
}


/* V32.1 — Full Moon Names desktop layout only.
   Fill the available card width on desktop while preserving the existing mobile layout. */
@media (min-width: 821px) {
  #pageMoon .moon-fullnames-scroll {
    overflow-x:hidden!important;
  }
  #pageMoon .moon-fullnames-scroll > table {
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(1),
  #pageMoon .moon-fullnames-scroll > table td:nth-child(1) {
    width:14%!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(2),
  #pageMoon .moon-fullnames-scroll > table td:nth-child(2) {
    width:36%!important;
  }
  #pageMoon .moon-fullnames-scroll > table th:nth-child(3),
  #pageMoon .moon-fullnames-scroll > table td:nth-child(3) {
    width:50%!important;
  }
  #pageMoon .moon-fullnames-scroll > table :where(th,td) {
    vertical-align:middle;
  }
}