/* Layout for the Sakeenah web screens. Components live in core/css/dua-ui.css. */
:root {
  /* Aliases of the canonical palette in core/css/dua-ui.css */
  --primary: var(--dua-color-primary);
  --secondary: var(--dua-color-secondary);
  --accent: var(--dua-color-accent);
  --soft: var(--dua-color-soft);
  --canvas: var(--dua-color-canvas);
  --bg: var(--dua-color-canvas);
  /* The launch logo video's own background (static/web/splash.mp4), in every theme. */
  --splash-bg: #FBFAFD;
  --surface: var(--dua-color-white);
  --text: var(--dua-color-ink);
  --ink: var(--dua-color-ink);
  --muted: var(--dua-color-muted);
  --border: var(--dua-color-border);
  --success: var(--dua-color-success);
  --warning: var(--dua-color-warning);
  --warning-bg: var(--dua-color-warning-tint);
  --error: var(--dua-color-error);
  --danger: var(--dua-color-error);
  --information: var(--dua-color-information);
  --disabled: var(--dua-color-disabled);
}
* { box-sizing: border-box; }
/* Component display rules must not override the hidden attribute. */
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--dua-font); }
body { min-height: 100vh; }
a { color: var(--dua-button-secondary-fg); }
img { max-width: 100%; }
.app { max-width: 430px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
main { flex: 1; padding: 16px 16px 112px; display: flex; flex-direction: column; gap: 16px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Top bar (inner pages) */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; color: var(--primary); background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.icon-btn:hover { background: var(--dua-color-soft); }
.icon-btn--delete { color: var(--danger); }
.icon-btn--delete:hover { background: var(--dua-danger-soft); }
[dir="rtl"] .icon-btn--back svg { transform: scaleX(-1); }
.page-title { margin: 8px 0 0; font-size: 22px; font-weight: 700; color: var(--primary); text-align: center; }

/* Bottom tab bar */
.tabbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 10; display: flex; justify-content: center; background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom); }
.tabbar__inner { display: flex; justify-content: space-around; width: 100%; max-width: 430px; min-height: 72px; padding: 10px 24px 0; }

/* Messages (snackbars) */
.toasts { position: fixed; bottom: 88px; inset-inline: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toasts .dua-snackbar { pointer-events: auto; animation: toast-out 0.3s ease 4s forwards; }
.dua-snackbar--error { box-shadow: inset 4px 0 0 var(--dua-color-error-light); }
[dir="rtl"] .dua-snackbar--error { box-shadow: inset -4px 0 0 var(--dua-color-error-light); }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }

/* Generic blocks */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 12px; align-items: center; }
.row--wrap { flex-wrap: wrap; gap: 8px; }
.row > .grow { flex: 1; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
/* Chips keep their label width and the row scrolls; shrinking them to min-width made nowrap labels spill onto neighbours. */
.chips > * { flex-shrink: 0; }
.chips--wrap { flex-wrap: wrap; overflow: visible; }
/* Filter chips (AR / DHIKR / 02): fixed 104x44 tiles, label wraps to two centered lines, one snapping row. */
.chips--filter { gap: 10px; padding-bottom: 0; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.chips--filter::-webkit-scrollbar { display: none; }
.chips--filter .dua-chip { flex: 0 0 104px; width: 104px; height: 44px; min-width: 0; padding: 0 8px; white-space: normal; scroll-snap-align: start; transition: transform 0.15s ease, background-color 0.15s ease; }
.chips--filter .dua-chip__label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; line-height: 18px; }
.chips--filter .dua-chip:active { transform: scale(0.97); }
.chips--filter .dua-chip:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .chips--filter .dua-chip { transition: none; } .chips--filter .dua-chip:active { transform: none; } }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.section-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--primary); }
.muted { color: var(--muted); font-size: 13px; line-height: 1.6; margin: 0; }
.note { color: var(--muted); font-size: 12px; text-align: center; margin: 0; }
.center { text-align: center; }
.panel { background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: 16px; padding: 16px; }
.panel h2 { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--primary); }
.notice { background: var(--warning-bg); border-radius: 12px; padding: 12px; font-size: 13px; display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.progress { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; }
.progress > span { display: block; height: 100%; background: var(--accent); }
.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dua-card .chev { color: var(--muted); }
[dir="rtl"] .chev { transform: scaleX(-1); }
form { margin: 0; }
.inline-form { display: inline; }
details { background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: 16px; padding: 0 16px; }
details summary { cursor: pointer; padding: 16px 0; font-weight: 500; list-style: none; }
details[open] summary { border-bottom: 1px solid var(--border); }
details > div { padding: 12px 0 16px; line-height: 1.8; font-size: 14px; }

/* Home */
.prayer-card { background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.prayer-next { display: flex; justify-content: space-between; align-items: flex-end; }
.prayer-next strong { display: block; font-size: 20px; color: var(--primary); }
.prayer-next .countdown { color: var(--accent); font-weight: 600; font-size: 13px; }
.prayer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.prayer-grid div { text-align: center; padding: 8px 4px; border-radius: 12px; font-size: 12px; color: var(--muted); }
.prayer-grid div b { display: block; font-size: 14px; color: var(--primary); margin-top: 2px; }
.prayer-grid .is-next { background: var(--primary); color: var(--dua-color-primary-tint); } .prayer-grid .is-next b { color: var(--dua-color-white); }
.dua-text { font-size: 20px; line-height: 2; color: var(--primary); text-align: center; margin: 0; font-family: 'Noto Naskh Arabic', var(--dua-font); }
.ramadan--active { background: var(--primary); color: var(--dua-color-white); border-color: var(--primary); }
.ramadan--active .dua-card__title, .ramadan--active .dua-card__description { color: var(--dua-color-white); }

/* Round, icon-only listen pill (radio / TV rows): the row itself is the link and carries the name. */
.dua-listen-btn--icon { width: 32px; height: 32px; min-height: 32px; padding: 0; justify-content: center; flex: none; }

/* Full-page players (radio, live TV): the card stays clear of the tab bar and the home indicator. */
.player-page { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Live TV (tv_watch.html): the frame rises in, a soft glow breathes while it plays, dots show while it loads. */
/* The TV set around the player: antennas, a cabinet in the theme's secondary colour, a side panel, feet. */
.tv-set { --tv-body: var(--dua-color-secondary); --tv-body-strong: var(--dua-color-secondary-strong); position: relative; max-width: 720px; margin: 8px auto 4px; padding-top: 74px; animation: tv-rise .5s cubic-bezier(.2, .8, .2, 1) both; }
.tv-set__antennas { position: absolute; top: 0; left: 50%; width: 0; height: 84px; transform: translateX(-50%); }
.tv-set__rod { position: absolute; bottom: 10px; left: -2px; width: 4px; height: 76px; border-radius: 2px; background: linear-gradient(var(--dua-color-muted), var(--tv-body-strong)); transform-origin: 50% 100%; }
.tv-set__rod::before { content: ""; position: absolute; top: -7px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: var(--dua-color-accent); box-shadow: 0 0 0 2px var(--tv-body-strong); transform: translateX(-50%); }
.tv-set__rod--start { transform: rotate(-32deg); }
.tv-set__rod--end { transform: rotate(26deg); height: 66px; }
.tv-set__dome { position: absolute; bottom: 0; left: -26px; width: 52px; height: 24px; border-radius: 26px 26px 6px 6px; background: var(--tv-body-strong); }
.tv-set:has(.tv-stage.is-playing) .tv-set__rod--start { animation: tv-rod-start 3.2s ease-in-out infinite; }
.tv-set:has(.tv-stage.is-playing) .tv-set__rod--end { animation: tv-rod-end 2.8s ease-in-out infinite; }
.tv-set__cabinet { position: relative; display: flex; gap: 14px; padding: 16px; border-radius: 30px; background: linear-gradient(160deg, var(--tv-body), var(--tv-body-strong)); box-shadow: 0 14px 34px var(--dua-color-shadow), inset 0 2px 0 color-mix(in srgb, var(--dua-color-white) 14%, transparent), inset 0 -4px 0 color-mix(in srgb, black 18%, transparent); }
.tv-set__bezel { flex: 1; min-width: 0; padding: 8px; border-radius: 24px; background: color-mix(in srgb, var(--dua-color-ink) 45%, black); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dua-color-white) 6%, transparent), inset 0 6px 14px color-mix(in srgb, black 60%, transparent); }
.tv-set__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 54px; flex-shrink: 0; }
.tv-set__knob { position: relative; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--dua-color-accent-soft), var(--dua-color-accent) 60%); box-shadow: 0 3px 0 color-mix(in srgb, black 25%, transparent), inset 0 -2px 3px color-mix(in srgb, black 20%, transparent); }
.tv-set__knob::after { content: ""; position: absolute; top: 5px; left: 50%; width: 3px; height: 12px; border-radius: 2px; background: var(--tv-body-strong); transform: translateX(-50%); }
.tv-set__knob--small { width: 28px; height: 28px; transform: rotate(60deg); }
.tv-set__knob--small::after { top: 4px; height: 8px; }
.tv-set__grille { display: flex; flex-direction: column; gap: 5px; width: 34px; }
.tv-set__grille i { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, black 28%, transparent); }
.tv-set__power { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, black 30%, transparent); box-shadow: inset 0 1px 2px color-mix(in srgb, black 40%, transparent); transition: background .3s ease, box-shadow .3s ease; }
.tv-set:has(.tv-stage.is-ready) .tv-set__power { background: var(--dua-color-accent); }
.tv-set:has(.tv-stage.is-playing) .tv-set__power { background: var(--dua-color-success); box-shadow: 0 0 8px var(--dua-color-success); }
.tv-set__feet { display: flex; justify-content: space-between; padding: 0 18%; }
.tv-set__feet span { width: 46px; height: 14px; border-radius: 0 0 12px 12px; background: var(--tv-body-strong); }
.tv-set__feet span:first-child { transform: skewX(18deg); }
.tv-set__feet span:last-child { transform: skewX(-18deg); }
@media (max-width: 520px) {
  .tv-set { padding-top: 60px; }
  .tv-set__antennas { height: 68px; }
  .tv-set__rod { height: 60px; }
  .tv-set__rod--end { height: 52px; }
  .tv-set__cabinet { flex-direction: column; gap: 10px; padding: 10px; border-radius: 24px; }
  .tv-set__bezel { padding: 5px; border-radius: 18px; }
  .tv-set__panel { flex-direction: row; width: auto; height: 30px; gap: 12px; padding: 0 6px; }
  .tv-set__knob { width: 26px; height: 26px; }
  .tv-set__knob::after { top: 3px; height: 8px; }
  .tv-set__knob--small { width: 20px; height: 20px; }
  .tv-set__knob--small::after { top: 3px; height: 6px; }
  .tv-set__grille { flex: 1; flex-direction: row; justify-content: center; gap: 5px; height: 18px; }
  .tv-set__grille i { height: auto; width: 3px; }
  .tv-set__feet span { width: 34px; height: 10px; }
}
/* Simple animations: the antenna tips blink in turn while live, the knob turns while the channel tunes,
   the screen switches on with a CRT flash and soft scanlines sit over the picture. */
