/* ============================================================
   FIELD NOTES / 交互式个人实验室 — 方案 C
   制图桌：灰纸 + 墨 + 氧化红 + 制图蓝
   直角、1px 线、坐标标注、状态戳；不是仪表盘，不是卡片墙
   ============================================================ */

@font-face{
  font-family:'Archivo';
  src:url('fonts/Archivo-Variable.ttf') format('truetype');
  font-weight:100 900;
  font-stretch:62.5% 125%;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('fonts/IBMPlexMono-Medium.ttf') format('truetype');
  font-weight:500 700;
  font-style:normal;
  font-display:swap;
}

:root{
  --paper:#E6E1D5;
  --paper-2:#DED8C9;
  --ink:#1A1A16;
  --muted:#5E574A;
  --rule:rgba(26,26,22,.22);
  --rule-strong:rgba(26,26,22,.5);
  --red:#AF3A20;
  --blue:#24496B;
  --stamp:rgba(175,58,32,.8);
  --grid:rgba(26,26,22,.06);
  --sans:'Archivo','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --cjk:'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --mono:'IBM Plex Mono','PingFang SC',monospace;
  --hand:'Kaiti SC','STKaiti','Songti SC',cursive;
  --toolbar-h:86px;
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}

html,body{height:100%}
html{background:var(--paper-2)}
body{
  margin:0;
  background:var(--paper-2);
  color:var(--ink);
  font-family:var(--cjk);
  font-size:14px;
  line-height:1.6;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* 静止纸颗粒（全页，不参与交互） */
body::after{
  content:'';
  position:fixed;
  inset:0;
  z-index:8;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

button{font:inherit;color:inherit}
a{color:inherit}
p{margin:0}

.skip-link{
  position:fixed;
  top:-60px;left:12px;
  z-index:120;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  color:var(--ink);
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.08em;
  padding:10px 14px;
  text-decoration:none;
}
.skip-link:focus{top:10px}

:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ============ 顶部图纸框架：标题栏 ============ */
.chrome-top{position:fixed;inset:0 0 auto 0;z-index:25;pointer-events:none}
.chrome-top > *{pointer-events:auto}

.titleblock{
  position:fixed;
  left:20px;top:16px;
  width:352px;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  z-index:26;
}
.tb-line{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:5px 10px;
  border-bottom:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink);
  text-transform:uppercase;
}
.tb-line-1{color:var(--ink)}
.tb-line-1 span:first-child{font-family:'Archivo',var(--sans);font-weight:700;font-stretch:86%;letter-spacing:.13em;font-size:10.5px}
.tb-line-3{color:var(--muted);letter-spacing:.1em}
.tb-line-4{border-bottom:0;color:var(--muted);font-size:9.5px}
.tb-title{
  margin:0;
  padding:9px 10px 4px;
  font-family:var(--cjk);
  font-size:24px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.01em;
  border-bottom:1px solid var(--rule);
}
.is-embedded .tb-title{
  position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.tb-claim{
  padding:5px 10px 9px;
  font-family:var(--cjk);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
  border-bottom:1px solid var(--rule);
}

/* ============ 顶部图纸框架：图例 / 过滤 ============ */
.legend{
  position:fixed;
  right:20px;top:16px;
  transition:opacity .16s ease;
  width:432px;
  background:var(--paper);
  border:1px solid var(--rule-strong);
  z-index:26;
  padding:9px 11px 10px;
}
.guide-actions{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap}
.guide-start,.guide-details{
  align-items:center;gap:7px;min-height:44px;border:1px solid transparent;
  font-family:var(--cjk);font-size:12px;font-weight:600;cursor:pointer;
}
.guide-start{display:inline-flex;padding:0 12px;background:var(--red);color:#fff8ef}
.guide-start:hover{background:var(--ink)}
.guide-details:not([hidden]){display:inline-flex}
.guide-details{padding:0 8px;border-color:var(--rule-strong);background:var(--paper);color:var(--ink)}
.guide-details:hover{border-color:var(--red);color:var(--red)}
.legend-reference summary,.mobile-evidence summary{
  cursor:pointer;font-family:var(--cjk);font-size:11px;color:var(--muted);
  padding:7px 0 1px;
}
.legend-list{
  list-style:none;margin:0;padding:7px 0 6px;
  display:flex;flex-wrap:wrap;gap:3px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:.03em;color:var(--muted);
  border-bottom:1px solid var(--rule);
}
.legend-list li{display:flex;align-items:center;gap:5px;width:50%;padding:2px 0}
.sym{width:12px;height:12px;border:1px solid var(--ink);flex:0 0 auto;display:inline-block}
.sym-q{border-style:dashed;transform:rotate(45deg);width:10px;height:10px;margin:0 1px}
.sym-p{border-radius:50%}
.sym-m{border-left:3px solid var(--blue)}
.sym-e{width:12px;height:11px;clip-path:polygon(26% 0,74% 0,100% 50%,74% 100%,26% 100%,0 50%);border:0;background:var(--ink)}
.edge-sym{width:20px;height:1px;background:var(--ink);flex:0 0 auto;display:inline-block;position:relative;margin-right:2px}
.edge-sym-pm{background:repeating-linear-gradient(90deg,var(--blue) 0 4px,transparent 4px 7px)}
.edge-sym-pe{background:repeating-linear-gradient(90deg,var(--red) 0 1px,transparent 1px 4px)}

.filters{display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:7px 0 6px;border-bottom:1px solid var(--rule)}
.filters-label{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--muted);margin-right:2px}
.chip{
  border:1px solid var(--rule-strong);
  background:transparent;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.05em;
  padding:4px 9px;
  min-height:28px;
  cursor:pointer;
  color:var(--ink);
}
.chip:hover{background:var(--paper-2)}
.chip.is-active{background:var(--red);border-color:var(--red);color:var(--paper)}
.chip.is-active:hover{background:var(--red)}

.legend-foot{display:flex;align-items:center;gap:10px;padding-top:7px;flex-wrap:wrap}
.ev-toggle{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:transparent;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink);
  min-height:32px;padding:2px 0;
}
.toggle-box{
  width:26px;height:13px;border:1px solid var(--rule-strong);
  position:relative;background:var(--paper-2);flex:0 0 auto;
}
.toggle-box::after{
  content:'';position:absolute;left:2px;top:2px;width:7px;height:7px;
  background:var(--muted);transition:transform .16s ease, background-color .16s ease;
}
.ev-toggle[aria-pressed="true"] .toggle-box::after{transform:translateX(12px);background:var(--red)}
.ev-toggle-code{font-size:9.5px;color:var(--muted);letter-spacing:.06em}
.ev-toggle:hover .toggle-box{border-color:var(--ink)}
.ev-toggle:hover{color:var(--red)}
.legend-note{font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted)}

