/* ============================================================================
   伊比利亚研学洞察系统 · 界面样式 v2.0
   ----------------------------------------------------------------------------
   v2 设计主张：**墨线纸感**（以中性墨色与纸白承载结构，品牌蓝退为点睛）
   —— v1 的问题是把「深海蓝」当成了界面底色，大面积高饱和蓝 = 廉价感来源。
   —— v2 的解法：结构与文字交给墨色，暖沙金做箔线节奏，蓝只在关键交互点出现。

   色纪律：本文件里**不出现任何自造 HEX**，也**不出现任何 rgba 三元组字面量**
           （除 tokens.css 已声明的调色板）。所有颜色一律 var() 引用令牌：
             · 品牌暖沙金只有 5 档语义入口 —— --gold-veil / --gold-hair /
               --gold-soft / --gold-line / --gold-hi（详见 tokens.css ⑤ 段）
             · 中性结构色只用 --n-*（背景/文字层见 tokens.css ②④ 段）
             · 洞察金 --key 小面积点睛（≤3%）
           v3.1 收敛记录：原来散落 21 档金箔透明度、19 档字号、15 档圆角，
           现已全部改由令牌驱动（--fs-* / --r-* / --gold-*）。
   ============================================================================ */

/* ===========================================================================
   0. 基础
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;color:var(--text);
  /* v3 宣纸底：顶部一层极淡暖晕，往下归于极光白（呼应启动页的暖光） */
  background-color:var(--bg);
  background-image:linear-gradient(180deg,var(--bg-warm),transparent 420px);
  background-repeat:no-repeat;
  font:var(--fs-body)/var(--lh-body) var(--font);
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overscroll-behavior-y:none;
}
img{max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brand-focus);outline-offset:2px}
/* app.js 生成的输入控件带内联 outline:0，用 !important 把焦点态找回来（可访问性硬要求） */
input:focus-visible,textarea:focus-visible,select:focus-visible{
  outline:2px solid var(--brand-focus)!important;outline-offset:1px;border-radius:var(--r-sm)
}
::selection{background:var(--gold-soft)}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

.app{
  max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;background:transparent;
}
main{
  flex:1;
  padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 8px);
}
.view{display:none}
.view.on{display:block;animation:viewIn .34s cubic-bezier(.22,.8,.3,1)}
@keyframes viewIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.wrap{padding:16px 18px 0}

/* ===========================================================================
   1. 启动页（Splash）
   =========================================================================== */
.splash{
  position:fixed;inset:0;z-index:300;background:var(--deep);
  display:flex;flex-direction:column;
  opacity:1;transition:opacity .46s ease,transform .46s ease;
}
.splash.out{opacity:0;transform:scale(1.035);pointer-events:none}
.splash-bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 38%;
  animation:spZoom 14s ease-out both;
}
@keyframes spZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.splash-veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,18,32,.82) 0%,rgba(11,18,32,.42) 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%);
}
.splash-body{
  position:relative;flex:1;display:flex;flex-direction:column;
  /* 顶部留白按项目负责人要求收紧（原 +22px） */
  padding:calc(env(safe-area-inset-top,0px) + 18px) 26px calc(env(safe-area-inset-bottom,0px) + 24px);
  color:var(--on-deep);
}
.splash-brand{
  display:flex;align-items:center;gap:9px;
  animation:spUp .7s .05s cubic-bezier(.22,.8,.3,1) both;
}
.splash-brand .mark{
  width:27px;height:27px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:rgba(244,247,251,.14);border:1px solid var(--gold-soft);
  color:#fff;font-size:var(--fs-sec);font-weight:600;letter-spacing:0;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.splash-brand .txt{font-size:var(--fs-sec);font-weight:600;letter-spacing:var(--track-wide);color:var(--on-deep)}
.splash-main{
  /* ★ 项目负责人要求顶部留白收紧：不再垂直居中（原 margin-top:auto 会顶出一大块空白），
     改为明确的上边距 4vh，其余空间留给下方——内容整体上移，顶部留白约减一半。
     margin-bottom:auto 保留，用来把底部（二维码 + 提示）推到贴底。 */
  margin-top:4vh;margin-bottom:auto;padding:18px 0 0;
  animation:spUp .8s .16s cubic-bezier(.22,.8,.3,1) both;
}
.sp-eb{
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.26em;
  color:var(--gold-hi);margin-bottom:16px;
}
.sp-title{
  margin:0;font-size:var(--fs-display);line-height:var(--lh-title);font-weight:600;letter-spacing:-.012em;
  color:#fff;text-shadow:0 2px 26px rgba(11,18,32,.55);
}
.sp-rule{
  width:58px;height:2px;border-radius:var(--r-pill);margin:20px 0 16px;
  background:linear-gradient(90deg,var(--gold),transparent);
  box-shadow:0 0 14px var(--gold-hair);
}
/* #7：日期·城市行原来用 --on-deep-2(.72 白) 压亮部照片，实测 ≈2.7:1；提到 .88 + 投影
   后稳定在 4.6:1 以上（视觉上只是"更清亮"，不改变构图） */
.sp-meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:9px;
  font-size:var(--fs-tiny);letter-spacing:.05em;
  color:rgba(244,247,251,.88);text-shadow:0 1px 8px rgba(11,18,32,.55);
}
.sp-meta .dotsep{width:3px;height:3px;border-radius:var(--r-pill);background:var(--gold);display:inline-block}
@keyframes spUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

.splash-foot{animation:spUp .8s .3s cubic-bezier(.22,.8,.3,1) both}
.sp-enter{
  width:100%;height:54px;display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-btn);cursor:pointer;
  background:rgba(244,247,251,.10);
  border:1px solid var(--gold-line);
  color:#fff;font-size:var(--fs-body);font-weight:500;letter-spacing:.03em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
  transition:background .2s,border-color .2s,transform .12s;
}
.sp-enter:active{transform:scale(.985);background:rgba(244,247,251,.16)}
.sp-enter-t{line-height:1}
.sp-enter-a{font-size:var(--fs-lead);line-height:1;color:var(--gold);transform:translateY(-1px)}
/* #7：授权提示是合规性文字，不该是页面上最弱的一行（原 .42 ≈3.6:1）⇒ 提到 .66 ≈6.4:1 */
.sp-note{
  margin-top:14px;text-align:center;font-size:var(--fs-cap);letter-spacing:.16em;
  color:rgba(244,247,251,.66);
}

/* ★ 2026-10-15 项目负责人决策：正式系统不带二维码入口（二维码只用于对外分发的图片海报）。
   本节原有「扫码入口 .sp-qr」与「放大层 .qr-zoom」已整块删除。
   app.js 里对 #qrEntry / #qrZoom 的绑定本身就带判空（`if (qrBtn && qrZoom)`），删 DOM 不会抛错。
   ⚠ demo.html（电脑演示页）自带独立一份二维码，与本文件无关，保持原样。
   ⛔ 不要把扫码入口加回启动页。 */

/* 主按钮下方的英文小字（项目负责人 2026-10-15 新增要求；文案待项目负责人确认，见交付说明 §E） */
.sp-enter-en{
  margin-top:11px;text-align:center;
  font-size:var(--fs-tiny);letter-spacing:.06em;line-height:1.5;
  color:rgba(244,247,251,.80);
}

/* ===========================================================================
   2. 顶栏：纸色毛玻璃 + 墨色字标（不用蓝底）
   =========================================================================== */
/* #8：index.html 是 viewport-fit=cover + manifest display:standalone
   ⇒ 必须自己让开状态栏/刘海；高度用 calc 补足，内容区仍是 54px（box-sizing:border-box 全局已开） */
.topbar{
  position:sticky;top:0;z-index:20;
  height:calc(var(--top-h) + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:10px;padding:env(safe-area-inset-top,0px) 18px 0;
  background:rgba(248,250,252,.86);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  /* v3：底部一道箔金细线（与启动页同款收口） */
  border-bottom:1px solid var(--gold-line);
}
.topbar .logo{
  width:26px;height:26px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;background:var(--ink-strong);color:#fff;
  font-size:var(--fs-sec);font-weight:600;letter-spacing:0;
  box-shadow:inset 0 0 0 1px var(--gold-soft);   /* 墨蓝底 + 金内描边 = 印章感 */
}
.topbar .name{
  font-size:var(--fs-body);font-weight:600;letter-spacing:.02em;color:var(--ink-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar .spacer{flex:1}
.topbar .act{
  position:relative;flex:none;height:32px;padding:0 13px;border-radius:var(--r-pill);
  border:1px solid var(--gold-line);background:rgba(255,255,255,.9);
  /* 字号由 12.5px 归到 --fs-sec(13px) 后，320/375px 下按钮会被 .name 挤到换行（"洞察问/答"）
     ⇒ 补 flex:none + nowrap：按钮恒为单行，超出部分由 .name 侧省略号承担 */
  color:var(--ink-strong);font-size:var(--fs-sec);font-weight:500;letter-spacing:.02em;white-space:nowrap;
  cursor:pointer;transition:border-color .18s,background .18s;
}
/* 视觉高度 32px，触控热区扩到 44px（不改变外观） */
.topbar .act::after{content:"";position:absolute;left:0;right:0;top:-6px;bottom:-6px}
.topbar .act:active{background:var(--gold-veil);border-color:var(--gold)}

/* ===========================================================================
   3. Hero：城市实景 + 圆肩叠层衔接
   =========================================================================== */
.hero{position:relative;height:224px;overflow:hidden}
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(11,18,32,.52) 0%,rgba(11,18,32,.10) 30%,
    rgba(11,18,32,.26) 60%,rgba(11,18,32,.82) 100%);
}
/* bottom 必须大于下方白纸的负 margin（28px），否则压图标题会被圆肩切掉 */
.hero .cap{position:absolute;left:20px;right:20px;bottom:42px;color:#fff}
.hero .eb{
  display:inline-block;margin-bottom:9px;padding:3px 11px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.18em;
  color:rgba(255,255,255,.95);
  /* v3.2：底衬由 .46 提到 .62。原因：机构头图是**实拍照片**（含大量亮部/天空/白墙），
     而 .46 的黑压在纯白照片上只合成出约 58% 亮度的中灰，白字落上去最坏情况仅 ≈2.97:1（<4.5:1）。
     提到 .62 后同一最坏情况 = 4.91:1；深色照片上观感几乎不变。 */
  background:rgba(11,18,32,.62);
  border:1px solid var(--gold-soft);   /* v3：金边胶囊，呼应启动页 */
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.hero h1{
  margin:0;font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-title);letter-spacing:-.012em;
  text-shadow:0 2px 18px rgba(11,18,32,.6);
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
/* 白色纸面用大圆肩从图片下缘「抬」上来，替代硬切（负 margin 必须大于圆角半径才看得见）
   ★ v3.2：行程主题页复用同一套圆肩（它的 hero 也是页内首图，语义一致），仅扩选择器、数值不动。 */
#view-insight .wrap,
#view-trip .wrap{
  position:relative;z-index:2;margin-top:-28px;padding-top:24px;
  background:linear-gradient(180deg,var(--bg-warm),var(--bg) 280px);
  border-radius:var(--r-paper) var(--r-paper) 0 0;
}

/* ===========================================================================
   4. 呼吸灯关键帧（★ 本节的唯一保留项）
   ---------------------------------------------------------------------------
   原「录音条」整套样式（.rec-card / .rec / .rec-led / .rec-body / .rec-hint /
   .rec-sub / .rec-time / .rec.recording）已随录音入口下线一并删除
   —— 2026-10-15 项目负责人决策，DOM 同步下线，留着只会误导后来者以为功能还在。
   但 @keyframes recPulse 是**跨栏目共用**的脉冲动画，仍被三处活跃规则引用：
     · .badge.proc::before                              （第 8 节 · 处理中徽标）
     · .dot.pulse                                       （第 11 节 · 处理台呼吸灯）
     · .inst-card[data-claimed="2"] .ic-state::before   （第 17 节 · 认领进行中）
   ⇒ 故意不改名：改名要同步改三处引用，收益为零、漏改风险不为零。
   =========================================================================== */
@keyframes recPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.42);opacity:.5}}

