/* ═══════════════════════════════════════════════════════════════════════════
   نقاء — غرفة الاستماع (the front of naqaa-ai.online)

   «خلي واجهة الموقع عبارة عن راديو احترافي جدا عشان الناس اللي فاتحه من
   كمبيوتر» — the إذاعة, any سورة in any reciter's voice (the rare ones too),
   the مصحف to read, and the أذكار to count, above the app's own page, which
   stays exactly as it was underneath.

   Same identity as the rest of the site («بنفس هوية الموقع الحالي»): every
   value is a token from tokens.css — no colour is written here, which
   scripts/check_design_tokens.py enforces — the warm ground, hairline borders,
   flat fills, نقاء's green for what acts, and gold only where القرآن is.

   The one memorable thing is the TUNING BAND: the stations laid along a dial
   with a needle that slides to the one playing, the way a radio is tuned.
   Everything around it stays quiet.
   ═════════════════════════════════════════════════════════════════════════ */

.listen {
  padding-block: var(--space-xl) var(--space-2xl);
  scroll-margin-top: var(--nav-height);
}

.listen__head {
  display: grid;
  gap: var(--space-2xs);
  text-align: center;
  margin-block-end: var(--space-lg);
}

.listen__eyebrow {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-accent);
}

.listen__title {
  margin: 0;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
}

.listen__lede {
  margin: 0 auto;
  max-inline-size: var(--measure);
  color: var(--text-body);
  line-height: var(--leading-body);
}

/* ── the console ──────────────────────────────────────────────────────────── */

.listen__console {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.listen__tabs {
  display: flex;
  gap: var(--space-3xs);
  padding: var(--space-xs);
  border-block-end: 1px solid var(--line-faint);
  background: var(--surface-sunk);
  overflow-x: auto;
  scrollbar-width: none;
}

.listen__tabs::-webkit-scrollbar { display: none; }

.listen__tab {
  flex: 1 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 48px;
  padding-inline: var(--space-md);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-body);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-out),
              color var(--speed-fast) var(--ease-out);
}

.listen__tab svg { inline-size: 18px; block-size: 18px; flex: none; }

.listen__tab:hover { background: var(--surface-inset); color: var(--text-strong); }

.listen__tab[aria-selected="true"] {
  background: var(--surface-raised);
  border-color: var(--line);
  color: var(--text-accent);
  box-shadow: var(--shadow-sm);
}

.listen__tab:focus-visible,
.listen-btn:focus-visible,
.listen-chip:focus-visible,
.listen-card:focus-visible,
.listen-surah:focus-visible,
.dial:focus-visible,
.listen-count:focus-visible,
.listen-field:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.listen__panel {
  padding: var(--space-lg);
  min-block-size: 420px;
}

.listen__panel[hidden] { display: none; }

/* ── shared controls ──────────────────────────────────────────────────────── */

.listen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  min-inline-size: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: inherit;
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background-color var(--speed-fast) var(--ease-out),
              border-color var(--speed-fast) var(--ease-out);
}

.listen-btn:hover { background: var(--surface-inset); border-color: var(--line-strong); }
.listen-btn svg { inline-size: 20px; block-size: 20px; flex: none; }

.listen-btn--solid {
  background: var(--surface-accent-solid);
  border-color: transparent;
  color: var(--text-on-accent);
}

.listen-btn--solid:hover { background: var(--surface-accent-solid); filter: brightness(1.06); }

.listen-btn--round { padding: 0; border-radius: 50%; }

.listen-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-block-end: var(--space-md);
}

.listen-toolbar__grow { flex: 1 1 220px; }

.listen-chip {
  min-block-size: 40px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-body);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.listen-chip[aria-pressed="true"] {
  background: var(--surface-accent);
  border-color: var(--line-accent);
  color: var(--text-accent);
  font-weight: var(--weight-bold);
}

.listen-chip--gold[aria-pressed="true"] {
  background: var(--surface-gold);
  border-color: var(--line-gold);
  color: var(--text-gold);
}

.listen-field {
  inline-size: 100%;
  min-block-size: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: inherit;
}

.listen-field::placeholder { color: var(--text-faint); }

