/* 回忆录引导式书页：五步进度、一张「下一步」卡、最多 3 条待办；「整本书」页的功能列表；新建三步向导。
 * 只用 --vg-* 令牌（深绿主题由 app-film.css 定义）；只作用于屏幕，印刷沿用原规则。 */
@media screen {
  body.theme-c .mm-app .mm-guide { max-width: 1040px; margin: 0 auto; padding: 24px 16px 96px; display: flex; flex-direction: column; gap: 32px; }
  body.theme-c .mm-app .mm-guide-hello { margin: 0; line-height: 1.7; }
  body.theme-c .mm-app .mm-guide-hello-name { font: 600 20px/1.5 var(--vg-serif); }
  body.theme-c .mm-app .mm-guide-hello p { margin: 8px 0 0; }

  body.theme-c .mm-app .mm-sr, body.theme-c .mm-wizard .mm-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* 五步进度 */
  body.theme-c .mm-app .mm-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  body.theme-c .mm-app .mm-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; position: relative; }
  body.theme-c .mm-app .mm-step::after { content: ""; position: absolute; top: 16px; left: 40px; right: 0; height: 2px; background: var(--vg-line); }
  body.theme-c .mm-app .mm-step:last-child::after { display: none; }
  body.theme-c .mm-app .mm-step.is-done::after { background: var(--vg-seal); opacity: .6; }
  body.theme-c .mm-app .mm-step-dot { width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--vg-line-strong); color: var(--vg-ink3); display: flex; align-items: center; justify-content: center; font: 600 14px/1 var(--vg-sans); background: var(--vg-bg); position: relative; z-index: 1; }
  body.theme-c .mm-app .mm-step.is-done .mm-step-dot { background: var(--vg-seal); border-color: var(--vg-seal); color: var(--vg-on-seal); }
  body.theme-c .mm-app .mm-step.is-current .mm-step-dot { border: 2px solid var(--vg-seal); color: var(--vg-seal); }
  body.theme-c .mm-app .mm-step-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  body.theme-c .mm-app .mm-step-text b { font: 600 14px/1.4 var(--vg-sans); color: var(--vg-ink2); }
  body.theme-c .mm-app .mm-step.is-done .mm-step-text b { color: var(--vg-ink); }
  body.theme-c .mm-app .mm-step.is-current .mm-step-text b { color: var(--vg-seal); }
  body.theme-c .mm-app .mm-step-text small { font-size: 12px; line-height: 1.45; color: var(--vg-ink3); }
  body.theme-c .mm-app .mm-step.is-warn .mm-step-text small { color: var(--vg-wait); }

  /* 下一步卡 */
  body.theme-c .mm-app .mm-next { background: var(--vg-paper); border: 1px solid var(--vg-line); border-radius: 16px; padding: 24px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; outline: none; }
  body.theme-c .mm-app .mm-next:focus-visible { box-shadow: 0 0 0 3px var(--vg-info); }
  body.theme-c .mm-app .mm-next-photo, body.theme-c .mm-app .mm-next-icon { flex: 1 1 260px; max-width: 360px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; }
  body.theme-c .mm-app .mm-next-photo .mm-photo-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; }
  body.theme-c .mm-app .mm-next-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
  body.theme-c .mm-app .mm-next-icon { background: var(--vg-soft); display: flex; align-items: center; justify-content: center; color: var(--vg-seal); font-size: 48px; }
  body.theme-c .mm-app .mm-next-body { flex: 999 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
  body.theme-c .mm-app .mm-next-label { align-self: flex-start; font: 600 12px/1.4 var(--vg-sans); color: var(--vg-on-seal); background: var(--vg-seal); border-radius: 9999px; padding: 4px 12px; }
  body.theme-c .mm-app .mm-next-body h2 { margin: 0; font: 600 24px/1.35 var(--vg-serif); color: var(--vg-ink); }
  body.theme-c .mm-app .mm-next-body > p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--vg-ink2); }
  body.theme-c .mm-app .mm-next-actions { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; margin-top: 8px; }
  body.theme-c .mm-app .mm-next-actions .mm-next-go { min-height: 52px; padding: 0 32px; border-radius: 9999px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; }
  body.theme-c .mm-app .mm-next-actions .mm-next-alt { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--vg-seal); font-size: 14px; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(215, 232, 183, .45); }
  body.theme-c .mm-app .mm-next-actions .mm-next-alt:hover { color: var(--vg-seal-dk); text-decoration-color: currentColor; }
  body.theme-c .mm-app .mm-next-prompt { display: block; }
  body.theme-c .mm-app .mm-next-prompt .mm-next-body > .mm-card { margin: 0; padding: 0; border: 0; background: transparent; }
  body.theme-c .mm-app .mm-next-prompt .mm-story-title { font: 600 20px/1.45 var(--vg-serif) !important; color: var(--vg-ink); }

  /* 待办 */
  body.theme-c .mm-app .mm-todo h2 { margin: 0 0 12px; font: 600 16px/1.5 var(--vg-sans); color: var(--vg-ink); }
  body.theme-c .mm-app .mm-todo h2 small { margin-left: 8px; font-weight: 400; font-size: 14px; color: var(--vg-ink3); }
  body.theme-c .mm-app .mm-todo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
  body.theme-c .mm-app .mm-todo-row { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 16px; padding: 16px 24px; border: 1px solid transparent; border-radius: 12px; background: var(--vg-paper); color: var(--vg-ink); font: 400 16px/1.5 var(--vg-sans); text-align: left; cursor: pointer; }
  body.theme-c .mm-app .mm-todo-row:hover { border-color: var(--vg-line-strong); }
  body.theme-c .mm-app .mm-todo-tag { flex: none; font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 4px 12px; color: var(--vg-on-seal); background: var(--vg-ink2); }
  body.theme-c .mm-app .mm-todo-tag.tone-wait { background: var(--vg-wait); }
  body.theme-c .mm-app .mm-todo-tag.tone-ok { background: var(--vg-seal); }
  body.theme-c .mm-app .mm-todo-text { flex: 1; min-width: 0; }
  body.theme-c .mm-app .mm-todo-go { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--vg-seal); }
  body.theme-c .mm-app .mm-guide-foot { margin: 0; font-size: 14px; color: var(--vg-ink3); }
  body.theme-c .mm-app .mm-textlink { border: 0; background: none; padding: 0 0 0 4px; min-height: 44px; color: var(--vg-seal); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
  body.theme-c #shell-actions .mm-book-more-btn, body.theme-c .mm-app .mm-top .mm-book-more-btn { display: inline-flex; align-items: center; gap: 8px; }

  /* 故事页：一个主按钮 + 更多操作 */
  body.theme-c .mm-app .ms-story .ms-cta-one { grid-template-columns: minmax(0, 520px); }
  body.theme-c .mm-app .ms-story .ms-more-actions { margin-top: 12px; }
  body.theme-c .mm-app .ms-story .ms-more-actions > summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; color: var(--vg-ink2); font: 500 16px/1 var(--vg-sans); cursor: pointer; list-style: none; }
  body.theme-c .mm-app .ms-story .ms-more-actions > summary::-webkit-details-marker { display: none; }
  body.theme-c .mm-app .ms-story .ms-more-actions > summary i { font-size: 20px; }
  body.theme-c .mm-app .ms-story .ms-more-actions[open] > summary { color: var(--vg-ink); }
  body.theme-c .mm-app .ms-story .ms-more-actions .ms-tools { margin: 8px 0 0; padding: 8px; border: 1px solid var(--vg-line); border-radius: 12px; background: var(--vg-paper); flex-direction: column; align-items: stretch; gap: 0; }
  body.theme-c .mm-app .ms-story .ms-more-actions .ms-tool { justify-content: flex-start; width: 100%; }

  /* 「整本书」页 */
  body.theme-c .mm-app .mm-directory-feedback.is-recovery {
    position: fixed; inset-inline-end: var(--vg-gutter); inset-block-end: 24px; z-index: var(--vg-z-nav);
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    width: min(480px, calc(100% - 2 * var(--vg-gutter))); padding: 12px 16px;
    background: var(--vg-paper); border: 1px solid var(--vg-line-strong);
    border-radius: var(--vg-r-md); box-shadow: var(--vg-shadow-pop);
  }
  body.theme-c .mm-app .mm-directory-feedback.is-recovery .mm-muted { flex: 1 1 160px; margin: 0; color: var(--vg-ink); }
  body.theme-c .mm-app .mm-directory-feedback.is-recovery button { min-height: var(--vg-tap); }
  body.theme-c .mm-app .mm-directory-feedback button[aria-disabled="true"] { opacity: .55; cursor: default; }
  @media (max-width: 767px) {
    body.theme-c .mm-app .mm-directory-feedback.is-recovery {
      inset-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
      inset-block-end: calc(96px + env(safe-area-inset-bottom, 0px)); width: auto;
    }
  }
  body.theme-c .mm-app .mm-more .mm-more-group { margin-top: 8px; }
  body.theme-c .mm-app .mm-more .mm-more-group + .mm-more-group { margin-top: 24px; }
  body.theme-c .mm-app .mm-more-tool { width: 100%; display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; margin: 0 0 8px; border: 1px solid var(--vg-line); border-radius: 12px; background: var(--vg-paper); color: var(--vg-ink); text-align: left; cursor: pointer; min-height: 48px; }
  body.theme-c .mm-app .mm-more-tool:hover { border-color: var(--vg-line-strong); }
  body.theme-c .mm-app .mm-more-tool > i { font-size: 20px; color: var(--vg-seal); margin-top: 2px; }
  body.theme-c .mm-app .mm-more-tool b { display: block; font: 600 16px/1.5 var(--vg-sans); }
  body.theme-c .mm-app .mm-more-tool small { display: block; font-size: 12px; line-height: 1.5; color: var(--vg-ink3); }
  body.theme-c .mm-app .mm-simple-toc { margin-top: 8px; }

  /* 讲述者（长辈）：大字、大按钮 */
  body.theme-c .mm-app.mm-elder .mm-guide { max-width: 720px; }
  body.theme-c .mm-app.mm-elder .mm-guide .mm-next-label { font-size: 16px; }
  body.theme-c .mm-app.mm-elder .mm-guide .mm-story-title { font: 600 24px/1.45 var(--vg-serif) !important; }
  body.theme-c .mm-app.mm-elder .mm-guide .mm-answer-option { min-height: 64px; font-size: 20px; }
  body.theme-c .mm-app.mm-elder .mm-guide .mm-answer-bar .mm-btn-primary { min-height: 64px; font-size: 20px; }

  /* 新建三步向导（全屏） */
  body.theme-c .mm-wizard { position: fixed; inset: 0; z-index: 260; background: var(--vg-bg); color: var(--vg-ink); display: flex; flex-direction: column; font-family: var(--vg-sans); }
  body.theme-c .mm-wizard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 0; }
  body.theme-c .mm-wizard-head > span { font-size: 14px; color: var(--vg-ink3); }
  body.theme-c .mm-wizard-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--vg-ink2); font-size: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  body.theme-c .mm-wizard-x:hover { background: var(--vg-soft); }
  body.theme-c .mm-wizard-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; max-width: 560px; width: calc(100% - 40px); margin: 8px auto 0; }
  body.theme-c .mm-wizard-bar i { height: 4px; border-radius: 2px; background: var(--vg-line); }
  body.theme-c .mm-wizard-bar i.on { background: var(--vg-seal); }
  body.theme-c .mm-wizard-main { flex: 1; overflow: auto; }
  body.theme-c .mm-wizard-in { max-width: 560px; margin: 0 auto; padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 24px; }
  body.theme-c .mm-wizard-in h1 { margin: 0; font: 600 24px/1.35 var(--vg-serif); color: var(--vg-ink); }
  body.theme-c .mm-wizard-in .lead { margin: -12px 0 0; font-size: 14px; line-height: 1.6; color: var(--vg-ink2); }
  body.theme-c .mm-wizard label.mm-wz-label, body.theme-c .mm-wizard legend { font-size: 14px; color: var(--vg-ink2); padding: 0; margin-bottom: 8px; }
  body.theme-c .mm-wizard .mm-wz-title { width: 100%; height: 52px; box-sizing: border-box; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--vg-line-strong); background: var(--vg-paper); color: var(--vg-ink); font: 400 18px/1 var(--vg-sans); }
  body.theme-c .mm-wizard fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
  body.theme-c .mm-wizard .mm-wz-types { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body.theme-c .mm-wizard .mm-wz-type { position: relative; display: block; min-height: 76px; padding: 16px; border-radius: 12px; border: 1.5px solid var(--vg-line); background: var(--vg-paper); cursor: pointer; }
  body.theme-c .mm-wizard .mm-wz-type input { position: absolute; opacity: 0; pointer-events: none; }
  body.theme-c .mm-wizard .mm-wz-type b { display: block; font-size: 16px; color: var(--vg-ink); }
  body.theme-c .mm-wizard .mm-wz-type small { display: block; margin-top: 4px; font-size: 12px; color: var(--vg-ink3); }
  body.theme-c .mm-wizard .mm-wz-type:has(input:checked) { border: 2px solid var(--vg-seal); background: var(--vg-soft); }
  body.theme-c .mm-wizard .mm-wz-type:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--vg-info); }
  body.theme-c .mm-wizard .mm-wz-note { margin: 0; font-size: 14px; line-height: 1.6; color: var(--vg-ink3); }
  body.theme-c .mm-wizard .mm-wz-note select { margin-left: 4px; max-width: 100%; background: var(--vg-paper); color: var(--vg-ink); border: 1px solid var(--vg-line-strong); border-radius: 8px; padding: 8px 8px; font-size: 14px; }
  body.theme-c .mm-wizard .mm-wz-who { display: flex; flex-direction: column; gap: 12px; }
  body.theme-c .mm-wizard .mm-wz-choice { display: flex; gap: 16px; align-items: flex-start; padding: 16px; border-radius: 16px; border: 1.5px solid var(--vg-line); background: var(--vg-paper); color: var(--vg-ink); text-align: left; cursor: pointer; width: 100%; font: inherit; }
  body.theme-c .mm-wizard .mm-wz-choice:hover, body.theme-c .mm-wizard .mm-wz-choice.is-rec { border-color: var(--vg-seal); }
  body.theme-c .mm-wizard .mm-wz-choice.is-rec { border-width: 2px; background: var(--vg-soft); }
  body.theme-c .mm-wizard .mm-wz-choice > i { flex: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; background: var(--vg-soft); color: var(--vg-seal); }
  body.theme-c .mm-wizard .mm-wz-choice.is-rec > i { background: var(--vg-seal); color: var(--vg-on-seal); }
  body.theme-c .mm-wizard .mm-wz-choice b { display: block; font-size: 18px; }
  body.theme-c .mm-wizard .mm-wz-choice small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--vg-ink2); }
  body.theme-c .mm-wizard .mm-wz-choice em { display: block; margin-top: 4px; font-style: normal; font-size: 12px; color: var(--vg-seal); }
  body.theme-c .mm-wizard .mm-wz-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
  body.theme-c .mm-wizard .mm-wz-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
  body.theme-c .mm-wizard-foot { padding: 12px 24px calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--vg-line); }
  body.theme-c .mm-wizard-foot > div { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
  body.theme-c .mm-wizard-go { min-height: 56px; border: 0; border-radius: 9999px; background: var(--vg-seal); color: var(--vg-on-seal); font: 600 16px/1 var(--vg-sans); display: flex; align-items: center; justify-content: center; gap: 12px; cursor: pointer; }
  body.theme-c .mm-wizard-go:disabled { opacity: .5; cursor: default; }
  body.theme-c .mm-wizard-alt { min-height: 44px; border: 0; background: none; color: var(--vg-ink2); font: 400 14px/1 var(--vg-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
  body.theme-c .mm-wizard .mm-wz-status { margin: 0; font-size: 14px; color: var(--vg-wait); }

  /* 链接落地页：一步一步 */
  body.theme-c .mm-app .mm-link-steps { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
  body.theme-c .mm-app .mm-link-steps li { display: flex; gap: 16px; align-items: flex-start; }
  body.theme-c .mm-app .mm-link-steps .dot { flex: none; width: 32px; height: 32px; box-sizing: border-box; border-radius: 50%; border: 1.5px solid var(--vg-line-strong); color: var(--vg-ink2); display: flex; align-items: center; justify-content: center; font-weight: 700; }
  body.theme-c .mm-app .mm-link-steps li.on .dot { background: var(--vg-seal); border-color: var(--vg-seal); color: var(--vg-on-seal); }
  body.theme-c .mm-app .mm-link-steps b { display: block; font-size: 16px; color: var(--vg-ink); }
  body.theme-c .mm-app .mm-link-steps small { display: block; font-size: 14px; line-height: 1.6; color: var(--vg-ink3); }
  body.theme-c .mm-app.mm-elder .mm-link-steps .dot { width: 40px; height: 40px; font-size: 20px; }
  body.theme-c .mm-app.mm-elder .mm-link-steps b { font-size: 20px; }
  body.theme-c .mm-app.mm-elder .mm-link-go { min-height: 68px; font-size: 24px; }

  @media (max-width: 640px) {
    body.theme-c .mm-app .mm-guide { gap: 24px; padding-top: 16px; }
    body.theme-c .mm-app .mm-step::after { left: 32px; top: 13px; }
    body.theme-c .mm-app .mm-step-dot { width: 26px; height: 26px; font-size: 12px; }
    body.theme-c .mm-app .mm-step-text b { font-size: 12px; }
    body.theme-c .mm-app .mm-step-text small { font-size: 12px; }
    body.theme-c .mm-app .mm-next-photo, body.theme-c .mm-app .mm-next-icon { max-width: none; flex-basis: 100%; aspect-ratio: auto; height: 168px; }
    body.theme-c .mm-app .mm-next-icon { height: 96px; font-size: 36px; }
    body.theme-c .mm-app .mm-next-icon[data-iv] { height: 168px; }   /* 等着补采访照片的占位：与照片同高，补上时页面不跳 */
    body.theme-c .mm-app .mm-next-actions .mm-next-go { width: 100%; justify-content: center; }
    body.theme-c .mm-app .mm-todo-row { padding: 12px 16px; gap: 12px; }
    body.theme-c .mm-app .mm-todo-go { font-size: 0; }
    body.theme-c .mm-app .mm-todo-go i { font-size: 16px; }
  }
}

/* 流式字号改成两档字阶：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  body.theme-c .mm-app .mm-next-body h2 { font-size: 30px; }
  body.theme-c .mm-app .mm-next-prompt .mm-story-title { font-size: 24px; }
}

/* 流式留白改成两档间距：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  body.theme-c .mm-app .mm-guide { padding: 24px 40px 96px; }
  body.theme-c .mm-app .mm-next { padding: 32px; }
  body.theme-c .mm-app .mm-next { gap: 32px; }
  body.theme-c .mm-wizard-head { padding: 16px 32px 0; }
}