/* Sadaqah jariyah site for Osama Hassan (رحمه الله). Design by Bakr (design/bakr-home), components below it. */
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/cairo-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/cairo-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cairo"; font-style: normal; font-weight: 200 1000; font-display: swap; src: url("../fonts/cairo-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Naskh"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/naskh-arabic.woff2") format("woff2"); }
@font-face { font-family: "Hafs"; font-display: swap; src: url("../fonts/hafs.woff2") format("woff2"); }
@font-face { font-family: "QuranAlt"; font-display: swap; src: url("../fonts/scheherazade-new.woff2") format("woff2"); }


:root {
  color-scheme: light;
  --page: #f7f3ea;
  --page-deep: #eee6d7;
  --surface: #fffdf8;
  --surface-soft: rgba(255, 253, 248, .72);
  --surface-2: #fffefb;
  --ink: #102542;
  --ink-soft: #3e4f66;
  --ink-faint: #5b6979;
  --gold: #b58a46;
  --gold-deep: #7f5b25;
  --gold-soft: rgba(181, 138, 70, .19);
  --rule: rgba(181, 138, 70, .42);
  --rule-soft: rgba(181, 138, 70, .32);
  --header: rgba(247, 243, 234, .86);
  --hero-glow: rgba(255, 255, 255, .92);
  --primary: #0c294c;
  --primary-ink: #fffaf0;
  --secondary: rgba(255, 255, 255, .66);
  --secondary-hover: #fffdf8;
  --shadow: 0 16px 44px rgba(16, 37, 66, .13);
  --shadow-strong: 0 20px 55px rgba(16, 37, 66, .15);
  --pattern-opacity: .085;
  --arch-opacity: .32;
  --ui: "Cairo", "Noto Kufi Arabic", "Noto Sans Arabic", "Geeza Pro", Tahoma, sans-serif;
  --naskh: "Naskh", "Noto Naskh Arabic", "Amiri", "Geeza Pro", serif;
  --content: 1240px;
  --gutter: clamp(18px, 4vw, 54px);
  --ease: cubic-bezier(.22, .61, .36, 1);
}


html[data-theme="dark"] {
  color-scheme: dark;
  --page: #071522;
  --page-deep: #04101a;
  --surface: #0e2038;
  --surface-soft: rgba(10, 26, 46, .68);
  --surface-2: #142a4a;
  --ink: #f6f0e2;
  --ink-soft: #a5b2bd;
  --ink-faint: #a5b2bd; /* raised to the soft ink's value: sources and references read, still below the text */
  --gold: #d4a456;
  --gold-deep: #edc77f;
  --gold-soft: rgba(212, 164, 86, .13);
  --rule: rgba(212, 164, 86, .48);
  --rule-soft: rgba(212, 164, 86, .22);
  --header: rgba(7, 21, 34, .82);
  --hero-glow: rgba(18, 50, 68, .42);
  --primary: #f4e7d1;
  --primary-ink: #0b2032;
  --secondary: rgba(7, 21, 34, .48);
  --secondary-hover: rgba(212, 164, 86, .08);
  --shadow: 0 18px 48px rgba(0, 0, 0, .28);
  --shadow-strong: 0 20px 70px rgba(0, 0, 0, .44);
  --pattern-opacity: .075;
  --arch-opacity: .55;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}


body {
  margin: 0;
  min-width: 320px;
  background: var(--page);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 16px;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  transition: background-color .35s var(--ease), color .35s var(--ease);
}


a {
  color: inherit;
  text-decoration: none;
}


button {
  border: 0;
  color: inherit;
  background: none;
  font: inherit;
  cursor: pointer;
}


svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.skip-link {
  position: fixed;
  z-index: 999;
  inset-block-start: 8px;
  inset-inline-start: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--primary);
  color: var(--primary-ink);
  transform: translateY(-150%);
}


.skip-link:focus {
  transform: none;
}


.site-header {
  position: sticky;
  z-index: 50;
  inset-block-start: 0;
  background: var(--header);
  border-bottom: 1px solid var(--rule-soft);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
}


.header-inner {
  width: min(calc(100% - (2 * var(--gutter))), var(--content));
  min-height: 88px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(275px, auto) 1fr minmax(160px, auto);
  align-items: center;
  gap: clamp(18px, 3vw, 48px);
}


.brand {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 13px;
}


.brand-mark {
  width: 38px;
  height: 38px;
  flex: none;
  color: var(--gold);
  stroke-width: 2.5;
  filter: drop-shadow(0 5px 12px rgba(181, 138, 70, .2));
}


.brand-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.22;
}


.brand-kicker {
  color: var(--gold-deep);
  font-size: 13px;
  font-weight: 800;
}


.brand-name {
  margin-top: 3px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  white-space: nowrap;
}


.main-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(12px, 1.7vw, 26px);
  white-space: nowrap;
}


.main-nav a {
  position: relative;
  padding: 11px 2px;
  color: var(--ink-soft);
  font-size: 14px;
  font-weight: 700;
  transition: color .2s var(--ease);
}


.main-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 18%;
  inset-block-end: 3px;
  height: 1.5px;
  background: var(--gold);
  transform: scaleX(0);
  transition: transform .2s var(--ease);
}


.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: var(--ink);
}


.main-nav a:hover::after,
.main-nav a[aria-current="page"]::after {
  transform: scaleX(1);
}


.header-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  direction: ltr;
}


.icon-button,
.language-button {
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--ink);
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}


.icon-button:hover,
.language-button:hover {
  background: var(--gold-soft);
  border-color: var(--rule-soft);
  transform: translateY(-1px);
}


.icon-button:focus-visible,
.language-button:focus-visible,
.main-nav a:focus-visible,
.action-button:focus-visible,
.utility-item:focus-visible,
.share-button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset: 3px;
}


.icon-button {
  width: 42px;
  display: grid;
  place-items: center;
}


.icon-button svg {
  width: 21px;
  height: 21px;
}


.sun-icon {
  display: none;
}


html[data-theme="dark"] .moon-icon {
  display: none;
}


html[data-theme="dark"] .sun-icon {
  display: block;
}


.language-button {
  padding-inline: 10px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  direction: rtl;
  font-size: 13px;
  font-weight: 700;
}


.language-button svg {
  width: 20px;
  height: 20px;
}


.hero {
  position: relative;
  isolation: isolate;
  min-height: calc(100svh - 88px);
  overflow: hidden;
  padding: clamp(40px, 5vh, 66px) var(--gutter) clamp(36px, 4vh, 54px);
  background:
    radial-gradient(circle at 50% 16%, var(--hero-glow), transparent 46%),
    linear-gradient(180deg, color-mix(in srgb, var(--page) 96%, var(--surface)), var(--page));
}


.hero-inner {
  width: min(100%, var(--content));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}


.hero-copy {
  width: min(100%, 1010px);
  margin-inline: auto;
  text-align: center;
}


.eyebrow {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  color: var(--gold-deep);
  font-size: clamp(16px, 1.45vw, 21px);
  font-weight: 900;
}


.eyebrow i {
  width: clamp(54px, 8vw, 104px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}


.eyebrow i:last-child {
  background: linear-gradient(90deg, var(--gold), transparent);
}


.memorial-title {
  margin: clamp(18px, 2.8vh, 30px) 0 0;
  display: flex;
  justify-content: center;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .16em;
  color: var(--ink);
  font-size: clamp(46px, 5.1vw, 76px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: 0;
}


.memorial-title strong {
  font-size: 1.1em;
  font-weight: 950;
}


.title-prefix,
.title-mercy {
  font-size: .74em;
  font-weight: 800;
  letter-spacing: 0;
}


.hero-dua {
  margin: clamp(12px, 2vh, 22px) 0 0;
  color: var(--ink);
  font-family: var(--naskh);
  font-size: clamp(31px, 3.4vw, 50px);
  font-weight: 600;
  line-height: 1.55;
}


.hero-lead {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 1.55vw, 22px);
}


.primary-actions {
  width: min(100%, 820px);
  margin: clamp(24px, 3.2vh, 34px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}


.action-button {
  min-height: 72px;
  padding: 13px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border: 1.5px solid var(--gold);
  border-radius: 17px;
  background: var(--secondary);
  color: var(--ink);
  box-shadow: 0 8px 26px transparent;
  font-size: 20px;
  font-weight: 900;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
}


.action-button:hover {
  transform: translateY(-3px);
  background: var(--secondary-hover);
  box-shadow: var(--shadow);
}


.action-button svg {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--gold);
}


.action-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
  box-shadow: var(--shadow-strong);
}


.action-primary:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--gold));
  box-shadow: var(--shadow-strong);
}


.action-primary svg {
  color: currentColor;
}


.utility-actions {
  width: min(100%, 690px);
  margin: clamp(24px, 3vh, 34px) auto 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}


.utility-item {
  min-width: 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  border-inline-start: 1px solid var(--rule-soft);
  color: var(--ink-soft);
  text-align: center;
  transition: color .2s var(--ease), transform .2s var(--ease);
}


.utility-item:first-child {
  border-inline-start: 0;
}


.utility-item:hover {
  color: var(--ink);
  transform: translateY(-2px);
}


.utility-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold);
}


.utility-icon svg {
  width: 26px;
  height: 26px;
}


.utility-item > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}


.utility-item b {
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 750;
}


.utility-item small {
  margin-top: 2px;
  color: var(--ink-faint);
  font-size: 11px;
}


.hadith-card {
  width: min(100%, 1180px);
  margin: clamp(34px, 4vh, 52px) auto 0;
  padding: clamp(22px, 3vh, 32px) clamp(20px, 5vw, 68px);
  position: relative;
  border: 0;
  border-block: 1px solid var(--rule);
  text-align: center;
}


.hadith-card::before,
.hadith-card::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  width: 11px;
  height: 11px;
  background: var(--gold);
  border: 3px solid var(--page);
  transform: translateX(50%) rotate(45deg);
}


.hadith-card::before {
  inset-block-start: -6px;
}


.hadith-card::after {
  inset-block-end: -6px;
}


.hadith-label {
  margin: 0;
  color: var(--gold-deep);
  font-family: var(--naskh);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
}


.hadith-text {
  margin: 9px 0 0;
  color: var(--ink);
  font-family: var(--naskh);
  font-size: clamp(22px, 2.25vw, 33px);
  font-weight: 600;
  line-height: 1.75;
}


.hadith-text mark {
  padding: 0;
  background: none;
  color: var(--gold-deep);
  font-weight: 700;
}


.hadith-card footer {
  margin-top: 3px;
  color: var(--ink-soft);
  font-family: var(--naskh);
  font-size: 17px;
}


.impact-section {
  padding: clamp(70px, 8vw, 110px) var(--gutter);
  border-block: 1px solid var(--rule-soft);
  background: color-mix(in srgb, var(--surface) 58%, var(--page));
}


.section-inner,
.share-card {
  width: min(100%, var(--content));
  margin-inline: auto;
}


.section-heading {
  text-align: center;
}


.section-kicker {
  margin: 0;
  color: var(--gold-deep);
  font-size: 14px;
  font-weight: 800;
}


.section-heading h2,
.share-card h2 {
  margin: 5px 0 0;
  color: var(--ink);
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.3;
}


.impact-grid {
  margin: 42px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-block: 1px solid var(--rule-soft);
}


.impact-grid div {
  padding: 24px 20px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  border-inline-start: 1px solid var(--rule-soft);
  text-align: center;
}


.impact-grid div:first-child {
  border-inline-start: 0;
}


.impact-grid dt {
  margin-top: 4px;
  color: var(--ink-faint);
  font-size: 12px;
  font-weight: 700;
}


.impact-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}


.share-section {
  padding: clamp(64px, 8vw, 108px) var(--gutter);
  background: var(--page);
}


.share-card {
  padding: clamp(26px, 4vw, 48px);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 28px;
  border: 1px solid var(--rule-soft);
  border-radius: 26px;
  background: var(--surface-soft);
  box-shadow: var(--shadow);
}


.share-card p:not(.section-kicker) {
  margin: 8px 0 0;
  color: var(--ink-soft);
}


.share-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}


.share-button {
  min-height: 48px;
  padding: 10px 19px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--rule);
  border-radius: 14px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 800;
  transition: transform .2s var(--ease), background .2s var(--ease);
}


.share-button:hover {
  transform: translateY(-2px);
  background: var(--gold-soft);
}


.share-button svg {
  width: 20px;
  height: 20px;
}


.share-primary {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-ink);
}


.share-primary:hover {
  background: color-mix(in srgb, var(--primary) 90%, var(--gold));
}


.site-footer {
  padding: 44px var(--gutter) 52px;
  border-top: 1px solid var(--rule-soft);
  background: var(--page-deep);
  color: var(--ink-soft);
  text-align: center;
}


.site-footer p {
  margin: 4px 0;
}


.footer-dua {
  color: var(--ink);
  font-family: var(--naskh);
  font-size: 23px;
  font-weight: 700;
}


.site-footer a {
  display: inline-block;
  margin-top: 7px;
  color: var(--gold-deep);
  font-weight: 800;
}


