/* style.css —— 只写结构与排版，所有数值取自 tokens.css */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh);
  letter-spacing: var(--tracking-body);
  overflow-x: hidden;
}

/* ---------- 字体分工 ----------
   正文（body）默认无衬线；下面这些是「数据」，统一回到等宽栈。
   判断标准：数字、参数值、编号（FR-xxx / CVE / 章节号）、时间戳、耗时、
   版本号、分数、代码。叙述性文字一律不进这个列表。 */

.metric-num,          /* 指标大数字 */
.col-time,            /* 经历时间区间 */
.status-text,         /* 状态条：chunk 数 / 向量维度 */
.idx,                 /* 区块编号 01–08 / M0–M5 */
.timing-val,          /* 三段耗时数值 */
.knob-head b,         /* 滑块当前值 */
.chunk-rank,          /* 命中排名 */
.chunk-score,         /* 相似度分数 */
.foot-meta,           /* 页脚构建信息 */
.mb-badge,            /* 版本徽标 V1.0 */
.mn-card-v,           /* 卡片 meta 值：时间戳 / 耗时 / 条数 */
.mn-item-tag,         /* 震级 / CVE / 告警等级代号 */
.mn-item-foot,        /* 条目时间戳 */
.mn-live-stamp,       /* 采集时间 */
.mn-corpus-tag,       /* 语料库 chunk 数 */
.mn-doc-kicker,       /* PRD 版本行 */
.mn-doc-sn,           /* 侧边栏章节号 */
.mn-doc-ver,          /* 版本号 V1.0 / V2.0 */
.mn-doc-lv1,          /* 架构树层级代号 A/B/C */
.mn-doc-lv2,
.mn-doc-fr-head b,    /* FR 编号 */
.mn-doc-p0,           /* 优先级 P0 */
.mn-doc-p1 {          /* 优先级 P1 */
  font-family: var(--font-mono);
  letter-spacing: var(--tracking);
}

/* 标题与标签也留在等宽栈：它们靠「字体 + 字距 + 字重」三个维度跟无衬线正文拉开层次，
   这是本站原有的终端质感，不改。注意——只有短标签走这里，成句的描述文字不许进。 */
.block-title,
.sub-title,
.label,
.answer-head,
.timing-label,
.knob-head,
.mb-name,
.mb-cta,
.mn-h,
.mn-seg-h,
.mn-doc-h,
.mn-card-name,
.mn-card-state,
.mn-live-count,
.ask-btn,
.mn-back,
.mn-refresh,
.mn-doc-handle,
.mn-doc-done,
.mn-doc-part {
  font-family: var(--font-mono);
}

/* 数字类不需要等宽标签的大字距，只要等宽本身 */
.metric-num,
.timing-val,
.knob-head b,
.chunk-score,
.mn-card-v,
.mn-item-foot { letter-spacing: 0; }

.page {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--page-pad) var(--sp-6);
}

/* ---------- 身份条 ---------- */

.identity { padding-bottom: var(--sp-5); }

/* 姓名与正文拉开三个维度：字重更重、字号更大、字距反向收紧 */
.name {
  margin: 0;
  font-size: var(--fs-name);
  font-weight: var(--fw-name);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-name);
}

/* 职位行保留等宽标签质感，作为姓名与正文之间的过渡层 */
.role {
  margin: var(--sp-3) 0 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
}

.tagline {
  margin: var(--sp-3) 0 0;
  color: var(--text);
  font-size: var(--fs-body);
}

/* 「本站即作品」——从页脚提到首屏，克制陈述，不吹 */
.site-claim {
  margin: var(--sp-4) 0 0;
  padding-left: var(--sp-3);
  border-left: var(--sp-1) solid var(--accent-dim);
  color: var(--text-muted);
  font-size: var(--fs-claim);
}

.site-claim b { color: var(--accent); font-weight: var(--fw-title); }

/* ---------- 状态条 ---------- */

.status {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: var(--line-w) solid var(--line);
  border-bottom: var(--line-w) solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.status-dot {
  width: var(--sp-1);
  height: var(--sp-1);
  border-radius: var(--radius);
  background: var(--data-weak);
  flex: none;
}

.status.is-online .status-dot { background: var(--accent); }
.status.is-offline .status-dot { background: var(--alert); }
.status.is-offline .status-text { color: var(--alert); }

/* ---------- 区块 ---------- */

.block {
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: var(--line-w) solid var(--line);
}

/* 状态条自己带下边线，紧跟其后的第一个区块不再画上边线，
   否则两条线夹着一段空白，看着像漏了一个区块 */
#view-main > .block:first-of-type { border-top: none; }

.block-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: var(--tracking);
  color: var(--text);
}

