/* ─────────────────────────────────────────────────────────────────────
   PaydaQuran · Base Components · v0.1
   All component values reference --pq-* tokens — palettes hot-swap via
   .pq-sand / .pq-clay on a parent.
   ───────────────────────────────────────────────────────────────────── */

.pq, .pq * { box-sizing: border-box; }
.pq {
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-body-lg);
  line-height: var(--pq-lh-normal);
  color: var(--pq-ink-700);
  background: var(--pq-bg);
  -webkit-font-smoothing: antialiased;
}

/* ── Typography helpers ─────────────────────────────────────────────── */
.pq-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--pq-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--pq-ink-500);
}
.pq-eyebrow::before {
  content: ""; width: 18px; height: 1px; background: currentColor; opacity: .5;
}
.pq-display {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: var(--pq-fs-display);
  line-height: var(--pq-lh-tight);
  letter-spacing: -0.01em;
  color: var(--pq-ink-900);
}
.pq-h1 {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: var(--pq-fs-h1);
  line-height: var(--pq-lh-tight);
  letter-spacing: -0.005em;
  color: var(--pq-ink-900);
}
.pq-h2 {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: var(--pq-fs-h2);
  line-height: var(--pq-lh-tight);
  color: var(--pq-ink-900);
}
.pq-h3 {
  font-family: var(--pq-font-sans);
  font-weight: 600;
  font-size: var(--pq-fs-h3);
  line-height: var(--pq-lh-snug);
  color: var(--pq-ink-900);
}
.pq-body  { font-size: var(--pq-fs-body-lg); line-height: var(--pq-lh-normal); color: var(--pq-ink-700); }
.pq-caption { font-size: var(--pq-fs-caption); line-height: var(--pq-lh-snug); color: var(--pq-ink-500); }
.pq-muted { color: var(--pq-ink-500); }

/* Numbers in tables / counters */
.pq-tnum { font-variant-numeric: tabular-nums; }

/* ── Arabic primitive (the central object of the product) ──────────── */
.pq-arabic {
  font-family: var(--pq-font-arabic);
  font-size: calc(var(--pq-fs-arabic) * var(--pq-arabic-scale, 1));
  line-height: var(--pq-lh-arabic);
  font-weight: 400;
  color: var(--pq-ink-900);
  direction: rtl;
  text-align: right;
  letter-spacing: 0;
}
/* Per-artboard font swaps */
.pq-arabic.is-noto       { font-family: "Noto Naskh Arabic", serif; }
.pq-arabic.is-amiri      { font-family: "Amiri", "Noto Naskh Arabic", serif; }
.pq-arabic.is-scheherazade { font-family: "Scheherazade New", "Noto Naskh Arabic", serif; font-size: calc(var(--pq-fs-arabic) * var(--pq-arabic-scale, 1) * 1.05); }
.pq-arabic.is-reem       { font-family: "Reem Kufi", "Noto Naskh Arabic", serif; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.pq-btn {
  --bg:    transparent;
  --fg:    var(--pq-ink-700);
  --bd:    var(--pq-border-strong);
  --hover: var(--pq-ink-mute);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 44px; padding: 0 18px;
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-body);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--bd);
  border-radius: var(--pq-r-md);
  cursor: pointer;
  transition: background var(--pq-dur-1) var(--pq-ease),
              border-color var(--pq-dur-1) var(--pq-ease),
              color var(--pq-dur-1) var(--pq-ease),
              transform var(--pq-dur-1) var(--pq-ease);
  user-select: none;
  white-space: nowrap;
}
.pq-btn:hover { background: var(--hover); }
.pq-btn:focus-visible { outline: none; box-shadow: var(--pq-focus-ring); }
.pq-btn:active { transform: translateY(0.5px); }
.pq-btn[disabled], .pq-btn.is-disabled { opacity: 0.45; pointer-events: none; }

.pq-btn--primary {
  --bg: var(--pq-brand);
  --fg: var(--pq-brand-ink);
  --bd: var(--pq-brand);
  --hover: var(--pq-brand-hover);
}
.pq-btn--primary:hover { background: var(--pq-brand-hover); border-color: var(--pq-brand-hover); }