/* ============ 工作图 ============ */
.map{
  position:fixed;
  inset:0;
  overflow:hidden;
  background:var(--paper-2);
  touch-action:none;
  cursor:grab;
  -webkit-user-select:none;
  user-select:none;
}
.map.is-panning{cursor:grabbing}
.map.is-panning *{user-select:none;-webkit-user-select:none}

.map-world{
  position:absolute;
  left:0;top:0;
  width:1600px;
  height:1000px;
  transform-origin:0 0;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,transparent 0 31px,var(--grid) 31px 32px),
    repeating-linear-gradient(90deg,transparent 0 31px,var(--grid) 31px 32px),
    repeating-linear-gradient(0deg,transparent 0 159px,rgba(26,26,22,.085) 159px 160px),
    repeating-linear-gradient(90deg,transparent 0 159px,rgba(26,26,22,.085) 159px 160px);
  will-change:transform;
}
.map-world.is-programmatic{transition:transform .26s cubic-bezier(.2,.7,.3,1)}

/* 图纸边缘：边框 + 标尺 + 套准记号 */
.sheet-edge{position:absolute;inset:0;border:1px solid rgba(26,26,22,.34);pointer-events:none;z-index:4}
.rul{position:absolute;pointer-events:none;color:var(--muted);font-family:var(--mono);font-size:9.5px;letter-spacing:.02em}
.rul-top{left:0;right:0;top:0;height:13px;background:repeating-linear-gradient(90deg,rgba(26,26,22,.34) 0 1px,transparent 1px 32px);border-bottom:1px solid rgba(26,26,22,.24)}
.rul-top span{position:absolute;left:var(--lx);top:2px;transform:translateX(1px)}
.rul-left{top:0;bottom:0;left:0;width:13px;background:repeating-linear-gradient(180deg,rgba(26,26,22,.34) 0 1px,transparent 1px 25px);border-right:1px solid rgba(26,26,22,.24)}
.rul-left span{position:absolute;top:var(--ly);left:2px;writing-mode:vertical-rl;font-size:9.5px}
.reg{position:absolute;width:11px;height:11px;border-left:1px solid rgba(26,26,22,.55);border-top:1px solid rgba(26,26,22,.55)}
.reg-tr{right:8px;top:8px;transform:rotate(90deg)}
.reg-bl{left:8px;bottom:8px;transform:rotate(-90deg)}
.reg-br{right:8px;bottom:8px;transform:rotate(180deg)}
.reg-tl{left:8px;top:8px}
.sheet-corner-note{
  position:absolute;right:16px;bottom:13px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;color:var(--muted);
}

