/*
 * deslopify.css — Nūr al-Dhikr product-wide visual refinement
 *
 * This file does not introduce a second design system. It is a final, audited
 * presentation layer over the existing token/component system. The goal is
 * restraint: one house identity, semantic emphasis, fewer competing shapes,
 * and content-proof bilingual geometry.
 */

:root {
  /* House identity: manuscript ivory + deep emerald + restrained gilt. */
  --color-bg: #f6f1e6;
  --color-surface: #fffdf8;
  --color-surface-alt: #eee8da;
  --color-surface-raised: #fffefb;
  --color-border: #ded4bc;
  --color-border-strong: #c9b992;
  --color-text: #1f2a22;
  --color-text-secondary: #536056;
  /* #6d756c measured 4.22:1 on this paper — below AA 4.5 for body text, and
     axe reported it as a serious violation on every light view that renders
     muted text. Darkened to #616961 (5.04:1 on --color-bg, 4.64:1 on the
     darkest light surface) rather than exempting it: muted ink is still ink. */
  --color-text-muted: #616961;
  --color-primary-raw: #1a5f3e;
  --color-accent-raw: #c8a24e;
  --color-gold: #a9822a;

  /* Palette choice remains functional, but every palette shares the same
     quiet paper/ink architecture.  Color is an accent, not a replacement
     for the whole product identity. */
  --color-gold-soft: #e1c97f;
  --color-primary: var(--color-primary-raw);
  --color-accent: var(--color-accent-raw);
  --color-primary-deep: #0d4229;
  --color-primary-ink: #092f1e;
  --shadow-sm: 0 1px 2px rgba(48, 37, 18, 0.045), 0 4px 14px rgba(48, 37, 18, 0.055);
  --shadow-md: 0 4px 12px rgba(48, 37, 18, 0.06), 0 18px 34px rgba(48, 37, 18, 0.08);
  --shadow-lg: 0 12px 30px rgba(23, 37, 29, 0.15), 0 24px 64px rgba(23, 37, 29, 0.12);
  --shadow-hero: 0 10px 26px rgba(23, 60, 43, 0.16), 0 22px 56px rgba(23, 60, 43, 0.12);
  --radius-control: 12px;
  --radius-card-safe: 18px;
}

/* Palette raw values are owned by js/core/config/views.js and injected by theme.js.
   Keeping palette colors in CSS as a second source of truth caused the cascade to
   disagree with Settings and hid contrast defects. */

[data-theme='dark'] {
  --color-bg: #0f1512;
  --color-surface: #171e1a;
  --color-surface-alt: #202923;
  --color-surface-raised: #202a24;
  --color-border: #35423a;
  --color-border-strong: #4b5a4f;
  --color-text: #eff4ee;
  --color-text-secondary: #c1ccc4;
  --color-text-muted: #9aa89f;
  --color-primary-raw: #4c9b72;
  --color-accent-raw: #d5b65f;
  --color-primary: var(--color-primary-raw);
  --color-accent: var(--color-accent-raw);
  --color-primary-deep: #0d4229;
  --color-primary-ink: #061b12;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.16);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.24), 0 18px 34px rgba(0, 0, 0, 0.18);
  --shadow-lg: 0 12px 30px rgba(0, 0, 0, 0.34), 0 24px 64px rgba(0, 0, 0, 0.26);
  --shadow-hero: 0 12px 28px rgba(0, 0, 0, 0.38), 0 26px 58px rgba(0, 0, 0, 0.28);
}

/* -------------------------------------------------------------------------
   Global geometry
   ------------------------------------------------------------------------- */
html,
body {
  background: var(--color-bg);
  color: var(--color-text);
}

#main {
  max-width: 1480px;
  padding-inline: clamp(16px, 2vw, 32px);
}

.view {
  gap: clamp(16px, 1.7vw, 24px);
}

/* The shell should look like one product, not seven independently styled apps. */
#topbar {
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  border-bottom-color: color-mix(in srgb, var(--color-border) 82%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.topbar__brand {
  gap: 10px;
  padding: 4px 8px;
  border-radius: var(--radius-control);
  color: var(--color-text);
}

.topbar__brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--color-primary);
  box-shadow: 0 5px 16px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

/* Desktop: the same compact topbar control collapses/expands the rail.
   The control remains the obvious, global escape hatch for a dense desktop
   menu instead of making the collapse state discoverable by accident. */
@media (min-width: 960px) {
  .topbar__menu {
    display: inline-grid !important;
    place-items: center;
    flex: 0 0 auto;
  }
  html[data-nav-collapsed='true'] .topbar__menu {
    color: var(--color-primary-text);
  }
}

/* -------------------------------------------------------------------------
   Navigation: seven real doors on mobile too
   ------------------------------------------------------------------------- */
.nav-mobile-bar {
  gap: 3px;
  padding: 6px 8px 3px;
  background: color-mix(in srgb, var(--color-surface) 88%, transparent);
  border-top-color: color-mix(in srgb, var(--color-border) 85%, transparent);
  box-shadow: 0 -10px 28px rgba(28, 38, 31, 0.06);
  backdrop-filter: blur(16px) saturate(115%);
  -webkit-backdrop-filter: blur(16px) saturate(115%);
}

.nav-mobile-bar__item {
  min-width: 0;
  min-height: 50px;
  padding: 5px 2px;
  gap: 3px;
  border-radius: 11px;
  font-size: 0.62rem;
  font-weight: 650;
  color: var(--color-text-muted);
}

.nav-mobile-bar__item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.nav-mobile-bar__item .nav__label {
  min-width: 0;
  max-width: 100%;
  text-align: center;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.nav-mobile-bar__item[aria-current='page'] {
  color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

@media (max-width: 380px) {
  .nav-mobile-bar {
    padding-inline: 4px;
  }
  .nav-mobile-bar__item {
    font-size: 0.58rem;
    padding-inline: 0;
  }
  .nav-mobile-bar__item svg {
    width: 19px;
    height: 19px;
  }
}

@media (min-width: 960px) {
  #bottomnav {
    background: var(--color-bg);
    border-inline-end-color: var(--color-border);
  }

  .nav__scroller {
    padding: 18px 12px 28px;
  }

  .nav__item {
    min-height: 48px;
    border-radius: 12px;
    font-size: 0.93rem;
  }

  .nav__item[aria-current='page'],
  .nav__item--active {
    background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
    color: var(--color-primary-text);
    border-inline-start-width: 2px;
  }
}

/* -------------------------------------------------------------------------
   View headers and segmented navigation
   ------------------------------------------------------------------------- */
.view-header {
  gap: 6px;
}

.view__title {
  font-size: clamp(1.65rem, 2.6vw, 2.2rem);
  letter-spacing: -0.028em;
}

.view__subtitle {
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.segmented {
  gap: 3px;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface-alt) 82%, var(--color-surface));
  border-color: var(--color-border);
}

.segmented__btn {
  min-height: 44px;
  border-radius: 10px;
  font-weight: 650;
}

.segmented__btn--active {
  background: var(--color-surface);
  color: var(--color-primary-text);
  box-shadow:
    0 1px 4px rgba(38, 48, 39, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

/* -------------------------------------------------------------------------
   Home: one calm landing, not a dashboard warehouse
   ------------------------------------------------------------------------- */
.view--home {
  max-width: 1160px;
  margin-inline: auto;
}

.view--home > .home-hero.home-hero--line {
  order: 0;
  display: flex;
  align-items: center;
  gap: 8px 14px;
  min-height: 70px;
  padding: 14px 18px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-primary);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view--home > .home-hero.home-hero--line .home-hero__title {
  font-size: 1.1rem;
  font-weight: 800;
}

.view--home > .home-hero.home-hero--line .home-hero__tagline {
  font-size: var(--fs-caption);
  color: var(--color-text-secondary);
}

.view--home > .home-hero.home-hero--line .home-hero__greeting {
  margin-inline-start: auto;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  letter-spacing: 0;
}

.view--home > .home-hero.home-hero--line .home-hero__hijri {
  background: color-mix(in srgb, var(--color-gold) 10%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-gold) 24%, transparent);
  /* Gold at 88% measured 3.72:1 against its own 10% gold tint — gold text on a
     gold chip, which reads as gilded and is unreadable. 70% keeps the antique
     gold identity at 4.74:1 on the tint and 5.26:1 on the plain surface. */
  color: color-mix(in srgb, var(--color-gold) 70%, var(--color-text));
}

.view--home > .home-prayer-ribbon {
  order: 3;
  width: 100%;
  max-width: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: 18px;
}

.view--home > .home-today {
  order: 4;
  width: 100%;
  padding: 8px;
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view--home > .home-today .home-today__cell {
  min-height: 48px;
  border-radius: 12px;
}

.view--home > .tasbih-entry {
  order: 5;
  width: 100%;
}

.view--home > .home-invites,
.view--home > .panel--nudge {
  order: 6;
}

.view--home > .quick-actions {
  order: 7;
}

.view--home > .onboarding-panel {
  order: 8;
}

.view--home > .home-browser,
.view--home > .panel--worship,
.view--home > .panel--resume,
.view--home > .panel--progress {
  order: 9;
}

/* A single resume destination is a continuation cue, not a dashboard card.
   Keep the heading and one row readable while removing dead vertical space. */
.view--home > .panel--resume--single {
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.view--home > .panel--resume--single .worship-row {
  min-height: 48px;
  padding: 5px var(--space-2);
}
.view--home > .panel--resume--single .worship-row__icon {
  width: 34px;
  height: 34px;
}

/* Home quick actions are an accent, not another navigation rail. */
.view--home > .quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.view--home > .quick-actions .quick-action {
  min-height: 68px;
  padding: 10px 12px;
  border-radius: 14px;
  box-shadow: none;
}

.view--home > .quick-actions .quick-action svg {
  width: 40px;
  height: 40px;
  padding: 9px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-primary-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

.view--home > .quick-actions .quick-action,
.view--home > .quick-actions .quick-action:hover {
  border-color: var(--color-border);
  color: var(--color-text);
}

.view--home > .quick-actions .quick-action:hover {
  transform: translateY(-1px);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
}

.view--home > .quick-actions .quick-action__now {
  background: var(--color-gold);
  color: #231b0a;
}

@media (max-width: 760px) {
  .view--home > .home-hero.home-hero--line {
    align-items: flex-start;
  }
  .view--home > .home-hero.home-hero--line .home-hero__greeting {
    flex-basis: 100%;
    margin-inline-start: 0;
  }
  .view--home > .quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .view--home > .home-hero.home-hero--line {
    min-height: 0;
  }

  .view--home > .home-hero.home-hero--line .home-hero__title,
  .view--home > .home-hero.home-hero--line .home-hero__tagline {
    max-width: 100%;
  }
}

/* -------------------------------------------------------------------------
   You: ten destinations need a navigation matrix, not a giant segmented
   control. Keep the existing single source of truth in nav.js, but make the
   presentation dense, calm and touchable.
   ------------------------------------------------------------------------- */
.view--you .you-mode-switch {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-surface-alt) 82%, var(--color-surface));
  border: 1px solid var(--color-border);
}

.view--you .you-mode-switch .segmented__btn {
  min-width: 0;
  min-height: 48px;
  padding: 7px 8px;
  border-radius: 11px;
  font-size: clamp(0.72rem, 0.8vw, 0.84rem);
  line-height: 1.2;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: break-word;
}

.view--you .you-mode-switch .segmented__btn--active {
  background: var(--color-surface);
  box-shadow:
    0 1px 4px rgba(38, 48, 39, 0.08),
    inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 12%, transparent);
}

@media (max-width: 900px) {
  .view--you .you-mode-switch {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .view--you .you-mode-switch {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
  }

  .view--you .you-mode-switch .segmented__btn {
    min-height: 46px;
    padding: 7px 6px;
    font-size: 0.76rem;
  }
}

@media (min-width: 1500px) {
  .view--you .you-mode-switch {
    grid-template-columns: repeat(10, minmax(0, 1fr));
  }
}

/* -------------------------------------------------------------------------
   Adhkar library: one card = one action; no detached "Read now" slabs
   ------------------------------------------------------------------------- */
.view--library {
  max-width: 1160px;
  margin-inline: auto;
}

.view--library .library-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.view--library .library-section__title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-text);
}

.view--library .library-section__title::after {
  height: 1px;
  background: var(--color-border);
}

.view--library .library-section__desc {
  max-width: 66ch;
  margin: -3px 0 2px;
}

.view--library .category-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.view--library .category-tile-wrap {
  min-width: 0;
}

