/* V7.14 · Minimal discovery cards, transparent organic color fields and an actual
   3D completion flip. Only Module 1's learning card UI is restyled. Quranic
   data, token order, writing, diacritics and comparison inks stay untouched. */
#module-one-view #cards.grid{
  column-gap:clamp(13px,2vw,26px);row-gap:clamp(19px,3vw,30px);
  overflow:visible;padding:12px 7px 22px;
}
#module-one-view #cards .item.modern-card{
  --card-cloud:#e1eee7;--card-edge:#d8e6e2;
  position:relative;isolation:isolate;overflow:visible!important;
  padding:13px 11px 10px;border:0!important;background:transparent!important;
  box-shadow:none!important;border-radius:0!important;min-width:0;
  scroll-margin-top:86px;
}
#module-one-view #cards .item.modern-card:nth-child(4n+2){--card-cloud:#e4f0f8;--card-edge:#d7e5ed}
#module-one-view #cards .item.modern-card:nth-child(4n+3){--card-cloud:#fae9df;--card-edge:#eadbd2}
#module-one-view #cards .item.modern-card:nth-child(4n){--card-cloud:#ede9f4;--card-edge:#e2dce8}
#module-one-view #cards .item.modern-card::before{
  content:"";position:absolute;inset:0 3px 0 2px;z-index:-1;pointer-events:none;
  background:var(--card-cloud);
  border-radius:36% 11% 27% 13% / 14% 27% 10% 24%;
  transform:rotate(-1.15deg);
}
#module-one-view #cards .item.modern-card:nth-child(even)::before{
  border-radius:12% 32% 12% 30% / 28% 11% 28% 13%;transform:rotate(1.2deg);
}
#module-one-view #cards .card-flip-scene{
  /* Perspective only for completed cards. */
  border-radius:20px;
  /* Omit filter:drop-shadow: it repaints expensive layers on scroll. */
}
#module-one-view #cards .card-flip-rotor{
  position:relative;min-height:330px;
}
#module-one-view #cards .modern-card.is-completed .card-flip-scene{perspective:1500px}
#module-one-view #cards .modern-card.is-completed .card-flip-rotor{
  transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.75,.2,1);
  transform:rotateY(180deg)
}
#module-one-view #cards .modern-card.flip-animate-pending .card-flip-rotor{transform:rotateY(0deg)}
#module-one-view #cards .card-face-front,
#module-one-view #cards .card-face-back{
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  border:1px solid var(--card-edge)!important;
  border-radius:19px;box-sizing:border-box;
  background:#fff!important;color:#184b54;min-height:330px;
  box-shadow:0 3px 15px rgba(27,70,76,.065);
}
#module-one-view #cards .card-face-front{
  position:relative;display:flex;flex-direction:column;
  padding:19px 21px 18px!important;text-align:right!important;cursor:pointer;
  border-top:1px solid var(--card-edge)!important;
  border-right:1px solid var(--card-edge)!important;
  width:100%;height:auto;
}
#module-one-view #cards .modern-card.same-surah .card-face-front{
  border:1px solid var(--card-edge)!important;background:#fff!important;
}
#module-one-view #cards .card-face-front:hover,
#module-one-view #cards .card-face-front:focus-visible{
  border-color:#a7c9c4!important;
}
#module-one-view #cards .modern-card .parent-top{justify-content:flex-start;gap:7px;}
#module-one-view #cards .modern-card .type-chip{
  background:#eff6f3!important;border:1px solid #e5eee9!important;
  color:#356b68!important;border-radius:999px;padding:5px 11px;
  font-size:11px;line-height:1.45;font-weight:750;
}
#module-one-view #cards .modern-card .type-chip.near{background:#f6f4ee!important;color:#6b664f!important;border-color:#eeeae0!important}
#module-one-view #cards .modern-card .surah-ident{
  background:#f0f6f4!important;color:#275b5c!important;border:1px solid #dce8e4!important;
  border-radius:999px!important;padding:5px 10px!important;font-size:11px;
}
#module-one-view #cards .modern-card .item-title{
  display:flex;justify-content:center;align-items:center;gap:10px;
  flex:1;margin:10px 0 7px;text-align:center;
}
#module-one-view #cards .modern-card .item-title strong,
#module-one-view #cards .modern-card.same-surah .item-title strong{
  font-size:clamp(22px,2.3vw,30px);font-weight:800;
  color:#105760!important;line-height:1.75;overflow-wrap:anywhere;
}
#module-one-view #cards .modern-card .item-icon{
  position:absolute;inset-inline-end:22px;top:18px;
  width:28px;height:28px;border:1px solid #dbe8e3!important;
  background:#f6faf8!important;color:#467979!important;
  border-radius:50%;font-size:16px;font-weight:700;
}
#module-one-view #cards .modern-card .item-desc{
  justify-content:center!important;flex-wrap:wrap;gap:8px 13px;
  color:#617879!important;font-size:12px;
}
#module-one-view #cards .modern-card .item-desc .ayah-count{
  margin:0!important;white-space:nowrap;background:#f5f9f7;
  border:1px solid #e2ebe7;border-radius:999px;
  padding:5px 11px;color:#426964!important;font-size:11px;
}
#module-one-view #cards .modern-card .card-open-hint{
  display:inline-flex;justify-content:center;align-items:center;gap:9px;
  margin-top:15px;align-self:center;border-radius:999px;
  background:#0d5963;color:#fff;padding:10px 23px;
  font-size:13px;font-weight:800;min-height:43px;
}
#module-one-view #cards .modern-card.open .card-flip-rotor,
#module-one-view #cards .modern-card.open .card-face-front{min-height:0}
#module-one-view #cards .modern-card.open .card-face-front{
  border-radius:18px 18px 0 0;padding:11px 16px!important;
}
#module-one-view #cards .modern-card.open .item-title{
  justify-content:space-between;text-align:right;flex:0;margin:5px 0;
}
#module-one-view #cards .modern-card.open .item-title strong{font-size:21px}
#module-one-view #cards .modern-card.open .item-icon{position:static;flex:none}
#module-one-view #cards .modern-card.open .card-open-hint{display:none}
#module-one-view #cards .modern-card.open .item-desc{justify-content:flex-start!important}
#module-one-view #cards .modern-card .tree,
#module-one-view #cards .modern-card.same-surah .tree{
  position:relative;padding:16px clamp(10px,2vw,21px) 19px;
  background:#fff!important;border:1px solid var(--card-edge)!important;
  border-top:0!important;border-radius:0 0 19px 19px;
}
#module-one-view #cards .modern-card .tree.hidden{display:none!important}
#module-one-view #cards .modern-card .card-step-count{font-variant-numeric:tabular-nums}
#module-one-view #cards .modern-stage-strip{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:0 auto 15px;direction:rtl;max-width:440px;
}
#module-one-view #cards .modern-stage-pill{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1;
  color:#647c7b;font-weight:750;font-size:11px;white-space:nowrap;
}
#module-one-view #cards .modern-stage-pill>span{
  width:27px;height:27px;border-radius:50%;border:1px solid #cfdfda;
  background:#f7faf9;display:grid;place-items:center;font-size:12px;
}
#module-one-view #cards .modern-stage-pill.active{color:#0d5963}
#module-one-view #cards .modern-stage-pill.active>span{background:#0d5963;color:white;border-color:#0d5963}
#module-one-view #cards .modern-stage-pill.finished>span{background:#e0eee8;color:#186158;border-color:#cee4d9}
#module-one-view #cards .modern-card .card-activity-intro{
  border:0!important;border-radius:9px;background:#f5f9f8!important;
}
#module-one-view #cards .modern-card .branch.colorful-branch,
#module-one-view #cards .modern-card.same-surah .branch.colorful-branch{
  border:1px solid #dce8e6!important;border-right:3px solid var(--branch-color)!important;
  border-radius:13px;background:#fff!important;
}
#module-one-view #cards .modern-card .branch.colorful-branch .branch-head>span,
#module-one-view #cards .modern-card.same-surah .branch.colorful-branch .branch-head>span{
  background:var(--branch-soft)!important;color:var(--branch-dark)!important;
  border:1px solid var(--branch-border)!important;
  font-size:11px;padding:4px 9px;
}
#module-one-view #cards .modern-card .verse{background:#fff!important}
#module-one-view #cards .modern-finish-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#0d5963!important;color:white!important;
  border:1px solid #0d5963!important;border-radius:11px;
  padding:10px 17px;font-weight:800;font-size:14px;min-height:46px;
  flex:1 1 100%;
}
#module-one-view #cards .modern-finish-btn:hover{background:#0b4852!important}
/* The reverse face is the card's saved completion state, not a claim of mastered recitation. */
#module-one-view #cards .card-face-back{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;padding:17px 15px;text-align:center;
  transform:rotateY(180deg);overflow:hidden;
}
#module-one-view #cards .card-back-tag{
  align-self:flex-start;color:#4f7872;font-size:11px;font-weight:750;
  border-radius:999px;background:#f1f7f4;padding:4px 10px;
}
#module-one-view #cards .card-back-star{
  position:relative;width:90px;height:90px;display:grid;place-items:center;flex:none;
}
#module-one-view #cards .card-back-star svg{width:84px;height:84px;overflow:visible}
#module-one-view #cards .card-back-star::before,
#module-one-view #cards .card-back-star::after{
  content:"✦";position:absolute;color:#edae4c;font-size:19px;
}
#module-one-view #cards .card-back-star::before{right:-13px;top:0}
#module-one-view #cards .card-back-star::after{left:-14px;bottom:5px;color:#9bd4c7;font-size:23px}
#module-one-view #cards .modern-card.flip-animate-pending .card-back-star,
#module-one-view #cards .modern-card.is-completed .card-back-star{animation:star-welcome .65s ease-out both}
@keyframes star-welcome{0%{transform:scale(.75)}70%{transform:scale(1.09)}100%{transform:scale(1)}}
#module-one-view #cards .card-back-heading{
  font-size:clamp(18px,2vw,23px);line-height:1.4;color:#0e5158;font-weight:850;
}
#module-one-view #cards .card-back-subtitle{color:#4d7170;font-size:11.5px;line-height:1.7;max-width:340px}
#module-one-view #cards .card-back-summary{
  color:#607776;background:#f6faf8;border:1px solid #e4eeea;
  padding:7px 12px;border-radius:11px;font-size:11px;
}
#module-one-view #cards .card-back-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-top:5px;width:100%}
#module-one-view #cards .card-back-actions button{
  flex:1 1 110px;min-height:41px;line-height:1.4;border-radius:10px;
  font-weight:800;font-size:12px;padding:8px 9px;cursor:pointer;
}
#module-one-view #cards .card-back-primary{background:#fff;border:1px solid #aac7c1;color:#135961}
#module-one-view #cards .card-back-secondary{background:#0d5963;border:1px solid #0d5963;color:#fff}
#module-one-view #cards .card-back-actions button:hover{filter:brightness(.95)}
#module-one-view #cards .modern-card :is(button,a):focus-visible{
  outline:3px solid #1c7781!important;outline-offset:3px;
}
@media(max-width:700px){
 #module-one-view #cards.grid{padding:7px 2px 21px;row-gap:18px}
 #module-one-view #cards .item.modern-card{padding:11px 9px 9px}
 #module-one-view #cards .card-face-front,#module-one-view #cards .card-face-back,
 #module-one-view #cards .card-flip-rotor{min-height:340px}
 #module-one-view #cards .modern-card .item-title strong{font-size:26px}
 #module-one-view #cards .card-face-front{padding:17px!important}
 #module-one-view #cards .modern-card.open .item-title strong{font-size:19px}
 #module-one-view #cards .card-back-heading{font-size:21px}
}
@media(prefers-reduced-motion:reduce){
 #module-one-view #cards .card-flip-rotor{transition:none!important}
 #module-one-view #cards .item.modern-card::before{transform:none!important}
}

