/**
 * MD2Card Pro — 知识卡片 UI（导出 / 预览通用）
 * 设计原则：8px 网格、清晰层级、中性底 + 单accent、中西文混排可读性优先
 *
 * 正文字体：悠哉 Light（@chinese-fonts/yozai 分片，SIL OFL），目录 fonts/yozai-light/；
 * 预览用 @import result.css；Playwright 导出由 md2card_export_all_png 内嵌为 data URL。
 */

@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap");
@import url("fonts/yozai-light/result.css");

:root {
  --pro-space: 8px;
  --pro-radius: 20px;
  --pro-radius-sm: 10px;
  --pro-maxw: 920px;

  --pro-bg-canvas: #eceff3;
  --pro-bg-card: #ffffff;
  --pro-bg-elevated: #f8fafc;
  --pro-bg-code: #f1f5f9;

  --pro-text: #0f172a;
  --pro-text-secondary: #475569;
  --pro-text-muted: #94a3b8;

  --pro-accent: #4f46e5;
  --pro-accent-soft: rgba(79, 70, 229, 0.1);
  --pro-accent-line: rgba(79, 70, 229, 0.35);

  --pro-border: #e2e8f0;
  --pro-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.06),
    0 24px 48px -12px rgba(15, 23, 42, 0.12);
  --pro-font: "Yozai Light", "悠哉体 Light", "悠哉 Light", "DM Sans", "Noto Sans SC",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, sans-serif;
}

/* ========== 单张卡片外壳 ========== */
.pro-card {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--pro-maxw);
  margin: 0 auto;
  background: var(--pro-bg-card);
  border-radius: var(--pro-radius);
  box-shadow: var(--pro-shadow);
  border: 1px solid rgba(15, 23, 42, 0.06);
  overflow: hidden;
  font-family: var(--pro-font);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--pro-text);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* 顶栏色带 + 内边距 */
.pro-card__top {
  flex-shrink: 0;
  height: 5px;
  background: linear-gradient(
    90deg,
    var(--pro-accent) 0%,
    #6366f1 45%,
    #a5b4fc 100%
  );
}

.pro-card__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: calc(var(--pro-space) * 6) calc(var(--pro-space) * 6)
    calc(var(--pro-space) * 5);
}

/* 窄画布：flex 子项可收缩；正文优先换行，公式由 density-fill 按块单独 zoom */
.pro-card__content {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: auto;
}

/* ========== Markdown 流式内容 ========== */
.pro-card__content > *:first-child {
  margin-top: 0;
}

.pro-card__content > *:last-child {
  margin-bottom: 0;
}

.pro-card__content h1 {
  font-family: var(--pro-font);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 calc(var(--pro-space) * 3);
  color: var(--pro-text);
}

.pro-card__content h2 {
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.35;
  margin: calc(var(--pro-space) * 5) 0 calc(var(--pro-space) * 2);
  padding-left: calc(var(--pro-space) * 2);
  border-left: 4px solid var(--pro-accent);
  color: var(--pro-text);
}

.pro-card__content h2:first-of-type {
  margin-top: 0;
}

.pro-card__content h3 {
  font-size: 1.08rem;
  font-weight: 600;
  margin: calc(var(--pro-space) * 4) 0 calc(var(--pro-space) * 1.5);
  color: var(--pro-text-secondary);
}

.pro-card__content h4 {
  font-size: 1rem;
  font-weight: 600;
  margin: calc(var(--pro-space) * 3) 0 calc(var(--pro-space) * 1);
  color: var(--pro-text-secondary);
}

.pro-card__content p {
  margin: 0 0 calc(var(--pro-space) * 2.5);
  color: var(--pro-text);
}

.pro-card__content strong {
  font-weight: 600;
  color: var(--pro-text);
  background: var(--pro-accent-soft);
  padding: 0.08em 0.35em;
  border-radius: 6px;
}

.pro-card__content em {
  color: #6d28d9;
  font-style: italic;
}