.world-marks{position:absolute;inset:0;z-index:0;pointer-events:none}

.edges{position:absolute;left:0;top:0;width:1600px;height:1000px;z-index:1;overflow:visible}
.edge{fill:none;stroke-linecap:butt;stroke-linejoin:miter}
.edge-qp{stroke:var(--ink);stroke-opacity:.5;stroke-width:1}
.edge-pm{stroke:var(--blue);stroke-opacity:.58;stroke-width:1;stroke-dasharray:5 4}
.edge-pe{stroke:var(--red);stroke-opacity:.44;stroke-width:1;stroke-dasharray:1.5 3.5}
.edge-chain{stroke:var(--blue);stroke-opacity:.8;stroke-width:1.25}

.edge.is-adjacent{stroke:var(--red);stroke-opacity:1;stroke-width:2}
.edge.is-dimmed{stroke-opacity:.13}
.edge.is-filtered{stroke-opacity:.1}
.edge.is-traced{stroke:var(--red);stroke-opacity:1;stroke-width:2.25}
.map.is-tracing .edge:not(.is-route){stroke-opacity:.18}
.map.is-tracing .signal,.map.is-tracing .signal-blue{opacity:0}
.map.is-tracing .next-note{opacity:.18}
.trace-stroke{
  fill:none;stroke:#b65a38;stroke-width:4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:trace-stroke .52s ease-out forwards;
}
@keyframes trace-stroke{to{stroke-dashoffset:0}}

.signal{fill:var(--red)}
.signal-blue{fill:var(--blue)}

/* 图纸注释 */
.annotations{position:absolute;inset:0;z-index:2;pointer-events:none}
.claim{position:absolute;left:var(--x);top:var(--y);width:480px;color:var(--ink)}
.claim-rule{display:block;width:26px;height:2px;background:var(--red);margin-bottom:6px}
.claim-en{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
.claim-cn{font-size:16px;font-weight:600;line-height:1.45;letter-spacing:.01em}
.claim-id{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);margin-top:6px}
.claim-guide{font-family:var(--cjk);font-size:11.5px;font-weight:500;line-height:1.45;color:var(--ink);margin-top:7px;padding-top:7px;border-top:1px solid var(--rule)}
.claim-guide b{color:var(--red);font-weight:600}
.start-leader{position:absolute;left:var(--x);top:var(--y);width:246px;height:50px;overflow:visible;pointer-events:none}

.ev-axis{
  position:absolute;left:var(--x);top:var(--y);
  width:592px;height:1px;
  background:var(--rule-strong);
}
.ev-axis::before{
  content:'';position:absolute;left:0;right:0;top:-3px;height:6px;
  background:repeating-linear-gradient(90deg,rgba(26,26,22,.4) 0 1px,transparent 1px 25px);
}

