/* Gematrixx V78 — critical fixes loaded LAST.
   Fixes: Quran first×last matrix mobile fit + Tree of Life interaction/detail visibility. */

/* Quran / فواتح وخواتيم السور / مصفوفة أول حرف × آخر حرف */
@media (max-width:820px){
  #pageQuran .qoc-matrix-wrap{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
    padding:0!important;
    box-sizing:border-box!important;
    scrollbar-width:none!important;
  }
  #pageQuran .qoc-matrix{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    table-layout:fixed!important;
    border-collapse:collapse!important;
    direction:rtl!important;
  }
  #pageQuran .qoc-matrix th,
  #pageQuran .qoc-matrix td{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    padding:.30rem .02rem!important;
    font-size:clamp(.57rem,2.35vw,.70rem)!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:clip!important;
    word-break:normal!important;
    box-sizing:border-box!important;
  }
  /* first column is letters only on body; keep it deliberately narrow */
  #pageQuran .qoc-matrix tr > th:first-child{
    width:34px!important;
    min-width:34px!important;
    max-width:34px!important;
    position:static!important;
    right:auto!important;
    padding-inline:0!important;
  }
  #pageQuran .qoc-matrix tr > th:last-child{
    width:38px!important;
    min-width:38px!important;
    max-width:38px!important;
    position:static!important;
  }
  #pageQuran .qoc-matrix thead th{position:static!important;top:auto!important}
  /* replace the long corner heading that was forcing the first column wide */
  #pageQuran .qoc-matrix thead tr > th:first-child{
    font-size:0!important;
    white-space:normal!important;
  }
  #pageQuran .qoc-matrix thead tr > th:first-child::after{
    content:"ب↓\Aن←";
    white-space:pre;
    display:block;
    font-size:.60rem;
    line-height:1.05;
    color:var(--gold2);
  }
  #pageQuran .qoc-matrix tfoot tr > th:first-child{
    font-size:0!important;
  }
  #pageQuran .qoc-matrix tfoot tr > th:first-child::after{
    content:"Σ";
    display:block;
    font-size:.72rem;
    color:var(--gold);
  }
  #pageQuran .qoc-matrix-result{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow-wrap:anywhere!important;
  }
}
@media (max-width:380px){
  #pageQuran .qoc-matrix tr > th:first-child{width:30px!important;min-width:30px!important;max-width:30px!important}
  #pageQuran .qoc-matrix tr > th:last-child{width:34px!important;min-width:34px!important;max-width:34px!important}
  #pageQuran .qoc-matrix th,#pageQuran .qoc-matrix td{font-size:.56rem!important;padding:.28rem 0!important}
}

/* Tree of Life: sphere/path clicks and full detail card */
#pageTreeOfLife .pillar-zone{pointer-events:none!important}
#pageTreeOfLife .tol81-node,
#pageTreeOfLife .tol81-node > circle,
#pageTreeOfLife .tol81-path .hit{
  pointer-events:auto!important;
  cursor:pointer!important;
  touch-action:manipulation!important;
}
#pageTreeOfLife #tol81Detail{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  contain:none!important;
}
#pageTreeOfLife #tol81Detail.tol81-has-selection{
  border-color:rgba(201,168,76,.55)!important;
  box-shadow:0 0 0 1px rgba(201,168,76,.08),0 8px 26px rgba(0,0,0,.16);
}
#pageTreeOfLife #tol81Detail .tol81-desc,
#pageTreeOfLife #tol81Detail .tol81-kv b,
#pageTreeOfLife #tol81Detail .tol81-path-full span{
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere!important;
}
@media(max-width:980px){
  #pageTreeOfLife .tol81-main{display:flex!important;flex-direction:column!important}
  #pageTreeOfLife .tol81-tree-card{order:1!important}
  #pageTreeOfLife #tol81Detail{order:2!important;position:static!important;top:auto!important;min-height:0!important;margin-top:.7rem!important;scroll-margin-top:72px!important}
}

/* Date calculator Options — final override after all legacy date/mobile CSS */
#pageDatecalc #dcOptionsTab{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  z-index:2147483000!important;
}
#pageDatecalc #dcOptionsPanel{
  z-index:2147483002!important;
}
#gmx78DateBackdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:2147483001;display:none;
}
#gmx78DateBackdrop.open{display:block!important}
@media(max-width:820px){
  #pageDatecalc #dcOptionsPanel{
    position:fixed!important;
    inset:68px 10px 14px 10px!important;
    width:auto!important;max-width:none!important;
    max-height:calc(100dvh - 82px)!important;
    overflow:auto!important;
    transform:none!important;
    border-radius:14px!important;
  }
  #pageDatecalc #dcOptionsPanel:not(.open){display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  #pageDatecalc #dcOptionsPanel.open{display:block!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important}
}