/*
 * 色彩字典（dictionary.html）：kit 资源列表页。这里只有排版和内容本身的颜色（色块、可读性样张）；
 * 搜索、chip、分段、卡片、表格、列表、对话框都是 xxd-ui-kit 原样。
 */

/* ── 筛选条：搜索不撑满一行，分段靠右 ── */
.dict-toolbar {
  margin-bottom: var(--space-3);
}

.dict-search {
  flex: 0 1 320px;
}

.dict-view {
  margin-inline-start: auto;
}

.dict-empty__chips .xxd-chip {
  text-decoration: none;
}

.dict-family__count {
  color: var(--muted);
}

.dict-count {
  margin-bottom: var(--space-3);
}

.dict-foot {
  margin: var(--gap-group) 0 0;
}

/* 表格里的色名是链接：跟着表格一行不折，窄了整张表横向滚 */
[data-dictionary-table] .dict-card__name {
  white-space: nowrap;
}

.dict-row-swatch {
  display: block;
  cursor: inherit;
}

/* ── 色彩档案（搜索正好命中一个色）── */
.dict-story {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-group);
  margin: var(--gap-block) 0 var(--gap-group);
}

.dict-story[hidden] {
  display: none;
}

.dict-story__swatch {
  aspect-ratio: 4 / 3;
  max-height: 280px;
  border-radius: var(--r-md);
}

.dict-story__head h2,
.dict-story__head p,
.dict-story__group h3,
.dict-story__group p {
  margin: 0;
}

.dict-story__head p {
  margin-top: var(--space-2);
}

.dict-story__group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--gap-items);
}

/* 可读性样张：内容（这个色和乳白 / 墨黑互为底和字） */
.dict-pair__sample {
  display: grid;
  align-content: end;
  gap: var(--gap-tight);
  min-height: 112px;
  padding: var(--inset-md);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

.dict-pair__name {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-lg);
}

/* ── 颜色信息对话框 ── */
.dict-detail__band {
  height: 96px;
  background: var(--swatch);
}

.dict-detail .xxd-dialog__head > div {
  flex: 1;
  min-width: 0;
}

.dict-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--gap-block);
}

.dict-detail__body h3,
.dict-detail__body p {
  margin: 0;
}

.dict-detail__body section,
.dict-detail__body nav {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: var(--gap-items);
}

@media (max-width: 640px) {
  .dict-search {
    flex-basis: 100%;
  }

  .dict-view {
    margin-inline-start: 0;
  }
}

/* 触屏：色系 chip 点得到（kit 触屏控件 44） */
@media (pointer: coarse) {
  .dict-family {
    height: var(--hit-min);
  }
}