.tv-set:has(.tv-stage.is-playing) .tv-set__rod::before { animation: tv-tip 1.6s ease-in-out infinite; }
.tv-set:has(.tv-stage.is-playing) .tv-set__rod--end::before { animation-delay: .8s; }
.tv-set:not(:has(.tv-stage.is-ready)) .tv-set__knob:first-child { animation: tv-tune 1.2s ease-in-out infinite; }
.tv-set:has(.tv-stage.is-playing) .tv-set__grille i { animation: tv-grille 1.1s ease-in-out infinite; transform-origin: center; }
.tv-set__grille i:nth-child(2) { animation-delay: .15s !important; }
.tv-set__grille i:nth-child(3) { animation-delay: .3s !important; }
.tv-set__grille i:nth-child(4) { animation-delay: .45s !important; }
.tv-set__grille i:nth-child(5) { animation-delay: .6s !important; }
.tv-stage::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit; background: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--dua-color-white) 3.5%, transparent) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 60%, color-mix(in srgb, black 35%, transparent)); }
.tv-stage.is-ready .tv-stage__video { animation: tv-on .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes tv-tip { 0%, 100% { background: var(--dua-color-accent); box-shadow: 0 0 0 2px var(--tv-body-strong); } 50% { background: var(--dua-color-primary); box-shadow: 0 0 0 2px var(--tv-body-strong), 0 0 10px var(--dua-color-primary); } }
@keyframes tv-tune { 0%, 100% { transform: rotate(-40deg); } 50% { transform: rotate(40deg); } }
@keyframes tv-grille { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes tv-on { 0% { transform: scale(1, .02); filter: brightness(3); } 45% { transform: scale(1, 1); filter: brightness(1.6); } 100% { transform: none; filter: none; } }
@keyframes tv-rod-start { 0%, 100% { transform: rotate(-32deg); } 50% { transform: rotate(-26deg); } }
@keyframes tv-rod-end { 0%, 100% { transform: rotate(26deg); } 50% { transform: rotate(33deg); } }
.tv-stage { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--dua-color-ink); }
.tv-stage::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; transition: box-shadow .4s ease; }
.tv-stage.is-playing::after { animation: tv-glow 2.4s ease-in-out infinite; }
.tv-stage__video { display: block; width: 100%; height: 100%; object-fit: contain; background: transparent; opacity: 0; transition: opacity .45s ease; }
.tv-stage.is-ready .tv-stage__video { opacity: 1; }
.tv-stage__live { position: absolute; top: 12px; inset-inline-start: 12px; z-index: 1; }
.tv-stage.is-playing .tv-stage__live .radio-live__dot { background: var(--primary); animation: radio-live-pulse 1.4s ease-in-out infinite; }
.tv-stage__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; transition: opacity .3s ease; }
.tv-stage.is-ready .tv-stage__loading { opacity: 0; }
.tv-stage__loading span { width: 10px; height: 10px; border-radius: 50%; background: var(--dua-color-white); animation: tv-dot 1s ease-in-out infinite; }
.tv-stage__loading span:nth-child(2) { animation-delay: .15s; }
.tv-stage__loading span:nth-child(3) { animation-delay: .3s; }
@keyframes tv-rise { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes tv-glow { 0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent); } 50% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--primary) 70%, transparent); } }
@keyframes tv-dot { 0%, 100% { opacity: .3; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .tv-set, .tv-set__rod, .tv-set__rod::before, .tv-set__knob, .tv-set__grille i, .tv-stage.is-ready .tv-stage__video, .tv-stage.is-playing::after, .tv-stage__loading span, .tv-stage.is-playing .tv-stage__live .radio-live__dot { animation: none; } }

/* Radio player (radio_listen.html): a LIVE badge where the seek bar is; its dot glows while the stream plays. */
.radio-live { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 28px; }
.radio-live__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--dua-color-soft); color: var(--primary); font-family: var(--dua-font); font-size: 12px; font-weight: 600; line-height: 18px; }
.radio-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.radio-live__badge.is-on .radio-live__dot { background: var(--primary); animation: radio-live-pulse 1.4s ease-in-out infinite; }
.radio-live__note { flex: 1; min-width: 0; font-size: 11px; line-height: 18px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes radio-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .radio-live__badge.is-on .radio-live__dot { animation: none; } }

/* Azan sound (settings/azan): a radio card per tune, with a round preview button for recordings. */
.azan-options { display: flex; flex-direction: column; gap: 12px; }
.azan-option { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; border: 1px solid var(--dua-color-border); border-radius: 20px; background: var(--dua-color-white); transition: border-color .15s ease; }
.azan-option:has(input:checked) { border: 2px solid var(--dua-color-secondary); padding: 11px 13px; }
.azan-option:has(input:focus-visible) { outline: 3px solid var(--dua-color-secondary); outline-offset: 2px; }
.azan-option__choice { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.azan-option__choice input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--dua-color-secondary); }
.azan-option__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.azan-option__name { font-family: var(--dua-font); font-weight: 600; font-size: 15px; line-height: 24px; color: var(--dua-color-ink); }
.azan-option__desc { font-size: 12px; line-height: 19px; color: var(--muted); }
.azan-option__play { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dua-color-soft); color: var(--primary); cursor: pointer; }
.azan-option__play[aria-pressed="true"] { background: var(--primary); color: var(--dua-color-white); }
.azan-option__play:focus-visible { outline: 3px solid var(--dua-color-secondary); outline-offset: 2px; }
.azan-option__icon-stop, .azan-option__play[aria-pressed="true"] .azan-option__icon-play { display: none; }
.azan-option__play[aria-pressed="true"] .azan-option__icon-stop { display: block; }

/* Quran reader */
/* Prev/next surah: chevron on the outer edge, label + surah name inside. A lone card spans the row. */
.surah-nav { display: flex; gap: 12px; margin-top: 14px; }
.surah-nav__btn { flex: 1 1 0; min-width: 0; min-height: 64px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); color: var(--dua-color-secondary, var(--primary)); text-decoration: none; transition: transform .15s ease, border-color .15s ease; }
.surah-nav__btn:hover { text-decoration: none; border-color: var(--primary); }
.surah-nav__btn:active { transform: scale(.98); }
.surah-nav__btn--next { background: var(--dua-color-primary-tint); border-color: var(--dua-color-primary-tint); }
.surah-nav__icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--dua-color-soft); color: var(--primary); }
.surah-nav__btn--next .surah-nav__icon { background: var(--primary); color: var(--dua-color-white); }
[dir="ltr"] .surah-nav__icon svg { transform: scaleX(-1); }
.surah-nav__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.surah-nav__label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.surah-nav__name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 340px) {
  .surah-nav { gap: 8px; }
  .surah-nav__btn { padding: 10px 8px; gap: 8px; }
  .surah-nav__icon { width: 30px; height: 30px; }
}
.verse { background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: 16px; padding: 12px 16px; scroll-margin-top: 80px; }
.verse.is-playing { background: var(--dua-color-primary-tint); border-color: var(--accent); }
.verse__text { font-family: var(--dua-font), 'Noto Naskh Arabic', serif; font-size: 24px; line-height: 2.1; color: var(--primary); direction: rtl; text-align: right; margin: 0; }
.verse__num { font-size: 13px; color: var(--accent); }
.verse__actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.verse details { border: 0; padding: 0; background: transparent; }
.verse details summary { padding: 6px 0; font-size: 13px; color: var(--dua-button-secondary-fg); }
.verse details > div { font-size: 14px; }
.verse details h3 { margin: 12px 0 4px; font-size: 13px; color: var(--accent); }
.player { position: fixed; bottom: 24px; inset-inline: 0; z-index: 15; display: none; justify-content: center; }
.player.is-visible { display: flex; }
.player__inner { width: calc(100% - 32px); max-width: 398px; background: var(--primary); color: var(--dua-color-white); border-radius: 16px; padding: 8px 8px 8px 16px; display: flex; align-items: center; gap: 8px; }
.player__inner span { flex: 1; font-size: 13px; }
.player button { background: transparent; border: 0; color: var(--dua-color-white); width: 44px; height: 44px; border-radius: 12px; cursor: pointer; font-size: 18px; }

/* Dhikr counter */
.counter { align-self: center; width: 160px; height: 160px; border-radius: 50%; background: var(--surface); border: 4px solid var(--accent); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-family: var(--dua-font); user-select: none; -webkit-tap-highlight-color: transparent; }
.counter:active { transform: scale(0.97); }
.counter b { font-size: 46px; color: var(--primary); }
.counter span { color: var(--muted); }
.counter.is-done { background: var(--primary); border-color: var(--primary); }
.counter.is-done b, .counter.is-done span { color: var(--dua-color-white); }

/* Calendar & tables */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal__head { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0; }
.cal a { display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 14px; background: var(--surface); }
.cal a small { font-size: 10px; color: var(--muted); }
.cal a.is-today { outline: 2px solid var(--accent); }
.cal a.is-selected { background: var(--primary); color: var(--dua-color-white); } .cal a.is-selected small { color: var(--dua-color-primary-tint); }
.cal a.has-occasion { background: var(--dua-color-primary-tint); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 10px 8px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--primary); font-weight: 600; background: var(--dua-color-soft); }
tr.is-today td { background: var(--dua-color-primary-tint); font-weight: 600; }

/* Qibla */
.dial { width: 240px; height: 240px; border-radius: 50%; border: 3px solid var(--accent); background: var(--surface); margin: 0 auto; display: flex; align-items: center; justify-content: center; }
.dial svg { width: 120px; height: 120px; color: var(--primary); transition: transform 0.2s linear; }

/* States */
.state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 16px; }
.state svg { width: 48px; height: 48px; color: var(--accent); }
.state h2 { margin: 8px 0 0; font-size: 17px; color: var(--primary); }
.state p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

/* Onboarding */
.onboarding { min-height: calc(100vh - 140px); display: flex; flex-direction: column; justify-content: center; gap: 16px; text-align: center; }
.steps-bar { display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: 13px; }

/* Onboarding screens (AR / ONBOARD / 01-04) */
.ob { display: flex; flex-direction: column; gap: 14px; padding-top: 8px; }
.ob-header { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.ob-header .icon-btn { color: var(--secondary); }
.ob-title { margin: 0; flex: 1; font-size: 22px; line-height: 35px; font-weight: 700; color: var(--ink); text-align: start; }
.ob-intro { margin: 8px 0 18px; font-size: 14px; line-height: 22px; color: var(--muted); text-align: start; }
.ob-question { margin: 8px 0 0; font-size: 20px; line-height: 32px; font-weight: 600; color: var(--secondary); text-align: start; }
.ob-small { margin: 8px 0 0; font-size: 13px; line-height: 21px; color: var(--muted); text-align: start; }
.ob-note { margin: 0; font-size: 11px; line-height: 18px; color: var(--muted); text-align: start; }
.ob-hero { margin: 0; font-size: 30px; line-height: 48px; font-weight: 700; color: var(--secondary); text-align: center; }
.ob-lead { margin: 14px 0 0; font-size: 15px; line-height: 24px; color: var(--muted); text-align: center; }
.ob-icon { display: block; width: 174px; height: 174px; border-radius: 42px; margin: 18px auto; }
.ob-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
.ob-grid .dua-tile { min-height: 104px; }
.ob-grid__full { grid-column: 1 / -1; }
.ob-grid__full .dua-tile { min-height: 0; }
/* Launch logo video (templates/web/components/splash_media.html), on its own background, centred in
   whatever part of the screen is visible: full width on phones, bounded by the height on wide screens. */
body.is-splash, body.is-splash .app { background: var(--splash-bg); }
.splash, .splash-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--splash-bg); cursor: pointer; }
.splash { z-index: 1; }
.splash-overlay { z-index: 2000; transition: opacity .28s ease; }
.splash-stage { width: min(100vw, 75vh, 520px); width: min(100vw, 75dvh, 520px); aspect-ratio: 1; }
/* The finished logo sits 1.7% below the middle of the video's frame; lift it to the screen's centre. */
.splash-media { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--splash-bg); transform: translateY(-1.7%); }
.splash-media--still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .splash-media--video { display: none; }
  .splash-media--still { display: block; }
}
.splash-overlay.is-leaving { opacity: 0; pointer-events: none; }
.splash__continue { position: absolute; inset-inline: 16px; bottom: calc(24px + env(safe-area-inset-bottom)); width: auto; max-width: 398px; margin: 0 auto; }