.margin-note{
  position:absolute;left:var(--x);top:var(--y);
  width:330px;
  background:var(--paper);
  border-left:1px solid var(--rule-strong);
  padding:7px 10px 8px 12px;
}
.mn-head{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--red);
  text-transform:uppercase;margin:0 0 5px;
}
.mn-body{font-size:14px;line-height:1.66;color:var(--ink);margin:0}
.mn-foot{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);margin:6px 0 0}
.rules-note{width:360px}
.rules-note .mn-body{font-size:14px;line-height:1.66;color:var(--ink)}

.group-label{
  position:absolute;left:var(--x);top:var(--y);
  display:flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--muted);
  background:var(--paper);padding:2px 6px 2px 0;white-space:nowrap;
}
.gl-rule{width:16px;height:1px;background:var(--rule-strong);display:inline-block}

.stamp{
  position:absolute;left:var(--x);top:var(--y);
  transform:rotate(var(--rot));
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  color:var(--red);
  border:1px solid var(--stamp);
  background:rgba(230,225,213,.92);
  padding:2px 6px;
  white-space:nowrap;
  text-transform:uppercase;
}
.hand-note{
  position:absolute;left:var(--x);top:var(--y);
  transform:rotate(var(--rot));
  font-family:var(--hand);
  font-size:14px;
  color:#4C473D;
  white-space:nowrap;
  letter-spacing:.02em;
}

/* ============ 节点 ============ */
.node-layer{position:absolute;inset:0;z-index:3}
.node{
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1px;
  margin:0;
  padding:0;
  border:1px solid var(--ink);
  background:var(--paper);
  color:var(--ink);
  font-family:var(--cjk);
  text-align:center;
  cursor:pointer;
  transition:opacity .22s ease, outline-color .12s ease, border-color .12s ease;
}
.node:hover{outline:1px solid rgba(36,73,107,.55);outline-offset:3px}
.node:focus-visible{outline:2px solid var(--red);outline-offset:4px;z-index:6}
.node-tag{
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.09em;
  color:var(--muted);
  line-height:1.2;
  text-transform:uppercase;
  white-space:nowrap;
}
.node-title{font-weight:600;line-height:1.28;letter-spacing:.005em}

/* 问题：虚线框 */
.node-question{
  border:1px dashed rgba(26,26,22,.72);
  background:rgba(230,225,213,.86);
  align-items:flex-start;
  justify-content:center;
  padding:0 12px;
  text-align:left;
}
.node-question .node-tag{display:flex;align-items:center;gap:6px;color:var(--red);font-size:9.5px}
.node-question .node-title{font-size:14px;font-weight:600}
.node-question .glyph{font-size:9.5px;color:var(--red);transform:rotate(0deg)}

/* 项目：圆 + 内圈虚线环 */
.node-project{
  border-radius:50%;
  padding:0 10px;
}
.node-project.is-route{border-color:var(--red)}
.node-project::before{
  content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(26,26,22,.25);pointer-events:none;
}
.node-project .node-tag{color:var(--red);font-size:9.5px}
.node-project .node-title{font-size:14px;line-height:1.24}
.node-project .node-sub{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.01em;color:var(--muted);
  margin-top:1px;max-width:92px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 方法：方框标签 */
.node-method{
  border:1px solid var(--ink);
  border-left:3px solid var(--blue);
  padding:0 10px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  background:var(--paper-2);
}
.node-method .node-tag{color:var(--blue);font-size:9.5px;letter-spacing:.03em;text-align:left;line-height:1.3;white-space:nowrap}
.node-method .node-title{font-size:14px;font-weight:600;letter-spacing:.015em;white-space:nowrap;line-height:1.3}
.node-method:hover{background:var(--paper)}

/* 证据：六边形戳 */
.node-evidence{
  border:0;
  background:transparent;
  padding:0;
}
.node-evidence svg{position:absolute;inset:0;width:100%;height:100%}
.node-evidence polygon{fill:var(--paper);stroke:var(--ink);stroke-width:1}
.node-evidence:hover polygon{stroke:var(--blue);stroke-width:1.5}
.node-evidence .ev-id{
  position:relative;
  font-family:'Archivo',var(--sans);
  font-weight:700;font-stretch:88%;
  font-size:16px;line-height:1;
  letter-spacing:.02em;
}
.node-evidence .ev-label{
  position:relative;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);
  line-height:1.2;
}

