/* ============================================================
   答题 / 报告 / 方法说明 三页的样式补充（B 线独占）
   ------------------------------------------------------------
   设计系统与配色变量全部在 ../styles.css —— 本文件**不重新定义设计系统的
   变量、不改配色**，只在文件内部定义 `--b-` 前缀的局部常量，
   其余只做这三页专属的排版、层级与移动端可用性收敛。
   本文件在 index.html 中排在 styles.css 之后，因此**同优先级选择器
   可以直接覆盖设计系统**（下文用 `--B` 局部常量承接版本号，便于排查）。

   只允许出现下面这些类（新增类均以 `is-` 或 `report-` 前缀，且只在
   本文件与 survey.js / report.js / method.js 中出现）：

   survey.js : .is-survey__title / __meta / __meta-item / __meta-sep / __info
               .is-survey__bar-row / __instruction--fold / __instruction-toggle
               .is-survey__time-chip / __notice-tight / __option-hint
               .is-survey__page / __progress-text / __stay
               .is-survey__drawer-close / __drawer-head（修饰）/ __drawer-foot（修饰）
   report.js : .is-report__hero / __meta / __jump / __jump-scroll / __jump-item
               .is-input（`styles.css` 的**通用输入框类**，报告页口令框用；
               本文件只补竖向留白 `.view--report .is-report-ai-note + .is-input`）
   method.js : .is-method__nav / __nav-scroll / __nav-item / __archive

   ★ 2026-09-15 第二阶段收口（执行线 `UIv2-设计系统与共享样式收口`）动了本文件四处：
     ① `.is-survey__options/__option` 改成**分组内嵌列表**（圆角收到组容器 + hairline 行分隔）；
     ② `.is-survey__option-input` 去掉硬编码青绿 `%230a6c5c`，改用 `radial-gradient` + 设计系统变量；
     ③ `.is-survey__footer` ≤699px 吸底、≤559px 按钮两行（108px）；
     ④ `.is-report__score` 文字色 `--accent` → `--accent-text`。
     另删除零引用的 `.is-method__lede`。详见 `docs/设计系统-v2.md` §6.1 / §9。
   ============================================================ */

/* B 线局部常量：不改设计系统变量，只在本文件内部复用 */
:root {
  --b-edge: 6px;    /* 卡片到屏幕边缘的“手机级”留白 */
  --b-tap: 44px;    /* 触控目标高度的硬底线 */
}

.is-survey,
.view--report,
.is-method {
  --b-edge: 6px;
}

/* ---------------------------------------------------------- 通用微调
   这三页的最高频使用场景是"竖屏、单手、滚动"。1px 级的抖动与亚像素
   缝隙在这种场景下会被放大，因此统一禁用长按菜单与滑动回弹串扰。 */

.is-survey,
.view--report,
.is-method {
  -webkit-tap-highlight-color: transparent;
}
.is-survey button,
.view--report button,
.is-method button,
.is-survey label,
.view--report .pill__summary,
.is-method .pill__summary {
  touch-action: manipulation;
}

/* 顶栏是 sticky 的：锚点跳转必须让开它，否则标题会被压在下面 */
.is-survey__item,
.view--report .section,
.is-method .section {
  scroll-margin-top: 74px;
}

/* 纵向可滚动区域不要互相带动 */
.is-survey__drawer-body,
.is-table__wrap,
.is-report__jump-scroll,
.is-method__nav-scroll {
  overscroll-behavior: contain;
}

/* 隐藏横向滚动条但保留滚动能力（iOS/Android 上滚动条会在内容中段闪现） */
.is-table__wrap,
.is-report__jump-scroll,
.is-method__nav-scroll {
  scrollbar-width: none;
}
.is-table__wrap::-webkit-scrollbar,
.is-report__jump-scroll::-webkit-scrollbar,
.is-method__nav-scroll::-webkit-scrollbar {
  display: none;
}

/* ============================================================
   一、答题页 survey.js
   ============================================================ */

/* ---- 顶栏工具条：手机上不是"一行标题一行进度"，而是标题行 + 进度行 ----
   进度行左侧是细进度条与进度文字，右侧是安静的小胶囊入口。 */

