/* ============================================================
   PetModernLife — 内页统一样式（文章页 / 分类页 / 论坛页）
   依赖 tokens.css + pm-components.css
   设计稿：article.html / 04-category / 05-community / 06-forum / 07-thread
   ============================================================ */

/* ============================================================
   文章页（single.html）
   ============================================================ */
.pm-single { padding-top: var(--pm-space-4); }
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--pm-space-6);
  align-items: start;
}
.article-main { min-width: 0; }
.article-head { padding-top: var(--pm-space-2); margin-bottom: var(--pm-space-3); }
.article-title { max-width: 820px; margin-bottom: var(--pm-space-3); }
.article-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pm-space-2);
  align-items: center;
  color: var(--pm-muted);
  font-size: var(--pm-fs-sm);
}
.article-byline .pm-row { gap: 8px; }
.article-byline a { color: var(--pm-brand); }
.article-hero { margin: var(--pm-space-3) 0 var(--pm-space-5); }
.article-hero img,
.article-hero .wp-block-post-featured-image img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: var(--pm-radius-lg);
}

/* 正文排版（文章块内容） */
.article-body { font-size: var(--pm-fs-body); line-height: var(--pm-lh-body); }
.article-body h2 {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h2);
  line-height: var(--pm-lh-h2);
  margin: var(--pm-space-6) 0 var(--pm-space-2);
  scroll-margin-top: 90px;
}
.article-body h3 {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h3);
  line-height: var(--pm-lh-h3);
  font-weight: var(--pm-fw-semi);
  margin: var(--pm-space-4) 0 10px;
  scroll-margin-top: 90px;
}
.article-body p { color: #33322F; }
.article-body a:not(.pm-btn) { color: var(--pm-link); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul, .article-body ol { color: #33322F; }
.article-body blockquote {
  margin: var(--pm-space-4) 0;
  padding: var(--pm-space-3) var(--pm-space-4);
  border-left: 3px solid var(--pm-accent);
  background: var(--pm-tint);
  border-radius: 0 var(--pm-radius) var(--pm-radius) 0;
  color: var(--pm-muted);
}
.article-body img { border-radius: var(--pm-radius-card); margin: var(--pm-space-3) 0; }
.article-body > *:first-child { margin-top: 0; }

/* 正文实拍图（自有照片，带图注） */
.article-body .pm-figure { margin: var(--pm-space-5) 0; text-align: center; }
.article-body .pm-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.article-body .pm-figure figcaption {
  margin-top: var(--pm-space-1);
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-muted);
}
.article-body .pm-portrait img { max-height: 620px; width: auto; }

/* 侧栏（sticky） */
/* 吸顶侧栏：max-height + 内部滚动，防止将来小标题变多时目录/数据卡被裁掉 */
.article-aside {
  position: sticky;
  top: var(--pm-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-3);
  max-height: calc(100vh - var(--pm-space-8));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.article-aside .pm-toc { margin-bottom: 0; }

/* ------------------------------------------------------------
   文章页 E-E-A-T 三件套
   ------------------------------------------------------------ */
.pm-breadcrumb--article { padding: 0 0 var(--pm-space-2); }
.pm-breadcrumb__cur { color: var(--pm-ink); }

/* 作者 / 审校 / 更新时间（信号条） */
.pm-article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px var(--pm-space-3);
  margin: 0 0 var(--pm-space-3);
  padding: 0 0 var(--pm-space-2);
  border-bottom: 1px solid var(--pm-border);
  font-size: var(--pm-fs-caption);
  color: var(--pm-muted);
}
.pm-article-meta__item { display: inline-flex; align-items: baseline; gap: 6px; }
.pm-article-meta__k {
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pm-muted-2);
}
.pm-article-meta__v { color: var(--pm-ink); font-weight: var(--pm-fw-medium); }

/* Our top picks —— 带商品示意图的精选卡片 */
.pm-toppicks {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  background: var(--pm-surface);
  overflow: hidden;
  margin: 0 0 var(--pm-space-5);
}
.pm-toppicks__head {
  padding: var(--pm-space-3);
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-tint);
}
.pm-toppicks .pm-toppicks__title {
  margin: 0;
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h3);
  line-height: var(--pm-lh-h3);
  font-weight: var(--pm-fw-semi);
  color: var(--pm-brand);
}
.pm-toppicks .pm-toppicks__intro {
  margin: 8px 0 0;
  font-size: var(--pm-fs-sm);
  color: var(--pm-muted);
  line-height: 1.65;
}