.view--library .category-tile-wrap .category-tile {
  min-height: 138px;
  padding: 18px;
  border-radius: 16px;
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}

.view--library .category-tile-wrap .category-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: var(--shadow-md);
}

/* Semantic color, not rainbow. Category identity remains in the icon glyph. */
.view--library .category-tile__icon,
.view--library .category-tile__icon[class*='category-tile__icon--'] {
  --tile-cat: var(--color-primary);
  --tile-cat-text: var(--color-primary-text);
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface));
  color: var(--color-primary-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

.view--library .category-tile__name {
  font-size: 0.96rem;
  line-height: 1.35;
}

.view--library .category-tile__count {
  color: var(--color-text-muted);
}

/* The tile is already a link. The old second button was duplicate chrome. */
.view--library .browser-tile__read {
  display: none;
}

.view--library .category-tile::after {
  content: '→';
  align-self: flex-end;
  margin-top: auto;
  color: var(--color-primary-text);
  font-size: 1rem;
  color: color-mix(in srgb, var(--color-primary-text) 72%, var(--color-surface));
}

[dir='rtl'] .view--library .category-tile::after {
  content: '←';
}

@media (max-width: 1050px) {
  .view--library .category-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .view--library .category-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view--library .category-tile-wrap .category-tile {
    min-height: 128px;
  }
}

@media (max-width: 420px) {
  .view--library .category-grid {
    gap: 8px;
  }
  .view--library .category-tile-wrap .category-tile {
    min-height: 122px;
    padding: 14px;
  }
}

/* -------------------------------------------------------------------------
   Settings: quiet hierarchy; options remain powerful without looking like
   an admin console.
   ------------------------------------------------------------------------- */
.view--settings,
.view--about {
  max-width: 960px;
  margin-inline: auto;
}

.view--settings .panel,
.view--settings .settings-acc {
  border-radius: 16px;
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.view--settings .settings-acc__summary {
  min-height: 60px;
  padding: 12px 16px;
}

.view--settings .settings-acc__title {
  font-weight: 760;
}

.view--settings .settings-acc__subheading {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 16px 6px;
}
.view--settings .settings-acc__subheading-title {
  min-width: 0;
  font-weight: 700;
}
.view--settings .settings-acc__subheading-hint {
  min-width: 0;
  color: var(--color-text-muted);
}

.view--settings .settings-acc__hint {
  color: var(--color-text-muted);
}

.view--settings .settings-group {
  background: color-mix(in srgb, var(--color-surface-alt) 38%, var(--color-surface));
  border-radius: 12px;
}

.view--settings .toggle-row,
.view--settings .reciter-row,
.view--settings .home-panel-row {
  border-radius: 11px;
}

.view--settings .toggle-row:hover,
.view--settings .reciter-row:hover,
.view--settings .home-panel-row:hover {
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}

/* -------------------------------------------------------------------------
   Generic cards: consistent silhouette outside reading surfaces
   ------------------------------------------------------------------------- */
.view:not(.view--mushaf) .panel,
.view:not(.view--mushaf) .card {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.view:not(.view--mushaf) .panel__header h2,
.view:not(.view--mushaf) .panel__title {
  letter-spacing: -0.018em;
}

/* Liquid glass is for floating chrome, not every card. */
.nav-drawer,
[role='dialog'] {
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

/* Do not apply glass to content cards; preserve readable paper/ink. */
.view:not(.view--mushaf) .panel,
.view:not(.view--mushaf) .card,
.view:not(.view--mushaf) .category-tile,
.view:not(.view--mushaf) .quick-action {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme='dark'][data-palette='emerald'] {
  --color-primary-raw: #55a77c;
  --color-accent-raw: #d5b65f;
}
[data-theme='dark'][data-palette='sapphire'] {
  --color-primary-raw: #78aef2;
  --color-accent-raw: #a9c9f6;
}
[data-theme='dark'][data-palette='royal'] {
  --color-primary-raw: #c0a6ef;
  --color-accent-raw: #d7c6f5;
}
[data-theme='dark'][data-palette='amber'] {
  --color-primary-raw: #f0b85d;
  --color-accent-raw: #f4cf7b;
}
[data-theme='dark'][data-palette='slate'] {
  --color-primary-raw: #aab6c4;
  --color-accent-raw: #d0d8e1;
}
[data-theme='dark'][data-palette='rose'] {
  --color-primary-raw: #ee8cab;
  --color-accent-raw: #f2b1c4;
}
[data-theme='dark'][data-palette='forest'] {
  --color-primary-raw: #73c28e;
  --color-accent-raw: #a4d7b2;
}
[data-theme='dark'][data-palette='ocean'] {
  --color-primary-raw: #70b5db;
  --color-accent-raw: #a6d2e9;
}
[data-theme='dark'][data-palette='midnight'] {
  --color-primary-raw: #9eabbc;
  --color-accent-raw: #c3ccd7;
}
[data-theme='dark'][data-palette='ivory'] {
  --color-primary-raw: #c1b9af;
  --color-accent-raw: #ddd3c8;
}
[data-theme='dark'][data-palette='amoled'] {
  --color-primary-raw: #55a77c;
  --color-accent-raw: #d5b65f;
}

/* -------------------------------------------------------------------------
   RTL/LTR guardrails
   ------------------------------------------------------------------------- */
html[dir='rtl'] .view--home .home-hero__greeting {
  letter-spacing: 0;
}

:where(.view, .panel, .card, .settings-acc, .category-tile, .quick-action) {
  min-width: 0;
}

:where(.view, .panel, .card, .settings-acc, .category-tile, .quick-action)
  :where(h1, h2, h3, p, span, a) {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* Do not break identifiers, verse numbers, or code-like content. */
:where(.tabular, [dir='ltr'], .mushaf-page, .mushaf-ayah-number) {
  overflow-wrap: normal;
  word-break: normal;
}

@media (prefers-reduced-motion: reduce) {
  .view--library .category-tile-wrap .category-tile,
  .view--home > .quick-actions .quick-action {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
   First-use calm: empty progress is an invitation, not a scoreboard.
   ------------------------------------------------------------------------- */
.view--home .panel--progress-empty {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 78px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}

.panel--progress-empty__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}

.panel--progress-empty__text h2 {
  margin: 0;
}

.panel--progress-empty__text p {
  margin: 3px 0 0;
  max-width: 62ch;
}

@media (max-width: 560px) {
  .view--home .panel--progress-empty {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .view--home .panel--progress-empty .link-btn {
    grid-column: 2;
    justify-self: start;
  }
}

/* -------------------------------------------------------------------------
   Navigation polish: active state is an indicator, not a giant sticker.
   ------------------------------------------------------------------------- */
.nav-mobile-bar__item {
  position: relative;
  background: transparent;
}

.nav-mobile-bar__item[aria-current='page'],
.nav-mobile-bar__item--active {
  background: transparent;
}

.nav-mobile-bar__item[aria-current='page']::after,
.nav-mobile-bar__item--active::after {
  content: '';
  position: absolute;
  inset-inline: 50%;
  bottom: 1px;
  width: 24px;
  height: 3px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--color-primary);
}

[dir='rtl'] .nav-mobile-bar__item[aria-current='page']::after,
[dir='rtl'] .nav-mobile-bar__item--active::after {
  transform: translateX(50%);
}

/* -------------------------------------------------------------------------
   Settings polish: the group is a shelf; the accordion is the control.
   Avoid nested-card noise and keep the hierarchy obvious in both scripts.
   ------------------------------------------------------------------------- */
.view--settings .settings-group {
  gap: 10px;
  margin-block: 4px 20px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--color-border) 76%, transparent);
  background: color-mix(in srgb, var(--color-surface-alt) 32%, var(--color-bg));
  border-radius: 20px;
}

.view--settings .settings-group__title {
  margin: 12px 14px 0;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

[dir='rtl'] .view--settings .settings-group__title {
  letter-spacing: 0;
  text-transform: none;
}

.view--settings .settings-group__hint {
  margin: 0 14px 2px;
  max-width: 70ch;
}

.view--settings .settings-acc {
  margin: 0;
  background: var(--color-surface);
  box-shadow: none;
  border-radius: 15px;
}

.view--settings .settings-setup-disclosure {
  margin: 0;
  background: var(--color-surface);
  box-shadow: none;
  border-radius: 15px;
}

.view--settings .settings-setup-disclosure__body {
  padding: 4px 16px 16px;
}

.view--settings .settings-setup-disclosure[open] {
  box-shadow: var(--shadow-sm);
}

.view--settings .settings-setup-disclosure .settings-acc__summary {
  min-height: 60px;
  padding: 12px 16px;
  border-radius: 15px;
}

.view--settings .settings-setup-disclosure[open] .settings-acc__summary {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.view--settings .settings-acc + .settings-acc {
  margin-top: 2px;
}

.view--settings .settings-acc[open] {
  box-shadow: var(--shadow-sm);
}

.view--settings .settings-acc__summary {
  border-radius: 15px;
}

.view--settings .settings-acc[open] .settings-acc__summary {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.view--settings .swatch-row,
.view--settings .shape-row {
  gap: 8px;
}

.view--settings .swatch {
  border-color: var(--color-border);
  background: var(--sw-color, var(--color-primary));
  border-radius: 12px;
}

.view--settings .shape-btn {
  border-color: var(--color-border);
  background: var(--color-surface);
  border-radius: 12px;
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.view--settings .swatch:hover,
.view--settings .shape-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}

.view--settings .typeface-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.view--settings .typeface-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  min-height: 88px;
  padding: 10px 12px;
  text-align: start;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
}

.view--settings .typeface-option__preview {
  font-size: 1.35rem;
  line-height: 1.45;
}

.view--settings .typeface-option__name {
  font-weight: 700;
}

.view--settings .typeface-option__sub {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  line-height: 1.4;
}

.view--settings .typeface-option--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

@media (max-width: 520px) {
  .view--settings .typeface-picker {
    grid-template-columns: 1fr;
  }
}

.view--settings .swatch--active,
.view--settings .shape-btn--active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 15%, transparent);
}

/* -------------------------------------------------------------------------
   Pass 3: sibling views share the same editorial skeleton.
   Home is the benchmark; these routes should look related without becoming
   clones of one another. Reading surfaces remain intentionally special.
   ------------------------------------------------------------------------- */
.view--quran,
.view--hadith,
.view--prayer,
.view--statistics,
.view--tasbih,
.view--journal,
.view--focus {
  max-width: 1160px;
  margin-inline: auto;
}

.view--quran .quran-topbar,
.view--hadith .view-header,
.view--prayer .view-header,
.view--statistics .view-header,
.view--tasbih .view-header {
  margin-bottom: 2px;
}

.view--quran .quran-topbar,
.view--hadith .view-header,
.view--prayer .view-header {
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
}

.view--quran .quran-topbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.view--quran .quran-mode-switch,
.view--hadith .hadith-controls {
  margin-block: 4px 6px;
}
.quran-study-door {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
  gap: 18px;
  align-items: center;
  margin-block: 14px 16px;
  padding-block: 14px;
  border-block: 1px solid var(--color-border);
}
.quran-study-door__copy {
  min-width: 0;
}
.quran-study-door__kicker {
  margin: 0 0 3px;
  font-size: var(--fs-md);
  font-weight: 760;
}
.quran-study-door__subtitle {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.55;
}
.quran-study-door__links {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.quran-study-door__link {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: transparent;
  color: var(--color-text);
  font-size: var(--fs-caption);
  font-weight: 680;
  text-decoration: none;
  text-align: center;
}
.quran-study-door__link:hover {
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, transparent);
}

/* Qur'an landing: quiet index, stronger distinction for the surah number. */
.view--quran .surah-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.view--quran .surah-tile {
  min-height: 92px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view--quran .surah-tile:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.view--quran .surah-tile__num {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.view--quran .surah-tile__text {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.view--quran .surah-tile__name-ar {
  font-size: 1.05rem;
  font-weight: 760;
}

.view--quran .surah-tile__name-en,
.view--quran .surah-tile__meta {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.view--quran .surah-tile__play {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: transparent;
  border-color: var(--color-border);
}

@media (max-width: 1040px) {
  .view--quran .surah-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .quran-study-door {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .quran-study-door__links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view--quran .surah-grid {
    grid-template-columns: 1fr;
  }

  .view--quran .quran-topbar__actions {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Hadith landing: books are library entries, not generic coloured cards. */
.view--hadith .search-bar {
  max-width: 720px;
  margin-block: 10px 14px;
}

.view--hadith .hadith-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.view--hadith .hadith-tile {
  min-height: 154px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view--hadith .hadith-tile:hover {
  border-color: color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.view--hadith .hadith-tile__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary-text);
}

.view--hadith .hadith-tile__name {
  font-size: 1rem;
  font-weight: 760;
}

.view--hadith .hadith-tile__count,
.view--hadith .hadith-tile__author,
.view--hadith .hadith-tile__blurb {
  color: var(--color-text-muted);
}

.view--hadith .hadith-tile__badge {
  margin-top: auto;
  width: fit-content;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
  color: var(--color-primary-text);
}

.view--hadith .hadith-hit {
  border: 1px solid var(--color-border);
  border-radius: 16px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: 14px;
}

@media (max-width: 1000px) {
  .view--hadith .hadith-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .view--hadith .hadith-grid {
    grid-template-columns: 1fr;
  }
}

/* Prayer: one focal moment, one timetable, secondary tools below. */
.view--prayer .next-prayer-card {
  min-height: 166px;
  margin-bottom: 12px;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 9%, var(--color-surface)),
    var(--color-surface)
  );
  box-shadow: var(--shadow-md);
}

.view--prayer .next-prayer-card__name {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 820;
}

.view--prayer .next-prayer-card__countdown {
  color: var(--color-primary-text);
  font-variant-numeric: tabular-nums;
}

.view--prayer .panel--times,
.view--prayer .panel--prayer-log,
.view--prayer .panel--prayer-tools {
  overflow: hidden;
}

.view--prayer .prayer-list {
  display: grid;
  gap: 0;
}

.view--prayer .prayer-row {
  min-height: 58px;
  padding: 8px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 62%, transparent);
}

.view--prayer .prayer-row:last-child {
  border-bottom: 0;
}

.view--prayer .prayer-row--active {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-surface));
}

.view--prayer .prayer-row__name {
  font-weight: 700;
}

.view--prayer .prayer-row__time {
  min-width: 5.5ch;
  font-weight: 760;
  font-variant-numeric: tabular-nums;
}

.view--prayer .quick-actions--compact {
  gap: 9px;
}

.view--prayer .quick-actions--compact .quick-action {
  min-height: 64px;
  border-radius: 14px;
  border-color: var(--color-border);
  background: var(--color-surface);
  box-shadow: none;
}

/* Statistics: remove the dashboard-y “wall of numbers”. */
.view--statistics .stat-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.view--statistics .stat-card {
  min-height: 94px;
  padding: 15px;
  border: 1px solid var(--color-border);
  border-radius: 15px;
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view--statistics .stat-card__value {
  color: var(--color-primary-text);
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  font-weight: 820;
  font-variant-numeric: tabular-nums;
}

.view--statistics .stat-card__label {
  color: var(--color-text-muted);
  line-height: 1.35;
}

.view--statistics .ranked-row {
  min-height: 52px;
  border-bottom-color: color-mix(in srgb, var(--color-border) 62%, transparent);
}

@media (max-width: 760px) {
  .view--statistics .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v5.17.114 — Offline keeps the primary download task visible; granular storage controls are one secondary layer. */
.view--offline .offline-management-disclosure {
  margin-block: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-safe);
  background: var(--color-surface);
  overflow: clip;
}

.view--offline .offline-management-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--touch-target);
  padding: 12px 15px;
  cursor: pointer;
  list-style: none;
}

.view--offline .offline-management-disclosure__summary::-webkit-details-marker {
  display: none;
}

.view--offline .offline-management-disclosure__summary::after {
  content: '⌄';
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 160ms ease;
}

.view--offline .offline-management-disclosure[open] .offline-management-disclosure__summary::after {
  transform: rotate(180deg);
}

.view--offline .offline-management-disclosure__title {
  font-weight: 780;
}

.view--offline .offline-management-disclosure__meta {
  color: var(--color-text-muted);
  font-size: 0.84rem;
  text-align: end;
}

.view--offline .offline-management-disclosure__body {
  padding: 0 12px 12px;
}

/* v5.17.135 — Essentials is the primary Offline decision, not a buried switch. */
.view--offline > .offline-essentials--primary {
  margin-block: 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
  border-inline-start: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}
.view--offline > .offline-essentials--primary .panel__header {
  margin-block-end: 2px;
}

.view--offline .offline-management-disclosure__body > .panel {
  margin: 12px 0 0;
}

@media (max-width: 520px) {
  .view--offline .offline-management-disclosure__summary {
    align-items: flex-start;
  }
  .view--offline .offline-management-disclosure__meta {
    max-width: 48%;
  }
}

/* v5.17.113 — Settings must actually release the base one-line reciter constraint. */
.view--settings .reciter-row {
  min-inline-size: 0;
}

.view--settings .reciter-row__name {
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* v5.17.112 — Checklist keeps today visible; history is useful reference, not a second task. */
.view--checklist .checklist-history-details {
  margin-block: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-safe);
  background: var(--color-surface);
  overflow: clip;
}

.view--checklist .checklist-history-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 52px;
  padding: 13px 15px;
  cursor: pointer;
  list-style: none;
  font-weight: 760;
}

.view--checklist .checklist-history-details__summary::-webkit-details-marker {
  display: none;
}

.view--checklist .checklist-history-details__summary::after {
  content: '⌄';
  color: var(--color-text-muted);
  transition: transform 160ms ease;
}

.view--checklist .checklist-history-details[open] .checklist-history-details__summary::after {
  transform: rotate(180deg);
}

.view--checklist .checklist-history-details__meta {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  font-weight: 600;
}

.view--checklist .checklist-history-details__body {
  padding: 0 12px 12px;
}

/* v5.17.111 — Statistics has one quiet overview; the deeper analytics are an opt-in study layer. */
.view--statistics .statistics-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.view--statistics .statistics-overview--secondary {
  margin-block-end: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.view--statistics .statistics-details {
  margin-block-start: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card-safe);
  background: var(--color-surface);
  overflow: clip;
}

.view--statistics .statistics-details__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 58px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.view--statistics .statistics-details__summary::-webkit-details-marker {
  display: none;
}

.view--statistics .statistics-details__summary::after {
  content: '⌄';
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 1rem;
  transition: transform 160ms ease;
}

.view--statistics .statistics-details[open] > .statistics-details__summary::after {
  transform: rotate(180deg);
}

.view--statistics .statistics-details__title {
  font-weight: 780;
}

.view--statistics .statistics-details__meta {
  color: var(--color-text-muted);
  font-size: 0.86rem;
  text-align: end;
}

.view--statistics .statistics-details__body {
  padding: 0 12px 12px;
}

@media (max-width: 760px) {
  .view--statistics .statistics-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view--statistics .statistics-overview--secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .view--statistics .statistics-details__summary {
    align-items: flex-start;
    padding-inline: 13px;
  }
  .view--statistics .statistics-details__meta {
    max-width: 45%;
  }
}

/* Tasbih: the action gets the visual center; settings stay secondary. */
.view--tasbih {
  max-width: 980px;
}

.view--tasbih .tasbih-stage {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: clamp(10px, 2vw, 22px) 0;
}

.view--tasbih .tasbih-dial {
  filter: drop-shadow(0 16px 36px color-mix(in srgb, var(--color-primary) 16%, transparent));
}

.view--tasbih .tasbih-stage__arabic {
  max-width: 42ch;
  font-size: clamp(1.1rem, 2.4vw, 1.55rem);
  line-height: 1.8;
  color: var(--color-primary-text);
}

.view--tasbih .tasbih-controls {
  width: min(100%, 760px);
}

.view--tasbih .tasbih-lifetime,
.view--tasbih .panel--tasbih-custom {
  border-color: var(--color-border);
  box-shadow: var(--shadow-sm);
  background: var(--color-surface);
}

@media (max-width: 560px) {
  .view--statistics .stat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .view--prayer .next-prayer-card {
    padding: 16px;
  }
}

/* -------------------------------------------------------------------------
   Pass 4: remove the last traces of “component demo” styling.
   The product should feel composed, not upholstered. Content remains
   prominent; controls are quiet until they are actionable.
   ------------------------------------------------------------------------- */
:root {
  --shadow-sm: 0 1px 2px rgb(24 32 27 / 0.035), 0 5px 16px rgb(24 32 27 / 0.045);
  --shadow-md: 0 5px 16px rgb(24 32 27 / 0.06), 0 14px 30px rgb(24 32 27 / 0.055);
  --radius-card-safe: 16px;
}

[data-theme='dark'] {
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.22), 0 7px 18px rgb(0 0 0 / 0.16);
  --shadow-md: 0 6px 18px rgb(0 0 0 / 0.25), 0 18px 34px rgb(0 0 0 / 0.18);
}

/* Controls are deliberately flatter than cards. A filled button should look
   like an action, not like a miniature floating object. */
.btn--primary {
  background: var(--color-primary);
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-primary) 88%, black);
}

.btn--primary:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-primary) 92%, black);
  box-shadow: none;
  transform: translateY(-1px);
}

