/* ============================================================
 * editorial-shared.css — 独立页（tools/about）编辑风覆盖层（S2-C）
 * 原理：tools/index.pug 与 about/index.html 保留旧内联样式与 DOM，
 * 本文件在其后加载，靠层叠覆盖完成换肤：
 * 1) 旧 token 名 → 编辑风值（全站一次变色）
 * 2) 结构修正：格纹纸底、去胶囊导航、白浮卡、发丝线、暖强调
 * 首页（editorial.css）与 Butterfly 页（editorial-post.css）不受影响。
 * ============================================================ */

/* -------- token 重映射（旧名 → 编辑风值） -------- */
:root {
  --paper: #faf7ee;
  --bg: #faf7ee;
  --bg-soft: #f1eee5;
  --bg-elev: #ffffff;
  --border: rgba(94, 78, 40, 0.14);
  --border-strong: rgba(94, 78, 40, 0.26);
  --text: #26221a;
  --text-2: rgba(38, 34, 26, 0.66);
  --text-3: rgba(38, 34, 26, 0.42);
  --accent: #d9930f;
  --accent-deep: #a86f08;
  --accent-soft: #fbf3dd;
  --accent-glow: rgba(217, 147, 15, 0.18);
  --warm: #c96f2f;
  --warm-soft: #fbf3dd;
  --peach: #f3e2c4;
  --sky: #dfe4d3;
  --card-shadow: 0 1px 2px rgba(74, 60, 24, 0.04), 0 10px 30px rgba(74, 60, 24, 0.06);
  --card-shadow-hover: 0 2px 4px rgba(74, 60, 24, 0.05), 0 18px 44px rgba(74, 60, 24, 0.1);
}

/* -------- 纸面：格纹底 + 去粉彩光晕 -------- */
body {
  font-family: 'DM Sans', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  background-image:
    linear-gradient(rgba(94, 78, 40, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(94, 78, 40, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
body::before {
  background: radial-gradient(640px 420px at 6% -4%, rgba(233, 178, 42, 0.14), transparent 65%) !important;
  opacity: 1 !important;
}

/* 展示字体 */
h1, h2, h3 {
  font-family: 'Plus Jakarta Sans', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  letter-spacing: -0.02em;
}

/* -------- 顶部导航：去胶囊，改等宽 + 下划线 -------- */
.topbar {
  border-bottom: 1px solid var(--border-strong) !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: 0.04em;
}
.topbar a {
  background: none !important;
  border-radius: 0 !important;
  padding: 0.2rem 0 !important;
  margin-left: 1.4rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.topbar a:hover,
.topbar a.active {
  background: none !important;
  color: var(--text) !important;
  border-bottom-color: var(--accent);
}
.status-dot {
  background: #7d9471 !important;
  box-shadow: 0 0 0 3px rgba(125, 148, 113, 0.15) !important;
}

/* -------- hero：等宽注记 -------- */
.hero-meta,
.tag {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hero-meta .tag,
.hero-meta .tools-count {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
.hero-meta .tag.accent { color: var(--accent-deep) !important; }

/* -------- 白浮卡（工具卡复用 .cat 类） -------- */
.cat {
  border-radius: 20px !important;
  box-shadow: var(--card-shadow) !important;
  border: 1px solid rgba(94, 78, 40, 0.07) !important;
}
.cat::after { display: none !important; }
.cat:hover {
  box-shadow: var(--card-shadow-hover) !important;
  border-color: var(--ink, #26221a) !important;
}
.cat-icon { color: var(--accent) !important; }
.cat-icon-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
}
#modal-icon .cat-icon-img,
.tool-modal-icon img {
  width: 56px;
  height: 56px;
}
.cat-foot { border-top: 1px dashed var(--border) !important; }

/* -------- 筛选条 -------- */
.filter-bar-inner { border: none !important; }
.filter-search-input {
  border: 1px solid var(--border-strong) !important;
  border-radius: 999px !important;
  background: var(--bg-elev) !important;
  color: var(--text) !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}
.filter-search-input:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-glow) !important;
}
.filter-search-hint { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; }
.filter-chips .chip {
  border-radius: 999px !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--bg-elev) !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}
.filter-chips .chip.active,
.filter-chips .chip:hover {
  background: var(--accent-soft) !important;
  border-color: var(--accent) !important;
  color: var(--accent-deep) !important;
}
.filter-clear {
  border-radius: 999px !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}
.tool-tag {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}
.tool-cat-pill {
  background: var(--accent-soft) !important;
  color: var(--accent-deep) !important;
  border-radius: 999px !important;
}

/* -------- 详情 Modal -------- */
.tool-modal-content {
  border-radius: 22px !important;
  box-shadow: var(--card-shadow-hover) !important;
  border: 1px solid rgba(94, 78, 40, 0.07) !important;
}
.tool-modal-section-label {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
  color: var(--text-3) !important;
}

/* -------- 页脚：实线 -------- */
.footer {
  border-top: 1px solid var(--border-strong) !important;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace !important;
}

/* -------- about「家里两位同事」 -------- */
.duo { display: flex; flex-direction: column; align-items: center; }
.duo figure { margin: 0; width: min(560px, 100%); }
.duo img { width: 100%; height: auto; display: block; }
.duo figcaption {
  margin-top: 0.6rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--text-3);
  letter-spacing: 0.05em;
  text-align: center;
}
.emoji-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: center;
  align-items: flex-end;
  margin-top: 2rem;
}
.emoji-strip img {
  width: clamp(72px, 8vw, 104px);
  height: auto;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1.6);
}
.emoji-strip img:hover { transform: translateY(-6px) rotate(-4deg) scale(1.06); }
.duo-note {
  color: var(--text-2);
  font-size: 0.92rem;
  margin: 1.5rem 0 0;
  text-align: center;
  max-width: 560px;
}
@media (max-width: 820px) {
  .duo { align-items: stretch; }
}

/* -------- tools 空状态：居中白浮卡 + 趴键盘猫 -------- */
.tools-grid { min-height: 0 !important; margin-bottom: 1.5rem !important; }
.tools-empty {
  background: var(--bg-elev) !important;
  border: 1px solid rgba(94, 78, 40, 0.07) !important;
  border-radius: 22px !important;
  box-shadow: var(--card-shadow) !important;
  padding: 2.2rem 2.5rem 2.4rem !important;
  justify-self: center;
  width: min(480px, 100%);
  margin: 0 auto 2rem;
  font-family: 'DM Sans', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif !important;
  font-size: 1rem !important;
}
.tools-empty .tools-empty-title {
  font-family: 'Plus Jakarta Sans', 'PingFang SC', 'HarmonyOS Sans SC', 'MiSans', 'Microsoft YaHei', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text) !important;
  margin: 0.8rem 0 0.2rem;
}
.tools-empty .tools-empty-sub {
  color: var(--text-2) !important;
  font-size: 0.92rem;
  margin: 0 0 1.2rem;
}
.tools-empty img {
  width: 220px;
  display: block;
  margin: 0 auto;
}
.tools-empty .tools-empty-clear {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--paper);
  background: var(--text);
  border: none;
  padding: 0.7rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
