/* ==========================================================================
   Riwaq Obaid — responsive layer
   Loaded LAST so it can refine the base, royal and dark stylesheets.
   Goals: a genuinely comfortable phone experience and a properly scaled
   desktop experience, with no horizontal overflow at any width.
   ========================================================================== */

/* ---------- 0. Global safety ---------- */
html{overflow-x:hidden}
img,video,iframe,svg{max-width:100%}
main,header,footer,section{min-width:0}
/* Wide Arabic titles and long answer lines must never blow out the layout. */
h1,h2,h3,.brand,.shelf-copy h2,.shelf-copy p,button,a,.tag,.answers li{overflow-wrap:anywhere}

/* ---------- 1. Fluid type scale ----------
   Base body type grows slightly with the viewport instead of staying fixed,
   so a 1440px monitor no longer shows a phone-sized page. */
body{font-size:clamp(1rem,0.955rem + 0.22vw,1.1875rem)}

/* ---------- 2. Library intro (all sizes) ---------- */
.library-intro h1{
  font-size:clamp(1.7rem,1.05rem + 2.9vw,3.5rem);
  line-height:1.65;
}

/* ---------- 3. Large desktop (>1280px) ----------
   The library main was capped at 1320px inside a much wider window,
   leaving the header rule and content edges visually disconnected. */
@media(min-width:1281px){
  .library-mode main{max-width:1440px;padding:34px 40px 64px}
  .library-mode header{padding:16px max(28px,calc((100vw - 1440px)/2))}
  .book-shelf{gap:30px;padding:28px 8px 48px}
  .book-stage{height:clamp(250px,19vw,330px)}
  .shelf-copy h2{font-size:1.5rem}
}
/* Very large monitors: keep the shelf from becoming a row of billboards. */
@media(min-width:1700px){
  .library-mode main{max-width:1520px}
  .library-mode header{padding:18px max(32px,calc((100vw - 1520px)/2))}
  .body-font-stop,.library-intro{max-width:820px}
}

/* ---------- 4. Mid desktop / small laptop (1001–1280px) ----------
   Previously only 5-across (>=1001) or 3-across (701–1000) was defined,
   so 1001–1280 squeezed five tall cards into too little width. */
