/* ─────────────────────────────────────────────────────────────────────
   PaydaQuran · Memorize Trainer · SRS states
   Builds on tokens.css + components.css + pages.css.
   ───────────────────────────────────────────────────────────────────── */

/* ── Session strip — today's queue, progress, level ─────────────────── */
.pq-session-strip {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-lg);
  box-shadow: var(--pq-shadow-1);
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .pq-session-strip { grid-template-columns: 1fr; gap: 12px; }
}

.pq-session-strip__left { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pq-session-strip__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pq-session-strip__head strong {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: 17px;
  color: var(--pq-ink-900);
}
.pq-session-strip__head .pq-tnum { color: var(--pq-gold-hover); font-weight: 600; }

.pq-session-dots {
  display: inline-flex; align-items: center; gap: 5px;
}
.pq-session-dots__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pq-ink-mute);
  border: 1px solid var(--pq-border-strong);
}
.pq-session-dots__dot.is-done {
  background: var(--pq-brand);
  border-color: var(--pq-brand);
}
.pq-session-dots__dot.is-current {
  width: 22px;
  border-radius: var(--pq-r-pill);
  background: var(--pq-gold);
  border-color: var(--pq-gold);
  box-shadow: 0 0 0 3px var(--pq-gold-soft);
}

.pq-session-strip__right {
  display: flex; align-items: center; gap: 10px;
}
.pq-level-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 6px;
  background: var(--pq-brand-soft);
  border-radius: var(--pq-r-pill);
}
.pq-level-chip__rank {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--pq-brand);
  color: var(--pq-brand-ink);
  font-family: var(--pq-font-serif);
  font-weight: 600;
  font-size: 11px;
}
.pq-level-chip__name {
  font-size: var(--pq-fs-caption);
  font-weight: 600;
  color: var(--pq-brand);
}
.pq-streak-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px;
  background: var(--pq-gold-soft);
  border-radius: var(--pq-r-pill);
  font-size: var(--pq-fs-caption);
  font-weight: 600;
  color: var(--pq-gold-hover);
  font-variant-numeric: tabular-nums;
}

/* ── Reveal-mode segment (5 modes) ─────────────────────────────────── */
.pq-reveal-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.pq-reveal-row .pq-segment { flex: 0 0 auto; }
.pq-reveal-row__spacer { flex: 1; }
.pq-reveal-row__hint {
  font-size: var(--pq-fs-caption);
  color: var(--pq-ink-500);
}

/* ── Training card ─────────────────────────────────────────────────── */
.pq-train-card {
  position: relative;
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-xl);
  box-shadow: var(--pq-shadow-2);
  padding: 36px 44px;
  margin-bottom: 22px;
}
@media (max-width: 720px) {
  .pq-train-card { padding: 24px 18px; border-radius: var(--pq-r-lg); }
}