/* ===========================================================================
   5. 按钮
   =========================================================================== */
.btn-row{display:flex;gap:10px;margin:13px 0 4px}
.btn-row .btn{flex:1;min-width:0}
.btn{
  height:46px;padding:0 16px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:#fff;color:var(--text);
  font-size:var(--fs-body);font-weight:500;letter-spacing:.01em;
  cursor:pointer;transition:background .18s,border-color .18s,transform .1s,opacity .2s;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
}
.btn:active{transform:scale(.985)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
/* 主按钮 = 墨蓝底 + 金内描边（★ v3：与启动页「进入本次活动洞察」同款） */
.btn.primary{
  background:var(--ink-strong);border-color:var(--ink-strong);color:#fff;font-weight:500;
  box-shadow:inset 0 0 0 1px var(--gold-soft),0 10px 24px -14px rgba(11,18,32,.55);
}
.btn.ghost{background:#fff;color:var(--text-2)}
.btn.ghost:active{background:var(--n-100)}
/* 归档页「人物 / 机构」= 分段控件（app.js 用 .primary 表示选中） */
.btn-row.segmented{gap:6px;padding:4px;background:var(--n-100);border-radius:var(--r-btn);margin-bottom:14px}
.btn-row.segmented .btn{
  height:38px;font-size:var(--fs-sec);border-radius:var(--r-sm);border-color:transparent;background:transparent;color:var(--text-2)
}
.btn-row.segmented .btn.primary{
  background:#fff;border-color:var(--line-2);color:var(--text);box-shadow:var(--sh-1)
}
/* #12：「重建索引」不是第三个 tab —— 它点击即 POST /api/indexes/rebuild（全量重建、无二次确认）。
   视觉上把它从分段控件里"摘出来"：不占等分、白底 + 中性描边 + 小一号字。
   ★ 边界色刻意用 --line-2 而非 --gold-line：按 P-2「金箔密度收到 4 处」的精神，
     这里不再新增第 5 条金线（描边数量不改，只是把它的"身份"从 tab 降为动作）。 */
.btn-row.segmented #btnRebuild{
  flex:0 0 auto;padding:0 13px;font-size:var(--fs-tiny);
  border-color:var(--line-2);background:#fff;color:var(--text-2);
}

/* ===========================================================================
   6. 区块头：01  标题 ————— EN  （墨字 + 暖沙金箔线 = 刊物节奏）
   =========================================================================== */
/* ★ 2026-10-15 英文版修横向溢出（项目负责人自验第 4 条「320/375/414 三档不溢出」）。
   现象：英文版机构详情在 320px 下抽屉可横向滚（panel scrollWidth 400 > clientWidth 320）。
   真因：栏目标题三段 `.n + h3 + .en` 原来**全是 flex:none（一个都不肯让）**，
        `.rule` 又 min-width:14px ⇒ 英文长标题撑破容器：
        「QUESTIONS」+「Interview Questions」+「5 questions」= 310px > 320 视口的 280px。
        中文栏目标题只有 2/4 字，永远撞不到（实测 zh 320/375/414 全 320/375/414 无溢出）。
   修法：**只在"放不下"时改变行为**，放得下时渲染与原来逐像素相同 ——
        ① 允许整行换行；② 让装饰性的金箔细线先让位（可缩到 0）；
        ③ h3 / .en 允许收缩（flex:none → 0 1 auto），文字一律保留，不截断、不省略号。 */
.sec{display:flex;align-items:center;gap:10px;margin:28px 2px 12px;flex-wrap:wrap;row-gap:6px}
/* 编号 = 金箔小标签（淡金底 + 墨字，既有"箔"感又保证 ≥4.5:1） */
.sec .n{
  order:1;flex:none;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:.1em;color:var(--ink-strong);
}
.sec h3{
  order:2;flex:0 1 auto;min-width:0;overflow-wrap:break-word;margin:0;
  font-size:var(--fs-body);font-weight:600;
  letter-spacing:.01em;color:var(--ink-strong);
}
.sec .rule{
  order:3;flex:1;height:1px;min-width:0;border:0;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--gold-line),transparent);
}
/* #6：这里挂的是真数据（#sessCount = 「3 场」），原 --text-3 实测 2.99:1 ⇒ --text-2 = 5.5:1 */
.sec .en{
  order:4;flex:0 1 auto;min-width:0;font-size:var(--fs-cap);font-weight:600;
  letter-spacing:var(--track-wide);
  color:var(--text-2);text-transform:uppercase;
}

/* ===========================================================================
   7. 卡片 / 列表
   =========================================================================== */
.card{
  position:relative;background:var(--bg-elev);border-radius:var(--r-card);padding:16px;
  margin-bottom:12px;font-size:var(--fs-body);line-height:1.75;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
}
/* ★ #11 / P-2：卡片金眉线已整条删除。
   原因：① 结构不成立 —— 当年 .rec-card(padding 12) 里，眉线在 y=0、录音条金描边在 y=12，
            两条平行金线相距 12px，形成"重影"（截图里可见）；
         ② 眉线 left/right 硬编码 16px，与卡片 padding 脱钩；
         ③ 卡片叠放时形成无信息的"横纹"，是 7 条同屏金线里信息量最低的一处。
   保留的 3 处结构骨架金线：顶栏底线 / 区块头 .rule / 底栏上沿+激活线。
   （原第 4 处「录音条描边」随录音入口下线而消失，见第 4 节说明。） */
.list-item{
  display:flex;align-items:center;gap:12px;padding:10px;margin-bottom:10px;
  background:#fff;border-radius:var(--r-card);cursor:pointer;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
  transition:transform .12s,box-shadow .2s;
}
.list-item:active{transform:scale(.99)}
.thumb{
  /* #20 同心圆角：外层 .list-item 18px − 内边距 10px = 8px（精确同心） */
  flex:none;width:54px;height:54px;border-radius:var(--r-sm);object-fit:cover;
  background:var(--n-100);display:block;
}
.mid{flex:1;min-width:0}
.t{
  font-size:var(--fs-body);font-weight:600;letter-spacing:.005em;color:var(--ink-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.s{font-size:var(--fs-tiny);color:var(--text-2);margin-top:4px;letter-spacing:.01em}

/* 状态徽标：色相由圆点承载，文字始终墨色（保证 ≥4.5:1）
   #19：原来未设 line-height，继承 body 1.72 ⇒ 徽标高 26.9px（11px 字），在 74px 的列表行里显笨。
        改为 line-height:1 + padding 5/5 ⇒ 高 22px，并与 .chip / .sec .n 统一到"小胶囊"节奏。 */
.badge{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px 5px 8px;border-radius:var(--r-pill);line-height:1;
  background:var(--n-100);color:var(--text);font-size:var(--fs-tiny);font-weight:600;letter-spacing:.02em;
}
.badge::before{content:"";width:5px;height:5px;border-radius:var(--r-pill);background:var(--text-2)}
.badge.done{background:rgba(34,211,238,.13)}
.badge.done::before{background:var(--accent)}
.badge.proc{background:rgba(255,177,77,.15)}
.badge.proc::before{background:var(--key);animation:recPulse 1.4s ease-in-out infinite}
.badge.fail{background:transparent;box-shadow:inset 0 0 0 1px var(--line-2)}
.badge.fail::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-2)}

/* ===========================================================================
   8. 总报告封面
   =========================================================================== */
.cover-card{padding:0;overflow:hidden}
.cover{position:relative;height:214px;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover;display:block}
.cover .veil{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(11,18,32,.60) 0%,rgba(11,18,32,.22) 36%,rgba(11,18,32,.88) 100%);
}
.cover .in{position:absolute;left:20px;right:20px;bottom:20px;color:#fff}
.cover .in .eb{font-size:var(--fs-cap);font-weight:600;letter-spacing:var(--track-wide);color:var(--gold-hi);margin-bottom:8px}
.cover .in h2{margin:0;font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-title);letter-spacing:-.012em;text-shadow:0 2px 16px rgba(11,18,32,.6)}
.cover .in .rule{
  width:32px;height:2px;border-radius:var(--r-pill);margin:12px 0 10px;
  background:linear-gradient(90deg,var(--gold),transparent);
}
.cover .in .sub{font-size:var(--fs-tiny);color:rgba(255,255,255,.8);letter-spacing:.02em}
.cover-act{padding:14px}