@media (max-width: 1120px) {
  .header-inner {
    grid-template-columns: auto 1fr auto;
    gap: 22px;
  }

  .main-nav {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .main-nav::-webkit-scrollbar {
    display: none;
  }

  .main-nav a {
    font-size: 13px;
  }

  .language-button span {
    display: none;
  }
}


@media (max-width: 860px) {
  .header-inner {
    min-height: 78px;
    grid-template-columns: 1fr auto;
  }

  .main-nav {
    display: none;
  }

  .brand-kicker {
    font-size: 12px;
  }

  .brand-name {
    font-size: 15px;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
  }

  .hero {
    min-height: auto;
    padding-top: 42px;
  }

  .architectural-mark {
    inset-inline-end: -105px;
    opacity: calc(var(--arch-opacity) * .65);
  }

  .impact-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .impact-grid div:nth-child(4) {
    border-inline-start: 0;
  }

  .impact-grid div:nth-child(n+4) {
    border-top: 1px solid var(--rule-soft);
  }
}


@media (max-width: 640px) {
  .header-inner {
    width: min(calc(100% - 28px), var(--content));
    min-height: 74px;
  }

  .header-controls {
    gap: 3px;
  }

  .language-button {
    width: 42px;
    padding: 0;
    justify-content: center;
  }

  .brand {
    gap: 9px;
  }

  .brand-kicker {
    font-size: 11px;
  }

  .brand-name {
    max-width: 220px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
  }

  .hero {
    padding: 32px 16px 38px;
  }

  .geometric-field {
    inset-block-start: -35px;
    inset-inline-start: -170px;
    width: 480px;
  }

  .architectural-mark {
    inset-inline-end: -132px;
    inset-block-start: 92px;
    width: 210px;
    height: 500px;
    opacity: calc(var(--arch-opacity) * .45);
  }

  .eyebrow {
    gap: 12px;
    font-size: 15px;
  }

  .eyebrow i {
    width: 46px;
  }

  .memorial-title {
    margin-top: 17px;
    display: block;
    font-size: clamp(41px, 13vw, 54px);
    line-height: 1.23;
  }

  .memorial-title strong {
    display: block;
    margin-block: 2px;
    font-size: 1.08em;
  }

  .title-prefix,
  .title-mercy {
    display: inline;
    font-size: .62em;
  }

  .hero-dua {
    margin-top: 14px;
    font-size: clamp(29px, 8.6vw, 38px);
    line-height: 1.55;
  }

  .hero-lead {
    margin-top: 6px;
    font-size: 16px;
  }

  .primary-actions {
    margin-top: 24px;
    grid-template-columns: repeat(2, 1fr);
    gap: 11px;
  }

  .action-button {
    min-height: 66px;
    padding: 10px 12px;
    gap: 9px;
    border-radius: 15px;
    font-size: 17px;
  }

  .action-button svg {
    width: 25px;
    height: 25px;
  }

  .action-primary {
    grid-column: 1 / -1;
    grid-row: 1;
    min-height: 72px;
    font-size: 20px;
  }

  .action-dua {
    grid-column: 1;
  }

  .action-donate {
    grid-column: 2;
  }

  .utility-actions {
    margin-top: 25px;
  }

  .utility-item {
    padding-inline: 7px;
  }

  .utility-icon {
    width: 48px;
    height: 48px;
  }

  .utility-icon svg {
    width: 23px;
    height: 23px;
  }

  .utility-item b {
    font-size: 12px;
  }

  .utility-item small {
    display: none;
  }

  .hadith-card {
    margin-top: 34px;
    padding: 24px 6px;
  }

  .hadith-label {
    font-size: 20px;
  }

  .hadith-text {
    margin-top: 7px;
    font-size: 22px;
    line-height: 1.8;
  }

  .hadith-card footer {
    font-size: 15px;
  }

  .impact-section,
  .share-section {
    padding-inline: 18px;
  }

  .impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .impact-grid div,
  .impact-grid div:nth-child(4) {
    border-inline-start: 1px solid var(--rule-soft);
  }

  .impact-grid div:nth-child(odd) {
    border-inline-start: 0;
  }

  .impact-grid div:nth-child(n+3) {
    border-top: 1px solid var(--rule-soft);
  }

  .impact-grid div:last-child {
    grid-column: 1 / -1;
    border-inline-start: 0;
  }

  .share-card {
    align-items: stretch;
    flex-direction: column;
    text-align: center;
  }

  .share-actions {
    justify-content: center;
  }

  .share-button {
    flex: 1;
  }
}


@media (max-width: 390px) {
  .brand-name {
    max-width: 170px;
  }

  .header-controls .language-button {
    display: none;
  }

  .primary-actions {
    gap: 9px;
  }

  .action-button {
    font-size: 15px;
  }

  .utility-item b {
    font-size: 11px;
  }

  .share-actions {
    flex-direction: column;
  }

  .share-button {
    width: 100%;
  }
}


@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}


@media print {
  @page {
    size: A4 landscape;
    margin: 12mm;
  }

  :root,
  html[data-theme="dark"] {
    color-scheme: light;
    --page: #ffffff;
    --page-deep: #ffffff;
    --surface: #ffffff;
    --surface-soft: #ffffff;
    --ink: #102542;
    --ink-soft: #56677c;
    --ink-faint: #7b8796;
    --gold: #9b722f;
    --gold-deep: #805b24;
    --rule: rgba(155, 114, 47, .48);
    --rule-soft: rgba(155, 114, 47, .22);
    --primary: #102542;
    --primary-ink: #ffffff;
  }

  .site-header,
  .primary-actions,
  .utility-actions,
  .impact-section,
  .share-section,
  .site-footer,
  .toast {
    display: none !important;
  }

  .hero {
    min-height: 0;
    padding: 14mm 10mm;
    background: #ffffff;
  }

  .architectural-mark,
  .geometric-field {
    opacity: .12;
  }

  .hadith-card {
    break-inside: avoid;
  }
}


/* the components below were written against these names; they map onto Bakr's palette above */
:root, html[data-theme="dark"] {
  --paper: var(--page); --paper-2: var(--surface); --paper-3: var(--page-deep);
  --ink-2: var(--ink-soft); --ink-3: var(--ink-faint);
  --gold-2: var(--gold); --gold-3: var(--gold); --gold-light: color-mix(in srgb, var(--gold) 65%, white);
  --navy: var(--primary); --on-navy: var(--primary-ink); --cream: #f3ead8; --navy-band: var(--primary); --navy-deep: var(--page-deep);
  --wrap: var(--content); --gut: var(--gutter); --radius: 22px; --shadow-2: var(--shadow-strong);
  --quran-size: 26px;
}
body { display: flex; flex-direction: column; min-height: 100dvh; overflow-x: hidden; font-size: 17px; }
main { flex: 1; }
img, video, iframe { max-width: 100%; display: block; }
[hidden] { display: none !important; }
.wrap { width: min(100% - 2 * var(--gutter), var(--content)); margin-inline: auto; }
.section-title { font-size: clamp(22px, 3.2vw, 28px); font-weight: 800; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; color: var(--ink); }
.section-title::before { content: ""; width: 10px; height: 10px; background: var(--gold); transform: rotate(45deg); flex: none; border-radius: 1px; }
.title-gold { font-family: var(--ui); font-weight: 900; font-size: clamp(38px, 8vw, 72px); line-height: 1.15; margin: clamp(14px, 3vw, 26px) 0 0; padding: .05em .12em .18em; background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; }
.pill { display: inline-block; margin-top: 10px; background: var(--primary); color: var(--primary-ink); font-weight: 800; font-size: clamp(17px, 2.6vw, 22px); line-height: 1.4; padding: 8px 26px; border-radius: 999px; box-shadow: var(--shadow); }
.lead { color: var(--ink-soft); font-size: 16px; margin: 10px auto 0; max-width: 620px; }
.card { border-color: var(--rule-soft); }

/* hero background: the mosque arch, generated for the site (assets/img/bg), light and dark */
.hero { background-color: var(--page); background-image: radial-gradient(ellipse at 52% 22%, var(--hero-glow), transparent 58%), var(--hero-image, none); background-size: auto, cover; background-position: center, center; background-repeat: no-repeat; }
:root { --hero-image: url("../img/bg/scene-light-1100.jpg"); }
html[data-theme="dark"] { --hero-image: url("../img/bg/scene-dark-1100.jpg"); }
@media (min-width: 1100px) { :root { --hero-image: url("../img/bg/scene-light.jpg"); } html[data-theme="dark"] { --hero-image: url("../img/bg/scene-dark.jpg"); } }
.hero .hadith-text .hl { color: var(--gold-deep); font-weight: 700; }
.impact-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.header-controls { position: relative; }
.lang-menu { inset-inline-end: auto; inset-inline-start: 0; }
/* Sadaqah jariyah site for Osama Saif (رحمه الله).
   One sheet for every page. Logical properties, so Arabic (rtl) and the other
   languages (ltr) share it. Colors and pattern match the family's Ehsan cards. */

@font-face {
  font-family: "Cairo";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/cairo-arabic.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* (the old components' own dark palette lived here; removed 2026-09-14 so dark mode uses Bakr's tokens through the alias block above) */

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

img, svg, video, iframe { max-width: 100%; display: block; }

[hidden] { display: none !important; }

.wrap { width: min(100% - 2 * var(--gut), var(--wrap)); margin-inline: auto; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* pattern from the cards */
.pattern::before {
  content: "";
  position: absolute; inset: 0;
  opacity: var(--pattern-opacity);
  border-radius: inherit;
  background-size: 120px 120px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23b98a2e' stroke-width='1.2'><rect x='30' y='30' width='60' height='60'/><rect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/><circle cx='60' cy='60' r='8'/></g></svg>");
  pointer-events: none;
}


/* header */
.top {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 86%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule-soft);
}



.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 6px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 14px;
  box-shadow: var(--shadow-2); min-width: 190px; max-height: min(70vh, 460px); overflow: auto;
  z-index: 60;
}

.lang-menu button {
  width: 100%; text-align: start; padding: 8px 12px; border-radius: 9px; font-size: 15px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}

.lang-menu button:hover { background: var(--paper-3); }

.lang-menu button[aria-current="true"] { color: var(--gold); }

.lang-menu button[aria-current="true"]::after { content: "✓"; font-size: 13px; }

.lang-menu button[disabled] { opacity: .45; cursor: default; }


/* framed hero (from the card) */
.frame-card {
  position: relative;
  background: var(--paper-2);
  border: 2px solid var(--gold-2);
  border-radius: 30px;
  box-shadow: var(--shadow);
  padding: clamp(22px, 5vw, 52px) clamp(18px, 5vw, 56px);
  text-align: center;
  isolation: isolate;
}

.frame-card::after {
  content: ""; position: absolute; inset: 10px;
  border: 1px solid rgba(185, 138, 46, .45); border-radius: 22px; pointer-events: none;
}

.frame-card > * { position: relative; z-index: 1; }

.corner {
  position: absolute; width: 12px; height: 12px; z-index: 2;
  background: var(--gold-2); transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(201, 162, 74, .6);
}

.corner.tl { top: -6px; inset-inline-start: -6px; }

.corner.tr { top: -6px; inset-inline-end: -6px; }

.corner.bl { bottom: -6px; inset-inline-start: -6px; }

.corner.br { bottom: -6px; inset-inline-end: -6px; }


.quote {
  background: var(--paper);
  border: 1.5px solid var(--rule);
  border-radius: 24px;
  padding: 16px clamp(14px, 4vw, 34px) 14px;
  box-shadow: var(--shadow);
  margin-inline: auto;
  max-width: 820px;
}

.said { font-family: var(--naskh); font-weight: 700; color: var(--gold-deep); font-size: clamp(17px, 2.4vw, 22px); line-height: 1.7; }

.hadith { font-family: var(--naskh); font-weight: 700; color: var(--ink); font-size: clamp(19px, 3vw, 27px); line-height: 2; margin: 2px 0 0; }

.hadith .hl { color: var(--gold); }

html[lang="en"] .hadith, html:not([lang="ar"]):not([lang="ur"]) .hadith { font-family: var(--ui); font-weight: 700; line-height: 1.6; font-size: clamp(18px, 2.6vw, 24px); }

.rawa { font-family: var(--naskh); color: var(--gold-deep); font-size: 16px; margin-top: 4px; }

html:not([lang="ar"]):not([lang="ur"]) .rawa, html:not([lang="ar"]):not([lang="ur"]) .said { font-family: var(--ui); font-weight: 700; }


/* sections */
.section { padding-block: clamp(22px, 4vw, 40px); }

.muted { color: var(--ink-soft); font-size: 16px; }


/* action tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }



/* banners and buttons */
.banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(217, 180, 92, .22), rgba(201, 162, 74, .08));
  border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px 18px;
}

.banner b { font-size: 17px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 20px; border-radius: 999px; font-weight: 800; font-size: 15px; line-height: 1.2;
  background: var(--navy); color: var(--on-navy); border: 1.5px solid var(--navy);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}

.btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(12, 35, 71, .18); }

.btn svg { width: 18px; height: 18px; }

.btn-gold { background: var(--surface); color: var(--gold-deep); border-color: var(--gold-2); }

.btn-gold:hover { background: rgba(201, 162, 74, .12); }

.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--rule-soft); }

.btn-ghost:hover { background: var(--paper-3); }

.btn-wa { background: #128c5e; border-color: #128c5e; color: #fff; }

.btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }


/* cards */
.card { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); }

.tabs { display: inline-flex; gap: 4px; background: var(--paper-3); padding: 4px; border-radius: 999px; border: 1px solid var(--rule-soft); }

.tabs button, .tabs a { padding: 8px 18px; border-radius: 999px; font-weight: 800; font-size: 15px; color: var(--ink-2); transition: all .2s var(--ease); }

.tabs button[aria-selected="true"], .tabs a[aria-selected="true"] { background: var(--navy); color: var(--on-navy); box-shadow: 0 6px 16px rgba(12, 35, 71, .18); }

button.surah-card { font: inherit; text-align: start; cursor: pointer; color: inherit; }

.surah-card.playing { border-color: var(--gold-2); background: linear-gradient(135deg, rgba(217, 180, 92, .18), rgba(201, 162, 74, .06)); }

#ayahResults .ayah { display: block; padding: 10px 14px; }

#ayahResults .ayah .quran { font-size: calc(var(--quran-size) * .8); }


/* live player */
.player { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-2); border: 1px solid var(--rule-soft); }

.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.source { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font-size: 14px; margin-top: 10px; flex-wrap: wrap; }

.source .dot { width: 8px; height: 8px; border-radius: 50%; background: #d33; box-shadow: 0 0 0 4px rgba(221, 51, 51, .18); animation: pulse 1.6s infinite; }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(221, 51, 51, .18); } 50% { box-shadow: 0 0 0 7px rgba(221, 51, 51, .06); } }

.note { background: var(--paper-3); border-inline-start: 3px solid var(--gold-2); padding: 10px 14px; border-radius: 12px; color: var(--ink-2); font-size: 15px; }


/* footer */
.foot { border-top: 1px solid var(--rule-soft); margin-top: 30px; padding-block: 26px 34px; text-align: center; color: var(--ink-3); font-size: 14px; }


/* utilities */
.toast {
  position: fixed; inset-inline: 0; bottom: 22px; margin-inline: auto; width: max-content; max-width: 90vw;
  background: var(--navy); color: var(--on-navy); padding: 10px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: var(--shadow-2); z-index: 100; opacity: 0; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none;
}

.toast.show { opacity: 1; transform: none; }

.ltr { direction: ltr; unicode-bidi: isolate; }


/* ===== Quran text and reader ===== */
@font-face {
  font-family: "Hafs";
  font-display: swap;
  src: url("../fonts/hafs.woff2") format("woff2");
}

.quran { font-family: "Hafs", "Amiri Quran", "Noto Naskh Arabic", serif; direction: rtl; font-size: var(--quran-size); line-height: 2.1; color: var(--ink); text-align: right; unicode-bidi: isolate; }

.quran .marker { color: var(--gold); font-size: .95em; margin-inline-start: 4px; }

.basmalah { text-align: center; font-size: calc(var(--quran-size) * 1.05); margin: 6px 0 14px; color: var(--gold-deep); }

html[data-theme="dark"] .basmalah { color: var(--gold-light); }


.search { width: 100%; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--rule-soft); background: var(--paper-2); color: var(--ink); font: inherit; font-size: 16px; box-shadow: var(--shadow); outline: none; }

.search:focus { border-color: var(--gold-2); }

.reader-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }

.surah-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 14px; }

.surah-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 16px; box-shadow: var(--shadow); transition: transform .2s var(--ease), border-color .2s var(--ease); }