.listen-note {
  margin: var(--space-sm) 0 0;
  font-size: var(--text-sm);
  color: var(--text-faint);
  text-align: center;
}

.listen-empty {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--text-faint);
}

/* ── الإذاعة: the tuning band ─────────────────────────────────────────────── */

.dial {
  position: relative;
  block-size: 112px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(
      to left,
      var(--line-strong) 0 1px,
      transparent 1px 12px
    ) bottom / 100% 14px no-repeat,
    repeating-linear-gradient(
      to left,
      var(--line-strong) 0 1px,
      transparent 1px 60px
    ) bottom / 100% 26px no-repeat,
    var(--surface-sunk);
  overflow: hidden;
  cursor: pointer;
  touch-action: pan-y;
}

.dial__marks {
  position: absolute;
  inset-inline: var(--space-lg);
  inset-block: 0;
}

.dial__mark {
  position: absolute;
  inset-block-end: 30px;
  inline-size: 8px;
  block-size: 8px;
  margin-inline-start: -4px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background-color var(--speed-fast) var(--ease-out),
              transform var(--speed-fast) var(--ease-out);
}

.dial__mark.is-on { background: var(--surface-accent-solid); transform: scale(1.4); }

.dial__needle {
  position: absolute;
  /* The lower half only: the station's name sits above it and must never be
     struck through. */
  inset-block: auto 0;
  block-size: 56px;
  inline-size: 3px;
  margin-inline-start: -1.5px;
  border-radius: var(--radius-pill);
  background: var(--surface-accent-solid);
  box-shadow: var(--shadow-accent);
  transition: inset-inline-start var(--speed-slow) var(--ease-in-out);
}

.dial__needle::before {
  content: "";
  position: absolute;
  inset-block-start: -4px;
  left: 50%;
  inline-size: 13px;
  block-size: 13px;
  translate: -50% 0;
  border-radius: 50%;
  background: var(--surface-accent-solid);
  border: 2px solid var(--surface-raised);
}

.dial__readout {
  position: absolute;
  inset-block-start: var(--space-sm);
  inset-inline: var(--space-lg);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  pointer-events: none;
}

.dial__name {
  font-family: var(--font-quran);
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dial__band {
  flex: none;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-faint);
}

.tune-console {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  margin-block: var(--space-md);
}

.tune-console .listen-btn--solid { inline-size: 64px; block-size: 64px; }
.tune-console .listen-btn--solid svg { inline-size: 28px; block-size: 28px; }

.listen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-xs);
}

.listen-card {
  display: grid;
  gap: var(--space-3xs);
  min-block-size: 64px;
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: inherit;
  text-align: start;
  cursor: pointer;
  transition: border-color var(--speed-fast) var(--ease-out),
              background-color var(--speed-fast) var(--ease-out);
}

.listen-card:hover { border-color: var(--line-strong); background: var(--surface-lifted); }

.listen-card[aria-pressed="true"] {
  border-color: var(--line-accent);
  background: var(--surface-accent);
}

.listen-card__title { font-weight: var(--weight-bold); line-height: var(--leading-snug); }

.listen-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.listen-tag {
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  color: var(--text-body);
}

.listen-tag--gold { background: var(--surface-gold); color: var(--text-gold); }

/* ── القرّاء ──────────────────────────────────────────────────────────────── */

.reciters-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 1.6fr);
  gap: var(--space-md);
  align-items: start;
}

.reciters-list {
  display: grid;
  gap: var(--space-2xs);
  max-block-size: 560px;
  overflow-y: auto;
  padding-inline-end: var(--space-3xs);
}

.surah-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
}

.surah-head__name { margin: 0; font-size: var(--text-lg); color: var(--text-strong); }
.surah-head__meta { font-size: var(--text-sm); color: var(--text-faint); }

.surah-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: var(--space-2xs);
  max-block-size: 520px;
  overflow-y: auto;
}