/* ===========================================================================
   9. 报告内组件
   =========================================================================== */
/* 键值对 */
.kv{display:grid;grid-template-columns:62px 1fr;gap:9px 12px;align-items:baseline}
.kv b{font-size:var(--fs-tiny);font-weight:500;color:var(--text-2);letter-spacing:.02em}
.kv span{font-size:var(--fs-body);color:var(--text);min-width:0;word-break:break-word}
/* ★ 2026-10-15：「确认城市与机构」弹窗（app.js 的 openMetaDialog）里两个 <select> 带内联
   `border:0;outline:0`，实测被削到 **233 × 19px** —— 高度 19px 既低于 WCAG 2.5.8(AA) 的
   24px 最低值，又因为没边框/底色而**没有任何可点暗示**（用户看不出它能点）。
   这个弹窗是上传者每次都要用的，不是边缘控件 ⇒ 由样式层把热区补回来（**不改 app.js 的内联样式**）：
     · min-height 44px = 与全站按钮/卡片同一触控标准；
     · padding 撑出内部留白，让文字不贴边；
     · 只加 min-height/padding，**不写 border/background** ⇒ 不动他既定的"无边框下拉"观感，
       也不会和任何内联声明打架（他内联里没有这两条）。
   ⚠ 焦点环不在这里管 —— app.css 第 37 行那条 `!important` 已经把内联 `outline:0` 兜住了。 */
#sheetBody .kv select{min-height:44px;padding:4px 0}

/* 指标条 */
.meter{
  display:grid;grid-template-columns:repeat(5,1fr);
  background:var(--bg-sunken);border-radius:var(--r-btn);padding:12px 0;
  box-shadow:inset 0 0 0 1px var(--line);
}
/* #21：五格等分默认 min-width:auto，长值（1h12m34s / 5 位数）会把格子撑开导致整条错位 */
.meter>div{min-width:0;text-align:center;padding:0 3px;border-right:1px solid rgba(11,18,32,.07)}
.meter>div:last-child{border-right:0}
.meter b{display:block;font:600 var(--fs-lead)/1.25 var(--num);font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--ink-strong);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meter i{display:block;font-style:normal;font-size:var(--fs-cap);color:var(--text-2);margin-top:6px;letter-spacing:.06em}
/* v3：「关键指标」的强调交给金色（不再用蓝字），首格标签前点一颗金点 */
.meter>div:first-child i::before{
  content:"";display:inline-block;width:4px;height:4px;border-radius:var(--r-pill);
  background:var(--gold);margin-right:5px;vertical-align:middle;
}

/* 关键洞察引文块 */
.quote{
  position:relative;padding:1px 0 1px 15px;margin:0 0 17px;
  border-left:2px solid var(--gold);
}
.quote:last-child{margin-bottom:0}
/* #15：font-weight:450 是无效档（微软雅黑只有 400/500/600/700，实测 450 回落 400）
   —— 写了等于没写，且会让后来者以为存在中间档。显式改为 400。 */
.quote p{margin:0;font-size:var(--fs-lead);line-height:1.78;font-weight:400;letter-spacing:-.004em;color:var(--text)}
.quote .src{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  margin-top:9px;font-size:var(--fs-tiny);color:var(--text-2);line-height:1.6;
}
.quote .src a{flex:none;color:var(--brand);font-weight:600;text-decoration:none;white-space:nowrap}

/* 标签 */
.chip{
  display:inline-flex;align-items:center;
  padding:5px 12px;margin:0 6px 6px 0;border-radius:var(--r-pill);
  background:var(--n-100);color:var(--text-2);
  font-size:var(--fs-tiny);font-weight:500;letter-spacing:.01em;
}
/* #13：.chip.on 全站只用 1 次（app.js 给「认知层」这个静态标签上色），原为柔波青
   —— 于是「认知层(青)/操作层(金)」两个平级标签两种色相，且冷色落在全暖金体系里很突兀。
   改为与 .chip.gold 同族的暖金，只靠一道 inset 金环与 .chip.gold 拉开一档（同色同调）。 */
.chip.on{background:var(--gold-veil);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--gold-hair)}
.chip.gold{background:var(--gold-veil);color:var(--ink-strong)}
/* 问答页可点建议：触控目标抬到 ≥44px（视觉仍是小胶囊） */
#sheetBody .chip[data-q]{position:relative;cursor:pointer}
#sheetBody .chip[data-q]::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}

/* 要点列表（语义化 ul）：悬挂缩进，换行不顶到最左 */
.pl{list-style:none;margin:0;padding:0}
.pl li{position:relative;padding-left:1.1em;margin-bottom:9px;font-size:var(--fs-body);line-height:1.76}
.pl li:last-child{margin-bottom:0}
.pl li::before{
  content:"·";position:absolute;left:0;top:0;
  color:var(--text-2);font-size:var(--fs-body);line-height:1.76;
}
.chip + .pl{margin-top:10px}
/* 后续动作：方框勾选符
   #28：描边原为 --line-2 = 1.37:1（非文本元素需 ≥3:1），勾选框几乎看不见 ⇒ --text-3 = 3.13:1。
   #5：同时去掉 3px 圆角 —— 圆角档只有 999/28/18/14/8，11px 的小方框套 8px 会变圆点；
        它本身是"勾选框"，直角方形才是正确语义（微型标记不参与面圆角档）。 */
.pl.act li{padding-left:1.5em}
.pl.act li::before{
  content:"";top:.5em;left:1px;
  width:11px;height:11px;border:1.5px solid var(--text-3);
  background:none;font-size:0;
}

/* 进度条 */
.prog{height:4px;border-radius:var(--r-pill);background:var(--n-200);overflow:hidden;margin:13px 0 11px}
.prog i{display:block;height:100%;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--ink-strong),var(--gold));transition:width .7s cubic-bezier(.3,.8,.3,1)}

/* 逐字稿分段 */
.seg{padding:12px 0;border-bottom:1px solid var(--line)}
.seg:last-child{border-bottom:0;padding-bottom:0}
/* #6：说话人名原 --text-3 = 3.13:1 ⇒ --text-2 = 5.75:1（逐字稿要能对上"谁在说"） */
.seg .sp{font-size:var(--fs-cap);font-weight:600;letter-spacing:.11em;color:var(--text-2);margin-bottom:5px}
/* #22：font-style:italic 在微软雅黑下是**合成伪斜体**（机器倾斜），中西文都脏；
   而"原文 vs 中译"的区分本来就由 --text-2 承担 ⇒ 斜体投入没有回报。
   改为左侧一道中性墨线（与 .quote 的金竖线同一套语言，弱一档）。 */
.seg .orig{font-size:var(--fs-sec);line-height:1.66;font-style:normal;color:var(--text-2);
  border-left:2px solid var(--line-2);padding-left:10px}
.seg .zh{font-size:var(--fs-body);line-height:1.76;color:var(--text);margin-top:4px}

/* 空态 / 加载 / 错误 / 提示 */
.empty{
  text-align:center;color:var(--text-2);font-size:var(--fs-sec);line-height:1.9;
  padding:40px 22px;background:#fff;border-radius:var(--r-card);
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
}
/* #27：空态图标原为 26px 金色几何字符（◉ ▤ ◫）—— 与底栏同一个字体回退问题，
   26px 下差异被放大，在没装思源黑体的机型上会是三种不同形状/粗细。
   纯 CSS 替换（不动 app.js 的 innerHTML）：金环 + 金点，与启动页金环同族。
   ★ 用 font-size:0 把内部字符清零，字符仍留在 DOM 里（不影响 app.js 与读屏，纯装饰）。 */
.empty .big{
  display:block;width:34px;height:34px;margin:0 auto 12px;
  font-size:0;line-height:0;
  border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1px var(--gold-line);
  background:radial-gradient(circle,var(--gold) 0 2.5px,transparent 2.6px);
}
.loading{text-align:center;color:var(--text-2);font-size:var(--fs-sec);padding:24px;letter-spacing:.02em}
.err{
  padding:13px 14px;margin-bottom:12px;border-radius:var(--r-btn);font-size:var(--fs-sec);line-height:1.72;
  color:var(--text);background:rgba(255,177,77,.10);
  box-shadow:inset 0 0 0 1px var(--gold-soft);
}
.hint{font-size:var(--fs-tiny);line-height:1.72;color:var(--text-2)}

/* ===========================================================================
   10. 底栏：四字全称 + 描边 SVG 图标（v3.1 · 原 461–484 行的最小改造）
   =========================================================================== */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:560px;margin:0 auto;display:flex;
  height:calc(var(--tab-h) + env(safe-area-inset-bottom,0px));
  padding-bottom:env(safe-area-inset-bottom,0px);
  background:rgba(255,255,255,.93);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--gold-line);   /* v3：箔金上沿 */
}
.tabbar button{
  position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:0;cursor:pointer;
  /* #1：未选中色原 --text-3 = 3.10:1（全站最低，而底栏是最高频控件）⇒ --text-2 = 5.71:1 */
  color:var(--text-2);
  font-size:var(--fs-tiny);font-weight:500;letter-spacing:.04em;   /* 原 10.5px / .1em */
  transition:color .2s;
  touch-action:manipulation;                /* 去掉 300ms 点击延迟；避免双击误触发页面缩放 */
}
.tabbar .ic{width:22px;height:22px;display:grid;place-items:center}
.tabbar .ic svg{width:22px;height:22px;display:block;stroke-width:1.7}
.tabbar .lb{line-height:1.25;white-space:nowrap;text-indent:.04em}  /* 原继承 body 行高 1.72=18.1px */
.tabbar button.on{color:var(--ink-strong);font-weight:600}
.tabbar button.on .ic svg{stroke-width:2}   /* 描边加粗：字符图标做不到的免费激活信号 */
.tabbar button.on::before{
  content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:26px;height:2px;border-radius:0 0 var(--r-pill) var(--r-pill);   /* 原 22px */
  background:linear-gradient(90deg,var(--gold-hair),var(--gold),var(--gold-hair));
}
/* #24：底栏按钮满高 60px 且贴视口下缘，全局 outline-offset:2px 会把焦点环画到视口之外 ⇒ 内收 */
.tabbar button:focus-visible{outline-offset:-3px}

