/* ============================================================
   OwnUI · 文档站样式（docs.css）
   本文件只服务文档站，不属于组件库发布物。
   ============================================================ */

body { background: var(--ui-bg); }

/* ---------- 顶部栏 ---------- */
.doc-navbar .ui-navbar__inner { height: 60px; }
.doc-brand-sub {
  font-size: var(--ui-type-caption);
  color: var(--ui-text-3);
  padding-left: var(--ui-space-2);
  border-left: 1px solid var(--ui-border);
  margin-left: var(--ui-space-2);
}
@media (max-width: 640px) { .doc-brand-sub { display: none; } }

/* ---------- 外壳 ---------- */
.doc-shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  gap: var(--ui-space-10);
  max-width: var(--ui-container-wide);
  margin: 0 auto;
  padding: 0 var(--ui-page-gutter);
  align-items: start;
}
@media (max-width: 1024px) {
  .doc-shell { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* ---------- 侧栏 ---------- */
.doc-side {
  position: sticky;
  top: 76px;
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ui-space-4) var(--ui-space-2) var(--ui-space-8) 0;
  /* 原生 thin 在 Windows 上是一条 10px 的实心深色条，紧贴正文非常抢眼。
     这里换成"透明轨 + 内缩胶囊滑块"：常态极淡，hover 侧栏时加深，指到滑块才变实。 */
  scrollbar-width: thin;
  scrollbar-color: var(--ui-border) transparent;
}
.doc-side:hover { scrollbar-color: var(--ui-border-strong) transparent; }
.doc-side::-webkit-scrollbar { width: 10px; }
.doc-side::-webkit-scrollbar-track { background: transparent; }
.doc-side::-webkit-scrollbar-thumb {
  background: var(--ui-border);
  border: 3px solid transparent;
  border-radius: var(--ui-radius-pill);
  background-clip: content-box;
}
.doc-side:hover::-webkit-scrollbar-thumb { background: var(--ui-border-strong); background-clip: content-box; }
.doc-side::-webkit-scrollbar-thumb:hover { background: var(--ui-text-3); background-clip: content-box; }
@media (max-width: 1024px) { .doc-side { display: none; } }

/* 分组标题吸附在侧栏顶部：滚动长目录时始终知道自己在哪个分区。
   底色必须不透明，否则滚动的内容会从标题底下透出来。 */
.doc-side .ui-sidenav__label {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: var(--ui-space-2);
  padding-bottom: var(--ui-space-2);
  background: var(--ui-bg);
}

.doc-side__search { margin-bottom: var(--ui-space-4); }
.doc-side__inner { padding-right: 0; }
.doc-side__empty {
  font-size: var(--ui-type-body-sm);
  color: var(--ui-text-3);
  padding: var(--ui-space-3);
  display: none;
}
.doc-side__empty.is-show { display: block; }

/* 移动端抽屉里的侧栏 */
.doc-drawer .ui-drawer__panel { width: min(88vw, 320px); }
.doc-drawer .ui-drawer__body { padding: var(--ui-space-4); }
/* 抽屉里的站点导航与页面目录之间拉一条分隔：两者层级不同，不加线会看成一串 */
.doc-drawer__site {
  margin-bottom: var(--ui-space-4);
  padding-bottom: var(--ui-space-4);
  border-bottom: 1px solid var(--ui-border);
}
/* 抽屉是触屏场景，条目回到 40px 命中高度 */
.doc-drawer .ui-sidenav__item { min-height: var(--ui-control-h); }

/* ---------- 主区 ---------- */
.doc-main { min-width: 0; padding: var(--ui-space-10) 0 var(--ui-space-16); }
@media (max-width: 1024px) { .doc-main { padding-top: var(--ui-space-6); } }

.doc-hero { padding-bottom: var(--ui-space-10); border-bottom: 1px solid var(--ui-border); }
.doc-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--ui-space-3); font-size: var(--ui-type-h3); font-weight: var(--ui-fw-semibold); letter-spacing: -.01em; color: var(--ui-text); margin-bottom: var(--ui-space-4); }
.doc-hero__badges { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; margin-bottom: var(--ui-space-5); }
.doc-hero .ui-hero__title { max-width: 24ch; }
.doc-hero__actions { display: flex; gap: var(--ui-space-3); flex-wrap: wrap; margin-top: var(--ui-space-8); }
.doc-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ui-space-6); margin-top: var(--ui-space-10); }