.pm-toppicks__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pm-space-3);
  margin: 0;
  padding: var(--pm-space-3);
  list-style: none;
}
.pm-toppick {
  display: flex;
  align-items: stretch;
  gap: var(--pm-space-3);
  min-width: 0;
  padding: var(--pm-space-2);
  border: 1px solid var(--pm-border-soft);
  border-radius: var(--pm-radius-card);
  background: var(--pm-bg);
}
/* 商品卡为奇数个时，最后一张通栏，避免右侧留下整块空白 */
.pm-toppicks__grid > .pm-toppick:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.pm-toppick__media {
  flex: 0 0 124px;
  width: 124px;
  border-radius: calc(var(--pm-radius-card) - 6px);
  overflow: hidden;
  background: var(--pm-tint);
}
.pm-toppick__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-toppick__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 2px 0 0;
}
.pm-toppicks .pm-toppick__badge {
  margin: 0 0 6px;
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-accent);
  line-height: 1.4;
}
.pm-toppicks .pm-toppick__name {
  margin: 0 0 7px;
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h4);
  line-height: 1.35;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-ink);
}
.pm-toppicks .pm-toppick__for {
  margin: 0 0 7px;
  font-size: var(--pm-fs-sm);
  color: var(--pm-ink);
  line-height: 1.55;
}
.pm-toppicks .pm-toppick__for span {
  display: inline-block;
  margin-right: 5px;
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pm-muted-2);
}
.pm-toppicks .pm-toppick__spec {
  margin: 0 0 var(--pm-space-2);
  font-size: var(--pm-fs-caption);
  color: var(--pm-muted);
  line-height: 1.6;
}
.pm-toppick__cta {
  margin-top: auto;
  align-self: flex-start;
}
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   分类页（taxonomy-category.html）
   ============================================================ */
.cat-page { padding: var(--pm-space-5) 0 var(--pm-section-gap); }
/* 注：全局块间距已在上面归零，这里的 margin 就是最终视觉距离（不再是 margin + 19px） */
.cat-head { max-width: 760px; margin-bottom: var(--pm-space-4); }
.cat-head .pm-eyebrow { margin-bottom: 10px; }
.cat-head h1 { margin-bottom: var(--pm-space-3); }
.cat-head .pm-card-text { max-width: 620px; }
.cat-stats { color: var(--pm-muted); font-size: var(--pm-fs-sm); margin-top: var(--pm-space-2); }
.cat-stats strong { color: var(--pm-ink); font-family: var(--pm-font-data); }

.cat-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--pm-space-6);
  align-items: start;
}
.cat-side__block { margin-bottom: var(--pm-space-4); }
.cat-side__title {
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  font-weight: var(--pm-fw-semi);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pm-muted);
  margin: 0 0 var(--pm-space-2);
}
.cat-side__list { list-style: none; margin: 0; padding: 0; }
.cat-side__list a {
  display: block;
  padding: 9px 0;
  color: var(--pm-ink);
  font-size: var(--pm-fs-sm);
  border-bottom: 1px solid var(--pm-border);
}
.cat-side__list a:hover { color: var(--pm-brand); }
.cat-side__list a[aria-current="page"] { color: var(--pm-brand); font-weight: var(--pm-fw-semi); }

/* ---------- 取缔父主题的全局块间距 ----------
   父主题（Twenty Twenty-Five）通过 theme.json 给「每个 .is-layout-flow 容器的子元素」
   统一加了 1.2rem（≈19.2px）的 margin-block-start。落到卡片网格里会同时造成三个毛病：
     · 右列被整体推下去 19px  → 卡片高低不平
     · 卡片内部（图/分类/标题/日期之间）各藏一笔隐形留白
     · 卡片行距被撑到 24+19 = 43px
   下面只精确挑出「受影响的容器层级」把这一笔清零，其余间距仍由本文件决定
   —— 注意别写成 .is-layout-flow > * 的泛匹配，那会连本文件自己设的 margin-top 一起清掉。 */
.cat-page .pm-container > *,
.cat-page .cat-layout > *,
.cat-page .cat-grid > li,
.cat-page .pm-post-card > *,
.cat-page .pm-post-card__body > * {
  margin-block-start: 0;
}

/* ---------- 网格 ----------
   列宽自适应：分类页内容区 992px 落 2 列；文章总览页（无侧栏）1280px 落 3 列。
   窄屏自动减列，不用手写断点。 */
.cat-layout,
.cat-layout > *,
.cat-grid > li,
.pm-post-card {
  min-width: 0;   /* 关键：grid/flex 条目默认 min-width:auto 会被内容最小宽度撑破列宽，
                     窄屏下表现为卡片顶穿右侧留白、侧栏横排不换行 */
}
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: var(--pm-space-3);
  align-items: stretch;
}
.cat-grid > li { display: flex; }   /* 让 li 撑满行高，卡片才能等高对齐 */

