/* v64 — mobile UX, safe-area and accessibility refinement */
:root{
  --v64-tap:48px;
  --v64-edge:clamp(14px,4vw,20px);
  --flow-ease:cubic-bezier(.2,.72,.22,1);
}

html,body{min-height:100%;}
body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:none;
}

.app-host,.phone{
  min-height:100svh;
  min-height:100dvh;
}

.screen{
  min-width:0;
  padding-left:max(var(--v64-edge),env(safe-area-inset-left));
  padding-right:max(var(--v64-edge),env(safe-area-inset-right));
  -webkit-overflow-scrolling:touch;
}

:where(button,.btn,.link-button,.nav-item,.quick-choice,.pill,.profile-option,.answer,.continue-row,[role="button"]){
  min-height:var(--v64-tap);
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* Prevent Safari from auto-zooming form controls while preserving user page zoom. */
:where(input,select,textarea){font-size:max(16px,1em);}

/* Safe areas for notched iPhones and Android gesture navigation. */
.status-bar{padding-top:max(0px,env(safe-area-inset-top));}
.bottom-nav{padding-bottom:max(10px,env(safe-area-inset-bottom));}
.loading-card,.error-state{
  padding-top:max(20px,env(safe-area-inset-top));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  padding-left:max(20px,env(safe-area-inset-left));
  padding-right:max(20px,env(safe-area-inset-right));
}

/* More forgiving tap spacing on touch devices. */
@media (pointer:coarse){
  .nav-item{padding-block:7px;}
  .quick-choice{min-width:48px;}
  .answer{padding-block:14px;}
  .learner-card{padding-block:14px;}
  .continue-row{padding-block:8px;}
}

/* Narrow phones: avoid clipped headings/actions and keep cards readable. */
@media (max-width:380px){
  .top-row{gap:6px;}
  .top-title{min-width:0;max-width:62vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .dashboard-brand-hero{gap:10px;}
  .lesson-row{gap:9px;}
  .lesson-text{min-width:0;}
  .lesson-text strong,.lesson-text span{overflow-wrap:anywhere;}
  .bottom-nav{gap:3px;}
  .nav-item{min-width:0;}
}

/* Short landscape screens: use space efficiently instead of forcing a tall phone shell. */
@media (orientation:landscape) and (max-height:560px){
  .app-host{padding-block:0;}
  .phone{min-height:100dvh;height:auto;}
  .screen{min-height:calc(100dvh - 36px);height:auto;}
  .screen.centered{min-height:calc(100dvh - 36px);padding-top:10px;padding-bottom:max(12px,env(safe-area-inset-bottom));}
  .screen.centered .brand-mark{width:64px;height:64px;}
  .screen.centered .hero-arabic{min-height:86px;height:auto;}
}

/* Tablet / large-phone landscape: keep reading width comfortable. */
@media (min-width:700px){
  .page-copy,.hero-copy,.lesson-sub,.tip-text span{max-width:38rem;}
}

/* Keyboard and assistive-tech focus stays visible even inside rounded cards. */
:where(button,a,[role="button"],input,select,textarea,summary):focus-visible{
  outline:3px solid rgba(201,154,46,.72)!important;
  outline-offset:3px!important;
}

/* v65 — content-flow polish. Core render replaces the screen node, so a
   lightweight entry animation makes dashboard → lesson → quiz → completion
   feel continuous without touching curriculum or progression logic. */
.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}
}

/* Keep learning context visible while moving through lesson and quiz screens. */
.top-row{
  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 is easier to scan while staying visually quiet. */
.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,#043c2c,#0b6e4f);
  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));
}

/* Dashboard → lesson: make the continuation path obvious. */
.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);}

/* Quiz feedback enters clearly but without a jarring jump. */
.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 has a clearer finish and next-action hierarchy. */
.screen.completion .completion-icon{box-shadow:0 12px 30px rgba(201,154,46,.16);}
.screen.completion .score-card{
  border-color:rgba(201,154,46,.22);
  background:linear-gradient(180deg,#fff,#fffdf8);
}
.screen.completion .score-card + .quiz-report,
.screen.completion .quiz-report + .streak{margin-top:12px;}
.screen.completion .btn[data-action="next"]{box-shadow:0 12px 28px rgba(7,88,63,.19);}
.screen.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){
  .hearts{min-width:52px;font-size:13px;}
  .progress-track{height:8px;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
}

@media (forced-colors:active){
  .btn,.learner-card,.letter-card,.answer,.quick-choice,.lesson-card,.iqra-level,.bottom-nav{border:1px solid CanvasText;}
  .progress-fill{forced-color-adjust:none;background:Highlight;}
}