/*
 * home.css —— 首页（index.html）
 * 整页照 kit 的 detailPanel 模板：页面头 → 一行筛选 → 色卡网格（xxd-card）→ 右侧详情面板（xxd-panel + xxd-dock）。
 * 组件全是 kit 的；这里只排版。色块的颜色是内容（行内 background），照原值写。
 */

.home {
  padding-bottom: var(--space-8);
}

/* ── 筛选 ── */
.home-filters {
  margin-bottom: var(--space-2);
}

.home-filters__search {
  flex: 1 1 280px;
  max-width: 360px;
}

.home-filters__spacer {
  flex: 1;
}

.home-count {
  margin: 0 0 var(--space-3);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-xs);
}

/* ── 色卡网格 ── */
.home-grid {
  --grid-min: 200px;
}

.home-card__media {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.home-grid[data-view="card"] .home-card__media {
  --ratio: 3 / 4;
}

.home-card__media:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: -2px;
}

.home-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gap-items);
}

.home-card__id {
  flex: none;
}

.home-card__head a {
  color: inherit;
  text-decoration: none;
}

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

/* 色值、收藏、下载一行：色值按钮贴左边的字（往外让出按钮的内边距），图标按钮靠右 */
.home-card__row {
  display: flex;
  align-items: center;
  gap: var(--gap-tight);
  margin-inline: calc(var(--space-2) * -1);
}

.home-card__copy {
  margin-inline-end: auto;
}

.home-more {
  justify-content: center;
  margin-top: var(--space-6);
}

/* ── 下面几节 ── */
.home-section {
  margin-top: var(--gap-group);
}

.home-section > h2 {
  margin: 0;
}

.home-section__desc {
  margin: var(--space-1) 0 var(--space-4);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.home-tools {
  --grid-min: 240px;
}

.home-tools .xxd-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-1-5);
}

.home-support {
  margin-top: var(--space-4);
}

.home-support .xxd-qr {
  margin: 0;
}

/* ── 详情面板 ── */
.home-panel__body {
  display: grid;
  align-content: start;
  /* 面板高度固定、内容比它长：行按内容高，不被压扁（图和表格的 overflow 会让它们的最小高度变成 0） */
  grid-auto-rows: max-content;
  gap: var(--gap-block);
}

.home-panel__origin {
  margin: 0;
}

.home-panel__media {
  display: grid;
  place-items: center;
  max-height: min(420px, 50vh);
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--wash);
}

.home-panel__media img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(420px, 50vh);
}

.home-panel__facts th,
.home-relation__rules th {
  width: 5em;
  color: var(--muted);
  font-weight: var(--weight-regular);
}

.home-panel__dock {
  position: static;
}

.home-harmony,
.home-roles,
.home-role,
.home-relation {
  display: grid;
  gap: var(--gap-items);
}

.home-roles {
  gap: var(--gap-block);
}

.home-harmony__title,
.home-role__title {
  margin: 0;
  font: var(--weight-medium) var(--text-base) / var(--leading-md) var(--font-body);
}

.home-role__title {
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

.home-relation__intent {
  margin: 0;
  font-size: var(--text-sm);
  line-height: var(--leading-sm);
}

/* 搭配色一行：色块 · 色名 · 色值 */
.home-swatch {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
}

.home-swatch > .xxd-swatch,
.home-index__row > .xxd-swatch {
  cursor: inherit;
}

/* ── 完整色值索引 ── */
.home-index__body {
  display: grid;
  gap: var(--gap-items);
}

.home-index__search {
  flex: 1 1 240px;
}

.home-index__list {
  max-height: min(60vh, 560px);
  overflow: auto;
}

.home-index__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--space-3);
}

@media (max-width: 640px) {
  .home-filters__search {
    flex-basis: 100%;
    max-width: none;
  }

  .home-filters__spacer {
    display: none;
  }

  .home-grid {
    --grid-min: 150px;
  }
}