.doc-section { padding: var(--ui-space-12) 0; border-bottom: 1px solid var(--ui-border); scroll-margin-top: 76px; }
.doc-section:last-of-type { border-bottom: none; }
.doc-section__head { margin-bottom: var(--ui-space-8); }
.doc-section__eyebrow {
  font-size: var(--ui-type-overline);
  font-weight: var(--ui-fw-semibold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  margin-bottom: var(--ui-space-2);
}
.doc-section__title { font-size: var(--ui-fs-24); line-height: var(--ui-lh-24); font-weight: var(--ui-fw-bold); letter-spacing: -.02em; }
.doc-section__desc { margin-top: var(--ui-space-3); font-size: var(--ui-fs-14); color: var(--ui-text-2); max-width: 72ch; line-height: var(--ui-lh-14); }

/* 组件条目 */
.doc-comp { padding: var(--ui-space-8) 0; border-top: 1px solid var(--ui-border); scroll-margin-top: 76px; }
.doc-comp:first-of-type { border-top: none; padding-top: 0; }
.doc-comp__title {
  display: flex;
  align-items: center;
  gap: var(--ui-space-3);
  font-size: var(--ui-fs-16);
  font-weight: var(--ui-fw-semibold);
  margin-bottom: var(--ui-space-2);
}
.doc-comp__title code {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-type-caption);
  font-weight: var(--ui-fw-regular);
  color: var(--ui-text-3);
  background: var(--ui-surface-3);
  padding: 2px 6px;
  border-radius: var(--ui-radius-xs);
}
.doc-comp__desc { font-size: var(--ui-type-body-sm); color: var(--ui-text-2); line-height: var(--ui-lh-13); max-width: 76ch; margin-bottom: var(--ui-space-5); }

/* 预览面板 */
.doc-demo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-4);
  padding: var(--ui-space-6);
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
}
/* 注意：列向 flex 必须显式关掉 wrap。带 wrap 的列向容器会把子项按行分配高度，
   导致面板被撑高出一大截空白（实测表单演示面板从 228px 涨到 404px）。 */
.doc-demo--stack { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
.doc-demo--center { justify-content: center; }
.doc-demo--flush { padding: 0; overflow: hidden; display: block; }
.doc-demo--grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.doc-demo__label {
  position: absolute;
  top: var(--ui-space-2);
  right: var(--ui-space-3);
  font-family: var(--ui-font-mono);
  font-size: 10px;
  color: var(--ui-text-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.doc-demo + .doc-demo { margin-top: var(--ui-space-4); }
.doc-demo-cell { display: flex; flex-direction: column; gap: var(--ui-space-2); align-items: flex-start; }
.doc-demo-cell > .doc-demo__tag { font-family: var(--ui-font-mono); font-size: 10px; color: var(--ui-text-3); }
.doc-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--ui-space-4); }

/* 代码块 */
.doc-code { margin-top: var(--ui-space-4); }
.doc-code__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-3);
  padding: 0 var(--ui-space-2) var(--ui-space-2);
}
.doc-code__label { font-family: var(--ui-font-mono); font-size: var(--ui-type-caption); color: var(--ui-text-3); }
.doc-code .ui-codeblock { max-height: 420px; }

/* 规格表 */
.doc-spec { margin-top: var(--ui-space-5); }
.doc-spec__title { font-size: var(--ui-type-body-sm); font-weight: var(--ui-fw-semibold); margin-bottom: var(--ui-space-3); }
.doc-spec .ui-table-wrap { box-shadow: none; }
.doc-spec .ui-table th, .doc-spec .ui-table td { white-space: normal; }
.doc-spec .ui-table td:first-child { font-family: var(--ui-font-mono); font-size: var(--ui-type-body-sm); color: var(--ui-text); white-space: nowrap; }
.doc-spec .ui-table td:last-child { color: var(--ui-text-2); font-size: var(--ui-type-body-sm); }

