/*
 * 中国传统配色 · 站点外壳（xxd-ui-kit 之上）
 * ---------------------------------------------------------------
 * 加载顺序（每个页面一样，docs/redesign.md）：
 *   site.css → vendor/xxd/xxd.css → 页面自己的 CSS
 * site.css 先声明 zh-base 层，所以这里的元素默认样式排在 kit 的层前面，kit 组件总能盖过它；
 * 外壳（顶栏、页脚、外观、语言）不进层，直接生效。
 *
 * 颜色、圆角、字号、间距、字体只用 kit 的令牌。色名也用 kit 的正文字体（2026-10 用户：不要宋体）；
 * .zh-name 只管语言标注和字距，不换字体。
 */

@layer zh-base;

/* ── 旧变量 → kit 令牌（页面迁移完就删掉对应的别名） ── */
:root {
  --font-name: var(--font-body);
  --content: 1280px;
  --page-pad: var(--space-8);
  --header-h: 56px;

  --ink-soft: var(--muted);
  --panel: var(--paper);
  --panel-soft: var(--wash);
  --line-soft: var(--line);
  --line-ink: var(--line-strong);
  --inverse: var(--on-ink);
  --solid: var(--paper);
  --header-bg: var(--bg);
  --hero-fade-start: var(--bg);
  --hero-fade-end: var(--bg);
  --hover-bg: var(--wash);
  --hover-text: var(--ink);
  --feature-bg: var(--wash);
  --feature-text: var(--ink);
  --footer-text: var(--muted);
  --dark-panel-text: var(--muted);
  --brand-logo-bg: var(--action);
  --brand-logo-ink: var(--on-action);
  --brand-logo-border: transparent;
  --brand-logo-shadow: none;
  --warm-paper: var(--wash);
  --wash-yellow: var(--warning-tint);
  --wash-green: var(--success-tint);
  --wash-red: var(--danger-tint);
  --wash-blue: var(--accent-tint);
  --shadow-card: none;
  --shadow-soft: none;
  --font-rounded: var(--font-body);
}

@media (max-width: 1024px) {
  :root {
    --page-pad: var(--space-6);
  }
}

@media (max-width: 640px) {
  :root {
    --page-pad: var(--space-4);
  }
}

/* ── 元素默认样式（低于 kit 的层） ── */
@layer zh-base {
  html {
    scroll-padding-top: calc(var(--header-h) + var(--space-4));
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
  }

  img {
    display: block;
    max-width: 100%;
  }

  a {
    color: inherit;
  }

  h1,
  h2,
  h3,
  h4,
  p {
    margin-top: 0;
  }

  h1 {
    margin-bottom: var(--space-3);
    font: var(--weight-strong) var(--text-display) / var(--leading-display) var(--font-title);
    text-wrap: balance;
  }

  h2 {
    margin-bottom: var(--space-2);
    font: var(--weight-strong) var(--text-xl) / var(--leading-lg) var(--font-title);
    text-wrap: balance;
  }

  h3 {
    margin-bottom: var(--space-2);
    font: var(--weight-medium) var(--text-lg) / var(--leading-md) var(--font-body);
  }

  h4 {
    margin-bottom: var(--space-1);
    font: var(--weight-medium) var(--text-base) / var(--leading-sm) var(--font-body);
  }

  p {
    font-size: var(--text-base);
    line-height: var(--leading-md);
  }

  code {
    padding: 1px var(--space-1);
    border-radius: var(--r-xs);
    background: var(--wash);
    font-family: var(--font-mono);
    font-size: max(var(--text-xs), calc(1em - 1px));
  }

  main > section {
    scroll-margin-top: calc(var(--header-h) + var(--space-4));
  }
}

/* 平滑滚动只给没要求减少动效的人（§8） */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

[hidden] {
  display: none !important;
}

/* 只给读屏的字（和 kit 的 .xxd-sr-only 一样；不用 margin: -1px，免得它的左边比正文差 1px） */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 色名：和界面同一种字体，字重跟着所在的位置（标题里 600，列表里 400） */
.zh-name {
  letter-spacing: 0;
}

/* 原名：非中文页面上跟在译名后面的「乳白 rǔ bái」 */
.zh-origin {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.zh-origin .zh-name {
  font-weight: 500;
}

.zh-container {
  width: min(100% - 2 * var(--page-pad), var(--content));
  margin-inline: auto;
}

/* ── 跳过导航 ── */
.zh-skip {
  position: fixed;
  top: var(--space-2);
  left: var(--space-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-weight: var(--weight-medium);
  transform: translateY(calc(-100% - var(--space-4)));
}

.zh-skip:focus-visible {
  transform: none;
}

/* ── 外壳（照 xxd-ui-kit 展示站：顶栏 56 · 左侧导航 232 · 正文靠左，最宽 1280） ── */
:root {
  --side-w: 232px;
}

/* 顶栏还没画出来时先占住它的高度，正文不跳 */
[data-shared-header] {
  height: var(--header-h);
}

.zh-header {
  position: sticky;
  top: 0;
  z-index: var(--z-dock);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  height: var(--header-h);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.zh-menu {
  display: none;
}

.zh-brand {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink);
  font: var(--weight-strong) var(--text-base) / 1 var(--font-body);
  text-decoration: none;
  white-space: nowrap;
}

/* 桌面上品牌占住「侧栏 + 正文左边距」那么宽，搜索框从正文那条线开始（外线对齐，原则 §6） */
@media (min-width: 1025px) {
  .zh-brand {
    width: calc(var(--side-w) + var(--page-pad) - var(--space-4) - var(--space-3));
  }
}

.zh-brand__mark {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  background: var(--ink);
  color: var(--on-ink);
  font: var(--weight-strong) var(--text-xs) / 1 var(--font-body);
}

.zh-search {
  display: inline-flex;
  flex: 0 1 280px;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-2) 0 var(--field-pad-x);
  border: 1px solid var(--line-control);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--muted);
  font: var(--text-xs) / 1 var(--font-body);
  cursor: pointer;
}

.zh-search > span {
  flex: 1;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zh-search:hover {
  border-color: var(--line-control-hover);
  color: var(--ink);
}

.zh-header__tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

.zh-header__tools > .xxd-segmented > button {
  padding: 0 var(--space-2);
}

/* 最后一个是幽灵图标按钮：按图标对齐页边（D58） */
.zh-header__tools > .zh-github {
  margin-inline-end: calc((var(--icon-lg) - var(--btn-box)) / 2);
}

.zh-accent__dot {
  display: block;
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--action);
  box-shadow: 0 0 0 1px var(--line-strong); /* xxd-ignore 色点的一圈描边，不是阴影 */
}

.zh-lang-trigger {
  gap: var(--space-1-5);
}

.zh-appearance {
  width: 264px;
  min-width: 0;
}

.zh-appearance__label {
  margin: 0 0 var(--space-2);
  color: var(--muted);
  font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-body);
}

/* 主题、圆角在顶栏放不下时收进这个浮层（主题 ≤ 480，圆角 ≤ 1024），宽屏不显示 */
.zh-appearance__compact {
  display: none;
  margin-bottom: var(--space-3);
}

.zh-appearance__compact .xxd-segmented {
  display: flex;
}

.zh-appearance__compact .xxd-segmented > button {
  flex: 1;
}

.zh-appearance__custom {
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-raised);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
}

/* 左侧导航：分组小标题 12 / 500 灰，项 13 / 400；当前页淡底 + 左边 2px 线（§2 D76），不加粗 */
.zh-side {
  position: fixed;
  top: var(--header-h);
  bottom: 0;
  left: 0;
  z-index: var(--z-dock);
  width: var(--side-w);
  padding: var(--space-4) var(--space-2) var(--space-8);
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--bg);
  scrollbar-width: thin;
}

.zh-side__group + .zh-side__group {
  margin-top: var(--space-5);
}

