/* ---------- the open mushaf ---------- */
.reader {
  --paper: #fbf6e8;
  --ink-q: #26221d;
  /* how much to shave off every stroke: the digital script prints heavier than the paper mushaf */
  --thin: .02em;
  --frame: #b89a55;
  --frame-deep: #7d6a3a;
  --head: #4a3a2a;
  /* the page frame of the family's copy: maroon rules with a pale pink chain between them */
  --maroon: #7a2a36;
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Crect width='12' height='12' fill='%23f2e4e1'/%3E%3Ccircle cx='6' cy='6' r='3.6' fill='none' stroke='%23bb8d93' stroke-width='1.2'/%3E%3Ccircle cx='0' cy='6' r='1.4' fill='%23bb8d93'/%3E%3Ccircle cx='12' cy='6' r='1.4' fill='%23bb8d93'/%3E%3C/svg%3E");
  --W: 420px;
  --H: 613px;
  position: fixed; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) 0 max(8px, env(safe-area-inset-bottom));
  opacity: 0; transform: scale(.94);
  transition: opacity 1.3s ease .3s, transform 1.7s cubic-bezier(.2, .7, .2, 1) .15s;
  perspective: 1400px;
}
.reader[hidden] { display: none; }
.reader.shown { opacity: 1; transform: none; }

.rbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: min(calc(var(--W) * 2 + 24px), calc(100vw - 24px));
}
.rbtn {
  font: 500 13px Inter, system-ui, sans-serif;
  color: var(--ink);
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(120, 95, 60, .18);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
}
.rbtn-icon { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; flex: none; }
.rbtn-icon svg { width: 22px; height: 22px; }
.rbar-spacer { visibility: hidden; }
.rbtn:active, .rchip:active { transform: scale(.97); }

/* where you are: one compact chip, tap to go elsewhere */
.rchip {
  display: flex; align-items: center; gap: 6px; min-width: 0; max-width: calc(100vw - 120px);
  padding: 9px 12px 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(120, 95, 60, .18);
  color: var(--ink);
  font-family: Inter, system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* one line: the surah, then the juz and page, quieter; a long name gives way first */
.rchip-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; line-height: 1.2; }
.rchip-name { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rchip-meta { font-size: 13px; color: var(--ink-soft); white-space: nowrap; flex: none; }
.rchip-meta::before { content: '·'; margin-inline-end: 6px; }
.rchip-caret { width: 16px; height: 16px; color: var(--ink-soft); flex: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rbtn, :root:not([data-theme="light"]) .rchip { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); }
}

/* the spread is laid out left to right, then mirrored: an Arabic book turns from the right */
.rstage {
  position: relative;
  width: calc(var(--W) * 2); height: var(--H);
  touch-action: none; user-select: none; -webkit-user-select: none;
  flex: none;
}
.rstage.single {
  width: var(--W);
  overflow: hidden;
  border-radius: 4px;
}

/* on screens that aren't high-density the strokes are only a pixel or two thick, and Windows draws the
   paper-coloured outline heavily: no thinning there at all, so the letters stay dark and whole
   (html.crisp is set in reader.js) */
html.crisp .reader { --thin: 0em; }
html.crisp .rbook { will-change: auto; }

/* ---------- the open mushaf as an object: it floats, with its shadow and the edges of its pages ---------- */
.rbook {
  position: relative; flex: none;
  margin-bottom: 46px; /* the ribbon's tail hangs here (js/ribbon.js) */
  transform-origin: 50% 60%;
  will-change: transform;
  --stackL: 4px; --stackR: 4px;
}
.rshadow {
  /* a soft shadow from a box-shadow, painted once (a blur filter here was redrawn every frame).
     The box itself sits well inside the page, so only its blurred edge shows around it */
  position: absolute; left: 9%; right: 9%; top: 10%; bottom: 7%;
  border-radius: 24px;
  box-shadow: 0 18px 46px 10px rgba(55, 38, 18, .3), 0 6px 14px 2px rgba(55, 38, 18, .12);
  transform: translate(var(--sx, 0px), var(--sy, 16px));
  will-change: transform;
  pointer-events: none;
}
/* the page block's edges, either side of the page: thin leaves pressed together. Read pages pile up on
   the right (an Arabic book), unread on the left. Each edge is also where a finger riffles the book */