.pm-post-card {
  width: 100%;
  height: 100%;
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--pm-dur) var(--pm-ease), transform var(--pm-dur) var(--pm-ease);
}
.pm-post-card:hover { box-shadow: var(--pm-shadow-md); transform: translateY(-2px); }
.pm-post-card .wp-block-post-featured-image { margin: 0; }
.pm-post-card .wp-block-post-featured-image img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  display: block;
}
.pm-post-card__body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
.pm-post-card .pm-eyebrow { margin: 0 0 8px; }
.pm-post-card__body .pm-card-title {
  font-size: var(--pm-fs-h3);
  line-height: var(--pm-lh-h3);
  min-height: calc(var(--pm-lh-h3) * 2);   /* 锁定两行，卡片高度天然一致 */
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-post-card__body .pm-card-title a { color: var(--pm-ink); }
.pm-post-card__body .pm-card-title a:hover { color: var(--pm-brand); }
.pm-post-card__body .pm-meta { margin: 0; }

/* 分类页整页同属一个分类，卡片上再标一次分类名属于冗余 —— 隐藏，卡片更紧凑 */
body.category .pm-post-card .pm-eyebrow { display: none; }

/* ============================================================
   论坛 / 社区页（bbPress Hero + 列表样式化）
   ============================================================ */
.pm-forum-hero { padding: var(--pm-space-8) 0; }
.pm-forum-hero .pm-eyebrow { color: var(--pm-soft-accent); }
.pm-forum-hero h1 { max-width: 820px; margin-bottom: var(--pm-space-2); }
.pm-forum-hero__lede { color: var(--pm-soft); max-width: 640px; margin-bottom: var(--pm-space-4); }
.pm-forum-hero__search { max-width: 640px; }
.pm-forum-hero__stats { display: flex; flex-wrap: wrap; gap: var(--pm-space-6); margin-top: var(--pm-space-5); }
.pm-forum-hero__stats > div { display: flex; flex-direction: column; }
.pm-forum-hero__stats .pm-stat__l { color: var(--pm-soft); }
.pm-forum-hero--board { padding: var(--pm-space-6) 0; }
.pm-forum-hero__meta { color: var(--pm-soft); font-size: var(--pm-fs-sm); margin-top: var(--pm-space-2); }
.pm-forum-hero__cta { margin-top: var(--pm-space-3); }
.pm-breadcrumb--invert a { color: var(--pm-soft); }
.pm-breadcrumb--invert a:hover { color: #fff; }

.pm-topic-top { border-bottom: 1px solid var(--pm-border); background: var(--pm-bg); }
.pm-topic-top__back {
  display: inline-block;
  padding: var(--pm-space-2) 0;
  color: var(--pm-muted);
  font-size: var(--pm-fs-sm);
}
.pm-topic-top__back:hover { color: var(--pm-brand); }

/* ---- bbPress 默认输出样式化（覆盖 bbp-default） ---- */
#bbpress-forums { font-size: var(--pm-fs-body); color: var(--pm-ink); background: none; border: none; }
#bbpress-forums, #bbpress-forums p { line-height: var(--pm-lh-body); }
#bbpress-forums a { color: var(--pm-brand); }
#bbpress-forums a:hover { opacity: .8; }
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies { border: none; margin: 0; }
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
  background: transparent;
  border: none;
  color: var(--pm-muted);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-caption);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: var(--pm-space-2) 0;
}
#bbpress-forums .bbp-forum,
#bbpress-forums .bbp-topic {
  background: none;
  border: none;
  border-bottom: 1px solid var(--pm-border);
  padding: var(--pm-space-3) 0;
}
#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink {
  font-family: var(--pm-font-display);
  font-weight: var(--pm-fw-semi);
  font-size: 16px;
  color: var(--pm-ink);
}
#bbpress-forums .bbp-forum-content,
#bbpress-forums .bbp-topic-meta {
  color: var(--pm-muted);
  font-size: var(--pm-fs-sm);
}
#bbpress-forums .bbp-topic-meta a { color: var(--pm-muted); }
#bbpress-forums .bbp-reply {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  padding: var(--pm-space-3);
  margin-bottom: var(--pm-space-3);
}
#bbpress-forums .bbp-reply-author { font-size: var(--pm-fs-sm); }
#bbpress-forums .bbp-reply-author .bbp-author-name { color: var(--pm-ink); font-weight: var(--pm-fw-semi); }
#bbpress-forums .avatar { border-radius: var(--pm-radius-pill); border: 2px solid var(--pm-border); }
#bbpress-forums fieldset.bbp-form {
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  padding: var(--pm-space-3);
  margin-top: var(--pm-space-4);
}
#bbpress-forums fieldset.bbp-form legend { font-family: var(--pm-font-display); font-weight: var(--pm-fw-semi); padding: 0 var(--pm-space-2); }
#bbpress-forums .bbp-form label { font-size: var(--pm-fs-sm); font-weight: var(--pm-fw-medium); }
#bbpress-forums #bbp_reply_content,
#bbpress-forums #bbp_topic_content,
#bbpress-forums .bbp-form input[type="text"],
#bbpress-forums .bbp-form textarea {
  width: 100%;
  background: var(--pm-field);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: 10px var(--pm-space-2);
  font-family: var(--pm-font-body);
  color: var(--pm-ink);
}
#bbpress-forums #bbp_reply_submit,
#bbpress-forums #bbp_topic_submit,
#bbpress-forums .bbp-submit-wrapper .button {
  background: var(--pm-brand);
  color: #fff;
  border: none;
  border-radius: var(--pm-radius);
  padding: 10px 20px;
  font-family: var(--pm-font-data);
  font-weight: var(--pm-fw-semi);
  cursor: pointer;
}
#bbpress-forums .bbp-pagination { color: var(--pm-muted); font-size: var(--pm-fs-sm); }

/* bbPress 自带的搜索框与论坛首页 hero 里那个重复，位置和样式都不对 —— 直接隐藏 */
#bbpress-forums .bbp-search-form { display: none; }