/* 状态矩阵 */
.doc-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--ui-space-3); margin-top: var(--ui-space-5); }
.doc-state-cell {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-2);
  padding: var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-block);
}
.doc-state-cell > span:last-child { font-family: var(--ui-font-mono); font-size: 10px; color: var(--ui-text-3); }

/* 色板 */
.doc-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--ui-space-3); }
.doc-swatch { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-block); overflow: hidden; background: var(--ui-surface); }
.doc-swatch__chip { height: 52px; }
.doc-swatch__body { padding: var(--ui-space-2) var(--ui-space-3); }
.doc-swatch__name { font-family: var(--ui-font-mono); font-size: 11px; color: var(--ui-text); }
.doc-swatch__val { font-family: var(--ui-font-mono); font-size: 10px; color: var(--ui-text-3); }

/* 排版 / 间距 / 圆角 / 阴影 示例 */
.doc-type-row { display: flex; align-items: baseline; gap: var(--ui-space-6); padding: var(--ui-space-3) 0; border-bottom: 1px solid var(--ui-border); }
.doc-type-row:last-child { border-bottom: none; }
.doc-type-row__sample { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-type-row__meta { flex: none; width: 220px; font-family: var(--ui-font-mono); font-size: var(--ui-type-caption); color: var(--ui-text-3); text-align: right; }
@media (max-width: 640px) { .doc-type-row__meta { width: 120px; } }

.doc-space-row { display: flex; align-items: center; gap: var(--ui-space-4); padding: 5px 0; }
.doc-space-bar { height: 16px; background: var(--ui-primary-weak); border: 1px solid var(--ui-primary-border); border-radius: var(--ui-radius-xs); flex: none; }
.doc-space-label { font-family: var(--ui-font-mono); font-size: var(--ui-type-caption); color: var(--ui-text-2); }

.doc-radius-row, .doc-shadow-row { display: flex; flex-wrap: wrap; gap: var(--ui-space-4); }
.doc-radius-demo {
  display: grid;
  place-items: center;
  width: 104px; height: 72px;
  background: var(--ui-primary-weak);
  border: 1px solid var(--ui-primary-border);
  font-family: var(--ui-font-mono);
  font-size: 11px;
  color: var(--ui-text);
}
.doc-shadow-demo {
  display: grid;
  place-items: center;
  width: 150px; height: 84px;
  background: var(--ui-surface);
  border-radius: var(--ui-radius-card);
  font-family: var(--ui-font-mono);
  font-size: 11px;
  color: var(--ui-text-2);
}

/* 主色试验台 */
.doc-accent-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-4);
  padding: var(--ui-space-5);
  background: var(--ui-surface);
  border: 1px dashed var(--ui-border-strong);
  border-radius: var(--ui-radius-card);
  margin-top: var(--ui-space-4);
}
.doc-accent-preview {
  flex: 1;
  min-width: 260px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-block);
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
}
.doc-accent-input { max-width: 160px; }
.doc-accent-row { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }
.doc-accent-presets { display: flex; gap: var(--ui-space-2); flex-wrap: wrap; }
.doc-accent-dot {
  width: 28px; height: 28px;
  border-radius: var(--ui-radius-pill);
  border: 2px solid var(--ui-surface);
  box-shadow: 0 0 0 1px var(--ui-border-strong);
  cursor: pointer;
}
/* 触屏下 28×28 的色点达不到命中区底线：视觉不变，用居中 44×44 的透明方框撑开；
   同时把色点间距抬到 16px，保证相邻命中框不重叠（28 + 16 = 44）。 */
@media (pointer: coarse) {
  .doc-accent-dot { position: relative; }
  .doc-accent-dot::before {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: var(--ui-hit-min); height: var(--ui-hit-min);
    transform: translate(-50%, -50%);
  }
  .doc-accent-presets { gap: var(--ui-space-4); }
}

