/* v19: prevent iOS/Safari/PWA automatic text inflation */
html,body,main,#app{
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
@font-face{font-family:"Al Qalam Quran Majeed Web";src:url("https://raw.githubusercontent.com/IsmailHosenIsmailJames/al_quran_v3/31ae27913faae323957f1b5888eed035369e0019/assets/fonts/Quran/Al%20Qalam%20Quran%20Majeed%20Web%20Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:block}
:root{--bg:#f6f2e8;--card:#fffdf7;--ink:#17332d;--muted:#6d7771;--accent:#0f5b4d;--gold:#b58b38;--line:#e4dccb;--fs:19px;--arabic-fs:35px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif;padding-bottom:90px}body.dark{--bg:#0e1816;--card:#16231f;--ink:#f5f0e4;--muted:#aab4af;--line:#2a3a35;--accent:#76b9a7;--gold:#d8b76d}header{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}header h1{font-family:"Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;font-size:25px;margin:0}header p{margin:2px 0 0;color:var(--muted);font-size:12px}.icon{border:0;background:var(--card);color:var(--ink);border-radius:50%;width:40px;height:40px;font-size:24px}.icon:last-child{margin-left:auto}.hidden{visibility:hidden}main{max-width:760px;margin:auto;padding:22px 16px}.hero{padding:24px;border-radius:24px;background:linear-gradient(145deg,var(--accent),#163b34);color:#fff;margin-bottom:22px}.hero h2{font:700 34px/1.05 "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:0 0 8px}.hero p{opacity:.85;margin:0}.langs{display:grid;grid-template-columns:1fr 1fr;gap:12px}.lang,.naat-card,.verse,.setting{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px}.lang{min-height:120px;text-align:left;color:var(--ink)}.lang b{font:700 23px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;display:block}.lang span{color:var(--muted);font-size:13px}.count{margin-top:18px;color:var(--gold);font-weight:700}.section-title{font:700 25px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:10px 2px 14px}.naat-card{display:block;width:100%;text-align:left;color:var(--ink);margin-bottom:12px}.naat-card b{font:700 20px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif}.naat-card small{display:block;color:var(--muted);margin-top:6px}.reader-head{text-align:center;margin:8px 0 24px}.reader-head h2{font:700 30px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;margin:0 0 8px}.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:99px;padding:5px 10px;font-size:12px;font-weight:700}.author{font-size:13px;color:var(--muted);margin:12px auto;max-width:520px}.fav{margin-top:12px;border:0;background:var(--card);color:var(--ink);padding:9px 14px;border-radius:99px}.refrain,.verse{margin:0 0 14px}.refrain{background:color-mix(in srgb,var(--gold) 12%,var(--card));border:1px solid var(--line);border-radius:18px;padding:18px;text-align:center;white-space:pre-line;font-size:19px;line-height:1.65}.verse-num{color:var(--gold);font-size:12px;font-weight:800;margin-bottom:10px}.lyrics{white-space:pre-line;font-family:"Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;font-size:19px;line-height:1.78;letter-spacing:.005em}.arabic{font-family:"Al Qalam Quran Majeed Web","Geeza Pro","Noto Naskh Arabic","Times New Roman",serif;direction:rtl;text-align:right;font-size:35px !important;line-height:1.9}.translation{white-space:pre-line;font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-size:19px;line-height:1.65;color:var(--muted);font-style:italic}.translation-label{font-style:normal;text-transform:uppercase;letter-spacing:.08em;font-size:10px;color:var(--gold);font-weight:800;margin-bottom:7px}nav{position:fixed;z-index:8;bottom:0;left:0;right:0;padding:8px 20px calc(8px + env(safe-area-inset-bottom));display:flex;justify-content:space-around;background:var(--card);border-top:1px solid var(--line)}nav button{border:0;background:none;color:var(--muted);font-size:21px;min-width:70px}nav button span{display:block;font-size:10px;margin-top:2px}nav button.active{color:var(--accent)}.setting{margin-bottom:12px}.setting label{display:flex;justify-content:space-between;align-items:center}.setting input{width:100%;margin-top:14px}.empty{text-align:center;color:var(--muted);padding:50px 10px}@media(max-width:380px){.langs{grid-template-columns:1fr}.hero h2{font-size:30px}}

.hero-mark{font-family:"Geeza Pro","Noto Naskh Arabic",serif;font-size:28px;opacity:.9;margin-bottom:10px}.collection-title{margin-top:28px}.collection-card{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px}.collection-card b{display:block;font:700 23px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif}.collection-card span{display:block;color:var(--muted);font-size:13px;margin-top:5px}.collection-count{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--gold) 14%,var(--card));color:var(--gold);font-weight:800}.image-verse{padding:10px;overflow:hidden}.image-verse .verse-num{padding:8px 8px 0}.image-verse img{display:block;width:100%;height:auto;border-radius:12px;background:#fff}.about{color:var(--muted);line-height:1.6}.lyrics{font-weight:500}.translation{font-family:"Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;font-style:normal}.translation-label{font-family:"Avenir Next",Avenir,"Helvetica Neue",sans-serif}

/* v4 home refresh */
body.home-view header{position:relative;overflow:hidden;min-height:112px;align-items:flex-start;padding-top:calc(22px + env(safe-area-inset-top))}
body.home-view header>div{position:relative;z-index:2}
body.home-view header h1{font-size:31px}
body.home-view header p{font-size:14px;color:color-mix(in srgb,var(--accent) 55%,var(--muted))}
body.home-view header::after{content:"";position:absolute;right:50px;bottom:-22px;width:126px;height:86px;background:color-mix(in srgb,#2e7d63 20%,transparent);border-radius:70px 70px 8px 8px;opacity:.55;z-index:0}
body.home-view header::before{content:"";position:absolute;right:104px;bottom:61px;width:18px;height:30px;background:color-mix(in srgb,#2e7d63 20%,transparent);clip-path:polygon(50% 0,64% 42%,100% 42%,100% 100%,0 100%,0 42%,36% 42%);opacity:.55;z-index:0}
body.home-view #theme{position:relative;z-index:3}
.hero{padding:22px 24px 25px;background:linear-gradient(145deg,#0c6a55,#153f36);overflow:hidden}
.hero-calligraphy{display:block;width:100%;height:auto;max-height:90px;object-fit:contain;object-position:center;margin:0 auto 19px;filter:none}
.hero h2{font-size:38px;margin:0 0 10px}
.hero p{font-size:16px;line-height:1.45;opacity:.92}
@media(max-width:430px){.hero{padding:20px 20px 23px}.hero-calligraphy{max-height:72px;margin-bottom:16px}.hero h2{font-size:35px}.hero p{font-size:15px}body.home-view header::after{right:36px;width:112px;height:76px}body.home-view header::before{right:84px;bottom:54px}}

/* v10 homepage symbol */
body.home-view header::before,body.home-view header::after{display:none!important}
body.home-view header{background-image:url("home-symbol.png");background-repeat:no-repeat;background-position:right 58px center;background-size:78px auto}
@media(max-width:430px){body.home-view header{background-position:right 50px center;background-size:68px auto}}

/* v13 Urdu subsection */
.subsection-title{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);color:var(--gold)}


/* v19 definitive reader sizing */
.refrain,
.lyrics:not(.arabic),
.translation{
  font-size:19px !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}
.lyrics.arabic{
  font-size:35px !important;
  -webkit-text-size-adjust:none !important;
  text-size-adjust:none !important;
}



/* v27 Arabic rendering: every supplied Arabic line uses the same 35px size.
   Lines are allowed to wrap naturally inside the verse card so nothing can spill past the box. */
.verse .lyrics.arabic{
  display:block;
  width:100%;
  max-width:100%;
  padding:0 8px;
  box-sizing:border-box;
  white-space:normal !important;
  direction:rtl;
  text-align:right;
  overflow-wrap:normal;
  word-break:normal;
}
.verse .lyrics.arabic .arabic-line{
  display:block;
  width:100%;
  max-width:100%;
  margin:0;
  white-space:normal !important;
  overflow-wrap:normal;
  word-break:normal;
  text-align:right;
  direction:rtl;
  unicode-bidi:plaintext;
  font-size:35px !important;
  line-height:1.9;
}
/* v44: never flash a fallback Arabic font. The preferred font is preloaded at app start
   and Arabic lyrics are revealed only once that exact font is ready. */
html.arabic-font-loading .lyrics.arabic{visibility:hidden}
html.arabic-font-ready .lyrics.arabic{visibility:visible}

/* v28: make non-Arabic Naat lyrics bold while keeping translations unchanged. */
.lyrics:not(.arabic),
.refrain{
  font-weight:700 !important;
}
.translation,
.translation *{
  font-weight:400;
}
.translation-label{
  font-weight:800 !important;
}

/* v32: preserve intentional blank lines inside Arabic verses (Qad Kafani verses 2–6). */
.verse .lyrics.arabic .arabic-line:empty{
  height:.72em;
  line-height:.72em;
}


/* v34: Qad Kafani verses 2–6 — restore normal spacing within each couplet,
   while keeping the larger separation between lines 2 and 3. */
.verse.qad-kafani-spaced .lyrics.arabic .arabic-line{
  line-height:1.9;
}
.verse.qad-kafani-spaced .lyrics.arabic .arabic-line:empty{
  height:1.18em;
  line-height:1.18em;
}


/* v38: Qamarun — robust iOS shaping fix for أَنَارَ in every occurrence.
   Keep the word visually intact, but separate the non-joining Alif and Noon by a tiny gap. */
.verse .lyrics.arabic .arabic-split-word{
  display:inline-flex;
  flex-direction:row;
  direction:rtl;
  unicode-bidi:isolate;
  align-items:baseline;
  column-gap:.10em;
  white-space:nowrap;
  vertical-align:baseline;
}
.verse .lyrics.arabic .arabic-split-word.gap-tiny{
  column-gap:.10em;
}
.verse .lyrics.arabic .arabic-split-word.gap-small{
  column-gap:.14em;
}
.verse .lyrics.arabic .arabic-split-part{
  display:block;
  flex:0 0 auto;
  font:inherit;
  line-height:inherit;
  letter-spacing:normal;
}


/* v40: Suggest a Naat submission page */
.suggest-intro{
  margin-bottom:18px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--card);
}
.suggest-intro h2{margin:0 0 8px;font:700 28px "Iowan Old Style","Hoefler Text",Palatino,Georgia,serif;color:var(--ink)}
.suggest-intro p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.suggest-form{display:grid;gap:16px;margin-bottom:22px;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.form-field{display:grid;gap:7px}
.form-label{font-size:13px;font-weight:800;color:var(--ink)}
.suggest-form input,.suggest-form select,.suggest-form textarea{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--line);
  border-radius:13px;
  background:var(--bg);
  color:var(--ink);
  padding:12px 13px;
  font:500 16px/1.45 "Avenir Next",Avenir,"Helvetica Neue",sans-serif;
  -webkit-appearance:none;
  appearance:none;
}
.suggest-form select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.suggest-form textarea{resize:vertical;min-height:110px}
.suggest-form input:focus,.suggest-form select:focus,.suggest-form textarea:focus{outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:1px;border-color:var(--accent)}
.submission-note{margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.submit-naat{border:0;border-radius:14px;padding:14px 18px;background:var(--accent);color:#fff;font-size:16px;font-weight:800;min-height:50px}
.submit-naat:disabled{opacity:.6}
.submission-status{min-height:22px;font-size:13px;line-height:1.5;text-align:center}
.submission-status.success{color:var(--accent);font-weight:700}
.submission-status.error{color:#a33;font-weight:700}
.submission-target,.submission-trap{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;clip-path:inset(50%)!important;border:0!important;padding:0!important;margin:-1px!important}


/* v44: stable cross-platform PWA bottom navigation (iPhone, iPad and Android) */
html{height:100%;background:var(--bg)}
body{min-height:100vh;min-height:100dvh;padding-bottom:calc(76px + env(safe-area-inset-bottom))}
main{min-height:calc(100dvh - 150px)}
nav{
  position:fixed!important;
  left:0!important;right:0!important;bottom:0!important;
  width:100%!important;
  min-height:64px;
  padding:8px 8px calc(8px + env(safe-area-inset-bottom))!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:start;
  justify-items:center;
  transform:translateZ(0);
  -webkit-transform:translateZ(0);
}
nav button{min-width:0!important;width:100%;padding:2px 0;font-size:21px;white-space:nowrap}
nav button span{font-size:10px}
@supports(height:100svh){body{min-height:100svh}main{min-height:calc(100svh - 150px)}}

/* v52: improve back-to-list restoration anchor */
.naat-card{scroll-margin-top:96px}


/* v53: align the homepage title and emblem cleanly on one line. */
body.home-view header{
  min-height:96px;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 12px 12px;
  background-position:right 62px center;
  background-size:62px auto;
}
body.home-view header>div{margin-left:0;max-width:calc(100% - 130px)}
body.home-view header h1{font-size:29px;line-height:1.08}
body.home-view header p{font-size:13px;line-height:1.3}
@media(max-width:430px){
  body.home-view header{
    min-height:92px;
    padding-left:10px;
    background-position:right 58px center;
    background-size:58px auto;
  }
  body.home-view header h1{font-size:28px}
  body.home-view header p{font-size:12px}
}


/* v54: homepage masthead — text starts further left and emblem sits visually in line. */
body.home-view #back{display:none!important}
body.home-view header{
  min-height:104px;
  align-items:center;
  padding:calc(12px + env(safe-area-inset-top)) 14px 12px 18px;
  background-position:right 76px calc(50% + 7px);
  background-size:66px auto;
}
body.home-view header>div{
  margin-left:0!important;
  max-width:calc(100% - 142px)!important;
}
body.home-view header h1{font-size:30px;line-height:1.08}
body.home-view header p{font-size:13px;line-height:1.3}
@media(max-width:430px){
  body.home-view header{
    min-height:100px;
    padding-left:16px;
    background-position:right 70px calc(50% + 7px);
    background-size:62px auto;
  }
  body.home-view header>div{max-width:calc(100% - 132px)!important}
  body.home-view header h1{font-size:28px}
  body.home-view header p{font-size:12px}
}

/* v54: interactive edge-swipe animation, similar to iOS navigation. */
body.swipe-active header,
body.swipe-active main{
  transform:translate3d(var(--swipe-x,0),0,0);
  will-change:transform;
}
body.swipe-transition header,
body.swipe-transition main{
  transition:transform 220ms cubic-bezier(.22,.61,.36,1);
}
body.swipe-active::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.08),rgba(0,0,0,0) 42px);
  opacity:min(.28,calc(var(--swipe-x,0px) / 500));
}


/* v55: definitive homepage masthead alignment. Use a real flex item for the
   emblem rather than a background image, so title, emblem and theme control
   share the same vertical centre at every viewport width. */
.header-logo{display:none}
body.home-view header{
  background-image:none!important;
  min-height:112px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 74px 64px!important;
  align-items:center!important;
  column-gap:14px!important;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
}
body.home-view #back{display:none!important}
body.home-view header>.header-copy{
  min-width:0!important;
  width:auto!important;
  max-width:none!important;
  margin:0!important;
  align-self:center!important;
}
body.home-view header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap}
body.home-view header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap}
body.home-view .header-logo{
  display:block!important;
  width:74px!important;
  height:74px!important;
  object-fit:contain!important;
  justify-self:center!important;
  align-self:center!important;
}
body.home-view #theme{
  margin:0!important;
  justify-self:end!important;
  align-self:center!important;
}
@media(max-width:520px){
  body.home-view header{
    min-height:104px!important;
    grid-template-columns:minmax(0,1fr) 58px 48px!important;
    column-gap:10px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
  body.home-view header h1{font-size:28px!important}
  body.home-view header p{font-size:12px!important;margin-top:5px!important}
  body.home-view .header-logo{width:58px!important;height:58px!important}
}
@media(max-width:390px){
  body.home-view header{grid-template-columns:minmax(0,1fr) 52px 44px!important;column-gap:7px!important;padding-left:12px!important;padding-right:12px!important}
  body.home-view header h1{font-size:25px!important}
  body.home-view header p{font-size:11px!important}
  body.home-view .header-logo{width:52px!important;height:52px!important}
}

/* v55: true reveal-underneath swipe. */
.swipe-underlay{
  position:fixed;
  inset:0;
  z-index:3;
  overflow:hidden;
  pointer-events:none;
  background:var(--bg);
  transform:translate3d(calc(-24px + (var(--swipe-progress,0) * 24px)),0,0);
  will-change:transform;
}
.swipe-underlay .snapshot-header{z-index:2!important}
.swipe-underlay .snapshot-main{z-index:1!important}
.swipe-underlay.home-snapshot .snapshot-header{
  background-image:none!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 74px 64px!important;
  align-items:center!important;
  column-gap:14px!important;
}
.swipe-underlay.home-snapshot .snapshot-header .header-logo{display:block!important;width:74px!important;height:74px!important;object-fit:contain!important;align-self:center!important;justify-self:center!important}
.swipe-underlay.home-snapshot .snapshot-header .icon:first-child{display:none!important}
body.swipe-active header:not(.snapshot-header),
body.swipe-active main:not(.snapshot-main){
  position:relative;
  z-index:5;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform;
  box-shadow:-8px 0 18px rgba(0,0,0,.10);
  background:var(--bg);
}
body.swipe-transition header:not(.snapshot-header),
body.swipe-transition main:not(.snapshot-main),
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
body.swipe-active::before{display:none!important}


/* v56: final masthead geometry. The emblem is aligned to the TITLE ROW,
   not to the combined title+subtitle block. Its native 700:470 aspect ratio
   is preserved so it does not look vertically displaced. */
body.home-view header{
  background-image:none!important;
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
}
body.home-view #back{display:none!important}
body.home-view header>.header-copy{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
body.home-view header h1{
  margin:0!important;
  font-size:31px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
}
body.home-view header p{
  margin:7px 0 0!important;
  font-size:14px!important;
  line-height:1.25!important;
  white-space:nowrap!important;
}
body.home-view .header-logo{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:92px!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  transform:none!important;
}
body.home-view #theme{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}
@media(max-width:520px){
  body.home-view header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  body.home-view header h1{font-size:28px!important}
  body.home-view header p{font-size:12px!important;margin-top:5px!important}
  body.home-view .header-logo{width:70px!important;height:auto!important}
}
@media(max-width:390px){
  body.home-view header{grid-template-columns:minmax(0,1fr) auto 44px!important;column-gap:7px!important;padding-left:12px!important;padding-right:12px!important}
  body.home-view header h1{font-size:25px!important}
  body.home-view header p{font-size:11px!important}
  body.home-view .header-logo{width:62px!important;height:auto!important}
}

/* v56: previous page is an actual viewport clone under the moving foreground.
   Keep the underlay mounted only while dragging and move header/main/nav together. */
.swipe-underlay{
  position:fixed!important;
  inset:0!important;
  z-index:20!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:var(--bg)!important;
  transform:translate3d(-18px,0,0)!important;
  opacity:1!important;
}
.swipe-underlay .snapshot-header,
.swipe-underlay .snapshot-main,
.swipe-underlay .snapshot-nav{pointer-events:none!important}
body.swipe-active > header,
body.swipe-active > main,
body.swipe-active > nav{
  position:relative!important;
  z-index:30!important;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform!important;
  box-shadow:-8px 0 18px rgba(0,0,0,.12)!important;
}
body.swipe-active > nav{position:fixed!important}
body.swipe-active .swipe-underlay{
  transform:translate3d(calc(-18px + (18px * var(--swipe-progress,0))),0,0)!important;
}
body.swipe-transition > header,
body.swipe-transition > main,
body.swipe-transition > nav,
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
html,body{overscroll-behavior-x:none}

/* v57: precise homepage masthead alignment from user screenshot. */
body.home-view .header-logo{
  transform:translateY(-12px)!important;
}
body.home-view #theme{
  transform:translateY(-12px)!important;
}
@media(max-width:520px){
  body.home-view .header-logo,
  body.home-view #theme{transform:translateY(-10px)!important}
}

/* v57: reliable live-looking previous-page reveal during iOS-style edge swipe. */
.swipe-underlay{
  position:fixed!important;
  inset:0!important;
  z-index:9998!important;
  overflow:hidden!important;
  pointer-events:none!important;
  background:var(--bg)!important;
  opacity:1!important;
  transform:translate3d(calc(-22px + (22px * var(--swipe-progress,0))),0,0)!important;
  will-change:transform!important;
}
.swipe-underlay .snapshot-page{
  position:absolute!important;
  inset:0!important;
  overflow:hidden!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-header{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  z-index:3!important;
}
.swipe-underlay .snapshot-main{
  position:absolute!important;
  top:0!important;
  left:0!important;
  right:0!important;
  width:100%!important;
  max-width:760px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  z-index:1!important;
  min-height:100vh!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-nav{
  position:absolute!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  width:100%!important;
  z-index:4!important;
}
.swipe-underlay.snapshot-home-view,
.swipe-underlay .snapshot-home-view{background:var(--bg)!important}
.swipe-underlay .snapshot-home-view .snapshot-header{
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
  background:var(--bg)!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header>.header-copy{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap!important}
.swipe-underlay .snapshot-home-view .snapshot-header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap!important}
.swipe-underlay .snapshot-home-view .snapshot-header .header-logo{
  display:block!important;
  grid-column:2!important;
  grid-row:1!important;
  width:92px!important;
  height:auto!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:center!important;
  transform:translateY(-12px)!important;
}
.swipe-underlay .snapshot-home-view .snapshot-header .icon:first-child{display:none!important}
.swipe-underlay .snapshot-home-view .snapshot-header .icon:last-child{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  transform:translateY(-12px)!important;
}
body.swipe-active > header,
body.swipe-active > main,
body.swipe-active > nav{
  z-index:9999!important;
  transform:translate3d(var(--swipe-x,0),0,0)!important;
  will-change:transform!important;
}
body.swipe-active > header,
body.swipe-active > main{position:relative!important;background:var(--bg)!important}
body.swipe-active > nav{position:fixed!important}
body.swipe-active > main::before{
  content:"";
  position:fixed;
  top:0;
  bottom:0;
  left:-24px;
  width:24px;
  background:var(--bg);
}
body.swipe-active > header{box-shadow:-10px 0 24px rgba(0,0,0,.13)!important}
body.swipe-transition > header,
body.swipe-transition > main,
body.swipe-transition > nav,
body.swipe-transition .swipe-underlay{
  transition:transform 260ms cubic-bezier(.22,.61,.36,1)!important;
}
@media(max-width:520px){
  .swipe-underlay .snapshot-home-view .snapshot-header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header h1{font-size:28px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header p{font-size:12px!important;margin-top:5px!important}
  .swipe-underlay .snapshot-home-view .snapshot-header .header-logo{width:70px!important;transform:translateY(-10px)!important}
  .swipe-underlay .snapshot-home-view .snapshot-header .icon:last-child{transform:translateY(-10px)!important}
}
.swipe-underlay .snapshot-main{top:var(--snapshot-main-top,0px)!important}


/* v61 Arabic verse-specific layout */
/* Qasida Muhammadiya: keep the specified longer couplets at two visual lines. */
.verse.qasida-two-line .lyrics.arabic .arabic-line{
  white-space:nowrap !important;
  font-size:clamp(29px,7.6vw,35px) !important;
}
/* Ya Sayyidi Irham Lana: a little extra separation between the two Arabic lines in verses 2 through 7. */
.verse.ya-sayyidi-line-gap .lyrics.arabic .arabic-line + .arabic-line{
  margin-top:.28em;
}

.legal-links{margin:22px 0 8px;text-align:center;color:var(--muted);font-size:13px}.legal-links a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}


/* v62: tablet/iPad responsive layout */
@media (min-width:768px){
  main{max-width:1080px;padding:30px 28px calc(104px + env(safe-area-inset-bottom))}
  .hero{padding:32px 36px;border-radius:28px}
  .hero-calligraphy{max-height:104px}
  .langs{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .lang{min-height:144px;padding:22px}
  .lang b{font-size:24px}
  .collection-card{padding:24px 26px}
  .naat-card{padding:20px 22px}
  body.reader-view main{max-width:860px}
  body.reader-view .reader-head{margin-top:14px;margin-bottom:28px}
  body.reader-view .verse,body.reader-view .refrain{padding:22px 24px;border-radius:20px}
  body.list-view main{max-width:920px}
  body.form-view main{max-width:820px}
  body.form-view .suggest-form,body.form-view .suggest-intro{padding:24px}
  body.home-view header{padding-left:max(24px,calc((100vw - 1080px)/2 + 24px))!important;padding-right:max(24px,calc((100vw - 1080px)/2 + 24px))!important}
}
@media (min-width:1024px){
  main{max-width:1180px;padding-left:36px;padding-right:36px}
  body.reader-view main{max-width:900px}
  body.list-view main{max-width:980px}
  body.form-view main{max-width:860px}
  .hero{padding:36px 42px}
  .langs{gap:18px}
}
@media (min-width:768px) and (orientation:landscape){
  body.reader-view main{max-width:940px}
  body.reader-view .verse,body.reader-view .refrain{padding-left:28px;padding-right:28px}
}


/* v81 r23: Privacy Policy is rendered inside the app and inherits the same theme variables. */
.privacy-view main{max-width:900px;padding-bottom:118px}
.privacy-card{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:20px;padding:24px;line-height:1.65}
.privacy-title{font:700 31px/1.15 "Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;margin:0 0 8px;color:var(--ink)}
.privacy-meta{color:var(--muted);font-size:14px;margin:0 0 26px}
.privacy-heading{font:700 22px/1.2 "Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;margin:28px 0 9px;color:var(--ink)}
.privacy-copy,.privacy-list{font-size:16px;line-height:1.68;color:var(--ink)}
.privacy-copy{margin:0 0 14px}.privacy-list{padding-left:23px;margin:0 0 14px}.privacy-list li{margin:5px 0}
.privacy-email{color:var(--accent);font-weight:650;overflow-wrap:anywhere}
.privacy-link-button{appearance:none;-webkit-appearance:none;border:0;background:none;padding:12px 4px;color:var(--accent);font:700 14px/1.3 "Avenir Next",Avenir,"Helvetica Neue",sans-serif;text-decoration:underline;cursor:pointer}
.feedback-privacy-link{margin-top:20px;text-align:center}
@media(max-width:480px){.privacy-view main{padding-left:12px;padding-right:12px}.privacy-card{padding:20px 17px}.privacy-title{font-size:28px}.privacy-heading{font-size:21px}}
@media(min-width:768px){.privacy-card{padding:34px 38px}.privacy-title{font-size:35px}.privacy-heading{font-size:23px}.privacy-copy,.privacy-list{font-size:17px}}

/* v81 favourites language grouping */
.favourite-language-title{margin-top:24px;color:var(--accent)}
.favourite-language-title:first-child{margin-top:10px}


/* v81 r27: Privacy Policy full-screen in-app overlay. Inherits the exact app theme variables. */
body.privacy-overlay-open{overflow:hidden}
.privacy-overlay{position:fixed;inset:0;z-index:50;background:var(--bg);color:var(--ink);display:flex;flex-direction:column;min-height:100dvh}
.privacy-overlay-header{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 18px 12px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.privacy-overlay-back{border:0;background:var(--card);color:var(--ink);border-radius:50%;width:40px;height:40px;font-size:28px;line-height:1;display:grid;place-items:center;padding:0;flex:0 0 auto}
.privacy-overlay-heading h1{font-family:"Iowan Old Style","Hoefler Text",Palatino,"Palatino Linotype",Georgia,serif;font-size:25px;line-height:1.1;margin:0;color:var(--ink)}
.privacy-overlay-heading p{margin:2px 0 0;color:var(--muted);font-size:12px}
.privacy-overlay-scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:22px 16px calc(30px + env(safe-area-inset-bottom));overscroll-behavior:contain}
.privacy-overlay-scroll .privacy-card{max-width:900px;margin:0 auto;background:var(--card);color:var(--ink)}
@media(max-width:480px){.privacy-overlay-scroll{padding-left:12px;padding-right:12px}.privacy-overlay-scroll .privacy-card{padding:20px 17px}}


/* v58: favourites language headings use app green; Manqabat retains gold. */
.favourite-language-title{color:var(--accent)!important}
.subsection-title{color:var(--gold)!important}

/* r62: restore the natural scrolling behavior from privacy_overlay_fixed. */
html,body{overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch}


/* r70 — rebuilt page-stack interactions. No legacy swipe classes are used. */
.nav-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:9000!important;
  overflow:hidden!important;
  pointer-events:none!important;
  visibility:hidden;
  background:var(--bg)!important;
  transform:translate3d(-22px,0,0);
  will-change:transform;
}
.nav-backdrop.nav-backdrop-visible{visibility:visible!important}
.nav-backdrop-viewport{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.nav-backdrop .nav-clone-header,
.nav-backdrop .nav-clone-main,
.nav-backdrop .nav-clone-nav{pointer-events:none!important}
/* Home has body-scoped masthead rules, so reproduce its final visual geometry inside the retained layer. */
.nav-backdrop-home .nav-clone-header{
  min-height:116px!important;display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;grid-template-rows:auto auto!important;
  column-gap:16px!important;row-gap:0!important;align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;background:var(--bg)!important;
}
.nav-backdrop-home .nav-clone-header>.header-copy{grid-column:1!important;grid-row:1 / span 2!important;align-self:start!important;min-width:0!important;margin:0!important;padding:0!important}
.nav-backdrop-home .nav-clone-header h1{font-size:31px!important;line-height:1.05!important;white-space:nowrap!important;margin:0!important}
.nav-backdrop-home .nav-clone-header p{font-size:14px!important;line-height:1.25!important;white-space:nowrap!important;margin:7px 0 0!important}
.nav-backdrop-home .nav-clone-header .header-logo{display:block!important;grid-column:2!important;grid-row:1!important;width:92px!important;height:auto!important;align-self:center!important;justify-self:center!important;transform:translateY(-12px)!important}
.nav-backdrop-home .nav-clone-header .icon:first-child{visibility:hidden!important}
.nav-backdrop-home .nav-clone-header .icon:last-child{grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:end!important;transform:translateY(-12px)!important}

body.stack-swipe-active > header,
body.stack-swipe-active > main,
body.stack-swipe-active > nav{
  z-index:9100!important;
  transform:translate3d(var(--stack-x,0),0,0)!important;
  will-change:transform!important;
}
body.stack-swipe-active > header,
body.stack-swipe-active > main{position:relative!important;background:var(--bg)!important}
body.stack-swipe-active > nav{position:fixed!important}
body.stack-swipe-active > header{box-shadow:-12px 0 26px rgba(0,0,0,.15)!important}
body.stack-swipe-active .nav-backdrop{
  transform:translate3d(calc(-22px + (22px * var(--stack-progress,0))),0,0)!important;
}
body.stack-swipe-animate > header,
body.stack-swipe-animate > main,
body.stack-swipe-animate > nav,
body.stack-swipe-animate .nav-backdrop{
  transition:transform 235ms cubic-bezier(.22,.61,.36,1)!important;
}

/* Deterministic native rubber-band: move only the scrollable content, as iOS Notes does beneath fixed chrome. */
body.rubber-active > main{
  transform:translate3d(0,var(--rubber-y,0),0)!important;
  will-change:transform!important;
}
body.rubber-release > main{
  transition:transform 410ms cubic-bezier(.18,.82,.22,1.18)!important;
}
html,body{overscroll-behavior-y:auto!important}

@media(max-width:520px){
  .nav-backdrop-home .nav-clone-header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  .nav-backdrop-home .nav-clone-header h1{font-size:28px!important}
  .nav-backdrop-home .nav-clone-header p{font-size:12px!important;margin-top:5px!important}
  .nav-backdrop-home .nav-clone-header .header-logo{width:70px!important;transform:translateY(-10px)!important}
  .nav-backdrop-home .nav-clone-header .icon:last-child{transform:translateY(-10px)!important}
}


/* r80 — unified fluid motion for iOS and Android */
html,body{overscroll-behavior-y:auto!important;overscroll-behavior-x:none!important}
body > header,body > main,body > nav,.nav-backdrop,.privacy-overlay{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;transform-style:preserve-3d;
}
body.page-enter > header,body.page-enter > main{animation:mnbPageEnter 240ms cubic-bezier(.22,1,.36,1) both}
@keyframes mnbPageEnter{from{opacity:.985;transform:translate3d(18px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@media (prefers-reduced-motion:reduce){body.page-enter > header,body.page-enter > main{animation:none!important}}
body.stack-swipe-active > header,body.stack-swipe-active > main,body.stack-swipe-active > nav{
  will-change:transform;transition:none!important;transform:translate3d(var(--stack-x,0),0,0)!important;
}
body.stack-swipe-active > header{box-shadow:-14px 0 28px rgba(0,0,0,.16)!important}
body.stack-swipe-active .nav-backdrop{
  will-change:transform,filter;transform:translate3d(calc(-28px + (28px * var(--stack-progress,0))),0,0)!important;
  filter:brightness(calc(.965 + (.035 * var(--stack-progress,0))));
}
body.stack-swipe-animate > header,body.stack-swipe-animate > main,body.stack-swipe-animate > nav,body.stack-swipe-animate .nav-backdrop{
  transition:transform var(--stack-duration,220ms) cubic-bezier(.22,1,.36,1),filter var(--stack-duration,220ms) cubic-bezier(.22,1,.36,1),box-shadow var(--stack-duration,220ms) cubic-bezier(.22,1,.36,1)!important;
}
.privacy-overlay{will-change:transform;transform:translate3d(0,0,0)}
.privacy-overlay.privacy-swipe-active{transform:translate3d(var(--privacy-swipe-x,0),0,0)!important;box-shadow:-14px 0 28px rgba(0,0,0,.16);transition:none!important}
.privacy-overlay.privacy-swipe-animate{transition:transform var(--privacy-swipe-duration,220ms) cubic-bezier(.22,1,.36,1),box-shadow var(--privacy-swipe-duration,220ms) cubic-bezier(.22,1,.36,1)!important}
.privacy-overlay-scroll{overscroll-behavior-y:auto!important;-webkit-overflow-scrolling:touch!important}
body.rubber-active > main{transform:none!important}


/* r90 — full-content interactive back + iOS-style motion tuning (iOS + Android). */
body > main,.privacy-overlay{touch-action:pan-y pinch-zoom}
body.stack-swipe-active .nav-backdrop{
  transform:translate3d(calc(-10vw + (10vw * var(--stack-progress,0))),0,0)!important;
  filter:brightness(calc(.94 + (.06 * var(--stack-progress,0))))!important;
}
body.stack-swipe-active > header{box-shadow:-18px 0 36px rgba(0,0,0,.18)!important}
body.stack-swipe-animate > header,body.stack-swipe-animate > main,body.stack-swipe-animate > nav,body.stack-swipe-animate .nav-backdrop{
  transition:transform var(--stack-duration,240ms) cubic-bezier(.20,.80,.20,1),filter var(--stack-duration,240ms) cubic-bezier(.20,.80,.20,1),box-shadow var(--stack-duration,240ms) cubic-bezier(.20,.80,.20,1)!important;
}
.privacy-overlay.privacy-swipe-active{box-shadow:-18px 0 36px rgba(0,0,0,.18)!important}
.privacy-overlay.privacy-swipe-animate{
  transition:transform var(--privacy-swipe-duration,240ms) cubic-bezier(.20,.80,.20,1),box-shadow var(--privacy-swipe-duration,240ms) cubic-bezier(.20,.80,.20,1)!important;
}
body.page-enter > header,body.page-enter > main{animation:mnbPageEnter90 275ms cubic-bezier(.16,1,.30,1) both}
@keyframes mnbPageEnter90{from{opacity:.992;transform:translate3d(14px,0,0)}to{opacity:1;transform:translate3d(0,0,0)}}


/* v92: unified root-page masthead. Home, Favourites, Suggest and Feedback
   share the same title-left / emblem-centre / theme-right geometry. */
body.root-header header{
  background-image:none!important;
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
}
body.root-header #back{display:none!important}
body.root-header header>.header-copy{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  align-self:start!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
body.root-header header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap!important}
body.root-header header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap!important}
body.root-header .header-logo{
  grid-column:2!important;
  grid-row:1!important;
  display:block!important;
  width:92px!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  align-self:center!important;
  justify-self:center!important;
  margin:0!important;
  transform:none!important;
}
body.root-header #theme{
  grid-column:3!important;
  grid-row:1!important;
  align-self:center!important;
  justify-self:end!important;
  margin:0!important;
}
/* Retained root pages keep the same masthead while revealed underneath a swipe. */
.nav-backdrop-rootheader .nav-clone-header{
  min-height:116px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto 64px!important;
  grid-template-rows:auto auto!important;
  column-gap:16px!important;
  row-gap:0!important;
  align-items:start!important;
  padding:calc(17px + env(safe-area-inset-top)) 18px 15px!important;
}
.nav-backdrop-rootheader .nav-clone-header>.header-copy{grid-column:1!important;grid-row:1 / span 2!important;align-self:start!important;min-width:0!important;margin:0!important;padding:0!important}
.nav-backdrop-rootheader .nav-clone-header h1{margin:0!important;font-size:31px!important;line-height:1.05!important;white-space:nowrap!important}
.nav-backdrop-rootheader .nav-clone-header p{margin:7px 0 0!important;font-size:14px!important;line-height:1.25!important;white-space:nowrap!important}
.nav-backdrop-rootheader .nav-clone-header .header-logo{display:block!important;grid-column:2!important;grid-row:1!important;width:92px!important;height:auto!important;object-fit:contain!important;align-self:center!important;justify-self:center!important;margin:0!important;transform:none!important}
.nav-backdrop-rootheader .nav-clone-header .icon:first-child{display:none!important}
.nav-backdrop-rootheader .nav-clone-header .icon:last-child{grid-column:3!important;grid-row:1!important;align-self:center!important;justify-self:end!important;margin:0!important;transform:none!important}
@media(max-width:520px){
  body.root-header header,.nav-backdrop-rootheader .nav-clone-header{grid-template-columns:minmax(0,1fr) auto 48px!important;column-gap:10px!important;padding-left:14px!important;padding-right:14px!important}
  body.root-header header h1,.nav-backdrop-rootheader .nav-clone-header h1{font-size:28px!important}
  body.root-header header p,.nav-backdrop-rootheader .nav-clone-header p{font-size:12px!important;margin-top:5px!important}
  body.root-header .header-logo,.nav-backdrop-rootheader .nav-clone-header .header-logo{width:70px!important;height:auto!important}
}
@media(max-width:390px){
  body.root-header header,.nav-backdrop-rootheader .nav-clone-header{grid-template-columns:minmax(0,1fr) auto 44px!important;column-gap:7px!important;padding-left:12px!important;padding-right:12px!important}
  body.root-header header h1,.nav-backdrop-rootheader .nav-clone-header h1{font-size:25px!important}
  body.root-header header p,.nav-backdrop-rootheader .nav-clone-header p{font-size:11px!important}
  body.root-header .header-logo,.nav-backdrop-rootheader .nav-clone-header .header-logo{width:62px!important;height:auto!important}
}


/* r93: On form pages, move the persistent bottom navigation completely out
   of the way while the user is typing/selecting. Shared by iOS + Android. */
body.form-editing > nav{
  transform:translate3d(0,calc(100% + env(safe-area-inset-bottom)),0)!important;
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden!important;
  transition:transform 180ms cubic-bezier(.22,.61,.36,1),opacity 120ms ease,visibility 0s linear 180ms!important;
}
body.form-editing{
  padding-bottom:calc(18px + env(safe-area-inset-bottom))!important;
}
body.form-editing main{
  padding-bottom:calc(28px + env(safe-area-inset-bottom))!important;
}


/* r96 — continuous page motion with retained previous page; no redraw flash. */
body.page-enter-prep > header,
body.page-enter-prep > main{
  transform:translate3d(22px,0,0);
  opacity:.998;
  will-change:transform,opacity;
  transition:none!important;
}
body.page-enter-prep.page-enter-run > header,
body.page-enter-prep.page-enter-run > main{
  transform:translate3d(0,0,0);
  opacity:1;
  transition:transform 255ms cubic-bezier(.20,.80,.20,1),opacity 180ms ease-out!important;
}
body.page-enter-prep .nav-backdrop{visibility:visible!important;}

/* r96 root masthead: emblem left, copy perfectly centred, theme right. */
body.root-header header{
  grid-template-columns:64px minmax(0,1fr) 64px!important;
  grid-template-rows:1fr!important;
  align-items:center!important;
  min-height:106px!important;
  padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
}
body.root-header .header-logo{
  grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important;
  width:68px!important;height:68px!important;transform:none!important;
}
body.root-header header>.header-copy{
  grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:center!important;
  width:100%!important;text-align:center!important;transform:translateY(5px)!important;
}
body.root-header header h1{white-space:normal!important;text-align:center!important;line-height:1.05!important;}
body.root-header header p{white-space:normal!important;text-align:center!important;margin-top:5px!important;}
body.root-header #theme{
  grid-column:3!important;grid-row:1!important;justify-self:end!important;align-self:center!important;transform:none!important;
}
.nav-backdrop-rootheader .nav-clone-header{
  grid-template-columns:64px minmax(0,1fr) 64px!important;grid-template-rows:1fr!important;align-items:center!important;
  min-height:106px!important;padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;
}
.nav-backdrop-rootheader .nav-clone-header .header-logo{grid-column:1!important;grid-row:1!important;justify-self:start!important;align-self:center!important;width:68px!important;height:68px!important;}
.nav-backdrop-rootheader .nav-clone-header>.header-copy{grid-column:2!important;grid-row:1!important;align-self:center!important;justify-self:center!important;width:100%!important;text-align:center!important;transform:translateY(5px)!important;}
.nav-backdrop-rootheader .nav-clone-header h1,.nav-backdrop-rootheader .nav-clone-header p{text-align:center!important;white-space:normal!important;}
.nav-backdrop-rootheader .nav-clone-header .icon:last-child{grid-column:3!important;grid-row:1!important;justify-self:end!important;align-self:center!important;transform:none!important;}
@media(max-width:520px){
  body.root-header header,.nav-backdrop-rootheader .nav-clone-header{grid-template-columns:54px minmax(0,1fr) 54px!important;column-gap:8px!important;padding-left:14px!important;padding-right:14px!important;}
  body.root-header .header-logo,.nav-backdrop-rootheader .nav-clone-header .header-logo{width:58px!important;height:58px!important;}
  body.root-header header>.header-copy,.nav-backdrop-rootheader .nav-clone-header>.header-copy{transform:translateY(4px)!important;}
}
@media(max-width:390px){
  body.root-header header,.nav-backdrop-rootheader .nav-clone-header{grid-template-columns:50px minmax(0,1fr) 50px!important;column-gap:6px!important;padding-left:12px!important;padding-right:12px!important;}
  body.root-header .header-logo,.nav-backdrop-rootheader .nav-clone-header .header-logo{width:52px!important;height:52px!important;}
}

/* r100 — performance navigation rebuild.
   Normal taps/back use WebView-managed same-document snapshots. Only transform
   and opacity animate; the bottom tab bar stays persistent. */
nav{view-transition-name:mnb-persistent-nav}
::view-transition-old(mnb-persistent-nav),::view-transition-new(mnb-persistent-nav){animation:none!important;mix-blend-mode:normal!important}
::view-transition-group(root),::view-transition-image-pair(root){animation-duration:285ms;animation-timing-function:cubic-bezier(.32,.72,0,1)}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal;backface-visibility:hidden}
html[data-nav-direction="forward"]::view-transition-old(root){animation:mnbOldForward 285ms cubic-bezier(.32,.72,0,1) both}
html[data-nav-direction="forward"]::view-transition-new(root){animation:mnbNewForward 285ms cubic-bezier(.32,.72,0,1) both}
html[data-nav-direction="back"]::view-transition-old(root){animation:mnbOldBack 265ms cubic-bezier(.32,.72,0,1) both}
html[data-nav-direction="back"]::view-transition-new(root){animation:mnbNewBack 265ms cubic-bezier(.32,.72,0,1) both}
html[data-nav-direction="root"]::view-transition-old(root){animation:mnbOldRoot 220ms cubic-bezier(.2,.8,.2,1) both}
html[data-nav-direction="root"]::view-transition-new(root){animation:mnbNewRoot 220ms cubic-bezier(.2,.8,.2,1) both}
@keyframes mnbOldForward{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(-8%,0,0);opacity:.985}}
@keyframes mnbNewForward{from{transform:translate3d(100%,0,0);opacity:1}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes mnbOldBack{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(100%,0,0);opacity:1}}
@keyframes mnbNewBack{from{transform:translate3d(-8%,0,0);opacity:.985}to{transform:translate3d(0,0,0);opacity:1}}
@keyframes mnbOldRoot{from{transform:translate3d(0,0,0);opacity:1}to{transform:translate3d(-10px,0,0);opacity:0}}
@keyframes mnbNewRoot{from{transform:translate3d(10px,0,0);opacity:0}to{transform:translate3d(0,0,0);opacity:1}}

/* No legacy microtask page-entry animation; it was racing DOM rendering. */
body.page-enter-prep > header,body.page-enter-prep > main,
body.page-enter-prep.page-enter-run > header,body.page-enter-prep.page-enter-run > main{transform:none!important;opacity:1!important;transition:none!important}

/* During the final frame of an interactive back, rebuild the destination while
   the retained pixels remain visible, then atomically reveal the real DOM. */
body.nav-swap-hidden > header,body.nav-swap-hidden > main,body.nav-swap-hidden > nav{visibility:hidden!important}

/* Keep interactive swipe entirely compositor-based. Avoid filter animation,
   which repaints the retained page and can jank on large Home/Favourites views. */
body.stack-swipe-active .nav-backdrop{filter:none!important;transform:translate3d(calc(-8vw + (8vw * var(--stack-progress,0))),0,0)!important}
body.stack-swipe-active > header{box-shadow:-12px 0 26px rgba(0,0,0,.14)!important}
body.stack-swipe-animate > header,body.stack-swipe-animate > main,body.stack-swipe-animate > nav,body.stack-swipe-animate .nav-backdrop{
  transition:transform var(--stack-duration,210ms) cubic-bezier(.32,.72,0,1)!important;
}
@media(prefers-reduced-motion:reduce){::view-transition-group(root){animation-duration:1ms!important}}

/* r102 persistent-page back stack: no visual handoff delay. */
body.stack-swipe-active .nav-backdrop,
body.stack-swipe-active > header,
body.stack-swipe-active > main,
body.stack-swipe-active > nav{
  will-change:transform!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
}
body.nav-swap-hidden > header,body.nav-swap-hidden > main,body.nav-swap-hidden > nav{
  transition:none!important;animation:none!important;
}


/* r103 — pinned app shell.
   Mirrors the Privacy Policy architecture: the header is outside the scroll
   surface, while #app owns vertical scrolling and elastic overscroll. */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden !important;
  overscroll-behavior: none;
}

body {
  height: 100dvh !important;
  min-height: 100dvh !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--bg) !important;
}

body > header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  z-index: 30 !important;
  background: color-mix(in srgb,var(--bg) 94%,transparent) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transform: translateZ(0);
}

body > main#app {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  padding-bottom: calc(104px + env(safe-area-inset-bottom)) !important;
}

/* The fixed bottom nav remains outside the scrolling surface. */
body > nav {
  flex: 0 0 auto;
}

/* During horizontal interactive back, move the fixed header and the scroll
   surface together as one page, without changing vertical scroll ownership. */
body.stack-swipe-active > header,
body.stack-swipe-active > main,
body.stack-swipe-active > nav {
  will-change: transform !important;
}

/* The retained page shown underneath a swipe uses a pinned header too. */
.nav-backdrop .nav-clone-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 2 !important;
}

/* Form pages keep their extra keyboard clearance inside the new scroller. */
body.form-editing main#app {
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

body > main#app {
  width: 100% !important;
  margin: 0 auto !important;
}


/* r104 — social-app style bottom navigation.
   Flat bar, crisp outline icons, compact labels, filled/strong active state. */
body > nav#nav {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 40 !important;
  width: 100% !important;
  min-height: 66px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  align-items: start !important;
  justify-items: stretch !important;
  padding: 5px 8px calc(5px + env(safe-area-inset-bottom)) !important;
  background: color-mix(in srgb,var(--card) 96%,transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  backdrop-filter: blur(18px) saturate(1.15);
  border-top: 1px solid color-mix(in srgb,var(--line) 82%,transparent) !important;
  box-shadow: 0 -1px 8px rgba(0,0,0,.035);
}

body > nav#nav button {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px;
  margin: 0 !important;
  padding: 4px 2px 2px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease, transform 150ms cubic-bezier(.2,.8,.2,1) !important;
}