/* Home (AR / HOME / 01-04) */
.home-shortcuts { display: flex; gap: 10px; }
.home-shortcuts--four .dua-shortcut { flex: 1; }
.home-shortcuts--grid { display: grid; grid-template-columns: repeat(3, 1fr); }
/* Home "for you": up to six interest tiles, three per row. */
.section-title { margin: 0; font-size: 16px; line-height: 26px; font-weight: 600; color: var(--ink); text-align: start; }
.ob-header__action { margin-inline-start: auto; color: var(--secondary); }
.mood-heading { margin: 8px 0 0; font-size: 26px; line-height: 42px; font-weight: 700; color: var(--secondary); text-align: start; }

/* Quran List Screen (matching Image 3 & Figma spec) */
.quran-search-box {
  display: flex;
  align-items: center;
  height: 50px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0 16px;
  gap: 8px;
}
.quran-search-box__input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--dua-font);
  font-size: 12px;
  color: var(--ink);
  text-align: start;
}
.quran-search-box__icon {
  color: var(--secondary);
  flex-shrink: 0;
}
.quran-row-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 76px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 19px;
  text-decoration: none;
  gap: 4px;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.quran-row-card:hover {
  border-color: var(--primary);
  transform: scale(0.99);
}
.quran-row-card__title {
  margin: 0;
  font-family: var(--dua-font);
  font-size: 14px;
  line-height: 22px;
  font-weight: 400;
  color: var(--ink);
  text-align: start;
}
.quran-row-card__desc {
  margin: 0;
  font-family: var(--dua-font);
  font-size: 11px;
  line-height: 18px;
  font-weight: 400;
  color: var(--muted);
  text-align: start;
}

/* Tafseer Box */
.tafseer-box {
  margin-top: 14px;
  padding: 16px;
  background: var(--soft);
  border-radius: 16px;
  border: 1px solid var(--border);
  text-align: start;
}
.tafseer-box__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--secondary);
  margin: 0 0 8px 0;
}
.tafseer-box__content {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

/* Quran Reader Paginated Slides & Swipe */
.quran-reader-card {
  min-height: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
  transition: box-shadow 0.2s ease;
}
.quran-reader-card:active {
  cursor: grabbing;
}
.quran-reader-card__title {
  font-family: var(--dua-font);
  font-size: 20px;
  line-height: 32px;
  font-weight: 600;
  color: var(--secondary);
  text-align: center;
  margin: 0 0 16px 0;
}
.quran-pages-viewport {
  width: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
}
.quran-page-slide {
  width: 100%;
  display: none;
  animation: quranFade 0.25s ease-in-out;
}
.quran-page-slide.active {
  display: block;
}
@keyframes quranFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.quran-verses-container {
  width: 100%;
  text-align: center;
  margin: 12px 0;
  /* AR / QURAN / 02 "Quran verses": Alexandria 400, 20px / 160%, ink. Simple-script
     text (web/quran.py EDITIONS); pause signs Alexandria lacks fall back to Noto Naskh. */
  font-family: var(--dua-font), 'Noto Naskh Arabic', serif;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.6;
  color: var(--dua-color-ink);
  direction: rtl;
}
/* The Basmala above ayah 1 (web/components/basmala.html), like a mushaf page's header band. */
.quran-basmala {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  margin: 0 0 8px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--dua-color-primary-tint);
}
.quran-basmala__text {
  font-family: var(--dua-font), 'Noto Naskh Arabic', serif;
  font-size: 1.1em;
  line-height: 1.7;
  color: var(--secondary);
  text-align: center;
}
.quran-basmala__ornament {
  flex: 1;
  max-width: 56px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.quran-basmala__ornament svg { width: 12px; height: 12px; flex: none; fill: var(--primary); }
.quran-basmala__rule { flex: 1; height: 1px; background: var(--primary); opacity: 0.35; }
.verse-unit {
  display: inline;
  line-height: inherit;
  transition: background-color 0.3s ease;
}
.verse-unit.verse-highlight {
  background-color: var(--soft);
  border-radius: 6px;
  padding: 2px 6px;
}
/* The whole ayah opens its tafseer (web/components/tafseer_dialog.html). */
.verse-unit[role="button"] { cursor: pointer; border-radius: 6px; }
.verse-unit[role="button"]:hover { background-color: var(--dua-color-primary-tint); }
.verse-unit[role="button"]:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
/* Ayah end marker in the reader (clickable: opens that ayah's tafseer). */
.verse-num {
  color: var(--primary);
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  margin: 0 2px;
  line-height: 1;
}
/* Number inside a Rub el Hizb star (the ۞ shape) - web/components/rub_marker.html. */
.rub-marker {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  line-height: 1;
  color: var(--dua-color-primary);
}
.rub-marker > * { grid-area: 1 / 1; }
.rub-marker__star {
  width: 1.75em;
  height: 1.75em;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linejoin: round;
}
.rub-marker__star circle { stroke-width: 3; }
.rub-marker__n {
  font-family: var(--dua-font);
  font-weight: 700;
  font-size: 0.55em;
  line-height: 1;
}
.rub-marker--3 .rub-marker__n { font-size: 0.42em; }
/* Surah / juz / saved rows: the number badge at the start, the name beside it. */
.quran-row-card__head { display: flex; align-items: center; gap: 10px; }
.quran-row-card__head .rub-marker { font-size: 20px; flex: none; }
.verse-num:hover {
  text-decoration: underline;
}
.quran-page-nav-row {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.quran-page-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--secondary);
  cursor: pointer;
  transition: all 0.15s ease;
}
.quran-page-nav-btn:hover:not(:disabled) {
  background: var(--soft);
  border-color: var(--primary);
}
.quran-page-nav-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
[dir="rtl"] .quran-page-nav-btn svg {
  transform: scaleX(-1);
}
.quran-page-indicator {
  font-family: var(--dua-font);
  font-size: 12px;
  line-height: 18px;
  color: var(--muted);
  text-align: center;
  flex: 1;
}

/* Calendar Screen Styles */
.calendar-hero-card {
  background: var(--soft);
  border-radius: 24px;
  padding: 24px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-bottom: 20px;
}
.calendar-hero-badge {
  font-family: var(--dua-font);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  background: var(--canvas);
  border: 1px solid var(--border);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 4px;
}
.calendar-hero-hijri {
  font-family: var(--dua-font);
  font-size: 24px;
  line-height: 38px;
  font-weight: 700;
  color: var(--secondary);
  margin: 0;
}
.calendar-hero-gregorian {
  font-family: var(--dua-font);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.calendar-today-occasion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--canvas);
  border: 1px solid var(--border);
  color: var(--secondary);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  margin-top: 6px;
}
.calendar-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 8px 12px;
  margin-bottom: 16px;
}
.calendar-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--secondary);
  text-decoration: none;
  transition: all 0.15s ease;
}
.calendar-nav-btn:hover {
  background: var(--soft);
  border-color: var(--primary);
}
[dir="rtl"] .calendar-nav-btn svg {
  transform: scaleX(-1);
}
.calendar-nav-label {
  font-family: var(--dua-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--secondary);
  text-align: center;
}
.calendar-grid-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 18px 16px;
  margin-bottom: 20px;
}
.calendar-hijri-range {
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
  text-align: center;
  margin: 0 0 14px 0;
}
.calendar-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  margin-bottom: 10px;
}
.calendar-weekday-item {
  font-family: var(--dua-font);
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.calendar-blank-cell {
  aspect-ratio: 1;
}
.calendar-day-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink);
  transition: all 0.15s ease;
  position: relative;
}
.calendar-day-cell:hover {
  background: var(--soft);
}
.calendar-day-cell.is-occasion {
  background: var(--soft);
}
.calendar-day-cell.is-today {
  border: 1.5px solid var(--primary);
}
.calendar-day-cell.is-selected {
  background: var(--secondary);
  color: var(--dua-color-white);
}
.calendar-day-cell.is-selected .calendar-day-sub {
  color: var(--soft);
}
.calendar-day-cell.is-selected .calendar-occasion-dot {
  background: var(--dua-color-white);
}
.calendar-day-main {
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.1;
}
.calendar-day-sub {
  font-family: var(--dua-font);
  font-size: 10px;
  color: var(--muted);
  line-height: 1;
  margin-top: 2px;
}
.calendar-occasion-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--primary);
  margin-top: 2px;
}
.calendar-selected-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.calendar-selected-title {
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-selected-hijri {
  font-family: var(--dua-font);
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}
.calendar-selected-occasion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--soft);
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 4px;
}
.calendar-events-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calendar-events-title {
  font-family: var(--dua-font);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.calendar-events-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.calendar-event-card {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  gap: 14px;
}
.calendar-event-icon {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  background: var(--soft);
  color: var(--secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.calendar-event-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.calendar-event-name {
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}
.calendar-event-sub {
  font-family: var(--dua-font);
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.calendar-event-badge {
  background: var(--soft);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 12px;
  white-space: nowrap;
}

/* Imsakiah Screen Styles (matching Calendar aesthetic) */
.imsakiah-hero-times {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
  width: 100%;
}
.imsakiah-hero-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--canvas);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 8px 14px;
  min-width: 84px;
  gap: 2px;
}
.imsakiah-hero-pill-label {
  font-family: var(--dua-font);
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
}
.imsakiah-hero-pill-val {
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 700;
  color: var(--secondary);
}
.imsakiah-hero-pill--highlight {
  background: var(--soft);
  border-color: var(--primary);
}
.imsakiah-hero-pill--highlight .imsakiah-hero-pill-label,
.imsakiah-hero-pill--highlight .imsakiah-hero-pill-val {
  color: var(--primary);
}
/* Live countdown to the end of suhoor / to iftar (the only place with seconds). */
.imsakiah-countdown {
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--dua-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}
.imsakiah-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.imsakiah-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--dua-font);
}
.imsakiah-table thead tr {
  background: var(--secondary);
}
.imsakiah-table th {
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--dua-color-white);
  text-align: center;
  border-bottom: none;
}
.imsakiah-table td {
  padding: 12px 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
}
.imsakiah-table tr:last-child td {
  border-bottom: none;
}
.imsakiah-table tr.is-today td {
  background: var(--soft);
  font-weight: 700;
  color: var(--secondary);
}
.imsakiah-col-day {
  font-weight: 700;
  color: var(--secondary);
}
.imsakiah-table tr.is-today .imsakiah-col-day {
  color: var(--primary);
}
.imsakiah-maghrib-cell {
  font-weight: 600;
}