.listen-surah {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-block-size: 44px;
  padding-inline: var(--space-xs);
  border: 1px solid var(--line-faint);
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.listen-surah:hover { border-color: var(--line-strong); }
.listen-surah[aria-pressed="true"] { border-color: var(--line-accent); background: var(--surface-accent); color: var(--text-accent); }
.listen-surah:disabled { opacity: 0.45; cursor: not-allowed; }

.listen-surah__num {
  flex: none;
  inline-size: 28px;
  block-size: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-inset);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-body);
}

/* ── المصحف ──────────────────────────────────────────────────────────────── */

.mushaf-read {
  max-inline-size: 860px;
  margin-inline: auto;
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius-lg);
  background: var(--surface-mushaf);
  box-shadow: var(--shadow-gold);
}

.mushaf-read__title {
  margin: 0 0 var(--space-sm);
  padding-block: var(--space-2xs);
  border-block: 1px solid var(--line-gold);
  font-family: var(--font-quran);
  font-size: var(--text-xl);
  text-align: center;
  color: var(--text-gold);
}

.mushaf-read__basmalah {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-quran);
  font-size: var(--text-xl);
  text-align: center;
  color: var(--text-strong);
}

.mushaf-read__text {
  margin: 0;
  font-family: var(--font-quran);
  font-size: calc(var(--text-xl) * var(--mushaf-scale, 1));
  line-height: 2.3;
  text-align: justify;
  text-align-last: center;
  color: var(--text-strong);
}

.ayah-num {
  display: inline-grid;
  place-items: center;
  inline-size: 1.6em;
  block-size: 1.6em;
  margin-inline: 0.2em;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: 0.55em;
  font-weight: var(--weight-bold);
  color: var(--text-gold);
  vertical-align: middle;
}

.listen-select {
  min-block-size: 44px;
  padding-inline: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  color: var(--text-strong);
  font: inherit;
  max-inline-size: 100%;
}

/* ── الأذكار ─────────────────────────────────────────────────────────────── */

.adhkar-progress {
  block-size: 6px;
  margin-block-end: var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--surface-inset);
  overflow: hidden;
}

.adhkar-progress__fill {
  block-size: 100%;
  inline-size: 0;
  background: var(--surface-accent-solid);
  transition: inline-size var(--speed-medium) var(--ease-out);
}

.adhkar-list { display: grid; gap: var(--space-sm); }

.dhikr {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-md);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: opacity var(--speed-medium) var(--ease-out),
              border-color var(--speed-medium) var(--ease-out);
}

.dhikr.is-done { opacity: 0.55; border-color: var(--line-accent); }

.dhikr__text {
  margin: 0;
  font-family: var(--font-quran);
  font-size: var(--text-lg);
  line-height: 2;
  color: var(--text-strong);
}

.listen-count {
  inline-size: 72px;
  block-size: 72px;
  border: 2px solid var(--line-accent);
  border-radius: 50%;
  background: var(--surface-accent);
  color: var(--text-accent);
  font: inherit;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: transform var(--speed-fast) var(--ease-out);
}

.listen-count:active { transform: scale(0.94); }
.dhikr.is-done .listen-count { background: var(--surface-accent-solid); color: var(--text-on-accent); }

/* ── the player bar ───────────────────────────────────────────────────────── */

.listen-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 60;
  border-block-start: 1px solid var(--line);
  background: var(--surface-nav);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
}

.listen-bar[hidden] { display: none; }

.listen-bar__shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  max-inline-size: var(--shell-width);
  margin-inline: auto;
  padding: var(--space-xs) var(--space-md);
}

.listen-bar__controls { display: flex; align-items: center; gap: var(--space-2xs); }

.listen-bar__now { min-inline-size: 0; display: grid; gap: 2px; }