.node-coords{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--red);
  background:var(--paper);border:1px solid var(--rule);
  padding:1px 4px;white-space:nowrap;
  opacity:0;transition:opacity .12s ease;pointer-events:none;
}
.node:hover .node-coords,.node:focus-visible .node-coords{opacity:1}

.ev-badge{
  position:absolute;bottom:-21px;left:50%;transform:translateX(-50%);
  display:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;
  color:var(--red);
  background:var(--paper);border:1px solid var(--stamp);
  padding:1px 5px;white-space:nowrap;
  pointer-events:none;
}
body.is-evidence .node-project .ev-badge{display:block}
body.is-evidence .node-evidence polygon{stroke:var(--red);stroke-width:1.5}

/* 选中 / 过滤 / 路径追踪状态 */
.node.is-selected{outline:2px solid var(--red);outline-offset:4px;z-index:6}
.node.is-selected .node-title{color:var(--red)}
.node.is-dimmed{opacity:.34}
.node.is-filtered{opacity:.18}
.map.is-tracing .node:not(.is-route){opacity:.48}
.node.is-traced{outline:2px solid var(--red);outline-offset:4px;z-index:6}
.node.is-traced .node-title{color:var(--red)}
.node-evidence.is-selected{border:0;outline:2px solid var(--red);outline-offset:2px}
.node-evidence.is-traced{border:0}

/* 入场动画（只播一次；reduced-motion 下不添加 class） */
@keyframes nodeIn{from{opacity:0;transform:scale(.965)}to{opacity:1;transform:scale(1)}}
@keyframes edgeFade{from{opacity:0}to{opacity:1}}
@keyframes edgeDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.node-in{opacity:0;animation:nodeIn .5s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i,0) * 26ms)}
.edge-fade{opacity:0;animation:edgeFade .7s ease both;animation-delay:calc(var(--i,0) * 22ms)}
.edge-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:edgeDraw .9s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i,0) * 22ms)}

/* ============ 底部操作条 ============ */
.toolbar{
  position:fixed;left:0;right:0;bottom:0;
  min-height:var(--toolbar-h);
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.3fr) minmax(0,.85fr);
  gap:16px;
  padding:11px 20px 9px;
  background:var(--paper);
  border-top:1px solid var(--rule-strong);
  z-index:30;
}
.toolbar::before{
  content:'';position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(90deg,rgba(26,26,22,.24) 0 1px,transparent 1px 24px);
  pointer-events:none;
}
.tb-left,.tb-center,.tb-right{min-width:0;display:flex;flex-direction:column;justify-content:center}
.hints{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;
  font-family:var(--mono);font-size:10px;letter-spacing:.02em;color:var(--ink);
}
.hints .dot{color:var(--rule-strong)}
.hints kbd{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;
  border:1px solid var(--rule-strong);padding:1px 3px;background:var(--paper-2);
}
.contact{
  display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--ink);
  margin-top:4px;
}
.contact a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.contact a:hover{color:var(--red)}
.contact .muted{color:var(--muted)}
.contact .back{margin-left:auto;text-decoration:none;border-bottom:1px solid var(--rule-strong);padding-bottom:1px}
.contact .back:hover{color:var(--red);border-color:var(--red)}
.proto{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;color:var(--muted);
  margin-top:4px;
}