/* Auth / Login RTL handling */
[dir="rtl"] .dua-password input.dua-input {
  padding-left: 52px;
  padding-right: 16px;
  text-align: right;
}
[dir="rtl"] .dua-password__toggle {
  left: 6px;
  right: auto;
}
[dir="rtl"] .dua-field__label,
[dir="rtl"] .dua-input,
[dir="rtl"] .dua-field__error,
[dir="rtl"] .dua-field__hint,
[dir="rtl"] .dua-prayer-intro {
  text-align: right;
}

.dua-auth-forgot-row {
  display: flex;
  justify-content: flex-end;
  margin-top: -6px;
  margin-bottom: 6px;
}
[dir="rtl"] .dua-auth-forgot-row {
  justify-content: flex-start;
}
.dua-auth-forgot-link {
  font-family: var(--dua-font);
  font-size: 13px;
  color: var(--primary);
  text-decoration: none;
  font-weight: 500;
}
.dua-auth-forgot-link:hover {
  text-decoration: underline;
}




/* iOS Safari zooms into any focused field whose text is under 16px. On touch
   screens, keep form fields at 16px so tapping one doesn't zoom the page
   (pinch-zoom still works; no maximum-scale on the viewport). */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* Listen page: gentle motion while the recitation plays (.is-playing set by quran_listen.html). */
/* The artwork SVG draws its own disc and ring (design AR / QURAN / 03), so drop the
   design-system wrapper's circle and border and size it to the drawing. */
.dua-quran-player-art {
  position: relative; display: block; width: 197px; height: 197px; margin: 0 auto 20px;
  background: none; border: 0; border-radius: 50%;
}
.dua-quran-player-art > svg { display: block; }
.dua-quran-player-art::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--dua-color-primary) 35%, transparent);
  pointer-events: none;
}
.player-art__moon, .player-art__star { transform-box: fill-box; transform-origin: center; }
.player-bars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; height: 18px; margin: 4px 0 8px; visibility: hidden; }
.player-bars span { width: 4px; height: 6px; border-radius: 2px; background: var(--dua-color-primary); }
.is-playing > .player-bars { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .dua-quran-player-art.is-playing::after { animation: player-halo 2.4s ease-out infinite; }
  .dua-quran-player-art.is-playing .player-art__moon { animation: player-sway 6s ease-in-out infinite; }
  .dua-quran-player-art.is-playing .player-art__star { animation: player-twinkle 2.4s ease-in-out infinite; }
  .is-playing > .player-bars span { animation: player-bar 1s ease-in-out infinite; }
  .is-playing > .player-bars span:nth-child(2) { animation-delay: -0.75s; }
  .is-playing > .player-bars span:nth-child(3) { animation-delay: -0.4s; }
  .is-playing > .player-bars span:nth-child(4) { animation-delay: -0.15s; }
}
@keyframes player-halo {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dua-color-primary) 35%, transparent); }
  100% { box-shadow: 0 0 0 18px transparent; }
}
@keyframes player-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes player-twinkle { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.82); opacity: 0.7; } }
@keyframes player-bar { 0%, 100% { height: 6px; } 50% { height: 18px; } }

/* Listen page: surah / juz picker (chips switch which list shows). */
.listen-picker__tabs { justify-content: center; gap: 10px; margin-bottom: 10px; }
.listen-picker__row { display: flex; gap: 10px; max-width: 342px; margin: 0 auto; }
.listen-picker__form { display: flex; flex: 1 1 0; min-width: 0; margin: 0; }
.listen-picker__form .dua-reciter-picker__select { width: 100%; min-width: 0; max-width: none; text-overflow: ellipsis; }
.listen-picker[data-mode="surah"] .listen-picker__select[data-mode="juz"],
.listen-picker[data-mode="juz"] .listen-picker__select[data-mode="surah"] { display: none; }
.listen-picker__note { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--dua-color-muted); }

/* Listen page: seek slider styled like the design's progress track (6px, primary fill). */
.player-seek {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 22px; margin: 0; padding: 0; background: transparent; cursor: pointer;
  --track: var(--dua-color-soft); --fill: var(--dua-color-primary);
}
.player-seek:disabled { cursor: default; opacity: 0.6; }
.player-seek::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--fill) var(--pct), var(--track) var(--pct));
}
[dir="rtl"] .player-seek::-webkit-slider-runnable-track {
  background: linear-gradient(to left, var(--fill) var(--pct), var(--track) var(--pct));
}
.player-seek::-moz-range-track { height: 6px; border-radius: 3px; background: var(--track); }
.player-seek::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--fill); }
.player-seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -5px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--fill); border: 2px solid var(--dua-color-white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--dua-color-ink) 20%, transparent);
}
.player-seek::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%; background: var(--fill); border: 2px solid var(--dua-color-white);
}
.player-seek:focus-visible { outline: 3px solid var(--dua-color-secondary); outline-offset: 4px; border-radius: 6px; }

/* Listen page: read along (the recited ayah highlighted, tap an ayah to jump to it). */
/* Read along is a modal <dialog> over the listen player. */
.read-along { width: min(560px, calc(100vw - 32px)); max-height: 85vh; margin: auto; color: inherit; background: var(--dua-color-white); border: 1px solid var(--dua-color-border); border-radius: 24px; padding: 12px 16px 14px; box-sizing: border-box; overflow: hidden; }
.read-along[open] { display: flex; flex-direction: column; animation: read-along-in 0.2s ease-out; }
/* Read along (Quran) and the dua text: as tall as their content, up to the whole screen
   (16px margin round the sheet); longer content scrolls inside. */
.read-along--full { max-height: calc(100vh - 32px); }
@supports (height: 100dvh) { .read-along--full { max-height: calc(100dvh - 32px); } }
/* Bookmark toggle (web/components/save_button.html): filled once the item is saved. */
.save-btn[hidden] { display: none; }
.save-btn[aria-pressed="true"] { background: var(--dua-color-primary-tint); }
.save-btn[aria-pressed="true"] svg { fill: currentColor; }
.save-btn:disabled { opacity: 0.6; cursor: progress; }
.dua-reader--savable { position: relative; }
.dua-reader__save { position: absolute; top: 12px; inset-inline-end: 12px; }
.dua-reader__live { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.dua-reader--savable .dua-reader__subtitle { padding-inline: 40px; }
.listen-position { text-align: center; margin: 14px 0 0; }
.listen-position[hidden] { display: none; }
.listen-position a { margin-inline-start: 6px; color: var(--dua-color-secondary); font-weight: 600; }
.read-along::backdrop { background: var(--dua-overlay-bg); }
@keyframes read-along-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .read-along[open] { animation: none; } }
.read-along__header { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--dua-color-border); }
.read-along__title { flex: 1; min-width: 0; margin: 0; font-family: var(--dua-font); font-size: 16px; font-weight: 700; color: var(--dua-color-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.read-along__icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--dua-color-soft); color: var(--dua-color-secondary); flex-shrink: 0; }
.read-along__icon-btn:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.read-along .read-along__list { flex: 1 1 auto; min-height: 0; max-height: none; }
/* A dua's text: sized to the text (never squeezed to nothing), scrolling inside the dialog when long. */
#dua-text .read-along__list { flex: 0 1 auto; min-height: 64px; overflow-y: auto; }
.read-along__status { margin: 0 0 8px; text-align: center; font-size: 12px; color: var(--dua-color-muted); }
.read-along__status:empty { display: none; }
.read-along__list { max-height: 420px; overflow-y: auto; text-align: justify; margin: 0; scroll-behavior: smooth; }
.read-along__ayah { border-radius: 8px; padding: 2px 2px; transition: background-color 0.25s ease, color 0.25s ease; }
.read-along__ayah[role="button"] { cursor: pointer; }
.read-along__ayah[role="button"]:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.read-along__ayah.is-current { background: var(--dua-color-primary-tint); color: var(--dua-color-secondary); }
.read-along__n { color: var(--dua-color-primary); font-size: 0.8em; white-space: nowrap; }
/* In read along the ayah number opens that ayah's tafseer (tapping the ayah still seeks). */
button.read-along__n { background: none; border: 0; padding: 0 2px; margin: 0 2px; font: inherit; font-size: 0.85em; line-height: 1; color: var(--dua-color-primary); cursor: pointer; vertical-align: middle; border-radius: 50%; }
button.read-along__n:hover .rub-marker { opacity: 0.75; }
button.read-along__n:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
/* Reader: under the chips while the page's tafseer is shown. */
.tafseer-tap-hint { margin: 12px auto 0; max-width: 420px; padding: 8px 14px; border-radius: 12px; background: var(--dua-color-primary-tint); color: var(--dua-color-secondary); font-size: 13px; line-height: 1.6; text-align: center; }
.tafseer-tap-hint[hidden] { display: none; }
/* Listen to a dua -> "Dua text" modal: smaller than the detail page's 29px so long duas fit. */
.read-along .dua-text-modal__arabic { font-size: 20px; line-height: 36px; text-align: center; white-space: pre-line; }
/* One ayah's tafseer, stacked over the reader or the read-along modal. */
.tafseer-dialog__body { text-align: start; }
.tafseer-dialog__ayah { margin: 4px 0 14px; font-family: var(--dua-font-quran, var(--dua-font)); font-size: 22px; line-height: 2; color: var(--dua-color-secondary); text-align: center; }
.tafseer-dialog section { margin-bottom: 14px; }
.tafseer-dialog section[hidden] { display: none; }
.read-along__pager[hidden], .read-along__sheet[hidden] { display: none; }
.read-along__pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--dua-color-border); }
.read-along__pager .dua-chip:disabled { opacity: 0.4; cursor: default; }
.read-along__page { font-size: 13px; color: var(--dua-color-muted); }

