/* ============================================================================
   首页样式 — B1「图纸台」单栏布局（蓝图工程风）
   ----------------------------------------------------------------------------
   布局：图面（工具卡网格，主区）+ 底部图框落款。

   风格：工程制图 — 网格纸底纹、墨线边框、角括号工具卡。

   约束：
   - 颜色全部经 css/ui 主题令牌 var(--...) 派生（蓝图色由 --color-primary 系
     派生 + rgba 透明层），[data-theme] 明暗自动切换，本文件不写死主题色。
   - 间距/圆角/字号尽量复用令牌；纯 px 仅用于令牌无法表达处（网格纹理尺寸）。
   - 选择器保持顶层扁平，js/home.js 降级渲染的 .category-section 继续命中。
   ============================================================================ */

/* ===== 布局原语 ===== */
.home-desk {
  --tap-min: 44px;
  /* 墨线（比 --border-default 更重的“制图墨线”）：由文字色派生，随主题翻转 */
  --ink: var(--text-primary);
  --ink-2: var(--text-secondary);
  --ink-3: var(--text-tertiary);
  /* 图纸底纹：主色低透明网格，明暗主题均成立 */
  --bp-grid: color-mix(in srgb, var(--color-primary) 7%, transparent);
  --bp-grid-strong: color-mix(in srgb, var(--color-primary) 13%, transparent);
  --bp-line: color-mix(in srgb, var(--text-primary) 18%, transparent);
  --bp-line-soft: color-mix(in srgb, var(--text-primary) 10%, transparent);
  --bp-paper: var(--bg-surface);
  --bp-paper-2: var(--bg-subtle);
  /* color-mix 兜底：老浏览器退回静态 rgba（跟随浅色主题基调） */
}

/* ===== 网格纸底纹（整个图桌区域） ===== */
.home-desk {
  background-color: var(--bg-page);
  background-image:
    linear-gradient(var(--bp-grid, rgba(22, 119, 255, .07)) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid, rgba(22, 119, 255, .07)) 1px, transparent 1px),
    linear-gradient(var(--bp-grid-strong, rgba(22, 119, 255, .13)) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-grid-strong, rgba(22, 119, 255, .13)) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

/* ===== 单栏图桌骨架 ===== */
.home-desk {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "foot";
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
}
.home-stage { grid-area: stage; }
.home-foot  { grid-area: foot; }

/* ===== 图面（工具卡网格主区） ===== */
.home-stage {
  overflow-y: auto;
  padding: var(--space-6) var(--space-6) var(--space-10);
  scroll-behavior: smooth;
}
.category-section {
  /* PC 端内容列限宽居中：min(1100px, 可用宽度)，窄屏自然占满。 */
  width: min(1100px, 100%);
  margin-inline: auto;
  margin-block-end: var(--space-9);
  scroll-margin-top: var(--space-4);
}
/* 最后一个分区不再向下撑出多余空隙：底部大间距交给容器 padding 统一控制 */
.category-section:last-child { margin-block-end: 0; }
.category-section.is-hidden { display: none; }
.category-header {
  display: flex; align-items: baseline; gap: var(--space-3);
  border-bottom: 1.5px solid var(--ink);
  padding-block-end: var(--space-2);
}
.category-header .idx {
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  color: var(--color-primary);
}
.category-name {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: var(--text-primary);
  margin: 0;
}
.category-header .cnt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  color: var(--ink-3);
}