.btn--secondary {
  box-shadow: none;
}

.btn--secondary:hover:not(:disabled) {
  box-shadow: none;
}

/* A card is a content container, not a collection of nested floating boxes. */
.view:not(.view--mushaf) .panel,
.view:not(.view--mushaf) .card,
.view:not(.view--mushaf) .category-tile,
.view:not(.view--mushaf) .hadith-tile,
.view:not(.view--mushaf) .surah-tile,
.view:not(.view--mushaf) .stat-card {
  border-radius: var(--radius-card-safe);
}

/* Keep section headings visibly above their containers without adding another
   framed “header card”. */
.view:not(.view--mushaf) .panel__header {
  min-height: 44px;
  padding-bottom: 8px;
}

.view:not(.view--mushaf) .panel__header h2,
.view:not(.view--mushaf) .panel__title {
  font-size: 1rem;
  font-weight: 780;
}

/* Stronger editorial width: long text should look like reading, not like a
   spreadsheet stretched to the edges of a 1440px monitor. */
.view:not(.view--mushaf) .panel__subtext,
.view:not(.view--mushaf) .view__subtitle {
  max-width: 72ch;
}

/* Home and landing pages breathe at the same cadence. */
.view--home,
.view--library,
.view--quran,
.view--hadith,
.view--prayer,
.view--statistics,
.view--tasbih,
.view--settings {
  row-gap: clamp(14px, 1.5vw, 22px);
}

/* Mobile chrome: seven doors, but none of them should become microscopic. */
.nav-mobile-bar__item {
  font-size: 0.68rem;
  font-weight: 650;
}

.nav-mobile-bar__item .nav__label {
  line-height: 1.12;
  letter-spacing: -0.01em;
}

@media (max-width: 380px) {
  .nav-mobile-bar__item {
    font-size: 0.64rem;
  }
}

/* Secondary navigation is a navigation matrix, not a line of pills. */
.view--you .you-mode-switch {
  border-radius: 14px;
  box-shadow: none;
}

.view--you .you-mode-switch .segmented__btn {
  border: 1px solid transparent;
  box-shadow: none;
}

.view--you .you-mode-switch .segmented__btn--active {
  border-color: color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
}

/* Dense utility areas should not become giant empty rectangles on desktop. */
.view--statistics .ranked-list,
.view--prayer .prayer-list,
.view--tasbih .tasbih-controls {
  max-width: 820px;
}

/* Tasbih supporting controls are intentionally quieter than the counter. */
.view--tasbih .tasbih-controls .btn,
.view--tasbih .tasbih-controls .chip,
.view--tasbih .target-stepper {
  box-shadow: none;
}

.view--tasbih .panel--tasbih-custom {
  max-width: 820px;
  margin-inline: auto;
}

/* Reading-adjacent surfaces inherit the same editorial heading treatment. */
.view--quran .quran-topbar__actions .btn,
.view--hadith .view-header .btn,
.view--prayer .view-header .btn,
.view--statistics .view-header .btn,
.view--tasbih .view-header .btn {
  box-shadow: none;
}

/* Small screens: reduce ornamental padding before reducing readable type. */
@media (max-width: 600px) {
  #main {
    padding-inline: 12px;
  }

  .view-header {
    padding-inline: 2px;
  }

  .view:not(.view--mushaf) .panel,
  .view:not(.view--mushaf) .card {
    border-radius: 14px;
  }

  .view--home > .quick-actions {
    gap: 8px;
  }
}

/* -------------------------------------------------------------------------
   Pass 5: remove legacy decorative drift from shared browse surfaces.
   The Azkar reference works because color identifies the product, not every
   individual tile. Semantic icons remain; rainbow card chrome does not.
   ------------------------------------------------------------------------- */