/* Feed -> Instagram posts grid (two per row, square images, caption under each). */
/* Feed -> Instagram posts: profile card, then an Instagram-style grid (or an empty state). */
.ig-profile { margin-top: 8px; padding: 24px 20px 20px; text-align: center; background: var(--dua-color-white); border: 1px solid var(--dua-color-border); border-radius: 24px; }
.ig-profile__avatar { display: inline-flex; padding: 3px; border-radius: 50%; background: linear-gradient(135deg, var(--dua-color-secondary), var(--dua-color-primary)); }
.ig-profile__avatar img { display: block; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--dua-color-white); background: var(--dua-color-white); object-fit: cover; }
.ig-profile__name { margin: 12px 0 0; font-size: 18px; line-height: 28px; font-weight: 700; color: var(--dua-color-ink); }
.ig-profile__handle { margin: 2px 0 0; font-size: 13px; color: var(--dua-color-secondary); }
.ig-profile__tagline { margin: 8px 0 0; font-size: 13px; line-height: 22px; color: var(--dua-color-muted); }
.ig-profile__stat { display: inline-block; margin: 12px 0 0; padding: 4px 12px; border-radius: 999px; background: var(--dua-color-primary-tint); color: var(--dua-color-secondary); font-size: 12px; font-weight: 600; }
.ig-profile__cta { margin-top: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.ig-profile + .section-title { margin-top: 24px; }
.ig-grid { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ig-grid__item { position: relative; display: block; border-radius: 12px; overflow: hidden; background: var(--dua-color-soft); aspect-ratio: 1; }
.ig-grid__item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.ig-grid__badge { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; display: flex; color: var(--dua-color-white); filter: drop-shadow(0 1px 2px var(--dua-color-overlay)); }
.ig-grid__caption { position: absolute; inset: auto 0 0; padding: 24px 8px 8px; font-size: 11px; line-height: 17px; color: var(--dua-color-white); text-align: start;
  background: linear-gradient(transparent, var(--dua-color-overlay) 45%); opacity: 0; transition: opacity 0.25s ease;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ig-grid__item:hover img, .ig-grid__item:focus-visible img { transform: scale(1.05); }
.ig-grid__item:hover .ig-grid__caption, .ig-grid__item:focus-visible .ig-grid__caption { opacity: 1; }
.ig-grid__item:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
/* Instagram's profile embed (feed_instagram.html) when no posts are synced. */
.ig-embed { margin-top: 12px; border-radius: 24px; overflow: hidden; border: 1px solid var(--dua-color-border); background: var(--dua-color-white); }
.ig-embed iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 520px) { .ig-embed iframe { height: 600px; } }
.ig-empty { margin-top: 20px; padding: 24px 20px; text-align: center; border: 1.5px dashed var(--dua-color-border); border-radius: 24px; }
.ig-empty__tiles { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 220px; margin: 0 auto; }
.ig-empty__tiles > span:not(.ig-empty__icon) { aspect-ratio: 1; border-radius: 10px; background: var(--dua-color-soft); animation: ig-shimmer 1.8s ease-in-out infinite; }
.ig-empty__tiles > span:nth-child(2n) { animation-delay: 0.3s; }
.ig-empty__tiles > span:nth-child(3n) { animation-delay: 0.6s; }
.ig-empty__icon { position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: var(--dua-color-white); color: var(--dua-color-secondary); box-shadow: 0 6px 18px var(--dua-color-shadow-soft); }
.ig-empty__title { margin: 18px 0 0; font-size: 16px; line-height: 26px; font-weight: 700; color: var(--dua-color-ink); }
.ig-empty__text { margin: 4px 0 0; font-size: 13px; line-height: 22px; color: var(--dua-color-muted); }
@keyframes ig-shimmer { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .ig-empty__tiles > span { animation: none !important; } .ig-grid__item img { transition: none; } }

/* --- Enhanced User Workflow & Mobile Ergonomics --- */
html, body { -webkit-tap-highlight-color: transparent; }
@supports (min-height: 100dvh) {
  body, .app { min-height: 100dvh; }
}
button, a, input, select, textarea { touch-action: manipulation; }
.app { padding-top: env(safe-area-inset-top); }
main { padding-bottom: calc(112px + env(safe-area-inset-bottom)); }

/* Mini Audio Player (Persistent Across Pages) */
.mini-player {
  position: fixed;
  /* Sit above the tabbar: 72px inner + 1px border + safe-area padding, plus a 12px gap. */
  bottom: calc(85px + env(safe-area-inset-bottom));
  inset-inline: 16px;
  max-width: 398px;
  margin: 0 auto;
  z-index: 15;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 16px var(--dua-color-shadow);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  gap: 12px;
  animation: slide-up-player 0.25s ease-out;
}
body:not(:has(.tabbar:not([hidden]))) .mini-player {
  bottom: calc(16px + env(safe-area-inset-bottom));
}
.mini-player[hidden] {
  display: none !important;
}
/* Keep the last content row clear of the player as well as the tabbar. */
body:has(.mini-player:not([hidden])) main {
  padding-bottom: calc(176px + env(safe-area-inset-bottom));
}
.mini-player__link {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  min-width: 0;
  flex: 1;
  color: var(--primary);
}
.mini-player__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dua-color-primary-tint);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* Transparent app mark used as a mask so it takes the theme's primary colour. */
.mini-player__glyph {
  width: 26px;
  height: 26px;
  background: var(--primary);
  -webkit-mask: url("../core/img/player-icon.3a2b880ff007.png") center / contain no-repeat;
  mask: url("../core/img/player-icon.3a2b880ff007.png") center / contain no-repeat;
}
.mini-player__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mini-player__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player__subtitle {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-player__actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mini-player__btn {
  background: transparent;
  border: 0;
  color: var(--primary);
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.mini-player__btn:hover {
  background: var(--dua-color-soft);
}
.mini-player__btn--play {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mini-player__btn--play:hover {
  background: transparent;
}
.mini-player__ring-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  pointer-events: none;
  transform: rotate(-90deg);
}
.mini-player__ring-bg {
  fill: none;
  stroke: var(--dua-color-soft);
  stroke-width: 2.5;
}
.mini-player__ring-bar {
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 106.81;
  stroke-dashoffset: 106.81;
  transition: stroke-dashoffset 0.15s linear;
}
.mini-player__play-inner {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--dua-color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 2px 6px var(--dua-color-shadow);
  transition: transform 0.15s ease;
}
.mini-player__btn--play:active .mini-player__play-inner {
  transform: scale(0.92);
}
.mini-player__btn--close {
  color: var(--muted);
}
@keyframes slide-up-player {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Dhikr Counter Navigation & Ergonomics */
/* Previous / reset / next under the counter: one line, no arrows; reset in the middle as a pill. */
.dhikr-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  gap: 8px;
}
.dhikr-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 16px;
  border: 0;
  background: var(--dua-color-soft);
  color: var(--primary);
  font-family: var(--dua-font);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.dhikr-nav__btn:hover { background: var(--dua-color-primary-tint); }
.dhikr-nav__btn:active { transform: scale(0.97); }
.dhikr-nav__btn:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.dhikr-nav__btn:disabled { opacity: 0.4; cursor: default; transform: none; }
.dhikr-nav__btn--reset {
  padding: 0 16px 0 8px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--dua-color-secondary);
}
[dir="rtl"] .dhikr-nav__btn--reset { padding: 0 8px 0 16px; }
.dhikr-nav__reset-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--dua-color-primary-tint);
  color: var(--primary);
  transition: transform 0.4s ease;
}
.dhikr-nav__btn--reset:active .dhikr-nav__reset-icon { transform: rotate(-270deg); }
@media (prefers-reduced-motion: reduce) { .dhikr-nav__reset-icon { transition: none; } }

/* Reading dialogs (tafseer, read along, a dua's text): a quiet header - title, subtitle, close -
   and the actions in one labelled row under the text (web/components/reader_header.html). */
