/* 分寸之间 consent-sheet.com
   视觉世界：水墨文人 —— 宣纸底、墨色字、宋体标题、发丝线、直角。
   设计取向：郑重、克制、可读性优先。这份东西要在填写者最需要诚实的时候被读，
   任何花哨都是干扰。 */

:root {
  --bg: #f7f6f2;            /* 宣纸 */
  --surface: #f7f6f2;       /* 纸面一体：不用白卡片堆叠，层级靠留白与发丝线 */
  --line: #dcd9d2;
  --hair: rgba(44, 44, 44, .15);   /* 发丝线：这个世界唯一的分隔手段 */
  --ink: #2c2c2c;           /* 墨 */
  --ink-2: #4a4e53;
  --ink-3: #6b6b6b;         /* 在 #f7f6f2 上 4.86:1，过 WCAG AA */

  /* 四档的语义色。三档各自的明度差别足够大，
     即便色觉异常也能靠深浅 + 文字区分；「不要」是未标记态，不需要颜色。 */
  --want: #a2560c;      /* 想要 —— 赭石，暖，主动 */
  --want-bg: #f5ead9;
  --ok: #4b5563;        /* 可以 —— 石墨，中性 */
  --ok-bg: #eceae4;
  --try: #4a6472;       /* 想试 —— 黛，青墨，好奇待探索 */
  --try-bg: #e4eaed;

  --warn: #b4342a;      /* 全站唯一的红，只用于交叉冲突提示 */
  --warn-bg: #f6e9e6;

  /* 晕染三色：只允许出现在 hero 的水墨底 */
  --wash-slate: #8895a0;
  --wash-umber: #7a7165;

  --maxw: 46rem;
  --serif: "Songti SC", "STSong", "Noto Serif SC", serif;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
          "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  /* 氛围慢、响应快：装饰过渡走 --slow，操作反馈仍是 .12s */
  --slow: .5s cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1d1b;          /* 墨夜 */
    --surface: #232422;
    --line: #3a3b37;
    --hair: rgba(230, 228, 220, .14);
    --ink: #e6e4dc;         /* 纸字 */
    --ink-2: #b8b6ad;
    --ink-3: #8a897f;       /* 在 #1c1d1b 上约 4.8:1 */
    --want: #d99a55; --want-bg: #33291c;
    --ok: #9aa2ac;   --ok-bg: #2b2c29;
    --try: #7a94a6;  --try-bg: #242c31;
    --warn: #e08a7d; --warn-bg: #32211e;
  }
}

* { box-sizing: border-box; }

/* .btn 等元素带显式 display，会盖掉浏览器默认的 [hidden]{display:none}。
   页面大量用 hidden 控制显隐（提交按钮、草稿区、结果页），必须显式压过去，
   否则「确认无误」会在每一步都露出来。 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── 头部与进度 ─────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--hair);
  /* 装到主屏后网页会画到状态栏底下（black-translucent），
     sticky 头必须自己把这段安全区垫出来，否则 logo 直接钻进状态栏。
     ⚠ 这两半是一套：只上 meta 不上 padding，比两个都不上更糟。 */
  padding: calc(.75rem + env(safe-area-inset-top)) 1rem .5rem;
}
.header-row { max-width: var(--maxw); margin: 0 auto; }
/* 品牌是宋体 + 宽字距 —— 全站唯一长期悬挂的 display 元素 */
/* ── Logo ────────────────────────────────────────────────────
   一个方框，中间一条竖线，左「分」右「寸」。
   那条竖线不是装饰：它就是「界」，而两字之间的空隙就是「之间」——
   三个概念用两个字加一条线说完，不需要再画任何图形。

   用文字而不是 SVG 路径：字形直接取系统宋体，与全站标题同源；
   深色模式靠 currentColor 自动翻转，不必备第二份资源；
   放大到任何尺寸都不糊。代价是不同系统的宋体略有差异 ——
   这个站本来就把宋体当作自己的声音，差异是可以接受的。 */
.logo {
  display: inline-grid; grid-template-columns: 1fr 1fr;
  inline-size: 2.1rem; block-size: 2.1rem;
  border: 1px solid currentColor;
  box-sizing: border-box; aspect-ratio: 1;
  font-family: var(--serif); font-size: .92rem; line-height: 1;
  /* ⚠ 切断字距继承。父级 .brand 有 .34em 字距，落到印里每个字多出 5px，
     把两格分别撑到 18.9px（盒宽只有 33.6），1fr 是 minmax(auto,1fr)，
     被 min-content 顶开之后分隔线就偏了 —— 左格看着比右格大。 */
  letter-spacing: 0;
  flex: none; align-self: center;
}
.logo i {
  display: grid; place-items: center; font-style: normal;
  box-sizing: border-box; min-inline-size: 0;
  /* 宋体的字面比字框小，视觉上会偏下，抬一点点回到光学中心 */
  padding-bottom: .06em;
}
/* 分隔线画在左格的右边，于是左格的内容盒比右格窄 1px —— 两个字就不等大了。
   给右格补一条等宽的透明边框，把这 1px 找平。 */