.tools-empty .tools-empty-clear:hover {
  background: var(--accent-deep);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}

/* -------- about 表情播放器 -------- */
.emoji-player {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  width: 100%;
}
.emoji-stage {
  background: var(--bg-elev);
  border: 1px solid rgba(94, 78, 40, 0.07);
  border-radius: 22px;
  box-shadow: var(--card-shadow);
  padding: 1.6rem 2.4rem;
  cursor: pointer;
  transition: box-shadow 0.25s, transform 0.25s;
}
.emoji-stage:hover {
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-3px);
}
.emoji-stage img {
  width: clamp(130px, 14vw, 180px);
  height: auto;
  display: block;
}
.emoji-stage img.is-popping {
  animation: emoji-pop 0.45s cubic-bezier(0.2, 0.8, 0.3, 1.4);
}
@keyframes emoji-pop {
  0% { transform: scale(0.55) rotate(-10deg); }
  60% { transform: scale(1.14) rotate(4deg); }
  100% { transform: scale(1) rotate(0); }
}
.emoji-tabs {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}
.emoji-tab {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.45rem 0.45rem 0.2rem;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.emoji-tab img { width: 56px; height: auto; display: block; }
.emoji-tab:hover { opacity: 1; transform: translateY(-3px); }
.emoji-tab.is-active {
  opacity: 1;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* -------- 全站猫图交互保护：禁拖拽/禁选中（防拖成直接打开图片文件） -------- */
.cat-pet-img,
.cat-icon-img,
.emoji-stage img,
.emoji-tab img,
.duo img,
.tools-empty img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

/* -------- 全站摸猫组件样式内嵌在 cat-widget.js（跨页面皮肤通用），此处不再重复 -------- */