/* Layout tiers and layout fixes layered over suite.css. suite.css is extracted from the
   design suite and left untouched, so everything here overrides it from outside; both
   index.html entry points load this file right after it. */

/* ---- word-by-word layout follows the text-size sliders (suite.css fixes the chips in px) ---- */
.content[data-cust] .wtoken .wa{font-size:calc(var(--arfs, 23px) - 4px)}
.content[data-cust] .wtoken .wt{font-size:calc(var(--enfs, 13px) - 4px)}
.content[data-cust] .wtoken .wm{font-size:calc(var(--enfs, 13px) - 3px)}
.content[data-cust] .fullen{font-size:calc(var(--enfs, 13px) - 1px)}

/* ---- quiz: the question card scrolls on short screens, Next stays pinned at its foot.
   suite.css caps the card with overflow:hidden, which put the feedback line and the Next
   button below the fold once an answer was locked. ---- */
.statsover .qcard{overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; overscroll-behavior:contain}
.statsover .qcard::-webkit-scrollbar{display:none}
.statsover .qcard .qnextbig{position:sticky; bottom:-12px; margin:auto -13px -12px; padding-top:14px; padding-bottom:14px; width:calc(100% + 26px); border-radius:0 0 18px 18px; box-shadow:0 -10px 16px -6px rgba(60,50,20,.25); z-index:3}
.statsover .qcard .qfeed{margin-bottom:9px}

/* ---- wide screens (760px and up): the reading screens leave the phone column ----
   Only screens with a reading column widen: the verse reader, the printed page and the quiz
   overlay. The landing, sign-in, intention, donation and after-reading screens keep the
   phone frame they were designed for. Arabic and translation sizes scale relative to the
   reader's own text-size sliders, so the two compose instead of fighting. */
@media (min-width:760px){
  #app:has(> .screen > .scrollarea),
  #app:has(> .screen > .pager),
  #app:has(> .kscreen .statsover){max-width:1280px; width:calc(100% - 48px); height:min(94dvh, 1080px)}

  /* the verse reader: one wide reading column */
  #app:has(> .screen > .scrollarea) .app-header,
  #app:has(> .screen > .pager) .app-header{padding:16px 32px}
  #app:has(> .screen > .scrollarea) .app-header .ttl b,
  #app:has(> .screen > .pager) .app-header .ttl b{font-size:15px}
  #app:has(> .screen > .scrollarea) .app-header .ttl small,
  #app:has(> .screen > .pager) .app-header .ttl small{font-size:12px}
  #app:has(> .screen > .scrollarea) .bottombar,
  #app:has(> .screen > .pager) .bottombar{padding-left:32px; padding-right:32px}
  #app:has(> .screen > .scrollarea) .content{max-width:1080px; margin:0 auto}
  #app:has(> .screen > .scrollarea) .vrow{padding:6px 12px}
  #app:has(> .screen > .scrollarea) .vrow .ar{font-size:calc(var(--arfs, 23px) + 5px); line-height:2.15}
  #app:has(> .screen > .scrollarea) .vrow .en{font-size:calc(var(--enfs, 13px) + 3px); line-height:1.65}
  #app:has(> .screen > .scrollarea) .vrow .tr{font-size:calc(var(--enfs, 13px) - .5px)}
  #app:has(> .screen > .scrollarea) .finish{max-width:560px; margin-left:auto; margin-right:auto}

  /* the printed page keeps its printed line breaks, so it cannot reflow into a wide column:
     it stays a phone-width column, centred and zoomed, and the height auto-fit still runs in
     the page's own (zoomed) coordinates */
  #app:has(> .screen > .pager) .mpage{zoom:1.4; padding-left:max(14px, calc(50% - 215px)); padding-right:max(14px, calc(50% - 215px))}

  /* the quiz: a centred card; the result becomes two columns (score left, next video right) */
  #app:has(> .kscreen .statsover) .statsover{overflow-y:auto}
  #app:has(> .kscreen .statsover) .statsover .qzhero{padding-left:max(16px, calc(50% - 400px)); padding-right:max(16px, calc(50% - 400px))}
  #app:has(> .kscreen .statsover) .statsover .qcard{max-width:760px; margin-left:auto; margin-right:auto; width:calc(100% - 32px)}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2{max-width:1000px; width:calc(100% - 48px); margin:-14px auto 28px; border-radius:22px; flex:none; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; grid-template-areas:"hero next" "row row"; align-items:stretch}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2hero{grid-area:hero; display:flex; flex-direction:column; justify-content:center; padding:38px 24px 26px}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2next{grid-area:next; display:flex; flex-direction:column; align-self:start; max-width:none; width:auto; margin:18px 20px 0 0; padding:16px}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2thumb{height:auto; width:min(100%, 240px); aspect-ratio:9/16; margin:0 auto}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2row{grid-area:row; max-width:none; width:auto; margin:14px 20px 22px}
}

/* ---- tablets (760px to 999px): the wide layout, a little tighter; the result back to one column ---- */
@media (min-width:760px) and (max-width:999px){
  #app:has(> .screen > .scrollarea),
  #app:has(> .screen > .pager),
  #app:has(> .kscreen .statsover){width:calc(100% - 24px); height:min(96dvh, 1200px)}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2{grid-template-columns:1fr; grid-template-areas:"hero" "next" "row"; max-width:640px}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2next{margin:18px 20px 0}
  #app:has(> .kscreen .statsover) .statsover .qres.qres2 .qr2thumb{width:100%; aspect-ratio:16/9}
}