.logo i:first-child { border-right: 1px solid currentColor; }
.logo i:last-child { border-left: 1px solid transparent; }

.brand {
  margin: 0; font-family: var(--serif);
  font-size: 1rem; font-weight: 600; letter-spacing: .2em;
}

.progress-wrap { max-width: var(--maxw); margin: .6rem auto 0; }
.progress-info { display: flex; align-items: baseline; gap: .6rem; }
.progress-info h2 { margin: 0; font-size: .82rem; font-weight: 600; color: var(--ink-2); }
.step-name { font-size: .82rem; color: var(--ink-3); }
.progress-track {
  height: 3px; margin-top: .4rem; border-radius: 2px;
  background: var(--line); overflow: hidden;
}
/* 用 transform 而不是 width 做进度动画：动 width 会触发重排，
   动 transform 只走合成层。进度条每步只变一次，差别不大，但没有理由不用更省的那个。 */
.progress-fill {
  height: 100%; width: 100%; border-radius: 2px;
  background: var(--ink-2);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .28s ease;
}
.step-hint { margin: .45rem 0 0; font-size: .82rem; color: var(--ink-3); }

/* ── 布局 ──────────────────────────────────────────────── */
/* 底部只留一点余量：按钮条改成 sticky 之后自己占位，不再需要 8rem 的空占位 ——
   那 8rem 正是最后一步下面那一大片空白的来源。 */
.container { max-width: var(--maxw); margin: 0 auto; padding: 1.25rem 1rem 1.5rem; }