.pq-train-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.pq-train-card__head-left { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pq-train-card__title {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: 22px;
  color: var(--pq-ink-900);
  margin: 0;
  line-height: 1.2;
}
.pq-train-card__meta {
  display: flex; align-items: center; gap: 10px;
  font-size: var(--pq-fs-caption);
  color: var(--pq-ink-500);
  flex-wrap: wrap;
}
.pq-train-card__meta .pq-chip { background: var(--pq-ink-mute); }

/* SRS stage indicator — 5 dots */
.pq-srs-stage {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 4px 6px;
  background: var(--pq-surface-2);
  border-radius: var(--pq-r-pill);
}
.pq-srs-stage__dots { display: inline-flex; gap: 3px; }
.pq-srs-stage__dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pq-border-strong);
}
.pq-srs-stage__dots span.is-on { background: var(--pq-brand); }
.pq-srs-stage__label {
  font-size: 11px;
  color: var(--pq-ink-500);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Arabic block — varies by mode ──────────────────────────────────── */
.pq-train-card__arabic {
  margin: 8px 0 20px;
  min-height: 80px;
}

/* Mode: default (whole arabic shown) */
.pq-train-arabic-text {
  font-family: var(--pq-font-arabic);
  font-size: calc(2.8rem * var(--pq-arabic-scale, 1));
  line-height: var(--pq-lh-arabic);
  color: var(--pq-ink-900);
  direction: rtl;
  text-align: right;
  margin: 0;
}
@media (max-width: 720px) {
  .pq-train-arabic-text { font-size: calc(2rem * var(--pq-arabic-scale, 1)); }
}

/* Mode: by-words — grid of word cells */
.pq-train-words {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  direction: rtl; /* RTL flow — first word is rightmost */
  align-items: flex-start;
}
.pq-word-cell {
  font-family: var(--pq-font-arabic);
  font-size: calc(1.8rem * var(--pq-arabic-scale, 1));
  line-height: 1.4;
  padding: 6px 12px 4px;
  border-radius: var(--pq-r-md);
  background: var(--pq-surface-2);
  border: 1.5px solid var(--pq-border);
  color: var(--pq-ink-900);
  cursor: pointer;
  transition: background var(--pq-dur-1), border-color var(--pq-dur-1), color var(--pq-dur-1);
  user-select: none;
  white-space: nowrap;
  position: relative;
}
.pq-word-cell:hover { background: var(--pq-bg-soft); border-color: var(--pq-border-strong); }
.pq-word-cell:focus-visible { outline: none; box-shadow: var(--pq-focus-ring); }

.pq-word-cell.is-masked {
  color: transparent;
  background: var(--pq-brand-soft);
  border-color: var(--pq-brand-soft-2);
  /* draw a row of dots to indicate hidden content */
  background-image: radial-gradient(circle, var(--pq-brand) 1.6px, transparent 2px);
  background-size: 10px 10px;
  background-repeat: repeat-x;
  background-position: center;
}
.pq-word-cell.is-masked:hover {
  background-color: var(--pq-brand-soft-2);
}
.pq-word-cell.is-revealed {
  color: var(--pq-ink-900);
  background: var(--pq-bg-soft);
  border-color: var(--pq-gold-soft);
  box-shadow: inset 0 -2px 0 var(--pq-gold);
}
.pq-word-cell.is-newest {
  animation: pqWordPulse 600ms var(--pq-ease);
}
@keyframes pqWordPulse {
  0%   { background: var(--pq-gold-soft); transform: translateY(2px); }
  100% { background: var(--pq-bg-soft);    transform: translateY(0); }
}

.pq-word-progress {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px;
  font-size: var(--pq-fs-caption);
  color: var(--pq-ink-500);
}
.pq-word-progress strong {
  color: var(--pq-ink-900);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pq-word-progress .pq-progress { flex: 1; max-width: 220px; }

/* ── Translit + translation (conditional on mode) ──────────────────── */
.pq-train-card__translit {
  font-family: var(--pq-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--pq-ink-500);
  margin: 0 0 12px;
  line-height: 1.55;
}
.pq-train-card__translation {
  font-size: 18px;
  line-height: 1.6;
  color: var(--pq-ink-700);
  margin: 0;
  text-wrap: pretty;
}
.pq-train-card__translation::before {
  content: open-quote;
  font-family: var(--pq-font-serif);
  font-size: 1.4em;
  color: var(--pq-ink-300);
  margin-right: 2px;
  vertical-align: -0.1em;
}
.pq-train-card__translation::after {
  content: close-quote;
  font-family: var(--pq-font-serif);
  font-size: 1.4em;
  color: var(--pq-ink-300);
  margin-left: 2px;
  vertical-align: -0.1em;
}

/* Mode classes on the card root toggle visibility */
.pq-train-card[data-mode="arabic-only"] .pq-train-card__translit,
.pq-train-card[data-mode="arabic-only"] .pq-train-card__translation,
.pq-train-card[data-mode="arabic-only"] .pq-train-card__tafsir,
.pq-train-card[data-mode="by-words"] .pq-train-card__translit,
.pq-train-card[data-mode="by-words"] .pq-train-card__translation,
.pq-train-card[data-mode="by-words"] .pq-train-card__tafsir,
.pq-train-card[data-mode="hide-translation"] .pq-train-card__translit,
.pq-train-card[data-mode="hide-translation"] .pq-train-card__translation,
.pq-train-card[data-mode="hide-tafsir"] .pq-train-card__tafsir { display: none; }

/* Show arabic text vs words */
.pq-train-card[data-mode="by-words"] .pq-train-arabic-text { display: none; }
.pq-train-card:not([data-mode="by-words"]) .pq-train-words { display: none; }

/* ── Training tools row (audio, reveal-all, hint) ──────────────────── */
.pq-train-tools {
  display: flex; align-items: center; gap: 10px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--pq-border);
  flex-wrap: wrap;
}
.pq-train-tools .pq-spacer { flex: 1; }

/* ── Grading row — 4 SRS buttons ───────────────────────────────────── */
.pq-grade-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 16px;
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-lg);
  box-shadow: var(--pq-shadow-1);
  margin-bottom: 22px;
}
.pq-grade-row__head {
  grid-column: 1 / -1;
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.pq-grade-row__head .pq-train-question {
  font-family: var(--pq-font-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--pq-ink-900);
}
.pq-grade-row__head small {
  font-size: var(--pq-fs-caption);
  color: var(--pq-ink-500);
}
@media (max-width: 720px) {
  .pq-grade-row { grid-template-columns: 1fr 1fr; }
}

.pq-grade-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 14px 12px;
  border-radius: var(--pq-r-md);
  border: 1px solid var(--pq-border-strong);
  background: var(--pq-surface);
  text-align: left;
  cursor: pointer;
  transition: background var(--pq-dur-1), border-color var(--pq-dur-1), transform var(--pq-dur-1);
  font: inherit;
  color: var(--pq-ink-900);
}
.pq-grade-card:hover { transform: translateY(-1px); }
.pq-grade-card:focus-visible { outline: none; box-shadow: var(--pq-focus-ring); }
.pq-grade-card strong {
  font-family: var(--pq-font-sans);
  font-weight: 600;
  font-size: 15px;
}
.pq-grade-card small {
  font-size: 12px;
  color: var(--pq-ink-500);
  font-variant-numeric: tabular-nums;
}
.pq-grade-card kbd {
  display: inline-block;
  margin-top: 6px;
  align-self: flex-start;
  padding: 1px 6px;
  font-size: 10px;
  font-family: ui-monospace, "SF Mono", monospace;
  background: var(--pq-ink-mute);
  color: var(--pq-ink-500);
  border-radius: 4px;
}

