/* ============================================================
   1111_明德渠道产品说明会系统 · 增量样式 v3（精修）
   ------------------------------------------------------------
   依据：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;
  background: linear-gradient(180deg, var(--bg-warm), var(--bg) 280px);
  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; }

/* ---------- 「时间暂定」小标记 ---------- */
.tag-tentative {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  font-style: normal; font-size: var(--fs-cap); font-weight: 400;
  letter-spacing: .04em; color: var(--text-2);
  border: 1px solid var(--line-2); border-radius: var(--r-pill);
  vertical-align: 1px;
}

/* ============================================================
   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; }