/* Desktop sidebars remain in place; phones use compact, accessible menus. */
.mobile-panel-button,.mobile-reader-tools{display:none}
.mobile-panel{width:min(480px,100vw);max-width:100vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;padding:0;border:0;background:#fff;color:var(--ink)}
.mobile-panel[open]{display:flex;flex-direction:column}
.mobile-panel::backdrop{background:#10282099}
.mobile-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;padding:16px 20px;border-bottom:1px solid var(--line);background:#fff}
.mobile-panel-heading h2{margin:0;font:24px/1.3 var(--serif)}
.mobile-panel-close{width:44px;height:44px;border:1px solid #e5dccb;border-radius:8px;background:#faf7ef;font-size:22px}
.mobile-panel-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom)}
body.mobile-panel-open{overflow:hidden}

@media(max-width:900px){
  /* Explicit order also fixes the shared main{order:2} rule on iPhone. */
  .library-layout{display:flex;flex-direction:column}
  #library-main{order:0;width:100%;padding:24px 20px 0}
  .library-sidebar{order:1;position:static;height:640px;min-height:0}
  .library-page .site-header{height:76px;padding:0 18px;gap:10px}
  .library-page .brand{font-size:20px;gap:8px}
  .library-page .brandmark{font-size:30px}
  .library-page .brand small{font-size:8px;letter-spacing:1.5px}
  .library-page .library-edition{display:none}
  .mobile-panels-ready .mobile-panel-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 13px;border:1px solid #e5d9b8;border-radius:8px;background:#f6efde;color:#806321;font-size:14px;font-weight:600;line-height:1.4}
  .mobile-directory-button{margin-left:auto;flex-shrink:0}
  .mobile-panels-ready.library-page .header-begin{display:none}
  .mobile-panel .library-sidebar{height:100%;min-height:400px;order:0;position:static}
  .mobile-panel .library-sidebar-head{padding:18px 20px 0}
  .mobile-panel .library-sidebar-head>p,.mobile-panel .library-sidebar-head>.eyebrow{display:none}
  .mobile-panel .library-sidebar h2{margin:0 0 14px;font-size:28px}
  .mobile-panel #directory-list{min-height:0}
  .mobile-panel .directory-key{padding:12px 20px}
  .library-intro .eyebrow{font-size:10px;letter-spacing:1px}
  .library-intro h1{font-size:30px;line-height:1.2;margin:10px 0}
  .library-intro p{font-size:16px;line-height:1.5}
  .library-intro:after{display:none}
  .cover-stage{padding:22px 0 24px}
  .cover-annotation{display:none}
  .quran-cover{width:215px;height:288px;padding:12px 10px 12px 16px}
  .cover-bismillah{font-size:13px}
  .cover-title>[lang=ar]{font-size:30px}
  .cover-title strong{font-size:6px;letter-spacing:1.6px;margin-top:8px}
  .cover-bottom{font-size:5px;letter-spacing:1.2px}
  .book-ribbon{height:27px;bottom:-18px;width:11px}
  .cover-action{margin:0 0 18px}
  .cover-action .begin-button{padding:9px 18px;font-size:16px;min-height:44px}
  .cover-action p{font-size:12px;margin:9px 0}
  #library-main>.reverse-reading-note{display:none}
  .ready-shelf{padding-top:18px}
  .ready-cards{grid-template-columns:1fr}
  .shelf-heading h2{margin:5px 0 16px}
  .shelf-note{display:none}
  .library-footer{flex-direction:column;gap:7px}

  body[data-reader-chapter] .layout{display:flex;flex-direction:column}
  body[data-reader-chapter] #reading{order:0;width:100%;padding:20px}
  body[data-reader-chapter] #context{order:1}
  body[data-reader-chapter] .navigation{order:2}
  .mobile-panels-ready .mobile-reader-tools{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 18px}
  .mobile-reader-tools .mobile-panel-button{flex:1;font-size:13px;padding:9px 8px}
  .mobile-panel #context{min-height:100%;padding:20px}
  .mobile-panel .navigation{display:grid;grid-template-columns:1fr;padding:20px;border:0;max-height:none}
  .mobile-panel .navigation #verse-jump,.mobile-panel .navigation .verse-step{grid-column:1}
  .mobile-panel .section-directory #section-navigation{display:block;overflow:visible;max-height:none}
  .mobile-panel .section-directory .nav-item{width:100%;font-size:15px;margin:5px 0;padding:12px}
  #reading>.recitation-dock{position:static;width:100%;max-height:none;margin:0 0 18px}
  body[data-reader-chapter] .intro{margin-top:16px;flex-wrap:wrap;gap:10px}
  body[data-reader-chapter] .intro>div{min-width:0}
  body[data-reader-chapter] .chapter-switch{font-size:13px;gap:7px;margin-bottom:18px}
  body[data-reader-chapter] .chapter-switch a{padding:7px 9px}
  body[data-reader-chapter] h1{font-size:clamp(32px,8vw,42px);line-height:1.2}
  body[data-reader-chapter] .surah-play-controls{gap:8px}
  body[data-reader-chapter] .surah-play-controls button{min-height:44px;font-size:15px}
}
@media(max-width:380px){.library-page .site-header{padding:0 14px;gap:8px}.library-page .brand{font-size:17px}.library-page .brandmark{font-size:26px}.library-page .brand small{font-size:7px}.mobile-directory-button{font-size:12px!important;padding:8px 10px!important}}