.listen-bar__title {
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listen-bar__sub {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listen-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding-inline: var(--space-2xs);
  border-radius: var(--radius-pill);
  background: var(--state-error-tint);
  color: var(--state-error);
  font-weight: var(--weight-bold);
}

.listen-live::before {
  content: "";
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: listen-pulse 1.6s var(--ease-in-out) infinite;
}

@keyframes listen-pulse { 50% { opacity: 0.25; } }

.listen-bar__seek {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-2xs);
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.listen-bar__seek input { flex: 1; accent-color: var(--hue-green); }
.listen-bar__seek[hidden] { display: none; }

.listen-bar__extra { display: flex; align-items: center; gap: var(--space-2xs); }

.listen-bar__extra input[type="range"] { inline-size: 96px; accent-color: var(--hue-green); }

/* «مؤقت النوم» — the menu opens upward from the bar's moon button. */
.listen-sleep { position: relative; }

.listen-sleep__menu {
  position: absolute;
  inset-block-end: calc(100% + var(--space-xs));
  inset-inline-end: 0;
  z-index: 61;
  inline-size: min(300px, 86vw);
  padding: var(--space-sm);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.listen-sleep__menu[hidden] { display: none; }

.listen-sleep__title {
  margin: 0 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
}

.listen-sleep__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block-end: var(--space-sm);
}

.listen-sleep__custom label {
  display: block;
  margin-block-end: var(--space-2xs);
  font-size: var(--text-xs);
  color: var(--text-faint);
}

.listen-sleep__row { display: flex; gap: var(--space-2xs); }

.listen-sleep__row .listen-field { flex: 1 1 auto; min-inline-size: 0; }

.listen-sleep__off { margin-block-start: var(--space-sm); inline-size: 100%; }

.listen-sleep__off[hidden] { display: none; }

.listen-bar__error { color: var(--state-error); }

/* Room for the bar, so it never sits on the page's last line. */
body.has-listen-bar { padding-block-end: 96px; }

/* ── small screens ────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .reciters-layout { grid-template-columns: 1fr; }
  .reciters-list { max-block-size: 300px; }
  .listen__panel { padding: var(--space-md); }
  .mushaf-read { padding: var(--space-md); }
}

@media (max-width: 600px) {
  .listen__title { font-size: var(--text-2xl); }
  /* All four tabs on the screen, icon over label — a row that scrolls hid
     «المصحف» and «الأذكار» off the edge of a phone. */
  .listen__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
  .listen__tab {
    flex-direction: column;
    gap: var(--space-3xs);
    min-block-size: 56px;
    padding-inline: var(--space-3xs);
    font-size: var(--text-xs);
  }
  /* The station's name gets the whole width, the count goes under it. */
  .dial { block-size: 136px; }
  .dial__readout { flex-direction: column; align-items: flex-start; gap: 0; }
  .dial__name { font-size: var(--text-lg); max-inline-size: 100%; }
  /* Two stations a row: twenty-two cards one under another was a long scroll. */
  .listen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .listen-card { padding: var(--space-xs); font-size: var(--text-sm); }
  .listen-bar__shell { grid-template-columns: auto minmax(0, 1fr); }
  /* The volume slider is the phone's own buttons; the sleep timer stays. */
  .listen-bar__extra input[type="range"] { display: none; }
  /* The timer's menu spans the screen above the bar, so it never runs off
     the side the button happens to sit on. */
  /* Anchored to the bar itself (position: fixed, full width), so it sits
     just above it whatever height the bar wraps to. */
  .listen-sleep { position: static; }
  .listen-sleep__menu {
    inset-inline: var(--space-sm);
    inset-block-end: calc(100% + var(--space-xs));
    inline-size: auto;
  }
  /* The مصحف's tools in three rows: the surah between its arrows, the voice,
     then listen and the type size. */
  .mushaf-toolbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; }
  .mushaf-toolbar .listen-toolbar__grow { display: none; }
  .mushaf-toolbar #mushaf-voice { grid-column: 1 / -1; grid-row: 2; }
  .mushaf-toolbar #mushaf-bigger { grid-column: 1; grid-row: 3; }
  .mushaf-toolbar #mushaf-listen { grid-column: 2; grid-row: 3; }
  .mushaf-toolbar #mushaf-smaller { grid-column: 3; grid-row: 3; }
  .dhikr { grid-template-columns: 1fr; }
  .listen-count { justify-self: center; }
}

@media (prefers-reduced-motion: reduce) {
  .dial__needle,
  .dial__mark,
  .adhkar-progress__fill,
  .listen-count { transition: none; }
  .listen-live::before { animation: none; }
}

.adhkar-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }