/* The book as plain web pages - /v3/211, /surah/2, /surah (decision 130).
   Loaded after style.css: the leaves, their type and the themes are the
   reader's own; this is only the page around them. */

body.book-page{height:auto; overflow:visible; display:flex; flex-direction:column; min-height:100vh;}
body.book-page > :not(.skip){position:relative; z-index:1;}
.book-page main{flex:1; width:100%; max-width:1500px; margin:0 auto; padding:0 20px 40px;}
.book-page main:focus{outline:none;}

/* ---- the bar: the binding's colours, as in the reader's rail ---- */
.bk-bar{
  display:flex; align-items:center; gap:16px; padding:10px 20px;
  background:var(--bind); color:var(--bind-ink);
  border-bottom:1px solid var(--bind-edge);
}
.bk-brand{display:flex; align-items:center; gap:10px; color:inherit; text-decoration:none; min-width:0;}
.bk-brand span{display:flex; flex-direction:column; line-height:1.25;}
.bk-brand b{font-size:19px; color:var(--bind-title); font-weight:700;}
.bk-brand small{font-size:12px; color:var(--bind-soft);}
.bk-links{margin-inline-start:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.bk-links a{color:var(--bind-ink); text-decoration:none; font-size:14px; padding:6px 10px; border-radius:3px;}
.bk-links a:hover{color:var(--bind-hi); background:var(--bind-tint);}
.bk-links a.bk-open{border:1px solid var(--gold); color:var(--gold-lit);}
.bk-links a:focus-visible,.bk-brand:focus-visible{outline:2px solid var(--gold-lit); outline-offset:2px;}

/* ---- the trail ---- */
.bk-crumbs{width:100%; max-width:1500px; margin:0 auto; padding:12px 20px 0;}
.bk-crumbs ol{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px; font-size:13px; color:var(--ink-soft);}
.bk-crumbs li + li::before{content:'‹'; margin-inline-end:4px; color:var(--ink-faint);}
.bk-crumbs a{color:var(--gold-ink); text-decoration:none;}
.bk-crumbs a:hover{text-decoration:underline;}

/* ---- the heading of a page ---- */
.bk-intro{text-align:center; padding:22px 10px 20px; max-width:900px; margin:0 auto;}
.bk-intro h1{margin:0; font-size:30px; line-height:1.5; color:var(--maroon); font-weight:700;}
.bk-num{margin:0 0 2px; font-size:13px; color:var(--ink-soft);}
.bk-sub{margin:6px 0 0; font:400 15px/2.2 'Noto Nastaliq Urdu','Amiri',serif; color:var(--ink);}
.bk-meta{margin:6px 0 0; font-size:14px; color:var(--ink-soft);}
.bk-note{margin:10px 0 0; display:flex; flex-direction:column; gap:2px; color:var(--ink);}
.bk-note [lang="ur"]{font:400 14px/2.2 'Noto Nastaliq Urdu','Amiri',serif;}
.bk-actions{margin:16px 0 0; display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.bk-btn{
  display:inline-block; padding:8px 20px; border-radius:3px; text-decoration:none; font-size:15px;
  background:var(--maroon); color:var(--leaf); border:1px solid var(--maroon);
}
.bk-btn.ghost{background:transparent; color:var(--maroon);}
.bk-btn:hover{filter:brightness(1.12);}
.bk-btn:focus-visible,.bk-pager a:focus-visible,.bk-grid a:focus-visible,.bk-suras a:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}

.book-page .spread{margin-bottom:22px;}

/* ---- between pages: previous on the right, next on the left ---- */
.bk-pager{display:flex; justify-content:space-between; align-items:center; gap:10px; max-width:1500px; margin:6px auto 0; flex-wrap:wrap;}
.bk-pager a{
  padding:9px 16px; border:1px solid var(--rule-hard); border-radius:3px; background:var(--leaf);
  color:var(--ink); text-decoration:none; font-size:15px;
}
.bk-pager a:hover{border-color:var(--gold); color:var(--maroon);}
.bk-pager .pv{order:1;}
.bk-pager .pv::before{content:'→ ';}
.bk-pager .rd{order:2; margin:0 auto; border-color:transparent; background:transparent; color:var(--gold-ink);}
.bk-pager .nx{order:3;}
.bk-pager .nx::after{content:' ←';}

/* ---- a sura ---- */
.bk-opening h2,.bk-ayat h2{text-align:center; font-size:20px; color:var(--maroon); margin:18px 0 12px;}
.bk-opening .leaf{padding:22px 28px;}
.bk-more{text-align:center; margin:-8px 0 10px;}
.bk-more a{color:var(--gold-ink);}
.bk-ayat{max-width:1000px; margin:0 auto 26px;}
.bk-hint{text-align:center; margin:0 0 12px; font-size:13px; color:var(--ink-soft);}
.bk-grid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:6px;}
.bk-grid a,.bk-grid span{
  display:block; text-align:center; padding:6px 0; border-radius:3px; text-decoration:none;
  background:var(--leaf); border:1px solid var(--deck); color:var(--ink); font-size:15px;
}
.bk-grid a:hover{border-color:var(--gold); color:var(--maroon);}
.bk-grid a.joint{color:var(--ink-faint);}
.bk-grid span{opacity:.5;}

/* ---- the list of suras ---- */
.bk-suras{list-style:none; margin:0 auto; padding:0; max-width:1200px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:8px;}
.bk-suras a{
  display:grid; grid-template-columns:auto 1fr auto; grid-template-areas:'no nm at' 'no ur at';
  align-items:center; column-gap:12px; padding:8px 14px; border-radius:3px; text-decoration:none;
  background:var(--leaf); border:1px solid var(--deck); color:var(--ink);
}
.bk-suras a:hover{border-color:var(--gold);}
.bk-suras .no{grid-area:no; min-width:32px; text-align:center; color:var(--gold-ink); font-size:14px;}
.bk-suras .nm{grid-area:nm; font-size:18px; color:var(--maroon); font-weight:700;}
.bk-suras .ur{grid-area:ur; font:400 13px/2 'Noto Nastaliq Urdu','Amiri',serif; color:var(--ink-soft);}
.bk-suras .at{grid-area:at; font-size:12px; color:var(--ink-soft);}

.bk-foot{text-align:center; padding:20px; font-size:13px; color:var(--ink-soft); border-top:1px solid var(--rule);}
.bk-foot p{margin:4px 0;}
.bk-foot a{color:var(--gold-ink);}

/* ---- a phone: the Arabic, then its Urdu, one under the other ---- */
@media (max-width:860px){
  .book-page .spread{flex-direction:column;}
  .book-page .leaf.ar{order:1;}
  .book-page .leaf.ur{order:2;}
  .book-page .leaf{flex-basis:auto !important;}
}
@media (max-width:560px){
  .book-page main{padding:0 10px 30px;}
  .bk-bar{padding:8px 12px; gap:8px;}
  .bk-brand small{display:none;}
  .bk-links a{padding:5px 7px; font-size:13px;}
  .bk-intro h1{font-size:24px;}
  .bk-crumbs{padding:10px 12px 0;}
  .bk-pager .rd{order:4; width:100%; text-align:center;}
}