/* v7.14 — limit layout work to cards near the viewport. Only 16 are mounted initially. */
#module-one-view #cards .modern-card:not(.open){
 content-visibility:auto;contain-intrinsic-size:auto 365px;
}
#module-one-view #cards .modern-more-wrap{
 grid-column:1/-1;display:flex;align-items:center;justify-content:center;
 flex-wrap:wrap;gap:12px;padding:16px 8px 8px;color:#597875;font-size:12px;
}
#module-one-view #cards .modern-more-wrap button{
 border:1px solid #c9deda;border-radius:12px;padding:11px 22px;
 background:#fff;color:#0d5963;font:inherit;font-weight:800;cursor:pointer;
}
#module-one-view #cards .modern-more-wrap button:hover{background:#eef8f4}
#module-one-view #cards .modern-quiz-progress{
 display:flex;align-items:center;justify-content:space-between;gap:13px;
 font-size:12px;font-weight:800;color:#1b6265;margin:9px 0 10px;
}
#module-one-view #cards .modern-mini-progress{display:inline-flex;flex-wrap:wrap;gap:4px;direction:rtl}
#module-one-view #cards .modern-mini-progress i{width:13px;height:5px;border-radius:5px;background:#dbe6e2}
#module-one-view #cards .modern-mini-progress i.passed{background:#78b9a5}
#module-one-view #cards .modern-mini-progress i.current{background:#0d5963}
#module-one-view #cards .modern-card .choice.answer-correct{
 border:2px solid #33876e!important;background:#e6f4eb!important;color:#155d49!important;
 font-weight:800;
}
#module-one-view #cards .modern-card .choice.answer-wrong{
 border:2px solid #c3666b!important;background:#fff1ef!important;color:#923a3e!important;
}
#module-one-view #cards .modern-card .feedback.good{border-color:#b3deca;background:#edf9f1;color:#175b49}
#module-one-view #cards .modern-card .feedback.try{border-color:#e8bbbb;background:#fff3f2;color:#9d3b3f}
#module-one-view #cards .modern-card .choice:disabled{opacity:1;cursor:default}
#module-one-view #cards .modern-card .instant-feedback{min-height:38px}
@media(prefers-reduced-motion:reduce){
 #module-one-view #cards .card-back-star{animation:none!important}
}