/* 窄屏：表头列宽不足会把「TOPICS」挤成「TOPI」，直接隐藏表头；
   列表行改为「标题 + 数字」一行、「最后回复」另起一行，避免四列硬挤 */
@media (max-width: 768px) {
  #bbpress-forums li.bbp-header { display: none; }
  #bbpress-forums li.bbp-forum-info,
  #bbpress-forums li.bbp-topic-title { width: 75%; }
  #bbpress-forums li.bbp-forum-topic-count,
  #bbpress-forums li.bbp-forum-reply-count,
  #bbpress-forums li.bbp-topic-voice-count,
  #bbpress-forums li.bbp-topic-reply-count { width: 12.5%; }
  #bbpress-forums li.bbp-forum-freshness,
  #bbpress-forums li.bbp-topic-freshness {
    width: 100%;
    clear: both;
    text-align: left;
    padding-top: 6px;
  }
}

/* ============================================================
   响应式（含移动端，对齐 outputs/mobile 设计稿）
   ============================================================ */
/* 分类页侧栏在 1200px 以下折到上方并改为横排。
   断点取 1200 而不是 1024：1200px 以下若仍保留 240px 侧栏，卡片列宽会被压到 350px 以下，
   宽高比失调、标题也必然被截断；横排侧栏能省出约 290px 给卡片。 */
@media (max-width: 1200px) {
  .cat-layout { grid-template-columns: minmax(0, 1fr); gap: var(--pm-space-4); }
  .cat-side__block { margin-bottom: 0; }
  .cat-side__list { display: flex; flex-wrap: wrap; gap: 6px 22px; }
  .cat-side__list a { border-bottom: 0; padding: 4px 0; }
  .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .article-aside { position: static; order: -1; }
  .article-aside .pm-datacard { display: none; }
}
@media (max-width: 768px) {
  .pm-single { padding-top: var(--pm-space-2); }
  /* 单列时卡片变宽，图片加高以免被压成一条；
     列宽必须写 minmax(0,1fr) —— 裸 1fr 的最小值是内容宽度，长标题会把列撑破导致整页横向溢出 */
  .cat-grid { grid-template-columns: minmax(0, 1fr); }
  .pm-post-card .wp-block-post-featured-image img { height: 200px; }
  .article-hero img,
  .article-hero .wp-block-post-featured-image img { height: 200px; border-radius: var(--pm-radius-card); }
  .article-body h2 { margin-top: var(--pm-space-5); }
  .pm-forum-hero { padding: var(--pm-space-6) 0; }
  .pm-forum-hero__stats { gap: var(--pm-space-4); }

  /* 信号条：窄屏只留关键两项，避免挤压成三行 */
  .pm-article-meta { gap: 4px var(--pm-space-2); font-size: var(--pm-fs-label); }
  .pm-article-meta__item[data-optional] { display: none; }

  /* Our top picks：窄屏单列，图缩到 96px */
  .pm-toppicks__grid { grid-template-columns: minmax(0, 1fr); padding: var(--pm-space-2); gap: var(--pm-space-2); }
  .pm-toppick { padding: 10px; gap: 12px; }
  .pm-toppick__media { flex: 0 0 96px; width: 96px; }
  .pm-toppicks__head { padding: var(--pm-space-2) var(--pm-space-3); }
}

/* ============================================================
   轻工具（Smart Pet Gear Matcher / Ramp & Stairs Calculator）
   ============================================================ */
.pm-page-wrap {
  padding: var(--pm-space-5) 0 var(--pm-section-gap);
}
.pm-page__title { max-width: 820px; margin-bottom: var(--pm-space-2); }
.pm-page-wrap .pm-page__subtitle {
  max-width: 820px;
  margin: 0 0 var(--pm-space-3);
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h4);
  line-height: var(--pm-lh-h4);
  color: var(--pm-muted);
}
.pm-page__body { max-width: 820px; }
.pm-page__body .pm-lead {
  font-size: 17px;
  line-height: 30px;
  color: var(--pm-muted);
  margin-bottom: var(--pm-space-4);
}
.pm-page__body h2 {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h3);
  line-height: var(--pm-lh-h3);
  margin: var(--pm-space-6) 0 var(--pm-space-2);
}
.pm-page__body p { color: var(--pm-ink); }
/* 下划线只给「正文段落 / 列表」里的链接 —— 用 .pm-page__body a 泛匹配会连
   卡片、按钮这类组件型链接一起加下划线，把它们弄得像文字超链接 */
.pm-page__body p a,
.pm-page__body li a { color: var(--pm-link); text-decoration: underline; text-underline-offset: 2px; }