.reader-header { align-items: flex-start; gap: 12px; padding-bottom: 12px; border-bottom: 0; }
.reader-header__text { flex: 1; min-width: 0; }
.reader-header .read-along__title { font-size: 17px; line-height: 1.6; color: var(--dua-color-ink); }
.reader-header__subtitle { margin: 2px 0 0; font-family: var(--dua-font); font-size: 12px; line-height: 1.6; color: var(--dua-color-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reader-header__subtitle:empty { display: none; }
.reader-header__close { width: 32px; height: 32px; border-radius: 50%; background: none; color: var(--dua-color-muted); flex-shrink: 0; transition: background-color 0.15s ease; }
.reader-header__close:hover { background: var(--dua-color-soft); }
.reader-header__close:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.reader-actions { display: flex; justify-content: space-around; align-items: flex-start; gap: 4px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--dua-color-border); flex-shrink: 0; }
.reader-action { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; padding: 0 4px; background: none; border: 0; font: inherit; color: var(--dua-color-secondary); text-decoration: none; cursor: pointer; transition: transform 0.15s ease; }
.reader-action[hidden] { display: none; }
.reader-action:active { transform: scale(0.96); }
.reader-action:disabled { opacity: 0.35; cursor: default; transform: none; }
.reader-action:focus-visible { outline: none; }
.reader-action:focus-visible .reader-action__icon { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.reader-action__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--dua-color-soft); transition: background-color 0.15s ease, color 0.15s ease; }
.reader-action:hover:not(:disabled) .reader-action__icon { background: var(--dua-color-soft-strong); }
.reader-action__label { font-family: var(--dua-font); font-size: 11px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.reader-action[aria-pressed="true"] { color: var(--dua-color-primary); }
.reader-action[aria-pressed="true"] .reader-action__icon { background: var(--dua-color-primary-tint); }
.reader-action.save-btn[aria-pressed="true"] { background: none; }
.reader-action--prominent .reader-action__icon, .reader-action--prominent:hover .reader-action__icon { background: var(--dua-color-primary); color: var(--dua-color-white); }
.save-btn .save-btn__on, .save-btn[aria-pressed="true"] .save-btn__off { display: none; }
.save-btn[aria-pressed="true"] .save-btn__on { display: inline; }
/* Chevrons point "back" towards the reading start: mirrored in left-to-right pages. */
[dir="ltr"] .reader-action__flip { transform: scaleX(-1); }
/* The text fades in on open and when the tafseer moves to another ayah. */
.read-along__list.is-entering { animation: reader-text-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes reader-text-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tafseer-dialog section { padding-top: 12px; border-top: 1px solid var(--dua-color-border); }
@media (prefers-reduced-motion: reduce) {
  .read-along__list.is-entering { animation: none; }
  .reader-action, .reader-action:active { transition: none; transform: none; }
}

@media (max-width: 600px) {
  .read-along, .tafseer-dialog {
    width: 100vw;
    max-width: 100vw;
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: 0;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }
}

/* Share-card designs (web/components/frame_card.html, web/static/web/frame-card.js): the text sits in
   the frame's measured empty area (--tx/--ty/--tw/--th, core/card_frames.json), sized in container
   units so the preview matches the server image at any width. */
.frame-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  overflow: hidden;
  background-color: var(--dua-color-share-purple-tint);
  background-size: cover;
  background-position: center;
  container-type: inline-size;
  color: var(--ink, var(--dua-color-share-dark));
  transition: background-image 0.2s ease;
}
.frame-card__body {
  position: absolute;
  left: var(--tx, 10%);
  top: var(--ty, 10%);
  width: var(--tw, 80%);
  height: var(--th, 68%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* Card text in bold Naskh (the reference post, api/core/feed_posts/post-01.jpeg), as on the server image. */
.frame-card__text {
  margin: 0;
  font-family: "Noto Naskh Arabic", var(--dua-font);
  font-weight: 700;
  font-size: var(--fs, 6cqw);
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.frame-card__source {
  margin: 0.6em 0 0;
  font-family: "Noto Naskh Arabic", var(--dua-font);
  font-weight: 600;
  font-size: calc(var(--fs, 6cqw) * 0.5);
  color: var(--accent, var(--dua-color-share-pink));
}
/* Frames carry the watermark in the image; the colour themes draw it. */
.frame-card__watermark { display: none; }
.frame-card--theme .frame-card__watermark {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  font-family: var(--dua-font);
  font-weight: 500;
  font-size: 2.1cqw;
  color: var(--ink);
}
.frame-card__handle { display: inline-flex; align-items: center; gap: 0.15cqw; }
.instagram-glyph { width: 1.15em; height: 1.15em; flex: none; }
.frame-card__mark {
  width: 7.2cqw;
  height: 7.2cqw;
  background: url("../core/img/player-icon.3a2b880ff007.png") center / contain no-repeat;
}
.frame-card--purple { background: var(--dua-color-share-purple); --ink: var(--dua-color-white); --accent: var(--dua-color-share-gold); }
.frame-card--pink { background: var(--dua-color-share-pink); --ink: var(--dua-color-white); --accent: var(--dua-color-share-gold); }
.frame-card--white {
  background: var(--dua-color-white);
  box-shadow: inset 0 0 0 2px var(--dua-color-share-border);
  --ink: var(--dua-color-share-dark);
  --accent: var(--dua-color-share-pink);
}
.frame-card--theme .frame-card__body { left: 10%; top: 10%; width: 80%; height: 68%; }
/* The dua page's chips (category, topic, share) stay on one line. */
.dua-detail-chips { flex-wrap: nowrap; }
.dua-detail-chips .dua-chip { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The dua page's title above its card: at the start, with room before the design. */
.dua-detail-title {
  margin: 0;
  padding-bottom: 16px;
  font-family: var(--dua-font);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.6;
  color: var(--primary);
  text-align: start;
}
/* Feed: our page's ready-made posts, two to a row, each opening its dua. */
.feed-posts { display: flex; flex-direction: column; gap: 10px; }
.feed-posts .section-title { margin: 0; text-align: start; }
.feed-posts__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.feed-posts__item { display: block; border-radius: 16px; overflow: hidden; border: 1px solid var(--border); background: var(--surface); }
.feed-posts__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
a.feed-posts__item:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
/* Feed: today's dua on its card design, under its label. */
.feed-featured { display: flex; flex-direction: column; gap: 10px; }
.feed-featured__label { margin: 0; font-family: var(--dua-font); font-weight: 600; font-size: 14px; color: var(--dua-color-secondary); text-align: start; }
/* The share options page: the card to save, as large as the column. */
.share-options-preview {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 24px;
  box-shadow: 0 6px 20px var(--dua-color-shadow-soft);
}
/* In the tafseer dialog and on the dua page: a bit narrower than the column. */
.frame-card--inline { max-width: 420px; margin: 0 auto 16px; }


/* Share page (pages/card_share.html): the designs swiper (swipe, or tap a preview below). */
/* The design previews under the swiper: a scrolling row of frame thumbnails. */
.frame-picker {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  margin-top: 14px;
  padding: 4px 2px 12px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.frame-picker::-webkit-scrollbar { display: none; }
.frame-picker__item {
  flex: none;
  width: 88px;
  height: 88px;
  padding: 0;
  border-radius: 16px;
  border: 2px solid var(--border);
  background-color: var(--dua-color-share-purple-tint);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  scroll-snap-align: start;
}
.frame-picker__item[aria-pressed="true"] { border-color: var(--primary); box-shadow: 0 0 0 3px var(--dua-color-primary-tint); }
.frame-picker__item:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.card-swiper { position: relative; }
.card-swiper__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  border-radius: 24px;
}
.card-swiper__track::-webkit-scrollbar { display: none; }
.card-swiper__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.card-swiper__count { margin: 8px 0 0; text-align: center; font-family: var(--dua-font); font-size: 12px; color: var(--muted); }
.share-color-preview { margin-bottom: 14px; }

/* Daily Instagram post settings (web/components/instagram_schedule_form.html). */
/* The daily-post settings, laid out like the sign-in / register forms. */
.ig-schedule { gap: 16px; margin-top: 12px; text-align: start; }
.ig-schedule__head .section-title { margin: 0 0 4px; }
.ig-schedule__head .dua-prayer-intro { margin: 0; }
.ig-schedule__switch { padding: 14px 16px; min-height: 64px; box-sizing: border-box; background: var(--dua-color-white); border: 1px solid var(--dua-input-border); border-radius: 16px; }
.ig-schedule__select { appearance: none; -webkit-appearance: none; padding-inline-end: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.ig-source { border: 0; margin: 0; padding: 0; min-width: 0; }
.ig-source legend { padding: 0; margin-bottom: 6px; }
.ig-source__options { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.ig-source__chip { position: relative; cursor: pointer; font-weight: 600; text-align: center; }
.ig-source__custom { margin-top: 12px; padding: 14px; background: var(--dua-color-white); border: 1px solid var(--dua-input-border); border-radius: 16px; }
[data-show-for][hidden], .ig-source__custom[hidden], .ig-library[hidden], .ig-library__item[hidden], .ig-library__empty[hidden] { display: none !important; }
.ig-preview img[src=""] { visibility: hidden; }
.ig-library { margin-top: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--dua-color-white); border: 1px solid var(--dua-input-border); border-radius: 16px; }
.ig-library__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ig-library__search { position: relative; }
.ig-library__search svg { position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%); color: var(--dua-color-muted); pointer-events: none; }
.ig-library__search .dua-input { min-height: 52px; padding-inline-start: 44px; }
.ig-library__list { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
.ig-library__item { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--dua-input-border); border-radius: 14px; cursor: pointer; text-align: start; transition: border-color 0.15s, background 0.15s; }
.ig-library__item input { position: absolute; opacity: 0; pointer-events: none; }
.ig-library__item::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--dua-input-border); box-sizing: border-box; }
.ig-library__item:has(input:checked) { border-color: var(--primary); background: var(--dua-color-primary-tint); }
.ig-library__item:has(input:checked)::before { border: 5px solid var(--primary); }
.ig-library__item:has(input:focus-visible) { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.ig-library__item--auto { background: var(--dua-color-soft); }
.ig-library__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ig-library__title { font-family: var(--dua-font); font-weight: 600; font-size: 14px; line-height: 22px; color: var(--dua-color-ink); }
.ig-library__text { font-family: var(--dua-font); font-size: 12px; line-height: 20px; color: var(--dua-color-muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ig-library__kind { display: inline-block; margin-inline-start: 6px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 20px; vertical-align: middle; }
.ig-library__kind--duas { background: var(--dua-color-share-purple-tint); color: var(--dua-color-share-purple); }
.ig-library__kind--adhkar { background: var(--dua-color-primary-tint); color: var(--dua-color-secondary); }
.ig-source__text { min-height: 120px; line-height: 1.9; font-size: 16px; }
.ig-source__count { text-align: end; }
.ig-designs { border: 0; margin: 0; padding: 0; min-width: 0; }
.ig-designs legend { padding: 0; margin-bottom: 6px; }
.ig-designs__tiles { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; background: var(--dua-color-white); border: 1px solid var(--dua-input-border); border-radius: 16px; }
.ig-design { position: relative; cursor: pointer; }
.ig-design input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ig-design__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  border: 2px solid var(--border);
  background-size: cover;
  background-position: center;
}
.ig-design--rotate .ig-design__tile {
  width: auto;
  min-width: 60px;
  padding: 0 12px;
  background: var(--dua-color-share-purple-tint);
  color: var(--dua-color-share-purple);
  font-family: var(--dua-font);
  font-size: 12px;
  font-weight: 600;
}
.ig-design input:checked + .ig-design__tile { border-color: var(--primary); box-shadow: 0 0 0 3px var(--dua-color-primary-tint); }
.ig-design input:focus-visible + .ig-design__tile { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.ig-preview { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ig-preview__download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; min-width: 200px; text-decoration: none; }
.ig-preview img { width: 100%; max-width: 320px; height: auto; border-radius: 20px; border: 1px solid var(--border); }

/* Lightbox (web/static/web/lightbox.js): a feed image opened full size */
html.lightbox-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 56px 16px 24px; background: var(--dua-color-overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: lightbox-in 0.2s ease; }
.lightbox[hidden] { display: none; }
@keyframes lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.lightbox__figure { margin: 0; max-width: min(92vw, 720px); max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox__img { display: block; max-width: 100%; max-height: calc(100vh - 190px); width: auto; height: auto; border-radius: 12px; background: var(--dua-color-soft); box-shadow: 0 10px 40px var(--dua-color-overlay); animation: lightbox-pop 0.25s ease; }
@keyframes lightbox-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
.lightbox__caption { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 100%; text-align: center; color: var(--dua-color-white); }
.lightbox__text { margin: 0; font-size: 14px; line-height: 22px; max-height: 4.5em; overflow: auto; }
.lightbox__link { color: var(--dua-color-white); font-size: 14px; font-weight: 600; text-decoration: none; padding: 8px 16px; border: 1px solid color-mix(in srgb, var(--dua-color-white) 50%, transparent); border-radius: 999px; }
.lightbox__link:hover, .lightbox__link:focus-visible { background: color-mix(in srgb, var(--dua-color-white) 15%, transparent); }
.lightbox__close, .lightbox__nav { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--dua-color-white); background: color-mix(in srgb, var(--dua-color-white) 16%, transparent); cursor: pointer; transition: background 0.15s ease; }
.lightbox__close:hover, .lightbox__nav:hover, .lightbox__close:focus-visible, .lightbox__nav:focus-visible { background: color-mix(in srgb, var(--dua-color-white) 30%, transparent); outline: 2px solid var(--dua-color-white); outline-offset: 2px; }
.lightbox__close { top: 12px; inset-inline-end: 12px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { inset-inline-start: 12px; }
.lightbox__nav--next { inset-inline-end: 12px; }
[dir="rtl"] .lightbox__nav svg { transform: scaleX(-1); }
.lightbox__counter { position: absolute; top: 20px; inset-inline-start: 16px; color: var(--dua-color-white); font-size: 13px; opacity: 0.85; }
.feed-posts__item, .ig-grid__item { cursor: zoom-in; }
@media (max-width: 480px) { .lightbox__nav { top: auto; bottom: 16px; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox, .lightbox__img { animation: none; } }
/* Ana Al Muslim pages (azkar, Hisn al-Muslim, hadith, Asma Allah, radio): the same cards, chips and buttons as the dua pages. */
.num-badge { flex: none; font-family: var(--dua-font); display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 999px; background: var(--dua-color-primary-tint); color: var(--secondary); font-size: 12px; font-weight: 600; }
.chev { flex: none; color: var(--muted); }
/* The listen pill as a <button> (radio play): drop the native button chrome. */
button.dua-listen-btn { flex: none; border: 0; margin: 0; cursor: pointer; }
button.dua-listen-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
/* Text card: a dua / zekr / hadith shown like the white dua quote card (Alexandria, centred, 24px radius). */
.text-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--dua-color-white); border: 1px solid var(--dua-color-border); border-radius: 24px; text-align: center; font-family: var(--dua-font); }
.text-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.text-card__tag { padding: 4px 10px; border-radius: 999px; background: var(--dua-color-primary-tint); color: var(--secondary); font-family: var(--dua-font); font-size: 11px; line-height: 18px; font-weight: 500; }
.text-card__ref { margin: 0; font-family: var(--dua-font); font-size: 10px; line-height: 16px; color: var(--muted); }
.text-card__label { margin: 0; font-family: var(--dua-font); font-size: 12px; line-height: 19px; font-weight: 600; color: var(--primary); }
.text-card__text { margin: 0; font-family: var(--dua-font); font-weight: 500; font-size: 20px; line-height: 32px; color: var(--secondary); white-space: pre-line; }
.text-card__note { margin: 0; padding: 10px 12px; border-radius: 16px; background: var(--dua-color-soft); font-family: var(--dua-font); font-size: 12px; line-height: 19px; color: var(--muted); }
.text-card__translation { margin: 0; padding-top: 12px; border-top: 1px solid var(--border); font-family: var(--dua-font); font-size: 13px; line-height: 21px; color: var(--muted); text-align: left; }
.text-card__grades { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.text-card__actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.text-card__actions .dua-chip { min-height: 36px; }
/* Tappable card (azkar list, Hisn al-Muslim): opens the dhikr in the ring counter. */
.text-card--link { color: inherit; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.text-card--link:hover { text-decoration: none; border-color: var(--dua-color-primary-tint); background: color-mix(in srgb, var(--dua-color-soft) 35%, var(--dua-color-white)); }
.text-card--link:active { transform: scale(0.99); }
.text-card--link:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.pager { display: flex; gap: 12px; }
.pager > * { flex: 1; }
.pager--numbered { align-items: center; margin-top: 16px; }
/* Count badge inside a chip (radio tabs): brand pill on a plain chip, inverted on the selected one. */
.chip-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 2px; border-radius: 999px; background: var(--dua-chip-selected-bg); color: var(--dua-chip-selected-fg); font-size: 10px; font-weight: 600; line-height: 1; }
.dua-chip--selected .chip-badge, .dua-chip[aria-selected="true"] .chip-badge { background: var(--dua-chip-selected-fg); color: var(--dua-chip-selected-bg); }
/* Pill pager (radio): prev / next drawn as the dua "Listen" pill, centred around the page status. */
.pager--pill { justify-content: center; gap: 16px; }
.pager--pill > * { flex: none; }
.pager--pill .dua-listen-btn:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.pager--pill .dua-listen-btn.is-disabled { opacity: 0.4; pointer-events: none; }
[dir="rtl"] .pager__arrow { transform: scaleX(-1); }
.pager--numbered > .pager__status { flex: 0 0 auto; font-family: var(--dua-font); font-size: 12px; line-height: 19px; color: var(--muted); text-align: center; white-space: nowrap; }
.name-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16px 12px; text-align: center; background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: var(--dua-card-radius); }
.name-tile__name { margin: 0; font-family: 'Noto Naskh Arabic', var(--dua-font); font-size: 24px; line-height: 1.6; font-weight: 700; color: var(--secondary); }
.name-tile__translit { font-size: 12px; font-weight: 600; color: var(--muted); }
.name-tile__meaning { margin: 0; font-size: 11px; line-height: 18px; color: var(--muted); }
.media-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; background: var(--surface); border: 1px solid var(--dua-card-border); border-radius: var(--dua-card-radius); }
.media-card__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.media-card video { display: block; width: 100%; max-height: 360px; border-radius: 12px; background: black; }

/* Category filter pills (Adhkar tab, azkar list): outlined pills; scroll in one line with a faded end, or wrap. */
.filter-pills { display: flex; gap: 8px; margin: 0; padding: 2px 0 6px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain; }
.filter-pills::-webkit-scrollbar { display: none; }
.filter-pills:not(.filter-pills--wrap) { -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); padding-inline-end: 24px; }
[dir="rtl"] .filter-pills:not(.filter-pills--wrap) { -webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent); mask-image: linear-gradient(to left, black calc(100% - 32px), transparent); }
.filter-pills--wrap { flex-wrap: wrap; overflow: visible; padding-bottom: 0; }
.filter-pill { flex: none; scroll-snap-align: start; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; max-width: 100%; padding: 0 14px; border: 1px solid var(--dua-color-border); border-radius: 999px; background: var(--dua-color-white); color: var(--ink); font-family: var(--dua-font); font-size: 12px; line-height: 18px; font-weight: 500; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease; }
.filter-pill:hover { border-color: var(--secondary); color: var(--secondary); text-decoration: none; }
.filter-pill:active { transform: scale(0.97); }
.filter-pill:focus-visible { outline: 3px solid var(--secondary); outline-offset: 2px; }
.filter-pill[aria-current="page"] { background: var(--dua-chip-selected-bg); border-color: transparent; color: var(--dua-chip-selected-fg); }
.filter-pill--more { background: var(--dua-color-soft); border-color: transparent; color: var(--secondary); font-weight: 600; }
.filter-pill--more svg { flex: none; }
[dir="rtl"] .filter-pill--more svg { transform: scaleX(-1); }
@media (min-width: 400px) { .filter-pill { font-size: 13px; padding: 0 16px; } }
@media (prefers-reduced-motion: reduce) { .filter-pill { transition: none; } .filter-pill:active { transform: none; } }

/* Search (AR / SEARCH / 01-04): search field with icon, filter button, type segments, result cards, choice pills. */
.search-field { position: relative; display: flex; align-items: center; }
.search-field__icon { position: absolute; inset-inline-start: 16px; width: 20px; height: 20px; color: var(--secondary); pointer-events: none; }
.search-field__input { box-sizing: border-box; width: 100%; min-height: 56px; padding: 0 16px; padding-inline-start: 46px; background: var(--dua-color-white); border: 1px solid var(--dua-color-border); border-radius: 16px; font-family: var(--dua-font); font-size: 14px; line-height: 22px; color: var(--ink); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; }
.search-field__input::placeholder { color: var(--muted); }
.search-field__input:focus { border-color: var(--secondary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--secondary) 12%, transparent); }
.search-field__input::-webkit-search-cancel-button { cursor: pointer; }
.search-label { display: block; margin: 0 0 8px; font-size: 14px; line-height: 22px; font-weight: 600; color: var(--ink); text-align: start; }
.search-bar-row { display: flex; gap: 10px; align-items: stretch; }
.search-bar-row .search-field { flex: 1; min-width: 0; }
.search-filter-btn { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; border-radius: 16px; background: var(--dua-color-soft); color: var(--secondary); text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; }
.search-filter-btn:hover { opacity: 0.9; }
.search-filter-btn:active { transform: scale(0.96); }
.search-filter-btn.is-active::after { content: ""; position: absolute; top: 12px; inset-inline-end: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--dua-color-soft); }
.search-segments { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.search-segments .dua-search-chip { height: 44px; padding: 0 8px; font-size: 12px; font-weight: 500; }
.search-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.search-meta .dua-search-count { margin: 0; }
.search-active-filter { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px 0 12px; border-radius: 999px; background: var(--dua-color-primary-tint); color: var(--primary); font-size: 11px; font-weight: 500; text-decoration: none; }
[dir="rtl"] .search-active-filter { padding: 0 12px 0 10px; }
.search-active-filter:hover { text-decoration: none; opacity: 0.9; }
.result-card .num-badge { width: 40px; height: 40px; border-radius: 12px; }
.result-card .dua-card__title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.result-card .dua-card__description { font-size: 12px; line-height: 19px; }
.result-card--quran .num-badge { background: var(--dua-color-soft); color: var(--secondary); }
.search-card { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--dua-color-white); border: 1px solid var(--dua-color-border); border-radius: 16px; text-align: start; }
.search-card--soft { background: var(--dua-color-soft); border-color: transparent; border-radius: 24px; padding: 18px 20px; }
.search-card__title { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--secondary); }
.search-card__text { margin: 0; font-size: 13px; line-height: 21px; color: var(--muted); }
.search-card--soft .filter-pill { border-color: transparent; }
.search-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; align-self: center; min-height: 44px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--primary); text-decoration: none; }
.search-link:hover { text-decoration: underline; }
.search-empty-art { display: grid; place-items: center; width: 96px; height: 96px; margin: 8px auto 0; border-radius: 50%; background: var(--dua-color-soft); color: var(--secondary); }
.choice-group { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.choice-pill { position: relative; cursor: pointer; }
.choice-pill input { position: absolute; opacity: 0; pointer-events: none; }
.choice-pill svg { display: none; flex: none; }
.choice-pill:has(input:checked) { background: var(--dua-chip-selected-bg); border-color: transparent; color: var(--dua-chip-selected-fg); }
.choice-pill:has(input:checked) svg { display: block; }
.choice-pill:has(input:focus-visible) { outline: 3px solid var(--secondary); outline-offset: 2px; }

/* Profile-style blocks (AR / PROFILE / 01-05), used by the azkar page: soft hero card, action tiles,
   info card and footer text links, with gentle motion. */
.hero-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 143px; padding: 18px 20px; border-radius: 24px; background: var(--dua-color-soft); text-align: center; }
.hero-card__title { margin: 0; font-size: 29px; line-height: 46px; font-weight: 700; color: var(--secondary); }
.hero-card__title--long { font-size: 22px; line-height: 35px; }
.hero-card__bio { margin: 0; font-size: 12px; line-height: 19px; color: var(--muted); }
.hero-card__meta { margin: 0; font-size: 11px; line-height: 18px; color: var(--primary); }
.hero-progress { width: min(220px, 80%); height: 6px; margin-top: 8px; border-radius: 3px; background: color-mix(in srgb, var(--secondary) 12%, transparent); overflow: hidden; }
.hero-progress > span { display: block; height: 100%; width: var(--pct, 0%); border-radius: inherit; background: var(--primary); transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease; }
.hero-card.is-complete .hero-progress > span { background: var(--success); }
.action-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.action-tile { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 104px; padding: 16px; border-radius: 16px; background: var(--dua-color-soft); text-align: start; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.action-tile:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 18px var(--dua-color-shadow-soft); }
.action-tile:active { transform: scale(0.97); box-shadow: none; }
.action-tile__icon { color: var(--secondary); margin-bottom: 2px; }
.action-tile__title { margin: 0; font-size: 17px; line-height: 27px; font-weight: 600; color: var(--secondary); }
.action-tile__desc { margin: 0; font-size: 11px; line-height: 18px; color: var(--muted); }
.info-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; border-radius: 16px; background: var(--dua-color-soft); text-align: start; }
.info-card__title { margin: 0; font-size: 15px; line-height: 24px; font-weight: 600; color: var(--secondary); }
.info-card__title--success { color: var(--success); }
.info-card__text { margin: 0; font-size: 13px; line-height: 21px; color: var(--muted); }
.reveal { animation: reveal-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.footer-links { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; }
.footer-links a, .footer-links button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font-family: var(--dua-font); font-size: 12px; line-height: 18px; font-weight: 500; color: var(--secondary); text-decoration: none; }
.footer-links a:hover, .footer-links button:hover { text-decoration: underline; }
.text-card { transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.15s ease; }
.text-card.is-complete { border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 4%, var(--dua-color-white)); }
.is-bumping { animation: dua-pop 0.25s ease-out; }

