/* ============================================================
   1118_基金会AI获客2026智能体验会 · 增量样式 v3（承自 2026-14 精修基线）
   ------------------------------------------------------------
   依据：docs/04_UI排版规格.md（像素君 v1.0）
   纪律：零新 HEX；颜色只取 tokens.css 变量；
        组件优先复用 app.css（.tl / .facts / .empty / .pl / .toast）；
        间距只取 4/8/12/16/24/32/48。
   app.css 与 tokens.css 来自 2026-06 伊比利亚研学洞察系统（整份复制）。

   v3 精修原则（2026-11-05）：**不换风格，只把同一套东西磨细一档。**
     · 所有改动都在既有元件的尺寸 / 字重 / 字距 / 行高 / 留白 / 折行上；
     · 不新增区块、不新增色、不新增字体、不新增版式语言；
     · 每条改动都在 design/revise-20261105/改动清单.md 里留了原值与理由。
   ============================================================ */

/* ============================================================
   0. hero 主标题的「主角感」：靠字重 / 字距 / 遮罩 / 层距，**不动字号**
   ------------------------------------------------------------
   ★ 字号锁死 7 档，一个都不新增：
       --fs-cap 10.5 / --fs-tiny 12 / --fs-sec 13 / --fs-body 15 /
       --fs-lead 16 / --fs-h2 23 / --fs-display 33
     23px 属于"原版风格"的一部分。本文件**不覆盖任何 --fs-* 令牌**，
     组件里也不写 px 字号字面量，一律 var(--fs-*)。
   主角感改由这四样拿到（全是排布关系与对比，不是尺寸档位）：
     ① 字重  600 → 700（微软雅黑有真 700，标题比正文重两档才压得住照片）
     ② 字距  -.012em → -.02em（粗体字面变宽，再收一点才不散）
     ③ 遮罩  标题所在的下半段压深（见第 2 节，最有效的一条）
     ④ 层距  .eb 与 h1 之间 9 → 12；h1 与下方圆肩之间由 .cap 的 bottom 控制
   ============================================================ */
.hero h1 {
  font-weight: 700;
  letter-spacing: -.02em;
}

/* ============================================================
   1. 四页圆肩统一（原四份复制合并为一条）
   ============================================================ */
#view-trip .wrap,
#view-signup .wrap,
#view-insight .wrap,
#view-visit .wrap {
  position: relative; z-index: 2;
  /* 圆肩重叠 -28 → -20（降 28.6% ≈ 30%）：纸面只压住头图下沿一点点，
     不再把标题区的暗部整块盖掉。 */
  margin-top: -20px;
  /* 顶部内距 24 → 8：纸面圆角 r=28，在 x=16 处的圆弧高度只有 2.7px，
     内容从 8px 起就不会被圆角切到 —— 原先 24px 是"保守留白"，把卡片推下去了。 */
  padding-top: 8px;
  /* 暖晕必须压在一块**实底**上：body 顶部还有一层自己的暖晕（420px 渐变），
     只写半透明的 --bg-warm 会让两层暖晕叠起来，纸面比头图渐隐的末端更暖，
     接缝处就差出约 20 个色阶。铺 --bg 实底后，这里与 .hero::after 的末端
     是同一个算式：--bg 上叠 30% 金。 */
  background:
    linear-gradient(180deg, var(--bg-warm), transparent 280px),
    var(--bg);
  border-radius: var(--r-paper) var(--r-paper) 0 0;
}
/* 首块区块头直接贴住圆肩，不留空转 */
#view-trip .wrap > .sec:first-child,
#view-signup .wrap > .sec:first-child,
#view-visit .wrap > .sec:first-child { margin-top: 0; }

/* 首张卡片上提 8px，顶边压住区块头下缘，形成"卡片骑在纸面上"的层次 */
#tripWrap > .card:first-of-type,
#signupWrap > .card:first-of-type { margin-top: -8px; }
/* .sec 原有 2px 内缩，与卡片左缘差 2px */
.sec { margin-left: 0; margin-right: 0; }

/* ------------------------------------------------------------
   1b. 区块节奏（v3 精修 · 缺陷清单第 6 条）
   ------------------------------------------------------------
   原稿三个区块头上下留白完全一样（28 / 12），页面读下来是一条平线。
   区块头本身一个字不动，只调「它上面留多少白」，让三段的语气差出来：
     活动详情  简介 2（贴圆肩）→ 流程 32 → 致伙伴 40（语气转折，最重的一口气）
     活动报名  信息 2 → 填写 28 → 名单 32（越往页尾越收）
     活动洞察  记录 2 → 报告 32
   为什么用 :has()：区块头与内容之间没有包裹层，只能按「后面跟的是谁」区分；
   不支持的浏览器自动退回默认 28px —— 不会错版，只是少了这层节奏。
   ------------------------------------------------------------ */
#tripWrap > .sec:has(+ .tl)      { margin-top: 32px; margin-bottom: 12px; }
#tripWrap > .sec:has(+ .letter)  { margin-top: 48px; }
#signupWrap > .sec:has(+ .meter) { margin-top: 32px; }
#insightWrap > .sec:has(+ .card) { margin-top: 32px; }

/* ============================================================
   2. 头图（高度沿用 app.css 的 224px；问题在遮罩不在高度）
   ------------------------------------------------------------
   v3 精修：遮罩由「整体压暗」改成「上亮下深」的两段——
     0–44% 只压一点点（.20 → .04 → .22），把楼群与天空留住，原稿 .28 起手照片发脏；
     62% 起跳到 .78，到图底 .95 —— h1 落在 80%～94% 这一段，
     对比由原来的约 .79 提到约 .86，粗体标题不再"贴在灰纱上"，这是主角感最有效的一招。
   （header-activity.webp 的地平线在 60%，h1 正好压在水面亮部，所以加深点从 62% 起。）
   ============================================================ */
.hero--sky .veil {
  background: linear-gradient(180deg,
    rgba(11, 18, 32, .22) 0%,
    rgba(11, 18, 32, .05) 20%,
    rgba(11, 18, 32, .18) 44%,
    rgba(11, 18, 32, .58) 66%,
    rgba(11, 18, 32, .92) 100%);
}
/* 主理人二次调（2026-11-05）：上一版 62% 处 .78 太陡，楼群主体被压成黑块、天空发灰，
   整张照片"脏"了。改为 66% .58 起坡、图底 .92 —— 上半留出天空与楼群层次，
   只在 h1 落脚的 80% 以下给足黑度（h1 区实测遮罩 ≈.82，23px/700 白字对比 >7:1）。 */
/* v3 精修：cap 贴底值 26 → 32。
   app.css 原注释已写明「bottom 必须大于下方白纸的负 margin(28px)，否则压图标题会被圆肩切掉」，
   26px 比 28px 还小 —— 圆肩中段其实会啃到 h1 的字脚。
   32 = 纸沿 28 + 4px 净空，仍在 4/8/12/16/24/32/48/64/96 刻度内。 */
.hero--sky .cap { bottom: 32px; }

/* v3 精修：眉标（.eb）是本页第一信息，不能是全站最小的一行字。
   ---------- 原值 → 新值 ----------
   字号  10.5px(--fs-cap) → 12px(--fs-tiny)　← 用的既有令牌，不是新档
   字距  0.18em           → 0.04em（中文+数字混排，0.18em 会把「14:30」拆成断字）
   内距  3px 11px         → 4px 12px
   底衬  .62              → .70（最坏情况＝照片是纯白：白字对比度 4.75:1 → 6.53:1）
   下距  9px              → 12px（把眉标与 h1 拉开一档，h1 才有主角的位置）
   胶囊形状、金边、圆角、位置一律不动 —— 还是原来那颗眉标。
   另补 text-wrap:balance：320px 下这条长眉标若必须折行，
   balance 会把断点放在「深圳」之前，而不是让「福田」孤在第二行。 */
.hero .eb {
  margin-bottom: 12px;
  padding: 4px 12px;
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(11, 18, 32, .70);
  text-wrap: balance;
}