body > nav#nav button .nav-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateZ(0) scale(1);
  transform-origin: 50% 50%;
  transition: transform 180ms cubic-bezier(.18,.85,.25,1.18), fill 150ms ease, stroke-width 150ms ease;
}

body > nav#nav button span {
  display: block !important;
  margin: 0 !important;
  font-size: 9.5px !important;
  line-height: 1.1;
  font-weight: 500;
  letter-spacing: -.01em;
  white-space: nowrap;
  color: inherit;
  transition: font-weight 150ms ease, color 150ms ease;
}

body > nav#nav button.active {
  color: var(--accent) !important;
}

body > nav#nav button.active .nav-icon {
  transform: translateZ(0) scale(1.08);
  stroke-width: 2.25;
}

/* Like Instagram/Facebook, selected destination icons read as solid/strong
   where the pictogram supports it, rather than sitting inside a coloured pill. */
body > nav#nav button.active .nav-icon-home,
body > nav#nav button.active .nav-icon-heart {
  fill: currentColor;
}

body > nav#nav button.active span {
  font-weight: 700;
}

body > nav#nav button:active .nav-icon {
  transform: translateZ(0) scale(.91);
  transition-duration: 70ms;
}

body.dark > nav#nav {
  box-shadow: 0 -1px 8px rgba(0,0,0,.16);
}