.pm-tool {
  border: 0;
  border-radius: var(--pm-radius-lg);
  background: var(--pm-surface);
  box-shadow: var(--pm-shadow-md);
  overflow: hidden;
  margin: var(--pm-space-4) 0 var(--pm-space-5);
  max-width: 100%;
}
/* 顶部色条：深绿过渡到暖橙，标记「这里是可操作的工具」 */
.pm-tool::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg, var(--pm-brand) 0%, var(--pm-brand) 58%, var(--pm-accent) 100%);
}
.pm-tool__form { padding: var(--pm-space-5) var(--pm-space-4) var(--pm-space-4); }
.pm-tool__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  /* 关键：列各自独立。默认的 stretch 会让「带说明文字的列」把同排其他列一起拉高，
     表现为输入框下方凭空多出大片空白、看起来三列不齐。 */
  align-items: start;
  gap: var(--pm-space-3);
  margin-bottom: var(--pm-space-3);
}
.pm-tool__field { min-width: 0; }
.pm-tool__field label {
  display: block;
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .07em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-brand);
  margin-bottom: 8px;
}
/* 输入框：奶油米底 + 深绿标签；聚焦时转纯白、描边加深、外圈光晕 */
.pm-tool__field input,
.pm-tool__field select {
  width: 100%;
  min-height: var(--pm-control-h);
  padding: 10px var(--pm-space-2);
  background: var(--pm-bg);
  border: 1.5px solid var(--pm-border);
  border-radius: var(--pm-radius);
  font-family: var(--pm-font-body);
  font-size: var(--pm-fs-body);
  color: var(--pm-ink);
  transition: border-color var(--pm-dur) var(--pm-ease),
              background-color var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease);
}
.pm-tool__field input:hover,
.pm-tool__field select:hover { border-color: var(--pm-border-soft); }
.pm-tool__field input:focus,
.pm-tool__field select:focus {
  outline: none;
  background: var(--pm-surface);
  border-color: var(--pm-brand);
  box-shadow: 0 0 0 3px var(--pm-focus-ring);
}
.pm-tool__hint { margin: 6px 0 0; font-size: var(--pm-fs-caption); color: var(--pm-muted-2); }
/* 填法说明跟在输入区下方：上移吃掉 .pm-tool__row 的底边距，紧贴输入框 */
.pm-tool__hint--howto { margin: calc(6px - var(--pm-space-3)) 0 var(--pm-space-2); }

.pm-tool__form .pm-btn {
  margin-top: var(--pm-space-2);
  height: 50px;
  padding: 0 var(--pm-space-5);
  font-size: var(--pm-fs-body);
  box-shadow: 0 2px 8px var(--pm-shadow-btn);
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease),
              filter var(--pm-dur) var(--pm-ease);
}
.pm-tool__form .pm-btn:hover {
  opacity: 1;
  filter: brightness(.92);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px var(--pm-shadow-btn);
}

/* ---------- 结果区：整块深绿，作为「输入 → 输出」的视觉分界 ---------- */
.pm-tool__result {
  border-top: 0;
  padding: var(--pm-space-5) var(--pm-space-4);
  background: var(--pm-brand);
  color: var(--pm-soft);
}
.pm-tool__summary-k,
.pm-tool__warn-k {
  margin: 0 0 10px;
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .09em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-brand);
}
.pm-tool__result .pm-tool__summary-k { color: var(--pm-soft-accent); }

/* 结果数字：暖橙 + 大号 —— 整页最想让人第一眼看到的东西 */
.pm-tool__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--pm-space-2);
  margin-bottom: var(--pm-space-4);
}
.pm-tool__stats > div {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: var(--pm-space-2);
}
.pm-tool__result .pm-tool__stats > div {
  background: var(--pm-on-brand-fill);
  border-color: var(--pm-on-brand-line);
  padding: var(--pm-space-3) var(--pm-space-2);
}
.pm-tool__n {
  display: block;
  font-family: var(--pm-font-display);
  font-size: 22px;
  line-height: 32px;
  color: var(--pm-brand);
}
.pm-tool__result .pm-tool__n {
  font-size: var(--pm-fs-h2);
  line-height: var(--pm-lh-h2);
  color: var(--pm-soft-accent);
}
.pm-tool__l { display: block; font-size: var(--pm-fs-caption); color: var(--pm-muted); }
.pm-tool__result .pm-tool__l { color: var(--pm-soft); }

.pm-tool__h {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h4);
  line-height: var(--pm-lh-h4);
  margin: var(--pm-space-4) 0 var(--pm-space-2);
}
.pm-tool__result .pm-tool__h { color: var(--pm-brand-ink); }
.pm-tool__lead { margin: 0 0 var(--pm-space-2); color: var(--pm-muted); }
.pm-tool__result .pm-tool__lead { color: var(--pm-soft); }

/* 规格清单：深绿底上嵌一张白卡，形成第二层对比 */
.pm-tool__specs { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pm-border); }
.pm-tool__result .pm-tool__specs {
  background: var(--pm-surface);
  border-top: 0;
  border-radius: var(--pm-radius-card);
  padding: 4px var(--pm-space-3);
  margin-top: var(--pm-space-2);
}
.pm-tool__spec { padding: 12px 0; border-bottom: 1px solid var(--pm-border-soft); }
.pm-tool__result .pm-tool__spec:last-child { border-bottom: 0; }
.pm-tool__spec-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pm-space-2);
}
.pm-tool__spec-label { font-size: var(--pm-fs-sm); color: var(--pm-muted); }
.pm-tool__spec-value {
  font-family: var(--pm-font-data);
  font-weight: var(--pm-fw-semi);
  color: var(--pm-brand);
  white-space: nowrap;
}
.pm-tool__spec-note { margin: 4px 0 0; font-size: var(--pm-fs-caption); color: var(--pm-muted-2); }