/* AR / DHIKR / 05, 06, 07: Goal completion, reset confirmation, and new round screens */
.dua-goal-card__progress--info { color: var(--dua-color-information); }
.dua-goal-card__progress--secondary { color: var(--dua-color-secondary); }
.dua-btn--destructive { background: var(--dua-color-error); color: var(--dua-color-white); font-weight: 600; font-size: 14px; line-height: 22px; border-radius: 16px; transition: transform 0.15s ease, opacity 0.15s ease; }
.dua-btn--destructive:hover { background: color-mix(in srgb, var(--dua-color-error) 90%, black); }
.dua-btn--destructive:active { transform: scale(0.98); }
.dua-invocation-phrase { font-family: var(--dua-font); font-weight: 500; font-size: 15px; line-height: 24px; color: var(--dua-color-secondary); text-align: start; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .dua-btn--destructive { transition: none; }
  .reveal, .is-bumping { animation: none; }
  .text-card--link:active { transform: none; }
  .hero-progress > span, .action-tile, .text-card { transition: none; }
  .action-tile:hover, .action-tile:active { transform: none; }
}

/* Radio list active running station */
.radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
}
.radio-card.is-active {
  border-color: var(--primary) !important;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface)) !important;
}
.radio-card.is-running .num-badge {
  background: var(--primary) !important;
  color: var(--surface) !important;
}
.radio-card .radio-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Visual collection (pages/artworks.html): a section per collection, two artworks per row. */
.artwork-collection { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.artwork-tile { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); }
.artwork-tile__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 1px solid var(--dua-color-border);
  background: var(--dua-color-white);
}
.artwork-tile__title { font-family: var(--dua-font); font-weight: 500; font-size: 13px; line-height: 21px; text-align: start; }
.artwork-tile:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; border-radius: 16px; }
/* The artwork page: the text centred under the card. */
.artwork-text .dua-quote__text, .artwork-text .dua-quote__reference { text-align: center; }

