/* 故事详情页（#memoir/:id/story/:sid）：先看到内容和下一步，再看次要信息。
   只作用于 .ms-story，最后加载；按钮用独立类名（ms-cta / ms-tool），不和旧 .mm-btn 规则缠在一起。
   字号：正文 22（手机 19）、按钮标题 18、说明 15、章节标题 22，全部不低于 15。 */
@media screen {
  body.theme-c .mm-app .ms-story {
    --ms-ink: var(--vg-ink);
    --ms-dim: var(--vg-ink2);
    --ms-line: var(--desk-line, var(--vg-line));
    --ms-panel: var(--desk-panel, var(--vg-paper));
    --ms-hover: var(--desk-hover, var(--vg-soft));
    max-width: 880px; margin-inline: auto;
    padding: 32px 24px 80px;
  }

  /* 头部：状态 + 谁讲的、哪年、哪里。标题已在页面顶栏，这里不重复 */
  body.theme-c .mm-app .ms-story .ms-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 24px; }
  body.theme-c .mm-app .ms-story .ms-status { display: flex; flex-wrap: wrap; gap: 8px; }
  body.theme-c .mm-app .ms-story .ms-meta { font: 400 14px/1.6 var(--vg-sans); color: var(--ms-dim); }

  /* 操作区：两个大入口并排，改字、加照片退成文字按钮 */
  body.theme-c .mm-app .ms-story .ms-actions { margin: 0 0 8px; }
  body.theme-c .mm-app .ms-story .ms-cta-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
  body.theme-c .mm-app .ms-story .ms-cta {
    display: flex; align-items: center; gap: 16px; width: 100%; min-height: 72px; padding: 16px 24px;
    border: 0; border-radius: 16px; text-align: left; cursor: pointer;
    background: transparent; color: var(--ms-ink);
    position: relative;
    font-family: var(--vg-sans); transition: background-color .2s, box-shadow .2s, transform .2s;
  }
  body.theme-c .mm-app .ms-story .ms-cta::after { content: ''; position: absolute; inset: 0; border: 1.5px solid color-mix(in srgb, var(--ms-ink) 45%, transparent); border-radius: inherit; pointer-events: none; }
  body.theme-c .mm-app .ms-story .ms-cta-main::after { content: none; }
  body.theme-c .mm-app .ms-story .ms-cta > i { flex: none; font-size: 24px; }
  body.theme-c .mm-app .ms-story .ms-cta > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
  body.theme-c .mm-app .ms-story .ms-cta b { font: 600 18px/1.4 var(--vg-sans); }
  body.theme-c .mm-app .ms-story .ms-cta small { font: 400 14px/1.5 var(--vg-sans); opacity: .82; }
  body.theme-c .mm-app .ms-story .ms-cta:hover { background: var(--ms-hover); }
  body.theme-c .mm-app .ms-story .ms-cta:active { transform: scale(.985); }
  body.theme-c .mm-app .ms-story .ms-cta-main { background: var(--vg-seal); color: var(--vg-on-seal); box-shadow: none; }
  body.theme-c .mm-app .ms-story .ms-cta-main:hover { background: var(--vg-seal-dk, var(--vg-seal)); }
  body.theme-c .mm-app .ms-story .ms-cta.busy { opacity: .65; pointer-events: none; }

  body.theme-c .mm-app .ms-story .ms-tools { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 12px; }
  body.theme-c .mm-app .ms-story .ms-tools:first-child { margin-top: 0; }
  body.theme-c .mm-app .ms-story .ms-actions .ms-tools { margin-left: -16px; }
  body.theme-c .mm-app .ms-story .ms-tool {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px;
    border: 0; border-radius: 9999px; background: transparent; color: var(--ms-dim);
    font: 500 16px/1.3 var(--vg-sans); cursor: pointer; transition: background-color .2s, color .2s;
  }
  body.theme-c .mm-app .ms-story .ms-tool i { font-size: 20px; }
  body.theme-c .mm-app .ms-story .ms-tool:hover { background: var(--ms-hover); color: var(--ms-ink); }

  body.theme-c .mm-app .ms-story :is(.ms-cta, .ms-tool, .ms-danger, .ms-more summary):focus-visible { outline: 3px solid var(--vg-info); outline-offset: 3px; }

  /* 检查结果、编辑器：紧跟操作区，留出间距 */
  body.theme-c .mm-app .ms-story .ms-panel { margin: -12px 0 32px; }
  body.theme-c .mm-app .ms-story #mm-memory-reflection { margin: 40px 0 0 !important; padding: 16px 24px; border: 0; border-radius: 16px; background: color-mix(in srgb, var(--ms-ink) 6%, transparent); box-shadow: none; }
  body.theme-c .mm-app .ms-story #mm-memory-reflection h3 { margin: 0 0 8px; font: 600 16px/1.5 var(--vg-sans); }
  body.theme-c .mm-app .ms-story #mm-memory-reflection p { margin: 0 0 8px; font: 400 14px/1.7 var(--vg-sans); color: var(--ms-dim); }

  /* 正文：整页的主角 */
  body.theme-c .mm-app .ms-story .ms-body { margin: 32px 0 0; max-width: 38em; padding: 0; border: 0; }
  body.theme-c .mm-app .ms-story .ms-body::before, body.theme-c .mm-app .ms-story .ms-body::after { content: none; }
  body.theme-c .mm-app .ms-story .ms-body p { margin: 0 0 1.1em; font: 400 20px/2 var(--vg-serif); letter-spacing: .02em; color: var(--ms-ink); }
  body.theme-c .mm-app.mm-elder .ms-story .ms-body p { font-size: 24px; }
  /* 图文混排：照片匀开插在段落之间，同一处有几张就并排；每张的操作放在照片下面一行，不盖在照片上。
     正文页（.ms-body）和润色预览（#mm-review 里的 .ms-flow）共用 */
  body.theme-c .mm-app .ms-story .ms-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 24px 16px; margin: 8px 0 1.6em; }
  body.theme-c .mm-app .ms-story .ms-figs.is-one { max-width: 620px; }
  body.theme-c .mm-app .ms-story .ms-fig { display: flex; flex-direction: column; min-width: 0; margin: 0; }
  body.theme-c .mm-app .ms-story .ms-fig-image { position: relative; width: fit-content; max-width: 100%; }
  body.theme-c .mm-app .ms-story .ms-figs:not(.is-one) .ms-fig-image { width: 100%; }
  body.theme-c .mm-app .ms-story .ms-fig-open { display: block; width: 100%; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--vg-soft); cursor: zoom-in; }
  body.theme-c .mm-app .ms-story .ms-fig-open img { display: block; width: auto; max-width: 100%; height: auto; max-height: 480px; }
  body.theme-c .mm-app .ms-story .ms-figs:not(.is-one) .ms-fig-open img { width: 100%; max-height: none; aspect-ratio: 4 / 3; object-fit: contain; }
  body.theme-c .mm-app .ms-story .ms-fig-mark { position: absolute; top: 8px; left: 8px; padding: 4px 12px; background: var(--vg-paper); pointer-events: none; }
  body.theme-c .mm-app .ms-story .ms-fig-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 8px; }
  body.theme-c .mm-app .ms-story .ms-fig-cap { flex: 1 0 100%; margin: 2px 0; font: 400 14px/1.6 var(--vg-sans); color: var(--ms-dim); }
  body.theme-c .mm-app .ms-story .ms-fig-tool {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
    border: 0; border-radius: 9999px; background: transparent; color: var(--ms-dim);
    font: 500 14px/1.3 var(--vg-sans); cursor: pointer; transition: background-color .2s, color .2s;
  }
  body.theme-c .mm-app .ms-story .ms-fig-tool i { font-size: 18px; }
  body.theme-c .mm-app .ms-story .ms-fig-tool:hover { background: var(--ms-hover); color: var(--ms-ink); }
  body.theme-c .mm-app .ms-story .ms-fig-ask { background: var(--ms-hover); color: var(--ms-ink); font-weight: 600; }
  body.theme-c .mm-app .ms-story .ms-fig-ask:hover { background: color-mix(in srgb, var(--ms-ink) 14%, var(--ms-hover)); }
  /* 润色预览只是让人看看成稿的样子，照片收小一些 */
  body.theme-c .mm-app .ms-story #mm-review .ms-figs.is-one { max-width: 380px; }
  body.theme-c .mm-app .ms-story #mm-review .ms-fig-open img { max-height: 300px; }
  body.theme-c .mm-app .ms-story :is(.ms-fig-open, .ms-fig-tool):focus-visible { outline: 3px solid var(--vg-info); outline-offset: 3px; }
  body.theme-c .mm-app .ms-story .ms-empty { margin: 32px 0 0; padding: 32px 24px; border-radius: 16px; border: 1.5px dashed var(--ms-line); font: 400 18px/1.8 var(--vg-sans); color: var(--ms-dim); }

  /* 次要章节：小一号、弱一点，和正文拉开层级 */
  body.theme-c .mm-app .ms-story .ms-sec-title {
    display: flex; align-items: baseline; gap: 12px; margin: 48px 0 12px; padding-top: 24px;
    border-top: 1px solid var(--ms-line);
    font: 600 20px/1.5 var(--vg-serif); color: var(--ms-ink);
  }
  body.theme-c .mm-app .ms-story .ms-sec-title small { font: 400 14px/1.5 var(--vg-sans); color: var(--ms-dim); }
  body.theme-c .mm-app .ms-story .ms-note { margin: 0 0 12px; max-width: 38em; font: 400 16px/1.8 var(--vg-sans); color: var(--ms-dim); }
  body.theme-c .mm-app .ms-story .ms-tools-inline { margin-top: 4px; margin-left: -16px; }

  /* 删除：收进“更多”，不和日常操作混在一起 */
  body.theme-c .mm-app .ms-story .ms-more { margin-top: 64px; padding-top: 16px; border-top: 1px solid var(--ms-line); }
  body.theme-c .mm-app .ms-story .ms-more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font: 400 14px/1 var(--vg-sans); color: var(--ms-dim); cursor: pointer; }
  body.theme-c .mm-app .ms-story .ms-danger {
    display: inline-flex; align-items: center; gap: 8px; min-height: 48px; margin-top: 8px; padding: 8px 16px;
    border: 0; border-radius: 9999px; background: transparent; color: var(--vg-danger);
    position: relative; font: 500 16px/1.3 var(--vg-sans); cursor: pointer;
  }
  body.theme-c .mm-app .ms-story .ms-danger::after { content: ''; position: absolute; inset: 0; border: 1.5px solid currentColor; border-radius: inherit; pointer-events: none; }
  body.theme-c .mm-app .ms-story .ms-danger:hover { background: color-mix(in srgb, var(--vg-danger) 14%, transparent); }

  @media (max-width: 767px) {
    body.theme-c .mm-app .ms-story { padding: 16px 16px 64px; }
    body.theme-c .mm-app .ms-story .ms-cta-row { grid-template-columns: minmax(0, 1fr); }
    body.theme-c .mm-app .ms-story .ms-body p { font-size: 18px; line-height: 1.95; }
    body.theme-c .mm-app .ms-story .ms-tools { margin-inline: -8px; }
  }
}

/* 流式留白改成两档间距：小屏取下限，≥64rem 取上限 */
@media (min-width: 64rem) {
  body.theme-c .mm-app .ms-story { padding: 32px 48px 80px; }
}