/* 结论卡（斜坡工具）：结论词用暖橙点出 */
.pm-tool__verdict {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius);
  padding: var(--pm-space-3);
  margin-bottom: var(--pm-space-4);
}
.pm-tool__result .pm-tool__verdict {
  background: var(--pm-on-brand-fill);
  border-color: var(--pm-on-brand-line);
}
.pm-tool__verdict-line { margin: 0 0 6px; font-size: var(--pm-fs-h4); line-height: var(--pm-lh-h4); color: var(--pm-ink); }
.pm-tool__result .pm-tool__verdict-line { color: var(--pm-brand-ink); }
.pm-tool__result .pm-tool__verdict-line strong { color: var(--pm-soft-accent); }
.pm-tool__verdict-why { margin: 0 0 8px; color: var(--pm-muted); }
.pm-tool__result .pm-tool__verdict-why { color: var(--pm-soft); }
.pm-tool__verdict-cond { margin: 0; font-size: var(--pm-fs-caption); color: var(--pm-muted-2); }
.pm-tool__result .pm-tool__verdict-cond { color: var(--pm-soft); }
.pm-tool__result .pm-tool__verdict-cond strong { color: var(--pm-brand-ink); }

/* 提醒块：暖橙左线 + 深底浅填充 */
.pm-tool__warn {
  border-left: 3px solid var(--pm-accent);
  background: var(--pm-tint);
  border-radius: 0 var(--pm-radius) var(--pm-radius) 0;
  padding: var(--pm-space-2) var(--pm-space-3);
  margin: var(--pm-space-4) 0;
}
.pm-tool__result .pm-tool__warn { background: var(--pm-on-brand-fill); }
.pm-tool__warn-k { color: var(--pm-danger); margin-bottom: 6px; }
.pm-tool__result .pm-tool__warn-k { color: var(--pm-soft-accent); }
.pm-tool__warn ul { margin: 0; padding-left: 18px; }
.pm-tool__warn li { font-size: var(--pm-fs-sm); color: var(--pm-ink); margin-bottom: 6px; }
.pm-tool__result .pm-tool__warn li { color: var(--pm-soft); }
.pm-tool__warn li:last-child { margin-bottom: 0; }

.pm-tool__cta { display: flex; flex-wrap: wrap; gap: var(--pm-space-1); margin-top: var(--pm-space-4); }
/* 深绿底上的描边按钮：改用白字白边，否则深绿字看不见 */
.pm-tool__result .pm-btn--ghost {
  border-color: var(--pm-on-brand-line);
  color: var(--pm-brand-ink);
}
.pm-tool__result .pm-btn--ghost:hover { border-color: var(--pm-brand-ink); opacity: 1; }

@media (max-width: 768px) {
  .pm-page-wrap { padding: var(--pm-space-3) 0 var(--pm-space-8); }
  .pm-page__body .pm-lead { font-size: var(--pm-fs-body); line-height: var(--pm-lh-body); }
  .pm-tool__form { padding: var(--pm-space-4) var(--pm-space-2) var(--pm-space-3); }
  .pm-tool__result { padding: var(--pm-space-4) var(--pm-space-2); }
  .pm-tool__spec-top { flex-direction: column; gap: 2px; }
  .pm-tool__spec-value { white-space: normal; }
}

/* ============================================================
   工具汇总页（/tools/）+ 工具页两栏骨架 —— 2026-10-15 新增
   ============================================================ */

/* 汇总页的卡片要占满内容区，不受正文 820px 限宽 */
.pm-page__body--wide { max-width: none; }