.is-survey__toolbar {
  display: block;
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-2);
}
.is-survey__toolbar-main {
  display: block;
  min-width: 0;
}

/* 标题行：题名占满左侧、说明入口贴右；进度条独占下面一行，
   这样 120 题那种长量表名也不会被入口挤成两行。 */
.is-survey__bar-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
}
.is-survey__bar-row .is-survey__title {
  flex: 1 1 auto;
  min-width: 0;
}

.is-survey__title {
  font-size: var(--fs-title2);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
}

/* 一行式元信息：时间窗 / 作答方式 / 授权。手机上压成一行，超出部分淡出，
   避免折行产生的碎片和孤立的间隔点。 */
.is-survey__meta {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 7px;
  margin: 3px 0 10px;
  color: var(--text-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent 100%);
}
.is-survey__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.is-survey__meta-sep {
  opacity: .55;
}

/* 「这是什么量表？」退成安静的小胶囊，不抢标题的视线 */
.is-survey__info {
  flex: 0 0 auto;
  min-height: var(--b-tap);
  padding: 0 var(--sp-3);
  margin-right: -12px;
  margin-top: -6px;
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
  background: transparent;
  color: var(--accent);
}
.is-survey__info:hover {
  background: var(--accent-bg);
  opacity: 1;
}

.is-survey__progress {
  display: block;
  min-width: 0;
  margin-top: 10px;
}
.is-survey__progress .is-survey__bar {
  margin: 0;
}
.is-survey__progress-text:empty {
  display: none;
}

/* 进度文字：手机上只留「已答 X / Y」与页码，页码退到次要位置。
   两项之间补一个中点，纯靠 gap 在截图里容易看成一句话。 */
.is-survey__progress-text {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 6px;
  color: var(--text-2);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
  font-variant-numeric: tabular-nums;
}
.is-survey__progress-text > * + *::before {
  content: '·';
  margin-right: 6px;
  opacity: .55;
}
.is-survey__page {
  color: var(--text-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
}

/* ---- 题干与指导语：继续收敛，把第一道题抬到首屏 ---- */

.is-survey__stem {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-headline);
  line-height: var(--lh-normal);
}

.is-survey__time-window {
  margin: 0 0 var(--sp-2);
}

/* 长指导语收进可展开区（详情见 survey.js 的注释），摘要行本身就是触控目标 */
.is-survey__instruction--fold {
  padding: 0;
  border-left: 0;
  margin: 0 0 var(--sp-2);
}
.is-survey__instruction-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  min-height: var(--b-tap);
  padding: 0 0 0 var(--sp-3);
  border-left: 2px solid var(--surface-3);
  cursor: pointer;
  list-style: none;
  color: var(--text-2);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
}
.is-survey__instruction-toggle::-webkit-details-marker {
  display: none;
}
.is-survey__instruction-toggle::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: .5;
  transition: transform .18s ease;
}
.is-survey__instruction--fold[open] .is-survey__instruction-toggle::after {
  transform: rotate(-135deg) translateY(-2px);
}
.is-survey__instruction--fold[open] .is-survey__instruction-toggle {
  padding-bottom: 4px;
}
.is-survey__instruction--fold .is-survey__instruction {
  margin: 0 0 2px var(--sp-3);
  border-left: 2px solid var(--surface-3);
}

/* 时间窗声明收成一行小字条：信息不丢，视觉噪声去掉 */
.is-survey__time-chip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
  color: var(--text-2);
}
.is-survey__time-chip::before {
  content: '';
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  margin-top: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .75;
}

/* 少数必须在题干上方出现的提示（缺题跳转、计分失败）压扁一点 */
.is-survey__notice-tight {
  padding: 10px var(--sp-4);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
}

/* ---- 题目与选项 ---- */

.is-survey__item {
  padding: var(--sp-4) 0 18px;
}
.is-survey__item-head {
  column-gap: 10px;
  margin-bottom: 10px;
}
.is-survey__item-index {
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
  opacity: .85;
}
.is-survey__item-text {
  font-size: var(--fs-headline);
  line-height: var(--lh-normal);
}