.view:not(.view--mushaf) .category-tile__icon[class*='category-tile__icon--'] {
  --tile-cat: var(--color-primary);
  --tile-cat-text: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary-text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-primary) 13%, transparent);
}

.view:not(.view--mushaf) .mood-tile {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.view:not(.view--mushaf) .collection-tile,
.view:not(.view--mushaf) .mood-tile,
.view:not(.view--mushaf) .surah-tile,
.view:not(.view--mushaf) .hadith-tile {
  border-radius: var(--radius-card-safe);
  border-color: var(--color-border);
}

.view:not(.view--mushaf) .mood-tile:hover,
.view:not(.view--mushaf) .collection-tile:hover,
.view:not(.view--mushaf) .surah-tile:hover,
.view:not(.view--mushaf) .hadith-tile:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.view--home > .home-hero.home-hero--line {
  min-height: 86px;
  padding: 16px 20px;
  border-inline-start-width: 4px;
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

.view--home > .home-hero.home-hero--line .home-hero__title {
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.2;
}

.view--home > .home-hero.home-hero--line .home-hero__tagline {
  margin-top: 3px;
  max-width: 46ch;
  line-height: 1.45;
}

.view--home > .home-hero.home-hero--line .home-hero__greeting {
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.view--home > .home-hero.home-hero--line .home-hero__profile {
  margin-inline-start: 0;
}

.view--home > .home-prayer-ribbon,
.view--home > .home-today,
.view--home > .quick-actions,
.view--home > .panel--progress,
.view--home > .panel--worship,
.view--home > .panel--resume {
  border-color: color-mix(in srgb, var(--color-border) 92%, transparent);
}

.view--library .library-section__title,
.view--quran .view-header,
.view--hadith .view-header,
.view--prayer .view-header,
.view--statistics .view-header,
.view--tasbih .view-header {
  letter-spacing: -0.015em;
}

@media (max-width: 600px) {
  .view--home > .home-hero.home-hero--line {
    padding: 15px;
  }
}

/* -------------------------------------------------------------------------
   Pass 6: editorial hierarchy + grouped personal navigation.
   Remove the last remaining launcher/card-demo feeling from Home and You.
   ------------------------------------------------------------------------- */

.view--home > .home-hero.home-hero--line {
  min-height: 0;
  padding: 6px 2px 2px;
  border: 0;
  border-inline-start: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  align-items: baseline;
  gap: 8px 18px;
}

.view--home > .home-hero.home-hero--line .home-hero__title {
  font-size: clamp(1.55rem, 3vw, 2.05rem);
  line-height: 1.1;
  letter-spacing: -0.035em;
}

.view--home > .home-hero.home-hero--line .home-hero__tagline {
  margin-top: 4px;
  max-width: 42ch;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.view--home > .home-today {
  box-shadow: none;
  background: transparent;
  border-radius: 0;
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  padding-inline: 0;
}

.view--prayer .next-prayer-card {
  min-height: 152px;
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  border-inline-start: 4px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}

.view--you .you-subnav {
  display: grid;
  gap: 14px;
}

.view--you .you-subnav__group {
  min-width: 0;
}

.view--you .you-subnav__group-title {
  margin: 0 0 7px;
  padding-inline: 2px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[dir='rtl'] .view--you .you-subnav__group-title {
  letter-spacing: 0;
  text-transform: none;
}

.view--you .you-subnav__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.view--you .you-subnav__item {
  position: relative;
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 13px;
  background: var(--color-surface);
  color: var(--color-text);
  box-shadow: none;
  transition:
    border-color 150ms ease,
    background 150ms ease,
    transform 150ms ease;
}

.view--you .you-subnav__item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  background: var(--color-surface-raised);
}

.view--you .you-subnav__item--active {
  border-color: color-mix(in srgb, var(--color-primary) 26%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  color: var(--color-primary-text);
}

.view--you .you-subnav__item--active::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--color-primary);
}

[dir='rtl'] .view--you .you-subnav__item--active::before {
  border-radius: 3px 0 0 3px;
}

.view--you .you-subnav__item-label {
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

@media (max-width: 920px) {
  .view--you .you-subnav__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .view--you .you-subnav__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .view--you .you-subnav__item {
    min-height: 46px;
    padding: 9px 10px;
  }

  .view--home > .home-hero.home-hero--line {
    padding: 4px 0 1px;
    gap: 6px 12px;
  }

  .view--home > .home-hero.home-hero--line .home-hero__title {
    font-size: clamp(1.45rem, 8vw, 1.8rem);
  }
}

/* -------------------------------------------------------------------------
   Pass 6b: readable mobile labels without arbitrary word splitting.
   Seven doors have a deliberately small footprint; labels may wrap only at
   natural word boundaries. One-word labels must remain words, never shards.
   ------------------------------------------------------------------------- */
.nav-mobile-bar__item .nav__label {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 380px) {
  .nav-mobile-bar__item .nav__label {
    font-size: 0.62rem;
    letter-spacing: -0.018em;
  }
}

/* Do not let the seven-door bar become seven translucent pills. The active
   item gets a small semantic edge; the dock itself remains one surface. */
.nav-mobile-bar__item {
  box-shadow: none;
}
.nav-mobile-bar__item[aria-current='page'] {
  position: relative;
  background: transparent;
  box-shadow: none;
  color: var(--color-primary-text);
}
.nav-mobile-bar__item[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 22%;
  inset-block-end: 2px;
  height: 2px;
  border-radius: 999px;
  background: var(--color-primary);
}

/* You's grouped links are allowed to wrap at word boundaries, never inside a
   word or between joined-script clusters. This matters especially in Arabic
   at the two-column phone breakpoint. */
.view--you .you-subnav__item-label {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* -------------------------------------------------------------------------
   Pass 7 — feature interiors: stop treating deep features as utility pages.
   The home shell is intentionally quiet; focus, listening and Tajweed need
   their own interaction rhythm rather than inheriting dashboard chrome.
   ------------------------------------------------------------------------- */

/* Focus / adhkar reading mode ------------------------------------------------ */
.focus__top {
  padding-inline: clamp(16px, 3vw, 30px);
  padding-block: 14px 10px;
  max-width: 980px;
  inline-size: 100%;
  margin-inline: auto;
}
.focus__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.focus__category {
  min-width: 0;
  max-width: 32ch;
  overflow-wrap: anywhere;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text-secondary);
}
.focus__position {
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--color-text-muted);
  font-weight: 600;
}
.focus__progress {
  inline-size: min(980px, calc(100% - 32px));
  block-size: 3px;
  margin: 0 auto;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
  overflow: hidden;
}
.focus__progress-fill {
  --focus-pct: 0%;
  display: block;
  inline-size: var(--focus-pct, 0%);
  block-size: 100%;
  border-radius: inherit;
  background: var(--color-primary);
  transition: inline-size 220ms var(--ease-standard);
}
.focus__scroll {
  padding-inline: clamp(18px, 5vw, 56px);
  padding-block: clamp(24px, 7vh, 64px) 18px;
}
.focus__content {
  max-width: min(760px, 100%);
  gap: clamp(18px, 3.5vh, 30px);
}
.focus__arabic {
  max-width: 30ch;
  font-size: clamp(2.15rem, 5.7vw, 3.35rem);
  line-height: 2.08;
}
.focus__translation {
  max-width: 54ch;
  font-size: var(--fs-md);
  line-height: 1.8;
}
.focus__reference,
.focus__reference-note,
.focus__attribution {
  max-width: 54ch;
}
.focus__hint,
.focus__lifetime {
  margin: 0;
}
.focus__bar {
  inline-size: min(620px, calc(100% - 32px));
  margin: 0 auto calc(10px + env(safe-area-inset-bottom, 0));
  padding: 8px 10px;
  border-radius: 18px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-surface) 96%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(12px) saturate(120%);
  -webkit-backdrop-filter: blur(12px) saturate(120%);
}
.focus__counter {
  inline-size: 64px;
  block-size: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 0;
  color: var(--color-on-primary, #fff);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.focus__counter-num {
  color: inherit;
  font-size: 1.18rem;
}
.focus__counter-den {
  color: color-mix(in srgb, var(--color-on-primary, #fff) 78%, transparent);
}
.focus__ring-track {
  stroke: color-mix(in srgb, var(--color-on-primary, #fff) 22%, transparent);
}
.focus__ring-fill {
  stroke: var(--color-on-primary, #fff);
}
.focus__top-actions .icon-btn {
  width: 40px;
  height: 40px;
}
@media (max-width: 560px) {
  .focus__identity {
    gap: 7px;
  }
  .focus__category {
    max-width: 22ch;
    font-size: var(--fs-caption);
  }
  .focus__top-actions {
    gap: 2px;
  }
  .focus__scroll {
    padding-block-start: 20px;
  }
  .focus__arabic {
    font-size: clamp(1.9rem, 8vw, 2.55rem);
    max-width: 24ch;
  }
  .focus__bar {
    inline-size: calc(100% - 20px);
    border-radius: 16px;
  }
}

/* Adhkar library / browse ---------------------------------------------------- */
.view--library .category-grid {
  gap: 14px;
}
.view--library .category-tile-wrap .category-tile {
  min-height: 116px;
  padding: 15px 16px;
  border-radius: 14px;
  box-shadow: none;
}
.view--library .category-tile__icon,
.view--library .category-tile__icon[class*='category-tile__icon--'] {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.view--library .category-tile__name {
  font-size: var(--fs-sm);
}
.view--library .category-tile::after {
  font-size: 0.9rem;
  opacity: 0.55;
}
.view--library .mood-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.view--library .mood-tile {
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: none;
}
.view--library .mood-tile__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 9px;
}

/* Qur'an listening / player -------------------------------------------------- */
#playerbar {
  pointer-events: none;
}
#playerbar .player-bar {
  pointer-events: auto;
}
.player-bar {
  padding: 10px 12px;
  gap: 8px;
  border-radius: 18px;
  border-color: color-mix(in srgb, var(--color-border) 82%, transparent);
  background: color-mix(in srgb, var(--color-surface) 95%, transparent);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(16px) saturate(120%);
  -webkit-backdrop-filter: blur(16px) saturate(120%);
}
.player-bar__head {
  min-height: 44px;
  gap: 7px;
}
.player-bar__meta {
  min-width: 150px;
}
.player-bar__mode-note {
  display: none;
}
.player-bar__secondary {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex-wrap: wrap;
  margin-inline-start: auto;
}
.player-bar__secondary .player-bar__chip {
  min-height: 34px;
}
.player-bar__track {
  gap: 8px;
}
.player-bar__volume {
  display: none;
}
@media (max-width: 700px) {
  #playerbar {
    inset-inline: 8px;
  }
  .player-bar {
    border-radius: 16px;
  }
  .player-bar__meta {
    min-width: 0;
  }
  .player-bar__secondary {
    flex-wrap: nowrap;
    max-inline-size: 42vw;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .player-bar__secondary::-webkit-scrollbar {
    display: none;
  }
  .player-bar__track .player-bar__chip {
    display: none;
  }
}

/* Tajweed course ------------------------------------------------------------- */
.view--tajweed-course {
  max-width: 980px;
}
.taj-course__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 340px);
  gap: 18px;
  align-items: end;
  margin-block-end: 14px;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--color-border);
}
.taj-course__head h1 {
  margin: 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
}
.taj-course__overall {
  padding: 10px 0 0;
}
.taj-course__overall::before {
  content: '';
  display: block;
  block-size: 4px;
  margin-block-end: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 9%, transparent);
}
.taj-course__overall span {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  text-align: end;
}
.taj-course__continue {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  padding: 14px 16px;
  margin-block: 18px 24px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, var(--color-border));
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
}
.taj-course__continue-label,
.taj-course__continue-title {
  grid-column: 1;
  margin: 0;
}
.taj-course__continue-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.taj-course__continue-title {
  font-size: var(--fs-md);
  font-weight: 700;
}
.taj-course__continue .btn {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.taj-course__stage {
  margin-block-end: 26px;
}
.taj-course__stage-head {
  gap: 8px;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--color-border);
}
.taj-course__stage-order {
  font-size: var(--fs-caption);
  font-weight: 700;
  color: var(--color-primary-text);
}
.taj-course__stage-count {
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
}
.taj-course__sessions {
  gap: 6px;
}
.taj-course__session {
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--color-surface);
}
.taj-course__session--next {
  border-color: color-mix(in srgb, var(--color-primary) 42%, var(--color-border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 6%, transparent);
}
.taj-course__session-head {
  min-width: 0;
}
.taj-course__session-title {
  font-weight: 700;
}
.taj-course__rule-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
}
.taj-course__rule-btn {
  min-width: 0;
}
.taj-course__learn {
  align-self: center;
  flex: 0 0 auto;
}
.practice-lesson__source {
  margin: 8px 0 0;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.taj-course__badge {
  background: transparent;
  border: 1px solid var(--color-border);
}
.taj-course__actions {
  margin-block-start: 8px;
}
.taj-course__search {
  margin-block-end: 18px;
}
.tajweed-practice__option {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--color-surface);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}
.tajweed-practice__option:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--color-primary) 38%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
@media (max-width: 720px) {
  .taj-course__head {
    grid-template-columns: 1fr;
  }
  .taj-course__overall span {
    text-align: start;
  }
  .taj-course__continue {
    grid-template-columns: 1fr;
  }
  .taj-course__continue .btn {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
  }
}