/* ---------- 汇总页：两个工具的大卡片 ---------- */
.pm-hub {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pm-space-3);
  margin: var(--pm-space-4) 0 var(--pm-space-5);
}
.pm-hub__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--pm-space-5) var(--pm-space-4) var(--pm-space-4);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--pm-dur) var(--pm-ease),
              box-shadow var(--pm-dur) var(--pm-ease),
              border-color var(--pm-dur) var(--pm-ease);
}
/* 顶部色条区分两个工具：① 深绿，② 暖橙 */
.pm-hub__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pm-brand);
}
.pm-hub__card--ramp::before {
  background: linear-gradient(90deg, var(--pm-accent) 0%, var(--pm-accent) 58%, var(--pm-brand) 100%);
}
/* 后续新增的工具卡统一用 brand → accent 渐变；指南卡不用彩色，避免被当成工具 */
.pm-hub__card--litter::before,
.pm-hub__card--purifier::before,
.pm-hub__card--airline::before,
.pm-hub__card--treat::before {
  background: linear-gradient(90deg, var(--pm-brand) 0%, var(--pm-brand) 42%, var(--pm-accent) 100%);
}
.pm-hub__card--guide::before { background: var(--pm-muted-2); }
/* 指南卡横跨两列，收在工具卡下方 */
.pm-hub__card--wide { grid-column: 1 / -1; }
.pm-hub__card--guide .pm-hub__n {
  top: var(--pm-space-3);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-muted-2);
}
.pm-hub__card--guide .pm-hub__cta { background: var(--pm-muted); }
.pm-hub__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pm-shadow-lg);
  border-color: var(--pm-border-soft);
}
/* 大字序号：纯装饰水印，不参与阅读 */
.pm-hub__n {
  position: absolute;
  top: var(--pm-space-1);
  right: var(--pm-space-3);
  font-family: var(--pm-font-display);
  font-size: calc(var(--pm-fs-h1) * 1.4);
  line-height: 1;
  color: var(--pm-tint);
  pointer-events: none;
  user-select: none;
}
.pm-hub__title { font-size: var(--pm-fs-h3); line-height: var(--pm-lh-h3); margin: 0 0 var(--pm-space-2); color: var(--pm-ink); }
.pm-hub__desc {
  margin: 0 0 var(--pm-space-3);
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-muted);
}
.pm-hub__list {
  list-style: none;
  margin: 0 0 var(--pm-space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-1);
}
.pm-hub__list li {
  position: relative;
  padding-left: 18px;
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-ink);
}
.pm-hub__list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pm-brand);
}
.pm-hub__card--ramp .pm-hub__list li::before { background: var(--pm-accent); }
.pm-hub__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;          /* 两张卡的按钮贴底对齐 */
  height: 44px;
  padding: 0 var(--pm-space-3);
  border-radius: var(--pm-radius);
  background: var(--pm-brand);
  color: var(--pm-brand-ink);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-sm);
  font-weight: var(--pm-fw-semi);
}
.pm-hub__card--ramp .pm-hub__cta { background: var(--pm-accent); }
.pm-hub__arrow { transition: transform var(--pm-dur) var(--pm-ease); }
.pm-hub__card:hover .pm-hub__arrow { transform: translateX(3px); }

/* ---------- 工具页：左内容 + 右相关指南 ---------- */
.pm-toolpage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--pm-space-6);
  align-items: start;
}
.pm-toolpage__main { min-width: 0; }
.pm-toolpage__main .pm-page__body { max-width: none; }
.pm-toolpage__aside {
  min-width: 0;
  position: sticky;
  top: 92px;
}

/* ---------- 侧栏：相关指南 + 交叉引流 ---------- */
.pm-aside { display: flex; flex-direction: column; gap: var(--pm-space-3); }
.pm-aside__block {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  padding: var(--pm-space-3);
}
.pm-aside__k {
  margin: 0 0 var(--pm-space-2);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-muted);
}
.pm-aside__list { display: flex; flex-direction: column; }
.pm-aside__item {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid var(--pm-border-soft);
  text-decoration: none;
}
.pm-aside__item:first-child { padding-top: 0; }
.pm-aside__item:last-child { border-bottom: 0; padding-bottom: 0; }
.pm-aside__thumb {
  flex: 0 0 76px;
  width: 76px;
  height: 56px;
  border-radius: var(--pm-radius);
  overflow: hidden;
  background: var(--pm-tint);
}
.pm-aside__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-aside__text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pm-aside__title {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pm-aside__item:hover .pm-aside__title { color: var(--pm-brand); }
.pm-aside__meta { font-size: var(--pm-fs-caption); color: var(--pm-muted-2); }
.pm-aside__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--pm-space-2);
  font-size: var(--pm-fs-caption);
  font-weight: var(--pm-fw-semi);
  color: var(--pm-brand);
  text-decoration: none;
}
.pm-aside__more:hover { text-decoration: underline; text-underline-offset: 2px; }

/* 交叉引流块：深绿底，与结果区呼应 */
.pm-aside__block--cross {
  display: block;
  background: var(--pm-brand);
  border-color: var(--pm-brand);
  text-decoration: none;
  transition: transform var(--pm-dur) var(--pm-ease), box-shadow var(--pm-dur) var(--pm-ease);
}
.pm-aside__block--cross:hover { transform: translateY(-2px); box-shadow: var(--pm-shadow-md); }
.pm-aside__block--cross .pm-aside__k { color: var(--pm-soft); }
.pm-aside__cross-title {
  display: block;
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h4);
  line-height: var(--pm-lh-h4);
  color: var(--pm-brand-ink);
  margin-bottom: 6px;
}
.pm-aside__cross-desc {
  display: block;
  font-size: var(--pm-fs-caption);
  line-height: var(--pm-lh-caption);
  color: var(--pm-soft);
  margin-bottom: var(--pm-space-2);
}
.pm-aside__cross-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--pm-fs-caption);
  font-weight: var(--pm-fw-semi);
  color: var(--pm-soft-accent);
}

/* ---------- 响应式 ---------- */
@media (max-width: 1200px) {
  .pm-toolpage { grid-template-columns: minmax(0, 1fr); gap: var(--pm-space-5); }
  .pm-toolpage__aside { position: static; }
  .pm-aside { flex-direction: row; flex-wrap: wrap; }
  .pm-aside__block { flex: 1 1 300px; }
}
@media (max-width: 768px) {
  .pm-hub { grid-template-columns: minmax(0, 1fr); }
  .pm-hub__card { padding: var(--pm-space-4) var(--pm-space-3) var(--pm-space-3); }
  .pm-aside { flex-direction: column; }
}

