/* ==== 2026-11-03 全站体检修复 ==== */
/* P0 导航断点：≤1100 收成汉堡，避免 768/1024 撑宽 */
@media (max-width:1100px){
  .nav-links{display:none !important}
  .nav-toggle{display:inline-flex !important}
  .site-header .nav{flex-wrap:nowrap}
}
/* P1 表格：窄屏横向滚动，不再撑破页面 */
@media (max-width:900px){
  table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table>*{min-width:0}
}
/* P1 guides 矩阵行 */
.guide-matrix-row{min-width:0;max-width:100%}
@media (max-width:900px){.guide-matrix-row{overflow-x:auto;display:block}}
/* P2 跑马灯轨道裁剪 */
.xs-viewport,.xs-track-wrap,.xs-strip{overflow:hidden}
@media (max-width:900px){.xs-track{max-width:100%}}
/* P2 名人卡简介：允许两行截断而不是硬裁 */
.mind-bio{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ==== 2026-11-03 ② 移动端：顶栏去 CTA + 内容居中（B 案：文字居中，列表/表格/代码左对齐） ====
   范围：全站 ≤760px；guides 教程三页（body.guide-page）为长文，排除不做居中。
   抽屉内已有「免费创建」按钮兜底，隐藏顶栏按钮不影响入口。
   做法：以内容容器 .shell 为居中锚点（全站每页都用它），再对页脚/抽屉/弹层/列表/表格做左对齐回正。 */
@media (max-width:760px){
  /* ① 顶栏「免费创建」只在抽屉里保留 */
  .nav-cta .btn-primary{display:none !important}

  /* ② 版块内容整体居中 */
  body:not(.guide-page) .shell{text-align:center}

  /* ③ 页脚 / 抽屉 / 弹层 保持左对齐 */
  body:not(.guide-page) .site-footer .shell,
  body:not(.guide-page) .site-footer .shell *,
  body:not(.guide-page) .foot-col,
  body:not(.guide-page) .foot-col *,
  body:not(.guide-page) .nav-drawer,
  body:not(.guide-page) .nav-drawer *,
  body:not(.guide-page) .demo-sheet,
  body:not(.guide-page) .demo-sheet *,
  body:not(.guide-page) #payModal,
  body:not(.guide-page) #payModal .shell,
  body:not(.guide-page) #payModal *{text-align:left}

  /* ④ 列表：整块居中、逐项左对齐 */
  body:not(.guide-page) ul,
  body:not(.guide-page) ol{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;text-align:left}

  /* ⑤ 表格 / 代码 / 表单 左对齐 */
  body:not(.guide-page) table,
  body:not(.guide-page) pre,
  body:not(.guide-page) code,
  body:not(.guide-page) input,
  body:not(.guide-page) textarea,
  body:not(.guide-page) select,
  body:not(.guide-page) blockquote{text-align:left}

  /* ⑥ 按钮组 / 标签组水平居中 */
  body:not(.guide-page) .hero-ctas,
  body:not(.guide-page) .cta-row,
  body:not(.guide-page) .hero-pills{justify-content:center;flex-wrap:wrap}
}

/* ==== 2026-11-03 ③ 平板断点（761–1100px）导航补齐 ====
   根因：P0 断点把 ≤1100px 的 .nav-links 隐藏并强制显示 .nav-toggle，
        但汉堡条纹与抽屉的样式只写在各页内联的 @media(max-width:760px) 里。
        实测 900px：.nav-toggle 仅 4×4px、.nav-toggle-bars 0×0 → 看不到也点不到，
        .nav-drawer 无定位 → 761–1100px 等于没有导航。
   处置：把同一套样式补到 761–1100px 区间；≤760px 完全不受影响（内联规则继续生效）。 */
@media (min-width:761px) and (max-width:1100px){
  .nav-toggle{
    display:inline-flex !important;
    width:44px;height:44px;
    align-items:center;justify-content:center;flex-direction:column;
    border:0;background:transparent;color:#221A14;cursor:pointer;
  }
  .nav-toggle-bars{display:grid;gap:5px;width:22px}
  .nav-toggle-bars i{display:block;height:2px;background:currentColor;border-radius:2px}
  .nav-drawer{
    position:fixed;inset:0;z-index:300;background:var(--cream,#FBF7F1);
    padding:calc(76px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom));
    overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;
  }
  .nav-drawer.is-open{transform:translateX(0)}
  .nav-drawer nav{display:grid}
  .nav-drawer a{padding:15px 0;font-size:17px;font-weight:700;border-bottom:1px solid rgba(34,26,20,.1)}
  .nav-drawer .btn{margin-top:16px;width:100%;border-bottom:0}
  .nav-drawer-close{
    position:absolute;top:calc(14px + env(safe-area-inset-top));right:16px;
    width:44px;height:44px;border:0;background:transparent;font-size:28px;line-height:1;cursor:pointer;
  }
  body.nav-open{overflow:hidden}
}


/* ============================================================
   2026-11-03 16:13 · 上线前 P1/P2 修复批
   ============================================================ */

/* ---- P1-6 键盘焦点可见 + 按压反馈（WCAG 2.4.7 A级） ---- */
.btn:focus-visible, a:focus-visible, button:focus-visible,
summary:focus-visible, .nav-toggle:focus-visible {
  outline: 2px solid #EE5F27; outline-offset: 2px;
}
.btn:active { transform: translateY(1px); filter: brightness(.97); }
.nav-links > a:active { color: #C62F10; }

/* ---- P1-4 移动端触控热区（Apple HIG 44pt / Material 48dp 最低工效） ---- */
@media (max-width: 760px) {
  .filter-btn, .guide-copy, .view-controls button,
  .deck-controls button { min-height: 40px; }
  .chapter-nav button, .show-tabs-label button { min-height: 38px; }
  .site-footer a, .footer-links a, .footer-record a { display: inline-block; padding: 6px 2px; }
  .sc-link, .ci-link { display: inline-block; padding: 5px 2px; }
}

/* ---- P1-7 懒加载图片占位（CLS 防抖） ---- */
.mind-photo, .mind-photo img { aspect-ratio: 3 / 4; }
.xs-media { aspect-ratio: 16 / 10; }
img[loading="lazy"] { background: #F4EDE3; }

/* ---- P2-4 长 URL / 英文长词换行防御 ---- */
.guide a, .guide code, .bk-hint, .xs-body p, .c-src,
.shell p, .shell li { overflow-wrap: anywhere; }

/* ---- P2-9 灰字对比度兜底（WCAG AA 4.5:1） ---- */
.mind-meta small, .app-card small, .case-author small,
.footer-record, .footer-links a { color: #6E6156; }

/* ---- P2-10 减弱动效用户：轮播可手动滚动（可达性） ---- */
@media (prefers-reduced-motion: reduce) {
  .showcase-rail, .xs-rail { overflow-x: auto; }
  .showcase-track, .xs-track { animation: none; }
}

/* ---- P2-6 回到顶部悬浮按钮（超长页面导航） ---- */
.back-to-top { position: fixed; right: 18px; bottom: 24px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(238,95,39,.45); background: rgba(255,253,249,.94);
  color: #EE5F27; display: none; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(34,26,20,.16);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.back-to-top .btt-text { font-size: 10px; letter-spacing: .05em; font-weight: 600; }
.back-to-top.is-show { display: flex; }
.back-to-top:hover { background: #EE5F27; color: #FFF; border-color: #EE5F27; }
.back-to-top:active { transform: translateY(1px); }
.back-to-top:focus-visible { outline: 2px solid #EE5F27; outline-offset: 2px; }
@media (max-width: 760px) { .back-to-top { right: 14px; bottom: 18px; } }

/* ==== 2026-11-04 「案例演示」全站暖橙标注 ====
   范围：顶部导航 / 移动抽屉 / 展示页专有菜单 / 页脚，共 62 处。
   刻意只认 a[href="/showcase/"]，不改 <title>、og:* 元数据；
   也刻意不用全局 a[href="/showcase/"]，以免把正文里指向案例页的 .btn 按钮染成橙色。 */
.nav-links>a[href="/showcase/"],
.nav-links>a[href="/showcase/"]:hover,
.nav-drawer a[href="/showcase/"],
.nav-drawer a[href="/showcase/"]:hover,
.show-mobile-menu a[href="/showcase/"],
.show-mobile-menu a[href="/showcase/"]:hover,
.foot-col a[href="/showcase/"],
.foot-col a[href="/showcase/"]:hover{color:#D84E18}
.nav-links>a[href="/showcase/"],
.nav-drawer a[href="/showcase/"],
.show-mobile-menu a[href="/showcase/"],
.foot-col a[href="/showcase/"]{font-weight:900}

/* ==== 2026-11-04 全站深色区块统一改暖色（方案 A：米色暖卡 + 橙按钮）==== */
/* A. 服务页底部 CTA 条（expert / solutions，源自 svc-page.css） */
.final-in{background:radial-gradient(ellipse 70% 60% at 50% 110%,rgba(238,95,39,.14),transparent 65%),#F4EDE3 !important;
  color:#221A14 !important;border:1px solid rgba(34,26,20,.06)}
.final-in h2{color:#221A14 !important}
.final-in p{color:#6E6156 !important}
.final-in .btn-ghost{border-color:rgba(34,26,20,.2) !important;color:#221A14 !important;background:#fff !important}
.final-in .btn-ghost:hover{border-color:#221A14 !important;background:#fff !important}

/* B. 深色带（ei-system / developers，源自 sub.css） */
.dark-band{background:radial-gradient(ellipse 70% 60% at 50% 110%,rgba(238,95,39,.14),transparent 65%),#F4EDE3 !important;
  color:#221A14 !important;border:1px solid rgba(34,26,20,.06)}
.dark-band .eyebrow{color:#C2451A !important}
.dark-band .lede{color:#6E6156 !important}
.dark-band .f-card{background:#FFFDF9 !important;border-color:rgba(34,26,20,.10) !important}
.dark-band .f-card:hover{background:#fff !important;box-shadow:0 18px 40px -28px rgba(34,26,20,.35)}
.dark-band .f-card h3{color:#221A14 !important}
.dark-band .f-card p{color:#6E6156 !important}
.dark-band .f-card .f-ic{background:rgba(238,95,39,.10) !important;color:#C2451A !important}

/* C. discover 入驻 CTA（页内联） */
.join{background:radial-gradient(ellipse 70% 60% at 50% 110%,rgba(238,95,39,.14),transparent 65%),#F4EDE3 !important;
  color:#221A14 !important;border:1px solid rgba(34,26,20,.06)}
.join .eyebrow{color:#C2451A !important}
.join .lede{color:#6E6156 !important}
.join .btn-ghost{border-color:rgba(34,26,20,.2) !important;color:#221A14 !important;background:#fff !important}
.join .btn-ghost:hover{border-color:#221A14 !important;background:#fff !important}