/* 主色预设开关（导航栏 ≥641px / 抽屉底部 ≤640px）
   ------------------------------------------------------------
   窄屏为什么不上导航栏：实测 320px 视口下导航栏已经零余量
   （品牌 82 + actions 182 + 间距 40 = 304，容器 320），再塞一个
   44px 图标按钮需要 372px，必然溢出。所以窄屏改由抽屉底部承载同一组选项，
   两边共用 data-accent-option 与同一段 JS 同步选中态。 */
.doc-accent-picker,
.doc-accent-mobile { display: none; }

@media (min-width: 641px) { .doc-accent-picker { display: inline-flex; } }
@media (max-width: 640px) { .doc-accent-mobile { display: block; } }

/* 开关上的实时色点：直接吃 --ui-primary，所以主色与深浅色一切换它自己就跟着走，
   JS 不需要碰它。外圈描边是为了深色模式下"白点压在黑导航栏上"也有边界。 */
.doc-accent-picker__dot {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  box-shadow: 0 0 0 1px var(--ui-border);
  transition: background-color var(--ui-dur-1) var(--ui-ease-out);
}

/* 菜单项里的静态色块：必须写死各预设的 600 档——它要展示的是"别的颜色长什么样"，
   不能跟着当前主色走，所以这里不能用 --ui-primary。 */
.doc-accent-swatch {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: var(--ui-radius-pill);
  box-shadow: 0 0 0 1px var(--ui-border);
}
.doc-accent-menu { min-width: 168px; }
/* 开关贴着导航栏右缘，浮层改为右对齐，否则 180px 的菜单会顶出视口 */
.doc-accent-menu { left: auto; right: 0; }

.doc-accent-mobile {
  padding: var(--ui-space-3) var(--ui-space-4) var(--ui-space-4);
  border-top: 1px solid var(--ui-border);
  flex: none;
}
.doc-accent-mobile__title {
  font-size: var(--ui-type-overline);
  font-weight: var(--ui-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-3);
  margin-bottom: var(--ui-space-3);
}

/* 选中态：色点加一圈主色外环。用 box-shadow 而非 border，
   避免 2px 边框把 28px 的圆点压小 */
.doc-accent-dot[aria-checked="true"] { box-shadow: 0 0 0 2px var(--ui-surface), 0 0 0 4px var(--ui-primary); }

/* 调色板（自绘浮层，文档站专有）
   ------------------------------------------------------------
   为什么不用原生 <input type="color">：它弹出的是系统对话框，站内拿不到
   实时预览、样式完全不可控，也和本站自己的浮层体系不是一套。自绘还能顺手
   显示对比度读数——这正是「为什么会自动改色」的可预期性来源。

   为什么放 docs.css 而不是 library/：它是文档站的换肤工具，不是通用组件。
   放进库就得进发布物、要过整套发布审计，而它对任何接入方都没用。 */
.doc-accent-chip {
  flex: none;
  display: block;
  width: 14px;
  height: 14px;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  box-shadow: 0 0 0 1px var(--ui-border-strong);
}
.doc-accent-mobile__palette { margin-top: var(--ui-space-4); }

.doc-palette {
  position: fixed;
  /* 用 modal 层而不是 dropdown 层：窄屏的入口在抽屉里，抽屉自己就是 z-modal，
     而它是 --ui-z-overlay 之上的全屏层；停在 60 会被盖住，拖色时看不见预览。
     与抽屉同级、靠 docs.css 后加载取胜；又低于 toast(110)，提示不会被压掉。 */
  z-index: var(--ui-z-modal);
  width: 248px;
  padding: var(--ui-space-3);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-block);
  box-shadow: var(--ui-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--ui-dur-2) var(--ui-ease-out),
              transform var(--ui-dur-2) var(--ui-ease-out),
              visibility var(--ui-dur-2);
}
.doc-palette.is-open { opacity: 1; visibility: visible; transform: none; }

.doc-palette__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-bottom: var(--ui-space-3);
}
.doc-palette__title {
  font-size: var(--ui-type-overline);
  font-weight: var(--ui-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ui-text-3);
}
/* .ui-icon-btn 基类没有 position:relative，命中区伪元素要靠它定位，这里补上。
   视觉 28px、命中区 28 + 8×2 = 44px，够到 --ui-hit-min 的底线。 */