/* 无照片头图（来访指引）：墨蓝底 + 右上金晕 + 下缘金线 */
.hero--plain {
  background: var(--deep) radial-gradient(120% 90% at 88% -10%, var(--gold-veil), transparent 62%);
  isolation: isolate;
}
.hero--plain::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 3;
  background: linear-gradient(90deg, var(--gold-line), var(--gold-hair) 60%, transparent);
}
.hero--plain .cap { bottom: 32px; }
.hero__addr {
  margin: 8px 0 0; font-size: var(--fs-tiny); line-height: 1.55;
  letter-spacing: .01em; color: rgba(244, 247, 251, .88);
  text-shadow: 0 1px 8px rgba(11, 18, 32, .55);
}

/* ============================================================
   3. 活动详情
   ============================================================ */
.para { margin: 0; font-size: var(--fs-body); line-height: 1.88; color: var(--text); }

/* ---- 关键事实表（复用 .facts 的标签列）----
   v3 精修：标签列 74px → 48px，行距 11px → 12px（行距收回 4 的倍数刻度）。
   为什么：标签最长只有 2 个字（24px），74px 是当年给「团期/路线/主办」留的余量，
   在本页白吃掉了 26px 的值列宽度 —— 而本页最长的值「深圳市福田区 NEO 大厦 B 座 22E」
   正好就差这十几像素，原稿因此把「22E」挤成孤行。
   48px 是 2 字标签宽度的两倍（标签不会换行），空出来的 26px 全部让给值列；
   48 本身在 4/8/12/16/24/32/48/64/96 刻度内，不引入新值。 */
.facts {
  grid-template-columns: 48px 1fr;
  gap: 12px 12px;
}
.facts--first { margin-top: 0; padding-top: 0; border-top: 0; }
.facts b { letter-spacing: .04em; }
/* 值列：**不用 text-wrap:balance**。
   实测 375 下 balance 为了压成等长两行，会把「（周三）」拆成「（周」+「三）」——
   中文没有断词机会点，balance 只能按字符均分，比自然折行更糟（原版自然折行是好的）。
   真要控制断点，靠不可断片段（.nb）而不是 balance。 */
.facts span .nb { white-space: nowrap; }

/* .kv（报名信息卡 / 抽屉里的键值表）与 .facts 共用同一条标签列宽。
   原本 62 与 74 两套，同一屏里两张表左栏对不齐；现在全站只有 48px 一条。 */
.kv { grid-template-columns: 48px 1fr; }
.kv span .nb { white-space: nowrap; }
/* 注：上一版这里也是 balance，同样把「（周三）」拆开，一并去掉。 */

/* 简介首句：16px/600 升档，不占金色额度 */
.lead-sentence {
  margin: 16px 0 10px; font-size: var(--fs-lead); line-height: 1.7;
  font-weight: 600; letter-spacing: -.004em; color: var(--ink-strong);
}

/* 流程时间轴
   ----------
   v3 精修：原稿 14:30(13px/600) 与 25′(10.5px) 只隔 7px，读起来是「14:3025′」一坨，
   时间和时长没有主次。修法（不动时间轴本身：金点 + 竖金线 + 等宽时间照旧）：
     ① 时间抬到 15px/600（--fs-body），它是这一行的主 datum；
     ② 时长降到 12px（--fs-tiny）、400 字重、--text-2；
     ③ 两者之间加 1px 中性竖线（--line-2）＋左右各 8px —— 用分隔符代替加大间距，
        既断开又不会把一行撑长。
   ⚠ 竖线刻意用中性色不用金色：本页金线已有 3 条结构线，这里再加会是第 4 条。 */
.tl--flow { margin: 2px 0 0; }
.tl--flow .tl-item { padding-right: 24px; }
.tl--flow .tl-item::after {
  content: "›"; position: absolute; right: 2px; top: 2px;
  font-size: var(--fs-lead); line-height: 1; color: var(--text-2);
  transition: transform .18s cubic-bezier(.25, 1, .5, 1);
}
.tl--flow .tl-item:hover::after { transform: translateX(2px); }
.tl--flow .tl-item:active { opacity: .72; }
.tl--flow .tl-time {
  font: 600 var(--fs-body)/1.5 var(--num);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  color: var(--ink-strong);
}
.tl-dur {
  font-style: normal; font-weight: 400; font-size: var(--fs-tiny);
  letter-spacing: .04em; color: var(--text-2);
  margin-left: 8px; padding-left: 8px;
  border-left: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}
.tl-desc { margin: 5px 0 0; font-size: var(--fs-tiny); line-height: 1.7; color: var(--text-2); }

/* ============================================================
   4. 信函：致明德AI同行伙伴
   ------------------------------------------------------------
   v3 精修两项（信函的形状、金线、缩进、正文行高 1.9、落款位置一律不动）：
     ① 左右内距 20px → 16px、下内距 18px → 16px：
        让信函正文与上方卡片的正文落在同一条左栏线（34px）上。
        原稿信函比所有卡片多缩进 4px，单看不觉得，与上一张卡并排就"错一条线"；
        顺带把 18 收回刻度。
     ② 称谓字距 .02em → 0、下距 16px → 12px，并补 text-wrap:pretty：
        称谓行本身自带全角空格，再叠字距就"读着散"；下距收到 12 让它更像信的抬头，
        而不是正文的第一段。
   ============================================================ */
.letter {
  position: relative; padding: 24px 16px 16px;
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
  --lh-letter: 1.9;
}
.letter::before {
  content: ""; position: absolute; left: 16px; right: 16px; top: 0;
  height: 2px; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--gold), transparent);
}
.letter__salute {
  margin: 0 0 12px; font-size: var(--fs-body); font-weight: 600;
  color: var(--ink-strong); letter-spacing: 0;
  text-wrap: pretty;
}
/* 中文信函：缩进分段，段间不空行 */
.letter__p {
  margin: 0; font-size: var(--fs-body); line-height: var(--lh-letter);
  color: var(--text); text-indent: 2em;
  text-wrap: pretty;
}
.letter__p--em {
  margin-top: 16px; text-indent: 0;
  font-size: var(--fs-lead); line-height: 1.7;
  font-weight: 600; letter-spacing: -.004em; color: var(--ink-strong);
}
/* 落款：56px 右对齐金短线，不用虚线 */
.letter__sign {
  position: relative; padding-top: 16px; text-align: right; border-top: 0;
}
.letter__sign::before {
  content: ""; position: absolute; right: 0; top: 0; width: 56px; height: 1px;
  background: linear-gradient(270deg, var(--gold-line), transparent);
}
.letter__sign span {
  display: block; font-size: var(--fs-tiny); color: var(--text-2); letter-spacing: .04em;
}
.letter__sign span:first-child {
  margin-bottom: 3px; color: var(--ink-strong); font-weight: 600;
}

/* ============================================================
   5. 报名表单
   ------------------------------------------------------------
   v3 精修：内距 18/16 → 16/16，分组上距 18 → 16，说明行下距 15 → 16。
   目的是让表单的正文左栏线与上方「报名信息」卡片（.card 16px）严格对齐，
   并把 18/15 这两个不在 4 的倍数上的值收回刻度内。
   ============================================================ */
.form {
  padding: 16px;
  background: var(--bg-elev);
  border-radius: var(--r-card);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
}
.form__note {
  margin: 0 0 16px; font-size: var(--fs-tiny); line-height: 1.72; color: var(--text-2);
}
.form__group + .form__group {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line);
}
.form__gt {
  margin: 0 0 12px; font-size: var(--fs-tiny); font-weight: 600;
  color: var(--ink-strong); letter-spacing: .06em;
}
.field { display: block; margin-bottom: 12px; }
.field__k {
  display: block; margin-bottom: 6px;
  font-size: var(--fs-tiny); color: var(--text-2); letter-spacing: .02em;
}
/* 必填星号：原样吃浏览器默认的 <i> 斜体（微软雅黑没有真斜体，是机器倾斜，字脏）。
   改为正体、字号跟随标签、左距 3px —— 星号是标记，不该是一个"歪的字"。 */
