/* Full-text pages (generated by tools/site.js from the app's fonts). */
@font-face {
  font-family: "Baloo Bhaijaan 2";
  src: url("fonts/BalooBhaijaan2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
}
@font-face {
  font-family: "Baloo UI";
  src: url("fonts/BalooBhaijaan2.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
  ascent-override: 95%;
  descent-override: 35%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Baloo Bengali";
  src: url("fonts/BalooDa2-Bengali.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0964-0965, U+0980-09FF, U+25CC;
}
@font-face { font-family: "Hausa Letters"; src: url("fonts/MPLUSRounded1c-HausaLetters-Regular.woff2") format("woff2"); font-weight: 400; font-display: block; unicode-range: U+0181, U+018A, U+0198-0199, U+0253, U+0257; }
@font-face { font-family: "Hausa Letters"; src: url("fonts/MPLUSRounded1c-HausaLetters-Medium.woff2") format("woff2"); font-weight: 500; font-display: block; unicode-range: U+0181, U+018A, U+0198-0199, U+0253, U+0257; }
@font-face { font-family: "Hausa Letters"; src: url("fonts/MPLUSRounded1c-HausaLetters-Bold.woff2") format("woff2"); font-weight: 600 800; font-display: block; unicode-range: U+0181, U+018A, U+0198-0199, U+0253, U+0257; }
@font-face {
  font-family: "Baloo Devanagari";
  src: url("fonts/Baloo2-Devanagari.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+A8E0-A8FF, U+25CC;
}
@font-face {
  font-family: "Baloo Tamil";
  src: url("fonts/BalooThambi2-Tamil.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0B80-0BFF;
}
@font-face {
  font-family: "Nunito Cyrillic";
  src: url("fonts/Nunito-Cyrillic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
  unicode-range: U+0400-052F, U+2116;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("fonts/Vazirmatn-Arabic.woff2") format("woff2");
  font-weight: 400 800;
  font-display: block;
}
:root {
  --font: "Baloo UI", "Baloo Bengali", "Baloo Devanagari", "Baloo Tamil", "Hausa Letters", "Nunito Cyrillic", "Baloo Bhaijaan 2", ui-rounded, -apple-system, system-ui, "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --arabic: "Baloo Bhaijaan 2", "Geeza Pro", "Noto Sans Arabic", sans-serif;
  --bg: #fbf9f6; --ink: #3d3a36; --muted: #69645e; --accent: #8fb39a; --line: rgba(0, 0, 0, 0.08);
  --card: #fff; --track: rgba(0, 0, 0, 0.1);
  --fill: rgba(0, 0, 0, 0.05); --fill-hover: rgba(0, 0, 0, 0.085); --hover: rgba(0, 0, 0, 0.07); /* as in the app */
  color-scheme: light;
}
/* Dark: the device's setting, unless Light or Dark was chosen (here or in the
   app; js/theme.js applies it before the page is drawn). */
:root[data-theme="dark"] {
  --bg: #1f2622; --ink: #ece7df; --muted: #a39c92; --accent: #9cc3a7; --line: rgba(255, 255, 255, 0.1);
  --card: #2a322d; --track: rgba(255, 255, 255, 0.15);
  --fill: rgba(255, 255, 255, 0.07); --fill-hover: rgba(255, 255, 255, 0.11); --hover: rgba(255, 255, 255, 0.1);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1f2622; --ink: #ece7df; --muted: #a39c92; --accent: #9cc3a7; --line: rgba(255, 255, 255, 0.1);
    --card: #2a322d; --track: rgba(255, 255, 255, 0.15);
    --fill: rgba(255, 255, 255, 0.07); --fill-hover: rgba(255, 255, 255, 0.11); --hover: rgba(255, 255, 255, 0.1);
    color-scheme: dark;
  }
}
:root:lang(ps), :root:lang(ckb) { --font: "Vazirmatn", "Baloo UI", ui-rounded, -apple-system, system-ui, sans-serif; }
:root:lang(hi) { --font: "Baloo UI", "Baloo Devanagari", "Baloo Bengali", "Baloo Tamil", "Hausa Letters", "Nunito Cyrillic", "Baloo Bhaijaan 2", ui-rounded, -apple-system, system-ui, "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
:root:lang(ja) { --font: "Baloo UI", ui-rounded, -apple-system, system-ui, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Yu Gothic", sans-serif; }
:root:lang(zh) { --font: "Baloo UI", ui-rounded, -apple-system, system-ui, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font-family: var(--font); line-height: 1.55; padding: 1.25rem 1.25rem 3rem; }
main, footer, .top { max-width: 44rem; margin: 0 auto; }
a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); text-underline-offset: 3px; }
/* The top bar: language on one side, the way into the app on the other. */
.top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.open { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; font-size: 0.9375rem; padding: 0.4rem 0.9rem 0.4rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 22%, transparent); text-decoration: none; }
.open .when { width: 1.25rem; height: 1.25rem; margin: 0; }
.pill { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.25rem; padding: 0 0.8rem; border: 0; border-radius: 999px; background: var(--fill); color: inherit; font: inherit; font-size: 0.875rem; cursor: pointer; list-style: none; }
.pill::-webkit-details-marker { display: none; }
.pill svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* Going between the app and these pages, or to another language: the page fades
   out to the app's sun–moon loader, and the next page starts with it and fades it
   away once ready (js/textpage.js; js/theme.js sets .bridging on arrival). If the
   script never runs, the loader still clears by itself. */
.bridge {
  position: fixed; inset: 0; z-index: 10; display: grid; place-items: center;
  background: var(--bg); pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.bridge .nf-orb { width: 11.875rem; height: 11.875rem; }
:root.leaving .bridge { opacity: 1; visibility: visible; transition: opacity 0.18s ease; }
:root.bridging .bridge { opacity: 1; visibility: visible; transition: none; animation: bridge-clear 0.3s ease 3s forwards; }
@keyframes bridge-clear { to { opacity: 0; visibility: hidden; } }
/* The two pages' looks cross-fade as one goes to the next, where browsers can. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
/* Language: a small menu of every language's page (works without JavaScript). */
.lang-menu { position: relative; }
.lang-menu .chev { opacity: 0.6; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.lang-menu[open]:not(.closing) .chev { transform: rotate(180deg); }
/* Text centred by its letters, not the font's line box (which sits it a little low). */
.pill span, .open { text-box: trim-both cap alphabetic; }
/* Opening: the menu fades in, settling down a few pixels from its button;
   closing: it fades back up (js/textpage.js waits for that before closing). Whole
   pixels and no scaling, so the text stays sharp and nothing snaps at the end. */
@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] .langs { animation: menu-in 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
  .lang-menu.closing .langs { animation: menu-out 0.14s ease-in forwards; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes menu-out { to { opacity: 0; transform: translateY(-6px); } }
.langs {
  position: absolute; z-index: 3; inset-inline-start: 0; top: calc(100% + 0.4rem);
  display: flex; flex-direction: column; gap: 1px; width: max-content; min-width: 15rem; max-width: calc(100vw - 2.5rem);
  max-height: 70vh; overflow-y: auto; padding: 0.4rem; border-radius: 1rem;
  background: var(--card); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16); font-size: 0.9375rem;
}
/* The list still scrolls when it's taller than the screen, but without a visible scrollbar (as in the app's panels). */
.langs { scrollbar-width: none; overscroll-behavior: contain; }
.langs::-webkit-scrollbar { display: none; }
.langs a { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 0.6rem; text-decoration: none; white-space: nowrap; }
.langs .alt { font-size: 0.8125rem; color: var(--muted); }
.langs .check { width: 1.1rem; height: 1.1rem; margin-inline-start: auto; align-self: center; color: var(--accent); }
.langs [aria-current] { font-weight: 600; background: color-mix(in srgb, var(--accent) 16%, transparent); }
.langs [aria-current] .alt { font-weight: 400; }
/* Laptop only, as in the app: buttons darken slightly on hover (lighten in dark
   mode), the highlighted ones deepen their green, and links go full colour. */
@media (hover: hover) {
  .pill, .open, .langs a { transition: background 0.12s ease; }
  .pill:hover { background: var(--fill-hover); }
  .open:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
  .langs a:hover { background: var(--hover); }
  .langs [aria-current]:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); }
  .src a, dd a { transition: color 0.12s ease; }
  .src a:hover, dd a:hover { color: var(--ink); }
}
/* As the menu opens, the languages ripple in one after another, top to bottom. */
@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] .langs a { animation: lang-in 0.24s cubic-bezier(0.22, 1, 0.36, 1) backwards; }
  .lang-menu[open] .langs a:nth-child(1) { animation-delay: 0ms; }
  .lang-menu[open] .langs a:nth-child(2) { animation-delay: 12ms; }
  .lang-menu[open] .langs a:nth-child(3) { animation-delay: 24ms; }
  .lang-menu[open] .langs a:nth-child(4) { animation-delay: 36ms; }
  .lang-menu[open] .langs a:nth-child(5) { animation-delay: 48ms; }
  .lang-menu[open] .langs a:nth-child(6) { animation-delay: 60ms; }
  .lang-menu[open] .langs a:nth-child(7) { animation-delay: 72ms; }
  .lang-menu[open] .langs a:nth-child(8) { animation-delay: 84ms; }
  .lang-menu[open] .langs a:nth-child(9) { animation-delay: 96ms; }
  .lang-menu[open] .langs a:nth-child(10) { animation-delay: 108ms; }
  .lang-menu[open] .langs a:nth-child(11) { animation-delay: 120ms; }
  .lang-menu[open] .langs a:nth-child(12) { animation-delay: 132ms; }
  .lang-menu[open] .langs a:nth-child(13) { animation-delay: 144ms; }
  .lang-menu[open] .langs a:nth-child(14) { animation-delay: 156ms; }
  .lang-menu[open] .langs a:nth-child(15) { animation-delay: 168ms; }
  .lang-menu[open] .langs a:nth-child(16) { animation-delay: 180ms; }
  .lang-menu[open] .langs a:nth-child(17) { animation-delay: 192ms; }
  .lang-menu[open] .langs a:nth-child(18) { animation-delay: 204ms; }
  .lang-menu[open] .langs a:nth-child(19) { animation-delay: 216ms; }
  .lang-menu[open] .langs a:nth-child(20) { animation-delay: 228ms; }
  .lang-menu[open] .langs a:nth-child(21) { animation-delay: 240ms; }
  .lang-menu[open] .langs a:nth-child(22) { animation-delay: 252ms; }
  .lang-menu[open] .langs a:nth-child(23) { animation-delay: 264ms; }
  .lang-menu[open] .langs a:nth-child(24) { animation-delay: 276ms; }
  .lang-menu[open] .langs a:nth-child(25) { animation-delay: 288ms; }
  .lang-menu[open] .langs a:nth-child(26) { animation-delay: 300ms; }
  .lang-menu[open] .langs a:nth-child(27) { animation-delay: 312ms; }
  .lang-menu[open] .langs a:nth-child(28) { animation-delay: 324ms; }
  .lang-menu[open] .langs a:nth-child(29) { animation-delay: 336ms; }
  .lang-menu[open] .langs a:nth-child(30) { animation-delay: 348ms; }
}
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px); } }
h1 { font-size: 1.6rem; line-height: 1.3; }
.lead { color: var(--muted); margin: 0.5rem 0 1rem; }
h2 { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 2.5rem 0 0.5rem; }
article { padding: 1.5rem 0; border-top: 1px solid var(--line); break-inside: avoid-page; }
/* Opened from a shared link (/en/adhkar/#ayat-al-kursi): that dhikr, softly marked. */
article { scroll-margin-top: 1rem; }
article:target { background: color-mix(in srgb, var(--accent) 14%, transparent); border-top-color: transparent; border-radius: 1rem; padding-inline: 1rem; margin-inline: -1rem; }
h3 { font-size: 1.125rem; }
/* Sun, moon or both: when the dhikr is said. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.when { width: 1.15em; height: 1.15em; margin-inline-end: 0.4em; vertical-align: -0.2em; }
.label .when { width: 1.1em; height: 1.1em; }
/* The progress rail (js/textpage.js): the app's progress bar standing upright at
   the edge, one segment per dhikr, as tall as the dhikr is on the page. Touch,
   click or drag it to move through the page; the name shows beside it. */
