/*
 * Nice Moment · Story Detail 的 Desktop presentation 层
 *
 * ⚠️ 只加载在站点根的 /story.html。
 * ⚠️ 不重复任何 token —— 变量、字体、配色、图位、会员标记全来自 nm.css。
 *
 * 桌面取舍：正文优先 + series 侧栏常驻。重点宽度 1440。
 */

.nm-story--desktop {
  padding-top: 36px;
  padding-bottom: 56px;
}

/* 默认单栏（窄窗口 / 分屏）；侧栏在 1024 起才出现。 */
.nm-story__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}

.nm-story__main {
  /*
   * ⚠️ 正文列封顶 68 字符左右。桌面宽度大不等于一行可以更长 ——
   *    一行超过 ~75 字符，眼睛回到行首时会频繁串行。
   */
  max-width: 660px;
  width: 100%;
}

.nm-story__eyebrow {
  margin: 0 0 8px;
  font-size: 13.5px;
  color: var(--clay);
  letter-spacing: 0.02em;
}

.nm-story__title {
  font-family: var(--serif);
  font-size: 34px;
  line-height: 1.34;
  font-weight: 600;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}

.nm-story__summary {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink-soft);
}

.nm-story__photo {
  margin: 0 0 26px;
  aspect-ratio: 3 / 2;
}

/* ── 正文 ───────────────────────────────────────────── */
.nm-story__p {
  margin: 0 0 18px;
  font-size: 17px;
  line-height: 1.95;
  color: var(--ink);
}

/*
 * 会员门。
 * ⚠️ 不做成遮罩/模糊 —— 那既挡不住查看源码（契约 §8.4 的裁剪在服务端），
 *    又会让人以为「正文其实在下面，只是被盖住了」。
 *    这里是一个清楚的段落终点 + 一个出口。
 */
.nm-story__gate {
  margin: 28px 0 0;
  padding: 22px 22px 24px;
  background: var(--paper-deep);
  border-left: 3px solid var(--clay-soft);
  border-radius: var(--radius);
}

.nm-story__gateTitle {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 6px;
}

.nm-story__gateBody {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--ink-soft);
}

/* ── 上一篇 / 下一篇 ─────────────────────────────────
   桌面端左右成对：一眼看出连载往哪两个方向走。 */
.nm-story__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.nm-story__navSlot--next {
  text-align: right;
}

.nm-story__navLabel {
  margin: 0 0 5px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.nm-story__navLink {
  display: inline-block;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--ink);
  border-bottom: 1px solid var(--clay-soft);
  padding-bottom: 2px;
}

.nm-story__navNone {
  margin: 0;
  font-size: 14px;
  color: var(--ink-mute);
}

/* ── series 侧栏 ─────────────────────────────────────── */
.nm-story__aside {
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}

.nm-story__seriesTitle {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 3px;
}

.nm-story__order {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--clay);
}

.nm-story__date {
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--ink-mute);
}

/* ═══ 侧栏从 1024 起 ═══════════════════════════════════ */
@media (min-width: 1024px) {
  .nm-story__grid {
    /* 正文列在前、侧栏在后（DOM 顺序），视觉上侧栏放左边 */
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
  }

  .nm-story__main {
    order: 2;
  }

  .nm-story__aside {
    order: 1;
    position: sticky;
    top: 76px;
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 1440px) {
  .nm-story--desktop {
    padding-top: 52px;
  }

  .nm-story__grid {
    max-width: 1060px;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 72px;
  }

  .nm-story__title {
    font-size: 38px;
  }
}

@media (min-width: 1920px) {
  .nm-story__grid {
    max-width: 1140px;
  }
}

/* ── 问问 Nice Moment（正文之后的一段陪伴）──────────────
   ⚠️ 不做成聊天窗：一段安静的区块，跟在正文后面，正文仍是主角。 */
.nm-story__ask {
  margin: 44px 0 0;
}

.nm-ask {
  padding: 26px 28px 26px;
  background: var(--paper-deep);
  border-radius: var(--radius);
}

.nm-ask__kicker {
  margin-bottom: 6px;
}

.nm-ask__title {
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 4px;
}

.nm-ask__lead {
  margin: 0 0 16px;
  font-size: 15.5px;
  color: var(--ink-soft);
}

.nm-ask__label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  color: var(--ink-mute);
}

.nm-ask__input {
  resize: vertical;
  min-height: 92px;
}

.nm-ask__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: end;
}

.nm-ask__form .nm-ask__label {
  grid-column: 1 / -1;
}