.pq-btn--ghost {
  --bg: transparent;
  --fg: var(--pq-ink-700);
  --bd: transparent;
  --hover: var(--pq-ink-mute);
}

.pq-btn--gold {
  --bg: var(--pq-gold);
  --fg: #fbf7ed;
  --bd: var(--pq-gold);
  --hover: var(--pq-gold-hover);
}
.pq-btn--gold:hover { background: var(--pq-gold-hover); border-color: var(--pq-gold-hover); }

.pq-btn--sm { height: 34px; padding: 0 12px; font-size: var(--pq-fs-caption); border-radius: var(--pq-r-sm); }
.pq-btn--lg { height: 52px; padding: 0 24px; font-size: var(--pq-fs-body-lg); }

.pq-btn--icon {
  width: 44px; height: 44px; padding: 0;
  border-radius: var(--pq-r-md);
}
.pq-btn--icon.pq-btn--sm { width: 34px; height: 34px; }
.pq-btn--icon svg { width: 18px; height: 18px; }

/* ── Chips / Pills ──────────────────────────────────────────────────── */
.pq-chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 10px;
  font-size: var(--pq-fs-caption);
  font-weight: 500;
  color: var(--pq-ink-700);
  background: var(--pq-ink-mute);
  border: 1px solid transparent;
  border-radius: var(--pq-r-pill);
  white-space: nowrap;
}
.pq-chip--brand { background: var(--pq-brand-soft); color: var(--pq-brand); }
.pq-chip--gold  { background: var(--pq-gold-soft);  color: var(--pq-gold-hover); }
.pq-chip--outline { background: transparent; border-color: var(--pq-border-strong); color: var(--pq-ink-700); }
.pq-chip--playing { background: var(--pq-gold-soft); color: var(--pq-gold-hover); }
.pq-chip--playing::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pq-gold);
  box-shadow: 0 0 0 0 var(--pq-gold-soft);
  animation: pqPulse 1.4s var(--pq-ease) infinite;
}
@keyframes pqPulse {
  0%   { box-shadow: 0 0 0 0 var(--pq-gold-soft); }
  70%  { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* Number badge (S:A) */
.pq-badge-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 28px; padding: 0 8px;
  font-family: var(--pq-font-sans);
  font-weight: 600;
  font-size: var(--pq-fs-caption);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--pq-brand);
  background: var(--pq-brand-soft);
  border-radius: var(--pq-r-sm);
}

/* ── Input / Select ─────────────────────────────────────────────────── */
.pq-input, .pq-select {
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 14px;
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-body);
  color: var(--pq-ink-900);
  background: var(--pq-surface);
  border: 1px solid var(--pq-border-strong);
  border-radius: var(--pq-r-md);
  width: 100%;
  outline: none;
  transition: border-color var(--pq-dur-1) var(--pq-ease),
              box-shadow var(--pq-dur-1) var(--pq-ease);
}
.pq-input::placeholder { color: var(--pq-ink-300); }
.pq-input:hover, .pq-select:hover { border-color: var(--pq-ink-500); }
.pq-input:focus-visible, .pq-select:focus-visible {
  border-color: var(--pq-brand);
  box-shadow: var(--pq-focus-ring);
}
.pq-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pq-ink-500) 50%),
                    linear-gradient(135deg, var(--pq-ink-500) 50%, transparent 50%);
  background-position: right 18px top 50%, right 13px top 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.pq-label {
  display: block;
  font-size: var(--pq-fs-caption);
  font-weight: 500;
  color: var(--pq-ink-500);
  margin-bottom: 6px;
}

/* ── Segment control (modes: режимы заучивания, фильтры) ───────────── */
.pq-segment {
  display: inline-flex;
  padding: 4px;
  background: var(--pq-surface-2);
  border-radius: var(--pq-r-md);
  border: 1px solid var(--pq-border);
  gap: 2px;
}
.pq-segment__item {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 36px; padding: 0 14px;
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-caption);
  font-weight: 500;
  color: var(--pq-ink-500);
  background: transparent;
  border: 0;
  border-radius: calc(var(--pq-r-md) - 4px);
  cursor: pointer;
  transition: background var(--pq-dur-1) var(--pq-ease), color var(--pq-dur-1) var(--pq-ease);
  white-space: nowrap;
}
.pq-segment__item:hover { color: var(--pq-ink-700); }
.pq-segment__item.is-active {
  background: var(--pq-surface-hi);
  color: var(--pq-ink-900);
  box-shadow: var(--pq-shadow-1);
}
.pq-segment__item:focus-visible { outline: none; box-shadow: var(--pq-focus-ring); }