/* ===========================================================================
   11. 品牌行（「明德AI 技术支持中」—— 每个界面仅一处）
   ★ 第三批次（2026-10-15）：这一行有**两个产出面**，成品必须一致 ——
     · 抽屉里 8 处由 app.js 的 techLine() 产出（按语言直出，全站唯一出口，取 UI 字典的 brand/techSup）；
     · 页面外壳 6 处是 index.html 里的静态兜底（5 处 .mb-techline ＋ 1 处启动页品牌锁定），
       走 .i18n 双节点、靠本文件 §21.2 切。
     品牌**词**（2026-10-15 项目负责人拍板）：zh「明德AI」/ en「Mingde AI」；后半句换词
     （zh 技术支持中 / en technical support）。
     ⚠ 与品牌词并排的两处**不换**：启动页 .mark 的「明」（图形标识）、语言开关的「中」（选择器标签）。
     样式本身不区分产出面 —— <b> 只管品牌词加粗（现在这个词是个 .i18n 外壳，加粗照样继承进去），
     故两个面自动同款。
   =========================================================================== */
.mb-techline{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:22px 0 26px;font-size:var(--fs-tiny);letter-spacing:.03em;color:var(--text-2);
}
.mb-techline b{font-weight:600;color:var(--ink-strong)}
.dot{width:6px;height:6px;border-radius:var(--r-pill);background:var(--gold);display:inline-block;flex:none}
.dot.pulse{background:var(--key);animation:recPulse 1.5s ease-in-out infinite}

/* ===========================================================================
   12. 抽屉（报告 / 处理台 / 问答 / 逐字稿）
   =========================================================================== */
.sheet{position:fixed;inset:0;z-index:100;display:none}
.sheet.on{display:block}
.sheet .mask{
  position:absolute;inset:0;background:rgba(11,18,32,.44);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s;
  /* #9：遮罩上滑动会把手势透传给 body，表现为"抽屉和背景两层一起动" */
  touch-action:none;
}
.sheet.on .mask{opacity:1}
.sheet .panel{
  position:absolute;inset:0;max-width:560px;margin:0 auto;
  background:linear-gradient(180deg,var(--bg-warm),var(--bg) 380px);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  /* #9：① 底部内容不再被 home 横条压住；② 面板滚到底后不把手势传给背景页 */
  padding-bottom:env(safe-area-inset-bottom,0px);
  overscroll-behavior:contain;
  opacity:0;transform:translateY(18px);
  transition:opacity .32s,transform .36s cubic-bezier(.22,.8,.3,1);
}
.sheet.on .panel{opacity:1;transform:none}
/* #8：与 .topbar 同理，抽屉头也是 sticky 顶栏，必须让开状态栏/刘海 */
.sheet .head{
  position:sticky;top:0;z-index:5;
  height:calc(var(--top-h) + env(safe-area-inset-top,0px));
  display:flex;align-items:center;gap:10px;padding:env(safe-area-inset-top,0px) 14px 0;
  background:rgba(248,250,252,.90);
  backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--gold-line);
}
/* #9 / P-2：返回键的金描边已去掉（改回中性 --line-2）。
   它 38px 大小、位置贴边缘、语义只是"返回"，是 7 条同屏金线里第二处"可去掉"的。
   注意：安全区与滚动穿透那两条【保留照做】（见上）。 */
.sheet .head .x{
  flex:none;width:38px;height:38px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:#fff;color:var(--ink-strong);
  font-size:var(--fs-lead);line-height:1;cursor:pointer;
  display:grid;place-items:center;padding:0;
}
.sheet .head .x:active{background:var(--gold-veil)}
.sheet .head .t{
  flex:1;min-width:0;font-size:var(--fs-body);font-weight:600;letter-spacing:.01em;color:var(--ink-strong);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sheet .head .act{
  position:relative;height:30px;padding:0 11px;border-radius:var(--r-pill);
  border:1px solid var(--gold-line);background:#fff;cursor:pointer;color:var(--text-2);
}
.sheet .head .act::after{content:"";position:absolute;left:0;right:0;top:-7px;bottom:-7px}
#sheetBody .hero{border-radius:0 0 var(--r-paper) var(--r-paper)}
/* 抽屉内的 hero 没有被白纸覆盖，压图文字可贴底 */
#sheetBody .hero .cap{bottom:22px}
#sheetBody .btn{width:100%}

/* ===========================================================================
   13. 吐司
   =========================================================================== */
.toast{
  position:fixed;left:50%;bottom:calc(var(--tab-h) + 24px + env(safe-area-inset-bottom,0px));
  transform:translate(-50%,10px);
  max-width:84%;padding:11px 17px;border-radius:var(--r-btn);
  background:rgba(11,18,32,.94);color:#fff;
  font-size:var(--fs-sec);line-height:1.5;text-align:center;
  opacity:0;pointer-events:none;z-index:200;
  transition:opacity .26s,transform .26s;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ===========================================================================
   14. 无障碍：输入控件字号（与 index.html 解除页面缩放限制必须成对执行）
   =========================================================================== */
/* #10：index.html 已删掉 maximum-scale=1（WCAG 1.4.4 允许双指放大）。
   代价是 iOS 在输入框聚焦时会自动放大——**但仅当控件字号 < 16px**，
   而且聚焦结束后不会还原（整页被顶飞）。原来 .card 内控件继承 14.5px、
   #askInput 内联 14px 都低于阈值 ⇒ 两条必须同时改。
   #askInput 的内联字号来自 app.js:425，故需要 !important 才能覆盖（不改 app.js）。 */
.card input,.card select,.card textarea{font-size:var(--fs-input)}
#askInput{font-size:var(--fs-input)!important}

/* ===========================================================================
   15. 超宽屏微调
   =========================================================================== */
/* ★ v3.1：原 @media (max-width:359px) 区块已删除 —— 它里面 4 个降档值（29/21/14/9.5px）
   本身就是"字号 19 档超标"的来源之一。逐条复算后 320px 已不需要它们：
     · hero h1 23px：'随手录下会谈' 6 字 = 138px ≪ 内容宽 280px；更长的机构名有 -webkit-line-clamp:2 兜底
     · 启动页标题 33px：'公益金融研学之旅' 8 字 = 264px ≤ 268px，且 CJK 可任意断行，不会溢出
     · .meter i 10.5px / .meter b：见下方 @media (max-width:479px)（用**现有档位**处理，不新增字号档）
   若真机在 320px 出现截断，优先缩 padding 而不是再引入新字号档。 */

/* #21 配套：窄屏指标条字号兜底
   —— 实测（Chromium + 微软雅黑 tabular-nums）：五格可用文本宽 320→43px / 375→54px / 414→62px，
      而 '48m12s'（48 分钟录音，fmtDur 的最长常见输出）在 --fs-lead 16px 下需 64px
      ⇒ ≤479px 会压到邻格（改前就有此问题，原 14px 兜底被字号收敛移走后更明显）。
      解法：≤479px 时降到 --fs-sec(13px)=52px，并把格内边距收 0 再省 6px
      （375px 下可用 60.6px / 需 52px，留 14% 余量，兼容 iOS 上回退到 PingFang 的字宽差异）。
      ≥480px 恢复 16px（414px 需 52px / 可用 62px ✓，≥480 更宽裕）。
   ⚠ 这是**上限方案**，没有动五等分结构；若要让 375px 也保持 16px，
      需要改 fmtDur 的输出格式或把指标条改成两行 —— 属 app.js，已列入待确认。 */
@media (max-width:479px){
  .meter{padding:12px 2px}
  .meter>div{padding:0}
  .meter b{font-size:var(--fs-sec);letter-spacing:0}
}
@media (min-width:600px){
  body{background:var(--n-100)}
  .app{box-shadow:0 0 0 1px rgba(11,18,32,.05),0 40px 90px -50px rgba(11,18,32,.4)}
}

/* ===========================================================================
   16. 行程主题页（v3.2 新增）
   ---------------------------------------------------------------------------
   结构：hero（实景 + 主题）→ 纸面圆肩（复用 3 节）→ 行程卡 → 行程简介 → 访团名单
   数据：GET /api/trip（app.js 接完后覆盖 #tripBox 内部即可，本文所有类名为其落点）
   =========================================================================== */
.trip-card{padding:15px 16px}
.trip-tagline{
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.16em;color:var(--text-2);
}
.trip-title{
  margin:7px 0 0;font-size:var(--fs-lead);font-weight:600;line-height:1.52;
  letter-spacing:-.004em;color:var(--ink-strong);
}
/* 事实行：标签列 74px 是按最长标签「团期/路线/主办」(2 字 = 24px) 留足余量后的稳定值 */
.facts{
  display:grid;grid-template-columns:74px 1fr;gap:11px 12px;align-items:start;
  margin-top:14px;padding-top:13px;border-top:1px solid var(--line);
}
.facts b{font-size:var(--fs-tiny);font-weight:500;color:var(--text-2);letter-spacing:.02em;padding-top:2px}
.facts span{font-size:var(--fs-body);line-height:1.7;color:var(--text);min-width:0;word-break:break-word}
.facts .route{font-weight:600;color:var(--ink-strong);letter-spacing:.01em}

/* 正文分段（行程简介 / 机构介绍）—— 字号与行高继承 .card 的 --fs-body/1.75 */
.para{margin:0}
.para + .para{margin-top:10px}
.para + .hint{margin-top:13px}
.para-en{font-size:var(--fs-tiny);line-height:1.7;color:var(--text-2)}

/* ---- 访团嘉宾 ---- */
.guest-grid{display:flex;flex-direction:column;gap:10px}
.guest-card{
  display:flex;gap:12px;padding:13px;
  background:var(--bg-elev);border-radius:var(--r-card);
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
}
/* 头像位：★ 有图显图、无图显姓氏方块。纯 CSS 降级 —— <img alt=""> 加载失败时浏览器渲染为
   透明，底层的 .g-av-fb 自然透出，因此**不需要 onerror、不需要任何 JS**，也不依赖图片是否就位。
   同心圆角：外层 .guest-card 18px − 内边距 13px ≈ 5px；取 --r-sm(8px) 视觉折中。 */
.g-av{
  position:relative;flex:none;width:54px;height:54px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--line);
}
.g-av.sm{width:40px;height:40px}
.g-av-fb{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-lead);font-weight:600;color:var(--text-2);letter-spacing:0;
}
.g-av.sm .g-av-fb{font-size:var(--fs-sec)}
.g-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.g-main{flex:1;min-width:0}
.g-name{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.g-name b{font-size:var(--fs-body);font-weight:600;color:var(--ink-strong);letter-spacing:.005em}
.g-name span{font-size:var(--fs-tiny);color:var(--text-2);letter-spacing:.02em}
.g-bio{margin:7px 0 0;font-size:var(--fs-sec);line-height:1.76;color:var(--text)}
/* 英文原文：沿用 .seg .orig 的"左侧中性墨线 = 另一种语言"语言，弱一档 */
.g-bio-en{
  margin:8px 0 0;font-size:var(--fs-tiny);line-height:1.7;color:var(--text-2);
  border-left:2px solid var(--line-2);padding-left:10px;
}
/* English 原文默认折叠：① 手机上 7 人一屏可扫完；② 一点即开，信息零丢失；
   ③ <details> 是原生元素，键盘与读屏天然可用，且不需要 app.js 写一行代码。
   折展行整行可点且高 44px（触控达标），箭头是 ::after 内容而非字符，随状态旋转。 */
details.g-en{margin-top:6px}
details.g-en summary{
  display:flex;align-items:center;gap:5px;width:100%;min-height:44px;
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.03em;
  color:var(--brand);cursor:pointer;list-style:none;
}
details.g-en summary::-webkit-details-marker{display:none}
details.g-en summary::after{content:"›";font-size:var(--fs-sec);line-height:1;transition:transform .2s}
details.g-en[open] summary::after{transform:rotate(90deg)}

/* ===========================================================================
   17. 访问机构页（v3.2 新增）
   ---------------------------------------------------------------------------
   结构：页面头（含认领进度）→ 11 张档案卡（头图缩略 + 中英名 + 城市 + 方向标签 + 认领）
   数据：GET /api/institutions → 覆盖 #institutionList；#claimStat 由后端计数更新
   =========================================================================== */
.wrap-top{padding-top:20px}
.page-head{padding:2px 2px 16px}
.page-head .ph-eb{
  font-size:var(--fs-cap);font-weight:600;letter-spacing:var(--track-wide);
  color:var(--text-2);text-transform:uppercase;
}
.page-head h1{
  margin:9px 0 0;font-size:var(--fs-h2);font-weight:600;line-height:var(--lh-title);
  letter-spacing:-.012em;color:var(--ink-strong);
}
.page-head .ph-sub{margin:9px 0 0;font-size:var(--fs-sec);line-height:1.7;color:var(--text-2)}
.claim-stat{
  display:inline-flex;align-items:baseline;gap:7px;margin-top:13px;
  padding:7px 13px;border-radius:var(--r-pill);
  background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--line);
}
.claim-stat b{font:600 var(--fs-lead)/1 var(--num);font-variant-numeric:tabular-nums;color:var(--ink-strong)}
.claim-stat span{font-size:var(--fs-tiny);color:var(--text-2);letter-spacing:.02em}