/* -------------------------------------------------------------------------
   Pass 9: feature interiors should feel like purpose-built tools.
   The shell is quiet; deep features get a clear primary gesture and flatter
   secondary chrome. This is intentionally additive so the underlying product
   controls and state remain untouched.
   ------------------------------------------------------------------------- */

/* Prayer: calculation settings are progressively disclosed so the active
   method is understandable without turning the sheet into a wall of controls. */
.view--prayer .prayer-calc-panel__details {
  margin-block-start: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.view--prayer .prayer-calc-panel__details > summary {
  cursor: pointer;
  padding: 11px 13px;
  font-size: var(--fs-sm);
  font-weight: 750;
  color: var(--color-text);
}
.view--prayer .prayer-calc-panel__details[open] > summary {
  border-bottom: 1px solid var(--color-border);
}
.view--prayer .prayer-calc-panel__details-body {
  padding: 10px 13px 13px;
}
.view--prayer .prayer-calc-panel__summary {
  margin-block: 8px 0;
}
.view--prayer .prayer-calc-panel__footer-note {
  margin-block-start: 12px;
}

/* Prayer: the timetable is the working surface. Tools are a secondary index,
   not a second dashboard made from six equal cards. */
.view--prayer .panel--prayer-tools .quick-actions--compact {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--color-border);
}
.view--prayer .panel--prayer-tools .quick-action {
  min-height: 54px;
  justify-content: flex-start;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  border-inline-end: 1px solid var(--color-border);
  border-radius: 0;
  padding: 10px 12px;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-secondary);
}
.view--prayer .panel--prayer-tools .quick-action:hover {
  transform: none;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-primary-text);
}
.view--prayer .panel--prayer-tools .quick-action:nth-child(3n) {
  border-inline-end: 0;
}
@media (max-width: 700px) {
  .view--prayer .panel--prayer-tools .quick-actions--compact {
    grid-template-columns: 1fr 1fr;
  }
  .view--prayer .panel--prayer-tools .quick-action:nth-child(3n) {
    border-inline-end: 1px solid var(--color-border);
  }
  .view--prayer .panel--prayer-tools .quick-action:nth-child(2n) {
    border-inline-end: 0;
  }
}

/* Hadith: a library tile should identify the book in one glance. Metadata is
   quiet, while the title and source remain the visual anchors. */
.view--hadith .hadith-tile {
  min-height: 138px;
  padding: 15px 16px;
  gap: 8px;
  box-shadow: none;
}
.view--hadith .hadith-tile__head {
  margin-block-end: 1px;
}
.view--hadith .hadith-tile__blurb {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.45;
}
.view--hadith .hadith-tile__author,
.view--hadith .hadith-tile__count {
  font-size: var(--fs-caption);
}
.view--hadith .hadith-tile__name {
  line-height: 1.3;
}

/* Statistics: the first metric is the result of the practice, not another
   square in a KPI wall. Give it a little more breathing room and turn the
   remaining metrics into a compact supporting band. */
.view--statistics .stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.view--statistics .stat-grid .stat-card:first-child {
  grid-column: span 2;
  min-height: 114px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
}
.view--statistics .stat-grid .stat-card:first-child .stat-card__value {
  font-size: clamp(1.8rem, 3vw, 2.45rem);
}
@media (max-width: 860px) {
  .view--statistics .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .view--statistics .stat-grid .stat-card:first-child {
    grid-column: 1 / -1;
  }
}

/* Tasbih: the counter is a practice surface, not a framed widget inside a
   framed page. Strip the second shell away so the hand gesture dominates. */
.view--tasbih .tasbih-stage {
  padding: clamp(18px, 4vh, 34px) 0 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.view--tasbih .tasbih-dial {
  --tasbih-dial-size: clamp(210px, 28vw, 250px);
}
.view--tasbih .tasbih-stage__cycles {
  background: transparent;
  border: 0;
  padding-inline: 0;
  letter-spacing: 0.04em;
}
.view--tasbih .tasbih-controls {
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.view--tasbih .chip-row--scroll {
  scrollbar-width: none;
}
.view--tasbih .chip-row--scroll::-webkit-scrollbar {
  display: none;
}

/* Audio manager: technical download controls remain powerful but visually
   become an index, not a wall of bordered squares. */
.view--audio {
  max-width: 1120px;
}
.view--audio .reciter-list {
  gap: 2px;
}
.view--audio .reciter-row {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 68%, transparent);
  border-radius: 0;
  background: transparent;
  padding-inline: 8px;
}
.view--audio .reciter-row:last-child {
  border-bottom: 0;
}
.view--audio .reciter-row--active {
  box-shadow: none;
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
}
.view--audio .reciter-row__name {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
}
.view--audio .reciter-row__name .chip {
  white-space: normal;
  max-inline-size: 100%;
  display: inline-block;
}

/* v5.17.126 — the reciter picker is a modal, not .view--audio. Long
   whole-surah badges must wrap there too or the selected file mode becomes
   unreachable on narrow phones. */
.reciter-pick .reciter-row__main {
  min-inline-size: 0;
}
.reciter-pick .reciter-row__name,
.onboarding-panel .reciter-row__name {
  min-inline-size: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.reciter-pick .reciter-row__name .chip,
.onboarding-panel .reciter-row__name .chip {
  display: inline-block;
  max-inline-size: 100%;
  white-space: normal;
  vertical-align: middle;
}
.view--audio .panel--dl {
  box-shadow: none;
  border-color: var(--color-border);
}
.view--audio .dl-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
}
.view--audio .dl-cell {
  min-height: 54px;
  padding: 4px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}
.view--audio .dl-cell--done {
  background: color-mix(in srgb, var(--color-success-bg) 76%, var(--color-surface));
}
@media (max-width: 900px) {
  .view--audio .dl-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .view--audio .dl-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* File player: volume is a real control, but no longer creates a third
   horizontal slab below the transport. */
#playerbar {
  pointer-events: none;
}
#playerbar .player-bar {
  pointer-events: auto;
}
.player-bar__volume {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-inline-size: 104px;
  color: var(--color-text-muted);
}
.player-bar__volume .player-bar__seek {
  inline-size: 86px;
  margin: 0;
}
@media (max-width: 700px) {
  .player-bar__volume {
    min-inline-size: 88px;
  }
  .player-bar__volume .player-bar__seek {
    inline-size: 70px;
  }
}

/* Tajweed: the curriculum is a sequence. Use a quiet rail rather than a
   stack of boxed cards so “next” is visually obvious without feeling loud. */
.view--tajweed-course .taj-course__sessions {
  border-inline-start: 1px solid color-mix(in srgb, var(--color-border) 78%, transparent);
  padding-inline-start: 10px;
}
.view--tajweed-course .taj-course__session {
  border-inline: 0;
  border-block: 1px solid color-mix(in srgb, var(--color-border) 58%, transparent);
  border-radius: 0;
  background: transparent;
  padding: 11px 8px;
}
.view--tajweed-course .taj-course__session:first-child {
  border-block-start: 0;
}
.view--tajweed-course .taj-course__session:last-child {
  border-block-end: 0;
}
.view--tajweed-course .taj-course__session--next {
  margin-inline-start: -11px;
  padding-inline-start: 17px;
  border-inline-start: 2px solid var(--color-primary);
  box-shadow: none;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  border-radius: 0 10px 10px 0;
}
[dir='rtl'] .view--tajweed-course .taj-course__session--next {
  border-radius: 10px 0 0 10px;
}

/* -------------------------------------------------------------------------
   Pass 10: study surfaces — word study, tafsir, roots, journal and quiz.
   These are learning tools, not dashboards. Prefer a reading hierarchy over
   nested cards and make the selected source/answer obvious without noise.
   ------------------------------------------------------------------------- */

/* Tafsir: source switching is a rail; the active edition is signalled by an
   underline and colour, not another heavy filled pill. */