.rail {
  position: fixed; z-index: 2;
  inset-block: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: 0;
  width: 1.5rem;
  display: flex; flex-direction: column; align-items: center;
  touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: pointer;
}
/* With the rail there, the browser's own scrollbar would be a second one: hidden. */
:root.railed { scrollbar-width: none; }
:root.railed::-webkit-scrollbar { display: none; }
.rail-seg {
  flex: 1 1 0; min-height: 2px; width: 4px; margin-bottom: 2px;
  background: var(--track); border-radius: 999px; overflow: hidden;
  transition: width 0.12s ease;
}
.rail-fill { height: 0; background: var(--accent); border-radius: 999px; }
.rail-seg.on { width: 7px; }
@media (hover: hover) { .rail:hover .rail-seg { width: 5px; } .rail:hover .rail-seg.on { width: 7px; } }
.rail-tip {
  position: fixed; inset-inline-end: 2rem;
  transform: translateY(-50%);
  max-width: 70vw; padding: 0.35rem 0.75rem; border-radius: 999px;
  background: var(--card); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  font-size: 0.8125rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  pointer-events: none; opacity: 0; transition: opacity 0.12s ease;
}
.rail.showing .rail-tip { opacity: 1; }
h4 { font-size: 1rem; margin-top: 0.25rem; }
.sub, .meta, .src { color: var(--muted); font-size: 0.8125rem; }
.meta { margin-top: 0.25rem; }
.virtue { font-style: italic; color: var(--muted); font-size: 0.875rem; margin-top: 0.25rem; }
.phrases { list-style: none; margin-top: 0.75rem; }
.phrases li { padding: 0.5rem 0; }
.ar { font-family: var(--arabic); font-size: 1.6rem; line-height: 2; text-align: right; }
.tr { color: var(--muted); font-size: 0.9375rem; }
[dir="ltr"].tr { text-align: start; }
.en { font-size: 1rem; }
.ayah { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 0.2em; margin-inline-start: 0.2em; border: 1px solid var(--accent); border-radius: 999px; font-family: var(--font); font-size: 0.55em; line-height: 1; vertical-align: middle; }
.evening { margin-top: 0.5rem; padding: 0.5rem 0.9rem; border-inline-start: 3px solid color-mix(in srgb, var(--accent) 60%, transparent); }
.label { font-weight: 600; font-size: 0.875rem; }
.src { margin-top: 0.75rem; }
footer { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 1rem; }
footer h2 { margin-top: 0.5rem; }
dl { font-size: 0.8125rem; }
dt { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-top: 0.9rem; }
dt .credit-icon { flex: none; width: 1.1rem; height: 1.1rem; color: var(--muted); }
dd { color: var(--muted); padding-inline-start: 1.6rem; }
/* Each language's own name uses the device's fonts, so a page doesn't download
   fonts for scripts it only shows in this list. */
