/* Gematrixx V77 — Quran matrix, Date options, Tree details, Pythagoras route */

/* Quran: First letter × Last letter matrix — FIT completely on phones */
@media (max-width:820px){
  #pageQuran .qoc-matrix-wrap{
    width:100%!important;max-width:100%!important;overflow-x:hidden!important;
    scrollbar-width:none!important;padding:0!important;
  }
  #pageQuran .qoc-matrix{
    width:100%!important;min-width:0!important;max-width:100%!important;
    table-layout:fixed!important;border-collapse:collapse!important;
  }
  #pageQuran .qoc-matrix th,#pageQuran .qoc-matrix td{
    min-width:0!important;width:auto!important;padding:.32rem .08rem!important;
    font-size:clamp(.58rem,2.55vw,.72rem)!important;line-height:1.25!important;
    white-space:normal!important;word-break:normal!important;overflow:hidden!important;
  }
  #pageQuran .qoc-matrix tr>th:first-child{
    position:static!important;width:24%!important;min-width:0!important;
    font-size:clamp(.55rem,2.35vw,.68rem)!important;padding-inline:.18rem!important;
  }
  #pageQuran .qoc-matrix tr>th:last-child{width:11%!important;min-width:0!important}
  #pageQuran .qoc-matrix thead th{position:static!important}
  #pageQuran .qoc-matrix-result{font-size:.78rem!important;padding:.55rem!important}
}

/* Date options — the tab must always be tappable above all page layers */
#pageDatecalc #dcOptionsTab{
  pointer-events:auto!important;touch-action:manipulation!important;
  z-index:10002!important;position:fixed!important;
}
#pageDatecalc #dcOptionsPanel{z-index:10003!important;pointer-events:auto!important}
#dcOptionsBackdropV77{z-index:10001!important}

/* Tree of Life: never crop the selected information card */
#pageTreeOfLife .tol81-detail{
  max-height:none!important;height:auto!important;overflow:visible!important;
}
#pageTreeOfLife .tol81-detail .tol81-kv,
#pageTreeOfLife .tol81-detail .tol81-chips{max-height:none!important;overflow:visible!important}
#pageTreeOfLife .tol81-path-full{margin-top:.75rem;display:grid;gap:.45rem}
#pageTreeOfLife .tol81-path-full article{border:1px solid var(--border);background:var(--bg-input);border-radius:10px;padding:.55rem .65rem}
#pageTreeOfLife .tol81-path-full article b{color:var(--gold);display:block;margin-bottom:.18rem}
#pageTreeOfLife .tol81-path-full article span{color:var(--text-sec);font-size:.75rem;line-height:1.65;display:block}
@media(max-width:980px){
  #pageTreeOfLife #tol81Detail{scroll-margin-top:78px}
}