@media(min-width:1001px) and (max-width:1280px){
  .library-mode main{padding:28px 24px 52px}
  .book-shelf{grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
  .card-surface{padding:28px 14px 18px}
  .book-stage{height:clamp(200px,19vw,250px);margin:8px 0 18px}
  .book-object{width:80%}
  .shelf-copy h2{font-size:1.2rem}
  .shelf-copy p{font-size:.875rem;min-height:4.6em;margin-bottom:10px}
  .shelf-open{font-size:.9375rem;min-height:44px}
}

/* ---------- 5. Tablet portrait (701–1000px) ----------
   Three cards per row is right; the type and card height were oversized. */
@media(min-width:701px) and (max-width:1000px){
  .library-mode main{padding:24px 20px 46px}
  .book-shelf{gap:16px;padding:22px 4px 34px}
  .card-surface{padding:26px 12px 16px}
  .book-stage{height:clamp(200px,23vw,240px);margin:8px 0 16px}
  .book-object{width:84%}
  .shelf-copy h2{font-size:1.1rem}
  .shelf-copy p{font-size:.85rem;min-height:4.6em;margin-bottom:10px}
  .shelf-open{font-size:.9375rem;min-height:44px}
  .library-intro{padding:0 16px}
}

/* ---------- 6. Phone (<=700px) ---------- */
@media(max-width:700px){
  /* --- Header: compact single band, no brand wrap, nav must not overflow --- */
  .library-mode header{padding:10px 12px;gap:8px;flex-wrap:nowrap;align-items:center}
  .library-mode .brand{font-size:1.5rem;line-height:1.35}
  .library-mode .brand span{font-size:.8rem}
  .library-mode header nav{
    padding:3px;margin-inline-start:auto;flex-wrap:nowrap;
    max-width:100%;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .library-mode header nav::-webkit-scrollbar{display:none}
  .library-mode header nav button{padding:4px 9px;font-size:.8125rem;min-height:40px;flex:none}

  /* Reading-mode header (book / unit / qasas pages) */
  body:not(.library-mode) header{padding:10px 12px;gap:8px;flex-wrap:nowrap;align-items:center}
  body:not(.library-mode) .brand{font-size:1.35rem;line-height:1.35}
  body:not(.library-mode) header nav{margin-inline-start:auto;flex-wrap:nowrap;padding:0}
  body:not(.library-mode) header nav button{padding:4px 10px;font-size:.8125rem;min-height:40px;flex:none}
  #theme,#motion{min-width:40px;height:40px}

  /* --- Library: comfortable card size with a peek of the next one --- */
  .library-mode main{padding:16px 0 30px}
  .library-intro::before{height:52px;background-size:auto 52px;margin-bottom:2px}
  .library-intro{padding:0 18px;margin-bottom:12px}
  .library-intro h1{font-size:clamp(1.55rem,7.4vw,1.9rem);line-height:1.6}
  .library-intro p{font-size:1rem}
  .book-shelf{
    padding:20px 18px 30px;gap:16px;
    scroll-padding-inline:18px;
  }
  .shelf-card{flex:0 0 min(68vw,272px)}
  .card-surface{padding:24px 14px 18px}
  .book-stage{height:clamp(210px,56vw,250px);margin:8px 0 16px}
  .book-object{width:62%;max-width:190px}
  .shelf-copy h2{font-size:1.2rem;line-height:1.65}
  .shelf-copy p{font-size:.875rem;line-height:1.7;min-height:0;margin-bottom:12px}
  .shelf-open{min-height:46px;font-size:1rem}
  .swipe-hint{margin:0 18px 14px}
  .library-mode .dialogue-book{width:calc(100% - 36px);padding:20px 14px 14px}

  /* --- Reading pages --- */
  body:not(.library-mode) main{padding:14px 14px 40px}
  /* Two columns of fully-vowelled Arabic titles cannot fit a phone:
     collapse the unit and test grids to a single readable column. */
  .unit-grid,.test-grid{grid-template-columns:minmax(0,1fr)!important;gap:0}
  .section-heading{margin:18px 0 12px;gap:10px;align-items:flex-start}
  .section-heading h1{font-size:1.5rem}
  .section-heading>div{width:100%;min-width:0}
  /* The source link is a full-width tap target on phones, not squeezed beside the title. */
  .section-heading .source,#book-source{display:flex;width:100%;justify-content:center;min-height:44px}
  #book-scope,.notice,.quiet{font-size:.9375rem}
  .unit{padding:15px 12px}
  .unit h2{font-size:1.2rem;line-height:1.7}
  .unit .tag{font-size:.8125rem}
  .unit small{font-size:.8125rem}
  .answers li{font-size:1.1rem;line-height:2}
  #unit-view{padding:4px 0}
  .qasas-intro{padding:22px 14px}
  .lesson-heading{padding:16px 10px 20px}
  .lesson-heading h1{font-size:1.5rem}
  .lesson-summary{padding:18px 15px;margin:20px 0}
  .lesson-summary p{font-size:1.0625rem;line-height:2.05}
  .unit-composition{padding:18px 14px}
  .unit-composition h2{font-size:1.3rem}
  .question-block{padding:13px 12px}
  .question-toggle,.question-actions a,.question-actions .source{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .question-image-toolbar{padding:10px 12px;gap:6px}
  .question-image-toolbar button,.question-image-toolbar a{font-size:.875rem;padding:8px 10px}
  .question-image-scroll{max-height:calc(94dvh - 150px)}

  /* Bottom safe area so the footer never sits under a gesture bar */
  footer{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}

/* ---------- 7. Small phones (<=430px) ---------- */
@media(max-width:430px){
  .library-mode .brand{font-size:1.35rem}
  .library-mode .brand span{font-size:.75rem}
  .library-mode header nav button{padding:4px 8px;font-size:.78rem}
  body:not(.library-mode) .brand{font-size:1.2rem}
  body:not(.library-mode) header nav button{padding:4px 8px;font-size:.78rem}

  .library-intro h1{font-size:clamp(1.4rem,7vw,1.7rem)}
  .library-intro p{font-size:.9375rem}
  .shelf-card{flex:0 0 min(76vw,268px)}
  .book-stage{height:clamp(200px,54vw,235px)}
  .shelf-copy h2{font-size:1.1rem}
  .shelf-copy p{font-size:.85rem}

  h1{font-size:1.4rem}
  .lesson-heading h1{font-size:1.375rem}
  .lesson-summary p{font-size:1rem}
  .answers li{font-size:1.0625rem}
}

/* ---------- 8. Very small / older phones (<=360px) ---------- */
@media(max-width:360px){
  .library-mode .brand{font-size:1.2rem}
  .library-mode .brand span{display:none}
  .library-mode header nav button{padding:3px 7px;font-size:.75rem}
  body:not(.library-mode) .brand{font-size:1.1rem}
  body:not(.library-mode) header nav button{padding:3px 7px;font-size:.75rem}
  .library-intro h1{font-size:1.35rem}
  .shelf-card{flex:0 0 82vw}
  .book-stage{height:200px}
  .book-object{width:58%}
  #unit-view{padding:4px 0}
  .word-card{padding:14px 10px}
}

/* ---------- 9. Landscape phones (short viewport) ---------- */
@media(max-height:480px) and (orientation:landscape){
  .library-intro::before{display:none}
  .library-intro h1{font-size:1.6rem}
  .book-stage{height:180px}
  .library-mode main{padding-top:10px}
}

/* ---------- 10. Print ---------- */
@media print{
  header,footer,nav,.back,.swipe-hint,.shelf-open,.question-toggle{display:none!important}
  body{background:#fff!important;color:#000!important}
  main{box-shadow:none!important;border:0!important;max-width:100%!important;padding:0!important}
  .book-shelf{display:block!important}
  .shelf-card{display:none}
}

@media (hover:none),(prefers-reduced-motion:reduce){.book-object,.card-surface::before,.card-surface::after,body.library-mode::after{animation:none!important}}
@media (hover:none){.library-mode header{backdrop-filter:none}}