.surah-card:hover { transform: translateY(-2px); border-color: var(--rule); }

.surah-num { width: 38px; height: 38px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--gold-deep); border: 1.5px solid var(--gold-2); transform: rotate(45deg); border-radius: 6px; }

.surah-num span { transform: rotate(-45deg); }

.surah-card b { font-family: "Hafs", var(--naskh); font-size: 19px; font-weight: 400; line-height: 1.3; display: block; }

.surah-card small { color: var(--ink-3); font-size: 12.5px; display: block; }


.reader-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: center; }

.reader-head h1 { margin: 0; font-family: "Hafs", var(--naskh); font-weight: 400; font-size: clamp(26px, 5vw, 36px); line-height: 1.3; }

.reader-head .sub { color: var(--ink-3); font-size: 14px; }

.reader-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--rule-soft); background: var(--paper-2); font-size: 14px; font-weight: 700; color: var(--ink-2); transition: all .2s var(--ease); }

.chip[aria-pressed="true"] { background: var(--navy); color: var(--on-navy); border-color: var(--navy); }

.chip select { border: 0; background: transparent; font: inherit; color: inherit; outline: none; max-width: 180px; }

.chip.group { padding: 4px 6px; gap: 2px; }

.chip.group button { padding: 3px 9px; border-radius: 999px; font-weight: 800; }

.chip.group button:hover { background: var(--paper-3); }


.ayahs { display: flex; flex-direction: column; gap: 4px; }

.ayah { padding: 14px 16px; border-radius: 16px; border: 1px solid transparent; transition: background .25s var(--ease), border-color .25s var(--ease); scroll-margin-top: 140px; }

.ayah:hover { background: var(--paper-2); }

.ayah.playing { background: linear-gradient(135deg, rgba(217, 180, 92, .18), rgba(201, 162, 74, .06)); border-color: var(--rule); }

.ayah .quran { margin: 0; cursor: pointer; }

.ayah .tr { margin: 8px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.7; }

html[lang="ur"] .ayah .tr { font-family: "Noto Nastaliq Urdu", var(--naskh); line-height: 2; }

.ayah .tf { margin: 8px 0 0; color: var(--ink-2); font-family: var(--naskh); font-size: 16px; line-height: 1.9; direction: rtl; text-align: right; padding: 8px 12px; background: var(--paper-3); border-radius: 10px; border-inline-start: 3px solid var(--gold-2); }

.ayah-actions { display: flex; gap: 6px; margin-top: 6px; opacity: .7; }

.ayah-actions button { font-size: 12.5px; font-weight: 700; color: var(--gold-deep); padding: 3px 8px; border-radius: 8px; }

.ayah-actions button:hover { background: var(--paper-3); }

.reader-end { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 20px 0 40px; }


/* audio bar */
.audiobar { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; background: color-mix(in srgb, var(--paper-2) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--rule-soft); box-shadow: 0 -8px 30px rgba(12, 35, 71, .08); padding: 10px var(--gut) calc(10px + env(safe-area-inset-bottom)); }

.audiobar-in { width: min(100%, var(--wrap)); margin-inline: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.audiobar .now { flex: 1; min-width: 160px; display: flex; flex-direction: column; line-height: 1.3; }

.audiobar .now b { font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 18px; }

.audiobar .now small { color: var(--ink-3); font-size: 12.5px; }

.audiobar .ctrl { display: flex; align-items: center; gap: 4px; }

.audiobar .ctrl button { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }

.audiobar .ctrl button:hover { background: var(--paper-3); }

.audiobar .ctrl button svg { width: 20px; height: 20px; }

.audiobar .ctrl .play { width: 48px; height: 48px; background: var(--navy); color: var(--on-navy); }

.audiobar .ctrl .play svg { width: 22px; height: 22px; }

.audiobar .ctrl .play:hover { background: var(--navy); opacity: .92; }

.audiobar .bar { flex-basis: 100%; height: 3px; background: var(--rule-soft); border-radius: 2px; overflow: hidden; }

.audiobar .bar i { display: block; height: 100%; width: 0; background: var(--gold-2); transition: width .25s linear; }

body.audio-on main { padding-bottom: 130px; }

@media (max-width: 560px) { .audiobar .now b { font-size: 16px; } .reader-head { grid-template-columns: 1fr; } }


/* ===== Mushaf (page-accurate, KFGQPC page fonts) ===== */
.mushaf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }

.mushaf-tools .chip input { width: 64px; border: 0; background: transparent; font: inherit; color: inherit; outline: none; text-align: center; }

.mushaf-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; }

.mpage {
  width: min(100%, 620px); background: #fdfbf5; color: #1a1a1a;
  border: 2px solid var(--gold-2); border-radius: 10px; box-shadow: var(--shadow-2);
  padding: 14px clamp(10px, 3vw, 22px) 12px; position: relative; direction: rtl; user-select: none; touch-action: pan-y;
  outline: 1px solid rgba(185, 138, 46, .35); outline-offset: -8px;
}

html[data-theme="dark"] .mpage { background: #f6f1e4; }

.mhead { display: flex; justify-content: space-between; font-family: var(--ui); font-weight: 700; font-size: 14px; color: #7f5b25; padding: 0 6px 6px; border-bottom: 1px solid rgba(185, 138, 46, .35); margin-bottom: 8px; } /* the Mushaf page is cream in both themes, so its labels keep the light deep gold */

.mlines { display: flex; flex-direction: column; }

.mline { display: flex; justify-content: space-between; align-items: baseline; white-space: nowrap; line-height: 1.85; height: var(--mline-h, 2.1em); overflow: visible; }

.mline.center { justify-content: center; gap: .35em; }

.mline.first2 { justify-content: center; gap: .3em; }

.mword { display: inline-block; cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .2s var(--ease); }

.mword.sel { background: rgba(201, 162, 74, .32); }

.mword.playing { background: rgba(12, 35, 71, .16); }

.mline.header { justify-content: center; }

.mline.header .banner { font-family: "Hafs", var(--naskh); font-size: .78em; color: #fdfbf5; background: linear-gradient(180deg, #0f2b57, #0c2347); border: 1px solid var(--gold-2); border-radius: 999px; padding: .05em 1.4em; line-height: 1.7; box-shadow: inset 0 0 0 3px #fdfbf5, inset 0 0 0 4px var(--gold-2); }

.mline.basmalah { justify-content: center; font-family: "Hafs", var(--naskh); font-size: .95em; color: #1a1a1a; }

.mfoot { text-align: center; font-family: var(--ui); font-weight: 700; color: #7f5b25; font-size: 15px; margin-top: 6px; }

.mnav { display: flex; justify-content: space-between; width: min(100%, 620px); gap: 10px; }

.mloading { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(253, 251, 245, .7); font-weight: 700; color: var(--gold-deep); border-radius: 8px; }

.sheet { position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: var(--paper-2); border-top: 1px solid var(--rule); border-radius: 22px 22px 0 0; box-shadow: 0 -12px 40px rgba(12, 35, 71, .18); padding: 14px var(--gut) calc(16px + env(safe-area-inset-bottom)); max-height: 60vh; overflow: auto; transform: translateY(110%); transition: transform .3s var(--ease); }

.sheet.open { transform: none; }

.sheet .sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }

.sheet .sheet-head b { font-family: "Hafs", var(--naskh); font-weight: 400; font-size: 20px; }

.sheet .quran { font-size: 22px; margin: 4px 0 8px; }

.sheet .tf { font-family: var(--naskh); direction: rtl; text-align: right; color: var(--ink-2); line-height: 1.9; background: var(--paper-3); padding: 10px 12px; border-radius: 10px; border-inline-start: 3px solid var(--gold-2); margin: 8px 0 0; }


/* ===== Prayer times ===== */
.prayer-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

@media (min-width: 820px) { .prayer-grid { grid-template-columns: 1.3fr 1fr; } }

.dates { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; color: var(--ink-2); margin: 4px 0 12px; font-size: 16px; }

.dates b { font-size: 19px; color: var(--ink); font-weight: 800; }

.times { display: flex; flex-direction: column; gap: 6px; }

.time { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--rule-soft); font-weight: 700; }

.time .ltr { font-variant-numeric: tabular-nums; font-size: 18px; }

.time.next { background: var(--navy); color: var(--on-navy); border-color: var(--navy); box-shadow: var(--shadow-2); }

.time.next small { display: block; font-weight: 600; font-size: 12.5px; opacity: .8; }

.time.past { opacity: .78; }

.compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }

.compass { width: min(260px, 70vw); aspect-ratio: 1; position: relative; }

.compass svg { width: 100%; height: 100%; }

.compass .dial { transition: transform .15s linear; transform-origin: 50% 50%; }


/* ===== For Osama ===== */
.ehsan { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 640px) { .ehsan { grid-template-columns: 1fr 1fr; } }

.ehsan-card { background: var(--paper-2); border: 2px solid var(--gold-2); border-radius: 20px; padding: 18px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; align-items: center; }

.ehsan-card .link { direction: ltr; font-size: 14px; color: var(--gold-deep); font-weight: 700; letter-spacing: .2px; }

.cards-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }

.cards-row a { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--rule-soft); box-shadow: var(--shadow); background: #fff; }

.cards-row img { width: 100%; height: auto; }

.deeds { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 820px) { .deeds { grid-template-columns: 1fr 1fr; } }

.deed { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 8px; }

.deed h3 { margin: 0; font-size: 19px; display: flex; align-items: center; gap: 8px; }

.deed h3::before { content: ""; width: 9px; height: 9px; background: var(--gold-2); transform: rotate(45deg); flex: none; }

.deed .how { color: var(--ink-2); font-size: 15px; margin: 0; }

.hadith-quote { font-family: var(--naskh); font-size: 18px; line-height: 2; color: var(--ink); margin: 0; direction: rtl; text-align: right; background: var(--paper); border-inline-start: 3px solid var(--gold-2); padding: 8px 12px; border-radius: 10px; }

html:not([lang="ar"]):not([lang="ur"]) .hadith-quote.tr { font-family: var(--ui); font-size: 15.5px; line-height: 1.7; direction: ltr; text-align: left; }

.ref { font-size: 13.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ref a { color: var(--gold-deep); font-weight: 700; }


/* ===== radio ===== */
.radios { display: grid; grid-template-columns: 1fr; gap: 10px; }

@media (min-width: 720px) { .radios { grid-template-columns: 1fr 1fr; } }

.radio-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 16px; padding: 12px 16px; box-shadow: var(--shadow); }

.radio-card b { display: block; font-size: 16px; }

.radio-card small { display: block; color: var(--ink-3); font-size: 12.5px; }

.radio-card.playing { border-color: var(--gold-2); background: linear-gradient(135deg, rgba(217, 180, 92, .18), rgba(201, 162, 74, .06)); }

.audiobar.radio .hide-in-radio { display: none; }

.audiobar.radio .now b { font-family: var(--ui); font-weight: 800; font-size: 16px; }


/* ===== adhkar ===== */
.adhkar { display: flex; flex-direction: column; gap: 10px; }

.dhikr { background: var(--paper-2); border: 1px solid var(--rule-soft); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow); cursor: pointer; transition: background .25s var(--ease), border-color .25s var(--ease); user-select: none; }

.dhikr:hover { border-color: var(--rule); }

.dhikr.complete { background: var(--paper-3); opacity: .9; }

.dhikr-text { font-family: var(--naskh); font-size: 20px; line-height: 2.05; direction: rtl; text-align: right; color: var(--ink); margin: 0; }

.dhikr-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 10px; }

.dhikr-foot .ref { font-size: 13px; color: var(--ink-3); }

.dhikr .count { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--gold-2); color: var(--gold); flex: none; line-height: 1.1; }

.dhikr .count b { font-size: 20px; font-weight: 900; }

.dhikr .count small { font-size: 10px; color: var(--ink-3); white-space: nowrap; }

.dhikr.complete .count { background: var(--gold-deep); color: var(--surface); border-color: var(--gold-deep); }

.dhikr.complete .count small { color: var(--surface); }


/* ===== photography ===== */
.banner-photo { position: relative; height: clamp(150px, 28vw, 260px); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow-2); border: 1px solid var(--rule-soft); background: #0c2347; }

.banner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; display: block; transition: opacity .4s var(--ease); }

.banner-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 35, 71, .05), rgba(12, 35, 71, .55)); }