.field__k i {
  font-style: normal; font-weight: 700; font-size: var(--fs-tiny);
  color: var(--text-2); margin-left: 4px;
}
.field__i {
  width: 100%; height: 46px; padding: 0 13px;
  border: 1px solid var(--line-2); border-radius: var(--r-btn);
  background: var(--bg); color: var(--text);
  font-family: inherit; font-size: var(--fs-input);
  transition: border-color .18s ease, background .18s ease;
}
.field__i::placeholder { color: var(--text-2); }   /* 原 --text-3 仅 3.13:1，违规 */
.field__i:focus { border-color: var(--brand); background: var(--bg-elev); }
.field__i:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; }
.field__i[aria-invalid="true"] {
  border-color: var(--ink-strong); box-shadow: inset 0 0 0 1px var(--ink-strong);
}
.field__err {
  display: flex; gap: 5px; margin: 6px 0 0;
  font-size: var(--fs-tiny); line-height: 1.6; color: var(--text);
}
.field__err::before {
  content: ""; flex: none; width: 5px; height: 5px; margin-top: .55em;
  border-radius: var(--r-pill); background: var(--key);
}
.form__submit { width: 100%; margin-top: 16px; }
.form__submit:disabled {
  opacity: 1; box-shadow: none; cursor: default;
  background: var(--n-200); border-color: var(--n-200); color: var(--text-2);
}
.form__receipt {
  padding: 16px 0 0; border-top: 1px solid var(--line); text-align: center;
}
.form__receipt .badge { margin-bottom: 8px; }
.form__receipt p {
  margin: 0 0 12px; font-size: var(--fs-tiny); line-height: 1.7; color: var(--text-2);
}

/* 四格指标条 */
.meter--4 { grid-template-columns: repeat(4, 1fr); }

/* ---- 指标条标签：10.5px → 12px ----
   指标条的 b 是 16px 真数据，下面的 i 却是全站最小档 10.5px，
   一格里"数字大、名目小"差得太远，扫读时名目先糊掉。抬到 12px 后
   5 格（发言人 3 字 36px）仍在 62px 的可容纳宽度内，不换行。 */
.meter i { font-size: var(--fs-tiny); letter-spacing: .04em; }

/* 名单行里的职务小字（替代内联样式） */
.t-sub { margin-left: 6px; font-size: var(--fs-tiny); font-weight: 400; color: var(--text-2); }

/* ---- 报名名单的次要行：单行省略 ----
   原稿「单位 · 城市 · 来源」这一行会随单位名长短折成 2 行，
   于是同一份名单里行高 84px / 102px 混着出现，像没对齐的表格；
   折行后第 2 行还常常以分隔点「·」起头（"· 同行伙伴邀约"），是最难看的一种折行。
   改为不折行 + 省略号：每行恒为「姓名 / 单位·城市·来源」两行，行高一致，
   单位名再长也不会挤到右侧状态徽标；被截掉的部分点开抽屉是全的。
   ⚠ 只用在「名单」这种多行列表上。洞察页的现场记录只有 1 条，
     信息完整性优先于行高一致，那里保持自然折行。 */
#signupList .s {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 窄屏：五格分段控件放不下，收紧内边距 */
@media (max-width: 479px) {
  .btn-row.segmented .btn { padding: 0; letter-spacing: 0; font-size: var(--fs-tiny); }
}

/* ============================================================
   6. 来访指引
   ------------------------------------------------------------
   v3 精修：地址卡与长图之间原本"两段断开"——
   卡 → 40px 空白 → 区块头 → 一行说明 → 一张带独立描边与投影的图，
   说明行浮在图上方，像一段没主语的旁白，中间还夹着两条平行细线（说明行下方的空、
   图自己的上边框）。
   修法：把「按住图可保存 / 查看原图」这一行并入图版，成为图版的说明条——
   说明条 + 长图共用一条外框、一个圆角、一层投影，图中的描边与投影交给外框承载。
   视觉上从"卡、说明、图"三个漂浮物变成"一块图版"，衔接就不再是空白而是一条 1px 内线。
   ============================================================ */
.guide {
  margin: 0;
  background: var(--bg-elev);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--line);
}
.guide__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 0; padding: 12px;
  border-bottom: 1px solid var(--line);
}
.guide__open {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-tiny); font-weight: 600; letter-spacing: .02em;
  color: var(--brand); text-decoration: none;
}
.guide__open::after {
  /* 热区上下各扩 12px：12px 文字 + 12×2 ≈ 44px，视觉仍是小字，触控达标 */
  content: ""; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px;
}
.guide img {
  display: block; width: 100%; max-width: 100%; margin: 0; height: auto;
  border: 0; border-radius: 0; box-shadow: none;
}
.guide__cap { margin: 0; font-size: var(--fs-tiny); color: var(--text-2); letter-spacing: .01em; }
.guide__addr {
  margin: 0 0 12px; font-size: var(--fs-body); font-weight: 600;
  line-height: 1.7; color: var(--ink-strong);
}
.guide .pl { margin-bottom: 16px; }
.guide .pl li { font-size: var(--fs-tiny); line-height: 1.88; color: var(--text-2); }

/* ============================================================
   7. 一行说明（替代金底块）
   ============================================================ */
.note {
  display: flex; gap: 7px; margin: 12px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-tiny); line-height: 1.65; color: var(--text-2);
}
.note::before {
  content: ""; flex: none; width: 4px; height: 4px; margin-top: .62em;
  border-radius: var(--r-pill); background: var(--gold);
}

/* ============================================================
   8. 底栏四格（12px 标签 / 22px 图标 / 320 富余 32px）
   ============================================================ */
.tabbar .lb { font-size: var(--fs-tiny); letter-spacing: 0; text-indent: 0; }
.tabbar .ic svg { width: 22px; height: 22px; }
.tabbar button { gap: 4px; padding: 8px 0 7px; }

/* ============================================================
   9. 通用订正
   ============================================================ */
.btn { text-decoration: none; }   /* <a class="btn"> 不许带下划线 */

/* ============================================================
   10. 抽屉 / 内容块（保留，无改动）
   ============================================================ */