/* ── Progress bar ───────────────────────────────────────────────────── */
.pq-progress {
  height: 4px; width: 100%;
  background: var(--pq-ink-mute);
  border-radius: var(--pq-r-pill);
  overflow: hidden;
}
.pq-progress__bar {
  height: 100%;
  background: var(--pq-gold);
  border-radius: var(--pq-r-pill);
  transition: width var(--pq-dur-2) var(--pq-ease);
}

/* ── Card ───────────────────────────────────────────────────────────── */
.pq-card {
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-xl);
  box-shadow: var(--pq-shadow-1);
}
.pq-card--flat { box-shadow: none; }
.pq-card--elev { box-shadow: var(--pq-shadow-2); }
.pq-card__inner { padding: var(--pq-sp-5); }

/* ── Toast ─────────────────────────────────────────────────────────── */
.pq-toast {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 16px 12px 14px;
  background: var(--pq-ink-900);
  color: #f4eee0;
  border-radius: var(--pq-r-md);
  font-size: var(--pq-fs-caption);
  font-weight: 500;
  box-shadow: var(--pq-shadow-2);
}
.pq-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pq-gold); }

/* ── Tafsir disclosure ─────────────────────────────────────────────── */
.pq-tafsir {
  border-top: 1px solid var(--pq-border);
  padding-top: var(--pq-sp-4);
}
.pq-tafsir__summary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pq-font-sans);
  font-size: var(--pq-fs-caption);
  font-weight: 500;
  color: var(--pq-ink-500);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pq-tafsir__summary::-webkit-details-marker { display: none; }
.pq-tafsir__summary svg { transition: transform var(--pq-dur-2) var(--pq-ease); }
details[open] > .pq-tafsir__summary svg { transform: rotate(90deg); }
.pq-tafsir__body {
  margin-top: var(--pq-sp-3);
  padding: var(--pq-sp-4);
  background: var(--pq-bg-soft);
  border-radius: var(--pq-r-md);
  font-size: var(--pq-fs-body);
  color: var(--pq-ink-700);
  line-height: 1.7;
}

/* ── Sticky player ─────────────────────────────────────────────────── */
.pq-sticky-player {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px 10px 18px;
  background: var(--pq-surface-hi);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-pill);
  box-shadow: var(--pq-shadow-2);
}
.pq-sticky-player__copy { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.pq-sticky-player__copy strong { font-family: var(--pq-font-sans); font-size: var(--pq-fs-body); font-weight: 600; color: var(--pq-ink-900); }
.pq-sticky-player__copy small { font-size: var(--pq-fs-caption); color: var(--pq-ink-500); }
.pq-sticky-player__actions { display: flex; gap: 4px; }

/* ── Bookmark / action row (used in ayah card) ─────────────────────── */
.pq-action-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ── Token swatch (for spec sheet) ─────────────────────────────────── */
.pq-swatch {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--pq-r-sm);
  border: 1px solid var(--pq-border);
  background: var(--pq-surface);
}
.pq-swatch__chip {
  width: 28px; height: 28px; border-radius: 6px;
  border: 1px solid var(--pq-border-strong);
  flex-shrink: 0;
}
.pq-swatch__name { font-size: var(--pq-fs-caption); font-weight: 600; color: var(--pq-ink-900); }
.pq-swatch__val  { font-size: var(--pq-fs-micro);   color: var(--pq-ink-500); font-variant-numeric: tabular-nums; }

/* ── Divider ───────────────────────────────────────────────────────── */
.pq-rule { height: 1px; background: var(--pq-border); border: 0; }

/* ── Theme toggle icon swap (sun in light, moon in dark) ───────────── */
body:not(.is-dark) [data-theme-moon] { display: none; }
body.is-dark       [data-theme-sun]  { display: none; }