/* EnglishGate Reading Design v2
   Presentation-only design layer for the independent student Reading activity.
   Preserves passage content, direct-comprehension questions, grading, saved state,
   Back/Next flow, completion, and Reading/Listening separation. */

.eg-separated-activity[data-activity-type="reading"]{
  --eg-read-primary:#2563EB;
  --eg-read-text:#0F172A;
  --eg-read-muted:#64748B;
  --eg-read-bg:#F8FAFC;
  --eg-read-card:#FFFFFF;
  --eg-read-border:#E2E8F0;
  --eg-read-success:#16A34A;
  --eg-read-error:#DC2626;
  width:min(1180px,100%);
  margin:0 auto;
  color:var(--eg-read-text);
}

/* Orientation: clear title, purpose and saved progress. */
.eg-separated-activity[data-activity-type="reading"] .sep-hero{
  padding:22px 24px!important;
  border:1px solid var(--eg-read-border)!important;
  border-radius:18px!important;
  background:var(--eg-read-card)!important;
  box-shadow:0 6px 22px rgba(15,23,42,.045)!important;
}
.eg-separated-activity[data-activity-type="reading"] .eg-skill-kicker{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 9px;
  border-radius:999px;
  background:#EFF6FF!important;
  color:#1D4ED8!important;
  font-size:.72rem!important;
  font-weight:900!important;
  letter-spacing:.06em!important;
  text-transform:uppercase;
}
.eg-separated-activity[data-activity-type="reading"] .sep-hero h1{
  margin:8px 0 8px!important;
  color:var(--eg-read-text)!important;
  font-size:clamp(1.55rem,3vw,2.15rem)!important;
  line-height:1.16!important;
  letter-spacing:-.035em!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-hero p{
  max-width:66ch!important;
  color:var(--eg-read-muted)!important;
  line-height:1.55!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-status{
  color:var(--eg-read-muted)!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-status strong{
  color:var(--eg-read-text)!important;
  font-variant-numeric:tabular-nums;
}

/* Reading first, then response: generous line length and calm contrast. */
.eg-separated-activity[data-activity-type="reading"] .sep-layout{
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr)!important;
  gap:18px!important;
  margin-top:18px!important;
  align-items:start!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-source,
.eg-separated-activity[data-activity-type="reading"] .sep-question-panel{
  border:1px solid var(--eg-read-border)!important;
  border-radius:18px!important;
  background:var(--eg-read-card)!important;
  box-shadow:0 5px 18px rgba(15,23,42,.04)!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-source{
  overflow:hidden!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-source summary{
  position:relative;
  min-height:52px;
  display:flex;
  align-items:center;
  padding:13px 46px 13px 18px!important;
  border-bottom:1px solid var(--eg-read-border)!important;
  background:#F8FAFC!important;
  color:#1E3A8A!important;
  font-size:.9rem!important;
  font-weight:900!important;
  cursor:pointer;
}
.eg-separated-activity[data-activity-type="reading"] .sep-source summary::after{
  content:"⌄";
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-54%);
  color:#64748B;
  font-size:1.15rem;
}
.eg-separated-activity[data-activity-type="reading"] .sep-source:not([open]) summary::after{
  content:"›";
}
.eg-separated-activity[data-activity-type="reading"] .sep-reading-text{
  max-height:70vh!important;
  padding:26px clamp(20px,3vw,32px)!important;
  color:#1E293B!important;
  font-size:clamp(1rem,1.15vw,1.08rem)!important;
  line-height:1.85!important;
  letter-spacing:.002em!important;
  overflow:auto!important;
  scrollbar-gutter:stable;
  text-wrap:pretty;
}
.eg-separated-activity[data-activity-type="reading"] .sep-reading-text::selection{
  background:#DBEAFE;
  color:#0F172A;
}

/* Question surface: remove visual noise and emphasize one comprehension task. */
.eg-separated-activity[data-activity-type="reading"] .sep-question-panel{
  padding:20px!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-track{
  height:6px!important;
  margin-bottom:20px!important;
  border-radius:999px!important;
  background:#E2E8F0!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-track>span{
  background:var(--eg-read-primary)!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-meta span{
  padding:5px 9px!important;
  border-radius:999px!important;
  background:#EFF6FF!important;
  color:#1D4ED8!important;
  font-size:.7rem!important;
  font-weight:900!important;
  letter-spacing:.055em!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question h3{
  margin:13px 0 16px!important;
  color:var(--eg-read-text)!important;
  font-size:clamp(1.08rem,1.8vw,1.27rem)!important;
  line-height:1.48!important;
  letter-spacing:-.012em!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-short-answer{
  width:100%!important;
  min-height:128px!important;
  padding:13px 14px!important;
  border:1px solid #CBD5E1!important;
  border-radius:12px!important;
  background:#fff!important;
  color:var(--eg-read-text)!important;
  font:inherit!important;
  font-size:16px!important;
  line-height:1.6!important;
  resize:vertical!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-short-answer::placeholder{
  color:#94A3B8!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-short-answer:focus-visible,
.eg-separated-activity[data-activity-type="reading"] button:focus-visible,
.eg-separated-activity[data-activity-type="reading"] summary:focus-visible{
  outline:3px solid rgba(37,99,235,.22)!important;
  outline-offset:2px!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-short-answer:focus{
  border-color:#60A5FA!important;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)!important;
}

/* Teaching feedback remains visible and readable after submission. */
.eg-separated-activity[data-activity-type="reading"] .sep-question-feedback{
  margin-top:12px!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-feedback .feedback,
.eg-separated-activity[data-activity-type="reading"] #activityFeedback .feedback,
.eg-separated-activity[data-activity-type="reading"] #activityFeedback .performance-result{
  border-radius:12px!important;
  line-height:1.5!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-feedback .feedback.good{
  border:1px solid #BBF7D0!important;
  background:#F0FDF4!important;
  color:#166534!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-question-feedback .feedback.bad{
  border:1px solid #FECACA!important;
  background:#FEF2F2!important;
  color:#991B1B!important;
}

/* Back/Next stays exactly the same behavior; presentation only. */
.eg-separated-activity[data-activity-type="reading"] .sep-nav{
  gap:10px!important;
  margin-top:18px!important;
  padding-top:16px!important;
  border-top:1px solid var(--eg-read-border)!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-nav button{
  min-height:48px!important;
  border-radius:12px!important;
  font-size:.94rem!important;
  font-weight:800!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-nav .ghost-btn{
  border:1px solid #CBD5E1!important;
  background:#fff!important;
  color:#334155!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-nav .primary-btn{
  background:var(--eg-read-primary)!important;
  color:#fff!important;
  box-shadow:0 6px 16px rgba(37,99,235,.15)!important;
}
.eg-separated-activity[data-activity-type="reading"] .sep-nav button:disabled{
  box-shadow:none!important;
  opacity:.45!important;
}

@media(max-width:980px){
  .eg-separated-activity[data-activity-type="reading"] .sep-layout{
    grid-template-columns:1fr!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-reading-text{
    max-height:none!important;
  }
}

@media(max-width:640px){
  .eg-separated-activity[data-activity-type="reading"]{
    width:100%;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-hero{
    padding:16px!important;
    border-radius:15px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-status{
    margin-top:2px!important;
    padding-top:11px!important;
    border-top:1px solid var(--eg-read-border)!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-layout{
    gap:12px!important;
    margin-top:12px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-source,
  .eg-separated-activity[data-activity-type="reading"] .sep-question-panel{
    border-radius:15px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-reading-text{
    padding:18px 16px!important;
    font-size:1rem!important;
    line-height:1.78!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-question-panel{
    padding:16px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-question h3{
    font-size:1.08rem!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-nav{
    position:sticky!important;
    bottom:0!important;
    z-index:4!important;
    margin-left:-16px!important;
    margin-right:-16px!important;
    margin-bottom:-16px!important;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
    background:rgba(255,255,255,.985)!important;
    box-shadow:0 -9px 24px rgba(15,23,42,.055)!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-nav button{
    flex:1!important;
    min-width:0!important;
    min-height:50px!important;
  }
}

@media(max-width:390px){
  .eg-separated-activity[data-activity-type="reading"] .sep-hero h1{
    font-size:1.42rem!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-reading-text{
    padding:16px 14px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-question-panel{
    padding:14px!important;
  }
  .eg-separated-activity[data-activity-type="reading"] .sep-nav{
    margin-left:-14px!important;
    margin-right:-14px!important;
    margin-bottom:-14px!important;
    padding-left:14px!important;
    padding-right:14px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .eg-separated-activity[data-activity-type="reading"] *,
  .eg-separated-activity[data-activity-type="reading"] *::before,
  .eg-separated-activity[data-activity-type="reading"] *::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}