/* 卡片不是白色浮块，是纸上用发丝线围起来的一段 */
.card {
  background: transparent;
  border: 1px solid var(--hair);
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.lede { margin: 0 0 .7rem; font-size: 1.05rem; }
.lede.strong { font-weight: 600; }
.muted { color: var(--ink-2); font-size: .88rem; }
.muted.small { font-size: .82rem; }

.intro-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.draft-actions { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.draft-actions .btn { margin-right: .5rem; margin-top: .5rem; }

.howto { margin-top: 1rem; border-top: 1px solid var(--hair); padding-top: .75rem; }
/* summary 也要够 44px 触控高度（实测只有 26px）。 */
.howto summary {
  cursor: pointer; font-weight: 600; font-size: .94rem;
  display: flex; align-items: center; min-height: 2.75rem;
}
.howto ol, .howto ul { padding-left: 1.2rem; font-size: .88rem; color: var(--ink-2); }
.howto li { margin: .4rem 0; }
.howto b { color: var(--ink); }

/* ── 题目 ──────────────────────────────────────────────── */
.q { margin-bottom: 2rem; }
.q:last-child { margin-bottom: .5rem; }
/* 题目标题上宋体：46 道题就是 46 行文书条款 */
.q-title {
  margin: 0 0 .35rem; font-family: var(--serif);
  font-size: 1.05rem; font-weight: 600; line-height: 1.5;
}
.q-num { color: var(--ink-3); font-weight: 500; margin-right: .35rem; }
/* 旁注：浅底 + 发丝线包边。它是全站唯一的实心色块分层，
   没有边的话在「只用发丝线」的系统里是最重的一个元素。 */
.q-note {
  margin: 0 0 .7rem; font-size: .88rem; color: var(--ink-2);
  background: var(--ok-bg);
  border: 1px solid var(--hair);
  padding: .5rem .7rem;
}
.q-foot {
  margin: .7rem 0 0; font-size: .82rem; color: var(--ink-2);
  border: 1px dashed var(--hair); padding: .6rem .7rem;
}
.q-foot b { color: var(--ink); }
/* 分条的说明文字。整块六七百字的时候，唯一能让人读进去的排版就是
   「一条一段 + 小标题单起一行」—— 靠 ｜ 与【】在题库里标出结构，这里只负责显示。 */
.prose { line-height: 1.65; }
.prose-item { margin: 0 0 .55rem; padding-left: .85rem; position: relative; }
.prose-item:last-child { margin-bottom: 0; }
.prose-item::before {
  content: ''; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; background: var(--ink-3);
}
.prose-lead { display: block; color: var(--ink); margin-bottom: .1rem; }

/* 选项（radio / multi） */
.opt {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .55rem .7rem; margin-bottom: .3rem;
  border: 1px solid var(--hair);
  cursor: pointer; transition: border-color .12s, background .12s;
}
.opt:hover { border-color: var(--ink-3); }
.opt input { margin: .42rem 0 0; flex: none; accent-color: var(--want); }
.opt.checked { border-color: var(--want); background: var(--want-bg); }
.opt-label { flex: 1; font-size: .94rem; line-height: 1.55; }

/* 分组 */
.group { margin-bottom: 1rem; }
.group-label {
  font-size: .82rem; font-weight: 600; color: var(--ink-2);
  margin: 0 0 .4rem; padding-bottom: .25rem;
  border-bottom: 1px solid var(--hair);
}

/* ── 四档量表 ───────────────────────────────────────────
   每行：选项文字在左，四个档位按钮在右；再点一次取消回到未标记。
   未标记 = 「不要」，这一点由题目上方的常驻提示交代。 */
/* 绝不换行：标签在左、四个档位在右，永远同一行。
   曾经用 flex-wrap 让长标签把按钮挤到第二行，行高从 43px 涨到 90px 以上，
   十七件工具能拉出一屏半。现在改成标签自己内部折行（min-width:0 是关键，
   没有它 flex 项不会缩到内容宽度以下），按钮块固定不参与收缩。 */
.scale-row {
  display: flex; align-items: center; gap: .5rem; flex-wrap: nowrap;
  padding: .4rem .55rem; margin-bottom: .25rem;
  border: 1px solid var(--hair);
}
.scale-row .opt-label { flex: 1 1 auto; min-width: 0; font-size: .92rem; }
.scale-btns { display: flex; gap: .22rem; flex: 0 0 auto; margin-left: auto; }
/* 触控目标 ≥44px：这是全站复用最多的控件，「想要」和「不要」语义相反，
   28px 高（历史实测）在单手躺卧操作下误触代价太高。 */
.scale-btn {
  font: inherit; font-size: .82rem; line-height: 1;
  padding: .45rem .45rem; min-width: 2.75rem; min-height: 2.75rem;
  border: 1px solid var(--hair);
  background: transparent; color: var(--ink-2); cursor: pointer;
  transition: all .12s;
}
.scale-btn:hover { border-color: var(--ink-3); }
.scale-row[data-level="想要"] { border-color: var(--want); background: var(--want-bg); }
.scale-row[data-level="可以"] { border-color: var(--ink-3); background: var(--ok-bg); }
.scale-row[data-level="想试"] { border-color: var(--try); background: var(--try-bg); }
/* 明确点了「不要」：给一条灰底 + 删除线，让它一眼可见「我看过、我拒绝」，
   而不是和「还没读到这儿」的空白长得一样。这正是加第四个按钮的全部理由。 */
.scale-row[data-level="不要"], .scale-row[data-level="不提供"] {
  border-color: var(--hair); background: var(--ok-bg); opacity: .72;
}
.scale-row[data-level="不要"] .opt-label,
.scale-row[data-level="不提供"] .opt-label { text-decoration: line-through; color: var(--ink-3); }
/* 用纸色而不是纯白：这套系统里不该有比宣纸更白的东西 */
.scale-btn.on { color: var(--bg); border-color: transparent; font-weight: 600; }
.scale-btn.on[data-level="想要"], .scale-btn.on[data-level="常用"] { background: var(--want); }
.scale-btn.on[data-level="可以"], .scale-btn.on[data-level="能用"] { background: var(--ok); }
.scale-btn.on[data-level="想试"] { background: var(--try); }
.scale-btn.on[data-level="不要"], .scale-btn.on[data-level="不提供"] { background: var(--ink-3); }

@media (prefers-color-scheme: dark) {
  .scale-btn.on { color: #1c1d1b; }
}

/* 补充文本框 */
.sub-text { margin: .3rem 0 .6rem 1.6rem; }
.extra-box { margin-top: .8rem; }
.extra-box label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
/* 字号必须 ≥16px。iOS Safari 在聚焦更小的输入框时会自动放大整个页面，
   放大后不会自己缩回去，用户得手动双指捏合 —— 填 48 题的过程中每点一次
   输入框就来一次，非常难受。1rem 本来就在字号刻度上，不算破例。 */
input[type="text"], input[type="password"], textarea {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .55rem .7rem; color: var(--ink);
  background: transparent;
  border: 1px solid var(--hair);
}
input:focus, textarea:focus { outline: 2px solid var(--want); outline-offset: 1px; border-color: transparent; }

/* 交叉冲突提示 —— 只提示，不拦截 */
.conflict {
  margin-top: .6rem; padding: .6rem .7rem;
  font-size: .82rem; color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent);
}
.hint-line { margin: .4rem 0 0; font-size: .82rem; color: var(--try); }

/* ── 按钮与导航 ─────────────────────────────────────────── */
/* 直角。水墨世界里没有圆角按钮。 */
.btn {
  font: inherit; font-size: .94rem; font-weight: 500;
  padding: .65rem 1.15rem; cursor: pointer;
  border: 1px solid transparent; text-decoration: none; display: inline-block;
  transition: opacity .12s, background .12s;
}
.btn-primary { background: var(--ink); color: var(--bg); }
.btn-primary:hover { opacity: .86; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--hair); }
.btn-ghost:hover { border-color: var(--ink-3); color: var(--ink); }
/* 「去对照页」是真实的下一步，但整页只能有一个墨底主按钮（那是保存图片）。
   强 ghost：比 ghost 显眼、比 primary 克制，不借语义色 ——
   三档语义色只属于量表，借给 CTA 会稀释「想试」的含义。 */
.btn-accent { background: transparent; color: var(--ink); border-color: var(--ink-2); font-weight: 600; }
.btn-accent:hover { border-color: var(--ink); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* sticky 而不是 fixed。iOS Safari 上 position: fixed 的元素在惯性滚动期间
   不跟着重绘，滚动过程中会看见按钮条停在半空、和内容脱开 —— 就是「滑动异常」。
   sticky 走合成器，滚多快都跟手；而且它占真实布局空间，
   容器底部那 8rem 的占位内边距也可以一起去掉（内容末尾不会再顶着按钮条）。
   前提是它必须是 <body> 的最后一个块：sticky 只在自己的父容器里生效，
   留在 <main> 里的话，滚到底时页脚会跑到按钮条下面去，底部空出一截。 */
.nav-bar {
  position: sticky; bottom: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--hair);
  padding: .7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
}
.nav-btns {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; gap: .6rem; justify-content: flex-end;
}
/* 按钮文字一律不折行 —— 「确认无误，生成边界卡」在窄屏折成三行时
   整条导航会撑高一倍，把内容顶出视野 */
.nav-btns .btn { white-space: nowrap; }
@media (max-width: 24rem) {
  .nav-btns .btn { padding: .6rem .8rem; font-size: .88rem; }
}
.form-error {
  max-width: var(--maxw); margin: 0 auto .5rem;
  color: var(--warn); font-size: .88rem; font-weight: 500;
}

/* ── 检查页与结果页 ─────────────────────────────────────── */
.review-item { padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.review-item:last-child { border-bottom: 0; }
.review-q { font-size: .82rem; color: var(--ink-3); margin: 0 0 .2rem; }
.review-a { font-size: .94rem; margin: 0; }
.review-a .lv { font-size: .82rem; padding: .05rem .35rem; margin-right: .3rem; }
/* 一档一行：档位徽章固定宽度顶格，右边是这一档下的全部选项。
   徽章不参与收缩，否则「想要」两个字会被压成两行。 */
.lv-row { display: flex; align-items: baseline; gap: .45rem; margin: .25rem 0; }
.lv-row .lv { flex: 0 0 auto; margin-right: 0; }
.lv-items { flex: 1 1 auto; min-width: 0; font-size: .9rem; color: var(--ink-2); }
.lv-想要 { background: var(--want-bg); color: var(--want); }
.lv-可以 { background: var(--ok-bg); color: var(--ok); }
.lv-想试 { background: var(--try-bg); color: var(--try); }
.lv-不要, .lv-不提供 { background: var(--ok-bg); color: var(--ink-3); }
.lv-常用 { background: var(--want-bg); color: var(--want); }
.lv-能用 { background: var(--ok-bg); color: var(--ok); }
.review-step-title {
  margin: 1.4rem 0 .3rem; font-size: .88rem; font-weight: 600; color: var(--ink-2);
}
.review-step-title:first-child { margin-top: 0; }

.card-preview { margin: 1rem 0; }
.card-preview canvas, .card-preview img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--hair);
}
.toggle { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--ink-2); margin: .6rem 0; }
.toggle input { accent-color: var(--want); }
.result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0; }
/* 「保存为图片」是这一页唯一必须完成的动作，它不能和另外三个按钮排在同一行里
   平起平坐 —— 一排四个等宽按钮等于没有主次。满宽独占一行，其余降为小号次要键。 */
