/* Consolidated from global-responsive-v1.css */
/* Al-Raqeem global mobile/tablet overflow guard — 2026-08-02 */
html, body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

/* Flex/grid descendants are a frequent source of page-wide overflow. */
body * { min-inline-size: 0; }

img, picture, video, iframe, object, embed {
  max-width: 100%;
  height: auto;
}

svg {
  max-width: 100%;
}

canvas {
  max-width: 100%;
}

pre, code, samp, kbd {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

input, select, textarea, button {
  max-width: 100%;
}

/* Long URLs, formulas, names and generated values must wrap rather than widen a page. */
p, li, td, th, label, .card, .panel, .result, .value, .formula {
  overflow-wrap: anywhere;
}

/* Keep wide data inside its own local scroll region, never at page level. */
.table-wrap,
.table-wrapper,
.table-responsive,
.scroll-table,
.overflow-table,
.mnz-tablewrap,
.mc-table-wrap,
.quran-table-wrap,
.stats-table-wrap,
.dc-table-wrap,
.months-table-wrap,
[data-table-scroll="true"] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1024px) {
  main, section, article,
  .page, .page-content, .content, .container,
  [class*="-container"], [class*="_container"],
  [class*="-page"], [class*="_page"] {
    max-width: 100%;
  }

  /* Constrain dialogs, popovers and fixed panels to the visible viewport. */
  [role="dialog"], .modal, .modal-content, .popup, .dialog,
  .options-panel, .dropdown-menu, .side-panel, .drawer {
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100dvh - 20px);
  }

  /* Any standalone table becomes its own scroll surface on compact screens. */
  table {
    max-width: 100%;
  }

  table:not(.no-responsive-scroll) {
    display: block;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Preserve actual table layout after table is made the scroll surface. */
  table:not(.no-responsive-scroll) > thead,
  table:not(.no-responsive-scroll) > tbody,
  table:not(.no-responsive-scroll) > tfoot {
    width: max-content;
    min-width: 100%;
  }

  /* Large generated grids must shrink their tracks instead of forcing viewport width. */
  [style*="display:grid"], [style*="display: grid"],
  .grid, [class*="-grid"], [class*="_grid"] {
    min-width: 0;
  }

  /* Fixed-width inline styles are capped without changing their intended desktop width. */
  [style*="width:"][style*="px"],
  [style*="min-width:"][style*="px"] {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {
  body { font-size: 15px; }

  main, .page, .page-content,
  [class*="-container"], [class*="_container"] {
    padding-inline: clamp(.65rem, 3vw, 1rem) !important;
  }

  .toolbar, .controls, .actions, .buttons,
  [class*="-toolbar"], [class*="_toolbar"],
  [class*="-controls"], [class*="_controls"],
  [class*="-actions"], [class*="_actions"] {
    max-width: 100%;
    flex-wrap: wrap;
  }

  /* Common two-column forms/cards collapse safely on phones. */
  .two-col, .two-cols, .columns-2,
  [class*="two-col"], [class*="two_col"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Avoid viewport overflow from centered absolute decorations. */
  .decorative, [aria-hidden="true"] {
    max-width: 100vw;
  }
}

@media (max-width: 480px) {
  [role="dialog"], .modal, .modal-content, .popup, .dialog {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
  }

  button, .btn, [class*="-btn"], [class*="_btn"] {
    white-space: normal;
  }
}

/* V12 — remove unintended link underlines/lines from the main navigation */
.top-nav a,
.top-nav a:link,
.top-nav a:visited,
.top-nav a:hover,
.top-nav a:active,
.top-nav a:focus,
.top-nav .nav-btn,
.top-nav .nav-label,
.top-nav .brand-raqim,
.top-nav .brand-raqim-text {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-thickness: 0 !important;
  text-underline-offset: 0 !important;
}
.top-nav a:focus,
.top-nav a:focus-visible,
.top-nav .brand-raqim:focus,
.top-nav .brand-raqim:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* Consolidated from global-responsive-v2.css */
/* Gematrixx responsive hardening v2 — 2026-08-06
   Final compatibility layer for all primary and secondary pages. */
html,body{inline-size:100%;max-inline-size:100%;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body :where(main,section,article,header,footer,nav,div,form,fieldset){min-inline-size:0}
:where(img,video,iframe,object,embed,canvas,svg){max-inline-size:100%}
:where(input,select,textarea,button){min-inline-size:0;max-inline-size:100%}

/* Desktop remains unchanged; compact widths are normalized below. */
@media (max-width:1024px){
  :where(.page,.page-content,.container,.content,.tool-page,.tool-container,.section-wrap,
  [class$="-shell"],[class$="-wrap"],[class$="-container"]){max-inline-size:100%!important}

  /* Generic grids must be allowed to shrink. */
  :where(.grid,[class*="-grid"],[class*="_grid"]){min-inline-size:0}

  /* Local scrolling is reserved for genuine data matrices only. */
  :where(.table-wrap,.table-wrapper,.table-responsive,.scroll-table,.overflow-table,
  [class*="table-wrap"],[class*="table-scroll"],[data-table-scroll="true"]){
    inline-size:100%;max-inline-size:100%;overflow-x:auto;overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch
  }

  :where([role="dialog"],.modal,.modal-content,.dialog,.popup,.drawer,.side-panel){
    max-inline-size:calc(100vw - 20px)!important
  }
}

@media (max-width:768px){
  :where(main,.page,.page-content,.tool-page,[class$="-shell"],[class$="-container"]){
    padding-inline:clamp(.65rem,3vw,1rem)!important
  }
  :where(.toolbar,.controls,.actions,.buttons,[class*="-toolbar"],[class*="-controls"],[class*="-actions"]){
    flex-wrap:wrap;max-inline-size:100%
  }
  :where(.two-col,.two-cols,.columns-2,[class*="two-col"],[class*="two_col"]){
    grid-template-columns:minmax(0,1fr)!important
  }
}

/* Date calculator and its Hijri / Hebrew / Persian / Ethiopian subviews. */
@media (max-width:900px){
  #pageDatecalc .dtl-shell{inline-size:100%!important;padding-inline:.75rem!important}
  #pageDatecalc .dtl-legacy-wrap{inline-size:100%;max-inline-size:100%;overflow:visible!important}
  #pageDatecalc .dc-container{inline-size:100%!important;max-inline-size:100%!important;padding-inline:0!important}
  #pageDatecalc .dc-dates{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.8rem!important}
  #pageDatecalc .dc-date-box{inline-size:100%!important;max-inline-size:none!important;min-inline-size:0!important;margin:0!important}
  #pageDatecalc .dc-fields{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:.5rem!important}
  #pageDatecalc .dc-fields>div{inline-size:auto!important;min-inline-size:0!important}
  #pageDatecalc .dc-fields input{inline-size:100%!important;min-inline-size:0!important}
  #pageDatecalc .dc-duration-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:.75rem!important}
  #pageDatecalc .dc-duration-row>*{inline-size:100%!important;max-inline-size:100%!important;min-inline-size:0!important}
  #pageDatecalc .dc-pm-row,#pageDatecalc .dc-pm-fields{flex-wrap:wrap!important}
  #pageDatecalc .dc-pm-fields>*{flex:1 1 90px;min-inline-size:0}
  #pageDatecalc .dc-calcmode{display:flex!important;flex-wrap:wrap!important;justify-content:center!important}
  #pageDatecalc .dc-results{inline-size:100%!important;max-inline-size:100%!important;gap:.65rem!important;padding:.55rem!important;overflow:visible!important}
  #pageDatecalc .dc-results>*{min-inline-size:0;max-inline-size:100%}
  #pageDatecalc .dc-results .dc-pair{inline-size:100%!important;max-inline-size:100%!important;grid-template-columns:minmax(0,1fr) auto!important}
  #pageDatecalc :where(#dcHebrewSection,#dcEthiopianSection,#dcPersianSection,.dc-section){inline-size:100%;max-inline-size:100%;overflow:hidden}
  #pageDatecalc :where(#dcHebrewTbody,#dcEthiopianTbody,#dcPersianTbody,#dcTbody){inline-size:100%;max-inline-size:100%}
  #pageDatecalc .dc-months-dialog{inline-size:min(96vw,760px)!important;max-inline-size:96vw!important}
  #pageDatecalc .dc-months-grid{grid-template-columns:minmax(0,1fr)!important}
  #pageDatecalc .dc-month-list{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #pageDatecalc .dc-options-panel{inline-size:min(360px,calc(100vw - 16px))!important;max-inline-size:calc(100vw - 16px)!important}
  #pageDatecalc .dtl-calendar-cards,#pageDatecalc .dtl-two-col,#pageDatecalc .dtl-events-list{grid-template-columns:minmax(0,1fr)!important}
}

@media (max-width:520px){
  #pageDatecalc .dtl-shell{padding-inline:.45rem!important}
  #pageDatecalc .dtl-legacy-wrap{border-radius:12px;padding:.25rem!important}
  #pageDatecalc .dc-date-box{padding:.75rem .55rem!important}
  #pageDatecalc .dc-fields{grid-template-columns:minmax(0,1fr)!important}
  #pageDatecalc .dc-fields label{font-size:.75rem}
  #pageDatecalc .dc-fields input{font-size:16px!important}
  #pageDatecalc .dc-month-list{grid-template-columns:minmax(0,1fr)!important}
  #pageDatecalc .dc-calcmode label{inline-size:100%!important}
  #pageDatecalc .dc-pm-row{display:grid!important;grid-template-columns:minmax(0,1fr)!important}
  #pageDatecalc .dc-pm-fields{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #pageDatecalc .dc-results .dc-pair{grid-template-columns:minmax(0,1fr)!important;text-align:center!important}
}

/* Common secondary-page patterns. */
@media (max-width:760px){
  
  :where(.az107-summary){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  :where(.az107-main,.mq2-two){grid-template-columns:minmax(0,1fr)!important}
  :where(.az107-timeline strong){min-inline-size:0!important;inline-size:100%!important}
}


/* Consolidated from global-responsive-v3.css */
/* Gematrixx responsive hardening v3 — 2026-08-08
   Regression guard for deep-link pages and compact screens. */
html,body{inline-size:100%;max-inline-size:100%;overflow-x:clip}

@media (max-width:1024px){
  /* Physical min-width values on block containers were still able to defeat
     min-inline-size:0 and create page-level horizontal scrolling. */
  .page-view :where(div,section,article,aside,main,header,footer,nav,form,fieldset){
    min-width:0!important;
    max-width:100%!important;
  }
  .page-view [style*="min-width:"][style*="px"]{min-width:0!important;max-width:100%!important}
  .page-view [style*="width:"][style*="px"]{max-width:100%!important}

  /* Real wide tables may stay wide, but only inside their local scroll area. */
  .page-view :where(.table-wrap,.table-wrapper,.table-responsive,[class*="table-wrap"],[class*="table-scroll"],[data-table-scroll="true"]){
    inline-size:100%!important;max-inline-size:100%!important;overflow-x:auto!important;
    overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch
  }
}

@media (max-width:768px){
  /* Most inline flex control rows should wrap instead of widening the viewport. */
  .page-view :where([style*="display:flex"],[style*="display: flex"],.row,[class$="-row"],[class$="_row"]){
    max-width:100%;min-width:0;flex-wrap:wrap
  }

  /* Mega-menu grids are written inline with 3–4 fixed columns. On narrow
     phones those fixed tracks overflow; use two flexible columns instead. */
  .nav-mega>div[style*="grid-template-columns"]{
    width:100%!important;max-width:100%!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    padding-inline:.35rem!important
  }
  .nav-mega .tgb{width:100%!important;min-width:0!important;max-width:100%!important}

  #pageNumsym>div{padding-inline:.75rem!important}
  #pageNumsym #nsModalInner{padding:1rem .8rem!important}
  #pageNumsym [style*="display:flex"]{justify-content:center}
}

@media (max-width:420px){
  .nav-mega>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  .page-view{max-width:100vw!important;overflow-x:clip!important}
  #pageNumsym #nsGrid{grid-template-columns:minmax(0,1fr)!important}
}

\n\n/* ==============================================================
   Gematrixx V118 — sitewide editorial justification (safe scope)
   Only long-form explanatory copy is justified. Controls, tables,
   statistics, labels, buttons, navigation and compact data cards are
   intentionally excluded.
   ============================================================== */
:where(
  #pageMacrocosm .mc-intro,
  #pageMacrocosm .mc-note-box,
  #pageMacrocosm .mc-final-thought,
  #pageElderFuthark .ef-head p,
  #pageElderFuthark .ef-caution,
  #pageElderFuthark .ef-source,
  #pageChineseLetters .cn-head p,
  #pageChineseLetters .cn-note,
  #pageHieroglyphics .hg-head p,
  #pageHieroglyphics .hg-note,
  #pageArabicMaqam .mq-hero p,
  #pageArabicMaqam .mq-caveat,
  #pageArabicMaqam .mq-note,
  #pageAvestanZoroastrian .az-head p,
  #pagePlanetHour .ph-sub,
  #pagePlanetHour p.ph-note,
  #pageMagic .ms-reading-guide p,
  #pageAstro .az107-header p,
  #pageAstro .az107-note
){
  text-align:justify !important;
  text-justify:inter-word;
  text-align-last:right;
  overflow-wrap:break-word;
}

/* On phones, explanatory cards become reading-width blocks; justify them too. */
@media(max-width:720px){
  :where(
    #pageMacrocosm .mc-info-card p,
    #pageMacrocosm .mc-type-card p,
    #pageMacrocosm .mc-layer-content p,
    #pageElderFuthark .ef-section p,
    #pageElderFuthark .ef-method span,
    #pageChineseLetters .cn-sec p,
    #pageHieroglyphics .hg-box p,
    #pageArabicMaqam .mq-card p,
    #pageArabicMaqam .mq-box p,
    #pageArabicMaqam .mq-symbol-card p,
    #pageArabicMaqam .mq-history-card p,
    #pageArabicMaqam .mq-source p,
    #pageAvestanZoroastrian .az-method article,
    #pageAvestanZoroastrian .az-groups article,
    #pageAvestanZoroastrian .az-script,
    #pageAvestanZoroastrian .az-frame,
    #pageAvestanZoroastrian .az-source
  ){
    text-align:justify !important;
    text-justify:inter-word;
    text-align-last:right;
    overflow-wrap:break-word;
  }
}