.langs .name { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif; }
/* 404: the app's colours with a soft glow, and the loading screen's sun–moon orb. */
body.notfound {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 2rem 1.5rem;
  background: radial-gradient(40rem 28rem at 50% 36%, rgba(255, 207, 110, 0.18), transparent 70%), #e6efe6;
}
@media (prefers-color-scheme: dark) {
  body.notfound { background: radial-gradient(40rem 28rem at 50% 36%, rgba(185, 176, 232, 0.12), transparent 70%), #1f2622; }
}
.nf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-orb { width: 12rem; height: 12rem; }
.nf-orb svg { display: block; width: 100%; height: 100%; }
.nf-orb { --cycle: 4s; }
.nf-orb svg * { transform-box: view-box; }
.nf-orb .float { transform-origin: 80px 80px; animation: float 3s ease-in-out infinite; }
.nf-orb .orbit { transform-origin: 80px 80px; animation: spin 6s linear infinite; }
.nf-orb .rays  { transform-origin: 80px 80px; animation: rays var(--cycle) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.nf-orb .sun   { animation: sun var(--cycle) ease-in-out infinite; }
.nf-orb .moon  { animation: moon var(--cycle) ease-in-out infinite; }
.nf-orb .shade { animation: shade var(--cycle) cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.nf-orb .warm  { animation: sun var(--cycle) ease-in-out infinite; }
.nf-orb .cool  { animation: moon var(--cycle) ease-in-out infinite; }
.nf-orb .stars { animation: moon var(--cycle) ease-in-out infinite; }
.nf-orb .star  { transform-box: fill-box; transform-origin: center; animation: twinkle 1.4s ease-in-out infinite; }
.nf-orb .stars > g:nth-child(1) .star { animation-delay: 0s; }
.nf-orb .stars > g:nth-child(2) .star { animation-delay: 0.5s; }
.nf-orb .stars > g:nth-child(3) .star { animation-delay: 1s; }
.nf-orb .stars > g:nth-child(4) .star { animation-delay: 0.3s; }
@keyframes float   { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }
@keyframes spin    { to { transform: rotate(360deg); } }
@keyframes rays {
  0%   { transform: rotate(0deg)   scale(1);   opacity: 1; }
  40%  { transform: rotate(90deg)  scale(1);   opacity: 1; }
  52%  { transform: rotate(140deg) scale(0.4); opacity: 0; }
  88%  { transform: rotate(140deg) scale(0.4); opacity: 0; }
  100% { transform: rotate(180deg) scale(1);   opacity: 1; }
}
@keyframes sun  { 0%, 40% { opacity: 1; } 52%, 88% { opacity: 0; } 100% { opacity: 1; } }
@keyframes moon { 0%, 40% { opacity: 0; } 52%, 88% { opacity: 1; } 100% { opacity: 0; } }
@keyframes shade {
  0%, 42%  { transform: translateX(56px); }
  60%, 86% { transform: translateX(17px); }
  100%     { transform: translateX(56px); }
}
@keyframes twinkle { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.5); } }
.nf-code { margin: 0.5rem 0 1.75rem; padding-inline-start: 0.3em; font-size: 1.5rem; font-weight: 600; letter-spacing: 0.3em; color: var(--muted); }
/* The way back, with the same icons as elsewhere: the app's logo on "Open the App"
   (as on the full-text pages), and the page icon and arrow on "Read All Adhkar as
   Text" (as in the app's About & Sources). Hover fades at the app's pace (0.12s). */
.nf-open { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem 0.75rem 1.25rem; border-radius: 999px; background: rgba(255, 255, 255, 0.6); color: var(--ink); font-weight: 600; text-decoration: none; transition: background 0.12s ease; }
.nf-open .when { width: 1.375rem; height: 1.375rem; margin: 0; }
.nf-text { display: inline-flex; align-items: center; gap: 0.375rem; margin-top: 1rem; padding: 0.5rem; font-size: 0.875rem; color: var(--muted); text-decoration: none; transition: color 0.12s ease; }
.nf-text .credit-icon { flex: none; width: 1.125rem; height: 1.125rem; }
.nf-text .go { flex: none; margin-inline-start: -0.125rem; }
[dir="rtl"] .nf-text .go { transform: scaleX(-1); }
@media (prefers-color-scheme: dark) { .nf-open { background: rgba(255, 255, 255, 0.09); } }
@media (hover: hover) {
  .nf-open:hover { background: rgba(255, 255, 255, 0.92); }
  .nf-text:hover { color: var(--ink); }
}
@media (prefers-color-scheme: dark) and (hover: hover) { .nf-open:hover { background: rgba(255, 255, 255, 0.16); } }
/* Reduce Motion: the orb rests as the sun. */
@media (prefers-reduced-motion: reduce) {
  .nf-orb * { animation: none !important; }
  .nf-orb .moon, .nf-orb .cool, .nf-orb .stars { opacity: 0; }
}
@media print {
  :root { --bg: #fff; --ink: #000; --muted: #444; }
  .top, .rail, .bridge { display: none; }
  article:target { background: none; }
  body { padding: 0; }
  a { text-decoration: none; }
}