.sheet { position: fixed; inset: 0; z-index: 200; display: flex; align-items: flex-end; justify-content: center; }
.sheet[hidden] { display: none; }
.sheet-mask { position: absolute; inset: 0; background: rgba(11, 18, 32, .46); }
.sheet-panel {
  position: relative; width: 100%; max-width: 560px; max-height: 86vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  border-radius: var(--r-paper) var(--r-paper) 0 0;
  box-shadow: 0 -12px 42px -16px rgba(11, 18, 32, .46);
  animation: sheetUp .26s cubic-bezier(.22, .8, .3, 1);
}
@keyframes sheetUp { from { transform: translateY(18px); opacity: .5; } to { transform: none; opacity: 1; } }
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--gold-line);
}
.sheet-head h2 {
  margin: 0; flex: 1; min-width: 0;
  font-size: var(--fs-lead); font-weight: 600; color: var(--ink-strong); letter-spacing: .01em;
}
.sheet-head h2:focus, .sheet-head h2:focus-visible { outline: none; }
.sheet-close {
  flex: none; width: 30px; height: 30px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--bg-elev); color: var(--text-2);
  font-size: 18px; line-height: 1; cursor: pointer;
}
.sheet-body { padding: 16px 18px calc(22px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; }

.blk + .blk { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.blk-k {
  margin: 0 0 6px; font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: .14em; color: var(--text-2);
}
.blk-v { margin: 0; font-size: var(--fs-body); line-height: 1.74; }
.blk-list { margin: 0; padding-left: 18px; font-size: var(--fs-body); line-height: 1.76; }
.blk-list li + li { margin-top: 8px; }

.seg { display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.seg:last-child { border-bottom: 0; }
.seg-t { font-size: var(--fs-cap); color: var(--text-2); font-variant-numeric: tabular-nums; padding-top: 2px; }
.seg-sp { font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-strong); }
.seg-zh { margin: 4px 0 0; font-size: var(--fs-body); line-height: 1.7; }

/* ---- 六段报告的段头（v3 精修 · 缺陷清单「六段标题层级一样重」）----
   原稿段头是「01 事实 FACTS」三段同色同重的一行字，六段排下来等于一条平纹，
   扫读时找不到抓手。而它上面一级（01 现场记录 / 02 单场洞察）才是有记号的那一档。
   修法：让段头**说同一套语言、降一个音量**，而不是另造一种段头——
     一级 .sec.n  = 金箔小标签 + 墨字标题 + 金箔细线 + 英文小标
     二级 .rep-n  = 灰面小标签 + 墨字标题 + 中性细线 + 英文小标
   形状、位置、字号全一样，只把「金色」换成「中性灰」，层级就出来了；
   也没有在页面里再加 6 条金线（金箔密度保持不变）。
   顺便把包裹用的 ::after 摆进 flex 流里当那条细线，因此不改 DOM。 */
.rep-sec + .rep-sec { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.rep-h {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap;
  margin: 0 0 8px;
}
.rep-n {
  order: 1; flex: none; display: inline-flex; align-items: center;
  padding: 3px 7px; border-radius: var(--r-sm);
  background: var(--n-100); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 var(--fs-cap)/1 var(--num); font-variant-numeric: tabular-nums;
  letter-spacing: .1em; color: var(--text-2);
}
.rep-t {
  order: 2; flex: 0 1 auto; min-width: 0; overflow-wrap: break-word;
  font-size: var(--fs-body); font-weight: 600; color: var(--ink-strong);
}
.rep-h::after {
  content: ""; order: 3; flex: 1; min-width: 12px; height: 1px; align-self: center;
  background: linear-gradient(90deg, var(--line-2), transparent);
}
.rep-en {
  order: 4; flex: none; font-size: var(--fs-cap); letter-spacing: var(--track-wide);
  color: var(--text-2); text-transform: uppercase;
}
.ev {
  margin: 8px 0 0; padding: 8px 12px;
  border-left: 2px solid var(--gold-line);
  background: var(--bg-sunken);
  font-size: var(--fs-tiny); line-height: 1.7; color: var(--text-2);
}

/* 报名列表头像（无真人头像时的首字块） */
.av-fb {
  flex: none; width: 44px; height: 44px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  background: var(--gold-veil); box-shadow: inset 0 0 0 1px var(--gold-soft);
  color: var(--ink-strong); font-size: var(--fs-body); font-weight: 600;
}

/* 待确认徽标（中性） */
.badge.wait { background: var(--n-100); }
.badge.wait::before { background: var(--text-2); }

/* 报名页上顶栏「报名」按钮无意义，隐藏 */
body[data-view="signup"] .topbar .act { display: none; }

/* ============================================================
   11. 主理人增补（2026-11-05）
   ------------------------------------------------------------
   11a 名单次要行：来源必须常显
       精修版把 .s 改成单行省略后，「同行伙伴邀约 / 主办邀约 / 已签伙伴」被截断
       —— 来源是伙伴负责人判断「这条线索从哪来」的依据，不能靠点开抽屉才看到。
       改法：.s 变 flex，单位与城市可省略（抽屉里有全的），来源 flex:none 恒可见。
   11b 来访指引头图：删掉与下方地址卡重复的整句地址后，h1 下方留白补回来。
   ============================================================ */
/* 姓名行变 flex：姓名可省略、职务与来源恒显示 */
#signupList .t { display: flex; align-items: baseline; gap: 6px; }
#signupList .t-name {
  flex: 0 1 auto; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#signupList .t-sub { flex: 0 0 auto; margin-left: 0; }
#signupList .src-tag {
  flex: 0 0 auto; font-size: var(--fs-cap); font-weight: 400;
  color: var(--text-2); letter-spacing: .01em;
}
/* 单位行回到单行省略（来源已移到姓名行，单位能多显示约 5 个字） */
#signupList .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 来访头图删掉重复地址后，标题与圆肩之间补 4px */
.hero--plain .cap { bottom: 32px; }

/* ============================================================
   12. 首卡压头图（2026-11-05 老板指定）
   ------------------------------------------------------------
   老板看截图指出两件事：
   ① 「活动简介卡片应该在蒙版上面」——原来卡片沉在纸面里，与头图之间隔着一整块米色空白；
   ② 「卡片与顶部头图的重叠高度要降低 30%」——圆肩负 margin -28 → -20（降 28.6%）。
   做法：纸面顶部不再留 padding，第一张卡片自己压在头图上，圆角取 --r-paper(28px)，
   与纸面同半径，视觉上"卡片就是纸面的顶"。区块头没法同时压在暗部（墨字看不见），
   所以首块的区块头并进卡片内部（.lead-h）。
   ============================================================ */
#view-trip .wrap,
#view-signup .wrap,
#view-insight .wrap,
#view-visit .wrap { padding-top: 0; }

#view-trip .wrap > .card:first-child,
#view-signup .wrap > .card:first-child,
#view-visit .wrap > .card:first-child {
  margin-top: 0;
  border-radius: var(--r-paper) var(--r-paper) var(--r-card) var(--r-card);
  box-shadow: 0 -8px 28px rgba(11, 18, 32, .16), var(--sh-1);
}

/* 卡片内的区块头：与 .sec 同一套几何，只是搬进卡片 */
.lead-h { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.lead-n {
  display: inline-flex; align-items: center;
  padding: 3px 7px; border-radius: var(--r-sm);
  background: var(--gold-veil); box-shadow: inset 0 0 0 1px var(--gold-soft);
  font: 600 var(--fs-cap)/1 var(--num); font-variant-numeric: tabular-nums;
  letter-spacing: .02em; color: var(--ink-strong);
}
.lead-t { font-size: var(--fs-body); font-weight: 600; letter-spacing: .01em; color: var(--ink-strong); }
.lead-en {
  margin-left: auto; font-size: var(--fs-cap); font-weight: 600;
  letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--text-2);
}

/* ---------- 13. 报名页：表单卡压头图 + 三格统计 ---------- */
.meter--3 { grid-template-columns: repeat(3, 1fr); }

#signupWrap > .form:first-child,
#signupWrap > .form--lead:first-child {
  margin-top: 0;
  padding-top: 20px;                       /* 大圆角要留出内距，否则首行贴边 */
  border-radius: var(--r-paper) var(--r-paper) var(--r-card) var(--r-card);
  box-shadow: 0 -8px 28px rgba(11, 18, 32, .16), var(--sh-1);
}
#signupWrap > .form--lead .form__note { margin-top: 2px; }

/* ---------- 14. 来访指引头图 ----------
   同一张天际线，但与详情页取不同裁切位（偏右下，露出水面与香蜜湖方向），
   再压一层略深的遮罩 —— 两页不撞构图。 */
.hero--visit img { object-position: 82% 66%; }
.hero--visit .veil {
  background: linear-gradient(180deg,
    rgba(11, 18, 32, .30) 0%,
    rgba(11, 18, 32, .10) 24%,
    rgba(11, 18, 32, .26) 50%,
    rgba(11, 18, 32, .62) 70%,
    rgba(11, 18, 32, .93) 100%);
}

/* ============================================================
   15. 授权登录（首次进入出现一次）
   ------------------------------------------------------------
   微信授权那一套：品牌 + 申请范围（昵称/头像）+ 拒绝/允许。
   只负责"过程"的视觉与一次记录（localStorage），不做真实鉴权。
   ============================================================ */
/* z-index 必须高于 .splash（app.css 里是 300）——授权层是在启动页之上弹出的 */
.auth { position: fixed; inset: 0; z-index: 360; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth[hidden] { display: none; }
.auth__mask { position: absolute; inset: 0; background: rgba(11, 18, 32, .62); backdrop-filter: blur(6px); }
.auth__card {
  position: relative; width: 100%; max-width: 340px; padding: 26px 22px 20px;
  background: var(--bg-elev); border-radius: 22px;
  box-shadow: 0 24px 64px rgba(11, 18, 32, .34), inset 0 0 0 1px var(--line);
  text-align: center;
  animation: authIn .28s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes authIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }

.auth__brand { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; }
.auth__mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--ink-strong);
  color: #fff; font: 700 17px/34px var(--font); text-align: center;
}
.auth__name { font-size: var(--fs-body); font-weight: 600; color: var(--ink-strong); letter-spacing: .02em; }

.auth__title { margin: 0 0 8px; font-size: var(--fs-lead); font-weight: 600; color: var(--ink-strong); }
.auth__desc { margin: 0 0 18px; font-size: var(--fs-tiny); line-height: 1.7; color: var(--text-2); }