.redge {
  position: absolute; top: 3px; bottom: 3px; z-index: 2;
  background: repeating-linear-gradient(90deg, #f3ecda 0 1px, #d8cab0 1px 2px);
  box-shadow: 0 1px 3px rgba(60, 40, 20, .2);
  touch-action: none; cursor: ns-resize;
}
.redge-l { right: 100%; width: var(--stackL); border-radius: 3px 0 0 3px; }
.redge-r { left: 100%; width: var(--stackR); border-radius: 0 3px 3px 0; }
/* easier to catch than it looks: an invisible strip either side of it */
.redge::after { content: ''; position: absolute; top: 0; bottom: 0; left: -14px; right: -14px; }
.rbook.double .redge { background: none; box-shadow: none; width: 10px; } /* the open spread draws its own edges */
.redge.riffling { filter: brightness(1.08); }

.riffle-tag {
  position: fixed; z-index: 15; pointer-events: none;
  display: grid; gap: 1px; text-align: center;
  padding: 7px 13px; border-radius: 12px;
  background: rgba(40, 30, 20, .86); color: #fbf6e8;
  font: 500 12px Inter, system-ui, sans-serif;
  transform: translate(-50%, -50%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.riffle-tag[hidden] { display: none; }
.riffle-tag strong { font-size: 15px; font-weight: 600; }
/* the lamp's light, drifting slowly over the paper */
.rstage::after {
  content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none;
  background: radial-gradient(70% 55% at var(--lx, 50%) var(--ly, 30%), rgba(255, 249, 232, .22), rgba(255, 249, 232, 0) 70%);
  mix-blend-mode: soft-light;
}


.flipper { position: absolute; inset: 0; transform: scaleX(-1); }
.spread { position: absolute; left: 0; top: 0; width: calc(var(--W) * 2); height: var(--H); }

.slot { position: absolute; top: 0; width: var(--W); height: var(--H); z-index: 0; pointer-events: none; background: #ece2cc; }
.slot-l { left: 0; border-radius: 8px 2px 2px 8px; }
.slot-r { left: var(--W); border-radius: 2px 8px 8px 2px; }
.fx { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fx-below { z-index: 4; }
.fx-above { z-index: 6; }

.page {
  position: absolute; left: 0; top: 0;
  contain: strict; /* building or measuring one page never makes the browser re-check the others */
  width: var(--W); height: var(--H);
  visibility: hidden; overflow: hidden;
  transform-origin: 0 0;
  background-color: var(--paper);
  background-image:
    radial-gradient(90% 70% at 30% 20%, rgba(255, 255, 255, .55), transparent 70%),
    radial-gradient(80% 60% at 80% 90%, rgba(214, 190, 150, .18), transparent 70%);
  color: var(--ink-q);
}
.page::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.page.side-r { border-radius: 0 7px 7px 0; }
.page.side-l { border-radius: 7px 0 0 7px; }
.page.side-r::after { background: linear-gradient(to right, rgba(96, 70, 40, .26), rgba(96, 70, 40, .07) 5%, transparent 13%, transparent 96%, rgba(96, 70, 40, .05)); }
.page.side-l::after { background: linear-gradient(to left, rgba(96, 70, 40, .26), rgba(96, 70, 40, .07) 5%, transparent 13%, transparent 96%, rgba(96, 70, 40, .05)); }

/* ---------- a mushaf page ---------- */
.mp {
  position: absolute; inset: 0;
  transform: scaleX(-1); /* undo the spread's mirror */
  display: grid; grid-template-rows: auto 1fr auto;
  /* the page decides the width, never the lines: Safari would otherwise let a long
     unbreakable line (while it's being measured) widen the frame past the page */
  grid-template-columns: minmax(0, 1fr);
  padding: 4.2% 6.5% 3.4%;
}
.mp-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding: 0 3%;
  position: relative; z-index: 1; margin-bottom: -1px;
  font: 400 calc(var(--W) * .029) / 1.25 Amiri, serif;
  color: var(--head);
}
/* the juz and the surah, each in a small box standing on the frame */
.mp-head span:not(:empty) {
  border: 1px solid var(--maroon); border-bottom: 0;
  background: var(--paper);
  padding: .12em .9em .05em;
}
.mp-frame {
  position: relative;
  border: 1.5px solid var(--maroon);
  padding: calc(var(--W) * .014);
  background: var(--band);
  background-size: calc(var(--W) * .014) calc(var(--W) * .014);
  min-height: 0;
}
.mp-frame > .mp-lines {
  border: 1.5px solid var(--maroon);
  background: #fdf9ee;
  padding: 2.4% 3.2%;
}
.mp-lines { height: 100%; display: grid; grid-auto-rows: 1fr; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }
.mp-head, .mp-frame, .ln { min-width: 0; }
.ln { display: flex; align-items: center; justify-content: center; min-height: 0; white-space: nowrap; line-height: 1; }
.ln-glyphs {
  display: flex; width: 100%; justify-content: space-between; direction: rtl;
  /* a lighter hand: grayscale smoothing, and a paper-coloured outline drawn over each
     letter's edge, which thins every stroke evenly (checked up close on the V1 glyphs:
     no seams where strokes meet) */
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-text-stroke: var(--thin) var(--paper);
}
.ln-ayah.centered .ln-glyphs { width: auto; gap: .18em; justify-content: center; }
.ln-ayah.measuring .ln-glyphs { width: max-content; justify-content: flex-start; }
.w { display: inline-block; }
.w.allah { color: #b3262f; }
.w.end { color: #7a2433; -webkit-text-stroke: 0; } /* the rosettes are fine lines already */

.ln-surah { padding: .5% 0; }
/* the surah's banner, traced from the family's mushaf, with its name in the printed calligraphy */
.banner {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background: url(/mushaf/img/surah-banner.webp?v=2) center / 100% 100% no-repeat;
}
.sn {
  display: flex; gap: .22em; direction: rtl;
  font: 400 calc(var(--fs, 20px) * 1.34) / 1 'qcf-surah-names', Amiri, serif;
  color: var(--ink-q);
  -webkit-font-smoothing: antialiased; -webkit-text-stroke: var(--thin) #fdf9ee;
}
.ln-basmalah { overflow: visible; }
.bsml {
  font: 400 calc(var(--fs, 20px) * 1.12) / 1 'qcf-bsml', 'Amiri Quran', serif;
  direction: rtl; unicode-bidi: bidi-override; white-space: nowrap;
  color: var(--ink-q);
  -webkit-font-smoothing: antialiased; -webkit-text-stroke: var(--thin) var(--paper);
}
.bsml-allah { position: relative; display: inline-block; }
.bsml-allah > span { position: absolute; inset: 0; color: #b3262f; clip-path: inset(0 27% 30% 47.5%); }
.ln-wait { margin: 0 2%; }
.ln-wait::before {
  content: ''; display: block; width: 100%; height: 26%;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(120, 95, 60, .07), rgba(120, 95, 60, .14), rgba(120, 95, 60, .07));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.mp-error { margin: auto; padding: 1em; text-align: center; font: 13px/1.5 Inter, sans-serif; color: var(--head); direction: ltr; }

.mp-num {
  justify-self: center; position: relative; z-index: 1; margin-top: -.62em;
  border: 1px solid var(--maroon); background: var(--paper);
  padding: .14em 1em .06em;
  font: 400 calc(var(--W) * .03) / 1 Amiri, serif; color: var(--head);
}

/* ---------- the two opening pages, and the front pages: as in the printed mushaf ---------- */
.mp-special, .mp-front {
  display: block;
  padding: 4% 4.5%;
  --pink: #f0d6e2; --pink-deep: #e9c3d1; --red: #b3262f; --grey: #77716f;
  /* a chain of pink triangles between two fine rules, the band printed round the panels */
  --tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Crect width='10' height='10' fill='%23e3dcdc'/%3E%3Cpath d='M0 10 5 1 10 10z' fill='%23e58ca1'/%3E%3Cpath d='M5 1h10' stroke='%23e58ca1' stroke-width='.6'/%3E%3C/svg%3E");
}
/* the arabesque border, traced from the family's mushaf: corners kept, sides stretched */
.sp-border {
  height: 100%;
  border: calc(var(--W) * .095) solid transparent;
  border-image: url(/mushaf/img/frame.webp?v=1) 122 / calc(var(--W) * .095) stretch;
}

/* Al-Fatihah and the start of Al-Baqarah */
.sp-panel { height: 100%; padding: calc(var(--W) * .014); background: var(--pink); box-shadow: inset 0 0 0 1px var(--grey); }
.sp-rules {
  height: 100%; padding: calc(var(--W) * .012);
  background: var(--tri) 0 0 / calc(var(--W) * .02) calc(var(--W) * .02);
  border: calc(var(--W) * .006) solid var(--red);
  box-shadow: 0 0 0 calc(var(--W) * .006) var(--pink), 0 0 0 calc(var(--W) * .011) var(--red), inset 0 0 0 1px var(--grey);
}
.sp-core {
  height: 100%;
  display: flex; flex-direction: column; gap: calc(var(--W) * .012);
  padding: calc(var(--W) * .012);
  background: var(--pink);
  border: calc(var(--W) * .005) solid var(--red);
  box-shadow: inset 0 0 0 calc(var(--W) * .006) var(--pink), inset 0 0 0 calc(var(--W) * .008) var(--red);
}
.sp-title {
  flex: none; position: relative;
  width: 76%; margin: 0 auto; aspect-ratio: 716 / 246;
  background: url(/mushaf/img/title-box.webp?v=1) center / 100% 100% no-repeat;
  box-shadow: 0 0 0 calc(var(--W) * .008) #fdf9ee, 0 0 0 calc(var(--W) * .01) #3a3632;
  display: grid; place-content: center; justify-items: center; gap: 2%;
}
.sp-name {
  display: flex; gap: .2em; direction: rtl;
  font: 400 calc(var(--W) * .06) / 1 'qcf-surah-names', Amiri, serif; color: var(--ink-q);
  -webkit-text-stroke: .015em #fdf9ee;
}
.sp-count { font: 400 calc(var(--W) * .024) / 1.1 Amiri, serif; color: var(--ink-q); }
.sp-rule { flex: none; height: calc(var(--W) * .009); border-top: 1.5px solid #2c2926; border-bottom: 1.5px solid #2c2926; margin: 0 -1%; }
.sp-text {
  flex: 1 1 0; min-height: 0;
  padding: calc(var(--W) * .012);
  background: var(--tri) 0 0 / calc(var(--W) * .02) calc(var(--W) * .02);
  border: 1px solid var(--grey);
  box-shadow: 0 0 0 calc(var(--W) * .006) var(--pink), 0 0 0 calc(var(--W) * .009) var(--red);
}
.mp-special .mp-lines {
  height: 100%;
  background: #fffdf8;
  border: 1px solid var(--grey);
  padding: 4% 3%;
}
.mp-special .ln-glyphs { width: auto; justify-content: center; gap: .14em; }
.mp-special .ln-basmalah .bsml { font-size: calc(var(--fs, 20px) * .82); }
.sp-notes {
  flex: none; margin: 0; padding: 2.4% 3.5%;
  list-style: none;
  background: #fffdf8; border: 1px solid var(--grey);
  display: grid; gap: .15em;
  font-size: calc(var(--W) * .0215); line-height: 1.38;
}
.sp-notes li { display: block; }
.sp-v { font: 600 1em Amiri, serif; color: var(--ink-q); }
.sp-w { font: 400 1.18em 'Amiri Quran', Amiri, serif; color: var(--red); }
.sp-t { font: 400 .9em Inter, system-ui, sans-serif; color: #3d3a35; }

/* the front pages */
.fp-panel {
  height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--pink);
  border: 1.5px solid #4f4b48;
  box-shadow: inset 0 0 0 calc(var(--W) * .008) var(--pink), inset 0 0 0 calc(var(--W) * .01) #8a8482;
}
.fp-panel img { display: block; height: auto; }
.fp-title { gap: calc(var(--W) * .028); padding: 8% 6%; justify-content: space-evenly; }
.fp-quran { width: 82%; }
.fp-rasm { width: 50%; margin-top: -6%; }
.fp-riwayah { margin: 2% 0 0; font: 400 calc(var(--W) * .036) / 1.4 Amiri, serif; color: var(--ink-q); }
/* an eight-pointed star: two squares, one turned */
.fp-star { position: relative; width: calc(var(--W) * .05); aspect-ratio: 1; margin: 3% 0; font-size: 0; }
.fp-star::before, .fp-star::after { content: ''; position: absolute; inset: 14%; border: calc(var(--W) * .004) solid var(--red); background: rgba(179, 38, 47, .12); }
.fp-star::after { transform: rotate(45deg); }
.fp-khattat { width: 40%; }
.fp-medallion { width: 86%; max-height: 92%; object-fit: contain; }
.page--front { background-color: #fbf6e8; }

/* the other side of the sheet, faintly through the paper (mirrored: no un-mirroring here) */
.mp-ghost { transform: none; opacity: .06; mix-blend-mode: multiply; pointer-events: none; z-index: 2; }
.mp-ghost .ln-wait::before { display: none; }

.page--blank, .page--end { background-color: #f4ecd8; }
.mp-end { display: grid; place-items: center; font: 700 calc(var(--W) * .06) Amiri, serif; color: var(--head); }

@media (prefers-reduced-motion: reduce) {
  .reader { transition: opacity .3s ease; transform: none; }
  .rbook { transform: none !important; }
  .ln-wait::before { animation: none; }
}

/* ---------- the sheet: go to a surah, a juz or a page ---------- */
.sheet { position: fixed; inset: 0; z-index: 20; }
.sheet[hidden] { display: none; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(30, 22, 12, .32); opacity: 0; transition: opacity .3s ease; }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  margin: 0 auto; max-width: 560px; height: min(78vh, 680px);
  display: flex; flex-direction: column;
  background: #fbf7ee; color: var(--ink);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -12px 40px rgba(40, 28, 14, .22);
  transform: translateY(105%);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
  padding-bottom: env(safe-area-inset-bottom);
}
.sheet.open .sheet-panel { transform: none; }
.sheet-head { padding: 8px 16px 10px; touch-action: none; }
.sheet-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(90, 70, 40, .25); margin: 2px auto 10px; }
.sheet-title { margin: 0 0 10px; text-align: center; font: 600 15px Inter, system-ui, sans-serif; }
.sheet-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 3px; border-radius: 12px; background: rgba(120, 95, 60, .1); }
.sheet-tabs button {
  border: 0; background: transparent; border-radius: 9px; padding: 8px 0;
  font: 500 13.5px Inter, system-ui, sans-serif; color: var(--ink-soft); cursor: pointer;
}
.sheet-tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(60, 40, 20, .15); }
.sheet-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 0 12px 16px; }
.panel[hidden] { display: none; }

.search {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  margin: 2px 4px 8px; padding: 10px 12px;
  border-radius: 12px; background: #fff;
  border: 1px solid rgba(120, 95, 60, .16);
  box-shadow: 0 6px 12px -6px rgba(251, 247, 238, 1);
}
.search svg { width: 18px; height: 18px; color: var(--ink-soft); flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 16px Inter, system-ui, sans-serif; color: var(--ink); }

.surah-list { list-style: none; margin: 0; padding: 0; }
.surah-list li[hidden] { display: none; }
.srow {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border: 0; background: transparent; border-radius: 12px;
  text-align: left; color: inherit; cursor: pointer;
}
.srow:active, .jcell:active { background: rgba(120, 95, 60, .1); }
.srow.current { background: rgba(122, 42, 54, .08); }
.snum {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  font: 600 12.5px Inter, system-ui, sans-serif; color: var(--maroon, #7a2a36);
  background: rgba(122, 42, 54, .08);
  clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
.stext { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sname { font: 600 15px Inter, system-ui, sans-serif; }
.smeta { font: 400 12px Inter, system-ui, sans-serif; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sar { flex: none; font: 400 30px/1 'qcf-surah-names', Amiri, serif; color: var(--ink); }

.juz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px; }
.jcell {
  display: grid; justify-items: center; gap: 2px; padding: 12px 6px;
  border: 1px solid rgba(120, 95, 60, .14); border-radius: 14px; background: #fff;
  font-family: Inter, system-ui, sans-serif; color: inherit; cursor: pointer;
}
.jcell strong { font-size: 20px; font-weight: 600; }
.jcell span { font-size: 12px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jcell small { font-size: 11px; color: var(--ink-soft); }
.jcell.current { border-color: var(--maroon, #7a2a36); background: rgba(122, 42, 54, .06); }

.page-pick { display: grid; gap: 14px; padding: 18px 10px 8px; text-align: center; font-family: Inter, system-ui, sans-serif; }
.pp-num { margin: 0; color: var(--ink-soft); font-size: 14px; }
.pp-num strong { display: block; font-size: 52px; font-weight: 600; color: var(--ink); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pp-where { margin: 0; font-size: 14px; min-height: 1.4em; }
.page-pick input[type=range] { width: 100%; accent-color: var(--maroon, #7a2a36); height: 32px; direction: rtl; }
.pp-ends { display: flex; justify-content: space-between; flex-direction: row-reverse; font-size: 11px; color: var(--ink-soft); margin-top: -10px; }
.pp-go {
  justify-self: center; margin-top: 6px; padding: 13px 26px; border-radius: 999px; border: 0;
  background: var(--maroon, #7a2a36); color: #fff; font: 600 15px Inter, system-ui, sans-serif; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .sheet-panel, .sheet-backdrop { transition: none; } }

/* keep the whole mushaf for reading without internet: one quiet row under the tabs */
.offline-btn {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; margin-top: 10px; padding: 9px 12px;
  border: 1px dashed rgba(122, 42, 54, .35); border-radius: 12px;
  background: transparent; color: var(--maroon, #7a2a36);
  font: 500 13px Inter, system-ui, sans-serif; cursor: pointer;
}
.offline-btn[hidden] { display: none; }
.offline-btn svg { width: 18px; height: 18px; flex: none; }
.offline-btn .ob-check { display: none; }
.offline-btn[data-state="done"] { border-style: solid; border-color: rgba(60, 120, 80, .3); color: #3c7850; cursor: default; }
.offline-btn[data-state="done"] .ob-check { display: inline; }
.offline-btn[data-state="done"] .ob-down { display: none; }
.ob-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(122, 42, 54, .08); }
.ob-bar i { display: block; height: 100%; width: 0; background: var(--maroon, #7a2a36); transition: width .3s ease; }
.offline-btn[data-state="idle"] .ob-bar, .offline-btn[data-state="done"] .ob-bar { display: none; }

/* ---------- the ribbon (js/ribbon.js): maroon satin, lying on its page or hanging below ---------- */
.ribbon { position: absolute; left: 0; top: 0; z-index: 3; overflow: visible; pointer-events: none; }
.ribbon .rb-shade { fill: rgba(60, 35, 20, .2); }
.ribbon .rb-band { fill: url(#rbSatin); }
.ribbon .rb-sheen { fill: none; stroke: #c96a7a; stroke-opacity: .32; stroke-linecap: round; stroke-linejoin: round; }
.ribbon .rb-lay { transition: opacity .18s; }
/* where a finger takes hold of it: around the tail, below the page (never where a page turns) */
.ribbon-grab { position: absolute; z-index: 4; touch-action: none; cursor: grab; border-radius: 12px; outline: none; }
.ribbon-grab:active { cursor: grabbing; }
.ribbon-grab:focus-visible { outline: none; }
.ribbon-hint {
  position: fixed; z-index: 16; pointer-events: none; transform: translate(-50%, 6px); opacity: 0;
  transition: opacity .35s ease, transform .35s ease;
  padding: 8px 14px; border-radius: 12px; white-space: nowrap;
  background: rgba(40, 30, 20, .86); color: #fbf6e8; font: 500 12.5px Inter, system-ui, sans-serif;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
}
.ribbon-hint.shown { opacity: 1; transform: translate(-50%, 0); }
.ribbon-hint[hidden] { display: none; }