/*
 * 敬老版独立课页桥接样式
 *
 * 只负责课页外壳：全宽、独立返回栏、iframe 嵌入和无障碍兜底。
 * 字号继续由 elder-font-size.css/js 管理，表情继续由 elder-mood.css/js 管理。
 */

/* 标准课页不再重复显示章内左栏，正文使用整个可用宽度。 */
:root{--elder-page-max:1600px}
.el-page,
.med-page,
.lesson-shell,
.comm-page,
.solo-page,
.single-page,
html[data-elder-independent] .page{
  display:block!important;
  width:100%;
  max-width:var(--elder-page-max)!important;
}
.el-top-in,
.med-top-in,
.lesson-top-in,
.elder-independent-top-in,
.solo-top .el-top-in,
.course-top .el-top-in{
  width:100%;
  max-width:var(--elder-page-max)!important;
}
.el-rail,
html[data-elder-independent] .rail{display:none!important}
.el-main,
.med-main,
html[data-elder-independent] .content{
  width:100%;
  max-width:none!important;
  min-width:0;
  margin:0 auto;
}

/* 旧顶栏信息在独立页和阅读器里都会重复，由桥接栏统一替代。 */
.el-top,
.topbar{display:none!important}

.elder-independent-top{
  position:sticky;
  top:0;
  z-index:80;
  min-height:64px;
  border-bottom:1px solid var(--line,rgba(23,61,50,.14));
  background:rgba(251,250,244,.94);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.elder-independent-top-in{
  width:min(var(--elder-page-max,1600px),100%);
  min-height:64px;
  margin:0 auto;
  padding:8px 30px;
  display:flex;
  align-items:center;
  gap:16px;
}
.elder-independent-back{
  min-height:44px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line,rgba(23,61,50,.14));
  border-radius:12px;
  color:var(--ink-2,#31574b);
  background:var(--card,#fffefa);
  font-size:16px;
  font-weight:760;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
}
.elder-independent-back:hover{background:var(--sage-soft,#e8efe8)}
.elder-independent-back:focus-visible{
  outline:3px solid rgba(189,105,85,.36);
  outline-offset:3px;
}
.elder-independent-top-spacer{flex:1}

/*
 * 选择后有些课会同时加 selected 和 correct-choice：
 * correct-choice 把背景改成浅绿，却沿用了 selected 的白字，文字几乎消失。
 * 所有课统一用深绿底白字表达“这是您刚才选的”，对错说明放在下方反馈区。
 */
button.selected{
  color:#fff!important;
  border-color:var(--forest,#234f40)!important;
  background:var(--forest,#234f40)!important;
  opacity:1!important;
  transition:none!important;
}

/* 独立敬老课不提供登录入口，也不弹登录保存进度提示。 */
html[data-elder-independent] #authSlot,
html[data-elder-independent] a[href^="/auth/login"],
html[data-elder-independent] .save-prompt{
  display:none!important;
}

/* 已学课程默认进入回看态：保留总结，课程节点仍在 DOM 中供原脚本安全查询。 */
html[data-elder-review] [data-elder-review-hidden]{
  display:none!important;
}
html[data-elder-review] [data-elder-review-summary]{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  animation:none!important;
}
html[data-elder-review] [data-elder-review-container]{
  min-height:0!important;
}
html[data-elder-review] *,
html[data-elder-review] *:before,
html[data-elder-review] *:after{
  animation:none!important;
  transition:none!important;
}

.elder-review-prompt{
  width:min(1120px,calc(100% - 60px));
  margin:28px auto 6px;
  padding:26px 28px;
  display:flex;
  align-items:center;
  gap:28px;
  border:2px solid rgba(35,79,64,.2);
  border-radius:22px;
  color:var(--ink,#173d32);
  background:linear-gradient(135deg,var(--sage-soft,#e8efe8),var(--card,#fffefa));
  box-shadow:0 14px 38px rgba(35,79,64,.1);
}
.elder-review-prompt-copy{flex:1;min-width:0}
.elder-review-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--clay,#bd6955);
  font-size:14px;
  font-weight:820;
  letter-spacing:.08em;
}
.elder-review-prompt h2{
  margin:0;
  font:700 30px/1.35 var(--serif,"Songti SC","STSong",serif);
}
.elder-review-prompt p{
  margin:8px 0 0;
  color:var(--ink-2,#31574b);
  font-size:18px;
  line-height:1.7;
}
.elder-review-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}
.elder-review-actions button{
  min-height:54px;
  padding:0 19px;
  border:2px solid var(--forest,#234f40);
  border-radius:13px;
  cursor:pointer;
  font-size:17px!important;
  font-weight:800;
  line-height:1.3;
}
.elder-review-summary-button{
  color:#fff;
  background:var(--forest,#234f40);
}
.elder-review-replay-button{
  color:var(--forest,#234f40);
  background:var(--card,#fffefa);
}
.elder-review-actions button:hover{filter:brightness(.96)}
.elder-review-actions button:focus-visible{
  outline:3px solid rgba(189,105,85,.42);
  outline-offset:3px;
}
.elder-review-actions button:disabled{
  cursor:not-allowed;
  opacity:.58;
}

/* 阅读器已有自己的顶栏和翻页区，iframe 内只保留课文。 */
html[data-elder-embedded],
html[data-elder-embedded] body{
  width:100%;
  min-height:100%;
}
html[data-elder-embedded] body{
  overflow-x:hidden;
}
html[data-elder-embedded] .elder-independent-top,
html[data-elder-embedded] .lesson-back,
html[data-elder-embedded] .solo-back,
html[data-elder-embedded] .solo-top,
html[data-elder-embedded] .bottom-back,
html[data-elder-embedded] a.back-link{
  display:none!important;
}
html[data-elder-embedded] .el-page,
html[data-elder-embedded] .page{
  max-width:none!important;
  margin:0;
  padding-top:24px;
}

@media(max-width:820px){
  .el-page,
  html[data-elder-independent] .page{padding:22px 17px 65px}
  .elder-independent-top-in{padding:8px 17px}
  .elder-review-prompt{
    width:calc(100% - 34px);
    padding:22px;
    align-items:stretch;
    flex-direction:column;
    gap:18px;
  }
  .elder-review-actions{justify-content:flex-start}
}

@media(max-width:560px){
  .elder-independent-top-in{
    min-height:60px;
    padding:7px 12px;
    gap:8px;
  }
  .elder-independent-back{
    min-height:42px;
    padding:0 11px;
    font-size:15px;
  }
  .elder-independent-top .elder-font-controls>span{display:none}
  .elder-independent-top .elder-font-controls button{
    min-width:34px;
    padding:0 7px;
  }
  html[data-elder-embedded] .el-page,
  html[data-elder-embedded] .page{padding:16px 12px 52px}
  .elder-review-prompt{
    width:calc(100% - 24px);
    margin-top:14px;
    padding:19px 17px;
    border-radius:17px;
  }
  .elder-review-prompt h2{font-size:27px}
  .elder-review-prompt p{font-size:17px}
  .elder-review-actions{display:grid;grid-template-columns:1fr}
  .elder-review-actions button{width:100%;min-height:56px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .elder-independent-top *,
  .elder-independent-top *:before,
  .elder-independent-top *:after{
    animation:none!important;
    transition:none!important;
  }
}