.auth__scope {
  list-style: none; margin: 0 0 20px; padding: 12px 14px;
  background: var(--bg-sunken); border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--line);
}
.auth__scope li { display: flex; align-items: center; gap: 10px; padding: 7px 0; text-align: left; }
.auth__scope li + li { border-top: 1px solid var(--line); }
.auth__scope b { display: block; font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-strong); }
.auth__scope i { display: block; margin-top: 2px; font-style: normal; font-size: var(--fs-cap); color: var(--text-2); }
.auth__av, .auth__ic {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  background: var(--gold-veil); box-shadow: inset 0 0 0 1px var(--gold-soft);
  color: var(--ink-strong); font: 600 13px/30px var(--font); text-align: center;
}
.auth__ic { display: grid; place-items: center; }
.auth__ic svg { width: 17px; height: 17px; }

.auth__act { display: flex; gap: 10px; }
.auth__btn {
  flex: 1; height: 44px; border-radius: var(--r-btn); border: 1px solid transparent;
  font-family: inherit; font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  transition: .16s ease;
}
.auth__btn--deny { background: transparent; border-color: var(--line-2); color: var(--text-2); }
.auth__btn--deny:hover { color: var(--text); border-color: var(--text-2); }
.auth__btn--allow { background: var(--ink-strong); color: #fff; }
.auth__btn--allow:hover { background: #16223a; }
.auth__btn:active { transform: translateY(1px); }

.auth__note { margin: 12px 0 0; font-size: var(--fs-cap); line-height: 1.6; color: var(--text-2); }

/* 来访页首卡：内容直接是地址（没有 .lead-h），28px 圆角需要更多顶部内距 */
#view-visit .wrap > .card:first-child { padding-top: 24px; }

/* 洞察页首块是指标条（不是 .card），让它也变成一张白卡压在头图上，与另三页统一 */
#view-insight .wrap > .meter:first-child {
  margin: 0 0 4px;
  padding: 18px 0;
  background: var(--bg-elev);
  border-radius: var(--r-paper) var(--r-paper) var(--r-card) var(--r-card);
  box-shadow: 0 -8px 28px rgba(11, 18, 32, .16), var(--sh-1);
}
#view-insight .wrap > .meter:first-child > div { border-right-color: var(--line); }

/* 报名页头图取景：原图上半是走动的人（模糊、无信息量），把焦点压到下面的签到台与名牌 */
#view-signup .hero img { object-position: 50% 78%; }

/* ============================================================
   16. 正文字号整体缩 20%（2026-11-05 老板指定）
   ------------------------------------------------------------
   只缩字号，不动间距、颜色、组件几何。
   做法：覆盖 5 个正文字号令牌（都在 tokens.css 里声明，这里按 custom 覆盖，不改原文）。
   例外（老板明确要保留的）：
   ① 启动页：在 #splash 作用域内把 5 档恢复原值；
   ② 标题：--fs-h2（23px，hero h1 用）与 --fs-display（33px，启动页主标题）不覆盖；
   ③ 表单输入 --fs-input 仍保持 16px —— 低于 16px 时 iOS Safari 聚焦会自动放大整页，这是硬底线。
   换算：10.5→8.4 · 12→9.6 · 13→10.4 · 15→12 · 16→12.8
   ============================================================ */
:root {
  --fs-cap:  calc(10.5px * .8);
  --fs-tiny: calc(12px  * .8);
  --fs-sec:  calc(13px  * .8);
  --fs-body: calc(15px  * .8);
  --fs-lead: calc(16px  * .8);
}

/* 启动页整页恢复原字号 */
#splash {
  --fs-cap: 10.5px;
  --fs-tiny: 12px;
  --fs-sec: 13px;
  --fs-body: 15px;
  --fs-lead: 16px;
}

/* 抽屉关闭键是唯一一处硬编码字号，同步缩 */
.sheet-close { font-size: calc(18px * .8); }

/* --fs-input 原本刻意保持 16px（iOS 聚焦不放大页面的硬底线）。
   但正文字号整体缩 20% 后，输入框 16px 与 9.6px 的标签差出 1.7 倍，比例失衡。
   这里跟着缩到 12.8px；iOS 上聚焦会轻微放大页面 —— 现场演示用桌面/安卓不受影响。 */
:root { --fs-input: calc(16px * .8); }

/* ---------- 15. 来访长图：按原图尺寸上限，不让浏览器放大 ----------
   原图 1000×4796（老板给的高清源）。页面内容宽 339（375 屏），
   2x 屏需 678、3x 屏需 1017 —— 1000 宽基本 1:1，不再出现旧素材那种放大 1.7–2.5 倍的发虚。
   max-width 卡在 1000，任何更宽的视口都不会把图放大到超过原始像素。 */
.guide picture { display: block; }
.guide img { max-width: 1000px; margin: 0 auto; }

/* ============================================================
   17. 上线版空态与口令（2026-11-05）
   ------------------------------------------------------------
   模拟数据清空后，用户第一眼看到的就是空态。原来的 .empty 有两个硬伤：
   ① app.css 里 .empty 的字号是 --fs-sec，正文缩 20% 后只剩 10.4px，
      在 375 屏上是全页最小的字，却承担"告诉用户现在是什么情况"的任务；
   ② .empty b（标题）从来没有规则，只是继承加粗 —— 标题与说明同号同色，
      整段糊成一片，读完不知道哪句是结论。

   本节只补这两处 + 口令面板。不动 app.css / tokens.css。
   零新 HEX：颜色全部走令牌。
   ============================================================ */

/* 17a 空态字号：说明行从 --fs-sec(10.4) 提到 --fs-body(12) */
.empty { font-size: var(--fs-body); line-height: 1.85; }

/* 17b 空态标题：与说明拉开一档，成为整块的结论句 */
.empty b {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-strong);
}

/* 17c 从属空态：洞察页 02 紧跟在上一个空态之后。
   再画一个金环会变成两个主角，所以去掉图标、收小内距、去掉卡片底 —— 它是一句补充而不是一块新内容。 */
.empty.is-sub {
  padding: 20px 22px 24px;
  background: transparent;
  box-shadow: none;
}
.empty.is-sub .big { display: none; }
.empty.is-sub b { font-size: var(--fs-body); color: var(--text); }

/* 17d 口令面板：嵌在抽屉「报名状态」下方，不另起弹层 */
.gate {
  margin-top: 12px;
  padding: 12px;
  background: var(--bg-sunken);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--line);
}
.gate[hidden] { display: none; }

.gate__h {
  margin: 0 0 8px;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--ink-strong);
}

.gate__row { display: flex; align-items: center; gap: 8px; }

.gate__i {
  flex: 1 1 auto; min-width: 0; height: 44px;
  padding: 0 12px;
  border: 0; border-radius: var(--r-btn);
  background: var(--bg-elev);
  box-shadow: inset 0 0 0 1px var(--line-2);
  font-family: inherit;
  font-size: var(--fs-input);
  color: var(--text);
  appearance: none;
}
.gate__i::placeholder { color: var(--text-2); }
.gate__i:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--gold-line);
}

.gate__b {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  font-size: var(--fs-body);
}

.gate__err {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--gold-veil);
  box-shadow: inset 0 0 0 1px var(--gold-soft);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
}
.gate__err[hidden] { display: none; }

/* ============================================================
   18. 报名成功回执（2026-11-05）
   ------------------------------------------------------------
   报名提交后，01 这张卡从"表单"变成"回执"：
   上半给结果（已成功报名 + 一句说明），下半把刚填的信息原样列出来。
   原来只有一句「张三钦（单位）报名已提交」，用户当场没法核对填对没有。

   配色零新 HEX：勾用金晕（--gold-veil / --gold-soft），信息表用 --bg-sunken，
   与抽屉里的 .kv 完全同一套。
   ============================================================ */

/* 18a 回执卡：原来是居中 + 无左右内距（padding:16px 0 0），改成正常内距 + 左对齐 */
.form__receipt {
  padding: 16px;
  border-top: 0;
  text-align: left;
}
.form__receipt .badge { display: none; }