.trace-btn{
  align-self:flex-start;
  display:inline-flex;align-items:center;gap:8px;
  min-width:158px;
  min-height:46px;
  padding:10px 20px;
  border:1px solid var(--red);
  background:var(--red);
  color:var(--paper);
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease;
}
.trace-btn:hover{background:var(--ink);border-color:var(--ink)}
.trace-btn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink)}
.trace-rail{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  margin-top:5px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
}
.rail-node{
  border:1px solid transparent;padding:2px 6px;color:var(--muted);font-size:9.5px;
  transition:background-color .15s ease,color .15s ease;
}
.rail-node.is-on{background:var(--red);border-color:var(--red);color:var(--paper)}
.rail-node.is-done{color:var(--red);border-color:var(--rule)}
.rail-arrow{color:var(--rule-strong);font-size:9.5px}
.trace-status{
  margin-top:4px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.tb-right{align-items:flex-end}
.zoom{display:flex;align-items:center;gap:5px}
.zbtn,.zreset{
  min-width:32px;height:32px;
  border:1px solid var(--rule-strong);
  background:var(--paper);
  font-family:var(--mono);font-size:14px;line-height:1;
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.zbtn:hover,.zreset:hover{background:var(--paper-2);border-color:var(--ink)}
.zreset{font-size:9.5px;letter-spacing:.05em;padding:0 9px;min-width:48px}
.zval{font-family:var(--mono);font-size:10px;letter-spacing:.03em;width:48px;text-align:center;color:var(--ink)}
.readout{
  margin-top:5px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;color:var(--muted);
}

/* ============ 档案面板（桌面右滑） ============ */
.panel{
  position:fixed;top:0;right:0;bottom:0;
  width:min(420px,100vw);
  display:flex;flex-direction:column;
  background:var(--paper);
  border-left:1px solid var(--rule-strong);
  z-index:60;
  transform:translateX(102%);
  transition:transform .32s cubic-bezier(.2,.7,.25,1);
}
.panel[hidden]{display:none}
.panel.is-open{transform:translateX(0)}
.panel-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:14px 18px 12px;
  border-bottom:1px solid var(--rule-strong);
  flex:0 0 auto;
}
.panel-kicker{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;color:var(--ink);
  padding-top:12px;
}
.panel-close{
  display:inline-flex;align-items:center;gap:7px;
  min-width:56px;height:44px;
  justify-content:center;
  border:1px solid var(--rule-strong);
  background:transparent;
  font-family:var(--mono);font-size:18px;line-height:1;
  cursor:pointer;
  color:var(--ink);
}
.panel-close:hover{background:var(--paper-2);border-color:var(--ink)}
.panel-close-key{font-size:9.5px;letter-spacing:.03em;border:1px solid var(--rule);padding:1px 3px;color:var(--muted)}
.panel-body{
  flex:1 1 auto;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:18px 22px 44px;
  scrollbar-width:thin;
}
.p-title{
  font-family:var(--cjk);
  font-size:26px;font-weight:700;line-height:1.24;letter-spacing:-.005em;
  margin:2px 0 3px;
}
.p-en{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted);
  margin-bottom:14px;
}
.p-meta{
  display:grid;grid-template-columns:74px 1fr;
  margin:0 0 16px;
  border-top:1px solid var(--rule);
}
.p-meta dt{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;color:var(--muted);
  padding:6px 0;border-bottom:1px solid var(--rule);
}
.p-meta dd{
  margin:0;padding:6px 0 6px 10px;border-bottom:1px solid var(--rule);
  font-size:12.5px;line-height:1.5;word-break:break-word;
}
.p-status-strip{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border:1px solid var(--rule-strong);
  padding:10px 12px;
  margin:0 0 20px;
  background:var(--paper-2);
}
.p-stamp{
  transform:rotate(-6deg);
  border:1.5px solid var(--stamp);
  color:var(--red);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  padding:4px 8px;white-space:nowrap;text-transform:uppercase;
  background:var(--paper);
}
.p-status-text{font-size:12px;line-height:1.55;color:var(--ink);flex:1 1 140px;min-width:0}

