/* ============ 视图七：主题透镜 ============
   纸面古典风格：复用 base.css 变量（--paper/--ink/--vermilion/--gold/--line/--serif）。 */

#lensRoot { animation: fadeUp .4s ease both; }

.lens-chips { margin-bottom: 16px; }
.lens-body { min-height: 320px; }
.lens-panel { animation: fadeUp .35s ease both; }

/* 顶部「这个镜头看什么」导读 */
.lens-lead {
  font-size: 13.5px; line-height: 1.85; color: var(--ink-soft);
  background: rgba(168, 134, 44, .07);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 11px 15px; margin-bottom: 16px;
}
.lens-lead .ll-eye {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  color: var(--gold); margin-bottom: 4px;
}

.lens-empty {
  text-align: center; color: var(--ink-faint); font-size: 14px; letter-spacing: .1em;
  padding: 70px 20px; border: 1px dashed var(--line); border-radius: 10px;
  background: rgba(255, 252, 242, .4);
}

.lens-fignote {
  margin-top: 10px; font-size: 11.5px; color: var(--ink-faint);
  letter-spacing: .03em; line-height: 1.7;
}
.lens-fignote .lt-dot { margin: 0 2px; }

/* 镜头内二级 chip 行 / 图例 */
.lens-chiprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.lens-legend { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .04em; margin-left: 6px; display: inline-flex; align-items: center; }
.lens-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; vertical-align: middle; margin: 0 4px; }

/* ———— Canvas 通用容器 ———— */
.lens-streamwrap,
.lens-canvaswrap {
  position: relative; width: 100%; height: 380px;
  background: rgba(255, 252, 242, .55);
  border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden;
}
.lens-canvaswrap { height: 320px; }
.lens-streamwrap canvas,
.lens-canvaswrap canvas { display: block; width: 100%; height: 100%; }

/* hover 竖线（stream） */
.lens-vline {
  position: absolute; top: 6px; bottom: 22px; width: 1px;
  background: rgba(43, 38, 32, .45); display: none; pointer-events: none;
}

/* hover tooltip（各 canvas 镜头共用） */
.lens-tip {
  position: absolute; display: none; pointer-events: none; z-index: 5;
  min-width: 132px; max-width: 230px;
  background: rgba(247, 240, 224, .97); border: 1px solid var(--ink-faint);
  border-radius: 7px; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  box-shadow: 0 3px 12px rgba(60, 45, 20, .22); color: var(--ink);
}
.lens-tip b { display: block; font-size: 12.5px; color: var(--vermilion); letter-spacing: .05em; margin-bottom: 4px; }
.lens-tip .lt-row { display: flex; align-items: center; gap: 5px; padding: 1px 0; }
.lens-tip .lt-row i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.lens-tip .lt-row span { margin-left: auto; padding-left: 10px; font-family: Georgia, var(--serif); color: var(--ink-soft); font-weight: 700; }

/* ———— 镜头 4：发明谱系（六泳道横向时间带） ———— */
.lt-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 252, 242, .5); padding: 6px 0 10px; cursor: grab; }
.lt-scroll.dragging { cursor: grabbing; user-select: none; }
.lt-scroll.dragging .lt-card { pointer-events: none; }
.lt-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.lt-toolbar .label { font-size: 11.5px; color: var(--ink-faint); letter-spacing: .18em; }
.lt-hint { font-size: 12px; color: var(--ink-soft); }
.lt-inner { position: relative; min-width: 1040px; padding: 0 14px; }

.lt-ruler { position: relative; height: 20px; margin: 4px 0 8px 89px; border-bottom: 1px solid var(--line); } /* 89px = 泳道标签 88px + 右边框 1px，与 .lt-track 起点同基准，刻度与卡片共用同一 x 比例尺 */
.lt-tick { position: absolute; transform: translateX(-50%); font-size: 10px; color: var(--ink-faint); font-family: Georgia, serif; top: 3px; }

.lt-lane { position: relative; display: flex; align-items: stretch; min-height: 50px; border-top: 1px dashed rgba(168, 134, 44, .28); }
.lt-lane:first-of-type { border-top: none; }
.lt-lanelabel {
  flex: none; width: 88px; display: flex; align-items: center;
  font-size: 12px; font-weight: 700; color: var(--ink-soft); letter-spacing: .04em;
  padding: 0 8px 0 2px; border-right: 1px solid var(--line);
  /* 横向滚动/缩放时钉在左侧（同平行时间轴 .tl-rowlabel），卡片从其下方滑过 */
  position: sticky; left: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--paper) 82%, transparent);
}
.lt-track { position: relative; flex: 1; min-height: 50px; }