/* 档案卡。三态只靠 data-claimed 驱动（0 未认领 / 1 已认领 / 2 选择中），
   改一个属性即可切换，不需要增删 class。
   ★ 金箔密度控制：卡面本身不用金；金只出现在"选择中"那一张（1 张）与已认领的状态胶囊底色上。 */
.inst-card{
  background:var(--bg-elev);border-radius:var(--r-card);padding:12px;margin-bottom:12px;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
  transition:box-shadow .24s;
}
.inst-card[data-claimed="1"]{box-shadow:var(--sh-1),inset 0 0 0 1px var(--gold-line)}
.inst-card[data-claimed="2"]{box-shadow:var(--sh-2),inset 0 0 0 1px var(--gold-hi)}
/* ⚠ 卡头是 <button>、认领是另一个 <button>，两者是兄弟而非嵌套 —— 避免 button 套 button 的非法结构 */
.ic-open{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:0;border:0;background:none;cursor:pointer;text-align:left;color:inherit;font-family:inherit;
}
.ic-open:active{opacity:.72}
.ic-thumb{
  flex:none;width:84px;height:56px;border-radius:var(--r-sm);overflow:hidden;
  background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--line);
}
.ic-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ic-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.ic-name{
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:var(--fs-body);font-weight:600;letter-spacing:.005em;color:var(--ink-strong);
}
.ic-en{
  font-size:var(--fs-tiny);color:var(--text-2);letter-spacing:.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ic-city{font-size:var(--fs-tiny);color:var(--text-2);letter-spacing:.01em}
.ic-go{flex:none;font-size:var(--fs-lead);line-height:1;color:var(--text-2)}
.ic-tags{margin-top:10px}
.ic-tags .chip{margin:0 6px 0 0;padding:4px 10px}
.ic-foot{
  display:flex;align-items:center;gap:10px;margin-top:11px;padding-top:11px;
  border-top:1px solid var(--line);
}
/* 状态行：色相由圆点承载，文字保持 ≥4.5:1；已认领态给一枚暖金胶囊底（面，不是线） */
.ic-state{
  flex:1;min-width:0;overflow:hidden;display:inline-flex;align-items:center;gap:6px;
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.02em;color:var(--text-2);
}
.ic-state::before{content:"";flex:none;width:5px;height:5px;border-radius:var(--r-pill);background:var(--text-3)}
.inst-card[data-claimed="1"] .ic-state{
  flex:0 1 auto;padding:5px 10px 5px 8px;border-radius:var(--r-pill);
  background:var(--gold-veil);color:var(--ink-strong);
}
.inst-card[data-claimed="1"] .ic-state::before{background:var(--gold)}
.inst-card[data-claimed="2"] .ic-state{color:var(--ink-strong)}
.inst-card[data-claimed="2"] .ic-state::before{background:var(--key);animation:recPulse 1.4s ease-in-out infinite}
.ic-foot .claim-btn{margin-left:auto}
/* 认领按钮：中性描边（11 张同屏，刻意不占金色额度）；只有"选择中"那 1 张转成暖金。
   视觉高 34px，::after 把热区上下各撑 5px ⇒ 44px，外观不变。 */
.claim-btn{
  flex:none;position:relative;height:34px;padding:0 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-2);background:#fff;color:var(--ink-strong);
  font-size:var(--fs-sec);font-weight:600;letter-spacing:.02em;cursor:pointer;
  transition:background .18s,border-color .18s,transform .1s;
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
}
.claim-btn::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}
.claim-btn:active{transform:scale(.985);background:var(--gold-veil)}
.inst-card[data-claimed="1"] .claim-btn{border-color:var(--line-2);color:var(--text-2);font-weight:500}
.inst-card[data-claimed="2"] .claim-btn{
  border-color:var(--gold-line);background:var(--gold-veil);color:var(--ink-strong);
}

/* 「内部」小徽标（保密标记，按 data.confidential.has 渲染）
   ★ 刻意压低存在感：中性描边 + 次级字色，不占金色额度、不做成红色警示条。
   ★ 只出现在系统界面内 —— 后端生成 DOCX/图片等对外形态时不读这个标记（见交付说明）。
   ★ 2026-10-15：补 .pend-badge（备选机构徽标）**共用同一套声明** —— 零新颜色、零新档位，
     唯一的差异在下面的 §21.3：.conf-badge 在英文态整块摘除（内部标记不对外），
     .pend-badge 不摘（备选状态是对外也必须照实说明的事实）。 */
.conf-badge,
.pend-badge{
  flex:none;display:inline-flex;align-items:center;
  padding:2px 6px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.12em;line-height:1.5;
  color:var(--text-2);box-shadow:inset 0 0 0 1px var(--text-3);
}