.save-row { margin: 1rem 0 .8rem; }
.btn-block { display: block; width: 100%; text-align: center; padding: .8rem 1.15rem; font-size: 1rem; }
.save-hint { margin: .5rem 0 0; text-align: center; }
.result-actions.minor { margin: 0 0 .4rem; gap: .5rem; }
.result-no strong {
  font-family: var(--serif);
  font-size: 1.15rem; letter-spacing: .12em;
}
.share-box { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.share-code { margin: .4rem 0; }
.share-code code {
  font-size: 1.15rem; letter-spacing: .12em; font-weight: 600;
  background: var(--ok-bg); padding: .4rem .7rem;
}

.site-footer {
  max-width: var(--maxw); margin: 0 auto; padding: 1.5rem 1rem 3rem;
  text-align: center;
}
/* 页脚隐私区块：信任敏感型产品的 reassurance 位。左对齐长文，
   与居中的版权行分开。文案必须与 functions/ 的实际实现一致（见 index.html 注释）。 */
.privacy {
  margin: 0 0 1.5rem; padding-top: 1.2rem;
  border-top: 1px solid var(--hair);
  text-align: left;
}
.privacy-title {
  margin: 0 0 .6rem; font-size: .82rem; font-weight: 600;
  color: var(--ink-2); letter-spacing: .08em;
}
.privacy ul { margin: 0; padding-left: 1.2rem; font-size: .82rem; color: var(--ink-2); line-height: 1.7; }
.privacy li { margin: .3rem 0; }
.copyright { font-size: .76rem; color: var(--ink-3); margin: 0; }

/* 窄屏再挤一点给标签让位。按钮不能低于 2.6rem 宽 —— 那是拇指点得准的下限。 */
@media (max-width: 26rem) {
  .scale-row { gap: .35rem; padding: .35rem .45rem; }
  .scale-row .opt-label { font-size: .88rem; }
  .scale-btn { min-width: 2.75rem; padding: .42rem .25rem; font-size: .8rem; }
}

/* ── 后台 ──────────────────────────────────────────────── */
/* flex-wrap：移动端五个 tab 不换行会被压成竖排单字（实测 53×87px）。 */
.tabs { display: flex; gap: .5rem; align-items: center; margin-bottom: .9rem; flex-wrap: wrap; }
.tabs .spacer { flex: 1; }
.tab {
  font: inherit; font-size: .88rem; padding: .4rem .9rem; cursor: pointer;
  border: 1px solid var(--hair); white-space: nowrap;
  background: transparent; color: var(--ink-2);
}
.tab.on { background: var(--ink); color: var(--bg); border-color: transparent; font-weight: 600; }
.toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.toolbar input { flex: 1 1 12rem; }
.row {
  display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
  padding: .6rem 0; border-bottom: 1px solid var(--hair); cursor: pointer;
}
.row:hover { background: var(--ok-bg); }
.row .code { font-weight: 600; font-size: .88rem; letter-spacing: .04em; }
.row .nick { font-size: .94rem; }
.row .when { margin-left: auto; font-size: .82rem; color: var(--ink-3); }
/* 删除是后台唯一的不可撤销动作，它与中性操作不能排在同一行平起平坐 */
.danger-zone { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--hair); }
.stat-q { margin: 1.4rem 0 .5rem; font-size: .94rem; font-weight: 600; }
.bar-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .3rem; font-size: .82rem; }
.bar-row .lbl { flex: 0 0 9rem; color: var(--ink-2); }
.bar-track { flex: 1; height: 14px; background: var(--ok-bg); overflow: hidden; display: flex; }
.bar-seg { height: 100%; }
.bar-seg.want { background: var(--want); }
.bar-seg.ok { background: var(--ok); }
.bar-seg.try { background: var(--try); }
.bar-seg.none { background: var(--line); }
.bar-row .n { flex: 0 0 4.5rem; text-align: right; color: var(--ink-3); }