/* ---- 选项 = 一张分组卡里的内嵌列表（v2 收口） ----
   旧版是「每条一张 --surface-2 圆角卡 + 7px 缝」—— 在 --bg 上那是**一叠
   互不相干的小卡片**，不是 iOS 的分组内嵌列表。
   现在：圆角只留在**组容器**上（--r-lg，与 .card 同一档），组内行与行之间
   用 hairline 分隔，行自己不带圆角。
   底色用 --bg-raised（白）：这页的行落在 --bg（#f2f2f7）上，而 --surface-2 是
   #f2f2f4 —— 两者只差 3 个色阶，整组会「看不见」。白卡正是设计系统 §0 的
   分组语言（灰底 + 白卡 + hairline），选中/悬停仍分别走 --accent-bg / --surface-3。 */
.is-survey__options {
  gap: 0;
  background: var(--bg-raised);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.is-survey__option {
  min-height: 54px;
  padding: 13px 15px;
  gap: 10px;
  border-radius: 0;
  background: transparent;
  border-bottom: var(--hairline) solid var(--separator);
}
.is-survey__option:last-child {
  border-bottom: 0;
}
.is-survey__option:active {
  background: var(--accent-bg);
}

/* 自绘单选钮：视觉上是 20px 的圆，触控目标是 44×44。
   这解决两件事：① 手机上不必瞄准小圆点；② 审计里的触控目标不再偏小。

   ★ v2 收口（2026-09-15）：旧版这里把**选中色硬编码**成 `%230a6c5c`
   （v2 之前的深青绿）。本文件后加载，于是它把 `styles.css` 的 v2 选中态
   （`--accent` 底 + 白勾）整个盖了回去 —— 实测 computed 是「44×44 盒里
   一张 %230a6c5c 的内嵌 SVG」：圆点是旧青绿、行底却是 --accent-bg 淡蓝。
   现在圆环与实心圆点改用 `radial-gradient` + **设计系统变量**画
   （不再出现任何手写的品牌色），44px 的盒子只画 20px 的圆。 */
.is-survey__option-input {
  width: var(--b-tap);
  height: var(--b-tap);
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  /* 20×20 的背景盒里画一个内切圆：0–82% 是白芯，82–96% 是圆环，其余透明。 */
  background-image: radial-gradient(
    circle closest-side,
    var(--bg-raised) 0 82%,
    var(--border-strong) 82% 96%,
    transparent 96%
  );
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px 20px;
  margin: 0 -12px 0 -6px;
}
.is-survey__option-input:checked {
  border: 0;
  background-color: transparent;
  /* 两层：白勾（与 styles.css 的 v2 勾是同一份资源）+ --accent 实心圆点。 */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 12.6l3.6 3.6 7.2-8.3' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    radial-gradient(circle closest-side, var(--accent) 0 96%, transparent 96%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 14px 14px, 20px 20px;
}
.is-survey__option-text {
  font-size: var(--fs-callout);
  line-height: var(--lh-normal);
}

/* 点整行会间接把焦点给到隐藏的 radio，此时外层已经用底色 + 实心圆点表达了
   "选中"，再叠一圈 2px 描边会显得脏。收紧成 1.5px 内贴线，键盘 Tab 依旧看得见。 */
.is-survey__option:has(.is-survey__option-input:focus-visible) {
  outline: 1.5px solid var(--accent);
  outline-offset: 1px;
}

/* 极长选项（人格量表多数不是，但情绪量表个别题库会有）加一行次级说明 */
.is-survey__option-hint {
  display: block;
  margin-top: 1px;
  color: var(--text-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
  font-weight: var(--fw-regular);
}
.is-survey__option:has(input:checked) .is-survey__option-hint {
  color: var(--accent);
  opacity: .8;
}

/* ---- 底部操作条 ----
   v2 收口：手机上吸底。这一条**在 CSS 侧就能解决**，因此没有动 survey.js
   （footer 的类名仍是 .is-survey__footer，不新增/不改名任何类）。
   吸底语言与 styles.css 的 .is-foot--sticky 完全一致（同一套 padding / 安全区 /
   毛玻璃 / hairline），只是挂在本页自己的类上。
   注意：footer 是视图里最后一个在流元素（抽屉是 fixed），所以 sticky bottom:0
   在整页滚动过程中都钉得住。 */
.is-survey__footer {
  margin-top: var(--sp-5);
  padding-bottom: calc(var(--sp-4) + var(--safe-b));
}
.is-survey__footer-note {
  gap: var(--sp-1);
  margin-bottom: var(--sp-2);
  min-height: 0;
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
}
.is-survey__footer-btns {
  align-items: stretch;
  gap: var(--sp-2);
}
.is-survey__footer-btns .btn {
  min-height: 50px;
}
.is-survey__remaining {
  color: var(--warn);
}

@media (max-width: 699px) {
  .is-survey__footer {
    position: sticky;
    bottom: 0;
    z-index: 15;
    margin: var(--sp-5) calc(-1 * var(--sp-4)) 0;
    padding: var(--sp-3) var(--sp-4) calc(var(--sp-3) + var(--safe-b));
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 0.5px solid var(--separator);
  }
}

@media (max-width: 559px) {
  .is-survey__footer-btns .btn {
    flex: 1 1 auto;
  }
  .is-survey__footer-btns .btn--primary {
    flex: 1 1 100%;
    order: -1;
  }
  /* ★ v2 收口：旧版这里给「保存并退出」写了 flex: 1 1 100%，
     于是按钮条变成**三行**（主按钮 / 保存并退出 / 上一页）——吸底时
     实测条高 195px（施工单 §3 的实测：按钮被压到 121px 宽），永久吃掉 SE 首屏的 1/3。
     现在它收回自然宽度、与「上一页」同行：两行 ≈ 108px（50 + 8 + 50）。 */
  .is-survey__footer-btns .is-survey__stay {
    flex: 0 0 auto;
    min-height: var(--b-tap);
    padding-block: 0;
    font-size: var(--fs-callout);
  }
}

/* ---- 「这是什么量表？」抽屉：手机上是全屏面板 ---- */

.is-survey__drawer {
  background: color-mix(in srgb, var(--text) 44%, transparent);
}
.is-survey__drawer-panel {
  margin-top: 0;
  max-height: 100dvh;
  border-radius: 0;
  height: 100dvh;
}
.is-survey__drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-raised);
  padding: calc(var(--safe-t) + var(--sp-3)) var(--sp-4) var(--sp-3);
  gap: var(--sp-2);
}
.is-survey__drawer-head .is-survey__drawer-close {
  min-height: var(--b-tap);
  min-width: var(--b-tap);
  padding: 0 14px;
  margin-right: -8px;
  border-radius: var(--r-full);
  font-size: var(--fs-callout);
  line-height: var(--lh-normal);
  flex: 0 0 auto;
}
.is-survey__drawer-body {
  padding: var(--sp-4) var(--sp-4) var(--sp-5);
  gap: var(--sp-4);
}
/* 底部「回到答题」也钉住：长内容滚到哪里都能一键回题。
   styles.css 里这个面板是 overflow:hidden 的 flex 列，sticky 仍然有效；
   为了不让滚动文字"贴着"按钮，底栏加一层毛玻璃与上边线。 */