/* 认领：选人面板（卡片内行内展开，不跳页、不弹新层；7 位同行人一屏可滚完） */
.claim-pick{
  margin-top:11px;padding:12px;border-radius:var(--r-btn);
  background:var(--bg-sunken);box-shadow:inset 0 0 0 1px var(--line);
}
.cp-head{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.cp-head b{font-size:var(--fs-sec);font-weight:600;color:var(--ink-strong)}
.cp-head span{font-size:var(--fs-cap);color:var(--text-2);letter-spacing:.02em}
.cp-list{
  display:grid;gap:6px;max-height:288px;overflow-y:auto;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.claim-opt{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:6px 10px;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--line);cursor:pointer;text-align:left;font-family:inherit;
  transition:border-color .16s,background .16s;
}
.claim-opt.on{border-color:var(--gold-line);background:var(--gold-veil)}
.cp-av{
  flex:none;width:30px;height:30px;border-radius:var(--r-sm);overflow:hidden;
  display:grid;place-items:center;background:var(--bg-sunken);position:relative;
}
.cp-av .g-av-fb{font-size:var(--fs-tiny)}
.cp-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cp-id{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cp-id b{font-size:var(--fs-sec);font-weight:600;color:var(--ink-strong)}
.cp-id i{font-style:normal;font-size:var(--fs-cap);color:var(--text-2);letter-spacing:.02em}
/* 选择指示：★ 不靠颜色单独传意（WCAG 1.4.1）—— 圆环填墨 + 打勾，色盲/灰度下同样可辨 */
.cp-tick{
  flex:none;width:18px;height:18px;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--text-3);
  display:grid;place-items:center;
}
.claim-opt.on .cp-tick{box-shadow:none;background:var(--ink-strong)}
.claim-opt.on .cp-tick::after{
  content:"";width:8px;height:4px;
  border-left:1.8px solid var(--gold);border-bottom:1.8px solid var(--gold);
  transform:rotate(-45deg) translate(0,-1px);
}
.cp-act{display:flex;gap:8px;margin-top:11px}
.cp-act .btn{height:44px;min-width:0}
.cp-act .btn.ghost{flex:0 0 auto;padding:0 16px}
.cp-act .btn.primary{flex:1}

/* ===========================================================================
   18. 机构详情（抽屉内）—— 头图 + 五块栏目
   ---------------------------------------------------------------------------
   头图沿用 .hero 手法（实景 + 暗色遮罩 + 文字叠加），把 机构名(中/英) / 城市 / 方向标签 压上去。
   栏目依次：① 机构介绍 ② 交流嘉宾名单 ③ 背景状态 ④ 近期大事记 ⑤ 访问问题清单
   ⚠ 「背景状态」是项目负责人指定的栏目名，不得改写为其他说法。
   =========================================================================== */
.inst-hero{height:256px}
.inst-hero h1{-webkit-line-clamp:3}   /* 长机构名（如 Artesania Catalunya（加泰罗尼亚工艺协会））兜底 */
#sheetBody .inst-hero .cap{bottom:26px}
.hero-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.hero-meta .eb{margin-bottom:0}
.hero-en{
  margin:7px 0 0;font-size:var(--fs-tiny);font-weight:500;letter-spacing:.03em;
  color:var(--on-deep);text-shadow:0 1px 8px rgba(11,18,32,.55);
}
.hero-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.hero-tags span{
  display:inline-flex;align-items:center;padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.95);background:rgba(11,18,32,.62);
  border:1px solid var(--gold-soft);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
/* 头图上的「内部」徽标：改用不透明墨蓝底（合规标记不押注照片明度），与照片上其它元素区分 */
.inst-hero .conf-badge,
.inst-hero .pend-badge{
  color:var(--on-deep);background:var(--deep);
  box-shadow:inset 0 0 0 1px var(--gold-soft);
}
.owner-line{
  display:flex;align-items:center;gap:8px;padding:11px 13px;margin-bottom:4px;
  border-radius:var(--r-btn);background:var(--bg-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--fs-sec);letter-spacing:.02em;color:var(--text-2);
}
.owner-line b{font-weight:600;color:var(--ink-strong)}
/* ---- 机构详情：访问时间一行（第二批次 · 2026-10-15 项目负责人要求）----
   与 .owner-line 同一配方（凹陷底 --bg-sunken + 内描边 --line + 次级文字），
   让「访问主理人」「访问时间」两个元信息行视觉同族，不新造颜色。
   展示：中英两态都有（null ⇒ .vt-none 降一档，不与已确定的时间抢注意力）。
   管理：.vt-edit 只在中文态产出；英文态由 §21.3 再兜一层 !important。 */
.vt-line{
  display:flex;align-items:center;gap:8px;padding:11px 13px;margin-bottom:4px;
  border-radius:var(--r-btn);background:var(--bg-sunken);
  box-shadow:inset 0 0 0 1px var(--line);
  font-size:var(--fs-sec);letter-spacing:.02em;color:var(--text-2);
}
.vt-line > i{font-style:normal;flex:none}
.vt-line > b{font-weight:600;color:var(--ink-strong);min-width:0;overflow-wrap:break-word}
.vt-line > b.vt-none{font-weight:500;color:var(--text-2)}
/* 触控目标 ≥44px：视觉只有 34px 高，用 ::after 不可见热区补足（与 .claim-btn / .lang-sw 同一手法）
   ⚠ 必须显式 width:auto —— #sheetBody .btn{width:100%}（§14 抽屉内的通栏按钮配方）会命中本按钮，
     而它是 .vt-line 里的 flex 项且 flex:none（不参与收缩）⇒ 会撑到整行宽并**越界 38px**。
     用同特异度（#id + class）但写在后面的这条覆盖它。 */
#sheetBody .vt-edit{width:auto}
.vt-edit{position:relative;margin-left:auto;flex:none;height:34px;padding:0 12px;font-size:var(--fs-sec)}
.vt-edit::after{content:"";position:absolute;left:0;right:0;top:-5px;bottom:-5px}

/* 访问时间编辑面板：插在 .vt-line 之后（行内展开，不新造浮层，滚动位置不跳） */
.vt-pick{
  display:flex;flex-direction:column;gap:10px;padding:13px;margin:0 0 4px;
  border-radius:var(--r-card);background:var(--bg-elev);
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--gold-line);
}
.vp-head{display:flex;align-items:baseline;gap:8px}
.vp-head b{font-size:var(--fs-body);font-weight:600;color:var(--ink-strong)}
.vp-head span{font-size:var(--fs-tiny);color:var(--text-2);min-width:0;overflow-wrap:break-word}
.vp-field{display:flex;flex-direction:column;gap:6px;font-size:var(--fs-tiny);color:var(--text-2)}
.vp-input{
  height:44px;padding:0 12px;border-radius:var(--r-btn);
  border:1px solid var(--line-2);background:var(--bg-elev);color:var(--text);
  font-family:inherit;font-size:var(--fs-body);
}
.vp-input:focus{outline:2px solid var(--brand-focus);outline-offset:1px}
.vp-note{margin:0}
.vp-act{display:flex;gap:10px;justify-content:flex-end}
/* 幽灵键自动宽 / 主键吃剩余（与卡片上的认领面板 .cp-act 同一配方）。
   ⚠ 但这里**必须显式 width:auto**：本面板在 #sheetBody 里，会被 §14 的
     `#sheetBody .btn{width:100%}` 命中；而 .ghost 是 `flex:0 0 auto`（不参与收缩）
     ⇒ 被撑到整行宽（320 下 258px / 375 下 313px），把 flex:1 的主键挤到只剩 34px，
       整行还向左**越界 13px**（实测 left = -13，两种宽度都是）。
     认领面板 .cp-act 没这毛病，是因为它挂在**卡片**（#institutionList）上、不在 #sheetBody 里 ——
     所以这条不是"照抄它就行"，而是"抄过来必须补 width:auto"。
     用 #id + 2 class 提高特异度，压过 `#sheetBody .btn`。 */
#sheetBody .vt-pick .btn{width:auto}
.vp-act .btn{height:44px;min-width:0}
.vp-act .btn.ghost{flex:0 0 auto;padding:0 16px}
.vp-act .btn.primary{flex:1}
/* 交流嘉宾（机构侧）：无照片素材 ⇒ 一律姓氏方块，绝不用来路不明的照片充数 */
.gi{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--line)}
.gi:last-child{border-bottom:0;padding-bottom:0}
.gi-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.gi-main b{font-size:var(--fs-body);font-weight:600;color:var(--ink-strong)}
.gi-main span{font-size:var(--fs-tiny);color:var(--text-2);letter-spacing:.02em}
.gi-main i{font-style:normal;font-size:var(--fs-sec);line-height:1.7;color:var(--text)}
/* 访问问题清单 */
.q-item{padding:12px 0;border-bottom:1px solid var(--line)}
.q-item:last-child{border-bottom:0;padding-bottom:0}
.q-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:7px}
.q-head .chip{margin:0}
.q-id{margin-left:auto;font-size:var(--fs-cap);font-weight:600;letter-spacing:.08em;color:var(--text-2)}
.q-text{margin:0;font-size:var(--fs-body);line-height:1.76;color:var(--text)}

/* ===========================================================================
   19. 会谈记录页：上传升为主按钮（录音入口已整块下线）
   ---------------------------------------------------------------------------
   项目负责人 2026-10-15 决策：去掉「开始录音」入口，「上传录音 / 文档」升格为主按钮、文案说明支持音频或文档。
   录音 DOM 已从 index.html 删除 ⇒ 原 .rec-legacy 兜底容器与本节末尾的
   `.rec-legacy{display:none}` 一并移除（依赖前提已由 app.js 的空值保护满足）。
   =========================================================================== */