.zh-side__group h2 {
  margin: 0 0 var(--space-1);
  padding: 0 var(--space-2);
  color: var(--muted);
  font: var(--weight-medium) var(--text-xs) / var(--leading-xs) var(--font-body);
}

.zh-side ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.zh-side a {
  display: block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--r-xs);
  color: var(--ink);
  font: var(--weight-regular) var(--text-sm) / var(--leading-sm) var(--font-body);
  text-decoration: none;
  transition: background-color var(--motion-quick) ease;
}

.zh-side a:hover {
  background: var(--wash);
  transition-duration: 0s;
}

.zh-side a[aria-current="page"] {
  background: var(--selected-bg);
  box-shadow: inset 2px 0 0 var(--action); /* xxd-ignore 当前项左边那条 2px 线（§2），不是阴影 */
}

.zh-side-scrim {
  display: none;
}

/* 正文：让出侧栏，靠左排（顶栏横跨整个宽度）；每页的 main 只管自己里面怎么排 */
body.xxd-page > main {
  box-sizing: border-box;
  width: auto;
  max-width: calc(var(--content) + 2 * var(--page-pad));
  margin-inline: 0;
  padding-inline: var(--page-pad);
}

@media (min-width: 1025px) {
  body.xxd-page > main,
  body.xxd-page > .zh-footer,
  body.xxd-page > .zh-lang-hint {
    margin-left: var(--side-w);
  }
}

/* ── 页脚：一行说明 + 一行资料链接（导航在左边，页脚不再重复） ── */
.zh-footer {
  box-sizing: border-box;
  max-width: calc(var(--content) + 2 * var(--page-pad));
  margin-top: var(--gap-group);
  padding: var(--space-6) var(--page-pad) var(--space-8);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
}

.zh-footer__about {
  max-width: 640px;
  margin: 0 0 var(--space-2);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  line-height: var(--leading-sm);
}

.zh-footer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.zh-footer a {
  color: var(--muted);
  text-decoration: none;
}

.zh-footer a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line-control);
  text-underline-offset: 3px;
}

.zh-footer__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-left: auto;
}

.zh-footer__langs a[aria-current="true"] {
  color: var(--ink);
}

/* ── 窄屏（≤ 1024）：侧栏变抽屉，顶栏的圆角收进「主色」浮层，搜索缩成图标 ── */
@media (max-width: 1024px) {
  .zh-menu {
    display: inline-flex;
  }

  .zh-search {
    flex: none;
    width: 32px;
    padding: 0;
    justify-content: center;
  }

  .zh-search > span,
  .zh-search > kbd {
    display: none;
  }

  .zh-header__tools > .xxd-segmented[data-name="corners"] {
    display: none;
  }

  .zh-appearance__compact[data-show="narrow"] {
    display: block;
  }

  .zh-side {
    z-index: var(--z-dialog);
    width: min(300px, 86vw);
    transform: translateX(-100%);
    /* 关着时整个藏起来（不只是推到屏幕外），里面的链接不在 Tab 顺序里 */
    visibility: hidden;
    transition: transform var(--motion-panel) var(--ease-out-quart), visibility 0s linear var(--motion-panel);
  }

  .zh-side[data-open] {
    transform: none;
    visibility: visible;
    transition: transform var(--motion-panel) var(--ease-out-quart), visibility 0s;
  }

  .zh-side-scrim {
    position: fixed;
    inset: var(--header-h) 0 0;
    z-index: calc(var(--z-dialog) - 1);
    display: block;
    background: rgba(var(--shadow-rgb), 0.18);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--motion-panel) ease;
  }

  .zh-side-scrim[data-open] {
    opacity: 1;
    pointer-events: auto;
  }
}