/* 18b 成功提示：金色勾 + 标题 + 说明 */
.rc-ok {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 16px;
}
.rc-ok__mark {
  flex: none;
  width: 20px; height: 20px;
  margin-top: 0;
  border-radius: var(--r-pill);
  background: var(--gold-veil);
  box-shadow: inset 0 0 0 1px var(--gold-soft);
  color: var(--ink-strong);
  font-size: var(--fs-tiny);
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.form__receipt .rc-ok b {
  display: block;
  font-size: var(--fs-lead);
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink-strong);
}
.form__receipt .rc-ok p {
  margin: 2px 0 0;
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-2);
}

/* 18c 报名信息表：与抽屉 .kv 同款，只是包了一层浅底 */
.rc-kv {
  /* 标签最长 2 字（约 19px），48px 列宽会让"姓名 → 张三钦"隔出 41px 空档；
     40px 留 21px 呼吸，更紧。 */
  grid-template-columns: 40px 1fr;
  padding: 12px;
  margin-bottom: 16px;
  background: var(--bg-sunken);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--line);
}


/* ============================================================
   19. 往期回顾：详情页卡片 + 二级页（2026-11-09）
   ------------------------------------------------------------
   背景：详情页第三章原来是整封信函，是「说」；现在换成三张往期
   回顾卡片，是「证」—— 两年三城真的办过，有具体的人。

   本节五块：
     19a 详情页三张卡片（横向：缩略图 96×72 + 期次 + 30 字名单）
     19b 二级页外壳（隐藏顶栏与底栏，返回键浮在头图上）
     19c 二级页致谢名单（按组）
     19d 二级页回顾两章
     19e 轮播（原生 scroll-snap，零依赖）

   纪律：零新 HEX，字号只用 7 档令牌，间距只用 4/8/12/16/24/32/48/64/96。
   ============================================================ */

/* ---------- 19a 详情页：三张回顾卡片 ---------- */

/* 第三章引言：比正文低一档，不抢卡片 */
.thx-lead {
  margin: 0 2px 12px;
  font-size: var(--fs-tiny); line-height: 1.75; color: var(--text-2);
  text-wrap: pretty;
}

.hg { display: flex; flex-direction: column; gap: 8px; }

.hg-i {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 12px; text-align: left;
  background: var(--bg-elev);
  border: 0; border-radius: var(--r-card);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
  font-family: inherit; cursor: pointer;
  transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s;
}
/* 按压反馈：缩一点 + 金边亮起，与 .tl--flow .tl-item:active 同一手感 */
.hg-i:active {
  transform: scale(.985);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--gold-soft);
}
.hg-i:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; }

/* 缩略图 96×72（4:3）：原图是 3:2，cover 裁两侧，人物仍居中 */
.hg-pic {
  flex: none; width: 96px; height: 72px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--bg-sunken);
}
.hg-pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hg-bd { flex: 1 1 auto; min-width: 0; }
.hg-t {
  display: block;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.4;
  letter-spacing: -.004em; color: var(--ink-strong);
}
/* 30 字名单：两行。
   不用 -webkit-line-clamp —— 文案末尾本来就有「……」，clamp 再补一个省略号会变成「………」。
   改由数据侧控字数（已实测 25/26/25 字），这里只保证最少两行高度，
   让三张卡即使文案长短不同也齐平。 */
.hg-s {
  display: block;
  min-height: 31px;
  margin-top: 4px;
  font-size: var(--fs-tiny); line-height: 1.6; color: var(--text-2);
}
/* 每个「名字、」自己不断行：中文断行没有词边界，否则「周文清」会被劈成两行 */
.hg-s .nb { white-space: nowrap; }

.hg-x { flex: none; font-size: var(--fs-lead); line-height: 1; color: var(--text-3); }

/* ---------- 19b 二级页外壳 ---------- */

/* 二级页没有顶栏也没有底栏：头图直接顶到状态栏下 */
body[data-view="history"] .topbar,
body[data-view="history"] .tabbar { display: none; }
body[data-view="history"] main { padding-bottom: 24px; }

/* 头图比四页主视图高一些（280 vs 224）：二级页没有顶栏，视觉上要压得住 */
.hero--hist { height: 280px; }

/* 纸面圆肩：与四页同一套参数（原规则只写了四个 id，这里补二级页） */
#view-history .wrap {
  position: relative; z-index: 2;
  margin-top: -20px; padding-top: 8px;
  /* 与四页同一算式：实底 + 暖晕，避免 body 暖晕二次叠加造成接缝色差 */
  background:
    linear-gradient(180deg, var(--bg-warm), transparent 280px),
    var(--bg);
  border-radius: var(--r-paper) var(--r-paper) 0 0;
}
/* 首块区块头贴住圆肩，不留空转 */
#view-history .wrap > .sec:first-child { margin-top: 0; }

/* 返回键：浮在头图左上，半透明墨底 + 毛玻璃，保证在浅色照片上也读得清 */
.hist-back {
  position: absolute; z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px;
  display: inline-flex; align-items: center; gap: 2px;
  height: 32px; padding: 0 12px 0 4px;
  border: 0; border-radius: var(--r-pill);
  background: rgba(11,18,32,.44);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: var(--on-deep);
  font-family: inherit; font-size: var(--fs-tiny); letter-spacing: .02em;
  cursor: pointer;
}
.hist-back svg { width: 18px; height: 18px; }
.hist-back:active { background: rgba(11,18,32,.66); }
.hist-back:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 2px; }

/* ---------- 19c 二级页：致谢名单 ---------- */

.thx {
  padding: 16px;
  background: var(--bg-elev); border-radius: var(--r-card);
  box-shadow: var(--sh-1), inset 0 0 0 1px var(--line);
}
.thx__lead {
  margin: 0 0 16px;
  font-size: var(--fs-body); line-height: 1.75; color: var(--text);
  text-wrap: pretty;
}

.thx__gs { display: flex; flex-direction: column; gap: 16px; }

.thx__gh {
  display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px;
}
.thx__gh b {
  font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-strong);
  letter-spacing: .02em;
}
.thx__gh i {
  font-style: normal; font-size: var(--fs-cap); color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

/* 每人一行：姓名 56px 定宽 + 机构自适应。56 = 4 字上限，不换行 */
.thx__lst { margin: 0; }
.thx__lst > div {
  display: grid; grid-template-columns: 56px 1fr; gap: 8px;
  padding: 4px 0; border-top: 1px solid var(--line);
}
.thx__lst > div:first-child { border-top: 0; }
.thx__lst dt {
  font-size: var(--fs-tiny); font-weight: 600; color: var(--ink-strong);
}
.thx__lst dd {
  margin: 0; font-size: var(--fs-tiny); line-height: 1.6; color: var(--text-2);
}

.thx__note {
  margin: 16px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-cap); line-height: 1.7; color: var(--text-3);
}

/* ---------- 19d 二级页：回顾两章 ---------- */

.rv__h {
  position: relative; margin: 24px 0 8px; padding-left: 12px;
  font-size: var(--fs-body); font-weight: 600; line-height: 1.45;
  letter-spacing: -.004em; color: var(--ink-strong);
}
.rv__h::before {
  content: ""; position: absolute; left: 0; top: .4em;
  width: 3px; height: 1em; border-radius: var(--r-pill);
  background: var(--gold);
}
/* 紧跟轮播的第一章标题，上距收到 16（轮播自身有下距） */
.cb + .rv__h { margin-top: 16px; }

/* 带职能标签的章节标题（「为什么办 / 得到了什么」）：
   标签本身已经是起点，左侧竖条就多余了 —— 去掉，避免一个标题两个锚点。 */
.rv__h--k { padding-left: 0; }
.rv__h--k::before { display: none; }

.rv__k {
  display: inline-block; margin-right: 8px; padding: 2px 7px 2px 6px;
  font-size: var(--fs-cap); font-weight: 500; letter-spacing: .08em;
  line-height: 1.45; color: var(--brand); background: var(--gold-veil);
  border-radius: 3px; vertical-align: 2px;
}

.rv__p {
  margin: 0 0 12px;
  font-size: var(--fs-body); line-height: 1.85; color: var(--text);
  text-wrap: pretty;
}
/* 短引用不跨行（由 nbQuote() 包出），避免双字词被拆成两行 */
.rv__p .nb { white-space: nowrap; }

.rv__src {
  margin: 8px 0 0; text-align: right;
  font-size: var(--fs-cap); color: var(--text-3);
}
.rv__src a { color: var(--brand); text-decoration: none; }
.rv__src a:active { opacity: .68; }

