/* Recall stage: one fixed recitation task, bulb-only ayah access, and a
   completion button. Qur'anic content remains untouched. */
#module-one-view #cards .mla-recall-activity {
  display: grid;
  gap: 12px;
  margin: 10px 0;
  padding: 0;
  border: 0;
  background: transparent;
}

#module-one-view #cards .mla-recall-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  align-items: stretch;
  gap: 12px;
  direction: rtl;
}

#module-one-view #cards .mla-recall-main {
  min-width: 0;
  padding: 15px 18px;
  border: 1px solid #9dcfc3;
  border-right: 5px solid #d2a340;
  border-radius: 16px;
  background: linear-gradient(105deg, #f4fbf7, #e8f4f1);
}

#module-one-view #cards .mla-recite-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0 0 8px;
  color: #0d5361;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
}

#module-one-view #cards .mla-mic-icon {
  display: grid;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #0b7183;
  box-shadow: 0 3px 8px rgba(11, 113, 131, .18);
}

#module-one-view #cards .mla-mic-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

#module-one-view #cards .mla-question {
  max-width: 680px;
  margin: 2px auto 12px;
  color: #123f5a;
  font-size: clamp(21px, 2.8vw, 27px);
  line-height: 1.65;
  font-weight: 900;
  text-align: center;
}

#module-one-view #cards .mla-recall-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: none;
  margin: 0 auto 9px;
  font-size: clamp(19px, 2.5vw, 25px);
}

#module-one-view #cards .mla-recall-prompt .mla-mic-icon { width: 38px; height: 38px; }
#module-one-view #cards .mla-mutashabihat-cue {
  max-width: 720px;
  margin: 0 auto 12px;
  padding: 10px 16px;
  border: 1px solid #d2e5df;
  border-radius: 12px;
  color: #0a6d7d;
  background: rgba(255,255,255,.78);
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.8;
  font-weight: 900;
  text-align: center;
}

#module-one-view #cards .mla-verse-references {
  display: flex;
  justify-content: center;
  gap: 7px;
  flex-wrap: wrap;
  padding: 8px;
  border: 1px dashed #b8d4cf;
  border-radius: 13px;
  background: rgba(255,255,255,.68);
}

#module-one-view #cards .mla-verse-references span {
  display: inline-flex;
  align-items: center;
  min-height: 37px;
  padding: 5px 11px;
  border: 1px solid #d7e8e2;
  border-radius: 10px;
  color: #305d70;
  background: #fff;
  font-size: 12px;
  font-weight: 750;
}

#module-one-view #cards .mla-ayah-option {
  display: flex;
  min-width: 0;
  justify-content: center;
  align-items: flex-start;
  align-self: start;
}

#module-one-view #cards .mla-ayah-button {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px dashed #d3ad55;
  border-radius: 16px;
  color: #8b6818;
  background: linear-gradient(135deg, #fffdf6, #fff4d9);
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

#module-one-view #cards .mla-ayah-button:hover,
#module-one-view #cards .mla-ayah-button[aria-expanded="true"] { background: #fff0c6; border-color: #c49d41; }

#module-one-view #cards .mla-ayah-icon {
  display: grid;
  width: 39px;
  height: 39px;
  place-items: center;
  border-radius: 12px;
  color: #846219;
  background: #f9e8ae;
}

#module-one-view #cards .mla-ayah-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

#module-one-view #cards .mla-ayah-panel {
  display: grid;
  gap: 9px;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #b8d4cf;
  border-radius: 14px;
  background: #f7fbf9;
}

#module-one-view #cards .mla-ayah-panel[hidden] { display: none; }
#module-one-view #cards .mla-ayah-entry { padding: 9px 11px; border: 1px solid #d6e6e1; border-radius: 11px; background: #fff; }
#module-one-view #cards .mla-ayah-reference { margin: 0 0 5px; color: #496772; font-size: 12px; font-weight: 800; text-align: center; }
#module-one-view #cards .mla-ayah-text { margin: 0; color: #123f5a; font-size: clamp(19px, 2.3vw, 24px); line-height: 2; font-weight: 650; text-align: center; }

#module-one-view #cards .mla-completion-button {
  display: grid;
  width: 100%;
  min-height: 62px;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 9px 13px;
  border: 2px solid #0b7183;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(105deg, #087487, #0b6177);
  box-shadow: 0 5px 12px rgba(8, 82, 103, .16);
  font: inherit;
  text-align: right;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