.block-title .idx {
  color: var(--data-mid);
  margin-right: var(--sp-3);
}

.sub-title {
  margin: var(--sp-5) 0 var(--sp-3);
  font-size: var(--fs-small);
  font-weight: 500;
  letter-spacing: var(--tracking);
  color: var(--text-muted);
}

.note {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-small);
}

/* ---------- 四格指标 ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
}

/* 重点卡片：深灰底浮在纯黑页面上，靠明度差分层，不用投影不用渐变 */
.metric {
  background: var(--surface);
  border: var(--line-w) solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--surface-pad);
}

.metric-num {
  font-size: var(--fs-metric);
  color: var(--accent);
  line-height: 1.2;
}

.metric-label {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-on-surface);
  line-height: 1.6;
}

/* ---------- 我在做什么 ---------- */

.doing {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
}

/* 一条一张卡，跟指标卡同一套表面层 */
.doing-item {
  background: var(--surface);
  border: var(--line-w) solid var(--surface-line);
  border-radius: var(--radius);
  padding: var(--surface-pad);
}

.doing dt {
  color: var(--text);
  letter-spacing: var(--tracking);
}

.doing dd {
  margin: var(--sp-2) 0 0;
  color: var(--text-on-surface);
  font-size: var(--fs-small);
}

/* ---------- 表格 / 列表 ---------- */

.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-small);
}

.tbl td {
  padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
  border-bottom: var(--line-w) solid var(--line);
  vertical-align: top;
}

.col-time { color: var(--accent); white-space: nowrap; width: 26%; }
.col-org { color: var(--text); width: 34%; }
.col-role { color: var(--text-muted); }

.list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.list li {
  padding: var(--sp-2) 0;
  border-bottom: var(--line-w) solid var(--line);
}

/* ---------- 问答区 ---------- */

.ask-form {
  display: flex;
  gap: var(--sp-2);
}

.ask-input {
  flex: 1 1 auto;
  min-width: 0;
  height: var(--control-h);
  padding: 0 var(--sp-3);
  background: var(--bg);
  color: var(--text);
  border: var(--line-w) solid var(--accent-dimmer);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--fs-body);
}

.ask-input::placeholder { color: var(--text-muted); }

.ask-input:focus {
  outline: none;
  border-color: var(--accent);
}