.banner-photo b { position: absolute; inset-inline-start: 18px; bottom: 12px; z-index: 1; color: #fff; font-size: clamp(18px, 3vw, 24px); font-weight: 800; text-shadow: 0 2px 12px rgba(0, 0, 0, .5); }



/* ===== design adjustments (same palette): gold accents, ornaments, stronger hero, better tiles ===== */
.top { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(12, 35, 71, .06); }


/* ornament: line, diamond, line */
.ornament { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px auto 4px; color: var(--gold-2); }


/* hero: like the card, with more presence */
.frame-card { border-width: 2.5px; box-shadow: 0 18px 50px rgba(12, 35, 71, .12), 0 0 0 6px rgba(201, 162, 74, .08); }

.frame-card .quote { box-shadow: 0 10px 30px rgba(12, 35, 71, .08); }


/* tiles: gold accent bar, gold gradient icon, bigger titles */
.tile { padding: 20px 18px 18px; border: 1px solid var(--rule-soft); box-shadow: 0 10px 30px rgba(12, 35, 71, .08); }


/* sections and cards */
.section-title { font-size: clamp(22px, 3.2vw, 28px); }

.tabs { border-color: rgba(185, 138, 46, .4); background: rgba(201, 162, 74, .1); }

.player { border: 2px solid var(--gold-2); }

.banner { border-color: var(--gold-2); }


/* footer: paper, ornament, gold dua */
.foot { border-top: 0; margin-top: 34px; padding-block: 8px 40px; position: relative; }

html[data-theme="dark"] .foot .dua { color: var(--gold-light); }


/* phones: the nav becomes a scrollable row under the brand, the language button stays as an icon */
@media (max-width: 860px) {
  .header-inner { grid-template-columns: 1fr auto; grid-template-rows: auto auto; row-gap: 0; min-height: 0; padding-block: 10px 4px; }
  .main-nav { display: flex; grid-column: 1 / -1; justify-content: flex-start; gap: 6px 18px; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 8px; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { padding: 6px 2px; font-size: 14px; flex: none; }
  .language-button { display: inline-flex; min-height: 40px; padding-inline: 8px; }
  .language-button span { display: none; }
  .header-controls { position: relative; }
}
@media (max-width: 860px) {
  .site-header .header-controls { grid-row: 1; grid-column: 2; display: flex; }
  .site-header .main-nav { grid-row: 2; grid-column: 1 / -1; }
  .site-header .language-button { display: inline-flex; width: 42px; padding: 0; justify-content: center; }
}

/* ===== round 2 of Bakr's notes ===== */
/* header: brand to the far edge, controls to the other edge */
.header-inner { width: calc(100% - 2 * var(--gutter)); max-width: none; }

/* stats strip under the header on every page, always live */
.stats { border-bottom: 1px solid var(--rule-soft); background: color-mix(in srgb, var(--surface) 55%, var(--page)); position: relative; }
.stats-in { width: calc(100% - 2 * var(--gutter)); margin-inline: auto; display: flex; overflow-x: auto; scrollbar-width: none; padding: 9px 0 10px; }
.stats-in::-webkit-scrollbar { display: none; }
.stats-in:empty { display: none; }
.stat { flex: 1 0 auto; min-width: 128px; padding: 0 14px; text-align: center; display: flex; flex-direction: column; line-height: 1.2; border-inline-start: 1px solid var(--rule-soft); }
.stat:first-child { border-inline-start: 0; }
.stat b { font-size: 18px; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat span { font-size: 11.5px; color: var(--ink-faint); font-weight: 700; margin-top: 3px; white-space: nowrap; }
@media (max-width: 720px) {
  .stat { min-width: 112px; padding: 0 10px; } .stat b { font-size: 16px; }
  .stats::after { content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 34px; pointer-events: none; background: linear-gradient(to right, var(--page), transparent); }
  html[dir="ltr"] .stats::after { background: linear-gradient(to left, var(--page), transparent); }
}

/* hero: the arch stays, the wall behind the words is calmed down */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 70% at 55% 42%, color-mix(in srgb, var(--page) 78%, transparent), transparent 100%),
    linear-gradient(to left, color-mix(in srgb, var(--page) 55%, transparent) 0%, color-mix(in srgb, var(--page) 62%, transparent) 55%, color-mix(in srgb, var(--page) 10%, transparent) 88%, transparent 100%);
}
html[dir="ltr"] .hero::before { background:
    radial-gradient(ellipse 62% 70% at 55% 42%, color-mix(in srgb, var(--page) 78%, transparent), transparent 100%),
    linear-gradient(to left, color-mix(in srgb, var(--page) 55%, transparent) 0%, color-mix(in srgb, var(--page) 62%, transparent) 55%, color-mix(in srgb, var(--page) 10%, transparent) 88%, transparent 100%); }
.hero { background-image: var(--hero-image, none); background-size: cover; background-position: center; }

/* every other page: the same arch, faint and fixed behind the content, so no page is a plain colour */
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--hero-image, none) center / cover no-repeat; opacity: .62; }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
    radial-gradient(ellipse 60% 70% at 55% 45%, color-mix(in srgb, var(--page) 72%, transparent), transparent 100%),
    linear-gradient(to left, color-mix(in srgb, var(--page) 62%, transparent) 0%, color-mix(in srgb, var(--page) 62%, transparent) 52%, color-mix(in srgb, var(--page) 28%, transparent) 86%, color-mix(in srgb, var(--page) 12%, transparent) 100%); }
html[data-theme="dark"] body::before { opacity: .7; }
body.home::before, body.home::after { display: none; }
body { background: var(--page); position: relative; z-index: 0; }
.card, .surah-card, .deed, .dua-card, .dhikr, .radio-card, .ehsan-card, .mpage, .time, .search, .chip, .tabs { background-color: var(--surface); }
.stat-card, .time.next { background-color: var(--primary); }

/* ===== motion ===== */
.hero { background-image: none; }
.hero-bg { position: absolute; inset: -16% 0 -16% 0; z-index: -2; background: var(--hero-image, none) center / cover no-repeat; will-change: transform; pointer-events: none; }
body::before { transform: translate3d(0, var(--page-shift, 0px), 0); inset: -8% 0; will-change: transform; }
.site-header { transition: box-shadow .3s var(--ease); }
.site-header.scrolled { box-shadow: 0 10px 30px rgba(16, 37, 66, .10); }
html[data-theme="dark"] .site-header.scrolled { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
html.js-motion .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js-motion .reveal.in { opacity: 1; transform: none; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero-copy > * { animation: rise .8s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; } .hero-copy > :nth-child(3) { animation-delay: .16s; } .hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; } .hero-copy > :nth-child(6) { animation-delay: .4s; }
.hadith-card { animation: rise .9s var(--ease) .5s both; }
@keyframes glow { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.hero-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 30% 60% at 12% 45%, rgba(255, 226, 170, .35), transparent 70%); animation: glow 7s ease-in-out infinite; mix-blend-mode: screen; }
html[data-theme="dark"] .hero-bg::after { background: radial-gradient(ellipse 30% 60% at 12% 45%, rgba(255, 190, 90, .28), transparent 70%); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .hero-copy > *, .hadith-card { animation: none; } .hero-bg::after { animation: none; } }

/* ===== compact lists instead of boxes ===== */
/* page head, compact and the same on every page: the title and its one line sit tight under the header stack,
   the content starts 14px below (the head is the first section of main; the section row has moved into the header by then) */