.is-survey__drawer-foot {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--bg-raised) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 0.5px solid var(--separator);
  padding: var(--sp-3) var(--sp-4);
  padding-bottom: calc(var(--sp-3) + var(--safe-b));
}
.is-survey__drawer-foot .btn {
  width: 100%;
  min-height: 50px;
}

.is-survey__facts {
  gap: 2px var(--sp-3);
  padding-bottom: 8px;
  border-bottom: 0.5px solid var(--separator);
  margin: 0;
}
.is-survey__facts:last-of-type {
  border-bottom: 0;
}
.is-survey__fact-label {
  flex: 0 0 3.6em;
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
}
.is-survey__fact-value {
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
}

/* 抽屉里的「能得到 / 不能得到」清单：手机上要能一口气扫完 */
.is-survey__drawer-body .list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.is-survey__drawer-body .list__item {
  padding: 6px 0;
}
.is-survey__drawer-body .section__title {
  margin-bottom: 6px;
}

/* ============================================================
   二、报告页 report.js
   ============================================================ */

.view--report {
  padding-top: var(--sp-6);
}

.is-report__hero {
  margin: 0 0 var(--sp-4);
}
.is-report__hero h1 {
  margin-bottom: var(--sp-2);
}
.is-report__meta {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
}

/* 效度提示放顶部（规范 §4.6）：手机上让它更显眼一点 */
.view--report > .notice {
  margin: 0 0 var(--sp-4);
}
.view--report > .notice h3 {
  margin-bottom: var(--sp-1);
  font-size: var(--fs-headline);
}
.view--report > .notice p {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}

