/* Gematrixx V67 — final mobile usability layer, 2026-08-08
   Loaded last on every user-facing page. Focus: readable content, no page-wide
   horizontal overflow, and card conversion for dense Quran tables. */

html,body{max-width:100%;overflow-x:clip}
.gmx-mobile-scroll{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain}
.gmx-mobile-scroll>table{max-width:none!important}
.gmx-mobile-bounded{max-width:100%!important;min-width:0!important}
.gmx-mobile-flex-wrap{flex-wrap:wrap!important;max-width:100%!important;min-width:0!important}

@media(max-width:820px){
  body{min-width:0!important}
  .page-view{width:100%!important;max-width:100%!important;min-width:0!important;overflow-x:clip!important}
  .page-view.active{min-width:0!important}
  .page-view :where(.hdr,.body,.panel,.card,.section,.wrap,.container,section,article,fieldset){min-width:0;max-width:100%}
  .page-view :where(input,select,textarea){width:auto;max-width:100%;min-width:0}
  .page-view :where(img,svg,canvas,video,iframe){max-width:100%}

  /* Top-level page headings breathe on phones without wasting vertical space. */
  .page-view>.hdr{padding:1.15rem .85rem!important}
  .page-view>.hdr h1{font-size:clamp(1.35rem,6vw,1.8rem)!important;line-height:1.6!important}
  .page-view>.hdr p{font-size:.82rem!important;line-height:1.7!important}

  /* Quran tabs: readable one-line chips; no clipped labels. */
  #pageQuran .tabs{
    display:flex!important;flex-wrap:nowrap!important;gap:.25rem!important;overflow-x:auto!important;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding:.35rem .45rem!important;
    scrollbar-width:none;overscroll-behavior-inline:contain
  }
  #pageQuran .tabs::-webkit-scrollbar{display:none}
  #pageQuran .tabs .tab{flex:0 0 auto!important;min-width:max-content!important;white-space:nowrap!important;scroll-snap-align:center;padding:.65rem .8rem!important;font-size:.82rem!important}
  #pageQuran .body{padding:.85rem!important}

  /* Quran exploration controls — each functional group gets a full readable row. */
  #pageQuran #pg-explore>.bar{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:.55rem!important;align-items:stretch!important;margin-bottom:.75rem!important
  }
  #pageQuran #pg-explore #srchTxt,
  #pageQuran #pg-explore .srch-mode,
  #pageQuran #pg-explore #srchSur,
  #pageQuran #pg-explore #srchOrd{grid-column:1/-1!important;width:100%!important;min-width:0!important;max-width:none!important;margin:0!important}
  #pageQuran #pg-explore #srchTxt{min-height:46px!important;font-size:1rem!important}
  #pageQuran #pg-explore .srch-mode{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.35rem!important;
    padding:.35rem!important;border:1px solid var(--bdr);border-radius:10px;background:var(--bg2)
  }
  #pageQuran #pg-explore .srch-mode label{display:flex!important;align-items:center!important;justify-content:center!important;gap:.35rem!important;min-height:38px!important;font-size:.78rem!important;text-align:center!important;white-space:normal!important}
  #pageQuran #pg-explore .srch-mode input{width:auto!important;flex:0 0 auto!important}
  #pageQuran #pg-explore>.bar>.btn{width:100%!important;min-height:42px!important;margin:0!important}
  #pageQuran #SSTAT{font-size:.78rem!important;line-height:1.75!important;margin:.45rem .15rem .7rem!important;text-align:right!important}

  /* Quran exploration result table -> verse cards (the screenshot regression). */
  #pageQuran #pg-explore>.tw{overflow:visible!important;border:0!important;background:transparent!important;width:100%!important}
  #pageQuran #pg-explore>.tw>table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
  #pageQuran #pg-explore>.tw>table>thead{display:none!important}
  #pageQuran #pg-explore #srchBody{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.8rem!important;width:100%!important}
  #pageQuran #pg-explore #srchBody>tr{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;min-width:0!important;
    border:1px solid var(--bdr)!important;border-radius:12px!important;overflow:hidden!important;background:var(--bg2)!important;
    box-shadow:0 5px 18px rgba(0,0,0,.08)!important
  }
  #pageQuran #pg-explore #srchBody>tr>td{
    display:flex!important;align-items:center!important;justify-content:space-between!important;gap:.55rem!important;
    width:auto!important;min-width:0!important;max-width:none!important;padding:.58rem .7rem!important;border:0!important;
    border-bottom:1px solid var(--bdr)!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;
    text-align:left!important;font-size:.88rem!important;line-height:1.55!important
  }
  #pageQuran #pg-explore #srchBody>tr>td::before{color:var(--txt3);font-size:.7rem;font-weight:700;white-space:nowrap;flex:0 0 auto;text-align:right}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(1)::before{content:"#"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(2)::before{content:"ترتيب السورة"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(3)::before{content:"السورة"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(4)::before{content:"الآية"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(6)::before{content:"جمل كبير"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(7)::before{content:"جمل صغير"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(8)::before{content:"ألفبائي ترتيبي"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(9)::before{content:"ألفبائي تخفيضي"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(10)::before{content:"كلمات"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(11)::before{content:"حروف"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(12)::before{content:"جزء"}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(5){
    grid-column:1/-1!important;display:block!important;direction:rtl!important;text-align:right!important;
    font-family:'Amiri',var(--font-main),serif!important;font-size:1.12rem!important;line-height:2!important;padding:.8rem!important;
    background:var(--bg3)!important
  }
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(5)::before{content:"نص الآية";display:block;margin-bottom:.22rem;color:var(--gold2);font-family:var(--font-main);font-size:.72rem}
  #pageQuran #pg-explore #srchBody>tr>td:nth-last-child(-n+2){border-bottom:0!important}
  #pageQuran #pg-explore #srchBody>tr>td[colspan]{grid-column:1/-1!important;display:block!important;text-align:center!important;padding:1.5rem!important;border:0!important}
  #pageQuran #pg-explore #srchBody>tr>td[colspan]::before{content:none!important}
  #pageQuran #pg-explore .pager{padding:.8rem .25rem!important;text-align:center!important;line-height:1.6!important}

  /* Generic card-table facility used for dynamically generated dense tables. */
  .gmx-card-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
  .gmx-card-table>thead{display:none!important}
  .gmx-card-table>tbody{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.7rem!important;width:100%!important}
  .gmx-card-table>tbody>tr{display:block!important;width:100%!important;border:1px solid var(--bdr,var(--border))!important;border-radius:12px!important;background:var(--bg2,var(--bg-card))!important;overflow:hidden!important}
  .gmx-card-table>tbody>tr>td{display:grid!important;grid-template-columns:minmax(96px,38%) minmax(0,1fr)!important;gap:.65rem!important;align-items:start!important;width:100%!important;min-width:0!important;box-sizing:border-box!important;padding:.55rem .7rem!important;border:0!important;border-bottom:1px solid var(--bdr,var(--border))!important;white-space:normal!important;overflow-wrap:normal!important;word-break:normal!important;text-align:right!important}
  .gmx-card-table>tbody>tr>td:last-child{border-bottom:0!important}
  .gmx-card-table>tbody>tr>td::before{content:attr(data-label);color:var(--gold2,var(--gold));font-size:.7rem;font-weight:800;line-height:1.55;text-align:right;direction:rtl}
  .gmx-card-table>tbody>tr>td[colspan]{display:block!important;text-align:center!important}
  .gmx-card-table>tbody>tr>td[colspan]::before{content:none!important}
  .gmx-card-wrap{overflow:visible!important;border:0!important;background:transparent!important}

  /* Quran: Surah stats and number occurrence tables are much easier as cards on phones. */
  #pageQuran #pg-surastats #ssWrap{overflow:visible!important;border:0!important}
  #pageQuran #pg-numbers .tw.gmx-card-wrap{overflow:visible!important;border:0!important;background:transparent!important}
  #pageQuran .tw.gmx-card-wrap>table.gmx-card-table{display:block!important;width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important}
  #pageQuran #pg-surastats .ssbar{display:grid!important;grid-template-columns:1fr!important;gap:.5rem!important}
  #pageQuran #pg-surastats .ssbar input{width:100%!important;min-width:0!important}
  #pageQuran #pg-numbers .num-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Quran secondary panels / comparisons. */
  #pageQuran :where(.cg2,.qwr-points,.qvo-grid){grid-template-columns:minmax(0,1fr)!important}
  #pageQuran :where(.qcvs-row,.qwr-selects){display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.45rem!important}
  #pageQuran :where(.qcvs-row,.qwr-selects)>*{width:100%!important;min-width:0!important}
  #pageQuran #snGraphWrap{min-width:0!important;width:100%!important;flex:1 1 100%!important}
  #pageQuran #snDetail{width:100%!important;max-height:none!important;flex:1 1 100%!important}
  #pageQuran #snSvg{height:min(470px,105vw)!important;min-height:340px!important}
  #pageQuran #snControls{gap:.65rem!important;justify-content:flex-start!important}
  #pageQuran #snControls label{flex:1 1 100%!important}
  #pageQuran :where(.st-summary,.mq2-stats,.num-grid){max-width:100%!important}

  /* Common multi-control bars across all tools. */
  .page-view :where(.bar,.toolbar,.controls,.filter-row,.search-row){max-width:100%!important}
  .page-view :where(.bar,.toolbar,.controls,.filter-row,.search-row)>:where(input,select,textarea){flex:1 1 min(100%,240px)!important;min-width:0!important}

  /* Standalone local table scroll: preserve readable cells instead of breaking words into letters. */
  .gmx-mobile-scroll table :where(th,td){overflow-wrap:normal!important;word-break:normal!important}
  .gmx-mobile-scroll table th{white-space:nowrap}

  /* Letter-card pages */
  :is(#pagePaleo,#pagePhoenician,#pageGreekLetters,#pageChineseLetters,#pageHieroglyphics)>div{padding-inline:.85rem!important}

  /* Dialogs on all pages. */
  .page-view :where([role="dialog"],.dialog,.popup,.drawer,.side-panel){max-width:calc(100vw - 16px)!important;max-height:92dvh!important}
}

@media(max-width:520px){
  #pageQuran .body{padding:.65rem!important}
  #pageQuran #pg-explore .srch-mode{grid-template-columns:1fr!important}
  #pageQuran #pg-explore #srchBody>tr{grid-template-columns:1fr!important}
  #pageQuran #pg-explore #srchBody>tr>td{border-bottom:1px solid var(--bdr)!important}
  #pageQuran #pg-explore #srchBody>tr>td:nth-child(5){grid-column:auto!important}
  #pageQuran #pg-explore #srchBody>tr>td:last-child{border-bottom:0!important}
  #pageQuran #pg-numbers .num-grid{grid-template-columns:1fr!important}
  .gmx-card-table>tbody>tr>td{grid-template-columns:minmax(88px,36%) minmax(0,1fr)!important;padding:.52rem .6rem!important}
}