.pq-grade-card--fail    { border-color: var(--pq-danger-soft); }
.pq-grade-card--fail:hover    { background: var(--pq-danger-soft); border-color: var(--pq-danger); }
.pq-grade-card--fail strong   { color: var(--pq-danger); }

.pq-grade-card--hard    { border-color: var(--pq-gold-soft); }
.pq-grade-card--hard:hover    { background: var(--pq-gold-soft); border-color: var(--pq-gold-hover); }
.pq-grade-card--hard strong   { color: var(--pq-gold-hover); }

.pq-grade-card--good    { border-color: var(--pq-brand-soft-2); }
.pq-grade-card--good:hover    { background: var(--pq-brand-soft); border-color: var(--pq-brand); }
.pq-grade-card--good strong   { color: var(--pq-brand); }

.pq-grade-card--easy    {
  background: var(--pq-brand); color: var(--pq-brand-ink);
  border-color: var(--pq-brand);
}
.pq-grade-card--easy:hover { background: var(--pq-brand-hover); border-color: var(--pq-brand-hover); }
.pq-grade-card--easy strong { color: var(--pq-brand-ink); }
.pq-grade-card--easy small { color: rgba(252, 246, 231, 0.72); }
.pq-grade-card--easy kbd { background: rgba(252, 246, 231, 0.18); color: var(--pq-brand-ink); }

/* ── Up-next sidebar / footer (tiny — what comes after) ───────────── */
.pq-up-next {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-r-lg);
  font-size: var(--pq-fs-caption);
  color: var(--pq-ink-500);
}
.pq-up-next strong {
  font-family: var(--pq-font-serif);
  font-weight: 500;
  font-size: 15px;
  color: var(--pq-ink-900);
}
.pq-up-next .pq-spacer { flex: 1; }
.pq-up-next .pq-arabic-mini {
  font-family: var(--pq-font-arabic);
  font-size: 18px;
  color: var(--pq-ink-700);
  direction: rtl;
}