/* Keep content comfortably clear of the slightly slimmer social-style bar. */
body > main#app {
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
}


/* r105 — unified compositor shell.
   One transformed layer is used for the entire interactive page, eliminating
   relative jitter between header/content/nav during swipe-back. */
html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

body {
  min-height: 100dvh !important;
}

.page-shell,
.nav-clone-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  background: var(--bg) !important;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: flat !important;
}

.page-shell {
  z-index: 10;
  contain: layout paint style;
}

.page-shell > header,
.nav-clone-shell > .nav-clone-header {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  z-index: 3 !important;
  background: color-mix(in srgb,var(--bg) 94%,transparent) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.page-shell > main#app,
.nav-clone-shell > .nav-clone-main {
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  margin: 0 auto !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scroll-behavior: auto !important;
  padding-bottom: calc(94px + env(safe-area-inset-bottom)) !important;
}

/* Rounded upper corners, but the bar background itself extends to bottom:0,
   including the safe-area padding, so there is never a gap beneath it. */
.page-shell > nav#nav,
.nav-clone-shell > .nav-clone-nav {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 5 !important;
  width: 100% !important;
  min-height: 68px !important;
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  align-items: start !important;
  justify-items: center !important;
  padding: 7px 12px calc(7px + env(safe-area-inset-bottom)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid color-mix(in srgb,var(--line) 82%,transparent) !important;
  border-radius: 22px 22px 0 0 !important;
  background: color-mix(in srgb,var(--card) 97%,transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
  box-shadow: 0 -2px 12px rgba(0,0,0,.055) !important;
  transform: translateZ(0);
}

.page-shell > nav#nav button,
.nav-clone-shell > .nav-clone-nav button {
  appearance: none !important;
  -webkit-appearance: none !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 2px 0 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--muted) !important;
  font-size: 22px !important;
  line-height: 1 !important;
  text-align: center !important;
  -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease, transform 150ms cubic-bezier(.2,.8,.2,1) !important;
}

.page-shell > nav#nav button span,
.nav-clone-shell > .nav-clone-nav button span {
  display: block !important;
  margin-top: 3px !important;
  font-size: 10px !important;
  line-height: 1.1 !important;
  font-weight: 500 !important;
  color: inherit !important;
}

.page-shell > nav#nav button.active,
.nav-clone-shell > .nav-clone-nav button.active {
  color: var(--accent) !important;
  transform: scale(1.035);
}

.page-shell > nav#nav button.active span,
.nav-clone-shell > .nav-clone-nav button.active span {
  font-weight: 700 !important;
}

.page-shell > nav#nav button:active {
  transform: scale(.94);
  transition-duration: 70ms !important;
}

/* Form keyboard state still hides the real bar, not the swipe snapshot. */
body.form-editing .page-shell > nav#nav {
  transform: translate3d(0,calc(100% + env(safe-area-inset-bottom)),0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

body.form-editing .page-shell > main#app {
  padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
}

/* Retained page is a complete, correctly styled shell. */
.nav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
  transition: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.nav-backdrop-viewport {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  background: var(--bg) !important;
}

.nav-backdrop .nav-clone-shell {
  position: absolute !important;
  z-index: 1 !important;
}

body.unified-swipe-active .page-shell,
body.unified-swipe-settling .page-shell {
  will-change: transform !important;
}

body.unified-swipe-active .nav-backdrop,
body.unified-swipe-settling .nav-backdrop {
  will-change: transform !important;
}

/* Disable all legacy multi-element swipe transitions. */
body.stack-swipe-active > header,
body.stack-swipe-active > main,
body.stack-swipe-active > nav,
body.stack-swipe-animate > header,
body.stack-swipe-animate > main,
body.stack-swipe-animate > nav {
  transform: none !important;
  transition: none !important;
}

/* Keep the existing root-header clone geometry when the body has already
   changed to the reader route. */
.nav-backdrop-rootheader .nav-clone-header {
  z-index: 3 !important;
}