/* The card's title pill and paragraph dividers (web/components/frame_card.html), drawn like the
   server image: a lavender pill with an accent border and a floret on a stem at each side; a thin
   line with a floret between paragraphs. */
.frame-card__badge {
  margin: 0 0 2.5cqw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8cqw;
  color: var(--accent, var(--dua-color-share-pink));
}
.frame-card__badge::before, .frame-card__badge::after {
  content: "";
  width: 5.2cqw;
  height: 2.2cqw;
  background:
    radial-gradient(circle at 78% 50%, currentColor 0 0.5cqw, transparent 0.55cqw),
    radial-gradient(circle at 78% 22%, currentColor 0 0.45cqw, transparent 0.5cqw),
    radial-gradient(circle at 78% 78%, currentColor 0 0.45cqw, transparent 0.5cqw),
    radial-gradient(circle at 92% 50%, currentColor 0 0.45cqw, transparent 0.5cqw),
    radial-gradient(circle at 64% 50%, currentColor 0 0.45cqw, transparent 0.5cqw),
    linear-gradient(currentColor, currentColor) 0 50% / 60% 0.2cqw no-repeat;
}
.frame-card__badge::before { transform: scaleX(-1); }
.frame-card__badge-pill {
  padding: 1cqw 5cqw;
  border: 0.25cqw solid currentColor;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 12%, var(--dua-color-white));
  font-family: "Noto Naskh Arabic", var(--dua-font);
  font-weight: 700;
  font-size: 5cqw;
  line-height: 1.5;
}
.frame-card__divider {
  display: block;
  width: 48%;
  height: 1.2em;
  margin: 0 auto;
  color: var(--accent, var(--dua-color-share-pink));
  background:
    radial-gradient(circle at 50% 50%, currentColor 0 0.12em, transparent 0.13em),
    radial-gradient(circle at 50% calc(50% - 0.17em), currentColor 0 0.1em, transparent 0.11em),
    radial-gradient(circle at 50% calc(50% + 0.17em), currentColor 0 0.1em, transparent 0.11em),
    radial-gradient(circle at calc(50% - 0.17em) 50%, currentColor 0 0.1em, transparent 0.11em),
    radial-gradient(circle at calc(50% + 0.17em) 50%, currentColor 0 0.1em, transparent 0.11em),
    linear-gradient(color-mix(in srgb, currentColor 55%, transparent), color-mix(in srgb, currentColor 55%, transparent))
      0 50% / 40% 1px no-repeat,
    linear-gradient(color-mix(in srgb, currentColor 55%, transparent), color-mix(in srgb, currentColor 55%, transparent))
      100% 50% / 40% 1px no-repeat;
}

/* Prayer log (web/pages/salah_log.html): the month calendar, its summary and the day's editor. */
.salah-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 16px; }
.salah-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 8px; border-radius: 16px; background: var(--dua-color-soft); text-align: center; }
.salah-stat__value { font-family: var(--dua-font); font-size: 22px; font-weight: 700; line-height: 1.3; color: var(--dua-color-secondary); }
.salah-stat__label { font-family: var(--dua-font); font-size: 11px; line-height: 1.5; color: var(--dua-color-muted); }
.salah-calendar .calendar-nav-bar { margin-bottom: 14px; }
.calendar-nav-btn.is-disabled { visibility: hidden; }
.salah-day { gap: 2px; }
.salah-day.is-complete { background: var(--dua-color-primary); color: var(--dua-color-white); }
.salah-day.is-complete:hover { background: var(--dua-color-primary-strong); }
.salah-day.is-partial { background: var(--dua-color-primary-tint); color: var(--dua-color-secondary); }
.salah-day.is-noted { background: var(--dua-color-soft); }
.salah-day.is-future { color: var(--dua-color-disabled); cursor: default; }
.salah-day.is-future:hover { background: none; }
.salah-day.is-selected { outline: 2px solid var(--dua-color-secondary); outline-offset: 1px; }
.salah-day.is-selected:not(.is-complete) { background: var(--dua-color-soft); color: var(--dua-color-ink); }
.salah-day__mark { display: inline-flex; line-height: 1; }
.salah-day__count { font-family: var(--dua-font); font-size: 10px; font-weight: 600; line-height: 1; color: var(--dua-color-primary); }
.salah-day:focus-visible { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.salah-legend { display: flex; justify-content: center; gap: 18px; margin-top: 14px; font-family: var(--dua-font); font-size: 11px; color: var(--dua-color-muted); }
.salah-legend span { display: inline-flex; align-items: center; gap: 6px; }
.salah-legend__dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.salah-legend__dot.is-complete { background: var(--dua-color-primary); }
.salah-legend__dot.is-partial { background: var(--dua-color-primary-tint); border: 1px solid var(--dua-color-primary); }

.salah-form { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.salah-all { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border: 1.5px dashed var(--dua-color-primary); border-radius: 16px; background: var(--dua-color-white); color: var(--dua-color-primary); font-family: var(--dua-font); font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; }
.salah-all[aria-pressed="true"] { border-style: solid; background: var(--dua-color-primary); color: var(--dua-color-white); }
.salah-prayers { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.salah-prayer { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 14px; border: 1px solid var(--dua-color-border); border-radius: 14px; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; }
.salah-prayer input { position: absolute; opacity: 0; pointer-events: none; }
.salah-prayer__box { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid var(--dua-color-border); color: transparent; transition: all 0.15s ease; }
.salah-prayer__name { font-family: var(--dua-font); font-size: 15px; font-weight: 500; color: var(--dua-color-ink); }
.salah-prayer:has(input:checked) { border-color: var(--dua-color-primary); background: var(--dua-color-primary-tint); }
.salah-prayer:has(input:checked) .salah-prayer__box { border-color: var(--dua-color-primary); background: var(--dua-color-primary); color: var(--dua-color-white); transform: scale(1.05); }
.salah-prayer:has(input:focus-visible) { outline: 2px solid var(--dua-color-secondary); outline-offset: 2px; }
.salah-missed { margin: 0; font-family: var(--dua-font); font-size: 13px; line-height: 1.6; color: var(--dua-color-muted); }
.salah-note { resize: vertical; min-height: 80px; }
.salah-actions { justify-content: stretch; }
@media (prefers-reduced-motion: reduce) {
  .salah-all, .salah-prayer, .salah-prayer__box { transition: none; }
  .salah-prayer:has(input:checked) .salah-prayer__box { transform: none; }
}

/* Repentance log (web/pages/tawbah.html, static/web/tawbah.js): reuses the prayer log's calendar and stats. */
.tawbah-section { margin: 0; font-family: var(--dua-font); font-size: 15px; font-weight: 600; line-height: 1.6; color: var(--dua-color-secondary); text-align: start; }
.tawbah-body { margin: 0; font-family: var(--dua-font); font-size: 14px; line-height: 1.7; color: var(--dua-color-ink); text-align: start; }
.tawbah-quote { margin: 0; padding: 16px; border-radius: 16px; background: var(--dua-color-soft); text-align: center; }
.tawbah-quote p { margin: 0 0 6px; font-family: "Noto Naskh Arabic", var(--dua-font); font-size: 17px; font-weight: 600; line-height: 1.9; color: var(--dua-color-secondary); }
.tawbah-quote cite { font-family: var(--dua-font); font-size: 12px; font-style: normal; color: var(--dua-color-muted); }
.tawbah-run { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 18px; border-radius: 24px; background: var(--dua-color-secondary); color: var(--dua-color-white); text-align: center; }
.tawbah-run p { margin: 0; font-family: var(--dua-font); }
.tawbah-run__name { font-size: 13px; font-weight: 500; opacity: 0.85; overflow-wrap: anywhere; }
.tawbah-run__value { font-size: 52px; font-weight: 700; line-height: 1.35; }
.tawbah-run__label { font-size: 15px; font-weight: 600; }
.tawbah-run__goal { margin-top: 8px !important; font-size: 13px; font-weight: 500; color: var(--dua-color-accent); }
.tawbah-run__since { margin-top: 4px !important; font-size: 12px; opacity: 0.75; }
.tawbah-today { display: flex; flex-direction: column; gap: 10px; }
.tawbah-today__text { margin: 0; font-family: var(--dua-font); font-size: 14px; font-weight: 500; line-height: 1.7; color: var(--dua-color-ink); text-align: center; }
.tawbah-link { align-self: center; padding: 4px; border: 0; background: none; font-family: var(--dua-font); font-size: 13px; font-weight: 600; color: var(--dua-color-primary); cursor: pointer; }
.tawbah-link[hidden] { display: none; }
.tawbah-link--danger { color: var(--danger); }
.tawbah-weak { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px; border: 1.5px solid var(--dua-color-primary); border-radius: 18px; background: var(--dua-color-white); color: var(--dua-color-primary); text-align: start; cursor: pointer; font: inherit; transition: transform 0.15s ease; }
.tawbah-weak:active { transform: scale(0.98); }
.tawbah-weak svg { flex-shrink: 0; }
.tawbah-weak__title { display: block; font-family: var(--dua-font); font-size: 15px; font-weight: 600; }
.tawbah-weak__desc { display: block; font-family: var(--dua-font); font-size: 12px; line-height: 1.6; color: var(--dua-color-muted); }
.tawbah-stats { grid-template-columns: repeat(2, 1fr); margin: 0; }
.tawbah-day { border: 0; background: none; font: inherit; cursor: pointer; }
.tawbah-day.is-before { color: var(--dua-color-muted); }
.tawbah-day.is-slip { background: var(--dua-color-soft); }
.tawbah-day__dot, .tawbah-legend--slip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--dua-color-accent); }
.salah-legend .tawbah-legend--slip { width: 10px; height: 10px; }
.tawbah-manage { display: flex; justify-content: center; gap: 28px; }
.tawbah-privacy { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 0 4px; font-family: var(--dua-font); font-size: 12px; line-height: 1.6; color: var(--dua-color-muted); text-align: start; }
.tawbah-privacy svg { flex-shrink: 0; margin-top: 2px; }
.tawbah-sheet { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 4px; }
.tawbah-steps, .tawbah-tips { margin: 0; padding-inline-start: 22px; display: grid; gap: 8px; font-family: var(--dua-font); font-size: 14px; line-height: 1.7; color: var(--dua-color-ink); }
.tawbah-steps li::marker { color: var(--dua-color-primary); font-weight: 600; }
.tawbah-tips li::marker { color: var(--dua-color-primary); }
.tawbah-weak-run { margin: 0; font-family: var(--dua-font); font-size: 14px; font-weight: 600; line-height: 1.7; color: var(--dua-color-secondary); }
.tawbah-option__radio { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--dua-color-border); flex-shrink: 0; }
.tawbah-option:has(input:checked) .tawbah-option__radio { border-color: var(--dua-color-primary); box-shadow: inset 0 0 0 5px var(--dua-color-white); background: var(--dua-color-primary); }
.tawbah-confirm { justify-content: flex-end; gap: 10px; }
.tawbah-danger { background: var(--danger); border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .tawbah-weak { transition: none; } }

/* Hisn al-Muslim chapter: each dua's counter beside its number (web/pages/hisn_detail.html). */
.hisn-count { min-height: 36px; padding: 0 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hisn-dua.is-done { border-color: var(--dua-color-primary); background: color-mix(in srgb, var(--dua-color-primary) 6%, var(--dua-color-white)); }