.sec{margin:0 0 18px}
.sec-h{
  display:flex;align-items:baseline;gap:8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;color:var(--muted);
  border-bottom:1px solid var(--rule);
  padding-bottom:5px;margin:0 0 8px;
  text-transform:uppercase;
}
.sec-num{color:var(--red)}
.sec-cn{color:var(--ink);font-family:var(--cjk);font-size:11px;letter-spacing:.05em;margin-left:auto}
.sec-body{font-size:14px;line-height:1.72}
.sec-body p{margin:0 0 7px}
.sec-body p:last-child{margin-bottom:0}
.sec-body ul{list-style:none;margin:0;padding:0}
.sec-body li{position:relative;padding-left:14px;margin:0 0 7px}
.sec-body li::before{content:'—';position:absolute;left:0;color:var(--red)}
.sec-body li:last-child{margin-bottom:0}
.sec-body .proof{font-family:var(--mono);font-size:10.5px;line-height:1.65;color:var(--ink);letter-spacing:.01em}

.project-sample{
  margin:4px 0 20px;padding:13px 14px 14px;border:1px solid var(--rule);
  border-left:3px solid var(--red);background:#f1eadc;
}
.project-sample figcaption{font-size:11px;font-weight:600;color:var(--red);letter-spacing:.05em}
.project-sample h3{font-size:17px;line-height:1.4;margin:4px 0 8px}
.project-sample dl{margin:0;font-size:13px;line-height:1.58}
.project-sample dl > div{
  display:grid;grid-template-columns:65px minmax(0,1fr);gap:8px;
  border-top:1px solid var(--rule);padding:6px 0;
}
.project-sample dl > div:last-child{padding-bottom:0}
.project-sample dt{font-weight:600;color:var(--muted)}
.project-sample dd{margin:0}