.doc-palette__close { position: relative; width: 28px; height: 28px; }
.doc-palette__close::after { content: ""; position: absolute; inset: -8px; }

/* SV 面板：底色是纯色相，上面叠「向右压白」「向上压黑」两层。
   下面这些写死的 #FFF / #000 不是主题色，而是色彩空间的坐标轴本身，
   换成变量反而会把色域算错——和 .doc-accent-swatch 写死预设值是同一个道理。 */
.doc-palette__sv {
  position: relative;
  height: 128px;
  border-radius: var(--ui-radius-control);
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;   /* 不写死：触屏拖动会被页面滚动抢走，面板直接拖不动 */
}
.doc-palette__sv-fill { position: absolute; inset: 0; background: #FF0000; }
.doc-palette__sv-white { position: absolute; inset: 0; background: linear-gradient(to right, #FFF, rgba(255, 255, 255, 0)); }
.doc-palette__sv-black { position: absolute; inset: 0; background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)); }

.doc-palette__thumb {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: var(--ui-radius-pill);
  border: 2px solid #FFF;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .38);
  pointer-events: none;
}

/* 色相条同样写死 —— 它就是色相环的展开，走变量会失去意义 */
.doc-palette__hue {
  position: relative;
  height: 12px;
  margin-top: var(--ui-space-3);
  border-radius: var(--ui-radius-pill);
  cursor: pointer;
  touch-action: none;
  background: linear-gradient(to right,
    #FF0000 0%, #FFFF00 16.6%, #00FF00 33.3%, #00FFFF 50%,
    #0000FF 66.6%, #FF00FF 83.3%, #FF0000 100%);
}
.doc-palette__hue .doc-palette__thumb { top: 50%; }

.doc-palette__row {
  display: flex;
  align-items: center;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}
.doc-palette__preview {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: var(--ui-radius-control);
  box-shadow: 0 0 0 1px var(--ui-border-strong);
}
.doc-palette__hex {
  flex: 1;
  min-width: 0;
  font-family: var(--ui-font-mono);
  text-transform: uppercase;
}

.doc-palette__meta {
  display: flex;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
}
.doc-palette__ratio {
  flex: 1;
  padding: 3px var(--ui-space-2);
  border-radius: var(--ui-radius-control);
  background: var(--ui-surface-2);
  font-size: var(--ui-type-caption);
  color: var(--ui-text-3);
}
.doc-palette__ratio b {
  font-family: var(--ui-font-mono);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text-2);
}
/* 高亮实际生效的那一侧：引擎就是按这行读数决定用白字还是墨字的 */
.doc-palette__ratio.is-picked { background: var(--ui-primary-weak); color: var(--ui-text); }
.doc-palette__ratio.is-picked b { color: var(--ui-text); }

.doc-palette__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ui-space-2);
  margin-top: var(--ui-space-3);
  padding-top: var(--ui-space-3);
  border-top: 1px solid var(--ui-border);
}
/* flex:1 而不是靠父级 space-between：最近用色为空时它是一个 0 宽的元素，
   space-between 会让"恢复默认"跑到中间去。让它吃掉剩余空间，按钮就恒定贴右。 */
.doc-palette__recent { flex: 1; display: flex; gap: var(--ui-space-2); }
.doc-palette__recent-dot {
  width: 20px;
  height: 20px;
  border-radius: var(--ui-radius-pill);
  box-shadow: 0 0 0 1px var(--ui-border-strong);
  cursor: pointer;
}
/* 触屏命中区：视觉 20px 不变，用居中 44px 透明框撑开 */
@media (pointer: coarse) {
  .doc-palette__recent-dot { position: relative; }
  .doc-palette__recent-dot::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    width: var(--ui-hit-min); height: var(--ui-hit-min);
    transform: translate(-50%, -50%);
  }
}