.lt-card {
  position: absolute; top: 7px; transform: translateX(-2px);
  display: inline-flex; flex-direction: column; gap: 1px; text-align: left;
  font-family: var(--serif); cursor: pointer;
  background: rgba(255, 252, 242, .95); border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 8px; max-width: 150px; transition: border-color .16s, box-shadow .16s; z-index: 1;
}
.lt-card:hover { border-color: var(--vermilion); box-shadow: 0 2px 8px rgba(140, 36, 24, .18); z-index: 3; transform: translateX(-2px) translateY(-1px); }
.lt-card .lt-cy { font-size: 9.5px; color: var(--ink-faint); font-family: Georgia, serif; }
.lt-card .lt-cn { font-size: 12px; color: var(--ink); white-space: nowrap; }
.lt-card.cn .lt-cn { color: var(--vermilion); }
.lt-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--vermilion); margin-right: 3px; vertical-align: middle; }

/* ———— 镜头 5：制度对照（双栏） ———— */
.ls-block {
  background: rgba(255, 252, 242, .6); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px 18px 18px; margin-bottom: 18px;
}
.ls-theme {
  font-size: 17px; font-weight: 900; letter-spacing: .06em; color: var(--ink);
  text-align: center; margin-bottom: 14px;
  position: relative;
}
.ls-theme::after { content: ''; display: block; width: 46px; height: 3px; background: var(--vermilion); border-radius: 2px; margin: 8px auto 0; }
.ls-twocol { position: relative; display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0; }
.ls-divider { background: linear-gradient(var(--line), rgba(168, 134, 44, .5), var(--line)); width: 1px; }
.ls-col { padding: 0 16px; }
.ls-col.cn { padding-left: 4px; }
.ls-col.west { padding-right: 4px; }
.ls-colh {
  font-size: 13.5px; font-weight: 700; letter-spacing: .05em; margin-bottom: 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.ls-col.cn .ls-colh { color: var(--c-cn); }
.ls-col.west .ls-colh { color: var(--c-eu); }

.ls-step { display: flex; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.ls-step:last-child { border-bottom: none; }
.ls-badge {
  flex: none; align-self: flex-start; font-family: Georgia, var(--serif); font-size: 11px; font-weight: 700;
  letter-spacing: .02em; color: var(--ink-soft); cursor: pointer;
  background: rgba(168, 134, 44, .1); border: 1px solid var(--line); border-radius: 99px;
  padding: 2px 9px; transition: all .16s; white-space: nowrap;
}
.ls-badge:hover { background: var(--vermilion); color: #f6efe0; border-color: var(--vermilion); }
.ls-stepbody b { display: block; font-size: 13.5px; color: var(--ink); letter-spacing: .03em; margin-bottom: 2px; }
.ls-stepbody p { font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }

.ls-insight { margin-top: 16px; }   /* 复用 base/views 的 .chap-key 划重点样式 */

/* ———— 镜头 6：信仰版图（介绍卡） ———— */
.lf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); gap: 14px; margin-bottom: 18px; }
.lf-card {
  background: rgba(255, 252, 242, .7); border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: 10px; padding: 13px 15px 15px;
  transition: transform .18s, box-shadow .18s;
}
.lf-card:hover { transform: translateY(-2px); box-shadow: 0 4px 14px rgba(60, 45, 20, .12); }
.lf-h { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 900; letter-spacing: .05em; margin-bottom: 8px; }
.lf-sw { width: 16px; height: 16px; border-radius: 4px; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.lf-card p { font-size: 13px; line-height: 1.85; color: var(--ink-soft); text-align: justify; }
.lf-cta { text-align: center; margin: 6px 0 4px; }

/* ———— 响应式 ———— */
@media (max-width: 760px) {
  .lens-streamwrap { height: 300px; }
  .lens-canvaswrap { height: 280px; }
  .ls-col { padding: 0 8px; }
  .lf-grid { grid-template-columns: 1fr; }
}