/* 学习入口与分层阅读。与原来的构成主义网格共用色彩和字体。 */
[hidden] { display: none !important; }
.learning-label { font-size: .78rem; letter-spacing: .14em; font-weight: 700; color: var(--red); }
.learning-hero .week-hero-inner { max-width: 64rem; padding-block: 2.5rem; }
.learning-hero h1 { font-family: var(--sans); letter-spacing: -.035em; font-weight: 750; }
.lesson-intro { display: grid; gap: 1.5rem; margin-top: 1.5rem; }
.lesson-focus { font-size: clamp(1.3rem, 3vw, 1.9rem); line-height: 1.55; font-weight: 650; }
.lesson-plain { margin-top: .7rem; color: var(--ink-2); max-width: 38em; }
.lesson-transfer { border-left: 3px solid var(--red); padding: .5rem 0 .5rem 1rem; }
.lesson-transfer p { margin-top: .45rem; font-size: .95rem; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.lesson-prep { margin-top: 1.25rem; color: var(--muted); font-size: .9rem; }
.lesson-prep strong { color: var(--ink); }
.lesson-plan { margin-top: 1.5rem; border-top: var(--line-hair); }
.lesson-plan > summary, .deeper > summary { cursor: pointer; padding: .85rem 0; min-height: 2.75rem; font-weight: 600; }
.lesson-plan .agenda { margin-top: 0; }
.lesson-plan .prep-box { border-left-color: var(--hairline); }
.learning-hero .outcomes { box-shadow: none; border: 0; border-top: var(--line-hair); background: transparent; }
.learning-hero .outcome { padding-left: 0; padding-right: 1rem; }
.learning-hero .outcome + .outcome { padding-left: 1rem; }
.learning-hero .outcome .o-k { font-size: .8rem; }
.lesson-hint { color: var(--muted); font-size: .9rem; margin-top: 1rem; }
.micro-task { padding: 1.4rem; margin-top: 1.5rem; background: var(--paper-deep); }
.micro-task h3 { font-size: 1.1rem; margin-top: .4rem; }
.micro-task p { margin-top: .65rem; }
.micro-task a { display: inline-flex; align-items: center; min-height: 2.75rem; margin-top: .5rem; color: var(--red); font-weight: 650; }
.deeper { margin-top: .8rem; border-block: var(--line-hair); font-size: .92rem; }
.deeper > summary { color: var(--muted); }
.deeper[open] { padding-bottom: 1rem; }
.deeper[open] > summary { color: var(--ink); }
.learning-page .concept { margin-top: 2rem; padding-top: 1.5rem; border-top: var(--line-hair); }
.learning-page .concept .t { font-size: 1.15rem; }
.learning-page .read-section { scroll-margin-top: 9rem; }
.learning-page .read-section > h2 { letter-spacing: .02em; }
.learning-page .lesson-nav a { font-size: .9rem; letter-spacing: 0; }
.learning-page .case-item { padding: 0 0 1.5rem; border-left: 0; border-bottom: var(--line-hair); }
.learning-page .case-img { max-width: 100%; }
.learning-page .case-img img { max-height: 32rem; object-fit: contain; }
.self-check { margin-top: 1.5rem; padding: 1.5rem; background: var(--paper-raise); border-top: 3px solid var(--red); }
.self-check h3 { font-size: 1.2rem; line-height: 1.65; }
.check-options { display: grid; gap: .65rem; margin-top: 1.2rem; }
.check-option { display: flex; gap: .85rem; align-items: baseline; width: 100%; text-align: left; padding: .8rem 1rem; min-height: 3rem; border: var(--line-hair); background: var(--paper); color: var(--ink); font: inherit; cursor: pointer; transition: background .2s, border-color .2s; }
.check-option:hover { border-color: var(--ink); background: var(--paper-deep); }
.check-option[aria-pressed="true"] { border-color: var(--ink); background: var(--paper-deep); }
.check-option.is-correct { border-color: var(--blue); }
.check-option b { font: italic 1.15rem var(--latin-serif); }
.check-feedback { margin-top: 1rem; border-left: 3px solid var(--blue); padding: .6rem 1rem; }
.check-feedback strong { display: block; }
.check-feedback p { margin-top: .3rem; }
.reflection { margin-top: 1.5rem; }
.reflection label { display: block; font-weight: 650; }
.reflection textarea { width: 100%; margin-top: .65rem; padding: .9rem; min-height: 8rem; border: var(--line-hair); background: var(--paper-raise); color: var(--ink); font: inherit; resize: vertical; }
.reflection-example { margin-top: .6rem; font-size: .9rem; color: var(--muted); }
.note-actions { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; margin-top: .7rem; }
.note-status { font-size: .85rem; color: var(--muted); }
.task-checklist { border-top: var(--line-hair); margin-top: 1.5rem; padding-top: 1rem; }
.task-checklist label { display: flex; gap: .8rem; align-items: flex-start; padding: .65rem 0; min-height: 2.75rem; cursor: pointer; }
.task-checklist input { margin-top: .4rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--red); }
.learning-page .completion-card { background: var(--paper-deep); color: var(--ink); border: 0; }
.learning-page .completion-card .cc-d { color: var(--muted); }
.learning-page .complete-btn { color: var(--ink); border-color: var(--ink); letter-spacing: 0; }
@media (min-width: 768px) {
  .lesson-intro { grid-template-columns: 1.6fr 1fr; gap: 2.5rem; align-items: start; }
  .learning-page .read-page { max-width: 52rem; }
  .learning-page .lesson-nav .ln-inner { max-width: 52rem; }
}
@media (max-width: 768px) {
  .learning-hero .outcome + .outcome { padding-left: 0; }
  .lesson-actions .btn { flex-grow: 1; justify-content: center; }
  .learning-hero h1 { font-size: 2rem; }
  .self-check, .micro-task { padding: 1.1rem; }
}