/* ---- 分区目录：手机上首屏不用它，往下滑出现，点一下回到任一节 ---- */

.view--report .is-report__jump {
  margin: 0 0 var(--sp-5);
}
.is-report__jump-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 2px 6px;
  margin: 0;
}
.is-report__jump-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--b-tap);
  padding: 0 15px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
  white-space: nowrap;
  text-decoration: none;
}
.is-report__jump-item:hover {
  color: var(--text);
  text-decoration: none;
}
.is-report__jump-item:active {
  background: var(--surface-3);
}
.is-report__jump-item.is-on {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}

/* 分区标题：让"① ② ③"真正起到导航作用 */
.view--report .section {
  margin: var(--sp-6) 0;
}
.view--report .section__title {
  color: color-mix(in srgb, var(--text-3) 55%, var(--text));
  font-size: var(--fs-footnote);
  margin-bottom: var(--sp-2);
}
.view--report .section__note {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-subhead);
  line-height: var(--lh-relaxed);
}
.view--report .section__body > p {
  line-height: var(--lh-relaxed);
}

/* ---- 连续谱：本产品的核心可视化，给它更多呼吸 ---- */

.view--report .continuum {
  margin: var(--sp-5) 0;
  padding-bottom: var(--sp-3);
  border-bottom: 0.5px solid var(--separator);
}
.view--report .continuum:last-of-type {
  border-bottom: 0;
}
.view--report .continuum__head {
  align-items: center;
  margin-bottom: var(--sp-3);
}
.view--report .continuum__label {
  font-size: var(--fs-headline);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-head);
}
.view--report .continuum__value {
  font-size: var(--fs-title3);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}
.view--report .continuum__track {
  height: 7px;
}
.view--report .continuum__scale {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  margin-top: var(--sp-3);
}
.view--report .continuum__desc {
  margin-top: var(--sp-3);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.view--report .continuum__caption {
  margin-top: var(--sp-1);
  font-size: var(--fs-footnote);
  line-height: var(--lh-relaxed);
}
.view--report .continuum > .pill {
  margin-top: var(--sp-2);
}

/* ---- 情绪报告：得分是本页的主角，但在手机上通栏之后 30px 会显得过重 ---- */

.is-report__score {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-num);
  font-size: var(--fs-title1);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-head);
  /* 设计系统铁律：`--accent` 当**填充**、`--accent-text` 当**文字**。
     分数是"字"，系统蓝直接当文字色只有 3.65:1（不合格），
     深一档的 `--accent-text` 是 5.57:1。 */
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
@media (min-width: 700px) {
  .is-report__score {
    font-size: var(--fs-largetitle);
  }
}

/* ---- 口令输入框：留白归报告页（`.is-input` 本身是通用类，margin 为 0） ----
   「访问口令」标签（`.is-report-ai-note`）自带 --sp-3 上边距，
   输入框与它之间补一段 --sp-3 的留白；下方交给 `.is-report-ai-actions` 的 --sp-4。 */
.view--report .is-report-ai-note + .is-input {
  margin-top: var(--sp-3);
}

/* ---- 层面表：手机上横向滚动，首列钉住不跟着跑 ---- */

.is-report__scroll-hint {
  margin: var(--sp-2) 0 var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
}