/* ── 对照页 ────────────────────────────────────────────── */
.cmp-list { margin: .4rem 0 1rem; padding-left: 1.2rem; font-size: .88rem; }
.cmp-list li { margin: .2rem 0; }
.cmp-list.want li::marker { color: var(--want); }
.cmp-list.no li::marker { color: var(--warn); }
.cmp-list.try li::marker { color: var(--try); }

/* 安全须知：默认展开，但视觉上收敛一点，免得七节全开像一堵墙。
   小标题仍可点击折叠——读完的人可以收起来。 */
.safety-sec { border-top: 1px solid var(--hair); padding-top: .6rem; margin-top: .8rem; }
.safety-sec summary { font-size: .88rem; color: var(--ink); }
.safety-sec p { margin: .5rem 0; line-height: 1.75; }

/* 反馈表结果页：用户写下的调整复述 —— 这份表自称的产物，
   不能写完就消失（critique P1）。 */
.adjust-recap { margin: 1rem 0; padding: .8rem 1rem; border: 1px solid var(--hair); }
.adjust-recap p { margin: 0 0 .4rem; font-weight: 600; font-size: .94rem; }
.adjust-recap ul { margin: 0; padding-left: 1.2rem; font-size: .88rem; color: var(--ink-2); }
.adjust-recap li { margin: .3rem 0; }

/* 对照码：原本是一行灰字里夹着一个下划线链接，读起来像脚注。
   码本身才是要被复制的东西，给它独立一行 + 复制按钮；去对照页是主动作，用实心按钮。 */
.share-title { margin: 0 0 .3rem; font-size: .94rem; font-weight: 600; }
.share-row { display: flex; align-items: center; gap: .6rem; margin: .7rem 0; flex-wrap: wrap; }
.share-row code {
  flex: 1 1 12rem; font-size: 1.15rem; letter-spacing: .14em; font-weight: 600;
  background: var(--ok-bg); padding: .55rem .8rem;
  text-align: center; user-select: all;
}
/* 邀请链接是 URL 不是码：单独的选择器压过 .share-row code 的特异性。
   曾经直接挂 .invite-url（0,1,0），被 .share-row code（0,1,1）击穿，
   折成 5 行断在词中间，看起来像乱码。 */