main.wrap > .section:first-child { padding-block: 14px; }
main.wrap > .section:first-child .section-title { font-size: clamp(20px, 2.4vw, 24px); line-height: 1.35; margin: 0 0 2px; }
main.wrap > .section:first-child .section-title + .muted, main.wrap > .section:first-child .reader-top + .muted, main.wrap > .section:first-child .reader-top .muted { margin: 0; font-size: 15px; line-height: 1.6; }
main.wrap > .section:first-child .reader-top { margin-bottom: 8px; }
main.wrap > .section:first-child + .section { padding-top: 0; }
/* pages with a section row have no visible title: the row is the title; the h1 stays in the page for search and screen readers */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
main.wrap:has(> .sr-only:first-child) { padding-top: 16px; }
main.wrap > .sr-only:first-child + .section { padding-top: 0; }
.list { border: 1px solid var(--rule-soft); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.list.rows-only { border: 0; box-shadow: none; background: transparent; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 640px) { .list.rows-only { grid-template-columns: 1fr 1fr; } }
.list-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 12px 18px 10px; border-bottom: 1px solid var(--rule-soft); color: var(--ink-soft); font-size: 13.5px; }
.list-head b { color: var(--ink); font-size: 17px; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li + li .row { border-top: 1px solid var(--rule-soft); }
.row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 16px; text-align: start; color: var(--ink); background: transparent; transition: background .2s var(--ease); font: inherit; cursor: pointer; border: 0; }
.row:hover { background: var(--gold-soft); }
.rows-only .row { border: 1px solid var(--rule); border-radius: 14px; background: var(--surface-2); box-shadow: var(--shadow); }
.row-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); position: relative; }
.row-icon svg { width: 18px; height: 18px; }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.row-main b { font-size: 15.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-main small { color: var(--ink-faint); font-size: 12.5px; margin-top: 2px; }
.row-side { flex: none; font-size: 13px; font-weight: 800; color: var(--gold-deep); }
.row-go { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(135deg); opacity: .8; margin-inline-end: 6px; }
html[dir="ltr"] .row-go { transform: rotate(-45deg); }
.row.playing { background: var(--gold-soft); }
.row.playing .row-icon { background: var(--gold); color: var(--primary-ink); }
html[data-theme="dark"] .row.playing .row-icon { color: #0b2032; }
.row .eq { display: none; align-items: flex-end; gap: 2px; height: 16px; }
.row .eq i { width: 3px; background: currentColor; border-radius: 1px; animation: eq .9s ease-in-out infinite; height: 40%; }
.row .eq i:nth-child(2) { animation-delay: .15s; } .row .eq i:nth-child(3) { animation-delay: .3s; } .row .eq i:nth-child(4) { animation-delay: .45s; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }
.row.playing .ic-play { display: none; } .row.playing .eq { display: flex; }
.radios { display: none; }
/* share card: a slim band, not a box */
.share-section { padding-block: clamp(28px, 4vw, 48px); }
.share-card { padding: 18px 24px; border-radius: 18px; }
.share-card h2 { font-size: clamp(22px, 2.4vw, 28px); }
.share-card p:not(.section-kicker) { margin-top: 4px; font-size: 14.5px; }

/* the two printed cards: thumbnails, not a wall */
.cards-row { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 16px; }
.cards-row a { border-radius: 14px; }
@media (max-width: 560px) { .cards-row { grid-template-columns: 1fr 1fr; } }

/* ===== round 3 ===== */
/* 1. header and strip stand apart from the page */
.site-header { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 1px solid var(--rule); box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 8px 24px rgba(16, 37, 66, .06); }
html[data-theme="dark"] .site-header { background: #04101a; border-bottom-color: rgba(212, 164, 86, .35); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.stats { background: color-mix(in srgb, var(--surface) 70%, var(--page)); border-bottom: 1px solid var(--rule); }
html[data-theme="dark"] .stats { background: #0a1a2a; border-bottom-color: rgba(212, 164, 86, .28); }
.site-footer { background: var(--surface); border-top: 1px solid var(--rule); }
html[data-theme="dark"] .site-footer { background: #04101a; }

/* 3. section navigator: shell.js moves it out of the page into the header, as the last band of the stack
   (header, strip, sections), full width, one line that scrolls on phones; links and the live page's tabs look the same */
.site-header .subnav { display: flex; flex-wrap: nowrap; gap: 0 18px; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gutter); background: var(--surface); border-top: 1px solid var(--rule); }
.subnav::-webkit-scrollbar { display: none; }
.subnav > :first-child { margin-inline-start: auto; }
.subnav > :last-child { margin-inline-end: auto; }
.subnav a, .subnav button { position: relative; flex: none; padding: 10px 2px 11px; border: 0; border-radius: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-soft); cursor: pointer; white-space: nowrap; transition: color .2s var(--ease); }
.subnav a::after, .subnav button::after { content: ""; position: absolute; inset-inline: 10%; inset-block-end: 0; height: 2px; background: var(--gold); transform: scaleX(0); transition: transform .2s var(--ease); }
.subnav a:hover, .subnav button:hover, .subnav a.active, .subnav button[aria-selected="true"] { color: var(--ink); background: transparent; }
.subnav a:hover::after, .subnav button:hover::after, .subnav a.active::after, .subnav button[aria-selected="true"]::after { transform: scaleX(1); }
.subnav:has(a.active) button[aria-selected="true"] { color: var(--ink-soft); }
.subnav:has(a.active) button[aria-selected="true"]::after { transform: scaleX(0); }
html[data-theme="dark"] .site-header .subnav { background: #030b14; }
[id] { scroll-margin-top: calc(var(--header-h, 88px) + 14px); }

/* 5. duas and deeds: calm cards, quiet actions, no loud buttons */
.deeds { gap: 14px; }
.dua-card, .deed { background: var(--surface); border: 1px solid var(--rule-soft); border-radius: 18px; padding: 18px 20px; box-shadow: var(--shadow); gap: 10px; }
.dua-card .ar { font-size: 20px; line-height: 2; }
.dua-card .ref, .deed .ref { font-size: 13px; color: var(--ink-faint); }
.dua-card .ref a, .deed .ref a { color: var(--gold-deep); font-weight: 700; }
.dua-actions { display: flex; gap: 8px; margin-top: 2px; }
.mini { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--gold-deep); font-size: 13px; font-weight: 800; transition: background .2s var(--ease), color .2s var(--ease); }
.mini svg { width: 15px; height: 15px; }
.mini:hover { background: var(--gold-soft); color: var(--ink); }
.btn-wa { background: var(--primary); border-color: var(--primary); color: var(--primary-ink); }
.deed h3 { font-size: 18px; }
.hadith-quote { background: color-mix(in srgb, var(--gold-soft) 60%, transparent); border-inline-start-color: var(--gold); }

/* header, strip and page as three distinct bands; the header carries the wall's star pattern (Bakr's geometric field) and a gold line on top */
.site-header { isolation: isolate; background: var(--surface); } /* light: one white stack (header, strip, row), separated by the gold hairlines and the pattern; the beige bands read stale (Bakr, 09-14) */
html[data-theme="dark"] .site-header { background: linear-gradient(180deg, #071523, #030b14); }
.site-header::after { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 3px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--gold) 28%, var(--gold-deep) 50%, var(--gold) 72%, transparent); }
.brand-mark { fill: color-mix(in srgb, var(--gold) 16%, transparent); filter: drop-shadow(0 6px 14px rgba(181, 138, 70, .32)); }
.stats { background: var(--surface); }
html[data-theme="dark"] .stats { background: #0d1f33; }

/* home shell: a view eases in when it opens inside index.html */
#view:not([hidden]) { animation: view-in .28s var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #view:not([hidden]) { animation: none; } }

/* ===== the home page as one screen (body.shell): the window never scrolls; the content pane does only when it must ===== */
body.shell { height: 100dvh; overflow: hidden; }
body.shell > main { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } /* scrolls, but shows no bar */
body.shell > main::-webkit-scrollbar { display: none; }
body.shell .site-footer { display: none; }
body.shell [id] { scroll-margin-top: 14px; }          /* the header is outside the pane, so anchors need no offset */
body.shell #main-content { display: flex; flex-direction: column; }
body.shell .hero { flex: 1 0 auto; min-height: 100%; display: flex; flex-direction: column; justify-content: center; padding: min(2.2vh, 30px) var(--gutter) min(1.8vh, 24px); }
body.shell .hero-inner { margin-block: auto; }
/* every vertical size follows the window height on top of Bakr's clamps, so any screen 700px or taller fits without a scrollbar */
body.shell .eyebrow { font-size: min(clamp(16px, 1.45vw, 21px), 2.3vh); }
body.shell .memorial-title { font-size: min(clamp(46px, 5.1vw, 76px), 7.2vh); margin-top: min(1.8vh, 26px); line-height: 1.14; }
body.shell .hero-dua { font-size: min(clamp(31px, 3.4vw, 50px), 4.7vh); margin-top: min(1vh, 18px); line-height: 1.45; }
body.shell .hero-lead { font-size: min(clamp(17px, 1.55vw, 22px), 2.3vh); }
body.shell .primary-actions { margin-top: min(2.2vh, 30px); }
body.shell .action-button { min-height: min(60px, 6.2vh); }
body.shell .utility-actions { margin-top: min(1.8vh, 26px); }
body.shell .utility-item { gap: min(7px, .8vh); }
body.shell .utility-icon { width: min(58px, 6.2vh); height: min(58px, 6.2vh); }
body.shell .utility-item small { font-size: min(12.5px, 1.5vh); }
body.shell .hero-friday { margin-top: min(1.4vh, 16px); display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; }
body.shell .hadith-card { margin-top: min(2.2vh, 36px); padding-block: min(1.5vh, 22px); }
body.shell .hadith-label { font-size: min(clamp(20px, 1.8vw, 26px), 2.5vh); }
body.shell .hadith-text { margin-top: min(9px, 1vh); font-size: min(clamp(22px, 2.25vw, 33px), 3.2vh); line-height: 1.55; }
body.shell .hadith-card footer { margin-top: 2px; font-size: min(17px, 1.9vh); }
body.shell .hero-share { margin-top: min(1.8vh, 20px); justify-content: center; }
body.shell .hero-share .share-button { min-height: min(44px, 4.8vh); padding-block: 6px; }
@media (max-height: 760px) and (min-width: 861px) { /* short laptop windows: the captions under the quick row go, the gaps shrink a little */
  body.shell .hero { padding-block: 10px 12px; }
  body.shell .utility-item small { display: none; }
  body.shell .hadith-card { margin-top: 1.6vh; padding-block: 1.2vh; }
  body.shell .hero-share { margin-top: 1.4vh; }
}
@media (max-width: 860px) {
  body.shell .hero { padding: 22px 16px 26px; justify-content: flex-start; }
  body.shell .hero-inner { margin-block: 0; }
  body.shell .hadith-card { margin-top: 26px; padding: 18px 6px; }
  body.shell .hero-share { margin-top: 18px; flex-direction: row; }
  body.shell .hero-share .share-button { width: auto; flex: 1; }
}

/* the sadaqah card (Osama page) */
#sadaqah .title-gold { font-size: clamp(28px, 6vw, 44px); margin: 0; }
#sadaqah .ehsan { margin-top: 14px; }
#sadaqah .sadaqah-actions { justify-content: center; margin-top: 14px; }
/* in the home shell the card fits the pane: its bottom border is always on screen, the printed cards take the height that is left */
@media (min-width: 861px) and (min-height: 800px) {
  body.shell #sadaqah { padding-bottom: 20px; }
  body.shell #sadaqah .frame-card { height: calc(100dvh - var(--header-h, 193px) - 36px); display: flex; flex-direction: column; align-items: center; padding: min(3vh, 34px) clamp(18px, 4vw, 48px) min(2.2vh, 24px); }
  body.shell #sadaqah .title-gold { font-size: min(clamp(28px, 6vw, 44px), 5vh); }
  body.shell #sadaqah .lead { margin-top: min(1vh, 10px); font-size: min(16px, 2vh); }
  body.shell #sadaqah .ehsan { margin-top: min(1.4vh, 14px); width: 100%; }
  body.shell #sadaqah .cards-row { flex: 1; min-height: 0; width: 100%; margin-top: min(1.4vh, 14px); display: flex; justify-content: center; gap: 16px; }
  body.shell #sadaqah .cards-row a { flex: 0 1 auto; min-height: 0; display: flex; }
  body.shell #sadaqah .cards-row img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
  body.shell #sadaqah .sadaqah-actions { margin-top: min(1.4vh, 14px); }
}

/* ===== the live sadaqah card (Osama page): the printed card, in the current language, as HTML ===== */
.sadaqah-card { position: relative; width: 100%; margin: 14px auto 0; padding: clamp(14px, 2.4vw, 26px) clamp(14px, 3vw, 34px); border: 2px solid var(--gold); border-radius: 26px; background: var(--surface); text-align: center; isolation: isolate; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: center; }
.sc-text { display: contents; }
.sc-quote { width: 100%; }
.sc-qrs { order: 1; }
.sc-cta, .sc-foot { order: 2; }
.sadaqah-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: var(--pattern-opacity); background-size: 120px 120px; pointer-events: none; z-index: -1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'><g fill='none' stroke='%23b98a2e' stroke-width='1.2'><rect x='30' y='30' width='60' height='60'/><rect x='30' y='30' width='60' height='60' transform='rotate(45 60 60)'/><circle cx='60' cy='60' r='8'/></g></svg>"); }
.sadaqah-card::after { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(185, 138, 46, .45); border-radius: 19px; pointer-events: none; }
.sc-quote { background: var(--page); border: 1.5px solid rgba(185, 138, 46, .7); border-radius: 20px; padding: 10px clamp(12px, 2.6vw, 30px) 8px; box-shadow: 0 8px 30px rgba(12, 35, 71, .07); }
.sc-said { margin: 0; font-family: var(--naskh); font-weight: 700; font-size: clamp(15px, 1.5vw, 19px); color: var(--gold-deep); line-height: 1.6; }
.sc-hadith { margin: 2px 0 0; font-family: var(--naskh); font-weight: 700; font-size: clamp(17px, 1.85vw, 24px); line-height: 1.85; color: var(--ink); }
.sc-hadith .hl { color: var(--gold-deep); }
.sc-rawa { margin: 2px 0 0; font-family: var(--naskh); font-size: 14px; color: var(--gold-deep); }
.sc-title { margin: 10px auto 0; font-family: var(--ui); font-weight: 900; font-size: clamp(34px, 4.6vw, 58px); line-height: 1.1; padding: .04em .12em .2em; display: block; width: fit-content;
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 50%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 12px rgba(138, 100, 32, .18)); }
.sc-pill { margin: 6px auto 0; display: block; width: fit-content; background: var(--primary); color: var(--primary-ink); font-weight: 800; font-size: clamp(14px, 1.6vw, 21px); line-height: 1.4; padding: 6px 26px; border-radius: 999px; box-shadow: 0 10px 28px rgba(12, 35, 71, .22); }
.sc-qrs { margin-top: clamp(10px, 1.6vw, 18px); display: flex; gap: clamp(12px, 2.4vw, 30px); justify-content: center; align-items: flex-start; }
.sc-qr { background: #fff; padding: 8px 8px 5px; border-radius: 18px; border: 4px solid var(--gold); box-shadow: 0 12px 34px rgba(12, 35, 71, .14); }
.sc-qr img { width: clamp(120px, 19vw, 230px); height: auto; aspect-ratio: 1; display: block; image-rendering: pixelated; }
.sc-qr .cap { font-family: -apple-system, "SF Pro Text", Helvetica, Arial, sans-serif; font-size: 11.5px; color: #7f5b25; margin-top: 5px; letter-spacing: .1px; text-align: center; }
.sc-cta { margin: clamp(10px, 1.6vw, 18px) 0 0; font-weight: 700; font-size: clamp(15px, 1.5vw, 20px); line-height: 1.35; color: var(--ink); }
.sc-foot { margin: 4px 0 0; font-weight: 500; font-size: clamp(12.5px, 1.1vw, 14px); color: var(--ink-soft); }
html[data-theme="dark"] .sadaqah-card { background: var(--surface-2); }
html[data-theme="dark"] .sc-quote { background: var(--surface); }
@media (max-width: 560px) { .sc-qr img { width: min(38vw, 150px); } .sc-qrs { gap: 10px; } }
/* in the home shell (windows 800px tall or more) the card takes the height left in the frame and its full width:
   text on one side, the two QR codes on the other, every size derived from the card's own height (container units) */
@media (min-width: 861px) and (min-height: 800px) {
  body.shell #sadaqah .sadaqah-card { flex: 1; min-height: 0; container-type: size; margin-top: min(1.4vh, 14px); padding: 2cqh clamp(14px, 3vw, 34px); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(16px, 3cqw, 44px); overflow: hidden; }
  body.shell #sadaqah .sc-text { display: flex; flex-direction: column; align-items: center; min-width: 0; }
  body.shell #sadaqah .sc-quote { padding: 1.2cqh clamp(12px, 2cqw, 26px) 1cqh; }
  body.shell #sadaqah .sc-said { font-size: clamp(12px, 5cqh, 18px); }
  body.shell #sadaqah .sc-hadith { font-size: clamp(14px, 6.5cqh, 23px); line-height: 1.65; }
  body.shell #sadaqah .sc-rawa { font-size: clamp(11px, 4cqh, 13px); }
  body.shell #sadaqah .sc-title { margin-top: 1.4cqh; font-size: clamp(26px, 15cqh, 54px); }
  body.shell #sadaqah .sc-pill { margin-top: 1cqh; font-size: clamp(12px, 6cqh, 20px); padding-block: 1cqh; }
  body.shell #sadaqah .sc-cta { margin-top: 2cqh; font-size: clamp(12px, 6cqh, 19px); }
  body.shell #sadaqah .sc-foot { margin-top: .6cqh; font-size: clamp(11px, 4.5cqh, 13.5px); }
  body.shell #sadaqah .sc-qrs { margin: 0; gap: clamp(12px, 2cqw, 26px); align-self: center; order: 1; }
  body.shell #sadaqah .sc-qr img { width: min(calc(100cqh - 74px), 20cqw, 320px); height: auto; }
}

/* the hadith on the home page stays on one line in Arabic (desktop): the card may grow to 1400px and the size follows
   the width (the text measures 35.2 times its font size in Naskh 600, so width / 36 is one line with a little air) */
@media (min-width: 861px) {
  html[lang="ar"] .hero-inner { width: min(100%, 1400px); }
  html[lang="ar"] .hadith-card { width: min(100%, 1400px); }
  html[lang="ar"] .hadith-text, html[lang="ar"] body.shell .hadith-text { white-space: nowrap; font-size: min(clamp(22px, 2.25vw, 33px), 3.4vh, calc((min(100vw - 2 * var(--gutter), 1400px) - 136px) / 36)); }
}

/* the words sit on frosted plates over the screen: the nav in its own container, the brand and the controls on the same kind of plate */
.site-header .main-nav, .site-header .brand, .site-header .header-controls { background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--rule-soft); border-radius: 999px; box-shadow: 0 4px 16px rgba(16, 37, 66, .06); }
.site-header .main-nav { padding: 2px 20px; }
.site-header .brand { padding: 5px 14px 5px 18px; }
.site-header .header-controls { padding: 3px 6px; }
html[data-theme="dark"] .site-header .main-nav, html[data-theme="dark"] .site-header .brand, html[data-theme="dark"] .site-header .header-controls { background: rgba(4, 16, 26, .72); border-color: rgba(212, 164, 86, .3); box-shadow: 0 4px 16px rgba(0, 0, 0, .3); }
@media (max-width: 860px) { .site-header .main-nav { border-radius: 16px; padding: 2px 12px; } }

/* ===== header and strip from Bakr's mockup (09-14): translucent bands over the scene, white plates for the words, icons in the strip ===== */
body.shell { background: var(--hero-image) center / cover no-repeat fixed, var(--page); }
body.shell .hero-bg { display: none; }
body.shell .hero { background: none; }
.site-header { background: rgba(255, 255, 255, .56); backdrop-filter: blur(14px) saturate(120%); -webkit-backdrop-filter: blur(14px) saturate(120%); border-bottom: 1px solid var(--rule); box-shadow: none; }
html[data-theme="dark"] .site-header { background: rgba(4, 16, 26, .6); }
.site-header::after { height: 2px; background: linear-gradient(90deg, transparent, var(--gold) 18%, var(--gold) 82%, transparent); }
.stats { background: rgba(255, 255, 255, .9); border-bottom: 1px solid var(--rule); }
html[data-theme="dark"] .stats { background: rgba(6, 20, 36, .88); }
.site-header .subnav { background: rgba(255, 255, 255, .9); }
html[data-theme="dark"] .site-header .subnav { background: rgba(4, 16, 26, .88); }
.site-header .main-nav, .site-header .brand, .site-header .header-controls { background: rgba(255, 255, 255, .9); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--rule-soft); border-radius: 16px; box-shadow: 0 6px 20px rgba(16, 37, 66, .07); }
.site-header .main-nav { padding: 3px 28px; }
.site-header .brand { padding: 6px 14px 6px 18px; gap: 12px; }
.site-header .header-controls { padding: 4px 8px; }
html[data-theme="dark"] .site-header .main-nav, html[data-theme="dark"] .site-header .brand, html[data-theme="dark"] .site-header .header-controls { background: rgba(4, 16, 26, .82); border-color: rgba(212, 164, 86, .3); box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }
.brand-mark { width: 44px; height: 44px; object-fit: contain; filter: none; fill: none; }
/* strip: value and label with a gold line icon on the end side, like the mockup */
.stat { flex-direction: row; align-items: center; justify-content: center; gap: 12px; text-align: start; padding: 2px 18px; }
.stat-t { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.stat-ic { width: 30px; height: 30px; flex: none; color: var(--gold); display: grid; place-items: center; }
.stat-ic svg { width: 28px; height: 28px; stroke-width: 1.6; }
.stat b { font-size: 17px; }
.stat span { font-size: 12px; margin-top: 2px; }
@media (max-width: 720px) { .stat { padding: 2px 12px; gap: 8px; } .stat-ic { width: 24px; height: 24px; } .stat-ic svg { width: 22px; height: 22px; } .stat b { font-size: 15px; } }

/* ===== the live multiview panel (Bakr, 09-14): every feed a tile of equal standing; sound, focus and full screen are separate controls ===== */
main.live { width: calc(100% - 2 * var(--gutter)); max-width: none; }
.live .wall { display: flex; flex-direction: column; gap: 10px; height: calc(100dvh - var(--header-h, 150px) - 32px); min-height: 380px; }
body.audio-on .live .wall { height: calc(100dvh - var(--header-h, 150px) - 32px - var(--audiobar-h, 82px)); }
.tiles { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) auto; }
.tile { position: relative; min-height: 0; min-width: 0; border-radius: 14px; overflow: hidden; background: #0e2038; border: 1px solid rgba(181, 138, 70, .35); box-shadow: var(--shadow); display: grid; grid-template-rows: minmax(0, 1fr) 34px; grid-template-columns: minmax(0, 1fr); transition: box-shadow .2s var(--ease), border-color .2s var(--ease); }
.tile .stage { min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; container-type: size; }
.tile-video { grid-column: span 2; }
.tile-radio { grid-column: span 1; aspect-ratio: 2 / 1; }
.tile .player, .tile .art { position: relative; width: min(100%, calc(100cqh * 16 / 9)); aspect-ratio: 16 / 9; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.tile .art svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tile-radio .art { width: 100%; height: 100%; }
.tile-radio.focused .art { width: 100%; height: 100%; }
/* the click layer: the whole tile is a button that centres it; it steps aside once focused so the player's own controls work */
.tile-focus { position: absolute; inset: 0; z-index: 2; border: 0; padding: 0; background: transparent; cursor: pointer; }
.tile-bar { position: relative; z-index: 3; }
.tile.focused .tile-focus { display: none; }
.tile-bar { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; pointer-events: none; color: #fff; background: #0a1a30; border-top: 1px solid rgba(255, 255, 255, .06); }
.tile-bar b { font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.tile-bar small { flex: 1; min-width: 0; color: rgba(255, 255, 255, .72); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-bar .tile-link { color: var(--gold-light); font-size: 12px; font-weight: 800; pointer-events: auto; white-space: nowrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(3, 8, 16, .62); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .3px; backdrop-filter: blur(6px); }
.badge i { width: 7px; height: 7px; border-radius: 50%; background: #d33; box-shadow: 0 0 0 3px rgba(221, 51, 51, .25); animation: pulse 1.6s infinite; }
.badge.radio i { background: var(--gold); box-shadow: 0 0 0 3px rgba(212, 164, 86, .25); animation: none; }
.tile-radio.on-air .badge.radio i { animation: pulse 1.6s infinite; }
.tile-ctl { display: flex; gap: 6px; pointer-events: auto; margin-inline-start: auto; }
.tb { width: 28px; height: 28px; border-radius: 10px; display: grid; place-items: center; background: rgba(3, 8, 16, .62); color: #fff; border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(6px); cursor: pointer; padding: 0; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.tb svg { width: 16px; height: 16px; stroke-width: 2; }
.tb:hover { background: rgba(212, 164, 86, .4); transform: translateY(-1px); }
.tb.grid { display: none; }
.tile.focused .tb.grid { display: grid; }
.tile.audible { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(212, 164, 86, .5), var(--shadow); }
/* focus: the chosen tile large in the middle, every other tile a strip below */
.wall[data-mode="focus"] .tiles { grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) auto; }
.wall[data-mode="focus"] .tile { grid-column: span 1; grid-row: 2; aspect-ratio: 16 / 9; }
.wall[data-mode="focus"] .tile.focused { grid-column: 1 / -1; grid-row: 1; aspect-ratio: auto; }
/* strip tiles: video and a name line only */
.wall[data-mode="focus"] .tile:not(.focused) { grid-template-rows: minmax(0, 1fr) 22px; aspect-ratio: 16 / 9; }
.wall[data-mode="focus"] .tile:not(.focused) .badge, .wall[data-mode="focus"] .tile:not(.focused) .tile-bar small, .wall[data-mode="focus"] .tile:not(.focused) .tile-link, .wall[data-mode="focus"] .tile:not(.focused) .tile-ctl { display: none; }
.wall[data-mode="focus"] .tile:not(.focused) .tile-bar { padding: 0 8px; } .wall[data-mode="focus"] .tile:not(.focused) .tile-bar b { font-size: 11.5px; }
/* the Manarat links: one quiet line under the panel */
.wall-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; font-size: 13px; color: var(--ink-faint); }
.wall-foot .kh { color: var(--ink-soft); font-weight: 700; }
.wall-foot .kh:hover { color: var(--gold-deep); }
@media (max-width: 860px) {
  .live .wall { height: auto; min-height: 0; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .tile .stage { container-type: normal; }
  .tile-video { grid-column: span 2; aspect-ratio: 16 / 9; }
  .tile .player, .tile .art { width: 100%; }
  .wall[data-mode="focus"] .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: none; }
  .wall[data-mode="focus"] .tile { grid-row: auto; }
  .wall[data-mode="focus"] .tile.focused { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 16 / 9; }
}
/* the players' fixed layer (home shell): each player over its tile by geometry; the current video docks at the bottom corner when the page is left */
#livehost { position: fixed; inset: 0; z-index: 45; pointer-events: none; }
#livehost[hidden] { display: none; }
#livehost .livefeed { position: fixed; border: 0; background: #000; visibility: hidden; }
#livehost .livefeed { z-index: 2; }
#livedock { position: fixed; inset-inline: 0; bottom: 0; z-index: 1; pointer-events: auto; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--rule); box-shadow: 0 -8px 30px rgba(12, 35, 71, .08); padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom)); }
#livedock[hidden] { display: none; }
#livedock .dock-in { width: min(100%, var(--content)); margin-inline: auto; display: flex; align-items: center; gap: 14px; }
#livedock .dock-slot { flex: none; width: 160px; aspect-ratio: 16 / 9; border-radius: 8px; background: #000; border: 1px solid var(--rule-soft); padding: 0; cursor: pointer; }
/* the large view above the strip (the expand button, or a click on the thumbnail); minimise brings the thumbnail back */
#livedock .dock-big { position: absolute; inset-block-end: calc(100% + 12px); inset-inline-start: var(--gutter); width: min(640px, calc(100vw - 2 * var(--gutter))); border-radius: 14px; overflow: hidden; background: #050b14; border: 1px solid var(--rule); box-shadow: 0 22px 60px rgba(0, 0, 0, .4); display: grid; grid-template-rows: 34px auto; }
#livedock .dock-big-bar { display: flex; align-items: center; gap: 10px; padding: 0 6px 0 10px; color: #fff; background: #08111f; }
#livedock .dock-big-name { flex: 1; min-width: 0; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-big-bar .tb { width: 28px; height: 28px; border-radius: 8px; color: #fff; background: rgba(255, 255, 255, .08); }
#livedock .dock-big-bar .tb svg { width: 15px; height: 15px; }
#livedock .dock-big-video { aspect-ratio: 16 / 9; background: #000; }
#livedock .dock-big[hidden] { display: none; }
#livedock.big .dock-slot { opacity: .35; }
#livedock .dock-now { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
#livedock .dock-name { font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-sub { color: var(--ink-faint); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#livedock .dock-ctl { display: flex; align-items: center; gap: 8px; }
#livedock .tb { width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--ink); border: 0; backdrop-filter: none; }
#livedock .tb:hover { background: var(--page-deep); transform: none; }
#livedock .tb svg { width: 18px; height: 18px; }
#livedock .dock-play { background: var(--primary); color: var(--primary-ink); }
#livedock .dock-play:hover { background: var(--primary); }
#livedock .dock-vol { width: 110px; accent-color: var(--gold); }
body.shell.video-on > main { padding-bottom: 92px; }
@media (max-width: 720px) { #livedock .dock-vol { display: none; } #livedock .dock-sub { display: none; } #livedock .dock-slot { width: 112px; } }

/* ===== header and strip, matched to Bakr's close-up of the mockup (09-14) ===== */
.site-header { background: rgba(247, 242, 232, .78); }
html[data-theme="dark"] .site-header { background: rgba(4, 16, 26, .7); }
/* the door's screen at both ends of the band, fading toward the middle */
.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55; mix-blend-mode: multiply; background: url("../img/bg/lattice-light.jpg") repeat-x center top / auto 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 9%, transparent 30%, transparent 70%, #000 91%, #000 100%); mask-image: linear-gradient(90deg, #000 0, #000 9%, transparent 30%, transparent 70%, #000 91%, #000 100%); }
html[data-theme="dark"] .site-header::before { opacity: .45; mix-blend-mode: screen; background-image: url("../img/bg/lattice-dark.jpg"); }
.header-inner { min-height: 104px; gap: clamp(18px, 3vw, 60px); }
.site-header .main-nav, .site-header .brand, .site-header .header-controls { border-radius: 26px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 26px rgba(16, 37, 66, .08); }
.site-header .main-nav { padding: 6px 34px; gap: clamp(16px, 2.2vw, 40px); }
.main-nav a { font-size: 16px; padding: 12px 2px; }
.main-nav a::after { height: 2.5px; inset-block-end: 4px; inset-inline: 10%; }
.site-header .brand { padding: 8px 18px 8px 22px; gap: 14px; }
.brand-mark { width: 58px; height: 58px; }
.brand-kicker { font-size: 12.5px; }
.brand-name { font-size: 21px; }
.site-header .header-controls { padding: 6px 10px; gap: 10px; }
.icon-button, .language-button { min-height: 44px; }
.language-button { font-size: 15px; padding-inline: 12px 14px; }
.language-button span::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-inline-start: 10px; border: solid currentColor; border-width: 0 0 1.8px 1.8px; transform: translateY(-3px) rotate(-45deg); opacity: .8; }
/* the strip: bigger values, full-height gold separators, generous spacing */
.stats { background: rgba(255, 255, 255, .92); }
.stats-in { padding: 12px 0 13px; }
.stat { padding: 4px 26px; gap: 14px; border-inline-start: 1px solid var(--rule); align-self: stretch; }
.stat:first-child { border-inline-start: 0; }
.stat b { font-size: 19px; letter-spacing: -.1px; }
.stat span { font-size: 13px; margin-top: 3px; color: var(--ink-soft); }
.stat-ic { width: 34px; height: 34px; }
.stat-ic svg { width: 32px; height: 32px; stroke-width: 1.5; }
@media (max-width: 860px) { .header-inner { min-height: 0; } .brand-mark { width: 44px; height: 44px; } .brand-name { font-size: 17px; } .site-header .main-nav { padding: 4px 14px; } .main-nav a { font-size: 14px; } .stat { padding: 2px 14px; } .stat b { font-size: 16px; } }

/* ---- button icons (09-16): one line-icon set across every button family ---- */
.btn svg { width: 18px; height: 18px; flex: none; }
.chip svg { width: 15px; height: 15px; flex: none; opacity: .9; }
.chip[aria-pressed="true"] svg { opacity: 1; }
.ayah-actions button { display: inline-flex; align-items: center; gap: 5px; }
.ayah-actions button svg { width: 12px; height: 12px; flex: none; }
.tile-bar .tile-link { display: inline-flex; align-items: center; gap: 3px; }
.tile-bar .tile-link svg { width: 12px; height: 12px; stroke-width: 2.2; flex: none; }
html[dir="rtl"] svg.dir { transform: scaleX(-1); }
svg[fill="currentColor"] { fill: currentColor; stroke: none; } /* solid glyphs (play, pause): the attribute wins over the line-icon base rule */
.icon-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--ink-2); transition: background .2s var(--ease), color .2s var(--ease); }
.icon-btn:hover { background: var(--paper-3); color: var(--ink); }
.icon-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.btn:disabled, .chip:disabled { opacity: .45; cursor: default; transform: none; box-shadow: none; }
.btn:focus-visible, .chip:focus-visible, .mini:focus-visible, .icon-btn:focus-visible, .tb:focus-visible, .ayah-actions button:focus-visible, .tabs button:focus-visible, .tabs a:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--gold) 60%, transparent);
  outline-offset: 3px;
}

/* radio tiles: the station's line sits under its name, whole, instead of cut beside it */
.tile-radio { grid-template-rows: minmax(0, 1fr) auto; }
.tile-radio .tile-bar { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: center; padding: 7px 10px 8px; }
.tile-radio .tile-bar .badge { grid-row: 1 / span 2; }
.tile-radio .tile-bar b { grid-column: 2; overflow: hidden; text-overflow: ellipsis; }
.tile-radio .tile-bar small { grid-column: 2; white-space: normal; line-height: 1.5; }
.wall[data-mode="focus"] .tile-radio:not(.focused) .tile-bar { display: flex; padding: 0 8px; }

/* header name: "رحمه الله" a step smaller and lighter than the name */
.brand-name .brand-rip { font-size: .8em; font-weight: 700; color: var(--ink-soft); }

/* phones: the name keeps its whole line with رحمه الله under it, and the strip shows more than
   the prayer at once (its long line wraps to two), so the cut edge says the row swipes */
@media (max-width: 600px) {
  .brand-name { white-space: normal; line-height: 1.25; font-size: 15px; }
  .brand-name > span:first-child { white-space: nowrap; }
  .brand-name .brand-rip { display: block; }
}
/* phones: one row, two stats at a time, fading to the next pair (shell.js turns data-p on
   .stats-in every 4.5s). All six share the row's two cells, only the current pair is shown */
@media (max-width: 600px) {
  .stats-in { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); overflow: visible; padding: 10px 0 11px; } /* the first cell carries the prayer's city and countdown */
  .stats::after { display: none; }
  .stat { grid-row: 1; padding: 0 4px; gap: 6px; justify-content: center; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
  .stat:nth-child(odd) { grid-column: 1; border-inline-start: 0; }
  .stat:nth-child(even) { grid-column: 2; border-inline-start: 1px solid var(--rule); }
  .stats-in:not([data-p]) .stat:nth-child(-n + 2),
  .stats-in[data-p="0"] .stat:nth-child(-n + 2),
  .stats-in[data-p="1"] .stat:nth-child(n + 3):nth-child(-n + 4),
  .stats-in[data-p="2"] .stat:nth-child(n + 5) { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .15s, visibility 0s; }
  .stat b { font-size: 15px; }
  .stat span { font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { .stat { transition: none !important; } }

/* the ayah panel rises above a playing recitation or docked video (shell.js sets --bottom-bar) */
.sheet { bottom: var(--bottom-bar, 0px); z-index: 46; transform: translateY(calc(100% + var(--bottom-bar, 0px) + 24px)); transition: transform .3s var(--ease), bottom .2s var(--ease); }
.sheet.open { transform: none; }

/* every close on the site (ayah panel, recitation bar, video strip): IMG-049, the x inside
   the star, on a round plate with a gold edge so it reads as a button, not as ornament */
#shClose, #abClose, #livedock .tb.dock-close, #livedock .tb.dock-close2 { width: 36px; height: 36px; flex: none; display: grid; place-items: center; padding: 0; border-radius: 50%; cursor: pointer; color: var(--gold-deep); background: var(--paper-3); border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); }
#shClose svg, #abClose svg, #livedock .tb.dock-close svg, #livedock .tb.dock-close2 svg { width: 22px; height: 22px; }
#shClose:hover, #abClose:hover, #livedock .tb.dock-close:hover, #livedock .tb.dock-close2:hover { color: var(--ink); border-color: var(--gold-2); background: color-mix(in srgb, var(--gold-2) 18%, var(--paper-3)); }

/* ---- player bars: one layout rule for the recitation bar and the video strip ----------------
   Row 1 is what is playing, with the x in its end corner; row 2 is the controls, centred; the
   progress line runs full width. With room, rows 1 and 2 share one line. Nothing is cut to a
   fragment and nothing is hidden to make it fit. */
.audiobar-in { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "now ctrl close" "bar bar bar"; column-gap: 16px; row-gap: 8px; align-items: center; }
.audiobar .now { grid-area: now; min-width: 0; }
.audiobar .ctrl { grid-area: ctrl; justify-content: center; }
.audiobar #abClose { grid-area: close; }
.audiobar .bar { grid-area: bar; }
.audiobar .ctrl [hidden], .ab-reciter[hidden], #abSub[hidden] { display: none; }
/* the reciter line is the picker: "يُتلى الآن: السديس ▾" */
.ab-reciter { display: inline-flex; align-items: center; color: var(--ink-3); font-size: 12.5px; cursor: pointer; }
.ab-reciter select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: var(--gold-deep); font: inherit; font-weight: 700; padding: 0; margin-inline-start: 4px; cursor: pointer; }
.ab-reciter::after { content: "▾"; color: var(--gold-deep); font-size: 11px; margin-inline-start: 3px; pointer-events: none; }
.ab-reciter select option { color: var(--ink); background: var(--paper-2); }
.audiobar .ctrl .skip-a svg { width: 18px; height: 18px; }
@media (max-width: 700px) {
  .audiobar-in { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "now close" "ctrl ctrl" "bar bar"; row-gap: 6px; }
  .audiobar .ctrl { justify-self: center; }
}

#livedock .dock-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "slot now ctl close"; column-gap: 14px; row-gap: 6px; align-items: center; }
#livedock .dock-slot { grid-area: slot; }
#livedock .dock-now { grid-area: now; }
#livedock .dock-ctl { grid-area: ctl; justify-content: center; }
#livedock .tb.dock-close { grid-area: close; }
@media (max-width: 720px) {
  #livedock .dock-in { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "slot now close" "slot ctl ctl"; column-gap: 12px; }
  #livedock .dock-slot { width: 104px; align-self: center; }
  #livedock .dock-now { flex-direction: column; align-items: flex-start; gap: 4px; }
  #livedock .dock-name { white-space: normal; line-height: 1.3; }
  #livedock .dock-ctl { justify-self: center; gap: 4px; }
}

/* one bar at a time: the folded player hides, its chip sits on the active bar's top edge, end corner */
body.chip-audio #audiobar, body.chip-video #livedock { display: none !important; }
.player-chip { position: fixed; inset-inline-end: var(--gutter, 18px); z-index: 47; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px 0 10px; border-radius: 15px 15px 0 0; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); border-bottom: 0; box-shadow: 0 -6px 18px rgba(0, 0, 0, .18); max-width: min(70vw, 320px); }
html[dir="rtl"] .player-chip { padding: 0 10px 0 4px; }
.player-chip[hidden] { display: none; }
.player-chip .pc-go { display: flex; align-items: center; gap: 6px; min-width: 0; height: 30px; padding: 0 4px; color: var(--ink); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.player-chip .pc-go svg { width: 14px; height: 14px; flex: none; color: var(--gold-deep); }
.player-chip .pc-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.player-chip .pc-go:hover .pc-t { color: var(--gold-deep); }
.player-chip .pc-x { flex: none; width: 30px; height: 30px; display: grid; place-items: center; color: var(--gold-deep); cursor: pointer; border-radius: 50%; }
.player-chip .pc-x svg { width: 18px; height: 18px; }
.player-chip .pc-x:hover { background: color-mix(in srgb, var(--gold-2) 18%, transparent); }

/* every close is a small pill: the star-x icon plus the word "إغلاق"/"Close" in the page's language,
   so it reads as closing, not as ornament. Overrides the 36px round plate above. */
#shClose, #abClose, #livedock .tb.dock-close, #livedock .tb.dock-close2 { width: auto; height: 30px; padding: 0 12px 0 8px; gap: 5px; display: inline-flex; align-items: center; border-radius: 15px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
html[dir="rtl"] #shClose, html[dir="rtl"] #abClose, html[dir="rtl"] #livedock .tb.dock-close, html[dir="rtl"] #livedock .tb.dock-close2 { padding: 0 8px 0 12px; }
#shClose svg, #abClose svg, #livedock .tb.dock-close svg, #livedock .tb.dock-close2 svg { width: 16px; height: 16px; flex: none; }
#livedock .tb.dock-close2 { height: 24px; font-size: 11.5px; }

/* the two words the HAFS font cannot draw (52:37, 12:11), see quran.js */
.q-alt { font-family: "QuranAlt", "Hafs", serif; }

/* internal pages: a more compact strip so more of the page shows above the fold (home keeps its size) */
@media (min-width: 601px) {
  body:not(.home) .stats-in { padding: 9px 0 10px; }
  body:not(.home) .stat { padding: 1px 22px; gap: 11px; }
  body:not(.home) .stat b { font-size: 17px; }
  body:not(.home) .stat span { font-size: 12px; margin-top: 1px; }
  body:not(.home) .stat-ic svg { width: 26px; height: 26px; }
}
/* prayer page: "الموقع: الرياض", "طريقة الحساب: أم القرى (السعودية)" */
.reader-tools label.chip > span:first-child::after { content: ":"; }

/* the smallest phones: the name keeps its line, the controls and the star give up a little room */
@media (max-width: 360px) {
  .header-inner { gap: 8px; }
  .site-header .brand { gap: 8px; padding: 8px 12px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-name { font-size: 14px; }
  .site-header .header-controls { gap: 2px; padding: 6px; }
  .header-controls .icon-button, .header-controls .language-button { width: 38px; min-width: 38px; padding: 0; }
  .stat { gap: 4px; }
  .stat-ic, .stat-ic svg { width: 20px; height: 20px; }
  .stat b { font-size: 14px; }
  .stat span { font-size: 10.5px; }
  .stat-prayer .stat-t span { white-space: normal; overflow: visible; line-height: 1.35; }
}
/* the longer languages carry the dua on its own small line under the name, so the plate never runs into the menu */
html:not([lang="ar"]) .brand-name .brand-rip { display: block; line-height: 1.3; }
html:not([lang="ar"]) .brand-name { white-space: normal; }
html:not([lang="ar"]) .brand-name > span:first-child { white-space: nowrap; }

/* Mushaf toolbar: the offline download is a small icon at the end of the row (its name in the tooltip) */
.chip.chip-icon > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chip.chip-icon { padding-inline: 10px; }
/* the khatma chip: the one quiet way back to the place in order */
.chip.chip-khatma { border-color: color-mix(in srgb, var(--gold-2) 60%, transparent); color: var(--gold-deep); font-weight: 700; }

/* Quran page modes: المصحف is its own place (a button with its icon), القراءة | الاستماع are two tabs on the text.
   Each says in one line what it opens. */
.qmodes { display: flex; align-items: stretch; gap: 12px; flex-wrap: wrap; }
.qm-mushaf { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 14px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--gold-2) 70%, transparent); background: var(--surface); color: var(--ink); transition: background .2s var(--ease), color .2s var(--ease); }
html[dir="rtl"] .qm-mushaf { padding: 8px 14px 8px 18px; }
.qm-mushaf svg { width: 30px; height: 30px; flex: none; color: var(--gold-deep); }
.qm-mushaf span, .qtabs [role="tab"] > span { display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.qtabs [role="tab"] { display: flex; align-items: center; gap: 9px; }
.qtabs [role="tab"] svg { width: 24px; height: 24px; flex: none; color: var(--gold-deep); }
.qtabs [role="tab"][aria-selected="true"] svg { color: currentColor; }
/* keyboard focus on these tabs: a thin gold inset line, not a heavy ring around the chosen one */
.qtabs [role="tab"]:focus-visible, .qm-mushaf:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -3px; box-shadow: none; }
.qtabs [role="tab"]:focus:not(:focus-visible), .qm-mushaf:focus:not(:focus-visible) { outline: none; }
.qm-mushaf b, .qtabs b { font-size: 15px; font-weight: 800; }
.qm-mushaf small, .qtabs small { font-size: 11.5px; font-weight: 600; opacity: .8; }
.qm-mushaf:hover { border-color: var(--gold-2); }
.qm-mushaf[aria-current="page"] { background: var(--navy); color: var(--on-navy); border-color: var(--gold-2); }
.qm-mushaf[aria-current="page"] svg { color: var(--gold-light); }
.tabs.qtabs { border-radius: 18px; }
.qtabs button, .qtabs a { border-radius: 14px; padding: 7px 16px; }
@media (max-width: 600px) {
  .qmodes { width: 100%; }
  .qm-mushaf, .qtabs { flex: 1 1 100%; } .qtabs [role="tab"] { flex: 1; }
  .qm-mushaf small, .qtabs small { font-size: 10.5px; }
}

/* juz tiles across the surah list: they fill the page; the open one's surahs drop into a panel under its row */
.surah-grid.juz-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.juz-tile { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "t c a" "n n n"; align-items: center; column-gap: 10px; row-gap: 4px; padding: 12px 14px; min-height: 76px; text-align: start; border: 1px solid var(--rule-soft); border-radius: 14px; background: var(--surface); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease); }
.juz-tile b { grid-area: t; font-size: 15px; font-weight: 800; color: var(--gold-deep); white-space: nowrap; }
.juz-tile .juz-count { grid-area: c; font-size: 12px; font-weight: 700; color: var(--ink-2); border: 1px solid var(--rule-soft); border-radius: 999px; padding: 1px 9px; }
.juz-tile .juz-chev { grid-area: a; width: 9px; height: 9px; border-right: 2px solid var(--gold-deep); border-bottom: 2px solid var(--gold-deep); transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease); }
.juz-tile small { grid-area: n; color: var(--ink-3); font-size: 13px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.juz-tile:hover { border-color: color-mix(in srgb, var(--gold-2) 55%, transparent); }
.juz-tile.open { border-color: var(--gold-2); background: color-mix(in srgb, var(--gold-2) 10%, var(--surface)); }
.juz-tile.open .juz-chev { transform: rotate(-135deg) translateY(-2px); }
.juz-panel { grid-column: 1 / -1; border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); border-radius: 14px; background: var(--surface); padding: 14px; animation: juz-open .28s var(--ease); }
.juz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
@keyframes juz-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .juz-panel { animation: none; } .juz-tile .juz-chev { transition: none; } }
/* phones: the search gets the whole line and the continue button sits under it, so the placeholder is never cut */
@media (max-width: 600px) {
  #listView .reader-top, #listenView .reader-top { flex-wrap: wrap; }
  #surahSearch, #listenSearch { flex: 1 1 100% !important; min-width: 0 !important; }
  #continueBtn, #listenContinue { flex: 1 1 100%; justify-content: center; }
  .surah-grid.juz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .juz-tile { padding: 10px 12px; min-height: 70px; column-gap: 6px; }
  .juz-tile b { font-size: 14px; }
}