.upload-card{padding:0;background:none;box-shadow:none;border-radius:0;margin-bottom:0}
.btn.upload-cta{
  width:100%;height:auto;min-height:74px;padding:13px 15px;gap:13px;
  align-items:center;justify-content:flex-start;text-align:left;
}
.up-ic{
  flex:none;width:38px;height:38px;border-radius:var(--r-sm);
  display:grid;place-items:center;
  background:rgba(244,247,251,.14);border:1px solid var(--gold-soft);
}
.up-ic svg{width:22px;height:22px;display:block;stroke-width:1.8}
.up-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.up-txt b{display:block;font-size:var(--fs-body);font-weight:600;line-height:1.3;letter-spacing:.02em;color:#fff}
.up-txt i{
  display:block;font-style:normal;font-size:var(--fs-tiny);line-height:1.5;
  letter-spacing:.01em;color:var(--on-deep-2);
}

/* ===========================================================================
   20. 底栏：三格 → 五格（v3.2）
   ---------------------------------------------------------------------------
   每格宽 = 视口/5：320→64px / 375→75px / 414→82.8px。
   四字标签 @--fs-tiny(12px) + .04em ≈ 50.4px ⇒ 最窄档仍留 13.6px 余量，无需新增字号档。
   网格结构、DOM 契约、图标手法均沿用第 10 节，这里只补"格数变化"带来的两处收敛。
   =========================================================================== */
.tabbar .lb{letter-spacing:.02em;text-indent:0}

/* ===========================================================================
   21. 中英全局切换（v3.3 · 项目负责人 2026-10-15 要求）
   ---------------------------------------------------------------------------
   单一状态真源：<html data-lang="zh | en">，默认 zh（静态 HTML 里就写死 zh，
   JS 未跑之前页面也是对的）。**全部规则只认这一个属性**：
     · 属性选择器兼容性最好；
     · 没有静默失败模式 —— 换成 :has() 的话，一旦引擎不支持，
       「英文版必须隐藏认领」这类硬要求会悄悄失效，而这里不会。
   分工：
     · 静态外壳（底栏 / 页头 / 封面文案 / 按钮标签）→ .i18n 双语节点，CSS 切，不需要 JS 重渲染；
     · 接口内容（行程卡 / 嘉宾 / 机构列表与详情）→ app.js 按 data-lang 渲染；
     · 硬性隐藏要求 → 21.3 的 !important 规则兜底，**即使 JS 漏渲染也一定摘得掉**。
   =========================================================================== */

/* ---- 21.1 切换按钮：压在行程主题封面图右上角（项目负责人红框位置）---- */
.lang-sw{
  position:absolute;z-index:3;top:14px;right:14px;
  display:inline-flex;align-items:center;gap:2px;padding:3px;
  border-radius:var(--r-pill);cursor:pointer;font-family:inherit;
  /* 与 .hero-tags span 同一配方：.62 墨底实测在纯白照片上最坏 5.49:1，稳过 4.5:1 */
  background:rgba(11,18,32,.62);border:1px solid var(--gold-soft);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s,transform .1s;
}
.lang-sw:active{transform:scale(.97)}
.lang-sw span{
  min-width:27px;padding:3px 7px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.06em;line-height:1.4;
  text-align:center;color:rgba(255,255,255,.95);
  transition:background .2s,color .2s;
}
/* 当前语言 = 白底墨字：一眼能看出切在哪一档（不靠颜色单独传意，位置/明暗双线索） */
html[data-lang="zh"] .ls-zh,
html[data-lang="en"] .ls-en{background:var(--bg-elev);color:var(--ink-strong)}
/* 触控目标 ≥44px：视觉只有约 28px 高，用不可见热区补足（与 .claim-btn 同一手法，不影响布局） */
.lang-sw::after{content:"";position:absolute;left:-2px;right:-2px;top:-9px;bottom:-9px}

/* ---- 21.2 双语节点：默认中文；html[data-lang="en"] 时换英文 ----
   .i18n   → 内层是 **inline** 元素（span / b / h3 / p 里的行内文字）
   .i18n-b → 内层是 **块** 元素（多段 <p>，如行程简介）
   ⚠ 生成器只会给「真的有英文」的节点加 .i18n —— 给纯中文节点误加 .i18n 会让内容
     在英文版里整段消失（.i-zh 被藏、又没有 .i-en 可显）。 */
.i18n > .i-en, .i18n-b > .i-en{display:none}
html[data-lang="en"] .i18n > .i-zh,
html[data-lang="en"] .i18n-b > .i-zh{display:none}
html[data-lang="en"] .i18n > .i-en{display:inline}
html[data-lang="en"] .i18n-b > .i-en{display:block}

/* ---- 21.3 英文版「根本不出现」的东西（项目负责人口径：不是翻译，是不出现）----
   理由：英文版是**给受访机构看的对外形态** ⇒ 认领（内部协作）、考察价值与真正的卡点
   （内部判断口径）都不该出现在这一面。 */
html[data-lang="en"] [data-zh-only],   /* ★ app.js 的 zhOnly() 打的标：考察价值 / 真正的卡点 */
html[data-lang="en"] #claimStat,       /* 机构页页头的认领进度 */
html[data-lang="en"] .claim-btn,       /* 卡片上的「认领 / 改认领」 */
html[data-lang="en"] .claim-pick,      /* 选人面板 */
html[data-lang="en"] .ic-foot,         /* 卡片底部：认领状态 + 认领按钮（英文版整条不存在） */
html[data-lang="en"] .owner-line,      /* 详情页「访问主理人」一行 */
html[data-lang="en"] .vt-edit,         /* ★ 第二批次：访问时间的「设置」入口（管理仅中文版） */
html[data-lang="en"] .vt-pick,         /* ★ 同上面板：中文态开着面板再切英文时一并摘掉 */
html[data-lang="en"] .conf-badge,      /* 「内部」徽标：对外形态不出现内部标记 */
html[data-lang="en"] .g-name > span,   /* 嘉宾卡副名：英文版主名位已经是 nameEn，再挂一行是重复 */
html[data-lang="en"] .ic-en,           /* 机构卡副名：同上 */
html[data-lang="en"] .star,            /* ★ 星章：JS 已不产出节点，这条只作 CSS 保险（验收判据是 DOM，不是可见性） */
html[data-lang="en"] details.g-en      /* 「English 原文」折叠块：英文版正文本身就是英文，这块是冗余 */
{display:none !important}
/* ★ 2026-10-17 复核修正：「已认领」的金环也属**内部状态**，英文面（给受访机构看的对外形态）
   不该露出"这家已经有人认领了"。只摘金环、保留卡片原有的 --sh-1 层级，不动尺寸/圆角/内容 ——
   英文卡的观感与"未认领"一致，不产生第二种卡片外观。
   ⚠ **必须把 --line 内描边一起写回来**：box-shadow 是整体覆盖，只写 --sh-1 会把卡片的 1px 描边也抹掉，
     已认领卡看起来就比未认领卡少一圈边——那就不是摘金环而是换了一种卡片。实测两者现在逐字一致。
   ⚠ 只处理 data-claimed="1"：data-claimed="2"（选择中）在英文态本来就出不来（.claim-pick 整块被摘）。 */
html[data-lang="en"] .inst-card[data-claimed="1"]{box-shadow:var(--sh-1),inset 0 0 0 1px var(--line)}
/* ⚠ 有意**不**在此名单里的：.pend-badge（备选机构徽标）
   —— 这份名单是"内部/对外"的口径差；备选状态是对外形态也必须照实说明的事实，故保留。 */

/* ===========================================================================
   22. 行程安排（多卡片区）· 日详情（v3.4 · 2026-10-15 项目负责人要求）
   ---------------------------------------------------------------------------
   位置：行程主题页 · 活动简介卡与「行程简介」段之间。
   结构：#dayList（flex 纵列）> 每张 .day-card（长条卡）：
         主标题＝核心主题，小字＝「10.19 · 第 1 天 · 马德里」，右侧 › 。
   交互：整卡可点（role="button" + tabindex="0"）→ 走既有 #sheet 抽屉显示当日详情。
   令牌：全部取既有 --fs-* / --r-* / --sh-* / --gold-* / --line*；本区块**不新增任何颜色**。
   =========================================================================== */
#dayList{display:flex;flex-direction:column;gap:10px}
/* 长条卡：视觉高度 ≈ 主标题 1.45 行 + 小字 + 上下 14px ⇒ 桌面 74px / 320px 下更高，远超 44px 触控下限 */
.day-card{
  display:flex;align-items:center;gap:12px;padding:14px 15px;
  background:var(--bg-elev);border-radius:var(--r-card);cursor:pointer;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
  transition:box-shadow .2s,transform .12s;
}
.day-card:active{transform:scale(.99)}
.day-card:hover{box-shadow:var(--sh-2),inset 0 0 0 1px var(--gold-line)}
.dc-main{flex:1;min-width:0}
.dc-theme{
  font-size:var(--fs-body);font-weight:600;line-height:1.45;
  letter-spacing:.005em;color:var(--ink-strong);overflow-wrap:break-word;
}
.dc-meta{
  margin-top:6px;font-size:var(--fs-tiny);line-height:1.6;letter-spacing:.02em;
  font-variant-numeric:tabular-nums;color:var(--text-2);
}
.dc-go{flex:none;font-size:var(--fs-lead);line-height:1;color:var(--text-2)}

/* ---- 日详情：时间轴 ----
   ★ 320px 下先用纵向排布（时间在上、内容在下），把整行宽度让给正文 ——
     若改成"左时间列 + 右内容列"的 grid，'10:00–13:00' 需 76px，正文只剩 154px，读不动。 */
.tl{list-style:none;margin:0;padding:0}
.tl-item{position:relative;padding:0 0 16px 14px;border-left:1px solid var(--gold-line)}
.tl-item:last-child{padding-bottom:0}
/* 金点＝时间轴节点（与 .meter 首格金点、品牌行金点同族；每日 ≤5 颗，属"点睛"额度内） */
.tl-item::before{
  content:"";position:absolute;left:-3.5px;top:.5em;
  width:6px;height:6px;border-radius:var(--r-pill);background:var(--gold);
}
.tl-time{
  display:block;font:600 var(--fs-sec)/1.5 var(--num);
  font-variant-numeric:tabular-nums;letter-spacing:.01em;color:var(--ink-strong);
}
.tl-t{
  margin:5px 0 0;font-size:var(--fs-body);font-weight:600;line-height:1.55;
  color:var(--ink-strong);overflow-wrap:break-word;
}
.tl-rows{display:grid;gap:5px;margin-top:7px}
.tl-row{display:grid;grid-template-columns:38px 1fr;gap:8px;font-size:var(--fs-tiny);line-height:1.7}
.tl-row i{font-style:normal;color:var(--text-2)}
.tl-row span{min-width:0;color:var(--text);overflow-wrap:break-word;word-break:break-word}

/* ---- 日详情：当天机构（可点进机构详情）---- */
.day-inst{display:flex;flex-direction:column;gap:8px}
.day-inst-btn{
  display:flex;align-items:center;gap:8px;width:100%;min-height:48px;
  padding:12px 14px;border:0;border-radius:var(--r-btn);cursor:pointer;text-align:left;
  background:var(--bg-elev);color:var(--ink-strong);font-family:inherit;
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line);
  transition:box-shadow .2s,transform .1s;
}
.day-inst-btn:active{transform:scale(.99)}
.di-n{flex:1;min-width:0;font-size:var(--fs-body);font-weight:600;overflow-wrap:break-word}
.di-go{flex:none;font-size:var(--fs-lead);line-height:1;color:var(--text-2)}
/* ---- 无档案的当天机构：**纯文本**，不是按钮（第二批次）----
   机构名单回到 11 家后，日程里大多数机构没有档案 —— 这些不能做成"看起来能点"的东西。
   与 .day-inst-btn 拉开差距的四个维度：无描边 / 无底色 / 小一号字(--fs-sec) / 次级色(--text-2)，
   并且刻意**不给 44px 热区**：它没有交互，给了反而会被当成控件。 */
.day-inst-plain{
  display:block;padding:2px;
  font-size:var(--fs-sec);color:var(--text-2);overflow-wrap:break-word;
}
.day-hero{height:196px}