#module-one-view #cards .mla-completion-button:hover { transform: translateY(-1px); box-shadow: 0 8px 16px rgba(8, 82, 103, .2); }
#module-one-view #cards .mla-completion-button[aria-disabled="true"] { cursor: default; }
#module-one-view #cards .mla-completion-check { display: grid; width: 32px; height: 32px; place-items: center; border: 2px solid rgba(255,255,255,.9); border-radius: 9px; color: #0b6177; background: rgba(255,255,255,.12); }
#module-one-view #cards .mla-completion-check svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.7); transition: opacity .15s ease, transform .15s ease; }
#module-one-view #cards .mla-completion-copy { min-width: 0; text-align: center; }
#module-one-view #cards .mla-completion-copy strong { display: block; font-size: 16px; line-height: 1.4; font-weight: 900; }
#module-one-view #cards .mla-completion-next { display: flex; align-items: center; justify-content: center; gap: 5px; direction: rtl; white-space: nowrap; color: #f9e7b0; }
#module-one-view #cards .mla-completion-next small { font-size: 11px; line-height: 1.4; font-weight: 800; }
#module-one-view #cards .mla-completion-arrow { color: #f5d988; font-size: 21px; line-height: 1; font-weight: 900; }
#module-one-view #cards .mla-completion-button.is-complete { border-color: #a88020; background: linear-gradient(105deg, #08735f, #0b665d); }
#module-one-view #cards .mla-completion-button.is-complete .mla-completion-check { border-color: #f6df9c; background: #f6df9c; }
#module-one-view #cards .mla-completion-button.is-complete .mla-completion-check svg { opacity: 1; transform: scale(1); }
#module-one-view #cards .mla-live-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

#module-one-view #cards .mla-recall-activity button:focus-visible { outline: 3px solid #c37d00; outline-offset: 3px; }

@media (max-width: 640px) {
  #module-one-view #cards .mla-question { margin: 3px auto 10px; line-height: 1.6; }
  #module-one-view #cards .mla-verse-references { gap: 5px; padding: 7px; }
  #module-one-view #cards .mla-verse-references span { min-height: 35px; padding: 5px 8px; font-size: 11px; }
  #module-one-view #cards .mla-recall-layout { grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; }
  #module-one-view #cards .mla-recall-main { padding: 13px 12px; }
  #module-one-view #cards .mla-recall-prompt { gap: 7px; font-size: clamp(18px, 4.5vw, 22px); }
  #module-one-view #cards .mla-recall-prompt .mla-mic-icon { width: 31px; height: 31px; }
  #module-one-view #cards .mla-recall-prompt .mla-mic-icon svg { width: 18px; height: 18px; }
  #module-one-view #cards .mla-mutashabihat-cue { margin-bottom: 9px; padding: 8px 10px; font-size: clamp(19px, 5vw, 23px); }
  #module-one-view #cards .mla-ayah-option { justify-content: flex-start; }
  #module-one-view #cards .mla-ayah-button { width: 46px; height: 46px; border-radius: 13px; }
  #module-one-view #cards .mla-ayah-icon { width: 32px; height: 32px; border-radius: 10px; }
  #module-one-view #cards .mla-ayah-icon svg { width: 20px; height: 20px; }
  #module-one-view #cards .mla-ayah-panel { gap: 7px; padding: 7px; }
  #module-one-view #cards .mla-ayah-entry { padding: 8px; }
  #module-one-view #cards .mla-ayah-text { font-size: 19px; line-height: 2; }
  #module-one-view #cards .mla-completion-button { min-height: 58px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 6px; padding: 8px 9px; }
  #module-one-view #cards .mla-completion-check { width: 29px; height: 29px; }
  #module-one-view #cards .mla-completion-copy strong { font-size: 14px; }
  #module-one-view #cards .mla-completion-next { gap: 3px; }
  #module-one-view #cards .mla-completion-next small { font-size: 10px; }
  #module-one-view #cards .mla-completion-arrow { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #module-one-view #cards .mla-completion-button,
  #module-one-view #cards .mla-completion-check svg { transition: none; }
  #module-one-view #cards .mla-completion-button:hover { transform: none; }
}