/* 导出（文档站专有）
   「预览」借用库自带的折叠面板并默认收起：生成的 CSS 有五十来行，
   直接铺开会把这一节压得看不到底，而多数人只关心按钮能不能点。 */
.doc-export {
  margin-top: var(--ui-space-6);
  padding: var(--ui-space-4) var(--ui-space-4) var(--ui-space-1);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  background: var(--ui-surface);
}
.doc-export__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--ui-space-3) var(--ui-space-5); flex-wrap: wrap;
}
.doc-export__title { font-size: var(--ui-fs-15); font-weight: var(--ui-fw-semibold); color: var(--ui-text); }
.doc-export__sub { margin-top: 2px; font-size: var(--ui-type-caption); color: var(--ui-text-3); }
.doc-export__sub b { font-weight: var(--ui-fw-medium); color: var(--ui-text-2); font-family: var(--ui-font-mono); }
.doc-export__ops { display: flex; align-items: center; gap: var(--ui-space-2); flex-wrap: wrap; }
.doc-export__preview { margin-top: var(--ui-space-4); }
.doc-export__lines { font-size: var(--ui-type-caption); font-weight: var(--ui-fw-regular); color: var(--ui-text-3); }
.doc-export__code {
  margin: 0;
  max-height: 320px;
  overflow: auto;
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-code-bg);
  color: var(--ui-code-text);
  border-radius: var(--ui-radius-block);
  font-size: var(--ui-fs-12);
  line-height: 1.7;
  tab-size: 2;
}
.doc-export__code code { font-family: var(--ui-font-mono); white-space: pre; }

/* ============================================================
   首页落地页（docs/index.html 专有）
   ------------------------------------------------------------
   与其他三页不同，首页没有 .doc-shell 的两栏栅格，而是直接用
   .ui-container 铺满；首屏主体是一个「左调色右导出」的双栏。
   1023px 是本页的断点，与文档站侧栏收起（1024px）对齐。
   ============================================================ */
.doc-land { padding-bottom: var(--ui-space-16); }
.doc-land-hero { padding: var(--ui-space-12) 0 var(--ui-space-8); }
.doc-land-hero .ui-hero__title { max-width: 18ch; }

.doc-land-tool {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--ui-space-5);
  /* 不写 align-items: start —— 默认 stretch 让左右两张卡片等高、底边对齐；
     之前设了 start，右栏导出面板比左栏调色台短一截，页面右下角悬着一块空白，
     看起来像没排完版。 */
  scroll-margin-top: 76px;
}
@media (max-width: 1023px) {
  .doc-land-tool { grid-template-columns: minmax(0, 1fr); }
}

/* --- 调色台 ---
   与右栏导出面板用同一档内边距（space-5），两栏标题左边缘才能对齐。
   卡片本身是纵向 flex：底部注释行 margin-top:auto 吸底，
   右栏等高时左栏的注释也贴住卡片底边，两栏的「落款」在同一水平线上。 */
.doc-land-lab {
  padding: var(--ui-space-5);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
  display: flex;
  flex-direction: column;
}
.doc-land-lab__title { font-size: var(--ui-fs-15); font-weight: var(--ui-fw-semibold); color: var(--ui-text); }
.doc-land-lab__sub {
  margin-top: 2px;
  font-size: var(--ui-type-caption);
  line-height: 1.6;
  color: var(--ui-text-3);
}
.doc-land-lab__pick {
  margin-top: var(--ui-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
}
/* 自定义 hex 输入框撑满剩余宽度：固定 160px 会在「调色板 / 输入框 / 恢复默认」
   后面留出一截突兀的空白，整行看起来没排过版。 */
.doc-land-lab .doc-accent-input { flex: 1 1 140px; min-width: 120px; max-width: 220px; }
.doc-land-preview {
  margin-top: var(--ui-space-4);
  padding: var(--ui-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-block);
}
.doc-land-preview__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--ui-space-3); }
/* 预览里的输入框撑满剩余宽度，与上面几行一样「占满整行」，节奏才统一 */
.doc-land-preview .ui-input { flex: 1 1 180px; min-width: 160px; }
.doc-land-lab__foot {
  margin-top: auto; /* 吸底：见 .doc-land-lab 的注释 */
  padding-top: var(--ui-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ui-space-3);
}