.share-row code.invite-url {
  flex: 1 1 14rem; font-size: .82rem; letter-spacing: 0; font-weight: 400;
  word-break: break-all; text-align: left; user-select: all;
}
/* 触控目标不低于 44px（实测「取回」按钮只有 40px 高）。 */
.btn-sm { padding: .45rem .8rem; font-size: .88rem; display: inline-flex; align-items: center; min-height: 2.75rem; }

/* 本机保存说明：位置要显眼但不抢戏 —— 它讲的是「你的健康状况存在这台设备上」，
   人有权随时看到并一键清掉。藏在设置里等于没有。 */
.local-box {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--hair);
}
.local-box p { margin: 0 0 .6rem; }

/* 首页的对照入口：已经填过的人不该被迫再走一遍开始流程 */
.entry-compare { margin: .9rem 0 0; }
.entry-compare a { color: var(--try); }
.row .tag {
  font-size: .76rem; color: var(--try);
  background: var(--try-bg); padding: .1rem .4rem;
}
.code-label { font-size: .82rem; color: var(--ink-3); }

/* 被邀请者的说明横幅：必须在填之前就讲清「邀请你的人会看到什么」，
   而不是填完再说。这是他决定要不要填的前提。 */
.invite-banner { border-color: var(--try); background: var(--try-bg); }
.invite-banner p { margin: 0 0 .4rem; }
.invite-banner p:last-child { margin-bottom: 0; }
.invite-url {
  flex: 1 1 14rem; font-size: .82rem; letter-spacing: 0;
  word-break: break-all; text-align: left;
  background: var(--ok-bg); padding: .55rem .8rem;
}
.row .share { font-size: .76rem; color: var(--ink-3); letter-spacing: .06em; font-family: ui-monospace, monospace; }

/* 恢复码区：语气要比另外两个码重一档 —— 它是唯一能读出全部答案的凭证。
   用赭石边框把它和「可以外发」的那两个码在视觉上分开。 */
.recover-box { border-top-color: var(--want); }
.recover-box .share-title { color: var(--want); }
.recover-entry { margin-top: 1rem; }
.recover-entry input { margin: .5rem 0; }

/* 对照结果按题分组：原来「工具：木板」「工具：藤条」逐条平铺，
   八项工具就是八行「工具：」，真正的信息反而被前缀淹没。 */
.cmp-group { margin: .5rem 0 1.2rem; }
.cmp-row {
  display: flex; gap: .8rem; padding: .5rem 0;
  border-bottom: 1px solid var(--hair); font-size: .88rem;
}
.cmp-row:last-child { border-bottom: 0; }
.cmp-q { flex: 0 0 5.5rem; color: var(--ink-3); }
.cmp-v { flex: 1; }
.cmp-group.want .cmp-v { color: var(--want); }
.cmp-group.no .cmp-v { color: var(--warn); }
.cmp-group.try .cmp-v { color: var(--try); }
@media (max-width: 26rem) {
  .cmp-row { flex-direction: column; gap: .15rem; }
  .cmp-q { flex: none; font-size: .82rem; }
}

/* ════════ 索引页 ════════ */
.home .container { padding-top: 0; }
/* ── 首屏墨场 ────────────────────────────────────────────────
   参考的那套排版里，页眉不是压在图上的一条，而是整幅场的一部分：
   标识在左上、题字牌浮在右下、底边一条硬切进纸面。
   那条硬边是整页唯一的重音 —— 所以这里不做渐隐（之前的 mask 渐隐
   恰恰把「切割」这件事抹掉了）。 */