.tafsir-tabs {
  gap: 2px;
  border-block-end: 1px solid var(--color-border);
  padding-block-end: 0;
  scrollbar-width: none;
}
.tafsir-tabs::-webkit-scrollbar {
  display: none;
}
.tafsir-tab {
  position: relative;
  min-height: 42px;
  padding-inline: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-text-muted);
  box-shadow: none;
}
.tafsir-tab:hover {
  border: 0;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  color: var(--color-text);
}
.tafsir-tab--active {
  border: 0;
  background: transparent;
  color: var(--color-primary-text);
}
.tafsir-tab--active::before {
  content: '';
  position: absolute;
  inset-inline: 8px;
  inset-block-end: -1px;
  block-size: 2px;
  border-radius: 999px;
  background: var(--color-primary);
}
.tafsir-tab__category {
  background: transparent;
  border: 0;
  color: var(--color-text-muted);
}
.tafsir-panel__context {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--color-border);
}
.tafsir-panel__kicker,
.tafsir-panel__ayah-ref,
.tafsir-panel__source-name,
.tafsir-panel__source-author {
  margin: 0;
}
.tafsir-panel__kicker {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.tafsir-panel__ayah-ref {
  margin-block-start: 3px;
  font-weight: 750;
}
.tafsir-panel__source-meta {
  display: flex;
  align-items: end;
  gap: 10px;
  min-width: 0;
  text-align: end;
}
.tafsir-panel__source-meta-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.tafsir-panel__source-name {
  font-weight: 750;
  overflow-wrap: anywhere;
}
.tafsir-panel__source-author {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
.tafsir-panel__source-kind {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.76rem;
  border-inline-start: 1px solid var(--color-border);
  padding-inline-start: 10px;
}
@media (max-width: 620px) {
  .tafsir-panel__context {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .tafsir-panel__source-meta {
    width: 100%;
    text-align: start;
    align-items: flex-start;
  }
  .tafsir-panel__source-kind {
    margin-inline-start: auto;
    border-inline-start: 0;
    border-inline-end: 0;
    padding-inline-start: 0;
  }
}
.tafsir-panel {
  gap: 12px;
  max-width: 78ch;
  margin-inline: auto;
}
.tafsir-panel__author {
  padding-block-start: 2px;
  font-weight: 700;
}
.tafsir-panel__body {
  font-size: clamp(1rem, 1.4vw, 1.08rem);
  line-height: 2;
}
.tafsir-panel__body[lang='en'] {
  line-height: 1.8;
}
.tafsir-compare {
  padding-block-start: 12px;
}

/* Word study: the word is the hero; dictionaries and provenance read like a
   compact editorial column underneath it. */
.word-study__hero {
  padding: 18px 0 14px;
  border: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.word-study__hero .word-study__arabic {
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.8;
}
.word-study__context {
  max-width: 70ch;
  margin-inline: auto;
  padding-block-start: 10px;
}
.word-study__word-actions {
  justify-content: center;
  border-block: 0;
  padding-block: 0;
}
.word-study__block {
  padding-block: 14px;
}
.word-study__root {
  border-radius: 12px;
  border-inline-start: 3px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.word-study__sources {
  border-top: 1px solid var(--color-border);
}

/* Roots: an index of linguistic entries should scan like an index, not a
   collection of floating product cards. */
.roots-grid,
.root-grid,
.roots-list {
  gap: 8px;
}
.root-tile {
  min-height: 76px;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: none;
  background: var(--color-surface);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    background-color var(--dur-fast) var(--ease-standard);
}
.root-tile:hover {
  transform: none;
  box-shadow: none;
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.root-tile__name {
  font-size: var(--fs-lg);
}

/* Journal: one writing surface followed by a quiet chronological archive. */
.view--journal .panel--prompt {
  border-color: color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.view--journal .journal-entry {
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding-inline: 0;
}
.view--journal .journal-entry + .journal-entry {
  border-block-start: 0;
}
.view--journal .journal-entry__prompt {
  color: var(--color-text-secondary);
}

/* Quiz: answers should feel tappable, not like four equal panels. */
.quiz-choice {
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: none;
  justify-content: flex-start;
  text-align: start;
  padding-inline: 14px;
}
.quiz-choice:hover:not(:disabled) {
  transform: none;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.quiz-feedback,
.quiz-result {
  border-radius: 14px;
  box-shadow: none;
}

/* Hostile review fix: Pass 10 found that Prayer's new light hero inherited
   the legacy dark-hero text tokens. Reset every child explicitly so the focal
   surface stays readable in both themes. */
.view--prayer .next-prayer-card {
  color: var(--color-text);
}
.view--prayer .next-prayer-card__label {
  color: var(--color-text-muted);
}
.view--prayer .next-prayer-card__name {
  color: var(--color-text);
}
.view--prayer .next-prayer-card__countdown {
  color: var(--color-primary-text);
  background: transparent;
  border: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.view--prayer .next-prayer-card__method,
.view--prayer .next-prayer-card__place {
  color: var(--color-text-muted);
}

/* -------------------------------------------------------------------------
   Pass 11 — utility + secondary feature interiors.
   These are complete features, not miniature dashboards. Give each one a
   single focal task, then let supporting information read as rails/lists.
   ------------------------------------------------------------------------- */

/* Azkar utility surfaces: favorites, collections, category and mood should
   feel like one library family rather than four bespoke page templates. */
.view--favorites,
.view--collections,
.view--collection,
.view--category,
.view--mood,
.view--mood-picker,
.view--search {
  max-width: 1040px;
  margin-inline: auto;
}

.view--favorites .segmented,
.view--favorites .search-bar,
.view--collection .search-bar,
.view--search .search-bar {
  border-radius: 14px;
}

.view--favorites .segmented {
  border-block-end: 1px solid var(--color-border);
  padding-block-end: 4px;
  background: transparent;
}
.view--favorites .segmented__btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--color-text-muted);
  min-height: 42px;
}
.view--favorites .segmented__btn--active {
  color: var(--color-primary-text);
  box-shadow: inset 0 -2px 0 var(--color-primary);
}

.view--favorites .favorite-row,
.view--collection .collection-row {
  border-block-start: 1px solid var(--color-border);
  padding-block: 6px 12px;
}
.view--favorites .favorite-row:first-child,
.view--collection .collection-row:first-child {
  border-block-start: 0;
}
.view--favorites .favorite-row__move,
.view--collection .collection-row__order {
  margin-block: 0;
  padding-block-end: 5px;
  justify-content: flex-start;
}
.view--favorites .favorite-row__move .btn,
.view--collection .collection-row__order .icon-btn {
  box-shadow: none;
}

.view--collections .collection-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
}
.view--collections .collection-tile {
  min-height: 94px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 11px;
  padding: 13px 14px;
  border-radius: 14px;
  box-shadow: none;
}
.view--collections .collection-tile__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
.view--collections .collection-tile__count {
  grid-column: 2;
}
.view--collections > .panel {
  margin-block-start: 14px;
  box-shadow: none;
  border-inline: 0;
  border-radius: 0;
  padding-inline: 0;
}

.view--search .search-suggest,
.view--search .search-history {
  margin-block: 14px 4px;
  padding-block: 4px 12px;
  border-block-end: 1px solid var(--color-border);
}
.view--search .search-suggest .panel__header,
.view--search .search-history .panel__header {
  padding-inline: 0;
}
.view--search .quran-search-panel,
.view--search .roots-search-panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-inline: 0;
}
.view--search .quran-hit {
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-inline: 0;
}
.view--search .quran-hit:first-child {
  border-block-start: 0;
}
.view--search .search-results-count,
.view--search .search-hadith-link {
  display: inline-block;
  margin-inline-end: 10px;
}

/* Khatma: progress first, planning second. Avoid making the daily reading
   habit look like an admin form. */
.mushaf-track .mushaf-khatma {
  gap: 14px;
}
.mushaf-track .mushaf-khatma__bits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.mushaf-track .mushaf-khatma__bit {
  border: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
  padding: 8px 10px;
}
.mushaf-track .mushaf-khatma__actions {
  padding-block-start: 4px;
}
.khatma-plan {
  gap: 12px;
}
.khatma-plan__presets {
  align-items: center;
  padding-block-end: 8px;
  border-block-end: 1px solid var(--color-border);
}

/* Qibla: the compass is the feature. Facts become a read-only information
   rail below it, not five little dashboard cards. */
.view--qibla .qibla-compass {
  max-width: 640px;
  margin-inline: auto;
  padding: 24px 20px 18px;
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.view--qibla .qibla-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.view--qibla .qibla-fact {
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-inline-end: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.view--qibla .qibla-fact:last-child {
  border-inline-end: 0;
}
.view--qibla .qibla-fact__label {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
}
.view--qibla .qibla-details {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}
.view--qibla .qibla-details > summary {
  cursor: pointer;
  font-weight: 600;
}
.view--qibla .qibla-details__body {
  display: grid;
  gap: 10px;
  padding-block: 12px 2px;
}
.view--qibla .qibla-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
}
.view--qibla .qibla-detail-row strong {
  font-weight: 600;
}
.view--qibla .qibla-calibrate {
  box-shadow: none;
  border-inline: 0;
  border-radius: 0;
  padding-inline: 0;
}

.view--tasbih .tasbih-options {
  margin-block-start: var(--space-4);
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
}
.view--tasbih .tasbih-options > summary {
  cursor: pointer;
  font-weight: 600;
}
.view--tasbih .tasbih-options__body {
  display: grid;
  gap: 14px;
  padding-block: 14px 2px;
}
.view--tasbih .tasbih-options__custom {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 14px;
}
.view--tasbih .tasbih-options__custom h2 {
  margin-block: 0 10px;
  font-size: 0.95rem;
}
@media (max-width: 700px) {
  .view--qibla .qibla-facts {
    grid-template-columns: 1fr 1fr;
  }
}

/* Calendar: today's date is a small hero; the month grid is the object and
   events/fasting are supporting timelines. */
.calendar-secondary-disclosure {
  margin-block-start: var(--space-5);
  border-block: 1px solid var(--color-border);
}
.calendar-secondary-disclosure__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--touch-target);
  padding: 12px 2px;
  cursor: pointer;
  list-style: none;
}
.calendar-secondary-disclosure__summary::-webkit-details-marker {
  display: none;
}
.calendar-secondary-disclosure__summary::after {
  content: '⌄';
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform var(--dur-base) var(--ease-standard);
}
.calendar-secondary-disclosure[open] .calendar-secondary-disclosure__summary::after {
  transform: rotate(180deg);
}
.calendar-secondary-disclosure__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-weight: 750;
}
.calendar-secondary-disclosure__meta {
  min-width: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  text-align: end;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar-secondary-disclosure__body {
  display: grid;
  gap: var(--space-4);
  padding-block: 0 14px;
}
.calendar-secondary-disclosure__body > .panel {
  margin: 0;
}
@media (max-width: 640px) {
  .calendar-secondary-disclosure__summary {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .calendar-secondary-disclosure__meta {
    flex: 1 1 100%;
    text-align: start;
  }
}
.view--calendar .hijri-today {
  padding-block: 4px 12px;
  border-block-end: 1px solid var(--color-border);
}
.view--calendar > .panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--calendar .event-list {
  border-block-start: 1px solid var(--color-border);
}
.view--calendar .event-row {
  min-height: 46px;
  padding-block: 7px;
  border-block-end: 1px solid var(--color-border);
}
.view--calendar .event-row:last-child {
  border-block-end: 0;
}
.view--calendar .cal-cell {
  border-radius: 9px;
}

/* Garden: preserve the bespoke illustration, but make the timeline the
   quiet progression beneath it instead of another row of cards. */
.view--garden .garden-hero {
  padding: 20px;
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  box-shadow: none;
}
.view--garden .garden-timeline-panel,
.view--garden .garden-harvest {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--garden .garden-timeline {
  gap: 0;
}
.view--garden .garden-timeline__node {
  position: relative;
  padding-block: 5px;
}
.view--garden .garden-timeline__node + .garden-timeline__node::before {
  content: '';
  position: absolute;
  inset-inline-start: -50%;
  top: 22px;
  width: 100%;
  border-top: 1px solid var(--color-border);
}
.view--garden .garden-timeline__icon {
  position: relative;
  z-index: var(--z-raised);
}

/* Offline: operational status should look like a system list, not a stack of
   marketing cards. */
.view--offline > .panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--offline .offline-row {
  padding-block: 11px;
}
.view--offline .offline-row:hover {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}

/* Zakat: calculator inputs are one working surface; the result is the only
   visually promoted block. */
.view--zakat > .panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--zakat .zakat-result {
  border-inline-start: 3px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
  padding-inline: 16px;
}
.view--zakat .zakat-result--due {
  border-inline-start-color: var(--color-success);
}
.view--zakat .zakat-due {
  padding-block: 4px 2px;
}
.view--zakat .zakat-history-row {
  min-height: 48px;
  padding-block: 8px;
  border-block-end: 1px solid var(--color-border);
}

/* Zakat: the annual calculator is the working surface. Fitr and saved
   assessments are useful secondary tools, but should not compete with the
   live result on first view. */
.view--zakat .zakat-secondary-disclosure {
  margin-block-start: var(--space-5);
  border-block: 1px solid var(--color-border);
}
.view--zakat .zakat-secondary-disclosure__summary {
  min-height: var(--touch-target);
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.view--zakat .zakat-secondary-disclosure__summary::-webkit-details-marker {
  display: none;
}
.view--zakat .zakat-secondary-disclosure__summary::after {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform 160ms ease;
}
.view--zakat .zakat-secondary-disclosure[open] > .zakat-secondary-disclosure__summary::after {
  transform: rotate(225deg);
}
.view--zakat .zakat-secondary-disclosure__title {
  font-weight: 650;
  color: var(--color-text);
}
.view--zakat .zakat-secondary-disclosure__meta {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  text-align: end;
}
.view--zakat .zakat-secondary-disclosure__body {
  padding-block: 0 14px;
}
.view--zakat .zakat-secondary-disclosure__body > .panel {
  margin: 0;
}
@media (max-width: 640px) {
  .view--zakat .zakat-secondary-disclosure__summary {
    flex-wrap: wrap;
  }
  .view--zakat .zakat-secondary-disclosure__meta {
    inline-size: 100%;
    margin-inline-start: 0;
    text-align: start;
  }
}

/* Mutashabihat: one question stage and a flat answer ladder. */
.view--mutashabihat .panel--drill {
  max-width: 900px;
  margin-inline: auto;
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--mutashabihat .drill__options {
  display: grid;
  gap: 8px;
}
.view--mutashabihat .drill__option {
  justify-content: flex-start;
  min-height: 52px;
  border-radius: 12px;
  box-shadow: none;
  background: var(--color-surface);
}
.view--mutashabihat .drill__pair {
  border-block: 1px solid var(--color-border);
  padding-block: 12px;
}
.view--mutashabihat .drill__pair-item {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Editor / backup utilities: settings-work surfaces should be legible and
   dense without looking like an admin template. */
.view--editor > .panel,
.view--editor .editor-category {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.view--editor .editor-category + .editor-category {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 12px;
}
.view--editor .editor-item-row {
  border-block: 1px solid var(--color-border);
}
.view--editor .editor-item-row:first-child {
  border-block-start: 0;
}

/* Ramadan remains intentionally special, but its supporting sections should
   not become a wall of equally loud boxes around the hero. */
.view--ramadan > .panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--ramadan .panel--fast-tracker,
.view--ramadan .panel--ramadan-planner,
.view--ramadan .panel--ramadan-khatm {
  border-block: 1px solid var(--color-border);
}
.view--ramadan .fast-dot {
  border-radius: 10px;
}

/* Ramadan: keep the live month state prominent; planner/alerts are secondary
   controls and should not arrive as an equal-weight wall of cards. */
.view--ramadan .ramadan-secondary-disclosure {
  border-block: 1px solid var(--color-border);
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}
.view--ramadan .ramadan-secondary-disclosure__summary {
  min-height: var(--touch-target);
  padding: 12px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}
.view--ramadan .ramadan-secondary-disclosure__summary::-webkit-details-marker {
  display: none;
}
.view--ramadan .ramadan-secondary-disclosure__summary::after {
  content: '';
  inline-size: 8px;
  block-size: 8px;
  border-inline-end: 1.5px solid currentColor;
  border-block-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform 160ms ease;
}
.view--ramadan .ramadan-secondary-disclosure[open] > .ramadan-secondary-disclosure__summary::after {
  transform: rotate(225deg);
}
.view--ramadan .ramadan-secondary-disclosure__title {
  font-weight: 650;
  color: var(--color-text);
}
.view--ramadan .ramadan-secondary-disclosure__meta {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  text-align: end;
}
.view--ramadan .ramadan-secondary-disclosure__body {
  padding-block: 0 14px;
}
.view--ramadan .ramadan-secondary-disclosure__body > :first-child {
  margin-block-start: 0;
}
.view--ramadan .ramadan-explore {
  display: grid;
  gap: 8px;
  padding-block: 14px 2px;
}
.view--ramadan .ramadan-explore__label {
  color: var(--color-text-muted);
  font-size: 0.84rem;
}
@media (max-width: 640px) {
  .view--ramadan .ramadan-secondary-disclosure__summary {
    flex-wrap: wrap;
  }
  .view--ramadan .ramadan-secondary-disclosure__meta {
    inline-size: 100%;
    margin-inline-start: 0;
    text-align: start;
  }
}

/* Kids is allowed a different, warmer visual language; it should still be
   one coherent activity surface rather than generic adult cards in disguise. */
.view--kids .panel--kids-heard,
.view--kids .panel--kids-quiz {
  border: 0;
  border-radius: 20px;
  box-shadow: none;
  background: color-mix(in srgb, var(--mushaf-gold) 7%, var(--color-surface));
}
.view--kids .kids-grid {
  gap: 10px;
}
.view--kids .kids-tile {
  min-height: 132px;
  border-width: 1px;
  border-radius: 18px;
  box-shadow: none;
}

/* Ambient mode is a sanctuary, not a dashboard. Remove generic view chrome
   wherever the feature itself provides the focus. */
.view--ambient {
  max-width: 1120px;
}
.view--ambient .ambient__transport {
  box-shadow: none;
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

/* -------------------------------------------------------------------------
   Pass 12 — practice, learning trays, checklists, onboarding and Qur'an
   secondary navigation. Specialized reading objects stay specialized; only
   the surrounding interaction chrome is de-boxed.
   ------------------------------------------------------------------------- */

/* Tajweed practice: one drill stage, flat rule ladder, quiet statistics. */
.tajweed-practice .practice-stats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid var(--color-border);
  gap: 0;
  background: transparent;
}
.tajweed-practice .practice-stats__item {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 0;
  background: transparent;
  border-inline-end: 1px solid var(--color-border);
}
.tajweed-practice .practice-stats__item:last-child {
  border-inline-end: 0;
}
.tajweed-practice .practice-rule-list {
  gap: 0;
  border-block-start: 1px solid var(--color-border);
}
.tajweed-practice .practice-rule-row {
  gap: 6px;
  padding-block: 4px;
  border-block-end: 1px solid var(--color-border);
}
.tajweed-practice .practice-rule {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding-inline: 4px;
  box-shadow: none;
}
.tajweed-practice .practice-rule:hover {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.tajweed-practice .practice-lesson__example {
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.tajweed-practice .practice-ayah {
  padding-block: 12px 18px;
  font-size: clamp(1.9rem, 4.5vw, 2.8rem);
}
.tajweed-practice .practice-result,
.tajweed-practice .practice-summary {
  border-block-start: 1px solid var(--color-border);
  padding-block-start: 16px;
}

/* Checklist: the habit is the list. Summary/history are quiet evidence. */
.view--checklist .panel,
.view--checklist .panel--checklist-summary {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
}
.view--checklist .checklist-calm {
  border-radius: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface));
}
.view--checklist .checklist-row {
  padding-inline: 2px;
  border-radius: 0;
}
.view--checklist .checklist-row:hover {
  background: color-mix(in srgb, var(--color-primary) 3%, var(--color-surface));
}
.view--checklist .checklist-history {
  padding-block: 8px 2px;
}

/* Inline Qur'an study tray: the ayah remains primary; the tray is an
   editorial expansion, not a nested card inside another card. */
.mushaf-tray__study .study-tray__word-detail {
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  padding-inline: 0;
  background: transparent;
}
.mushaf-tray__study .study-tray__translation--compare {
  border-inline-start-width: 2px;
}
.mushaf-tray__study .study-tray__words {
  padding-block: 2px;
}

/* Onboarding: a guide, not another dashboard widget. */
.view--home > .onboarding-panel {
  border-inline: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding-inline: 0;
}
.panel--onboarding--line {
  border-block: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}
.onboarding-line__icon {
  box-shadow: none;
}

/* Mushaf secondary navigation: the manuscript stays untouched; jump/bookmark
   lists read like navigation indices. */
.mushaf-jump__surah,
.mushaf-jump__juz,
.mushaf-jump__hizb-row,
.mushaf-bookmark-row {
  box-shadow: none;
}
.mushaf-jump__surah,
.mushaf-jump__juz {
  border-radius: 10px;
}
.mushaf-bookmark-row {
  border-radius: 0;
  border-inline: 0;
  border-block: 1px solid var(--color-border);
  background: transparent;
}
.mushaf-bookmark-row:first-child {
  border-block-start: 0;
}

/* Recitation console: transport remains a control surface, but secondary
   metadata does not need another panel around it. */
.mushaf-fs-console .rec-console-note,
.reader-immersive-console .rec-console-note {
  color: var(--color-text-muted);
}
.mushaf-fs-console .rec-console-more,
.reader-immersive-console .rec-console-more {
  box-shadow: none;
}

/* Settings should feel like a control centre, not a sub-navigation page
   wearing the same cards as content views. The grouped You links become a
   compact index here; the actual controls below own the visual weight. */
.view--settings .settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
  gap: 20px 28px;
  align-items: end;
  padding-block: 2px 10px;
  border-block-end: 1px solid var(--color-border);
}

.view--settings .settings-hero .view__title {
  margin: 0;
}

.view--settings .settings-hero .view__subtitle {
  max-width: 58ch;
  margin-block: 4px 0;
}

.view--settings .settings-hero__search {
  margin: 0;
}

@media (max-width: 600px) {
  .view--settings .settings-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: start;
  }

  .view--settings .settings-hero .view__title {
    min-inline-size: 0;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
  }
}

.view--settings .reciter-row__name {
  min-inline-size: 0;
  inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

.view--settings .reciter-row__meta {
  display: inline;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal;
}

/* v5.17.126 — Home order is explicit, never left to flex auto-order.
   Identity/orientation must precede Today, then Start, then the next task. */
.view--home > .home-hero.home-hero--line {
  order: 0;
}
.view--home > .home-core {
  order: 1;
}
.view--home > .home-secondary {
  order: 2;
}

/* Home task order: the daily action comes first; supporting/reflection content
   remains below the core reading surface. Sacred text is content, not chrome. */
.view--home > .home-core {
  gap: clamp(16px, 2.2vw, 24px);
}

.view--home > .home-core .home-section--today {
  order: 1;
}

.view--home > .home-core .home-section--actions {
  order: 2;
}

@media (max-width: 600px) {
  .view--home > .home-core {
    gap: 14px;
  }
}

/* v5.17.84 — Home should feel like a quiet welcome, not a generic card.
   The useful content begins immediately; the brand line is context, not a
   dashboard tile. */
.view--home > .home-hero.home-hero--line {
  min-block-size: 52px;
  padding: 6px 0 8px;
  border: 0;
  border-inline-start: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.view--home > .home-hero.home-hero--line .home-hero__title {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.view--home > .home-hero.home-hero--line .home-hero__tagline {
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

.view--home > .home-hero.home-hero--line .home-hero__greeting {
  margin-inline-start: auto;
  font-size: 0.78rem;
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .view--home > .home-hero.home-hero--line {
    min-block-size: 46px;
    padding-block: 4px 6px;
    gap: 4px 10px;
  }

  .view--home > .home-hero.home-hero--line .home-hero__title {
    font-size: clamp(1.12rem, 5vw, 1.34rem);
  }

  .view--home > .home-hero.home-hero--line .home-hero__tagline,
  .view--home > .home-hero.home-hero--line .home-hero__greeting {
    font-size: 0.72rem;
  }
}

/* -------------------------------------------------------------------------
   Pass 8b — settings controls and Home composition
   ------------------------------------------------------------------------- */
.view--settings .panel--deferred .reciter-list {
  gap: 6px;
}

.view--settings .panel--deferred .reciter-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  min-block-size: 56px;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  text-decoration: none !important;
  box-shadow: none;
}

.view--settings .panel--deferred .reciter-row:hover {
  background: var(--color-surface-raised);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
}

.view--settings .settings-link-row__icon {
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}

.view--settings .panel--deferred .reciter-row__name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 7px;
  min-inline-size: 0;
  inline-size: auto;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.35;
}

.view--settings .panel--deferred .reciter-row__meta {
  display: block;
  max-inline-size: 100%;
  color: var(--color-text-muted);
  font-size: var(--fs-caption);
  line-height: 1.45;
}

.view--settings .settings-link-row__chevron {
  display: grid;
  place-items: center;
  color: var(--color-text-muted);
}

.view--settings .reciter-list .reciter-row {
  border-block-end: 1px solid var(--color-border);
}

.view--settings .reciter-list .reciter-row:last-child {
  border-block-end: 0;
}

/* Home is an editorial vertical story at every width. Desktop gets its
   breathing room from inner grids, not by placing unrelated sections beside
   one another. */
.view--home {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2.2vw, 24px);
}

.view--home > .home-core,
.view--home > .home-secondary,
.view--home > .home-core,
.view--home > .home-secondary {
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 2vw, 22px);
}

.view--home .home-section {
  inline-size: 100%;
}

.view--home .home-section__heading {
  display: flex;
  align-items: baseline;
  min-block-size: 28px;
  margin-block-end: 7px;
  padding-inline: 2px;
}

.view--home .home-section__heading h2 {
  margin: 0;
  font-size: clamp(0.98rem, 1.4vw, 1.12rem);
  line-height: 1.25;
  font-weight: 760;
  letter-spacing: -0.012em;
}

.view--home .home-secondary > .home-section--reflection {
  margin-block-start: 2px;
}

.view--home .home-secondary > .home-section--supporting {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 960px) {
  .view--home > .home-core,
  .view--home > .home-secondary {
    max-inline-size: 1120px;
  }

  .view--home > .home-core .home-section--actions .quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  /* Older desktop.css used to impose a two-column dashboard here. Keep this
     guard late in the cascade so that stale desktop rules cannot resize or
     reorder Home again. */
  .view--home {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    align-items: stretch;
  }
}

@media (max-width: 600px) {
  .view--home > .home-core,
  .view--home > .home-secondary {
    gap: 14px;
  }

  .view--home .home-section__heading {
    margin-block-end: 5px;
  }

  .view--home .home-section__heading h2 {
    font-size: 0.98rem;
  }

  .view--home > .home-hero.home-hero--line {
    min-block-size: 44px;
    padding-block: 3px 5px;
  }

  .view--home > .home-hero.home-hero--line .home-hero__title {
    font-size: clamp(1.05rem, 4vw, 1.28rem);
    line-height: 1.2;
  }
}

/* v5.17.84 — application-tail hierarchy.
   Zakat, Offline, Settings and About are four standalone destinations. They
   share the same row treatment but are never presented as one semantic group.
   Settings and About are intentionally the final two destinations. */
.nav__app-tail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--color-border);
}

.nav__app-tail .nav__item--app-tail {
  min-block-size: var(--touch-target);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.nav__app-tail .nav__item--app-tail:hover {
  background: var(--color-surface-alt);
}

.nav__app-tail .nav__item--app-settings {
  margin-block-start: 8px;
  padding-block-start: 10px;
  border-block-start: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-weight: 700;
}

.nav__app-tail .nav__item--app-about {
  font-weight: 650;
}

@media (max-width: 959px) {
  .nav-drawer__body .nav__app-tail .nav__item--app-tail {
    min-block-size: 56px;
  }
}

@media (min-width: 960px) {
  html[data-nav-collapsed='true'] .nav__app-tail .nav__item--app-tail {
    justify-content: center;
    padding-inline: 8px;
  }

  html[data-nav-collapsed='true'] .nav__app-tail .nav__label {
    display: none;
  }
}

/* -------------------------------------------------------------------------
   v5.17.85 — Home is a landing, not a dashboard; Azkar is a library.
   ------------------------------------------------------------------------- */
.view--home > .home-secondary:empty {
  display: none;
}

.view--home > .home-secondary {
  max-inline-size: 1120px;
  inline-size: 100%;
  margin-inline: auto;
}

.view--home .home-section--next {
  margin-block-start: 0;
}

.view--home .home-section--next .panel {
  box-shadow: none;
}

.view--home > .home-core .home-section--actions .quick-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-inline-size: 760px;
}

@media (max-width: 600px) {
  .view--home > .home-core .home-section--actions .quick-actions {
    grid-template-columns: 1fr;
  }
}

/* Azkar browser: one search doorway, two daily anchors, then the catalogue. */
.view--library .library-search-launch,
.home-browser .library-search-launch {
  display: flex;
  align-items: center;
  gap: 12px;
  min-block-size: 52px;
  margin-block: 4px 20px;
  padding: 10px 14px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-surface) 94%, var(--color-primary) 6%);
  color: var(--color-text-secondary);
  text-decoration: none;
  box-shadow: none;
}
.view--library .library-search-launch:hover,
.home-browser .library-search-launch:hover {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-primary) 32%, var(--color-border));
  background: var(--color-surface-raised);
}
.library-search-launch > span {
  flex: 1;
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.library-search-launch > svg:first-child {
  color: var(--color-primary-text);
  flex: 0 0 auto;
}
.library-search-launch > svg:last-child {
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

.view--library .category-tile-wrap--featured .category-tile,
.home-browser .category-tile[data-featured='true'] {
  min-block-size: 88px;
  border-color: color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)),
    var(--color-surface)
  );
}

.view--library .category-tile[data-featured='true'] .category-tile__icon,
.home-browser .category-tile[data-featured='true'] .category-tile__icon {
  inline-size: 46px;
  block-size: 46px;
  border-radius: 13px;
}

.view--library .category-tile[data-featured='true'] .category-tile__name,
.home-browser .category-tile[data-featured='true'] .category-tile__name {
  font-size: var(--fs-md);
  font-weight: 760;
}

/* Focus is a reading instrument: the stage owns the screen; chrome stays
   subordinate and the completion handoff is deliberately brief. */
.focus__scroll {
  max-inline-size: 820px;
  margin-inline: auto;
  border-radius: 18px;
  background: color-mix(in srgb, var(--color-surface) 96%, var(--color-primary) 4%);
  border: 1px solid var(--color-border);
}

.focus__content {
  max-inline-size: 720px;
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 42px);
  padding-block: clamp(24px, 5vw, 48px);
}

