/* Dream API 文档站样式
 *
 * 两条约束来自实测，不是猜测：
 *  1. Scalar 的 theme / darkMode / forceDarkModeState 配置项**全部无效**，
 *     主题靠 body 上的 .light-mode / .dark-mode 类切换 → 只能自己接管。
 *  2. 变量名以运行时 dump 为准：--scalar-color-1/2/3、--scalar-background-1/2/3、
 *     --scalar-border-color、--scalar-sidebar-*（早期假设的 --scalar-color-accent 并不存在）。
 *
 * 品牌色取自主站 dreamat.fun 的 landing tokens，保证两站是一家。
 */

:root {
  /* 主站 landing/tokens.ts 的真实取值 */
  --dm-canvas: #030303;
  --dm-panel: #0b0b0b;
  --dm-lime: #baf35c;
  --dm-violet: #a855f7;
  --dm-cream: #f5f5ef;
  --dm-hairline: #272727;
  --dm-edge: #3a3a3a;
  --dm-meta: #8f918b;
  --dm-veil: #9ea09a;

  --dm-topbar-h: 56px;
  --dm-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
    'Hiragino Sans GB', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
  --dm-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas,
    'Liberation Mono', monospace;
}

/* ---------------------------------------------------------------- 主题
 * body 上加 .dm-dark 时，把 Scalar 的 token 一起翻转。
 * Scalar 自己能识别 .dark-mode，两个类一起挂最稳。
 */
body.dm-light {
  background: #fff;
  color: #1b1b1b;
  --dm-bg: #fff;
  --dm-bg-soft: #f6f6f6;
  --dm-text: #1b1b1b;
  --dm-text-dim: #757575;
  --dm-line: #e5e5e5;
  --dm-topbar-bg: rgba(255, 255, 255, 0.88);
}

body.dm-dark {
  background: var(--dm-canvas);
  color: var(--dm-cream);
  --dm-bg: var(--dm-canvas);
  --dm-bg-soft: var(--dm-panel);
  --dm-text: var(--dm-cream);
  --dm-text-dim: var(--dm-meta);
  --dm-line: var(--dm-hairline);
  --dm-topbar-bg: rgba(3, 3, 3, 0.82);
}

/* Scalar 在深色下用的是一套偏灰的黑（#0f0f0f），压到主站的纯黑更统一 */
body.dm-dark {
  --scalar-background-1: #030303;
  --scalar-background-2: #0b0b0b;
  --scalar-background-3: #141414;
  --scalar-border-color: #272727;
  --scalar-color-1: #f5f5ef;
  --scalar-color-2: #9ea09a;
  --scalar-color-3: #8f918b;
  --scalar-sidebar-background-1: #030303;
  --scalar-sidebar-color-1: #f5f5ef;
  --scalar-sidebar-color-2: #9ea09a;
  --scalar-sidebar-border-color: #272727;
}

body.dm-light {
  --scalar-sidebar-border-color: #e5e5e5;
}

body {
  margin: 0;
  font-family: var(--dm-font);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- 顶栏 */
.dm-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--dm-topbar-h);
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  background: var(--dm-topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--dm-line);
}

.dm-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--dm-text);
  flex: none;
}

/* 主站 logo（紫色梯形 + dr 字标）。图片自带底色，圆角裁剪即可，
 * 不要额外加 background —— 浅色/深色两种主题下都能正常显示。 */
.dm-brand-logo {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  object-fit: cover;
  flex: none;
  display: block;
}

.dm-brand-name {
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.dm-brand-sub {
  font-size: 12px;
  color: var(--dm-text-dim);
  padding-left: 9px;
  border-left: 1px solid var(--dm-line);
}

.dm-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}

.dm-tab {
  font-size: 13.5px;
  padding: 6px 12px;
  border-radius: 7px;
  text-decoration: none;
  color: var(--dm-text-dim);
  white-space: nowrap;
}

.dm-tab:hover {
  color: var(--dm-text);
  background: var(--dm-bg-soft);
}

.dm-tab.is-active {
  color: var(--dm-text);
  background: var(--dm-bg-soft);
  font-weight: 600;
}

.dm-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dm-ghost-btn {
  font: inherit;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 7px;
  border: 1px solid var(--dm-line);
  background: transparent;
  color: var(--dm-text-dim);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.dm-ghost-btn:hover {
  color: var(--dm-text);
  border-color: var(--dm-edge);
}

/* ------------------------------------------------- 指南页（Markdown） */
.dm-guide {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 40px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 20px 96px;
  align-items: start;
}

.dm-guide-nav {
  position: sticky;
  top: calc(var(--dm-topbar-h) + 24px);
  font-size: 13.5px;
}

.dm-guide-nav-title {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--dm-text-dim);
  margin-bottom: 10px;
}

.dm-guide-nav a {
  display: block;
  padding: 6px 10px;
  border-radius: 7px;
  color: var(--dm-text-dim);
  text-decoration: none;
  line-height: 1.45;
}

.dm-guide-nav a:hover {
  color: var(--dm-text);
  background: var(--dm-bg-soft);
}

.dm-guide-nav a.is-active {
  color: var(--dm-text);
  background: var(--dm-bg-soft);
  font-weight: 600;
}

