/*
 * QKE — Listen page consoles.
 *
 * Layered on qke-layer0-tokens.css → qke-layer0.css → qke-listen.css.
 * Every colour, radius, shadow and font is an existing token; no new palette.
 *
 * Mobile-first. RTL needs no separate rules: layout uses logical properties
 * (margin-inline, padding-inline, inset-inline, text-align: start/end).
 *
 * ── M-LISTEN-REDESIGN ────────────────────────────────────────────────────
 *
 * The page used to hold ONE console with a two-tab strip, plus a separate
 * "All Surahs" section with its own search box and 114-row list. Verse
 * playback therefore cost a click, and the surah list duplicated the
 * console's own <select>.
 *
 * There are now TWO consoles, each a plain panel with no tabs:
 *   #qkl-console   full-surah player   (.qkl-panel#qkl-panel-surah)
 *   #qkl-vconsole  verse-by-verse      (.qkl-panel#qkl-panel-verse)
 *
 * Both share .qkl-console and .qkl-panel, so every rule below applies to
 * each without duplication.
 *
 * REMOVED .qkl-tabs, .qkl-tab*        — the tab strip is gone
 * REMOVED .qkl-search*, .qkl-list,
 *         .qkl-row*                   — the All Surahs section is deleted
 * CHANGED .qkl-openlink               — now a pill button carrying an icon
 *                                       and a surah name in the page language
 * CHANGED type scale                  — raised one step throughout
 *
 * ── M-LISTEN-TYPE-V2 ─────────────────────────────────────────────────────
 *
 * Sizes raised 20% (50% for anything that was under 0.95rem). Controls grew
 * with them so nothing is clipped.
 *
 * The verse text and every surah/reciter name now use --qke-font-arabic
 * (Amiri). They were set in --ssi-font-serif ('Cormorant Garamond'), which
 * contains no Arabic glyphs — the browser was falling back to the plain
 * system serif for all of it.
 *
 * The block at the end of this file lifts the .qar-* player controls, which
 * are owned by qke-layer0.css and sized for the chapter pages. Scoped to
 * .qke-ln so no other page is touched.
 */

/* ── Console shell ────────────────────────────────────────────────────── */

.qkl-console {
  border: 1px solid var(--qke-border);
  border-radius: var(--qke-r-lg);
  background: linear-gradient(160deg, var(--hero-mid), var(--navy-mid) 60%);
  box-shadow: var(--ssi-shadow-card);
  overflow: hidden;
}

/* ── Panels ───────────────────────────────────────────────────────────── */

/*
 * Each console holds exactly one panel now. [hidden] is retained because the
 * verse panel still hides itself while a surah with no verse audio is
 * selected — it is no longer used for tab switching.
 */

.qkl-panel { padding: 1.9rem 1.6rem; }
.qkl-panel[hidden] { display: none; }

/* The embedded player shell is already styled by qke-layer0.css; strip its
   standalone card chrome so it reads as part of the console. */
.qkl-ap {
  margin: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ── Field rows ───────────────────────────────────────────────────────── */

/*
 * The verse console's three selects sit on one row from 700px. Below that
 * they stack full width — three side-by-side selects are unusable on a phone.
 */

.qkl-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.95rem;
  align-items: end;
  margin-bottom: 0.4rem;
}

@media (min-width: 700px) {
  .qkl-fields { grid-template-columns: repeat(3, 1fr); }
}

.qkl-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--qke-border);
}

.qkl-extra-f {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1 1 10rem;
  min-width: 9rem;
}