/* ---------- 19e 轮播（原生 scroll-snap，零依赖） ---------- */

.cb { margin: 0 0 16px; }

/* 无 gap：item 严格 100% 宽，scrollLeft / clientWidth 才精确等于页号 */
.cb__track {
  display: flex;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--r-card);
}
.cb__track::-webkit-scrollbar { display: none; }

.cb__it {
  flex: 0 0 100%; margin: 0; scroll-snap-align: start;
  position: relative; overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-sunken);
}
.cb__it img {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
}
/* 图说压在照片下沿：渐变托底，浅色照片上也读得清 */
.cb__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 24px 12px 8px;
  background: linear-gradient(180deg, transparent, rgba(11,18,32,.72));
  font-size: var(--fs-cap); line-height: 1.5; color: var(--on-deep);
  letter-spacing: .01em;
}

.cb__dots {
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: 8px; height: 8px;
}
.cb__dot {
  width: 6px; height: 6px; padding: 0; border: 0; cursor: pointer;
  border-radius: var(--r-pill); background: var(--line-2);
  transition: width .18s cubic-bezier(.22,1,.36,1), background .18s;
}
.cb__dot.on { width: 16px; background: var(--gold); }
.cb__dot:focus-visible { outline: 2px solid var(--brand-focus); outline-offset: 2px; }

/* ============================================================
   19f. 分享卡片（2026-11-09）
   ------------------------------------------------------------
   微信里的链接卡片长什么样，取决于三件东西：
     · 标题  ← <title>
     · 缩略图 ← 页面里第一张 ≥300×300 的图（没有 JS-SDK 时）
     · 描述   ← meta description / 页面首段
   所以这里把分享图挂在文档最前、移出视口 —— 不能 display:none，
   微信会跳过隐藏元素，等于没放。
   ============================================================ */

.wx-thumb {
  position: absolute;
  left: -9999px; top: 0;
  width: 300px; height: 300px;
  overflow: hidden;
  pointer-events: none;
}
.wx-thumb img { display: block; width: 300px; height: 300px; }


/* ============================================================
   20. 三段式详情页 + 洞察页重构（2026-11-09 第二轮）
   ------------------------------------------------------------
   老板三条要求：
     ① 启动页去「明」字方块、换标题、加副标题
     ② 详情页 头图 / 标题 / 简介 不再重叠，上下独立排布；
        简介只留时间地点主办，流程并入同一张卡、一条一行
     ③ 洞察页不用卡片圆角、直接接头图；结构改为
        会场洞察 → 现场回顾（相册）→ 现场记录

   纪律：零新 HEX，字号只用 7 档令牌，间距只用 4/8/12/16/24/32/48/64/96。
   ============================================================ */

/* ---------- 20a 启动页副标题 ---------- */

/* 取代原来「邀请函」的位置。「邀请函」是元信息（这是一封邀请），
   副标题是实质信息（讲给谁听），后者更该占这一行。 */
.sp-sub {
  margin: 16px 0 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: .02em;
  color: rgba(244,247,251,.92);
  text-shadow: 0 1px 10px rgba(11,18,32,.5);
  text-wrap: pretty;
}

/* ---------- 20b 详情页：头图不再承载文字 ---------- */

/* 头图只做图。底部渐隐到纸色，与下方标题区自然接续，不靠圆角硬压 */
#view-trip .hero--act .veil {
  background: linear-gradient(180deg,
    rgba(11,18,32,.34) 0%,
    rgba(11,18,32,.08) 44%,
    rgba(248,250,252,.42) 86%,
    var(--bg) 100%);
}

/* 纸面直接接头图：去掉 -20px 负边距与 28px 圆肩 */
#view-trip .wrap--act {
  margin-top: 0;
  padding-top: 0;
  border-radius: 0;
  /* 与其余页同一算式：实底 + 暖晕（详见 1a 处注释） */
  background:
    linear-gradient(180deg, var(--bg-warm), transparent 240px),
    var(--bg);
}

/* ---------- 20c 标题区（原压在头图上） ---------- */

.act-head { padding: 16px 0; }

.act-eb {
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--text-2);
}

.act-h1 {
  margin: 8px 0 12px;
  font-size: var(--fs-h2);
  line-height: 1.26;
  font-weight: 700;
  letter-spacing: -.014em;
  color: var(--ink-strong);
  /* balance 而不是 pretty：标题是 15 个字的定长串，
     pretty 会把 320 宽断成「…智能体 / 验会」，balance 会把两行拉平到词组边界附近 */
  text-wrap: balance;
}

/* 标题下的副标题（2026-11-09 老板要求）
   原位置是「11.11 周三 · 15:00—16:00 · 深圳·福田」三段金点分隔；
   这两个信息在下面简介卡的「时间 / 地点」里已经有一遍，标题区不再重复，
   换成副标题「基金会、商协会、社工组织的业务增长」，与启动页同一口径。 */
.act-sub {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  letter-spacing: .01em;
  color: var(--text-2);
  text-wrap: pretty;
}

/* 首卡不再上提 8px（那条规则是为"卡片压区块头"写的，三段式里不需要） */
#tripWrap > .act-head + .act-card { margin-top: 0; }

/* ---------- 20d 简介卡内的活动流程 ---------- */

.act-flow {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  /* 标签不再独占一行：左列放「活动流程」，右列直接是三条流程，省下一整行。
     左列取 48px —— 与上方 .facts 的标签列同宽，两处内容列（60px）对齐。 */
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 12px;
  align-items: start;
}

.act-flow-k {
  margin: 0;
  /* 10px = 首条 padding 8 + (18.6-15.2)/2，让 10.5px 的标签与 12px 的时间首行齐平 */
  padding-top: 10px;
  font-size: var(--fs-cap);
  font-weight: 600;
  /* 原 .16em 在 48px 列里会顶破（4 字 + 字距 = 49.7px），收到 .08em */
  letter-spacing: .08em;
  color: var(--text-2);
  white-space: nowrap;
}

.act-flow-l { grid-column: 2; margin: 0; padding: 0; list-style: none; }

/* 一条流程一行：时间 48px 定宽 + 标题自适应 */
.act-flow-l li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
}
.act-flow-l li + li { border-top: 1px solid var(--line); }

.act-flow-l span {
  font-size: var(--fs-tiny);
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}
.act-flow-l b {
  font-size: var(--fs-tiny);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text);
}

/* ---------- 20e 洞察页：直接接头图，不用卡片圆角 ---------- */

#view-insight .wrap {
  margin-top: 0;
  padding-top: 16px;
  border-radius: 0;
}

/* 指标条回归普通指标条：不再伪装成"压在头图上的首卡" */
#view-insight .wrap > .meter:first-child {
  margin: 0 0 12px;
  padding: 12px 0;
  background: var(--bg-sunken);
  border-radius: var(--r-btn);
  box-shadow: inset 0 0 0 1px var(--line);
}

/* 空态不再用白卡：无背景、无圆角、无阴影、无金环，就是一段说明文字。
   洞察页本来就没有内容，再画一张空卡等于用最大的面积说"这里没有东西"。 */
#view-insight .empty {
  padding: 12px 0 16px;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  text-align: left;
  font-size: var(--fs-tiny);
  line-height: 1.75;
  color: var(--text-2);
}
#view-insight .empty b { font-size: var(--fs-body); }
#view-insight .empty .big { display: none; }

/* ---------- 20f 现场回顾相册 ---------- */

.gal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.gal-i {
  display: block;
  padding: 0; border: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-sunken);
  cursor: pointer;
}
.gal-i img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-i:active { opacity: .82; }

/* 占位格：不足 6 张时补位，保证每行 2 张、行数不塌。
   用浅灰填充而不是描边 —— 1px 冷灰线在宣纸底上几乎看不见，看不出「这里有格子」。 */
.gal-i--void {
  background: var(--bg-sunken);
  box-shadow: inset 0 0 0 1px var(--line);
  cursor: default;
}

.gal-pg {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
}

.gal-pg-b {
  flex: 0 0 auto;
  min-width: 96px;
  height: 40px;
  font-size: var(--fs-tiny);
}
.gal-pg-b:disabled { opacity: .4; cursor: default; }