.is-facet-table {
  min-width: 34rem;
}
.is-facet-table th:first-child,
.is-facet-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--bg-raised);
  padding-right: 12px;
}
.is-facet-table thead th {
  background: var(--bg-raised);
}
.is-facet-table thead th:first-child {
  z-index: 2;
}
.is-facet-table tbody tr.is-low td,
.is-facet-table tbody tr.is-low th {
  color: var(--text-2);
}

/* 横向滚动本身要有个"可以滑"的暗示：右侧 18px 渐隐，滚到头就没有了 */
.view--report .is-table__wrap,
.is-method .is-table__wrap {
  margin-inline: 0;
  padding-inline: 0;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent 100%);
}
.view--report .is-table__wrap::after,
.is-method .is-table__wrap::after {
  content: '';
  display: block;
  height: 2px;
}

/* ---- 量表事实：键值对在手机上别做成两列硬对齐 ---- */

.zone {
  padding: var(--sp-4);
}
.zone__tag {
  font-size: var(--fs-caption);
  max-width: 100%;
  white-space: normal;
  line-height: var(--lh-snug);
}
.view--report .is-kv {
  grid-template-columns: minmax(4.2em, auto) 1fr;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-subhead);
  line-height: var(--lh-normal);
}
.view--report .zone .row .btn {
  flex: 1 1 auto;
  min-height: var(--b-tap);
  padding-inline: var(--sp-4);
}

/* 「查看本次上传了什么」里的 JSON：手机上不能撑宽，也不能太小 */
.view--report pre {
  font-size: var(--fs-caption);
  line-height: var(--lh-snug);
  white-space: pre;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- 局限 / 我们不做什么 / 建议与资源：长清单的扫读节奏 ---- */

.view--report .section__body > ul:not(.list) {
  padding-left: 1.15em;
  margin-bottom: var(--sp-4);
}
.view--report .section__body > ul:not(.list) > li {
  margin-bottom: 0;
  line-height: var(--lh-relaxed);
}
.view--report .list__item {
  padding: var(--sp-2) 0;
}
.view--report .list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.view--report .list__mark {
  font-size: var(--fs-callout);
}

/* 证据徽章：手机上铺满一行更好点（也让长授权名不再被截断）。
   styles.css 已把徽章高度提到 44px，这里只处理"换行 + 满行"，
   因为手机端分栏的断点（699）和徽章的断点必须一致，否则 560–699px
   这一段会出现"徽章还挤在一起、页面已经按手机排版"的错位。 */
@media (max-width: 699px) {
  /* 2026-09-15：不再强制单列（旧口径：徽章 44px 满行更好点）。
     徽章瘦身成 26px 紧凑标签后，`styles.css` 的 auto-fill 网格已给出稳定 2 列；
     这里只需要保证长授权名能折行、不截断。 */
  .view--report .is-badge-row {
    gap: var(--sp-5) var(--sp-4);
  }
  /* 徽章瘦身（2026-09-15）：与首页同一档视觉高，44px 交回给
     `.pill__summary::after` 的伪元素热区（`styles.css`）。
     这里**不再**给 min-height —— 给了这一页的徽章就是另一种尺寸。 */
  /* 徽章瘦身 + 光学垂直居中：与 `styles.css` 的基础规则**逐值对齐**，
     并显式重申 `align-items: center`（这里覆盖了 `display`，
     把 align-items 一并写死，免得基础规则将来一改这一页就歪）。 */
  .view--report .pill__summary {
    min-height: var(--sp-5);
    padding: var(--sp-1) var(--sp-3);
    display: flex;
    align-items: center;
    white-space: normal;
    text-overflow: clip;
  }
  .view--report .pill__label {
    white-space: normal;
    overflow: visible;
    line-height: var(--lh-snug);
    /* 换行时行盒宽度 = 列宽；文字按 start 排，最后一行右侧会留空。
       `text-align: center` 会让「图标 + 文字」整体相对图标右移，反而更歪，
       故保持 start —— 实测换行徽章的墨迹左右差 ≤0.75px。 */
  }
}

/* ---- 空态：一行标题 + 一个出口，别让用户以为页面坏了 ---- */

.view--report > h1 {
  margin-bottom: var(--sp-3);
}
.view--report > p.muted {
  max-width: 30rem;
}

/* ============================================================
   三、方法说明页 method.js
   ============================================================ */

.is-method {
  padding-top: var(--sp-6);
}
/* `.is-method__lede`（h1/p 两条）已于 2026-09-15 收口时删除：方法说明页改用
   `.is-hero__title` + `.is-hero__lede` 后它零引用（grep 全仓核实；登记见
   `docs/设计系统-v2.md` §7）。 */

/* ---- 分区导航：这一页一万像素高，没有目录就等于没有导航 ----
   实测（iPhone 15 / 393px）：顶栏底边在 51px 处，所以这里钉在 52px，
   不能让导航被顶栏盖住。窄屏上才需要它，宽屏有侧边留白可以自己滚。 */

.is-method__nav {
  display: none;
}
@media (max-width: 699px) {
  .is-method__nav {
    display: block;
    position: sticky;
    top: 52px;
    z-index: 10;
    margin: 0 0 var(--sp-4);
    background: color-mix(in srgb, var(--bg) 96%, transparent);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-radius: var(--r);
    box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--text) 40%, transparent);
  }
}
.is-method__nav-scroll {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 6px 8px 8px;
}
.is-method__nav-item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--b-tap);
  padding: 0 14px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-subhead);
  line-height: var(--lh-snug);
  white-space: nowrap;
  text-decoration: none;
}
.is-method__nav-item:hover {
  color: var(--text);
  text-decoration: none;
}
.is-method__nav-item:active {
  background: var(--surface-3);
}
.is-method__nav-item.is-on {
  background: var(--accent-bg);
  color: var(--accent);
  font-weight: 500;
}