.ask-btn {
  flex: none;
  height: var(--control-h);
  padding: 0 var(--sp-4);
  background: var(--bg);
  color: var(--accent);
  border: var(--line-w) solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.ask-btn:hover { background: var(--accent); color: var(--bg); }

.ask-btn[disabled] {
  color: var(--text-muted);
  border-color: var(--line);
  cursor: default;
}

.ask-btn[disabled]:hover { background: var(--bg); color: var(--text-muted); }

.samples {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.chip {
  background: var(--bg);
  color: var(--text-muted);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  font-family: var(--font);
  font-size: var(--fs-micro);
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
}

.chip:hover { color: var(--accent); border-color: var(--accent-dimmer); }

.answer-wrap {
  margin-top: var(--sp-4);
  border: var(--line-w) solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3);
}

.answer-head {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.answer-status.is-error { color: var(--alert); }

.answer {
  margin-top: var(--sp-2);
  white-space: pre-wrap;
}

.answer.is-error { color: var(--alert); }

.sources {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--line-w) solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.sources:empty { display: none; }

.src-item { display: block; padding: var(--sp-1) 0; }
.src-item b { color: var(--data-mid); font-weight: 400; }

/* ---------- 检索过程 ---------- */

.timings {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.timing-label {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.timing-val {
  font-size: var(--fs-body);
  color: var(--accent);
  padding: var(--sp-1) 0;
}

.bar {
  height: var(--bar-h);
  background: var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.bar-fill {
  display: block;
  height: 100%;
  width: 0;
  transition: width var(--transition);
}

.bar-embed { background: var(--data-strong); }
.bar-search { background: var(--data-mid); }
.bar-gen { background: var(--data-weak); }

.trace-meta {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  padding-bottom: var(--sp-3);
}

.chunks {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chunk {
  border-top: var(--line-w) solid var(--line);
  padding: var(--sp-3) 0;
}

.chunk-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.chunk-rank { color: var(--data-mid); }
.chunk-src { color: var(--text); }
.chunk-score { margin-left: auto; color: var(--accent); }

.chunk-bar {
  height: var(--bar-h);
  background: var(--line);
  border-radius: var(--radius);
  margin: var(--sp-2) 0;
  overflow: hidden;
}

.chunk-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
}

.chunk-text {
  font-size: var(--fs-small);
  color: var(--text-muted);
  white-space: pre-wrap;
}

/* ---------- 参数 ---------- */

.knobs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-5);
}

.knob { display: block; }

.knob-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.knob-head b {
  color: var(--accent);
  font-weight: 400;
  font-size: var(--fs-body);
}

.knob-hint {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.knob input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: var(--sp-2) 0 0;
  background: transparent;
  cursor: pointer;
}

.knob input[type="range"]::-webkit-slider-runnable-track {
  height: var(--bar-h);
  background: var(--accent-dimmer);
  border-radius: var(--radius);
}

.knob input[type="range"]::-moz-range-track {
  height: var(--bar-h);
  background: var(--accent-dimmer);
  border-radius: var(--radius);
}

.knob input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: var(--sp-2);
  height: var(--sp-4);
  margin-top: calc((var(--bar-h) - var(--sp-4)) / 2);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
}

.knob input[type="range"]::-moz-range-thumb {
  width: var(--sp-2);
  height: var(--sp-4);
  background: var(--accent);
  border: none;
  border-radius: var(--radius);
}

/* ---------- 联系 / 页脚 ---------- */

.contact-line { margin: 0; }

.contact-mail {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-body);
}

.contact-mail a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: var(--line-w) solid var(--accent-dimmer);
}

.contact-mail a:hover { border-bottom-color: var(--accent); }

.foot {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  padding-top: var(--sp-3);
  border-top: var(--line-w) solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* ---------- 个人智库 Muninn · 入口 bar ---------- */

/* 第一屏的主入口：上下各留一大口气，把「02 我在做什么」推到折线以下，
   第一屏就只剩 名字 / 定位 / 本站即作品 / 指标条 / 主入口 五样东西 */
.muninn-bar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--sp-4);
  width: 100%;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-7);
  padding: var(--muninn-bar-pad);
  background: var(--bg);
  color: var(--text);
  border: var(--line-w) solid var(--accent);
  border-left: var(--sp-1) solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--font);
  text-align: left;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}

.muninn-bar:hover { background: var(--line); }

.muninn-bar:focus-visible {
  outline: var(--line-w) solid var(--accent);
  outline-offset: var(--sp-1);
}

.mb-left { display: block; }

.mb-kicker {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.mb-dot {
  width: var(--muninn-dot);
  height: var(--muninn-dot);
  border-radius: var(--muninn-dot);
  background: var(--accent);
  flex: none;
  animation: muninn-pulse var(--muninn-pulse) ease-in-out infinite;
}

@keyframes muninn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}

@media (prefers-reduced-motion: reduce) {
  .mb-dot,
  .mn-skel-line { animation: none; }
}

.mb-name {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-brand);
  line-height: 1.2;
  color: var(--accent);
  letter-spacing: var(--tracking);
}

.mb-desc {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mb-right {
  display: block;
  flex: none;
  text-align: right;
}

.mb-badge {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  border: var(--line-w) solid var(--accent-dim);
  border-radius: var(--radius);
  font-size: var(--fs-micro);
  color: var(--accent);
  letter-spacing: var(--tracking);
}

/* 实心块，让「可点」这件事没有歧义——产品负责人要求入口一眼可见 */
.mb-cta {
  display: block;
  margin-top: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  background: var(--accent);
  color: var(--bg);
  border-radius: var(--radius);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
  transition: background var(--transition);
}

.muninn-bar:hover .mb-cta { background: var(--text); }

/* ---------- 个人智库 Muninn · 视图 ---------- */

.muninn { padding-top: var(--sp-5); }

.mn-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: var(--line-w) solid var(--line);
}

.mn-back {
  background: var(--bg);
  color: var(--accent);
  border: var(--line-w) solid var(--accent-dimmer);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-3);
  font-family: var(--font);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.mn-back:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

.mn-doc {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.mn-title {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-name);
  font-weight: 500;
  letter-spacing: var(--tracking);
}

.mn-title b { color: var(--accent); font-weight: 500; }

.mn-block {
  padding-top: var(--sp-5);
  margin-top: var(--sp-5);
  border-top: var(--line-w) solid var(--line);
}

.mn-h {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: var(--tracking);
}

.mn-h .idx { color: var(--data-mid); margin-right: var(--sp-3); }

.mn-sub {
  margin: var(--sp-3) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-small);
}

.mn-sub-hint { display: block; color: var(--data-mid); }

/* 问答区内部分段：让输入 / 结果 / 过程 / 参数四段各有呼吸 */
.mn-seg { margin-top: var(--sp-5); }
.mn-seg:first-of-type { margin-top: var(--sp-3); }

.mn-seg-h {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: var(--tracking);
  color: var(--text-muted);
}


.mn-bottom {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--line-w) solid var(--line);
}

/* ---------- 实时态势仪表盘 ---------- */

.mn-live-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.mn-live-head .mn-h { flex: 0 0 auto; }

.mn-live-ctl {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.mn-live-count {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
}

.mn-live-count.is-ok { color: var(--accent); }
.mn-live-count.is-down { color: var(--alert); }

.mn-corpus-tag {
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.mn-refresh {
  height: var(--source-btn-h);
  padding: 0 var(--sp-3);
  background: transparent;
  color: var(--accent);
  border: var(--line-w) solid var(--accent-dim);
  border-radius: var(--radius);
  font: inherit;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.mn-refresh:hover:not(:disabled) { background: var(--accent); color: var(--bg); }
.mn-refresh:disabled { opacity: 0.5; cursor: default; }

.mn-live-stamp {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mn-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--source-col-min), 1fr));
  /* 所有行等高：四张卡片高度一致，不因为条目长短参差不齐 */
  grid-auto-rows: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

.mn-card {
  display: flex;
  flex-direction: column;
  border: var(--line-w) solid var(--line);
  border-left: var(--source-edge-w) solid var(--accent-dim);
  border-radius: var(--radius);
  padding: var(--sp-3);
  min-height: var(--source-card-min-h);
}

/* 故障态是页面上唯一用红色的地方 */
.mn-card.is-down { border-left-color: var(--alert); }

.mn-card-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.mn-card-dot {
  width: var(--muninn-dot);
  height: var(--muninn-dot);
  border-radius: var(--muninn-dot);
  background: var(--accent);
  flex: 0 0 auto;
}

.mn-card.is-down .mn-card-dot { background: var(--alert); }

.mn-card-name {
  font-size: var(--fs-small);
  letter-spacing: var(--tracking);
  color: var(--text);
}

.mn-card-state {
  margin-left: auto;
  font-size: var(--fs-micro);
  color: var(--accent);
}

.mn-card.is-down .mn-card-state { color: var(--alert); }

.mn-card-desc {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mn-card-err {
  margin-top: var(--sp-2);
  font-size: var(--fs-micro);
  color: var(--alert);
}

.mn-card-meta {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
}

.mn-card-k { color: var(--text-muted); }
.mn-card-v { color: var(--data-strong); }
.mn-card.is-down .mn-card-v { color: var(--data-mid); }

.mn-items {
  list-style: none;
  /* 撑满卡片剩余高度，条目之间均分间距：
     等高拉伸多出来的空间散在条目之间，不会在卡片底部堆成一块空白 */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) 0 0;
  border-top: var(--line-w) solid var(--line);
}

.mn-item { padding: var(--sp-2) 0; }
.mn-item + .mn-item { border-top: var(--line-w) solid var(--line); }

.mn-item-head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.mn-item-tag {
  flex: 0 0 auto;
  font-size: var(--fs-micro);
  color: var(--accent);
  border: var(--line-w) solid var(--accent-dimmer);
  border-radius: var(--radius);
  padding: 0 var(--sp-1);
}

/* 数字型标签（震级、CVE 编号）与电文代号在同一套青色里分档，不引入新颜色 */
.mn-item-tag.is-num { color: var(--data-strong); }
.mn-item-tag.is-code { color: var(--text-muted); border-color: var(--line); }

/* 灾害告警等级：用薄荷青的三档亮度表示强弱。红色在本站只留给故障态 */
.mn-item-tag.is-level { border-color: currentColor; }
.mn-item-tag.is-lv1 { color: var(--accent-dimmer); }
.mn-item-tag.is-lv2 { color: var(--accent-dim); }
.mn-item-tag.is-lv3 { color: var(--accent); font-weight: 500; }

.mn-item-title {
  font-size: var(--fs-small);
  color: var(--text);
  text-decoration: none;
  line-height: 1.5;
  /* 统一最多几行：条目高度一致，卡片之间才对得齐 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--source-item-lines);
  overflow: hidden;
}

a.mn-item-title:hover { color: var(--accent); text-decoration: underline; }

.mn-item-sub {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--data-mid);
}

.mn-item-foot {
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mn-card-origin {
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--line-w) solid var(--line);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  text-decoration: none;
}

.mn-card-origin:hover { color: var(--accent); }

.mn-item-empty { color: var(--text-muted); font-size: var(--fs-micro); }

/* 加载占位：先占住高度，数据回来时不跳版 */
.mn-card.is-skeleton { border-left-color: var(--line); }

.mn-skel-line {
  height: var(--source-skel-h);
  margin-bottom: var(--sp-2);
  background: var(--line);
  border-radius: var(--radius);
  animation: mn-skel var(--source-skel-pulse) ease-in-out infinite;
}

.mn-skel-line:nth-child(2) { width: 70%; }
.mn-skel-line:nth-child(4) { width: 85%; }
.mn-skel-line:nth-child(5) { width: 55%; }

@keyframes mn-skel {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- 需求文档侧边栏 ----------
   只有文字，没有任何可点控件。唯一的视觉行为是「被高亮」。
   高亮由主视图 hover 触发，方向是主视图 → 侧边栏，反向不成立。 */

.mn-doc-handle {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: var(--doc-handle-w);
  height: var(--doc-handle-h);
  padding: 0;
  writing-mode: vertical-rl;
  background: var(--bg);
  color: var(--accent);
  border: var(--line-w) solid var(--accent-dimmer);
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
  font-family: var(--font);
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: right var(--doc-slide), background var(--transition), color var(--transition);
}

.mn-doc-handle:hover { background: var(--accent); color: var(--bg); }
.mn-doc-handle[aria-expanded="true"] { right: var(--doc-w); }

.mn-doc-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 25;
  width: var(--doc-w);
  height: 100%;
  background: var(--bg);
  border-left: var(--line-w) solid var(--line);
  transform: translateX(100%);
  transition: transform var(--doc-slide);
}

.mn-doc-panel.is-open { transform: none; }

/* 侧边栏展开时主视图让出宽度，两边同屏，高亮才看得见 */
.page { transition: margin-right var(--doc-slide); }
body.mn-doc-open .page { margin-right: var(--doc-w); }

.mn-doc-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

.mn-doc-kicker {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-micro);
  color: var(--text-muted);
  letter-spacing: var(--tracking);
}

.mn-doc-sec {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: var(--line-w) solid var(--line);
}

.mn-doc-sec:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }

.mn-doc-h {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-section);
  font-weight: 500;
  letter-spacing: var(--tracking);
}

.mn-doc-ver {
  margin-left: auto;
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-muted);
}

.mn-doc-ver.is-live { color: var(--accent); }

.mn-doc-p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-small);
  line-height: var(--lh);
}

.mn-doc-dim { color: var(--text-muted); }

.mn-doc-sn, .mn-doc-nfr {
  display: block;
  color: var(--data-mid);
  font-weight: 400;
  font-size: var(--fs-micro);
  letter-spacing: var(--tracking);
}

.mn-doc-tree {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-micro);
}

.mn-doc-lv1 {
  margin-top: var(--sp-2);
  color: var(--text);
  letter-spacing: var(--tracking);
}

.mn-doc-lv2 { color: var(--text-muted); padding-left: var(--sp-3); }

.mn-doc-frs { list-style: none; margin: 0; padding: 0; }

.mn-doc-fr { margin-bottom: var(--sp-3); }

.mn-doc-fr-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-small);
}

.mn-doc-fr-head b {
  color: var(--accent);
  font-weight: 500;
  letter-spacing: var(--tracking);
}

.mn-doc-p0, .mn-doc-p1, .mn-doc-p2 {
  font-style: normal;
  font-size: var(--fs-micro);
}

.mn-doc-p0 { color: var(--accent); }
.mn-doc-p1 { color: var(--accent-dim); }
.mn-doc-p2 { color: var(--text-muted); }

.mn-doc-done, .mn-doc-part {
  margin-left: auto;
  font-style: normal;
  font-size: var(--fs-micro);
  color: var(--accent);
  border: var(--line-w) solid var(--accent-dimmer);
  border-radius: var(--radius);
  padding: 0 var(--sp-1);
}

.mn-doc-part { color: var(--accent-dim); }

.mn-doc-fr-body {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

.mn-doc-foot {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-micro);
  color: var(--text-muted);
}

/* 被主视图指向时的高亮：薄荷青淡底 + 左侧竖线，移开淡出不硬切 */
[data-req] {
  border-left: var(--doc-hl-edge) solid transparent;
  padding-left: var(--sp-2);
  border-radius: var(--radius);
  transition: background var(--doc-hl-fade), border-left-color var(--doc-hl-fade);
}

[data-req].is-hl {
  background: var(--doc-hl-bg);
  border-left-color: var(--accent);
}

/* 主视图这一侧只做「我正被指向」的极轻提示，不喧宾夺主 */
[data-hl].is-hl-src {
  box-shadow: 0 0 0 var(--line-w) var(--accent-dimmer);
  border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
  .mn-doc-panel, .mn-doc-handle, .page, [data-req] { transition: none; }
}

/* ---------- 移动端 ---------- */

@media (max-width: 640px) {
  /* 窄屏第一屏压缩：作用域只在身份区与首页主视图内，Muninn 视图的间距不动 */
  .identity,
  #view-main {
    --sp-4: var(--sp-3);
    --sp-5: var(--home-gap-mobile);
    --sp-6: var(--home-gap-mobile);
  }

  .page { padding: var(--home-gap-mobile) var(--page-pad-mobile) var(--sp-5); }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }
  /* 窄屏卡片收内边距，把宽度让给文字 */
  .metric, .doing-item { padding: var(--surface-pad-mobile); }
  .knobs { grid-template-columns: 1fr; gap: var(--sp-4); }
  .timings { grid-template-columns: 1fr; gap: var(--sp-3); }
  .ask-form { flex-wrap: wrap; }
  .ask-input { flex: 1 1 100%; }
  .ask-btn { width: 100%; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: auto; }
  .tbl td { border-bottom: none; padding: 0; }
  .tbl tr {
    border-bottom: var(--line-w) solid var(--line);
    padding: var(--sp-2) 0;
  }
  .chunk-head { flex-wrap: wrap; }
  .chunk-score { margin-left: 0; }

  /* Muninn 入口 bar：窄屏改上下堆叠，右侧信息左对齐 */
  .muninn-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-3);
  }
  .mb-right { text-align: left; }

  /* 需求文档：窄屏改成底部抽屉，把手在底部，主视图仍可滚动、仍可见 */
  .mn-doc-panel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    height: var(--doc-drawer-h);
    border-left: none;
    border-top: var(--line-w) solid var(--accent-dimmer);
    transform: translateY(100%);
  }
  .mn-doc-scroll { padding: var(--sp-4) var(--page-pad-mobile) var(--sp-5); }
  /* 把手靠右下角，不再水平居中：
     居中时它正好压在主视图左上角的「返回主页」上，两者互相遮挡 */
  .mn-doc-handle {
    top: auto;
    left: auto;
    right: var(--page-pad-mobile);
    bottom: 0;
    transform: none;
    writing-mode: horizontal-tb;
    width: auto;
    height: var(--control-h);
    padding: 0 var(--sp-4);
    border: var(--line-w) solid var(--accent-dimmer);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    transition: bottom var(--doc-slide), background var(--transition), color var(--transition);
  }
  .mn-doc-handle[aria-expanded="true"] { right: var(--page-pad-mobile); bottom: var(--doc-drawer-h); }
  /* 抽屉展开时主视图不左移，只在底部留出抽屉的位置 */
  body.mn-doc-open .page { margin-right: 0; padding-bottom: var(--doc-drawer-h); }
  /* 抽屉收起时，底部把手不压住返回按钮 */
  .muninn { padding-bottom: var(--control-h); }
}

/* 中等宽度：侧边栏浮在上层，不再压缩主视图，避免仪表盘被挤变形 */
@media (min-width: 641px) and (max-width: 1040px) {
  body.mn-doc-open .page { margin-right: 0; }
}