.hero { margin: 0 0 2.4rem; }
.hero-field {
  position: relative;
  /* 移动端整幅墨场是正方形：宽多少高多少。
     桌面全宽再做方就是一堵墙（1280 宽 = 1280 高），改回按视高走。 */
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  /* 装到主屏之后网页会画到状态栏底下（apple-mobile-web-app-status-bar-style
     = black-translucent）。墨场是页面第一个元素，得自己把这段安全区吃掉，
     否则顶上留一条系统底色的白边，而方印会被状态栏压住。 */
  padding: calc(1.6rem + env(safe-area-inset-top)) 1.2rem 1.8rem;
  border-bottom: 1px solid var(--hair);
  overflow: hidden;

  /* 墨渍分层：黛在右上、赭在左下、留白顶开中央。
     水墨的结构是「墨围着白」，不是一条从白到黑的渐变。 */
  /* 黛在右上、赭在左下，两块对角呼应；中央一团纸色把它们顶开。
     赭原先只有 62% 又缩在角上，等于没有 —— 整幅只剩青灰。
     现在赭铺得更开、更浓，底色也换成偏暖的纸灰，冷暖才咬得住。 */
  background-color: #d2cec4;
  background-image:
    radial-gradient(56% 72% at 82% 14%, color-mix(in srgb, var(--wash-slate) 74%, transparent) 0%, transparent 64%),
    radial-gradient(72% 86% at 10% 84%, color-mix(in srgb, var(--wash-umber) 92%, transparent) 0%, transparent 68%),
    radial-gradient(40% 50% at 38% 40%, color-mix(in srgb, var(--wash-umber) 46%, transparent) 0%, transparent 66%),
    radial-gradient(44% 56% at 54% 44%, color-mix(in srgb, var(--bg) 76%, transparent) 0%, transparent 70%);
}
@media (min-width: 34rem) {
  .hero-field { aspect-ratio: auto; min-block-size: 62vh;
    padding: calc(2.6rem + env(safe-area-inset-top)) 3rem 3rem; }
}
@media (prefers-color-scheme: dark) {
  .hero-field {
    background-color: #262521;
    background-image:
      radial-gradient(56% 72% at 82% 14%, rgba(136, 149, 160, .28) 0%, transparent 64%),
      radial-gradient(72% 86% at 10% 84%, rgba(122, 113, 101, .42) 0%, transparent 68%),
      radial-gradient(40% 50% at 38% 40%, rgba(122, 113, 101, .2) 0%, transparent 66%),
      radial-gradient(44% 56% at 54% 44%, rgba(20, 21, 23, .45) 0%, transparent 70%);
  }
}
/* 宣纸不是平的，是纤维的 —— 一层噪点压在墨上 */
.hero-field::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .hero-field::before { mix-blend-mode: screen; opacity: .5; } }


/* 左上一方印，仅此而已 */
.hero-mark { position: relative; z-index: 2; }

/* 题字牌：压在墨上的一方纸，半透明让墨透过来 */
/* 题牌收到内容大小 —— 方的是整幅墨场，不是这张牌。
   牌子撑成方形会在里面留出一大片无意义的白；小而紧的一方，
   钤在方场上才像印。 */
.hero-plate {
  position: relative; z-index: 2; align-self: flex-end;
  max-inline-size: min(88%, 22rem);
  text-align: right;
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: blur(4px);
  border: 1px solid var(--hair);
  padding: 1.3rem 1.4rem;
}
.hero-title {
  margin: 0; font-family: var(--serif); font-weight: 400;
  font-size: 1.5rem; line-height: 1.6; letter-spacing: .26em;
  white-space: nowrap;
}
/* 一行排完，两组之间空一口气 ——「把兴趣」与「说清楚」是一次停顿，
   不是两行。末字被字距推出去，负边距收回来才真的贴右边。 */
.hero-title span + span { margin-left: .5em; }
.hero-title span:last-child { margin-right: -.26em; }
@media (min-width: 34rem) {
  .hero-title { font-size: 1.9rem; }
  .hero-plate { max-inline-size: 28rem; padding: 1.8rem 2rem; }
  /* 九个字 × (2rem + .26em 字距) ≈ 22.7rem，加内边距要 26rem 才不折行。
     题字折行会把「把该谈的，谈清 / 楚。」断在逗号后面，那句话就散了。 */
  .hero-plate { max-inline-size: 28rem; padding: 1.8rem 2rem; }
}
.hero-sub {
  margin: 0 0 .9rem; font-family: var(--serif); font-size: .82rem;
  letter-spacing: .1em; color: var(--ink-2); line-height: 1.9;
}
/* 款识：名号与域名落在牌子最下一行，像题跋后的落款 */
.hero-sign {
  margin: 1.1rem 0 0; font-family: var(--serif); font-size: .74rem;
  letter-spacing: .16em; color: var(--ink-3);
}

.hero-lede { margin: 0 0 .7rem; font-size: 1.05rem; }
/* 首页唯一的主按钮。Persuade 模式需要一个明确的下一步，
   不能把说服责任全推给滚动 —— 但它得用这套排版自己的语汇。
   实心墨块贴在宣纸上像一张贴纸；改成墨线框 + 纸底 + 拉开的字距，
   hover 才填墨。分量不减，异物感没有了。 */
.hero-actions { margin: 1.4rem 0 0; }
.home .hero-actions .btn-primary {
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); border-radius: 0;
  font-family: var(--serif); font-size: 1rem; letter-spacing: .3em;
  padding: .7rem 1.6rem .7rem 1.9rem;   /* 字距把字整体推左，右侧补回来 */
  transition: background-color var(--slow), color var(--slow);
}
.home .hero-actions .btn-primary:hover {
  background: var(--ink); color: var(--bg); opacity: 1;
}
/* 「各填各的」警示：露出在卡组上方。不用警示色 —— 这不是错误提示，
   是使用方法的第一条，用字重拉开就够了。 */