/* 手机（≤ 480）：品牌名和「主色」只留给读屏，日夜收进浮层，GitHub 收起 */
@media (max-width: 480px) {
  .zh-header {
    gap: var(--space-2);
    padding: 0 var(--space-3);
  }

  /* 品牌名只留给读屏；「主色」按钮自己有 aria-label，字直接收起 */
  .zh-brand__name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .zh-accent__label {
    display: none;
  }

  .zh-header__tools {
    gap: var(--space-1);
  }

  .zh-header__tools > .xxd-segmented[data-name="theme"],
  .zh-header__tools > .zh-github {
    display: none;
  }

  .zh-appearance__compact[data-show="phone"] {
    display: block;
  }

  .zh-accent {
    min-width: var(--control-h-sm);
    padding: 0;
    justify-content: center;
  }

  .zh-lang-trigger .zh-lang-trigger__label {
    display: none;
  }

  .zh-footer__langs {
    margin-left: 0;
  }
}

/* ── 语言建议条（访客的浏览器语言和页面不一样时） ── */
.zh-lang-hint {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-3);
  padding-inline: var(--page-pad);
}

@media print {
  .zh-header,
  .zh-side,
  .zh-footer,
  .zh-lang-hint {
    display: none;
  }
}

/* 代码块标题里常有中文（「终端」、中文文件名）：中文不小于 12px（§6 D71），kit 缺省 11 */
.xxd-page .xxd-code__head {
  font-size: var(--text-xs);
}

/* 旧模板里的 <iconify-icon>（shared-chrome.js 把它画成 kit 图标） */
iconify-icon {
  display: inline-flex;
  flex: none;
  line-height: 0;
  vertical-align: -0.125em;
}

/* 页面标题：kit 的页面头缺省 20px，站点规范是 28 / 600（docs/redesign-i18n.md §3） */
.xxd-page .xxd-page-header__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
}

/* 页面头：每一页同一个样子（kit 展示站的页面头）—— 上 32 下 24；标题 28 / 600；
   说明是「说明页的段落」14 / 24 灰，最宽 680，和标题隔 8（相关的字靠得更近，§6）。
   旁边的操作（按钮、分段）贴右、和说明底对齐；窄屏换到下一行。 */
.xxd-page .zh-page-head {
  margin: 0;
  padding: var(--space-8) 0 var(--space-6);
}

.xxd-page .zh-page-head h1 {
  margin: 0;
  font: var(--weight-strong) var(--text-display) / var(--leading-display) var(--font-title);
  text-wrap: balance;
}

.xxd-page .zh-page-head :is(h1 + p, .xxd-page-header__row + p, [class*="__text"] > p) {
  max-width: 680px;
  margin: var(--space-2) 0 0;
  color: var(--muted);
  font-size: var(--text-base);
  line-height: var(--leading-md);
  text-wrap: pretty;
}

.xxd-page .zh-page-head [class*="__text"] > p + p {
  margin-top: var(--space-1);
}

/* 标题和说明之间只有上面那 8px：各页原来的 grid / flex gap 不再叠加 */
.xxd-page .zh-page-head.xxd-page-header,
.xxd-page .zh-page-head.lab-head,
.xxd-page .zh-page-head [class*="__text"] {
  row-gap: 0;
}

/* 旁边带操作的页面头（字典、收藏、配色生成）：操作贴右，和说明的最后一行底对齐 */
.xxd-page .zh-page-head:is(.dict-head, .fav-head, .gen-head) {
  margin-bottom: 0;
}

@media (max-width: 640px) {
  .xxd-page .zh-page-head {
    padding-top: var(--space-6);
  }
}

/* ── 「用这个颜色继续」：一行文字链接（color-passport.js 的 continueMarkup，多页共用） ── */
.continue-tools {
  --stack-gap: var(--space-1-5);
}

.continue-tools-label {
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.continue-tools-links {
  --cluster-gap: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* 收藏按下：心形填色（激活态改颜色和填充，不改线宽）——首页、场景试色共用 */
.xxd-btn:is([data-favorite-color], [data-style-favorite], [data-style-scheme-favorite])[aria-pressed="true"] {
  color: var(--action-text);
}

.xxd-btn:is([data-favorite-color], [data-style-favorite], [data-style-scheme-favorite])[aria-pressed="true"] svg {
  fill: currentColor;
}