/* v65 — content-flow polish: calmer transitions, clearer progress, lower visual friction */
:root{
  --flow-ease:cubic-bezier(.2,.72,.22,1);
  --flow-green:#0b6e4f;
  --flow-green-dark:#043c2c;
  --flow-gold:#c99a2e;
}

.screen{animation:flow-screen-in .24s var(--flow-ease) both;}
@keyframes flow-screen-in{
  from{opacity:.72;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

.top-row.centered-title{
  position:sticky;
  top:0;
  z-index:9;
  margin:-2px -2px 8px;
  padding:6px 2px 8px;
  background:linear-gradient(180deg,rgba(255,255,255,.98) 72%,rgba(255,255,255,.82));
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.progress-track{
  height:9px;
  overflow:hidden;
  border:1px solid rgba(7,88,63,.08);
  background:rgba(7,88,63,.075);
  box-shadow:inset 0 1px 2px rgba(4,60,44,.04);
}
.progress-fill{
  position:relative;
  min-width:4px;
  background:linear-gradient(90deg,var(--flow-green-dark),var(--flow-green));
  box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;
  transition:width .28s var(--flow-ease);
}
.progress-fill::after{
  content:"";
  position:absolute;
  inset:0 0 0 auto;
  width:28px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34));
}

.lesson-card{border-color:rgba(7,88,63,.15);}
.continue-row{
  margin-top:2px;
  padding:8px 10px;
  background:rgba(11,110,79,.045);
  border:1px solid rgba(11,110,79,.08);
}
.continue-row .arrow{transition:transform .16s var(--flow-ease);}
.continue-row:active .arrow{transform:translateX(2px)}

.practice-card{margin-bottom:4px}
.practice-card + .spacer + .btn{margin-top:2px}
.answer{transition:border-color .16s ease,background .16s ease,transform .12s ease,box-shadow .16s ease;}
.feedback{animation:flow-feedback-in .18s var(--flow-ease) both;}
@keyframes flow-feedback-in{
  from{opacity:0;transform:translateY(4px)}
  to{opacity:1;transform:none}
}
.hearts{min-width:62px;text-align:right;letter-spacing:1px;}
.completion-icon{box-shadow:0 12px 30px rgba(201,154,46,.16);}
.score-card{border-color:rgba(201,154,46,.22);background:linear-gradient(180deg,#fff,#fffdf8);}
.score-card + .quiz-report,.quiz-report + .streak{margin-top:12px}
.completion .btn[data-action="next"]{box-shadow:0 12px 28px rgba(7,88,63,.19);}
.completion .btn.secondary{margin-top:8px}
.top-title,.lesson-text,.feedback-text,.quiz-report-copy{min-width:0}
.top-title,.feedback-text span,.quiz-report-copy small{overflow-wrap:anywhere}

@media (max-width:359px){
  .top-row.centered-title{gap:6px}
  .hearts{min-width:52px;font-size:13px}
  .progress-track{height:8px}
}

@media (prefers-reduced-motion:reduce){
  .screen,.feedback{animation:none!important}
  .progress-fill,.answer,.continue-row .arrow{transition:none!important}
}


/* v67 — accessibility and Arabic-reading resilience */
button,[role="button"],.answer,.letter-card,.quick-choice,.nav-item{
  touch-action:manipulation;
}
button:focus-visible,[role="button"]:focus-visible,.answer:focus-visible,.letter-card:focus-visible,.quick-choice:focus-visible,.nav-item:focus-visible{
  outline:3px solid currentColor;
  outline-offset:3px;
}
.arabic-display,.arabic-letter,[lang="ar"]{
  font-kerning:normal;
  font-variant-ligatures:common-ligatures;
  text-rendering:optimizeLegibility;
}
.letter-card,.quick-choice,.answer,.btn,.continue-row,.nav-item{
  min-height:44px;
}
@media (max-width:359px){
  .arabic-letter{line-height:1.35}
}
@media (prefers-contrast:more){
  .progress-track,.lesson-card,.answer,.letter-card,.quick-choice{border-width:2px}
  .page-copy,.lesson-sub,.feedback-text span,.quiz-report-copy small{opacity:1}
}