.pro-card__content a {
  color: var(--pro-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 列表 */
.pro-card__content ul,
.pro-card__content ol {
  margin: 0 0 calc(var(--pro-space) * 2.5);
  padding-left: 1.35em;
}

.pro-card__content li {
  margin-bottom: calc(var(--pro-space) * 1.75);
}

.pro-card__content ul li::marker {
  color: var(--pro-accent);
  font-size: 0.85em;
}

.pro-card__content ol li::marker {
  color: var(--pro-accent);
  font-weight: 600;
}

/* 引用 */
.pro-card__content blockquote {
  margin: calc(var(--pro-space) * 3) 0;
  padding: calc(var(--pro-space) * 2) calc(var(--pro-space) * 3);
  border-left: 4px solid var(--pro-accent-line);
  background: var(--pro-bg-elevated);
  border-radius: 0 var(--pro-radius-sm) var(--pro-radius-sm) 0;
  color: var(--pro-text-secondary);
}

.pro-card__content blockquote p:last-child {
  margin-bottom: 0;
}

/* 代码 */
.pro-card__content code {
  font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas,
    monospace;
  font-size: 0.88em;
  background: var(--pro-bg-code);
  padding: 0.15em 0.45em;
  border-radius: 6px;
  border: 1px solid var(--pro-border);
}

.pro-card__content pre {
  margin: calc(var(--pro-space) * 3) 0;
  padding: calc(var(--pro-space) * 3);
  background: #0f172a;
  color: #e2e8f0;
  border-radius: var(--pro-radius-sm);
  overflow-x: hidden;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.86em;
  line-height: 1.55;
}

.pro-card__content pre code {
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* 表格 */
.pro-card__content table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin: calc(var(--pro-space) * 3) 0;
  font-size: 0.92em;
}

.pro-card__content th,
.pro-card__content td {
  border: 1px solid var(--pro-border);
  padding: calc(var(--pro-space) * 1.5) calc(var(--pro-space) * 2);
  text-align: left;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.pro-card__content th {
  background: var(--pro-bg-elevated);
  font-weight: 600;
}

.pro-card__content tr:nth-child(even) td {
  background: rgba(248, 250, 252, 0.6);
}

/* 公式：无横条；过宽优先由 density-fill 仅对该块下调 zoom，正文字号尽量保持 */
.pro-card__content .katex-display {
  margin: calc(var(--pro-space) * 2) 0;
  overflow-x: hidden;
  max-width: 100%;
}

/* 水平线（卡内一般不应出现） */
.pro-card__content hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pro-border),
    transparent
  );
  margin: calc(var(--pro-space) * 4) 0;
}

/* ========== 页脚 ========== */
.pro-card__foot {
  flex-shrink: 0;
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pro-space) * 2.5) calc(var(--pro-space) * 6);
  border-top: 1px solid var(--pro-border);
  background: linear-gradient(180deg, #fafbfc 0%, #fff 100%);
  font-size: 13px;
  color: var(--pro-text-muted);
  letter-spacing: 0.04em;
}

.pro-card__brand {
  font-weight: 600;
  color: var(--pro-text-secondary);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.pro-card__progress {
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: var(--pro-text-secondary);
}

/* ========== Playwright 导出用外壳 ========== */
body.pro-export {
  margin: 0;
  padding: calc(var(--pro-space) * 4);
  background: var(--pro-bg-canvas);
  min-height: min-content;
}

body.pro-export .pro-export-wrap {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* 固定比例预览：与导出 fixed 画布一致，略减内边距以提高正文占比 */
#deck[data-size-mode="fixed"] article.pro-card .pro-card__body {
  padding: calc(var(--pro-space) * 4) calc(var(--pro-space) * 5)
    calc(var(--pro-space) * 4);
}
#deck[data-size-mode="fixed"] article.pro-card .pro-card__foot {
  padding: calc(var(--pro-space) * 2) calc(var(--pro-space) * 5);
}

/* 固定画布：正文区在 md2card-pro-density-fill.js 中设为 flex，内容块勿被压扁 */
body.pro-export--fixed article.pro-card .pro-card__content,
#deck[data-size-mode="fixed"] article.pro-card .pro-card__content {
  flex-shrink: 0;
}

/* ========== 多卡预览（md2card_local_generate --theme pro）========== */
body.md2card-pro-preview {
  margin: 0;
  min-height: 100vh;
  background: var(--pro-bg-canvas);
}

body.md2card-pro-preview .deck {
  margin: 0;
  padding: calc(var(--pro-space) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--pro-space) * 4);
  box-sizing: border-box;
}

body.md2card-pro-preview .footer-meta {
  text-align: center;
  padding: calc(var(--pro-space) * 3);
  font-size: 13px;
  color: var(--pro-text-muted);
  font-family: var(--pro-font);
}