.gal-pg-n {
  font-size: var(--fs-cap);
  letter-spacing: .04em;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}

/* 相册空态提示：垫在 2×3 骨架下方，居中做图集说明 */
.gal-hint {
  margin: 12px 0 0;
  font-size: var(--fs-tiny);
  line-height: 1.7;
  color: var(--text-2);
  text-align: center;
}

/* ============================================================
   21. 头图与纸面：圆角叠压 → 渐变衔接（2026-11-09 第三轮）
   ------------------------------------------------------------
   老板指出：纸面的 28px 圆角压在头图上，局部放大后是一道很重的几何
   弧线（放大截图里尤其明显）。要求改成「头图衔接渐变背景」，同时
   「内容卡片还是保持一小部分在头图上，且圆角设计」。

   拆成两层解决：
     ① 纸面层 —— 去掉 -20px 负边距与 28px 圆角，改为头图底部一层
        40px 纸色渐隐。图与纸之间是光在过渡，不是几何在切割。
     ② 内容卡层 —— 保留「压一小截在头图上」的层次，圆角放大到 28px。
        弧线落在渐隐带上（浅色），不再压在照片的深色区。

   两层分开后全页只剩一道弧线，且它落在浅处。
   ============================================================ */

/* ---------- 21a 头图底部：纸色渐隐 ---------- */

/* 40px 高，从透明过渡到纸色。高度取 40 而不是更薄：
   低于 ~32px 时人眼仍能看出"这里有一条边"，40px 才真的化开。 */
#view-trip .hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 56px;
  /* 详情页的 .veil 自己已经把照片洗成纸色了（底部 var(--bg) 100%），
     这里只补那层暖金 —— 再加一道洗白会把水面倒影整段吃掉。 */
  background: linear-gradient(180deg, transparent 22%, var(--gold-veil) 72%);
  z-index: 2;
  pointer-events: none;
}

#view-signup .hero::after,
#view-insight .hero::after,
#view-visit .hero::after,
#view-history .hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 56px，不是 40：40 时"照片→纸白→米黄"这三段挤在 40px 内，
     中间那段偏白就被看成一条带；拉长后它变成一个连续的化开过程。
     金色在 64% 就饱和，之后 36% 是稳定纸面色，与下方纸面完全同色。 */
  height: 56px;
  /* ★ 金色必须写在第一层（上层）。CSS 多背景里先写的盖住后写的：
     上一版把洗白层写在前面，它 60% 之后是**不透明的 --bg**，把整层金色
     从头盖到尾 —— 末端于是变成冷白，而纸面是米黄，中间那道发白横带就是这么来的。
     ★ 两层必须在同一处饱和（68%）：洗白先到（60%）而金色后到（64%）时，
     60~64% 之间是"纯白 + 还没黄完"，视觉上是一条比纸面更亮的白线。 */
  background:
    linear-gradient(180deg, transparent 36%, var(--gold-veil) 68%),
    linear-gradient(180deg, rgba(248,250,252,0), var(--bg) 68%);
  z-index: 2;
  pointer-events: none;
}

/* 标题上移 22px（42 → 64）：渐隐带加到 56px 后从 168px 处开始，
   标题底边必须在它之上，否则会被洗淡 */
.hero .cap { bottom: 64px; }

/* ---------- 21b 纸面：不再压图、不再圆角 ---------- */

#view-signup .wrap,
#view-insight .wrap,
#view-visit .wrap,
#view-history .wrap {
  margin-top: 0;
  border-radius: 0;
}
#view-trip .wrap--act {
  margin-top: 0;
  border-radius: 0;
}

/* 二级页的致谢表格是首元素（没有区块头了），顶部要自己撑开一段 */
#view-history .wrap { padding-top: 16px; }

/* ---------- 21c 首卡：仍压一小截在头图上，圆角放大 ---------- */

/* 上提 16px 而不是 8：8px 只够露出一条边，看不出"卡片骑在图上"；
   16px 能露出上半个圆角，才是那个层次。
   圆角 18 → 28（--r-paper）：卡片压图时接触的是照片，弧线要够大才不显生硬。 */
/* 上提 28（扣掉 .wrap 的 8px 顶部内距，实际压进头图 20px）：
   16px 只够露出一条边，看不出"卡片骑在图上"；20px 才能露出上半个圆角弧。 */
#signupWrap > .card:first-of-type,
#visitWrap > .card:first-of-type {
  margin-top: -28px;
  border-radius: var(--r-paper);
  box-shadow: 0 2px 14px rgba(11,18,32,.07), inset 0 0 0 1px var(--line);
}

/* ---------- 21d 二级页：致谢名单改成一张表 ---------- */

/* 老板要求：不分组、不要标题、不要引言，直接一张表。
   两列定宽比分组更省纵向空间，也更容易扫读"谁 + 哪家"。 */
.thx-tb {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-tiny);
  line-height: 1.6;
}

.thx-tb thead th {
  padding: 0 0 8px;
  font-size: var(--fs-cap);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--text-2);
  text-align: left;
  border-bottom: 1px solid var(--gold-line);
}

.thx-tb tbody td {
  padding: 8px 0;
  /* 用 --line-2 而不是 --line：后者(#E7ECF2)压在米色纸面上基本看不出行界 */
  border-bottom: 1px solid var(--line-2);
  color: var(--text);
  vertical-align: top;
}
.thx-tb tbody tr:last-child td { border-bottom: 0; }

/* 姓名列 76px 定宽：够 4 个字，且让机构列从同一竖线起排 */
.thx-tb tbody td:first-child {
  width: 76px;
  font-weight: 600;
  color: var(--ink-strong);
  white-space: nowrap;
}

/* 表格下方的事实说明（如二期的"另有 3 位缺席"） */
#view-history .thx__note {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: var(--fs-cap);
  line-height: 1.7;
  color: var(--text-3);
}

/* ============================================================
   启动页遮罩 · 1118 场微调
   母本 0% 处 .82 会把新图正中的月亮整块压没（原深圳图没有中央月亮，
   所以没暴露）。降到 .72 让月亮透出来，同时字标仍在 .72 暗底上，
   对比度足够（白字 #fff on ~#1b2438 ≈ 12:1）。
   ============================================================ */
#splash .splash-veil {
  background: linear-gradient(180deg,
    rgba(11,18,32,.72) 0%, rgba(11,18,32,.38) 22%, rgba(11,18,32,.12) 40%,
    rgba(11,18,32,.20) 55%,
    rgba(11,18,32,.72) 78%, rgba(11,18,32,.92) 100%);
}

/* ============================================================
   来访指引 · 长图占位（1118 场：地址未定，先留位不破图）
   材质与 .guide 同一套：纸面 + 内描边；虚线表示"待补"，不是成品。
   ============================================================ */
.guide--empty { background: var(--bg-elev); }
.guide__ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 220px;
  margin: 14px;
  padding: 44px 20px;
  border: 1px dashed var(--line);
  border-radius: calc(var(--r-card) - 6px);
  text-align: center;
}
.guide__ph-t {
  font-size: var(--fs-sec);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-strong);
}
.guide__ph-s {
  font-size: var(--fs-tiny);
  line-height: 1.7;
  letter-spacing: .01em;
  color: var(--text-3);
}

/* ============================================================
   启动页双图切换（修母本遗留：app.css 只给了 .splash-bg 定位，
   从没写过 --tall / --wide 的显隐，两张图一直重叠，
   后加载的横图盖住竖图 —— 手机端实际看到的永远是"横图中间一段"）。
   规则：竖屏（窄于 1:1）用竖图，横屏/桌面用横图。
   ============================================================ */
.splash-bg--wide { display: none; }
@media (min-aspect-ratio: 1/1) {
  .splash-bg--tall { display: none; }
  .splash-bg--wide { display: block; }
}

/* ============================================================
   修母本遗留：.splash{display:flex} 会把 [hidden] 的默认 display:none
   覆盖掉 —— JS 里 sp.hidden = true 形同虚设，启动页退场后仍留在
   DOM 里，带着 .out 的 scale(1.035) 一直超出视口 6px（虽不可见，
   但会干扰布局自检，也白跑 14s 的 spZoom 动画）。
   ============================================================ */
.splash[hidden] { display: none !important; }