/* ============================================================================
   子域首页 · 菜单列表（games / life / info / study 四页共用同一份规则）
   —— 只归属首页，页面用 .dh- 前缀，避免与 shell.css 的 .card/.cards 等通用词撞车。
   依赖 base.css 提供的令牌（--paper/--sheet/--ink/--accent/--rule/--shadow/--font…）。
   ========================================================================== */

/* ---------- 内容列：与工具页同档 46rem ---------- */
.dh-app {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.6rem 0.9rem 2rem;
}

/* ---------- ① 规格牌：与门户 .top 同语言、低一级 ---------- */
.dh-plate {
  background: var(--sheet);
  border: var(--rule);
  box-shadow: var(--shadow);
  margin-bottom: 1.1rem;
}

/* 标签行：域色小方 + mono 域名标签 + 右端回主站入口，下压一条 2px 墨线收口 */
.dh-plate-top {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.7rem;
  border-bottom: var(--rule);
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
/* 域色在本页只出现两处，这是第一处：0.8rem 见方、1px 墨线、填充域色 */
.dh-mark {
  width: 0.8rem;
  height: 0.8rem;
  flex: 0 0 auto;
  border: 1px solid var(--ink);
  background: var(--accent);
}
.dh-plate-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 回主站：图标按钮与全站同规格（2px 墨线 + 抬起面 + 硬投影 + 按下位移） */
.dh-home {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: 0 0 auto;
  border: var(--rule);
  background: var(--sheet);
  color: var(--ink);
  padding: 0.24rem 0.5rem;
  font-family: var(--font-mono);
  font-size: calc(0.68rem * var(--font-scale, 1));
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dh-home svg {
  width: 0.85rem;
  height: 0.85rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
@media (hover: hover) {
  .dh-home:hover {
    background: var(--accent);
    color: var(--on-accent);
  }
}
.dh-home:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--ink);
}

/* 牌身：域图标 + 域名 + 件数 */
.dh-plate-body {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.75rem 0.6rem;
}
/* 铭牌：3.2rem 见方；边界由容器描边提供，色块由容器背景提供
   （favicon 自己不画外框，见 DESIGN.md「铭牌与 favicon」） */
.brand-icon {
  width: 3.2rem;
  height: 3.2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: var(--rule);
  background: var(--accent);
  overflow: hidden;
}
.brand-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.dh-plate-name {
  font-size: calc(1.5rem * var(--font-scale, 1));
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.dh-plate-meta {
  padding: 0 0.75rem 0.7rem;
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ---------- ② 菜单列表：一行一个工具 ---------- */
.dh-list {
  display: grid;
  gap: 0.5rem;
}

.dh-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: var(--rule);
  background: var(--sheet);
  box-shadow: var(--shadow);
  color: var(--ink);
  text-decoration: none;
  text-align: left;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
/* 图标格：域色 13% 混纸底——域色只做「这是哪一域」的提示，不做按钮底色 */
.dh-row-icon {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: var(--rule);
  background: color-mix(in srgb, var(--accent) 13%, var(--sheet));
}
.dh-row-icon svg {
  width: 1.15rem;
  height: 1.15rem;
  display: block;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.9;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.dh-row-text {
  min-width: 0;
}
.dh-row-name {
  display: block;
  font-size: calc(0.94rem * var(--font-scale, 1));
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.dh-row-desc {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  line-height: 1.45;
  color: var(--ink-soft);
}
.dh-row-arrow {
  width: 0.9rem;
  height: 0.9rem;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  transition: transform var(--dur) var(--ease);
}

@media (hover: hover) {
  .dh-row:hover {
    background: color-mix(in srgb, var(--accent) 9%, var(--sheet));
  }
  .dh-row:hover .dh-row-arrow {
    transform: translateX(3px);
  }
}
/* 按下：位移量 = 投影偏移量，位移块归零 */
.dh-row:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

/* 未上线的格子：压回纸色 + mono 标签，不靠透明度表达状态 */
.dh-row-soon {
  cursor: default;
  background: var(--paper);
  box-shadow: none;
  border-style: dashed;
}
.dh-row-soon .dh-row-icon {
  background: var(--paper);
}
.dh-row-soon .dh-row-icon svg,
.dh-row-soon .dh-row-arrow {
  stroke: var(--ink-soft);
}
.dh-row-soon .dh-row-name {
  color: var(--ink-soft);
  font-weight: 700;
}
.dh-row-tag {
  font-family: var(--font-mono);
  font-size: calc(0.7rem * var(--font-scale, 1));
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  padding: 0.05rem 0.3rem;
  flex: 0 0 auto;
}

/* ---------- 固定按钮的几何：设置 / 帮助钉在视口右上角 ---------- */
/* ⚠️ 这两条是**首页自己的责任**，不能指望各域 shell.css：
   games / life / study 的 shell.css 恰好是「固定右上」那一版，而 info 的 shell.css
   是工具页那套 `position: static`（按钮在流内横梁里）—— 只靠 shell.css，info 首页
   的两颗按钮会退回文档流堆到左上角（2026-09-18 线上实测 pos=static / w=30 / x=0,y=0，
   整个首页因此掉成没有描边与硬投影的裸文字）。
   这里把几何钉死在首页层：四份 home.css 逐字相同，且都在 shell.css **之后**加载。 */
.help-btn {
  position: fixed;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 60;
  width: 2.4rem;
  height: 2.4rem;
}

.settings-fab {
  position: fixed;
  top: 0.9rem;
  right: 3.7rem;
  z-index: 60;
  width: 2.4rem;
  height: 2.4rem;
}

/* ---------- 窄屏：上面那两颗按钮的宽度要在规格牌标签行右侧预留出来 ---------- */
@media (max-width: 760px) {
  .dh-plate-top {
    padding-right: 6.5rem;
  }
}

@media (max-width: 400px) {
  .dh-app {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
  }
  .dh-row {
    gap: 0.5rem;
    padding: 0.5rem;
  }
  .dh-plate-name {
    font-size: calc(1.35rem * var(--font-scale, 1));
  }
  .dh-home {
    padding: 0.24rem 0.4rem;
  }
}

/* ---------- ③ 页脚：与列表之间留出呼吸 ---------- */
.dh-list {
  margin-bottom: 1.1rem;
}