/* ============================================================
   RELATIONS PATCH · 三者关系图模块（单卡片 Tab 切换版）
   适配目标：design-research-site v2（暖色编辑风格 / 浅色 Framework 区）
   交互模式：与站点论文实例区一致——Tab + 单面板就地切换，
             页面视角不动，仅 180ms 纯 opacity 过渡。
   命名空间：全部规则限定在 .rel-module / .framework-section 作用域内，
             不覆盖站点任何既有规则，可安全追加部署。
   依赖站点变量：--accent --olive --sand --line --shadow（style.css 已定义）
   依赖脚本：js/relations.js（Tab 切换逻辑）
   ============================================================ */

/* ---------- 模块容器 ---------- */
.rel-module { margin:0; }
.rel-module svg { display:block; width:100%; min-width:820px; height:auto; }
.rel-diagram { overflow-x:auto; }
.rel-diagram:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.rel-scroll-hint { display:none; margin:16px 18px 0; color:var(--muted); font-size:12px; }
.rel-module svg .rl-on-accent { fill:#fff; }

/* ---------- 卡片（与站点 framework-card 同一语言） ---------- */
.rel-card {
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}

/* ---------- Tab 栏（三视图切换器） ---------- */
.rel-tabs {
  display:grid; grid-template-columns:repeat(3,1fr);
  border-bottom:1px solid var(--line);
}
.rel-tab {
  position:relative;
  padding:18px 22px 16px;
  background:transparent;
  border:0; border-right:1px solid var(--line);
  text-align:left;
  transition:background .2s ease;
}
.rel-tab:last-child { border-right:0; }
.rel-tab:hover { background:rgba(154,79,70,.05); }
.rel-tab:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.rel-tab-num {
  display:block; margin-bottom:6px;
  font-size:9px; font-weight:700; letter-spacing:.14em;
  color:#928f88;
  transition:color .2s ease;
}
.rel-tab strong {
  display:block;
  font-family:Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  font-weight:500; font-size:19px; letter-spacing:-.01em;
  color:var(--ink, #141414);
}
.rel-tab em {
  display:block; margin-top:3px;
  font-style:normal; font-size:11px; color:#8b877f;
}
/* 选中态：底部强调线 + 数字标变 accent（选中面板与 Tab 视觉连接） */
.rel-tab.selected { background:rgba(255,255,255,.65); }
.rel-tab.selected::after {
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--accent);
}
.rel-tab.selected .rel-tab-num { color:var(--accent); }

/* ---------- 舞台与面板（就地切换，无位移） ---------- */
.rel-stage { padding:28px 30px 26px; }
.rel-panel { display:none; }
.rel-panel.active { display:block; animation:relFade .18s ease-out; }
@keyframes relFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
  .rel-panel.active { animation:none; }
}

/* ---------- 面板头部：标题 + 描述（层级对齐站点规范） ---------- */
.rel-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(260px,.45fr);
  gap:24px; align-items:end;
  margin-bottom:18px;
}
.rel-head h3 {
  margin:0;
  font-family:Georgia, "Times New Roman", "Songti SC", "STSong", serif;
  font-weight:500;
  font-size:clamp(24px, 3vw, 34px);
  line-height:1.16; letter-spacing:-.02em;
}
.rel-head h3 span { color:var(--accent); }
.rel-desc { margin:0; color:#6e6c66; font-size:14px; line-height:1.7; }

/* ---------- 阅读提示条（随面板切换） ---------- */
.rel-caption {
  margin:20px 0 0;
  border-top:1px solid var(--line);
  padding:15px 2px 0;
  color:#6e6c66; font-size:13px; line-height:1.7;
}
.rel-caption strong { color:var(--ink); }

/* ---------- 与下方 logic-notes 的衔接修复 ----------
   原 logic-notes 以 border-top:0 贴合旧 graph 卡片；
   模块化后恢复为独立条带。 */
.framework-section .logic-notes {
  margin-top:34px;
  border-top:1px solid var(--line);
}

/* ---------- SVG 文本类（token 化配色，scoped） ---------- */
.rel-module .rl-label { font-family:Inter, "SF Pro Display", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; fill:#141414; }
.rel-module .rl-serif { font-family:Georgia, "Times New Roman", "Songti SC", "STSong", serif; fill:#141414; }
.rel-module .rl-muted  { fill:#756f68; }
.rel-module .rl-accent { fill:var(--accent); }
.rel-module .rl-small { font-size:13px; }
.rel-module .rl-mini  { font-size:11px; }
.rel-module .rl-mid   { font-size:16px; }
.rel-module .rl-big   { font-size:25px; font-weight:700; }

/* ---------- 响应式（对齐站点断点 980 / 620） ---------- */
@media (max-width:980px) {
  .rel-scroll-hint { display:block; }
  .rel-head { grid-template-columns:1fr; gap:10px; align-items:start; }
}
@media (max-width:620px) {
  .rel-tabs { grid-template-columns:1fr; }
  .rel-tab { border-right:0; border-bottom:1px solid var(--line); padding:14px 18px 13px; }
  .rel-tab:last-child { border-bottom:0; }
  .rel-tab.selected::after { left:0; right:auto; top:0; bottom:0; width:2px; height:auto; }
  .rel-stage { padding:20px 14px 16px; }
}