.qkl-extra-f > span {
  font-family: var(--ssi-font-sans);
  font-size: 1.23rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/*
 * Surah names render in the Arabic serif face in EVERY language — including
 * inside the <option> list, which several browsers style independently of
 * the <select> itself.
 */
.qkl-sel {
  width: 100%;
  min-height: 58px;
  padding: 0.7rem 1rem;
  border: 1px solid var(--qke-border);
  border-radius: var(--qke-r);
  background: var(--navy);
  font-family: var(--qke-font-arabic);
  font-size: 1.22rem;
  color: var(--text-main);
  cursor: pointer;
}

.qkl-sel option { font-family: var(--qke-font-arabic); font-size: 1.26rem; }

.qkl-sel:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── "Open surah page" button ─────────────────────────────────────────── */

/*
 * Names the surah in the PAGE's language, never in Arabic unless Arabic is
 * the page language. JS rewrites the label and href on every surah change,
 * so the width is not fixed — it grows with the name.
 */

.qkl-openlink {
  margin-inline-start: auto;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.7rem 1.45rem;
  border: 1px solid var(--qke-border);
  border-radius: 999px;
  background: var(--navy-light);
  font-family: var(--ssi-font-sans);
  font-size: 1.18rem;
  font-weight: 600;
  color: var(--qke-link);
  text-decoration: none;
  transition: background var(--qke-trans), border-color var(--qke-trans),
              color var(--qke-trans);
}

.qkl-openlink:hover,
.qkl-openlink:focus-visible {
  border-color: var(--gold);
  background: var(--hero-mid);
  color: var(--gold-light);
}

.qkl-openlink svg { flex: 0 0 auto; }

/* On narrow screens the button drops onto its own full-width row. */
@media (max-width: 560px) {
  .qkl-openlink {
    margin-inline-start: 0;
    width: 100%;
    justify-content: center;
  }
}

/* ── Verse text ───────────────────────────────────────────────────────── */

/*
 * ONE box, TWO lines: the Arabic verse and, beneath a hairline, the same
 * verse in the page's language.
 *
 * The border, background and padding used to live on .qkl-vtext itself. They
 * are on .qkl-vbox now, so the translation sits INSIDE the same plate as the
 * Arabic instead of floating in a second box below it. .qkl-vtext keeps only
 * its type — nothing that referenced it for colour or size had to change.
 */
.qkl-vbox {
  margin: 1.6rem 0 0;
  padding: 2.4rem 1.6rem;
  border: 1px solid var(--qke-border);
  border-radius: var(--qke-r);
  background: rgba(0, 0, 0, 0.22);
}

/*
 * The verse itself. Amiri at a generous size and 2.5 leading, which is what
 * fully-vocalised Quranic Arabic needs — the harakat sit above and below the
 * baseline and collide at tighter leading. font-feature-settings turns on
 * Amiri's contextual alternates and ligatures, which is what gives it the
 * calligraphic joins.
 */
.qkl-vtext {
  min-height: 7rem;
  margin: 0;
  padding: 0;
  direction: rtl;
  font-family: var(--qke-font-arabic);
  font-size: clamp(2.05rem, 5.8vw, 2.85rem);
  font-weight: 400;
  font-feature-settings: "calt" 1, "liga" 1, "ccmp" 1, "kern" 1;
  letter-spacing: 0;
  line-height: 2.5;
  color: var(--gold-light);
  text-align: center;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.qkl-vtext:empty::after {
  content: '—';
  opacity: 0.35;
}

/*
 * Translation of the verse above it, in the page's language.
 *
 * Centred to match the Arabic — a justified block under a centred verse reads
 * as two unrelated things. The hairline is what separates the two lines now
 * that they share one plate. JS sets [hidden] when a verse has no translation,
 * so the rule below keeps the box from opening an empty gap.
 */
.qkl-vtr {
  margin-top: 1.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--qke-border);
  font-family: var(--ssi-font-body);
  font-size: clamp(1.5rem, 3.4vw, 1.85rem);
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-main);
  text-align: center;
  text-wrap: pretty;
}

.qkl-vtr[hidden] { display: none; }

/*
 * Urdu. --ssi-font-body has no Arabic-script glyphs, so an Urdu translation
 * set in it falls back to the system serif — the same bug the verse text had.
 * Amiri, and wider leading, because Urdu needs the vertical room.
 */
.qkl-vtr[dir="rtl"] {
  font-family: var(--qke-font-arabic);
  font-size: clamp(1.62rem, 3.8vw, 2.05rem);
  line-height: 2.25;
}

/* ── Verse transport + progress ───────────────────────────────────────── */

.qkl-transport {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.3rem;
}

.qkl-vprog { display: flex; align-items: center; gap: 0.8rem; }

.qkl-msg { margin-top: 1.1rem; }

/* ── Sticky mini-player ───────────────────────────────────────────────── */

/*
 * position: relative is required — .qkl-sk-prog is absolutely positioned
 * against this bar, and without it the progress line escapes to the viewport.
 */