/* phones: a calm, compact header. Name and controls share one light row (no heavy plates),
   the menu is a plain scrolling row with the gold underline, then the strip. Same palette. */
@media (max-width: 600px) {
  .site-header .header-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand ctl" "nav nav"; gap: 6px 10px; padding-block: 8px 0; align-items: center; }
  .site-header .brand { grid-area: brand; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 10px; min-width: 0; }
  .site-header .brand-mark { width: 38px; height: 38px; }
  .site-header .brand-kicker { font-size: 11px; }
  .site-header .brand-name { font-size: 16px; line-height: 1.2; }
  .site-header .brand-name .brand-rip { display: inline !important; font-size: .78em; }
  .site-header .header-controls { grid-area: ctl; background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; gap: 2px; }
  .site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 50%; background: color-mix(in srgb, var(--surface) 55%, transparent); }
  .site-header .main-nav { grid-area: nav; background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0; padding: 0 2px !important; margin-inline: -2px; }
  .site-header .main-nav a { font-size: 14.5px; padding: 8px 10px 10px; }
}
/* phones, round 2: the name centred as the header's title, the lattice much fainter so it reads clean;
   the two controls sit small at the side */
@media (max-width: 600px) {
  .site-header::before { opacity: .14; }
  html[data-theme="dark"] .site-header::before { opacity: .12; }
  .site-header .header-inner { grid-template-columns: 1fr; grid-template-areas: "brand" "nav"; position: relative; }
  .site-header .brand { justify-self: center; }
  .site-header .brand-copy { text-align: center; align-items: center; }
  .site-header .brand-name { text-align: center; }
  .site-header .brand-name .brand-rip { display: block !important; }
  .site-header .header-controls { position: absolute; inset-inline-end: 0; top: 10px; }
  .site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 32px; height: 32px; min-width: 32px; }
  .site-header .main-nav { justify-content: center; }
}
/* live page on phones: in focus mode the other feeds sit two per row with their names readable */
@media (max-width: 600px) {
  .wall[data-mode="focus"] .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wall[data-mode="focus"] .tile:not(.focused) { grid-template-rows: auto auto; aspect-ratio: auto; }
  .wall[data-mode="focus"] .tile:not(.focused) .stage { aspect-ratio: 16 / 9; }
  .wall[data-mode="focus"] .tile:not(.focused) .tile-bar { padding: 5px 8px 6px; min-height: 0; }
  .wall[data-mode="focus"] .tile:not(.focused) .tile-bar b { font-size: 12px; white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
}

/* the live tiles are video frames, not cards: the general .tile card padding must not shrink them */
.live .wall .tile { padding: 0; }
/* narrow screens: a tile is its 16:9 picture plus its name bar, so the video never overlaps the bar */
@media (max-width: 860px) {
  .live .wall .tile, .wall[data-mode="focus"] .tile.focused { aspect-ratio: auto; grid-template-rows: auto auto; }
  .live .wall .tile .stage { aspect-ratio: 16 / 9; }
}

/* ===== phones: Bakr's mockup IMG-064. A title header, a stats plate, a bottom tab bar ===== */
.tabbar { display: none; }
@media (max-width: 600px) {
  :root { --tabbar-h: calc(64px + env(safe-area-inset-bottom)); }
  /* header: صدقة جارية, then the star, then the name and رحمه الله, framed by a faint arch */
  .site-header .main-nav { display: none !important; }
  .site-header .header-inner { display: block; position: relative; padding: 10px 0 2px; }
  .site-header .header-inner::before { content: ""; position: absolute; left: 50%; top: 4px; width: min(300px, 78vw); height: calc(100% - 4px); transform: translateX(-50%); pointer-events: none; opacity: .5;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 200' preserveAspectRatio='none'><path d='M4 200 V92 C4 48 70 40 110 20 C132 9 144 4 150 0 C156 4 168 9 190 20 C230 40 296 48 296 92 V200' fill='none' stroke='%23d4a456' stroke-width='1.6' vector-effect='non-scaling-stroke'/></svg>") no-repeat center / 100% 100%; }
  .site-header .brand { display: flex !important; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-inline: auto; width: max-content; max-width: 100%; }
  .site-header .brand-copy { display: contents !important; }
  .site-header .brand-kicker { order: 0; font-size: 14px; font-weight: 700; color: var(--gold-deep); }
  .site-header .brand-mark { order: 1; width: 48px !important; height: 44px !important; }
  .site-header .brand-name { order: 2; font-size: 22px !important; font-weight: 900; line-height: 1.25; text-align: center; }
  .site-header .brand-name .brand-rip { display: block !important; font-size: 15px; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }
  .site-header .brand::after { content: ""; order: 3; width: 150px; height: 9px; margin-top: 4px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 9'><path d='M0 4.5H64M86 4.5H150' stroke='%23d4a456' stroke-opacity='.6' stroke-width='1'/><path d='M75 0.5l4 4-4 4-4-4z' fill='%23d4a456'/></svg>") no-repeat center / contain; }
  .site-header .header-controls { position: absolute !important; inset-inline-end: 4px; top: 12px; display: flex; flex-direction: column; gap: 8px !important; }
  .site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 38px !important; height: 38px !important; min-width: 38px !important; border: 1px solid color-mix(in srgb, var(--gold-2) 40%, transparent) !important; }
  .site-header .header-controls #langLabel, .site-header .header-controls .language-button > svg + svg { display: none; }
  /* the stats: one rounded plate */
  #siteStatus { background: none !important; border: 0 !important; padding: 4px 14px 10px; }
  #siteStatus .stats-in { border: 1px solid color-mix(in srgb, var(--gold-2) 45%, transparent); border-radius: 16px; background: color-mix(in srgb, var(--surface) 70%, transparent); padding: 8px 4px !important; }
  /* the tab bar */
  .tabbar { display: flex; position: fixed; inset-inline: 0; bottom: 0; z-index: 48; height: var(--tabbar-h); padding: 6px 6px env(safe-area-inset-bottom); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid color-mix(in srgb, var(--gold-2) 50%, transparent); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .tabbar > a, .tabbar > button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--ink-soft); font-size: 12px; font-weight: 700; position: relative; }
  .tabbar > a + a, .tabbar > a + button { border-inline-start: 1px solid color-mix(in srgb, var(--gold-2) 22%, transparent); }
  .tabbar svg { width: 24px; height: 24px; color: var(--gold-deep); }
  .tabbar > a[aria-current="page"], .tabbar > button.on { color: var(--gold-deep); }
  .tabbar > a[aria-current="page"]::after, .tabbar > button.on::after { content: ""; position: absolute; bottom: 0; width: 44px; height: 3px; border-radius: 3px; background: var(--gold-2); }
  .tabbar-sheet { position: absolute; bottom: calc(100% + 8px); inset-inline-end: 8px; display: flex; flex-direction: column; min-width: 180px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold-2) 55%, transparent); box-shadow: 0 12px 30px rgba(0, 0, 0, .35); }
  .tabbar-sheet[hidden] { display: none; }
  .tabbar-sheet a { padding: 12px 14px; border-radius: 10px; font-weight: 700; color: var(--ink); }
  .tabbar-sheet a[aria-current="page"] { color: var(--gold-deep); background: color-mix(in srgb, var(--gold-2) 12%, transparent); }
  /* everything that sat on the bottom edge now sits on the tab bar */
  .audiobar, #livedock { bottom: var(--tabbar-h) !important; }
  body { padding-bottom: var(--tabbar-h); }
  body.shell > main { padding-bottom: calc(var(--tabbar-h) + 12px); }
}
@media (max-width: 600px) { .stat-prayer .stat-t span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.35; } }
@media (max-width: 600px) {
  .site-header .brand-name { white-space: nowrap; overflow: visible !important; text-overflow: clip !important; max-width: none !important; }
  .site-header .brand, .site-header .brand-copy { max-width: none !important; overflow: visible !important; }
  .tabbar > a span, .tabbar > button span { white-space: nowrap; }
}
@media (max-width: 380px) {
  .site-header .brand-name { font-size: 19px !important; }
  .site-header .header-controls { top: 8px; inset-inline-end: 0; gap: 6px !important; }
  .site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 34px !important; height: 34px !important; min-width: 34px !important; }
  .tabbar > a, .tabbar > button { font-size: 11px; }
}
/* phones, round 2 (Bakr): the two buttons flank the title (theme on one side, language on the other),
   and the arch starts lower so صدقة جارية sits inside it, under its peak */
@media (max-width: 600px) {
  .site-header .header-inner { padding-top: 24px; }
  .site-header .header-inner::before { top: 6px; height: calc(100% - 6px); }
  .site-header .header-controls { position: static !important; display: contents !important; }
  .site-header .header-controls .icon-button, .site-header .header-controls .language-button { position: absolute !important; top: 58px; }
  .site-header .header-controls .icon-button { left: 6px !important; right: auto !important; }
  .site-header .header-controls .language-button { right: 6px !important; left: auto !important; }
  .site-header .lang-menu { position: absolute; top: 100px; right: 6px; left: auto; }
}

/* ===== phones, home only (Bakr's brief): a shorter masthead, no repeated label, the name on one line ===== */
@media (max-width: 600px) {
  /* 1. masthead ~18% shorter: smaller star, tighter title group, a shallower arch */
  body.home .site-header .header-inner { padding-top: 16px; padding-bottom: 0; }
  body.home .site-header .header-inner::before { height: calc(100% - 2px); top: 2px; width: min(270px, 72vw); }
  body.home .site-header .brand { gap: 2px; }
  body.home .site-header .brand-mark { width: 40px !important; height: 37px !important; }
  body.home .site-header .brand-kicker { font-size: 13px; }
  body.home .site-header .brand-name { font-size: 20px !important; }
  body.home .site-header .brand-name .brand-rip { font-size: 13.5px; margin-top: 0; }
  body.home .site-header .brand::after { margin-top: 2px; }
  body.home .site-header .header-controls .icon-button, body.home .site-header .header-controls .language-button { top: 44px; }
  body.home #siteStatus { padding-bottom: 8px; }
  /* 2. the hero starts with the name: the masthead already says صدقة جارية */
  body.home .hero .eyebrow { display: none; }
  /* 3. عن أسامة حسن on one line, أسامة حسن dominant; رحمه الله secondary on the next */
  body.shell.home .memorial-title { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .22em; row-gap: 0; margin-top: 4px; font-size: clamp(30px, 10.4vw, 44px); line-height: 1.2; }
  body.shell.home .memorial-title strong { display: inline; margin: 0; font-size: 1em; white-space: nowrap; }
  body.shell.home .memorial-title .title-prefix { font-size: .62em; }
  body.shell.home .memorial-title .title-mercy { flex-basis: 100%; font-size: .5em; margin-top: 2px; color: var(--ink-soft); }
  /* 4. calmer but closer spacing */
  body.shell.home .hero { padding-top: 14px; }
  body.shell.home .hero-dua { margin-top: 10px; font-size: clamp(24px, 7.4vw, 32px); line-height: 1.5; }
  /* 5. the supporting line a step brighter, still secondary */
  body.shell.home .hero-lead { margin-top: 4px; color: var(--ink-soft); }
  html[data-theme="dark"] body.shell.home .hero-lead { color: color-mix(in srgb, var(--ink) 82%, transparent); }
  body.shell.home .primary-actions { margin-top: 16px; }
  /* 7. the quick row readable over the photo, and clear of the tab bar */
  body.shell.home .utility-actions { margin-top: 16px; margin-bottom: 18px; }
  html[data-theme="dark"] body.shell.home .utility-item b { color: var(--ink); }
  body.shell.home .utility-item b { font-weight: 800; }
  /* 9. the language button shows العربية beside the globe when there is room */
  body.home .site-header .header-controls .language-button { width: auto !important; min-width: 38px !important; padding: 0 10px !important; border-radius: 19px; gap: 5px; }
  body.home .site-header .header-controls .language-button #langLabel { display: inline !important; font-size: 12.5px; font-weight: 700; }
}
@media (max-width: 419px) { /* the label only when it clears the title: 420px and up */
  body.home .site-header .header-controls .language-button { width: 38px !important; min-width: 38px !important; padding: 0 !important; }
  body.home .site-header .header-controls .language-button > svg:last-of-type:not(:first-of-type) { display: none; }
  body.home .site-header .header-controls .language-button #langLabel { display: none !important; }
}

/* the reader's surah card: the name between two round arrows (the tools moved to the reading bar) */
.reader-head { grid-template-columns: auto minmax(0, 1fr) auto !important; }
@media (max-width: 600px) {
  .reader-head { gap: 8px; padding: 14px 12px; }
  .reader-head > .btn { width: 44px; height: 44px; min-height: 0; padding: 0; justify-content: center; border-radius: 50%; }
  .reader-head > .btn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* the reading bar: fixed at the bottom, right above the player / video strip / tab bar (--bottom-bar) */
.readbar { position: fixed; inset-inline: 0; bottom: var(--bottom-bar, 0px); z-index: 41; background: color-mix(in srgb, var(--surface) 95%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid color-mix(in srgb, var(--gold-2) 50%, transparent); padding: 8px var(--gut, 16px); }
.readbar[hidden] { display: none; }
.readbar .reader-tools { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; margin: 0 auto; max-width: var(--wrap, 1100px); padding: 0; border: 0; }
.readbar .reader-tools > [hidden] { display: none; }
.readbar .chip { white-space: nowrap; }
body.readbar-on { --readbar-h: 58px; }
body.readbar-on #view, body.readbar-on main { padding-bottom: calc(var(--bottom-bar, 0px) + var(--readbar-h) + 16px) !important; }
@media (max-width: 600px) {
  body.readbar-on { --readbar-h: 64px; }
  .readbar { padding: 6px 6px; }
  .readbar .reader-tools { gap: 4px; }
  .readbar .chip { flex: 1 1 0; min-width: 0; flex-direction: column; gap: 3px; padding: 6px 2px; border: 0; background: none; font-size: 11px; font-weight: 700; justify-content: center; }
  .readbar .chip svg { width: 22px; height: 22px; }
  .readbar .chip[aria-pressed="true"] { color: var(--gold-deep); }
  .readbar .chip.group { flex-direction: row; gap: 10px; font-size: 14px; }
}
@media (max-width: 600px) { .stat-prayer .stat-t b { font-size: 14.5px; white-space: nowrap; } #siteStatus .stats-in:not([data-p]), #siteStatus .stats-in[data-p="0"] { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) !important; } #siteStatus .stats-in[data-p="1"], #siteStatus .stats-in[data-p="2"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } }
@media (max-width: 380px) { .stat-prayer .stat-t b { font-size: 13px; } .stat-prayer .stat-ic { display: none; } #siteStatus .stat .stat-t span { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; line-height: 1.3; } }

/* the theme and language buttons are two round buttons everywhere: the globe alone opens the language list
   (its name stays in the tooltip and for screen readers) */
.site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 40px !important; height: 40px !important; min-width: 40px !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center; gap: 0 !important; }
.site-header .header-controls .language-button #langLabel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); display: block !important; }
.site-header .header-controls .language-button > svg:not(:first-of-type) { display: none !important; }
.site-header .header-controls .language-button > svg:first-of-type, .site-header .header-controls .icon-button svg { width: 20px; height: 20px; }
@media (min-width: 601px) { .site-header .header-controls { gap: 8px; } }
@media (max-width: 600px) { .site-header .header-controls .icon-button, .site-header .header-controls .language-button { width: 38px !important; height: 38px !important; min-width: 38px !important; } }
/* true circles: an inherited min-height made them 38 by 44 ovals */
.site-header .header-controls .icon-button, .site-header .header-controls .language-button { min-height: 0 !important; max-height: none !important; aspect-ratio: 1 / 1; flex: none !important; box-sizing: border-box; }
/* the circles show as circles: a gold hairline and a soft fill; on desktop they stand on their own, no plate behind */
.site-header .header-controls .icon-button, .site-header .header-controls .language-button { border: 1px solid color-mix(in srgb, var(--gold-2) 45%, transparent) !important; background: var(--surface) !important; }
.site-header .header-controls .icon-button:hover, .site-header .header-controls .language-button:hover { border-color: var(--gold-2) !important; }
@media (min-width: 601px) { .site-header .header-controls { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; } }

/* live: our cover over a feed that is not playing (YouTube's own title and red button stay hidden until it plays) */
#livehost .livecover { position: fixed; z-index: 3; pointer-events: none; visibility: hidden; background: #0c2347 center / cover no-repeat; display: grid; place-items: center; }
#livehost .livecover::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 16, 26, .15), rgba(4, 16, 26, .55)); }
#livehost .livecover.clips { background-image: radial-gradient(circle at 50% 40%, rgba(212, 164, 86, .28), transparent 62%), linear-gradient(135deg, #123361, #07182e); }
#livehost .livecover .lc-play { position: relative; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: rgba(4, 16, 26, .55); border: 1.5px solid var(--gold-2, #d4a456); color: #f3ead8; backdrop-filter: blur(4px); }
#livehost .livecover .lc-play svg { width: 26px; height: 26px; margin-inline-start: 3px; }
html[dir="rtl"] #livehost .livecover .lc-play svg { margin-inline-start: 0; margin-inline-end: 3px; }

/* phones: three stats at a time, two groups (now: prayer, pages, time; since launch: visitors, sadaqah, age) */
@media (max-width: 600px) {
  #siteStatus .stats-in, #siteStatus .stats-in:not([data-p]), #siteStatus .stats-in[data-p] { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) !important; }
  #siteStatus .stats-in[data-p="1"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #siteStatus .stat { grid-column: auto !important; flex-direction: column-reverse; gap: 3px; padding: 0 4px; text-align: center; border-inline-start: 1px solid var(--rule); opacity: 0; visibility: hidden; }
  #siteStatus .stat:nth-child(3n + 1) { grid-column: 1 !important; border-inline-start: 0; }
  #siteStatus .stat:nth-child(3n + 2) { grid-column: 2 !important; }
  #siteStatus .stat:nth-child(3n) { grid-column: 3 !important; }
  #siteStatus .stat-t { align-items: center; }
  #siteStatus .stat b { font-size: 14px !important; white-space: nowrap; }
  #siteStatus .stat span { font-size: 10.5px !important; white-space: normal !important; overflow: visible !important; line-height: 1.3; text-align: center; }
  #siteStatus .stat-ic, #siteStatus .stat-ic svg { width: 20px; height: 20px; }
  #siteStatus .stat-prayer .stat-ic { display: grid !important; }
  #siteStatus .stats-in:not([data-p]) .stat:nth-child(-n + 3),
  #siteStatus .stats-in[data-p="0"] .stat:nth-child(-n + 3),
  #siteStatus .stats-in[data-p="1"] .stat:nth-child(n + 4) { opacity: 1; visibility: visible; transition: opacity .6s var(--ease) .15s, visibility 0s; }
}
@media (max-width: 380px) { #siteStatus .stat-prayer .stat-t b { font-size: 12.5px !important; } #siteStatus .stat b { font-size: 13px !important; } }
/* live: badges never break a word */
.tile-bar .badge, #livedock .badge { white-space: nowrap; }
/* phones: the tile bar fits its tile; the badge already says "latest clips", so the name drops the repeat,
   the source line goes, "open in YouTube" is its icon; the prayer countdown may take two lines */
@media (max-width: 600px) {
  .live .tile-bar { min-width: 0; overflow: hidden; }
  .live .tile-bar small { display: none; }
  .live .tile-bar .tile-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .live .tile-bar b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  #siteStatus .stat-prayer .stat-t span { white-space: normal !important; }
}
@media (max-width: 600px) { #siteStatus .stat-prayer .stat-t b { font-size: 13.5px !important; } #siteStatus .stat-prayer .stat-t span { font-size: 10px !important; } #siteStatus .stat-prayer { padding-inline: 6px !important; } }

/* the stats are links (09-23): each opens the page it counts, visitors shares the site.
   They keep the strip's calm look: no underline, no button box; hover and press only brighten. */
#siteStatus a.stat, #siteStatus button.stat { color: inherit; text-decoration: none; font: inherit; background: none; border-top: 0; border-bottom: 0; border-inline-end: 0; margin: 0; cursor: pointer; border-radius: 0; -webkit-tap-highlight-color: transparent; transition: background-color .2s var(--ease), opacity .6s var(--ease), visibility 0s linear .6s; }
#siteStatus button.stat:first-child { border-inline-start: 0; }
@media (hover: hover) { #siteStatus .stat:hover { background: color-mix(in srgb, var(--gold) 10%, transparent); } #siteStatus .stat:hover b { color: var(--gold-2); } }
#siteStatus .stat:active { background: color-mix(in srgb, var(--gold) 16%, transparent); }
#siteStatus .stat:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }