/* =========================================================
   统一弹窗骨架（配合 js/modal.js）
   ---------------------------------------------------------
   这里只定义外壳与排版，三种外观用 .md--card / .md--paper /
   .md--story 区分。正文内容由调用方塞 HTML，通用段落用 .md-para。
   ========================================================= */

/* ---------- 基座 ---------- */
.md-veil {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.17s ease;
}

.md-veil.show { display: flex; }
.md-veil.on { opacity: 1; }

.md-sheet {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* 这四块默认可见，没内容时由 JS 显式收起来。
   反过来写（CSS 默认 none、JS 置空恢复）会因为 inline '' 回落到 none 而永远不显示。 */
.md-head,
.md-title,
.md-foot {
  flex-shrink: 0;
}

.md-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

.md-act,
.md-close {
  justify-content: center;
  flex-shrink: 0;
}

.md-act {
  margin-bottom: 6px;
  border-color: var(--border-light);
  color: #fff;
}

/* ================= 外观 1：card · 档案弹窗 ================= */
.md--card {
  z-index: 200;
  padding: 20px;
  background: rgba(0, 0, 0, 0.7);
  transition: none;
}

.md--card .md-sheet {
  max-width: 420px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border-light);
}

.md--card .md-title {
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
}

.md--card .md-meta {
  font-size: 10px;
  color: var(--text-dim);
  font-family: monospace;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}

.md--card .md-text {
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 14px;
}

/* ================= 外观 2：paper · 拆封面板 / 过场文书 ================= */
.md--paper {
  z-index: 400;
  padding: 18px;
  background: rgba(4, 5, 6, 0.87);
}

.md--paper .md-sheet {
  max-width: 420px;
  max-height: 80vh;
  padding: 14px;
  background: #0b0c0f;
  border: 1px solid var(--border-light);
  border-top: 2px solid #cfd5dd;
  transform: translateY(10px) scale(0.99);
  transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.md--paper.on .md-sheet {
  transform: none;
}

.md--paper .md-title {
  font-size: 12px;
  color: #fff;
  letter-spacing: 1.5px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.md--paper .md-body {
  margin: 10px 0 12px;
}

.md--paper .md-foot {
  font-family: monospace;
  font-size: 9px;
  color: var(--text-dim);
  line-height: 1.7;
  margin-bottom: 10px;
}

/* ================= 外观 3：story · 频道接入过场 ================= */
.md--story {
  z-index: 300;
  padding: 20px;
  background: rgba(4, 5, 7, 0.92);
  transition: none;
}

.md--story .md-sheet {
  max-width: 380px;
  padding: 18px 16px 14px;
  background: #0b0d10;
  border: 1px solid var(--border-light);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 24px 60px -20px #000;
  animation: mdIn 0.28s ease both;
}

@keyframes mdIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.md--story .md-head {
  font-size: 9.5px;
  font-family: monospace;
  letter-spacing: 3px;
  color: var(--accent);
  margin-bottom: 13px;
}

.md--story .md-body {
  margin-bottom: 4px;
}

.md--story .md-para {
  font-size: 11px;
  font-family: monospace;
  line-height: 1.9;
  color: #b9c0ca;
  margin-bottom: 9px;
}

/* ================= 通用段落（paper / story 共用） =================
   放在外观块之后：同为 0,2,0 的权重，靠顺序覆盖上面的基础字号与颜色。 */
.md-para {
  font-size: 12px;
  line-height: 1.9;
  color: var(--text);
  margin-bottom: 9px;
}

.md-para.dim {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: 14px;
  margin-bottom: 0;
  padding-top: 11px;
  border-top: 1px dashed var(--border);
  line-height: 1.8;
}

.md-para.quote {
  color: #e6e9ee;
  border-left: 2px solid var(--accent);
  padding-left: 9px;
  margin: 12px 0;
}

.md-para.tail {
  color: var(--text-dim);
  font-size: 10px;
  margin-bottom: 15px;
}