.p-foot{border-top:1px solid var(--rule-strong);padding-top:12px;margin-top:20px}
.p-repo{display:flex;flex-direction:column;gap:5px;font-family:var(--mono);font-size:9.5px;letter-spacing:.05em}
.p-repo-label{color:var(--muted);text-transform:uppercase}
.p-repo a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;word-break:break-all;line-height:1.6;min-height:22px;display:inline-block}
.p-repo a:hover{color:var(--red)}
.p-repo .p-repo-note{color:var(--muted);letter-spacing:.04em}
.p-related{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.rel-btn{
  border:1px solid var(--rule-strong);background:transparent;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.04em;
  padding:9px 9px;min-height:40px;cursor:pointer;color:var(--ink);
}
.rel-btn:hover{background:var(--paper-2);border-color:var(--red);color:var(--red)}
.p-honest{margin-top:16px;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;color:var(--muted)}

body.panel-open .legend{opacity:0;visibility:hidden}
.scrim{display:none}

.sr-status{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.noscript{
  position:fixed;left:20px;bottom:100px;z-index:100;
  background:var(--paper);border:1px solid var(--red);padding:10px 14px;font-size:13px;
}

/* 中等宽度时，标题栏与图例已经提供操作说明。 */
@media (min-width:901px) and (max-width:1190px){
  .claim,.start-leader{display:none}
}

/* ============ 移动端：垂直田野笔记 ============ */
.notes{display:none}

@media (max-width:900px){
  html,body{height:auto;overflow-y:auto;overflow-x:hidden}
  body{background:var(--paper)}
  .map,.toolbar,.legend{display:none}
  .chrome-top{position:static;padding:12px 16px;background:var(--paper)}
  .is-embedded .chrome-top{display:none}
  .titleblock{position:static;width:auto;border:1px solid var(--rule-strong)}
  .tb-title{font-size:21px;padding:8px 10px 9px;border-bottom:0}
  .tb-claim,.tb-line-3,.tb-line-4{display:none}
  .tb-line{font-size:9.5px}

  .notes{display:block}
  .mobile-controls{
    position:sticky;top:0;z-index:45;
    display:flex;flex-direction:column;gap:7px;
    padding:9px 16px;
    background:var(--paper);
    border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule-strong);
  }
  .mobile-controls .filters{padding:0;border-bottom:0}
  .mobile-controls .chip{min-height:44px;padding:8px 9px;font-size:10.5px}
  .mobile-evidence{margin:12px 16px 0;border-top:1px solid var(--rule)}
  .mobile-evidence summary{padding:11px 0;font-size:12px;min-height:44px}
  .mobile-evidence .ev-toggle{min-height:44px}
  .mobile-evidence .note-group{padding:0}

  .note-group{padding:16px 16px 2px}
  .notes-h{
    display:flex;align-items:center;gap:8px;
    font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ink);
    margin:0 0 6px;
  }
  .notes-h .nh-rule{flex:1;height:1px;background:var(--rule)}
  .notes-h .nh-count{color:var(--muted)}
  .notes-list{list-style:none;margin:0;padding:0;position:relative}
  .notes-list::before{
    content:'';position:absolute;left:21px;top:8px;bottom:8px;width:1px;background:var(--rule-strong);
  }
  .notes-list li{position:relative}
  .note-row{
    display:grid;grid-template-columns:54px minmax(0,1fr);
    column-gap:8px;
    width:100%;min-height:58px;
    padding:12px 6px 12px 0;
    border:0;border-bottom:1px solid var(--rule);
    background:transparent;
    text-align:left;cursor:pointer;
    color:var(--ink);
    font-family:var(--cjk);
  }
  .note-row::before{
    content:'';position:absolute;left:17px;top:23px;width:9px;height:9px;
    background:var(--paper);border:1px solid var(--ink);
  }
  .note-row--project::before{border-radius:50%}
  .note-row--question::before{border-style:dashed}
  .note-row--method::before{background:var(--blue);border-color:var(--blue)}
  .note-row--evidence::before{transform:rotate(45deg);border-color:var(--red)}
  .note-row:hover{background:var(--paper-2)}
  .note-row.is-open{background:var(--paper-2);box-shadow:inset 2px 0 0 var(--red)}
  .note-code{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--red);
    padding:2px 0 0 30px;line-height:1.35;
  }
  .note-main{min-width:0}
  .note-title{
    display:block;font-size:15px;font-weight:600;line-height:1.4;letter-spacing:.005em;
    word-break:break-word;
  }
  .note-sub{
    display:block;margin-top:3px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.02em;color:var(--muted);line-height:1.5;
    word-break:break-word;
  }
  .note-sub .ns-red{color:var(--red)}
  .note-ev{display:none}
  body.is-evidence .note-row--project .note-ev{
    display:inline-block;margin-top:4px;
    font-family:var(--mono);font-size:9.5px;letter-spacing:.03em;color:var(--red);
    border:1px solid var(--stamp);padding:1px 5px;
  }
  .note-row.is-filtered{opacity:.2}
  .note-row:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

  .mobile-foot{
    padding:4px 16px 20px;
    border-top:1px solid var(--rule-strong);
    margin-top:12px;
  }
  .is-embedded .mobile-foot{display:none}
  .mf-back{font-family:var(--mono);font-size:11px;letter-spacing:.04em}
  .mf-back a{display:inline-flex;align-items:center;min-height:44px;padding-right:8px;text-decoration:none;border-bottom:1px solid var(--rule-strong)}

  /* 底部抽屉 */
  .panel{
    top:auto;left:0;right:0;bottom:0;
    width:auto;height:88dvh;
    border-left:0;border-top:1px solid var(--rule-strong);
    transform:translateY(102%);
    z-index:80;
  }
  .panel.is-open{transform:translateY(0)}
  .panel-head{padding:12px 16px 10px}
  .panel-body{padding:16px 18px 56px}
  .p-title{font-size:23px}
  .panel-close{min-height:44px}
  .scrim.is-open{display:block;position:fixed;inset:0;background:rgba(26,26,22,.38);z-index:70}
  body.panel-open{overflow:hidden}
}

/* ============ 减少动态效果 ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .signal{display:none}
  .node-in,.edge-fade,.edge-draw{animation:none;opacity:1;stroke-dashoffset:0}
  .toggle-box::after{transition:none}
}