/* 目录里的二级锚点 */
.dm-guide-nav .dm-sub {
  padding-left: 20px;
  font-size: 12.5px;
  opacity: 0.85;
}

.dm-guide-body {
  min-width: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--dm-text);
}

.dm-guide-body h1 {
  font-size: 30px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.dm-guide-body h1 + p {
  color: var(--dm-text-dim);
  font-size: 15.5px;
  margin-top: 0;
}

.dm-guide-body h2 {
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 44px 0 12px;
  padding-top: 18px;
  border-top: 1px solid var(--dm-line);
}

.dm-guide-body h3 {
  font-size: 16.5px;
  margin: 28px 0 8px;
}

.dm-guide-body h4 {
  font-size: 15px;
  margin: 22px 0 6px;
}

.dm-guide-body a {
  color: var(--dm-violet);
  text-decoration: none;
  border-bottom: 1px solid rgba(168, 85, 247, 0.35);
}

body.dm-dark .dm-guide-body a {
  color: #c99bfa;
}

.dm-guide-body p,
.dm-guide-body li {
  color: var(--dm-text);
}

.dm-guide-body strong {
  font-weight: 650;
}

.dm-guide-body code {
  font-family: var(--dm-mono);
  font-size: 0.88em;
  padding: 2px 5px;
  border-radius: 5px;
  background: var(--dm-bg-soft);
  border: 1px solid var(--dm-line);
}

.dm-guide-body pre {
  background: var(--dm-bg-soft);
  border: 1px solid var(--dm-line);
  border-radius: 10px;
  padding: 14px 16px;
  overflow-x: auto;
  line-height: 1.6;
}

.dm-guide-body pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12.8px;
}

.dm-guide-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin: 16px 0;
  display: block;
  overflow-x: auto;
}

.dm-guide-body th,
.dm-guide-body td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--dm-line);
  vertical-align: top;
}

.dm-guide-body th {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dm-text-dim);
  font-weight: 600;
}

.dm-guide-body blockquote {
  margin: 18px 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--dm-lime);
  color: var(--dm-text-dim);
}

.dm-guide-body hr {
  border: 0;
  border-top: 1px solid var(--dm-line);
  margin: 34px 0;
}

.dm-guide-body img {
  max-width: 100%;
}

.dm-guide-body ul,
.dm-guide-body ol {
  padding-left: 22px;
}

.dm-guide-body li {
  margin: 5px 0;
}

/* 页脚：翻上一篇 / 下一篇 */
.dm-pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--dm-line);
  font-size: 13.5px;
}

.dm-pager a {
  color: var(--dm-text-dim);
  text-decoration: none;
}

.dm-pager a:hover {
  color: var(--dm-text);
}

/* --------------------------------------------------- 接口参考（Scalar）
 * 把 Scalar 自带的「对外 SaaS」痕迹收掉：它默认露出一排
 * Developer Tools / Configure / Share / Deploy 与 Powered by 页脚，
 * 那是给试用者看的，不该出现在对外文档站。
 */
.dm-scope .t-doc__header,
.dm-scope .api-reference-toolbar {
  display: none !important;
}

.dm-scope .references-layout {
  --refs-header-height: 0px !important;
}

/* 「Download OpenAPI Document」按钮 + 框架自带的署名/法务链接 */
.dm-scope .download-container,
.dm-scope .disclaimerLink,
.dm-scope a[href*='scalar.com/legal'],
.dm-scope a[href='https://www.scalar.com'],
.dm-scope a[href='https://www.scalar.com/'] {
  display: none !important;
}

/* Scalar 自带顶栏已隐藏，这里给它留出与自家顶栏衔接的空间 */
.dm-scope {
  min-height: calc(100vh - var(--dm-topbar-h));
}

/* 「MCP 客户端」入口条（VS Code / Cursor / Generate MCP）与 Powered by 页脚。
 * why 用 CSS 兜住而不只靠 JS 清理：这几个入口在不同 Scalar 版本里换过标签 —— 
 * VS Code / Cursor 是 <button>，而 Generate MCP 是 <div class="scalar-mcp-layer-link">，
 * 只遍历 a,button 的清理逻辑会漏掉 div 那个。CSS 按 class 命中，与标签无关。 */
.dm-scope .scalar-mcp-layer,
.dm-scope .scalar-mcp-layer-link,
.dm-scope .powered-by-scalar,
.dm-scope a[href*='scalar.com'] {
  display: none !important;
}

/* 「Ask AI Agent」输入框：Scalar 的云端 AI 功能，会出现在**每个接口的请求示例卡片**里
 * （form.agent-button-container，和 Send Request / Copy 挤在同一排）。
 * 自建文档站不该暴露第三方 AI 入口，而且它只有英文标签。 */
.dm-scope .agent-button-container {
  display: none !important;
}

/* 侧边栏与主站一致：发丝线 + 无圆角块 */
body.dm-dark .dm-scope .t-doc__sidebar {
  background: var(--dm-canvas);
  border-right: 1px solid var(--dm-hairline);
}

body.dm-light .dm-scope .t-doc__sidebar {
  background: #fff;
  border-right: 1px solid #e5e5e5;
}

/* 移动端 */
@media (max-width: 900px) {
  .dm-guide {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .dm-guide-nav {
    position: static;
    margin-bottom: 26px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--dm-line);
  }
  .dm-brand-sub {
    display: none;
  }
}