.qkl-sticky {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem 0.75rem;
  border-top: 1px solid var(--gold-dim);
  background: rgba(10, 22, 34, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
}

.qkl-sticky[hidden] { display: none; }

.qkl-sk-btn {
  position: relative;
  flex: 0 0 auto;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--qke-border);
  border-radius: 50%;
  background: var(--navy-light);
  font-size: 1.35rem;
  color: var(--text-main);
  cursor: pointer;
}

.qkl-sk-btn:hover { border-color: var(--gold-dim); color: var(--gold-light); }
.qkl-sk-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.qkl-sk-main {
  width: 3.5rem;
  height: 3.5rem;
  border-color: transparent;
  background: linear-gradient(135deg, var(--si-teal), var(--teal-deep));
  color: var(--gold-pale);
  font-size: 1.2rem;
}

.qkl-sk-main:hover { color: #fff; }

.qkl-sk-meta {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  text-align: start;
}

.qkl-sk-t {
  font-family: var(--qke-font-arabic);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold-light);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qkl-sk-d {
  font-family: var(--ssi-font-sans);
  font-size: 1.2rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.qkl-sk-prog {
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
}

.qkl-sk-bar {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--si-teal), var(--gold));
  transition: width 0.2s linear;
}

/* Keep the fixed bar from covering the end of the page. */
.qke-ln { padding-bottom: 6rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PLAYER CONTROLS — type lift for classes owned by qke-layer0.css
   ══════════════════════════════════════════════════════════════════════════

   The .qar-* player is shared with the chapter pages, where it is sized to
   sit quietly beside the verse list (0.6rem–0.9rem). On the Listen page it
   IS the page, so every label, time and control is raised here. Scoped to
   .qke-ln, so the chapter pages are untouched.
   ══════════════════════════════════════════════════════════════════════════ */

.qke-ln .qar-audio-lbl {
  font-size: 0.9rem;
  letter-spacing: 0.08em;
}

.qke-ln .qar-ap-select {
  min-height: 58px;
  font-family: var(--qke-font-arabic);
  font-size: 1.22rem;
}

.qke-ln .qar-ap-select option {
  font-family: var(--qke-font-arabic);
  font-size: 1.26rem;
}

.qke-ln .qar-ap-btn {
  width: 3rem;
  height: 3rem;
  font-size: 1.35rem;
}

.qke-ln .qar-ap-play {
  width: 4.2rem;
  height: 4.2rem;
  font-size: 1.65rem;
}

.qke-ln .qar-ap-vol-icon { font-size: 1.28rem; }

/* Surah name in the now-playing strip — Arabic in every language. */
.qke-ln .qar-ap-name {
  font-family: var(--qke-font-arabic);
  font-size: 1.35rem;
  font-weight: 700;
}

.qke-ln .qar-ap-reciter { font-size: 1.13rem; }

.qke-ln .qar-ap-time { font-size: 0.93rem; }

.qke-ln .qar-ap-loading,
.qke-ln .qar-ap-error,
.qke-ln .qar-ap-noaudio { font-size: 1.08rem; }

/* Taller progress rail — the old 4px line is hard to hit once the controls
   around it have grown. */
.qke-ln .qar-ap-progress { min-height: 7px; }

/* Verse transport reuses .qar-ap-btn, so it inherits the sizes above. */

/* ── Reduced motion ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .qkl-sk-bar,
  .qkl-openlink { transition: none; }
}

/* ── M-LISTEN-RTL-JOIN (consoles) ──────────────────────────────────────────
   Same fix for the two players: the verse plate, the surah/reciter selects,
   the sticky bar and the shared .qar-* controls.
   ------------------------------------------------------------------------ */

.qkl-vtext,
.qkl-vtr,
.qkl-sel,
.qkl-sel option,
.qkl-sk-t,
.qke-ln .qar-ap-select,
.qke-ln .qar-ap-select option,
.qke-ln .qar-ap-name {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
}

.qke-ln[dir="rtl"] .qkl-extra-f > span,
.qke-ln[dir="rtl"] .qkl-openlink,
.qke-ln[dir="rtl"] .qkl-sk-d,
.qke-ln[dir="rtl"] .qkl-msg,
.qke-ln[dir="rtl"] .qar-audio-lbl,
.qke-ln[dir="rtl"] .qar-ap-reciter,
.qke-ln[dir="rtl"] .qar-ap-loading,
.qke-ln[dir="rtl"] .qar-ap-error,
.qke-ln[dir="rtl"] .qar-ap-noaudio {
  font-family: var(--qke-font-arabic) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}