/* ---- 量表档案卡：手机上折起来，想看再展开 ---- */

.is-method__archive {
  margin-top: var(--sp-3);
}
.is-method__archive > summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 2px 0 8px;
  cursor: pointer;
  list-style: none;
}
.is-method__archive > summary::-webkit-details-marker {
  display: none;
}
.is-method__archive > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 1.5px solid var(--text-3);
  border-bottom: 1.5px solid var(--text-3);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .18s ease;
}
.is-method__archive[open] > summary::after {
  transform: rotate(-135deg) translateY(-2px);
}
.is-method__archive > summary .card__title {
  margin: 0;
  font-size: var(--fs-headline);
  min-width: 0;
}
.is-method__archive > summary .is-method__archive-hint {
  flex: 0 0 auto;
  color: var(--text-3);
  font-size: var(--fs-caption);
  line-height: var(--lh-normal);
}
.is-method__archive > summary:active {
  opacity: .7;
}

.is-method__facts {
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: var(--r);
}

/* ---- 分区文本节奏 ---- */

.is-method .section__title {
  margin-bottom: var(--sp-2);
}
.is-method .section__note {
  margin-bottom: var(--sp-4);
  line-height: var(--lh-relaxed);
}
.is-method .card {
  margin-top: var(--sp-3);
}
.is-method .card:first-child {
  margin-top: 0;
}
.is-method .card__title {
  margin-bottom: var(--sp-1);
}
/* 与基础 `.card__subtitle` 同档（1.6）：同一角色在首页是 1.6、在这里是 1.47，
   就是用户看到的「行间距有宽有窄」。 */
.is-method .card__subtitle {
  margin-bottom: var(--sp-3);
  line-height: var(--lh-relaxed);
}
.is-method .stack > .is-h3,
.is-method .stack > .strong {
  margin-bottom: var(--sp-1);
}
.is-method .list__text {
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
}
.is-method .is-method__quote {
  font-size: var(--fs-callout);
  line-height: var(--lh-relaxed);
}

/* 门槛统计块：数字要能一眼扫到 */
.is-method__stats {
  padding: var(--sp-4);
  gap: var(--sp-2);
  border-radius: var(--r);
  font-size: var(--fs-callout);
  line-height: var(--lh-normal);
}
.is-method__stats > div:first-child {
  font-weight: 600;
}