.fill-alone { margin: 1.5rem 0 0; font-size: .94rem; color: var(--ink-2); }
.fill-alone b { color: var(--ink); }
/* invite 旧链接跳转需要问服务端，等待时给一行状态，不让页面白等。 */
.invite-pending { margin: 0; padding: .8rem 0; text-align: center; font-size: .88rem; color: var(--ink-2); }
/* 分节标题：中文拉开字距 + 一条墨线收底。
   ⚠ 字距只给标题，正文绝不加 —— 西文里 letter-spacing 是「更正式」，
   中文里是「更松散」，正文一散，读起来就散了。 */
.cat-title {
  margin: 2.6rem 0 1rem; font-size: 1rem; font-weight: 400;
  font-family: var(--serif); color: var(--ink);
  letter-spacing: .3em;
  border-bottom: 1px solid var(--ink);
  padding-bottom: .5rem;
  display: block;
}
.cards { display: grid; gap: .8rem; grid-template-columns: 1fr; }
/* 卡片是纸上发丝线围起的一段，不是浮起的白块 */
.pcard {
  display: block; text-decoration: none; color: inherit;
  background: transparent; border: 1px solid var(--hair);
  padding: 1.1rem;
  transition: border-color .12s;
}
a.pcard { transition: border-color .12s, background-color var(--slow, .5s); }
a.pcard:hover {
  border-color: var(--ink);
  background-color: rgba(136, 149, 160, .06);   /* 晕开一层，纸被压过的感觉 */
}
.pcard-tag {
  display: block; font-family: var(--font);
  font-size: .74rem; color: var(--ink-3);
  letter-spacing: .1em; margin-bottom: .45rem;
}
.pcard-role {
  display: block; font-family: var(--serif);
  font-size: 1.15rem; font-weight: 400; letter-spacing: .12em;
  margin-bottom: .4rem;
}
.pcard-desc { display: block; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }
/* 占位卡只淡到 .8：.75 时有效对比约 4.36:1，仍差一点到 4.5。
   它是 div 不是链接，不靠更低透明度表达「不可点」。 */
.pcard-soon { opacity: .8; }
.pcard-alt .pcard-role { font-size: .94rem; font-family: var(--font); letter-spacing: 0; }
.pcard-alt input { margin: .7rem 0 .5rem; }
/* 页头返回链接：实测触控高度只有 18px，补到 44px。 */
.brand-back {
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: center; min-height: 2.75rem;
  padding-right: .5rem; margin: -.75rem 0;
}

/* ════════ 填写体验 ════════ */

/* ① 一步之内也要有进度感 */
.progress-count { font-size: .76rem; color: var(--ink-3); margin-left: auto; }
.progress-info { flex-wrap: wrap; }

/* ③ 题号放进左侧留白，扫读时有锚点 */
.q-title { display: flex; gap: .6rem; align-items: baseline; }
.q-num {
  flex: 0 0 1.6rem; text-align: right;
  font-size: .82rem; font-weight: 600; color: var(--ink-3);
  font-variant-numeric: tabular-nums; margin: 0;
}
.q-text { flex: 1; }
/* 题号留白：标题以下的所有内容要么一起缩进，要么都不缩进。
   窄屏下选项区不能缩进（那 35px 会把四个档位按钮挤到第二行，行高 43px → 130px），
   所以说明文字也不缩进 —— 否则说明独自往右挪 35px，和它下面的选项对不齐，
   看上去像排歪了。宽到放得下的时候两者一起缩进，对齐关系不变。 */
@media (min-width: 30rem) {
  .q-note, .q-foot, .conflict-slot, .q-body, .extra-box { margin-left: 2.2rem; }
}

/* ② 长列表扫读：隔行淡底 + 已标记行更强的区分 */
.group .scale-row:nth-child(even), .q-body > div > .scale-row:nth-child(even) {
  background: color-mix(in srgb, var(--ok-bg) 55%, transparent);
}
.scale-row .opt-label { color: var(--ink); }

/* ⑦ 提交中的整页遮罩，避免重复点击 */
body.busy { pointer-events: none; }
body.busy::after {
  content: ''; position: fixed; inset: 0; z-index: 90;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

/* ⑧ 宽屏：四档量表两列，把 29 项工具从一屏半压到一屏 */
@media (min-width: 60rem) {
  :root { --maxw: 60rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .cards-sm { grid-template-columns: repeat(2, 1fr); }
  /* 用 grid 而不是 CSS columns：多栏是流式排版，对这种可交互的行表现很差 ——
     实测行高从 43px 涨到 79px，滚动位置还会错乱。grid 每格独立，行为可预期。 */
  .group > div, .q-body > div > div {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem .8rem;
  }
  .group > div > *, .q-body > div > div > * { min-width: 0; }
  .nav-btns { padding-right: 0; }
}

/* 行内的次要操作（「不要记住」这类）：它是个按钮，但不该长得像按钮 ——
   旁边就是主行动，多一个方块只会分散注意。 */
.linklike {
  font: inherit; font-size: inherit; background: none; border: 0; padding: 0;
  color: var(--try); text-decoration: underline; cursor: pointer;
}
.saved-hint { margin: .35rem 0 0; }