/* --- 导出面板进右栏：五颗按钮改为两列网格，窄栏里不会挤成一坨 ---
   两个容易漏的细节：
   · grid 必须显式给 gap —— 按钮是块级撑满的，没有 gap 就会零间距贴死，
     看起来像一条被拍扁的按钮墙；
   · padding 要与左侧调色台（space-5）一致。两栏并排，内边距不同会导致
     标题、按钮列的左边缘对不上，这是「边距乱」观感的主要来源。
     基类那个 space-1 的底边距是为文档页「注释贴底」设计的，落地页不适用。 */
.doc-export--land {
  margin-top: 0;
  padding: var(--ui-space-5);
  /* 等高布局下右栏内容比左栏短：纵向 flex + 注释吸底，
     让空隙留在「预览折叠」与「说明条」之间，而不是卡片底部一大块空白。 */
  display: flex;
  flex-direction: column;
}
.doc-export--land .doc-export__head { display: block; }
.doc-export--land .doc-export__ops {
  margin-top: var(--ui-space-4);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ui-space-2);
}
.doc-export--land .doc-export__ops > .ui-btn { width: 100%; }
.doc-export--land [data-export-link] { grid-column: 1 / -1; }
/* 折叠预览与说明条跟按钮组之间的节奏：比默认的 space-4 收半档。 */
.doc-export--land .doc-export__preview { margin-top: var(--ui-space-3); }
.doc-export--land .doc-note { margin-top: var(--ui-space-3); }
/* 说明条吸底（hidden 的那条不占位，同时写上无副作用） */
.doc-export--land [data-export-hint],
.doc-export--land [data-export-warn] { margin-top: auto; padding-top: var(--ui-space-2); }

/* --- 首页区块：只留上分隔线，节奏比文档页松一档 --- */
.doc-land-sec {
  padding: var(--ui-space-12) 0;
  border-top: 1px solid var(--ui-border);
  scroll-margin-top: 76px;
}

/* --- 「给 AI 用」的文件清单：左边固定宽度的文件名，右边说明 --- */
.doc-ai-file {
  display: grid;
  grid-template-columns: 156px minmax(0, 1fr);
  gap: var(--ui-space-3);
  align-items: baseline;
}
@media (max-width: 640px) {
  .doc-ai-file { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* --- 「两种用法」双栏代码块等高 ---
   .ui-grid 拉伸的是两个 .ui-stack 容器，但容器里的代码块各按内容高度排，
   左 3 行右 5 行，底边参差。让代码块吃掉容器的剩余高度，两块底边就对齐了。 */
.doc-demo__duo > .ui-stack > .ui-codeblock { flex: 1; }

/* ============================================================
   AI 规范页（docs/ai.html 专有）
   ------------------------------------------------------------
   这一页的正文全部由 docs.js 从 ownui.spec.js 渲染，所以样式也要
   覆盖到「渲染出来的表格」——规格表统一走 .ui-table--compact，
   靠 .ai-table 收一层外边距，避免每张表都要单独写类。
   ============================================================ */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ui-space-4);
}
.ai-art {
  display: flex;
  flex-direction: column;
  gap: var(--ui-space-3);
  padding: var(--ui-space-4);
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-card);
}
.ai-art__top { display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-3); }
.ai-art__size {
  flex: none;
  font-family: var(--ui-font-mono);
  font-size: var(--ui-type-overline);
  color: var(--ui-text-3);
}
.ai-art__desc { flex: 1; font-size: var(--ui-type-body-sm); line-height: 1.65; color: var(--ui-text-2); }

/* 渲染出来的规格表：紧凑、可横向滚动，行高比默认表格小一档 */
.ai-table { margin-top: var(--ui-space-3); }
.ai-table .ui-table { font-size: var(--ui-type-body-sm); }
.ai-table .ui-table th { white-space: nowrap; }
.ai-table code {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-type-caption);
  color: var(--ui-text);
  white-space: nowrap;
}