.is-method__scroll-hint {
  margin: var(--sp-2) 0 0;
  color: var(--text-3);
  font-size: var(--fs-footnote);
  line-height: var(--lh-relaxed);
}

/* ---- α 完整表：窄屏横向滚动 ----
   刻意**不做 sticky 首列**：这一表的前两列都是文本列，一旦钉住就会盖住
   后面的英文名列（列宽随内容变化，无法用固定 left 值可靠排布）。
   样式契约里"横向滚动容器能正确约束宽内容"是实测过的，交给它即可；
   门槛行改用左侧色条 + 整行淡黄底来标出，比钉列更不容易误读。 */

.is-alpha-table {
  min-width: 42rem;
}
.is-alpha-table th[scope='row'] {
  white-space: nowrap;
}

/* 低于门槛的行：左侧色条 + 整行淡黄底。色条画在单元格内部（不盖住编号），
   底色让它在横向滚动时也认得出这一行是"不生成解读"的那几行。 */
.is-alpha-table--low th[scope='row'] {
  box-shadow: none;
  position: relative;
}
.is-alpha-table--low th[scope='row']::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--warn);
}
.is-alpha-table--low td {
  background: color-mix(in srgb, var(--warn-bg) 72%, var(--bg-raised));
}
.is-cell--low {
  color: var(--warn);
  font-weight: 600;
}
/* 「不生成个体化解读」标注：9 行都要出现，字号撑到 13px 以免在手机上糊掉 */
.is-flag {
  font-size: var(--fs-footnote);
  line-height: var(--lh-normal);
  padding: var(--sp-1) var(--sp-2);
}

/* ---- 徽章：手机上不再被截断，且整行更好点 ---- */

@media (max-width: 699px) {
  /* 同报告页：不再强制单列，交给 styles.css 的 auto-fill 网格。 */
  .is-method .is-badge-row {
    gap: var(--sp-5) var(--sp-4);
  }
  /* 同上：徽章瘦身，44px 走伪元素热区；光学居中与基础规则逐值对齐。 */
  .is-method .pill__summary {
    min-height: var(--sp-5);
    padding: var(--sp-1) var(--sp-3);
    display: flex;
    align-items: center;
    white-space: normal;
    text-overflow: clip;
  }
  .is-method .pill__label {
    white-space: normal;
    overflow: visible;
    line-height: var(--lh-snug);
  }
  .is-method .pill__body {
    font-size: var(--fs-footnote);
    line-height: var(--lh-relaxed);
  }
}

/* 局限徽章（方法说明页会一次排很多个）保持可换行、不挤成一列 */
.is-method .is-badge-row .pill {
  max-width: 100%;
}

/* ---- 数据处置区：危险按钮在手机上通栏，别误触相邻元素 ---- */

.is-method__status {
  min-height: 1.6em;
  margin-top: 6px;
}
@media (max-width: 559px) {
  .is-method .row > .btn--danger {
    width: 100%;
    min-height: 50px;
  }
}

/* ============================================================
   四、三页共用的可点元素兜底
   ============================================================ */

/* 正文里的行内链接在手机上要有 44px 的触控高度 —— 用内边距而不是行高，
   这样不会把段落撑开。 */
.is-survey a[href],
.view--report .pill__link,
.is-method .pill__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--b-tap);
  margin-block: -10px;
  padding-inline: 2px;
}

.view--report .pill__link,
.is-method .pill__link {
  /* 徽章正文/链接是 13px 档；这里曾经是 13.5px，比首页那两枚大 0.5px。 */
  font-size: var(--fs-footnote);
  line-height: var(--lh-snug);
}

/* 该跳过链接是键盘用户的第一个目标，42px 差 2px 不划算，直接给够 */
.skip-link {
  min-height: var(--b-tap);
  display: inline-flex;
  align-items: center;
}

/* 窄屏上的主操作按钮统一高度，避免"上一页/下一页"高度不一 */
@media (max-width: 559px) {
  .is-survey .btn,
  .view--report .btn {
    min-height: 50px;
  }
}