/* Mobile / tablet layout on top of the desktop style.css (same theme variables, dark + body.light) */
:root {
  --hdr: 50px; --ftr: 52px;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --sheet-h: 56vh; --pw: 300px;
}
@supports (height: 1dvh) { :root { --sheet-h: 56dvh; } }
html, body { position: fixed; inset: 0; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.m { font-family: system-ui, "Segoe UI", Roboto, "Noto Naskh Arabic", "Noto Nastaliq Urdu", Tahoma, sans-serif; }
button { touch-action: manipulation; }
.ib { min-width: 42px; min-height: 42px; padding: 0 10px; font-size: 20px; line-height: 1; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- header */
header#hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 12; height: calc(var(--hdr) + var(--sat));
  padding: var(--sat) calc(8px + var(--sar)) 0 calc(8px + var(--sal)); gap: 6px; direction: rtl;
  transition: transform .25s ease; }
header#hdr .title { font-size: 18px; margin: 0 2px; display: inline-flex; align-items: center; gap: 6px; }
header#hdr .title img { border-radius: 7px; }
.chip { font-size: 13.5px; padding: 6px 12px; border-radius: 20px; background: #00000033; border: 1px solid #ffffff2a;
  color: var(--gold); min-height: 36px; white-space: nowrap; }
header#hdr #hifzBtn.on, header#hdr #panelBtn.on { background: var(--accent); border-color: var(--gold); }

/* ---------------- mushaf area */
main#main { position: fixed; top: calc(var(--hdr) + var(--sat)); bottom: calc(var(--ftr) + var(--sab)); left: 0; right: 0;
  display: block; overflow: hidden; touch-action: none; transition: top .25s, bottom .25s, right .2s;
  background: radial-gradient(ellipse at 50% 40%, #ffffff08, transparent 70%); }
#book { position: absolute; left: 0; top: 0; display: flex; flex-direction: row-reverse; padding: 0;
  transform-origin: 0 0; will-change: transform; height: auto; }
.pg { position: relative; width: var(--pw); height: 100%; overflow: hidden; background: #fbf5dd;
  box-shadow: 0 4px 18px #0008; cursor: default; flex: 0 0 auto; }
#book.two .pg { max-width: none; }
#book.two .pg.r { border-radius: 0 6px 6px 0; } #book.two .pg.l { border-radius: 6px 0 0 6px; }
#book.one .pg { border-radius: 6px; }
.pg img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none;
  -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; }
/* crop the wide blue frame of the scan: geometry in mreader.js (CROP) */
body.crop .pg img { width: calc(100% / 0.777); height: calc(100% / 0.832); left: calc(-100% * 0.113 / 0.777); top: calc(-100% * 0.09 / 0.832); }
.pg .spin { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; }
.pg.loading .spin { display: flex; }
.pg .spin::after { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 4px solid #2c554055; border-top-color: var(--gold);
  animation: mspin .8s linear infinite; }
@keyframes mspin { to { transform: rotate(360deg); } }
.pg.loading img { opacity: .15; }
.pg .retry { display: none; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 17px; padding: 12px 22px; }
.pg.err .retry { display: block; }
.pg.err::before { content: "📶 صفحہ نہیں کھلا — انٹرنیٹ چیک کریں"; position: absolute; left: 0; right: 0; top: 36%; text-align: center;
  color: #6b4b16; font-size: 15px; direction: rtl; padding: 0 12px; }
.pg .cover { position: absolute; left: 0; right: 0; bottom: 0; top: 100%; display: none; pointer-events: none;
  background: repeating-linear-gradient(45deg,#1d3a2c,#1d3a2c 12px,#234634 12px,#234634 24px); border-top: 3px solid var(--gold); }
body.hifz .pg .cover { display: block; }
#hifzCtl { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: 10px; align-items: center;
  background: #000a; padding: 6px 10px; border-radius: 30px; border: 1px solid var(--gold); direction: ltr; }
#hifzCtl[hidden] { display: none; }
#hifzCtl button { width: 52px; height: 44px; font-size: 20px; border-radius: 22px; }
#hifzCtl span { color: var(--gold); min-width: 46px; text-align: center; font-size: 15px; }

/* ---------------- footer */
footer#ftr { position: fixed; height: calc(var(--ftr) + var(--sab)); padding: 0 calc(8px + var(--sar)) var(--sab) calc(8px + var(--sal));
  gap: 8px; direction: rtl; z-index: 11; transition: transform .25s ease; }
footer#ftr .ib { font-size: 30px; min-width: 50px; padding-bottom: 4px; direction: ltr; unicode-bidi: isolate; }
#status { white-space: nowrap; font-size: 13.5px; }
#slider { min-width: 60px; height: 30px; }

/* immersive (tap the middle of the page) */
body.imm header#hdr { transform: translateY(-110%); }
body.imm footer#ftr { transform: translateY(110%); }
body.imm main#main { top: var(--sat); bottom: var(--sab); }

/* ---------------- panel = bottom sheet (phones / portrait tablets) */
.sheet-bar { display: none; }
@media (max-width: 899px), (max-height: 520px) {
  aside#panel { position: fixed; display: flex; top: auto; left: 0; right: 0; bottom: 0; width: auto; z-index: 15;
    height: calc(var(--sheet-h) + var(--sab)); padding-bottom: var(--sab); border-left: 0; border-top: 2px solid var(--gold);
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px #000a; transform: translateY(105%); visibility: hidden;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), height .25s ease, visibility 0s .3s; }
  body.panel aside#panel { transform: translateY(0); visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1), height .25s ease; }
  body.panel.sheet-full aside#panel { height: calc(100% - var(--sat) - 6px); }
  body.panel main#main { bottom: calc(var(--sheet-h) + var(--sab)); }
  body.panel footer#ftr { transform: translateY(110%); }
  .sheet-bar { display: flex; align-items: center; gap: 6px; padding: 4px 10px 0; flex: 0 0 auto; touch-action: none; cursor: grab; }
  .sheet-bar .grip { flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; }
  .sheet-bar .grip::before { content: ""; width: 46px; height: 5px; border-radius: 3px; background: #ffffff55; }
  .sheet-bar button { min-width: 40px; min-height: 34px; padding: 0 10px; font-size: 16px; background: #ffffff12; }
  aside .tab { padding: 10px 14px 18px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
}
/* landscape phones: the panel becomes a right-side drawer, full height */
@media (orientation: landscape) and (max-height: 520px) {
  aside#panel { top: 0; left: auto; width: min(420px, 58vw); height: 100% !important; border-radius: 18px 0 0 18px;
    border-top: 0; border-left: 2px solid var(--gold); transform: translateX(105%); padding-top: var(--sat); padding-right: var(--sar); }
  body.panel aside#panel { transform: translateX(0); }
  body.panel main#main { bottom: calc(var(--ftr) + var(--sab)); right: min(420px, 58vw); }
  body.panel footer#ftr { transform: none; right: min(420px, 58vw); }
  .sheet-bar #sheetMax { display: none; }
  .tabs .ti { font-size: 14px; }
}
/* big screens (landscape tablet / desktop): docked side panel like the desktop app */
@media (min-width: 900px) and (min-height: 521px) {
  aside#panel { top: calc(var(--hdr) + var(--sat)); bottom: calc(var(--ftr) + var(--sab)); z-index: 5; }
  body.panel main#main { right: var(--panel); }
}

/* bigger touch targets inside the panel; 16px inputs stop iOS from zooming on focus */
body.m aside button, body.m aside select, body.m aside input:not([type=checkbox]):not([type=radio]):not([type=range]) { min-height: 40px; }
body.m input, body.m select, body.m textarea { font-size: 16px; }
body.m aside input[type=checkbox], body.m aside input[type=radio], #menu input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; accent-color: var(--accent); }
body.m .tabs button { min-height: 44px; }
body.m .chk { padding: 4px 0; }
body.m #paraGrid button { min-height: 40px; }

/* ---------------- side menu (☰) */
#scrim { position: fixed; inset: 0; background: #0008; z-index: 19; opacity: 0; pointer-events: none; transition: opacity .25s; }
body.menu #scrim { opacity: 1; pointer-events: auto; }
#menu { position: fixed; top: 0; bottom: 0; right: 0; width: min(360px, 88vw); z-index: 20; background: var(--bar); color: var(--text);
  border-left: 2px solid var(--gold); direction: rtl; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(8px + var(--sat)) calc(12px + var(--sar)) calc(16px + var(--sab)) 14px;
  transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); visibility: hidden; }
body.menu #menu { transform: none; visibility: visible; }
#menu .mhead { display: flex; align-items: center; gap: 10px; padding: 4px 0 10px; border-bottom: 1px solid #ffffff22; }
#menu .mhead img { border-radius: 10px; }
#menu .mhead div { flex: 1; display: flex; flex-direction: column; }
#menu .mhead b { color: var(--gold); font-size: 17px; }
#menu .mhead small { color: var(--muted); font-size: 12.5px; }
#menu .msec { padding: 10px 0; border-bottom: 1px solid #ffffff14; }
#menu h4 { margin: 2px 0 8px; color: var(--gold); font-size: 15px; }
#menu button, #menu select, #menu input:not([type=checkbox]) { min-height: 42px; }
#menu .row input[type=number] { flex: 1; width: auto; min-width: 0; }
.bmrow { display: flex; gap: 8px; margin: 6px 0; }
.bmrow .bm { flex: 1.3; font-size: 16px; }
.bmrow .bmsave { flex: 1; font-size: 13.5px; background: #ffffff10; }
.seg { display: flex; border: 1px solid #ffffff2a; border-radius: 12px; overflow: hidden; margin-bottom: 6px; }
.seg button { flex: 1; border: 0; border-radius: 0; background: transparent; font-size: 14px; }
.seg button.on { background: var(--accent); }
.mbtns { display: flex; gap: 8px; margin: 8px 0; }
.mbtns button { flex: 1; }
button.gold { background: linear-gradient(#e2c25a, #b8932a); color: #1b2a22; font-weight: 700; border-color: #f3dc8a; }
button.subtle { background: transparent; color: var(--muted); font-size: 13.5px; }
#dlBar { margin: 6px 0; }
#dlFill { height: 100%; width: 0; background: var(--gold); transition: width .3s; }

/* ---------------- dialogs, toast, help */
.toast { top: calc(var(--hdr) + var(--sat) + 14px); max-width: 90vw; text-align: center; direction: rtl; z-index: 40; font-size: 15px; line-height: 1.6; }
#dlg { position: fixed; inset: 0; z-index: 45; background: #000b; display: flex; align-items: center; justify-content: center; padding: 18px; }
#dlg[hidden] { display: none; }
#dlg .dbox { background: var(--bar); border: 2px solid var(--gold); border-radius: 16px; padding: 18px; max-width: 440px; width: 100%;
  direction: rtl; line-height: 1.9; font-size: 15px; }
#dlg .dbtns { display: flex; gap: 10px; margin-top: 14px; }
#dlg .dbtns button { flex: 1; min-height: 46px; font-size: 16px; }
#updBar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--ftr) + var(--sab) + 12px); z-index: 30;
  background: var(--bar2); border: 1px solid var(--gold); border-radius: 24px; padding: 6px 8px 6px 14px; direction: rtl;
  display: flex; gap: 10px; align-items: center; box-shadow: 0 4px 16px #0008; white-space: nowrap; }
#updBar[hidden] { display: none; }
#help { padding: 14px; z-index: 50; }
#help > div { max-height: calc(100% - var(--sat) - var(--sab) - 20px); overflow-y: auto; padding: 16px 18px; font-size: 14.5px; line-height: 1.95;
  max-width: 640px; }
#help button { min-height: 44px; min-width: 120px; }

/* light theme touches */
body.light .chip { background: #ffffff22; color: #ffe9a3; }
body.light #menu { background: #f4eedb; color: #1b2a22; }
body.light #menu h4, body.light #menu .mhead b { color: #7a5c0e; }
body.light #menu .note, body.light #menu small { color: #4f6158; }
body.light #menu select, body.light #menu input, body.light #menu button { color: #fff; }
body.light #menu .bmrow .bmsave, body.light #menu button.subtle { background: #3c6a5322; color: #24453a; }
body.light #menu .seg button { color: #24453a; }
body.light #menu .seg button.on { color: #fff; }
body.light main#main { background: radial-gradient(ellipse at 50% 40%, #ffffff60, transparent 70%); }
body.light .pg { box-shadow: 0 4px 14px #0004; }