.focus__arabic {
  max-inline-size: 42rem;
  margin-inline: auto;
  font-size: clamp(1.55rem, 3.2vw, 2.25rem);
  line-height: 2.15;
  text-align: center;
}

.focus__hint {
  margin-block: 10px 4px;
  color: var(--color-text-muted);
  text-align: center;
}

.focus__bar {
  max-inline-size: 720px;
  margin-inline: auto;
}

@media (max-width: 600px) {
  .focus__scroll {
    border-inline: 0;
    border-radius: 14px;
  }
  .focus__content {
    padding-inline: 14px;
    padding-block: 20px 26px;
  }
  .focus__arabic {
    font-size: clamp(1.42rem, 7vw, 1.8rem);
    line-height: 2.05;
  }
}

/* v5.17.85 — the full-surah player keeps transport visible and puts secondary
   controls behind one native disclosure. A player should read as playback,
   not as a row of unrelated settings. */
.player-bar__more {
  position: relative;
  margin-inline-start: auto;
  flex: 0 0 auto;
}
.player-bar__more > summary {
  list-style: none;
  cursor: pointer;
  min-block-size: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.player-bar__more > summary::-webkit-details-marker,
.player-bar__more > summary::marker {
  display: none;
}
.player-bar__more[open] > summary {
  color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
}
.player-bar__more .player-bar__secondary {
  position: absolute;
  z-index: var(--z-raised);
  inset-inline-end: 0;
  inset-block-end: calc(100% + 8px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 5px;
  min-inline-size: min(360px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}
.player-bar__more .player-bar__volume {
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
}
.player-bar__more .player-bar__volume .player-bar__seek {
  flex: 1;
  min-inline-size: 110px;
}
@media (max-width: 700px) {
  .player-bar__more .player-bar__secondary {
    inset-inline-end: -4px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-inline-size: min(300px, calc(100vw - 20px));
  }
  .player-bar__more .player-bar__chip {
    justify-content: center;
  }
}

/* Exact-origin study context: related study views keep one quiet route back
   to the ayah that started the session. It is navigation chrome, not another
   dashboard card. */
.study-context {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-block: 0 14px;
  padding-block: 8px;
  border-block: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.study-context__copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.study-context__kicker {
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.study-context__ref {
  font-size: 0.82rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}
.study-context__back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  color: var(--color-primary);
  font-size: 0.82rem;
  text-decoration: none;
}
.study-context__back:hover,
.study-context__back:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 620px) {
  .study-context {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }
}

/* v5.17.100 — Hadith chapter navigation is progressive, not a permanent chip wall. */
.hadith-contents {
  margin-block: var(--space-3);
  border-block: 1px solid var(--color-border);
}
.hadith-contents__label {
  font-weight: 650;
}
.hadith-contents__current {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  max-inline-size: min(55vw, 34rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hadith-contents__list {
  max-block-size: 22rem;
  overflow: auto;
  border-block-start: 1px solid var(--color-border);
  padding-block: var(--space-1);
}
.hadith-contents__row {
  appearance: none;
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 2.75rem;
  padding: 0.55rem 0.75rem;
  border: 0;
  border-block-end: 1px solid color-mix(in srgb, var(--color-border) 72%, transparent);
  background: transparent;
  color: inherit;
  text-align: start;
  cursor: pointer;
}
.hadith-contents__row:last-child {
  border-block-end: 0;
}
.hadith-contents__row:hover,
.hadith-contents__row:focus-visible,
.hadith-contents__row.is-active {
  background: var(--color-surface-alt);
}
.hadith-contents__row.is-active {
  font-weight: 650;
}
.hadith-contents__count {
  margin-inline-start: auto;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .hadith-contents__current {
    max-inline-size: 46vw;
  }
}

/* v5.17.116 — About: keep the human-facing identity/capabilities visible,
   while guide, privacy, sources and installation remain progressive details. */
.view--about .about-disclosure {
  overflow: clip;
}

.view--about .about-disclosure__summary {
  display: flex;
  align-items: center;
  min-block-size: 48px;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.view--about .about-disclosure__summary::-webkit-details-marker {
  display: none;
}

.view--about .about-disclosure__summary::before {
  content: '›';
  display: inline-grid;
  place-items: center;
  margin-inline-end: 0.65rem;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-text-muted);
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

.view--about .about-disclosure[open] .about-disclosure__summary::before {
  transform: rotate(90deg);
}

.view--about .about-disclosure__summary:focus-visible {
  outline: 2px solid var(--color-primary-text);
  outline-offset: -2px;
}

.view--about .about-disclosure__body {
  padding: 0 1.1rem 1.1rem;
}

@media (prefers-reduced-motion: reduce) {
  .view--about .about-disclosure__summary::before {
    transition: none;
  }
}

/* v5.17.117 — Audio/Reciters: keep reciter selection and the selected pack
   visible; secondary playback/download authoring tools stay progressive. */
.view--audio .audio-secondary-disclosure {
  overflow: clip;
}

.view--audio .audio-secondary-disclosure__summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-block-size: 48px;
  padding: 0.9rem 1.05rem;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.view--audio .audio-secondary-disclosure__summary::-webkit-details-marker {
  display: none;
}

.view--audio .audio-secondary-disclosure__summary::before {
  content: '›';
  display: inline-grid;
  place-items: center;
  inline-size: 1.2rem;
  block-size: 1.2rem;
  color: var(--color-text-muted);
  transition: transform 160ms ease;
}

.view--audio .audio-secondary-disclosure[open] .audio-secondary-disclosure__summary::before {
  transform: rotate(90deg);
}

.view--audio .audio-secondary-disclosure__summary:focus-visible {
  outline: 2px solid var(--color-primary-text);
  outline-offset: -2px;
}

.view--audio .audio-secondary-disclosure__body {
  padding: 0 1.05rem 1.05rem;
}

.view--audio .audio-secondary-disclosure .chip__count {
  margin-inline-start: auto;
}

@media (prefers-reduced-motion: reduce) {
  .view--audio .audio-secondary-disclosure__summary::before {
    transition: none;
  }
}

/* v5.17.118 — bilingual disclosure affordance: collapsed chevrons point
   toward the hidden content in both LTR and RTL; opening still points down. */
:root[dir='rtl'] .view--about .about-disclosure__summary::before,
:root[dir='rtl'] .view--audio .audio-secondary-disclosure__summary::before {
  transform: rotate(180deg);
}

:root[dir='rtl'] .view--about .about-disclosure[open] .about-disclosure__summary::before,
:root[dir='rtl']
  .view--audio
  .audio-secondary-disclosure[open]
  .audio-secondary-disclosure__summary::before {
  transform: rotate(90deg);
}

/* Navigation action/disclosure split: section names navigate; native summary
   disclosure stays a small, explicit chevron control. Keeping <details> user-owned
   preserves its open state across normal shell rerenders. */
.nav__group--hierarchy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav__section {
  position: relative;
  margin: 0;
  border: 0;
}
.nav__section-icon {
  inline-size: 24px;
  block-size: 24px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.nav__section-link .nav__label {
  min-inline-size: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__sub {
  display: grid;
  gap: 2px;
  margin: 2px 0 4px;
  padding-inline: 10px 2px;
}
[dir='rtl'] .nav__sub {
  padding-inline: 2px 10px;
}
.nav__item--sub {
  position: relative;
  min-block-size: 44px;
  padding: 7px 10px 7px 18px;
  border-radius: 10px;
  font-size: var(--fs-caption);
  font-weight: 550;
  background: transparent;
  color: var(--color-text-secondary);
}
[dir='rtl'] .nav__item--sub {
  padding-inline: 7px 18px;
}
.nav__item--sub::before {
  content: '';
  position: absolute;
  inset-inline-start: 6px;
  inset-block-start: 50%;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transform: translateY(-50%);
}
[dir='rtl'] .nav__item--sub::before {
  inset-inline-start: auto;
  inset-inline-end: 6px;
}
.nav__item--sub:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.nav__item--sub.nav__item--active {
  background: color-mix(in srgb, var(--color-primary) 9%, var(--color-surface));
  color: var(--color-primary-text);
  font-weight: 650;
  border-inline-start: 0;
}
.nav__item--sub.nav__item--active::before {
  background: var(--color-primary);
}
.nav__item--overview {
  font-weight: 650;
}
.nav__section-row {
  display: flex;
  align-items: stretch;
  gap: 4px;
}
.nav__section-details {
  flex: 0 0 auto;
  margin: 0;
  border: 0;
  min-inline-size: 0;
}
.nav__section-toggle {
  position: static;
  z-index: var(--z-raised);
  inline-size: var(--touch-target);
  min-block-size: var(--touch-target);
  border: 0;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  list-style: none;
}
.nav__section-toggle::-webkit-details-marker {
  display: none;
}
.nav__section-toggle::marker {
  content: '';
}
.nav__section-toggle:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.nav__section-toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) inset;
}
.nav__section-chevron {
  display: grid;
  place-items: center;
  transform: rotate(-90deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
[dir='rtl'] .nav__section-chevron {
  transform: rotate(90deg);
}
.nav__section[open] > .nav__section-toggle .nav__section-chevron {
  transform: none;
}
.nav__section--current > .nav__section-toggle {
  color: var(--color-primary-text);
}
.nav__section-link {
  min-block-size: var(--touch-target);
  min-inline-size: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  font-weight: 650;
  flex: 1 1 auto;
}
.nav__section-link:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}
.nav__section-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus) inset;
}
.nav__section-link.nav__item--active {
  color: var(--color-primary-text);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));
  border-inline-start: 2px solid var(--color-primary);
}
@media (max-width: 959px) {
  .nav-drawer__body .nav__section-toggle,
  .nav-drawer__body .nav__section-link {
    min-block-size: 56px;
  }
  .nav-drawer__body .nav__section-link {
    font-size: var(--fs-md);
  }
}
@media (min-width: 960px) {
  html[data-nav-collapsed='true'] .nav__section-toggle {
    display: none;
  }
  html[data-nav-collapsed='true'] .nav__section-link {
    grid-template-columns: 24px;
    justify-content: center;
    padding-inline: 8px;
  }
  html[data-nav-collapsed='true'] .nav__section-link .nav__label {
    display: none;
  }
  html[data-nav-collapsed='true'] .nav__sub {
    display: none !important;
  }
}