.nm-ask__form .nm-button {
  margin-top: 0;
  width: auto;
  min-width: 96px;
}

.nm-ask__status {
  min-height: 1.6em;
  margin: 10px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.nm-ask__note {
  padding-top: 2px;
}

.nm-ask__noteText {
  margin: 0 0 6px;
  font-size: 15.5px;
  color: var(--ink);
}

.nm-ask__consent {
  margin: 4px 0 0;
  padding: 18px 20px;
  background: var(--paper);
  border-left: 3px solid var(--clay-soft);
  border-radius: var(--radius);
}

.nm-ask__consentTitle {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 6px;
}

.nm-ask__consentBody {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* AI 契约 §17.6 · F-5：隐私说明（点名 Anthropic）—— 授予同意之前可读，不压过标题与正文 */
.nm-ask__consentPrivacy {
  margin: 0 0 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--ink-soft);
}

/* AI 契约 §12.4.3：18+ 声明 —— 一行说明 + 一个需要她主动勾选的勾选框 */
.nm-ask__ageNote {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.nm-ask__age {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}

.nm-ask__ageCheck {
  width: 18px;
  height: 18px;
  margin: 0;
  flex: none;
  accent-color: var(--clay);
  cursor: pointer;
}

.nm-ask__agree:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.nm-ask__consentActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.nm-ask__consentActions .nm-button {
  margin-top: 0;
  width: auto;
}

.nm-ask__decline {
  background: transparent;
  border: 0;
  padding: 10px 4px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.nm-ask__answer {
  margin: 14px 0 0;
  padding: 18px 20px 6px;
  background: var(--paper);
  border-radius: var(--radius);
}

.nm-ask__asked {
  margin: 0 0 12px;
  font-size: 14px;
  color: var(--ink-mute);
  overflow-wrap: anywhere;
}

.nm-ask__answerLabel {
  margin: 0 0 4px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clay);
}

.nm-ask__answerText {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.nm-ask button:disabled,
.nm-ask textarea:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ⚠️ hidden 属性必须赢：.nm-ask__form 等带 display 的规则会压过浏览器默认的 [hidden]{display:none}，
   授权面板出现时输入框就会漏出来。限定在 Ask 区块内，不影响全站。 */
.nm-ask [hidden] {
  display: none;
}

/* ── 待确认记忆（S06-5B）──────────────────────────────
   ⚠️ 跟在回答后面的一段轻卡片，不是弹窗、不挡阅读。
   🔴 视觉上必须比回答更轻：它是一个询问，不是一条已经生效的记忆。 */
.nm-ask__cands {
  margin: 16px 0 0;
}

.nm-ask__cand {
  margin: 12px 0 0;
  padding: 18px 20px 16px;
  background: var(--paper);
  border-left: 3px solid var(--olive);
  border-radius: var(--radius);
}

.nm-ask__candTitle {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.nm-ask__candLead {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.nm-ask__candLabel {
  margin: 0 0 2px;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}

.nm-ask__candValue {
  margin: 0 0 10px;
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.nm-ask__candReplace {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--clay);
  overflow-wrap: anywhere;
}

.nm-ask__candActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.nm-ask__candActions .nm-button {
  margin-top: 0;
  width: auto;
  min-width: 88px;
}

.nm-ask__candNo {
  background: transparent;
  border: 0;
  padding: 10px 4px;
  min-height: 44px;
  font-family: var(--sans);
  font-size: 15px;
  color: var(--ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.nm-ask__candStatus {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}

.nm-ask__candStatus:empty {
  margin: 0;
}

.nm-ask__candAction {
  margin-top: 6px;
}

/* ── F-6 · AI 披露（AI 契约 §12.4.1）──────────────────────
   每次 Ask 挂载出现一次，紧跟引导语、在可交互区之前。安静但必须看得见：
   不做徽标、不做弹窗，只是一句清楚的说明。 */
.nm-ask__disclosure {
  margin: -6px 0 16px;
  padding-left: 10px;
  border-left: 2px solid var(--clay-soft);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* nm-content-body/v1：小标题 · 引用 · 正文内图片（桌面） */
.nm-story__h {
  font-size: 23px;
  font-weight: 700;
  line-height: 1.45;
  margin: 34px 0 12px;
}
.nm-story__quote {
  margin: 22px 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid #c9b8a8;
  color: #5b544d;
  font-style: italic;
}
.nm-story__inlinePhoto {
  margin: 26px 0;
  width: 100%;
  padding-top: 56%;
}