/* 片段：每条一个折叠面板，默认收起，避免这一页太长 */
.ai-snip { margin-top: var(--ui-space-3); }
.ai-snip .ui-collapse__panel { padding-top: 0; }
.ai-snip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
  margin: var(--ui-space-3) 0;
  font-size: var(--ui-type-caption);
  color: var(--ui-text-3);
}
.ai-snip__code {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-code-bg);
  color: var(--ui-code-text);
  border-radius: var(--ui-radius-block);
  font-size: var(--ui-fs-12);
  line-height: 1.7;
  tab-size: 2;
}
.ai-snip__code code { font-family: var(--ui-font-mono); white-space: pre; }

/* ============================================================
   自检页（docs/check.html 专有）
   ============================================================ */
.chk-input {
  width: 100%;
  min-height: 200px;
  font-family: var(--ui-font-mono);
  font-size: var(--ui-fs-12);
  line-height: 1.7;
  tab-size: 2;
}
.chk-report { margin-top: var(--ui-space-5); }
.chk-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ui-space-2) var(--ui-space-4);
  padding: var(--ui-space-4);
  border-radius: var(--ui-radius-block);
  background: var(--ui-surface-2);
  border: 1px solid var(--ui-border);
  font-size: var(--ui-type-body-sm);
}
.chk-sum__n { font-family: var(--ui-font-mono); font-weight: var(--ui-fw-semibold); font-size: var(--ui-fs-20); }
.chk-sum--ok .chk-sum__n { color: var(--ui-success); }
.chk-sum--bad .chk-sum__n { color: var(--ui-danger); }
.chk-list { margin-top: var(--ui-space-4); display: flex; flex-direction: column; gap: var(--ui-space-2); }
.chk-item {
  padding: var(--ui-space-3) var(--ui-space-4);
  border-radius: var(--ui-radius-block);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  box-shadow: inset 3px 0 0 var(--ui-border-strong);
}
.chk-item--error { box-shadow: inset 3px 0 0 var(--ui-danger); }
.chk-item--warn { box-shadow: inset 3px 0 0 var(--ui-warning-500); }
.chk-item__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ui-space-2) var(--ui-space-3);
}
.chk-item__rule { font-weight: var(--ui-fw-semibold); color: var(--ui-text); font-size: var(--ui-type-body-sm); }
.chk-item__line {
  font-family: var(--ui-font-mono);
  font-size: var(--ui-type-overline);
  color: var(--ui-text-3);
}
.chk-item__hit {
  display: block;
  margin-top: var(--ui-space-2);
  padding: 2px var(--ui-space-2);
  border-radius: var(--ui-radius-xs);
  background: var(--ui-code-bg);
  color: var(--ui-code-text);
  font-family: var(--ui-font-mono);
  font-size: var(--ui-fs-12);
  overflow-x: auto;
  white-space: pre;
}
.chk-item__fix { margin-top: var(--ui-space-2); font-size: var(--ui-type-caption); color: var(--ui-text-2); }

/* 页脚 */
.doc-footer { border-top: 1px solid var(--ui-border); background: var(--ui-surface); }

/* 组内小标题 */
.doc-subhead {
  font-size: var(--ui-type-body-sm);
  font-weight: var(--ui-fw-semibold);
  color: var(--ui-text);
  margin: var(--ui-space-6) 0 var(--ui-space-3);
}
.doc-note {
  font-size: var(--ui-type-body-sm);
  color: var(--ui-text-2);
  padding: var(--ui-space-3) var(--ui-space-4);
  background: var(--ui-surface-3);
  border-radius: var(--ui-radius-block);
  margin-top: var(--ui-space-4);
  line-height: var(--ui-lh-13);
}
.doc-note strong,
.doc-note b { color: var(--ui-text); }
.doc-note[hidden] { display: none; }
/* 不可用提示：左侧竖条用告警色，底色仍走中性面 —— 深色模式下
   --ui-warning-50 这类亮色底会白得刺眼，而告警色本身两个主题都够清楚。 */
.doc-note--warn { box-shadow: inset 3px 0 0 var(--ui-warning-500); }