/* /howto — 架构与配置可视化。只做排版与图示，不改全局设计变量。 */

.howto .lead{color:var(--muted);font-size:13px;margin:-4px 0 16px;max-width:72ch}
.howto .card{padding:20px 20px 22px}

.intro .kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.intro .kv > div{display:flex;flex-direction:column;gap:3px}
.intro .k{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.intro .v{font-size:13.5px}

/* ---------------- flow ---------------- */
.flow{
  display:flex;align-items:stretch;gap:0;
  overflow-x:auto;padding:6px 2px 14px;
  scrollbar-width:thin;
}
.node{
  flex:0 0 148px;position:relative;
  background:var(--bg-soft);border:1px solid var(--line-soft);
  border-radius:10px;padding:11px 12px 12px;
  transition:border-color .15s,background .15s,transform .15s;
}
.node:hover{border-color:#31404f;transform:translateY(-1px)}
.node.hit{border-color:var(--accent);background:#0f1a17}
.node .n{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:.1em}
.node .t{font-size:13px;font-weight:600;margin:2px 0 3px;line-height:1.35}
.node .p{font-family:var(--mono);font-size:10.5px;color:var(--muted);line-height:1.5}
.node[data-lane="1"]{border-left:2px solid var(--accent)}
.node[data-lane="2"]{border-left:2px solid var(--info)}
.node[data-lane="3"]{border-left:2px solid var(--warn)}
.node[data-lane="4"]{border-left:2px solid #b08cff}
.arrow{
  flex:0 0 26px;display:flex;align-items:center;justify-content:center;
  color:#39424f;font-size:13px;user-select:none;
}
.legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--dim);font-size:11.5px;margin-top:2px}
.legend span{display:flex;align-items:center;gap:6px}
.legend .dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.dot.d1{background:var(--accent)}.dot.d2{background:var(--info)}
.dot.d3{background:var(--warn)}.dot.d4{background:#b08cff}

/* ---------------- lanes ---------------- */
.lanes{display:grid;gap:10px}
.lane{border:1px solid var(--line-soft);border-radius:10px;padding:12px 14px;background:var(--bg-soft)}
.lane .h{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.lane .h b{font-size:13px;font-weight:600}
.lane .h span{font-size:11px;color:var(--dim);font-family:var(--mono)}
.lane .steps{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.lane .steps i{font-style:normal;color:#39424f}
.chip{
  font-size:11.5px;padding:3px 10px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);white-space:nowrap;
}
.chip.mono{font-family:var(--mono);font-size:11px}

/* ---------------- rules ---------------- */
.rules{display:grid;gap:8px}
.rule{display:grid;grid-template-columns:1fr 22px 190px;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid var(--line-soft);border-radius:10px;background:var(--bg-soft)}
.rule .cond{font-size:12.5px}
.rule .cond code{font-family:var(--mono);font-size:11.5px;color:var(--accent)}
.rule .to{color:#39424f;text-align:center;font-size:12px}
.rule .act{font-size:11.5px;text-align:right}
.rule .act.auto{color:var(--accent)}
.rule .act.human{color:var(--warn)}
.rule .act.reject{color:var(--bad)}

/* ---------------- specs ---------------- */
.specs{display:grid;gap:8px}
.spec{border:1px solid var(--line-soft);border-radius:10px;background:var(--bg-soft);overflow:hidden}
.spec > summary{
  list-style:none;cursor:pointer;padding:11px 14px;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.spec > summary::-webkit-details-marker{display:none}
.spec > summary:hover{background:var(--panel-2)}
.spec .name{font-size:13.5px;font-weight:600;min-width:170px}
.spec .role{font-size:12px;color:var(--muted)}
.spec .tagline{margin-left:auto;display:flex;gap:6px}
.spec .body{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  padding:2px 14px 14px;border-top:1px solid var(--line-soft);margin-top:2px;padding-top:12px;
}
.spec .body h4{margin:0 0 4px;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);font-weight:600}
.spec .body p{margin:0;font-size:12px;color:var(--muted);line-height:1.65}
.spec .body code,.spec .pit code{font-family:var(--mono);font-size:11px;color:#cfe3d9;background:rgba(255,255,255,.04);padding:1px 5px;border-radius:4px}
.spec .pit{grid-column:1/-1;font-size:11.5px;color:var(--warn);border-top:1px dashed #2a3340;padding-top:9px}
@media(max-width:820px){.spec .body{grid-template-columns:1fr}}

/* ---------------- ai ---------------- */
.ai-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.ai-card{border:1px solid var(--line-soft);border-radius:10px;padding:13px 14px;background:var(--bg-soft)}
.ai-card .use{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ai-card .model{font-family:var(--mono);font-size:11.5px;color:var(--text);margin:5px 0 7px;word-break:break-all}
.ai-card p{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.ai-card.off{border-style:dashed}
.ai-card.off .model{color:var(--dim)}

/* ---------------- two col ---------------- */
.two-col{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.two-col h4{margin:0 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.two-col ul{margin:0;padding-left:16px;color:var(--muted);font-size:12.5px;line-height:1.8}
.two-col code{font-family:var(--mono);font-size:11.5px;color:#cfe3d9}

/* ---------------- schema ---------------- */
.schema{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:8px}
.tbl{border:1px solid var(--line-soft);border-radius:9px;padding:10px 12px;background:var(--bg-soft)}
.tbl .tn{font-family:var(--mono);font-size:12px;color:var(--accent);margin-bottom:5px}
.tbl .fs{font-family:var(--mono);font-size:10.5px;color:var(--dim);line-height:1.7;word-break:break-all}
.tbl .note{font-size:11px;color:var(--muted);margin-top:5px}

pre.code{
  margin:0;background:#0b0f14;border:1px solid var(--line-soft);border-radius:10px;
  padding:14px 16px;overflow-x:auto;font-family:var(--mono);font-size:11.5px;
  color:#c9d4e0;line-height:1.8;
}
pre.code .c{color:#5d6775}