/* ============================================================
   场景筛选标签（文章总览页 /guides/ 与分类页顶部）
   ============================================================ */
.pm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: var(--pm-space-4);
}
.pm-chip {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-pill);
  background: var(--pm-surface);
  color: var(--pm-muted);
  font-size: var(--pm-fs-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--pm-dur) var(--pm-ease), color var(--pm-dur) var(--pm-ease),
              background-color var(--pm-dur) var(--pm-ease);
}
.pm-chip:hover { border-color: var(--pm-brand); color: var(--pm-brand); }
.pm-chip.is-active {
  background: var(--pm-brand);
  border-color: var(--pm-brand);
  color: var(--pm-brand-ink);
}

/* ============================================================
   工具页静态参考表（[pm_ramp_reference] / [pm_gear_reference]）
   ------------------------------------------------------------
   把六档阈值表、每日需求、设备容量做成「提交表单前就能看到」的
   页面内容，用于承接问题型搜索（how steep / how long / how much），
   也让爬虫与 AI 摘要不必提交表单就能读到数字。

   注意：正文区的 .pm-page__body p 与 .pm-page__body h2 已有全局
   样式，本区块一律带 .pm-page__body 前缀以保证优先级压得住。
   ============================================================ */
.pm-page__body > .pm-ref { margin-block-start: var(--pm-space-5); }

.pm-page__body .pm-ref__h {
  font-family: var(--pm-font-display);
  font-size: var(--pm-fs-h3);
  line-height: var(--pm-lh-h3);
  margin: var(--pm-space-6) 0 var(--pm-space-2);
}
.pm-page__body .pm-ref__h:first-child { margin-top: 0; }

.pm-page__body .pm-ref__intro {
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-muted);
  margin: 0 0 var(--pm-space-2);
}

.pm-page__body .pm-ref__foot {
  margin: var(--pm-space-2) 0 0;
  font-size: var(--pm-fs-caption);
  line-height: var(--pm-lh-caption);
  color: var(--pm-muted-2);
}

.pm-ref__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-radius-card);
  background: var(--pm-surface);
}

.pm-ref__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pm-fs-sm);
}
.pm-ref__table--matrix { min-width: 640px; }

.pm-ref__table thead th {
  text-align: left;
  padding: 11px var(--pm-space-2);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  line-height: var(--pm-lh-label);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-muted);
  background: var(--pm-bg);
  border-bottom: 1px solid var(--pm-border);
  white-space: nowrap;
}

.pm-ref__table tbody th,
.pm-ref__table tbody td {
  padding: 12px var(--pm-space-2);
  text-align: left;
  vertical-align: top;
  font-weight: var(--pm-fw-regular);
  color: var(--pm-ink);
  line-height: var(--pm-lh-sm);
  border-bottom: 1px solid var(--pm-border-soft);
}
.pm-ref__table tbody th { font-weight: var(--pm-fw-medium); }
.pm-ref__table tbody tr:last-child th,
.pm-ref__table tbody tr:last-child td { border-bottom: 0; }

/* 行分组头：Dogs / Cats */
.pm-ref__table .pm-ref__group th {
  padding-top: 8px;
  padding-bottom: 8px;
  background: var(--pm-tint);
  font-family: var(--pm-font-data);
  font-size: var(--pm-fs-label);
  line-height: var(--pm-lh-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: var(--pm-fw-semi);
  color: var(--pm-muted);
  border-bottom: 1px solid var(--pm-border);
}

.pm-ref__num {
  white-space: nowrap;
  font-family: var(--pm-font-data);
}
.pm-ref__num--key {
  color: var(--pm-brand);
  font-weight: var(--pm-fw-semi);
}
.pm-ref__of {
  display: block;
  font-family: var(--pm-font-body);
  font-size: var(--pm-fs-caption);
  line-height: var(--pm-lh-caption);
  font-weight: var(--pm-fw-regular);
  color: var(--pm-muted-2);
}

/* 关键行：越过安全上限 */
.pm-ref__alert th,
.pm-ref__alert td { background: var(--pm-tint); }
.pm-ref__alert .pm-ref__num--key { color: var(--pm-danger); }

/* 参考表中的普通列表（不用表格的地方，例如就诊提示） */
.pm-page__body .pm-ref__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-1);
}
.pm-page__body .pm-ref__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--pm-fs-sm);
  line-height: var(--pm-lh-sm);
  color: var(--pm-ink);
}
.pm-page__body .pm-ref__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pm-brand);
}

@media (max-width: 768px) {
  .pm-page__body .pm-ref__h { font-size: var(--pm-fs-h4); line-height: var(--pm-lh-h4); }
  .pm-ref__table { font-size: var(--pm-fs-caption); }
  .pm-ref__table thead th,
  .pm-ref__table tbody th,
  .pm-ref__table tbody td { padding: 9px 12px; }
}