/* v7.14 — existing Mutashabehat introduction, updated for auto-feedback and earned flip. */
#mutashabehatStart .mutashabehat-quiz-note{
 display:flex;align-items:flex-start;gap:12px;margin:14px 0 0;
 padding:13px 16px;border:1px solid #c8dfd7;border-radius:15px;
 background:#f4faf7;color:#275b58;font-size:13px;line-height:1.85;
}
#mutashabehatStart .mutashabehat-quiz-note strong{color:#0d5963;font-weight:850}
#mutashabehatStart .mutashabehat-quiz-note-icon{
 flex:none;display:inline-grid;place-items:center;width:29px;height:29px;
 border-radius:50%;background:#ffedbb;color:#a16c14;font-size:17px;line-height:1;
}
@media(max-width:600px){
 #mutashabehatStart .mutashabehat-quiz-note{gap:9px;padding:11px 12px;font-size:12.5px;line-height:1.75}
 #mutashabehatStart .mutashabehat-quiz-note-icon{width:26px;height:26px;font-size:16px}
}

/* Collapsed / expanded same-surah cards: ONE surah label in the header.
   Preserve each surah's existing palette only on its identifying tag.
   The rest of the card deliberately stays neutral and independent of this tag. */
#module-one-view #cards .modern-card.same-surah .surah-ident {
  background:var(--accent-soft, #f0f6f4)!important;
  color:var(--accent-dark, #275b5c)!important;
  border:1px solid var(--accent-border, #dce8e4)!important;
  font-weight:850;
}

/* Final design audit: organic backing follows the actual compact card frame.
   The original fixed rotor height left a large empty pastel block beneath
   collapsed white cards. Keep fixed depth only on the completed flip face. */
#module-one-view #cards .modern-card:not(.is-completed) .card-flip-rotor {
  min-height:0!important;
}
#module-one-view #cards .modern-card.is-completed .card-flip-rotor {
  min-height:380px!important;
}
#module-one-view #cards .modern-card.is-completed .card-face-front {
  min-height:380px!important;
}
@media(max-width:600px){
  #module-one-view #cards .modern-card.is-completed .card-flip-rotor,
  #module-one-view #cards .modern-card.is-completed .card-face-front {
    min-height:340px!important;
  }
}