/* ===== 工具卡：角括号制图卡 ===== */
.tools-grid {
  display: grid;
  gap: var(--space-3);
  margin-block-start: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.tool-card {
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-1);
  background: var(--bp-paper);
  border: 1px solid var(--bp-line);
  padding: var(--space-4) var(--space-4);
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
  min-height: max(64px, var(--tap-min));
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
/* 四角括号 */
.tool-card::before, .tool-card::after,
.tool-card .c3, .tool-card .c4 {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  border: 2px solid var(--ink-3);
  transition: border-color var(--transition-base);
}
.tool-card::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tool-card::after  { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.tool-card .c3 { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.tool-card .c4 { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.tool-card .c3, .tool-card .c4 { display: block; }
.tool-name {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
  min-width: 0; max-width: 100%;
  overflow-wrap: anywhere; word-break: break-word;
}
/* 工具描述行（tools.json 的 description 字段，home.js 渲染） */
.tool-desc {
  font-size: var(--fs-aux);
  color: var(--ink-2);
  line-height: var(--lh-body);
  min-width: 0;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover {
    border-color: var(--color-primary);
    box-shadow: 4px 4px 0 color-mix(in srgb, var(--color-primary) 18%, transparent,
                rgba(22, 119, 255, .18));
  }
  .tool-card:hover::before, .tool-card:hover::after,
  .tool-card:hover .c3, .tool-card:hover .c4 { border-color: var(--color-primary); }
}
.tool-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tool-card.is-hidden { display: none; }
/* 外链卡（Chrome 商店扩展）：右上 CWS 徽标替代右上角括号 */
.tool-card-external::after { border: none; width: auto; height: auto; }
.tool-card-external .cws-tag {
  position: absolute; top: var(--space-1); right: var(--space-3);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--color-primary-active, var(--color-primary));
  border: 1px solid var(--color-primary);
  padding: 1px 5px;
  background: var(--bp-paper-2);
}

/* ===== 底部图框落款 ===== */
.home-foot {
  /* 与 .category-section 同宽对齐：PC 端 1100px 居中，窄屏自然占满。 */
  width: min(1100px, 100%);
  margin-inline: auto;
  padding: 0 0 var(--space-6);
}
.foot-inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4);
  border: 1.5px solid var(--ink);
  background: var(--bp-paper);
  padding: var(--space-4) var(--space-6);
}
/* 主行：logo + 链接 */
.foot-brand {
  display: flex; align-items: center; gap: var(--space-3);
  min-width: 0;
}
.foot-inner img {
  width: 22px; height: 22px;
  border-radius: var(--radius-full);
  border: 1px solid var(--bp-line);
}
.foot-inner a {
  color: var(--color-primary-active, var(--color-primary));
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-primary);
  transition: background-color var(--transition-base);
}
@media (hover: hover) { .foot-inner a:hover { background: var(--bp-paper-2); } }
.foot-inner a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.foot-inner .ver {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-aux);
  color: var(--ink-3);
  line-height: var(--lh-body);
  text-align: center;
}

/* 旧底部长胶囊在新布局中不渲染；保底样式防降级路径残留 */
.home-footer {
  text-align: center;
  padding: var(--space-8) 0;
  grid-column: 1 / -1;
}
.home-footer a {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-3) var(--space-6);
  background: var(--bp-paper);
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-full);
  text-decoration: none;
  color: var(--text-primary);
  font-size: var(--fs-body-lg);
}

/* ===== 加载 / 错误态 ===== */
.loading {
  text-align: center;
  padding: var(--space-10) 0;
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
}

/* ===== 响应式 ===== */
/* 窄屏：间距全面收敛（分区底距、图面底 padding、落款区底 padding），
   避免「最后分类 → footer」三段间距叠加出的巨大空隙；
   落款整体居中：logo+链接同一行居中，版本文字整行居中在其下。 */
@media (max-width: 960px) {
  .category-section { margin-block-end: var(--space-7); }
  .home-stage { padding: var(--space-4) var(--space-4) var(--space-6); }
  .home-foot { padding: 0 var(--space-4) var(--space-7); }
  .foot-inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    text-align: center;
  }
  .foot-inner .ver {
    margin-left: 0;
    overflow-wrap: anywhere;
    line-height: var(--lh-body);
  }
}

/* ===== 触控目标 ===== */
@media (pointer: coarse) {
  .tool-card { min-height: max(72px, var(--tap-min)); }
}

/* ===== 动效克制 ===== */
@media (prefers-reduced-motion: reduce) {
  .home-stage { scroll-behavior: auto; }
  .tool-card { transition: none; }
}