/* ===========================================================================
   23. 访问机构页：正式 / 备选（待定）两组（v3.4）
   ---------------------------------------------------------------------------
   ⚠ 2026-10-15 第二批次：项目负责人要求**回到单一列表** ⇒ 分组已撤销，
     app.js 不再产出 .inst-group / .grp-note / .pend-badge 任何节点。
     下面这几条规则**刻意保留**（评审口径：CSS 可留），
     代价是几十字节的死规则，收益是万一要回滚分组不用重写样式。
     注意 .inst-card[data-status="pending"] 的降档描边也只对 pending 生效 —— 现在没有 pending。
   =========================================================================== */
.inst-group .sec{margin:2px 2px 12px}
.inst-group + .inst-group{margin-top:26px}
.grp-note{margin:0 2px 12px}
.inst-card[data-status="pending"][data-claimed="0"]{
  box-shadow:var(--sh-1),inset 0 0 0 1px var(--line-2);
}

/* ===========================================================================
   24. 图片兜底：排版占位（v3.4 · 本轮硬要求）
   ---------------------------------------------------------------------------
   问题：本轮**部分**机构 / 嘉宾没有真实图片（30 家机构里只有 11 家有头图、
        嘉宾头像也有缺），缺失时不能出现破图、空灰块或 alt 文字乱飞。
   做法（"底层铺占位 + 出错隐藏"，不改布局、不依赖图片是否就位）：
     ① 小图容器（.ic-thumb 缩略图 / .g-av 头像）内在图片**下面**先铺一层排版占位：
        缩略图用名称前 2 字（拉丁名取首词前 2 个字母），头像沿用既有 .g-av-fb 姓氏方块；
     ② 所有内容图 alt 一律 ""（装饰性，语义由相邻文字承载）⇒ 不会出现 alt 文字；
     ③ app.js 的 onImgError（捕获阶段）在图片加载失败时把 <img> 设 display:none ⇒
        底层占位自然透出；缩略图另有"先换原图、再占位"两级回退（onThumbError）；
     ④ 容器尺寸固定 ⇒ 隐藏 img 不会引起任何回流跳动。
   大图（机构头图 / 日详情城市图）单独处理：它上方压着白字标题(.cap)，占位文字若与标题同层
   会撞成"叠字"。所以大图走 .img-missing：
     ⑤ 图片失败 → 隐藏 img 并给 .hero 加 .img-missing ⇒ 去掉遮罩、底色换墨（--deep）、
        占位改浅色小字压在左上，标题留在下方 —— 白字标题仍稳稳 ≥4.5:1，读起来是一张
        "墨底铅字封面"，不是坏图。
   图层：容器 isolation:isolate 收口，img(1) 压在占位(0) 上、遮罩(2)/文字(3) 压在图上
        —— 与改造前的层序完全一致（原来 img 是静态流内元素、遮罩与文字是绝对定位）。
   =========================================================================== */
.ph-fb{
  position:absolute;inset:0;z-index:0;
  display:grid;place-items:center;padding:8px;overflow:hidden;
  text-align:center;background:var(--bg-sunken);
  font-size:var(--fs-sec);font-weight:600;letter-spacing:.06em;line-height:1.4;
  color:var(--text-2);overflow-wrap:anywhere;
}
.ic-thumb .ph-fb{font-size:var(--fs-tiny);letter-spacing:.04em;padding:4px}
.hero{isolation:isolate}
.hero img{position:relative;z-index:1}
.hero .veil{z-index:2}
.hero .cap{z-index:3}
.ic-thumb{position:relative;isolation:isolate}
.ic-thumb img{position:relative;z-index:1}

/* 大图占位：默认不显示（只在容器 .img-missing 时出现，见上 §24 ⑤）
   ★ 2026-10-15 改：由「依赖祖先 .hero」改为「认 data-ph 自身」——
     onImgError 把 .img-missing 加在**图片自己的容器**上（.hero / .cover / 以后任何大图容器都行），
     所以下面这几条用 .img-missing 泛化选择器，而不是 .hero.img-missing：
     总报告封面 .cover 不是 .hero，原来那条选择器命中不了它 ⇒ 会漏出破图。 */
.ph-fb.ph-hero{display:none}
.img-missing{background:var(--deep)}
.img-missing img{display:none}          /* 双保险：即使 onerror 没跑到，破图图标也不可能出现 */
.img-missing .veil{display:none}
.img-missing .ph-fb.ph-hero{
  display:grid;background:none;
  align-content:start;justify-items:start;text-align:left;padding:15px 18px;
  font-size:var(--fs-tiny);font-weight:600;letter-spacing:.18em;
  color:var(--on-deep);
}
/* 大图上还有一处「内部」/「备选」徽标（.hero-meta），墨底上换浅色口径与 .inst-hero 一致 */
.img-missing .conf-badge,
.img-missing .pend-badge{
  color:var(--on-deep);box-shadow:inset 0 0 0 1px var(--gold-soft);
}
/* .cover（总报告封面）补一份与 .hero 完全同款的图层序 —— 它原先只靠 DOM 顺序压层，
   而占位层是绝对定位兄弟节点（z-index:0）会盖到 in-flow 的图片上，必须显式定层：
   图片(1) 压在占位(0) 之上、遮罩(2) 压在图上、文字(3) 压在最上面。
   相对顺序与改造前一致（图 < 遮罩 < 文字），所以现有视觉零变化。 */
.cover{isolation:isolate}
.cover img{position:relative;z-index:1}
.cover .veil{z-index:2}
.cover .in{z-index:3}


/* ===========================================================================
   28. 手册同步 · 增量组件（2026-10-17 · 依 docs/37 §2 A–D + §7 决策记录）
   ---------------------------------------------------------------------------
   每一组都是"往既有语言里加一句"，不新造颜色 / 圆角 / 阴影档位：
     A 星章 .star            —— 墨底金章（与 .topbar .logo / .hero .eb / .cp-tick.on 同族）
     C 认领多选 .claim-pick  —— 只补计数与行内二次确认两块
     D 职衔标 .gr            —— 三档：金面 / 灰面 / 无面+括号
   =========================================================================== */

/* ---- 28.1 A 星章（规格 §A.3 原样）----
   墨底不可省：金星直接落纸面只有 1.58:1（docs/37 §1.2），任何"金字/金图标 + 浅底"都过不了对比度。
   ★ 英文态**不产出节点**（app.js starHtml() 里 return ''），本文件末尾那条 display:none 只是保险。 */
.star{
  flex:none;display:inline-flex;align-items:center;gap:1.5px;
  height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--deep);
  box-shadow:inset 0 0 0 1px var(--gold-soft);
}
.star svg{display:block;width:9px;height:9px;fill:var(--gold)}
.star[data-lv="2"]{gap:1.5px;box-shadow:inset 0 0 0 1px var(--gold-soft)}
.star[data-lv="2"] svg{width:9.5px;height:9.5px}
.star[data-lv="3"]{gap:2px;box-shadow:inset 0 0 0 1px var(--gold-line)}
.star[data-lv="3"] svg{width:10px;height:10px}
.star[data-lv="1"]{gap:0;box-shadow:inset 0 0 0 1px var(--gold-hair)}


/* ---- 28.3 C 认领多选：计数 + 行内二次确认（规格 §C.4）----
   .cp-count 会被既有 .cp-head span{font-size/color} 命中 ⇒ 这里只补右对齐与等宽数字，
   **不再改字号**（守 7 档字阶）。 */
.cp-count{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--text-2)}
.cp-confirm{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:11px;padding:10px 12px;border-radius:var(--r-btn);
  background:var(--bg-elev);box-shadow:inset 0 0 0 1px var(--line-2);
}
.cp-confirm-t{flex:1 1 100%;font-size:var(--fs-tiny);line-height:1.6;color:var(--text)}
.cp-confirm .btn{height:44px;min-width:0}
.cp-confirm .btn.ghost{flex:0 0 auto;padding:0 16px}
.cp-confirm .btn.primary{flex:1}

/* ---- 28.4 D 访团职衔标（规格 §D.2）----
   ★ 必须是 <i> 承载：§21.3 有 `html[data-lang="en"] .g-name > span{display:none!important}`，
     用 span 会让职衔标在英文态整块消失。
   三档落差靠"有没有面 → 面是金还是灰 → 有没有括号"，**不动字号**（恒为 --fs-cap）。 */
.gr{
  flex:none;align-self:center;
  display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--r-pill);
  font-size:var(--fs-cap);font-weight:600;line-height:1.6;letter-spacing:.06em;
  font-style:normal;
}
.gr--lead{background:var(--gold-veil);color:var(--ink-strong);box-shadow:inset 0 0 0 1px var(--gold-soft)}
.gr--duty{background:var(--n-100);color:var(--text-2)}
.gr--member{background:none;padding:0;color:var(--text-2);font-weight:500;letter-spacing:.02em}
/* 防御：万一职衔标内部出现 .i18n 双节点（<span>），既有的 .g-name span 规则会改它的字号/颜色。
   当前渲染层输出的是纯文本、不产双节点，这条是给将来留的一行保险（同特异度、写在后面即覆盖）。 */
.g-name .gr > span{font-size:inherit;color:inherit;letter-spacing:inherit}

/* ---- 28.5 详情 · 合作小切口（基线清单 #8）----
   放在「访问问题清单」卡片**末尾**的一条收尾行：金点 + 小标 + 正文。
   不新开分区、不新造卡片 —— 只借 .q-item 的上下分隔节奏（末条 .q-item 的 border-bottom
   在加入本行后自动回到"有"，正好充当分隔线，所以这里不再加 border-top，避免双线）。 */
.nx-item{padding:12px 0 0}
.nx-t{
  display:flex;align-items:center;gap:6px;
  font-size:var(--fs-cap);font-weight:600;letter-spacing:.11em;color:var(--text-2);
  margin-bottom:6px;
}
.nx-t::before{content:"";flex:none;width:5px;height:5px;border-radius:var(--r-pill);background:var(--gold)}
.nx-txt{margin:0;font-size:var(--fs-body);line-height:1.76;color:var(--text)}