/* 路线图（design/components.md 第 13 节）的共用样式与首页模块（小工具、短代码）：根上的状态色、点赞，
   首页模块和隐藏后的恢复按钮。完整页 /roadmap/ 专用的样式在 roadmap-page.css，只在完整页加载。
   首页模块沿用原插件的样子：容器里的胶囊、计数、点赞和圆形按钮带细描边（只有这两层）。 */
/* —— 根：状态色（时间地图用 roadmap-chart.js 读取解析后的颜色）。进行中取 accent：暗色下比品牌主色更亮，深色表面上对比更足 —— */
.zbui.zb-roadmap {
  --_zb-roadmap-planned: var(--zb-text-muted);
  --_zb-roadmap-in-progress: var(--zb-accent);
  --_zb-roadmap-completed: var(--zb-success-soft-text-strong);
  --_zb-roadmap-cancelled: var(--zb-text-subtle);
  /* 首页模块新条目的色调：默认 primary（未来计划），已完成一栏的条目换成 success，见「新条目」。 */
  --_zb-roadmap-new-rgb: var(--zb-accent-rgb);
  --_zb-roadmap-new-solid: var(--zb-accent);
  --_zb-roadmap-new-line: var(--zb-primary-soft-border-strong);
  --_zb-roadmap-new-soft: var(--zb-primary-soft);
  --_zb-roadmap-new-text: var(--zb-primary-soft-text);
  background: transparent;
}
/* 只给读屏的文字：完整页的状态播报与时间地图说明，首页模块分段上「有新条目」。 */
.zbui .zb-roadmap__sr {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: 0;
  clip: rect(0 0 0 0);
  padding: 0;
  white-space: nowrap;
}

/* —— 点赞：完整页与首页模块共用，与原插件首页模块的点赞同一种：--zb-muted 底加一条细描边的胶囊。
   触屏上没有悬停，透明底的图标加数字看起来和旁边的日期一样；只有底色时又和同一行无描边的标签像同一类。
   描边让它成为行里唯一带边界的控件（第二层、单个出现），一眼看出可以点 —— */
.zbui .zb-roadmap-like {
  position: relative;
  display: inline-flex;
  min-height: var(--zb-control-h-xs);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zb-space-2xs);
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  box-shadow: var(--zb-inset-highlight);
  color: var(--zb-text-soft);
  cursor: pointer;
  font-size: var(--zb-text-sm);
  font-variant-numeric: tabular-nums;
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-snug);
  padding: 0 var(--zb-space-xs);
  transition: background-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
/* 悬停加深（与筛选胶囊同一种），只在能悬停的设备上出现；放在已赞之前：已赞的按钮悬停时保持已赞的样子。 */
@media (hover: hover) {
  .zbui .zb-roadmap-like:hover {
    background: color-mix(in srgb, var(--zb-text) 8%, var(--zb-muted));
    color: var(--zb-text);
  }
}
.zb-roadmap-like[aria-pressed="true"],
.zb-roadmap-like[aria-pressed="true"]:hover {
  border-color: var(--zb-primary-soft-border);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
}
.zbui .zb-roadmap-like__icon {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
}
.zb-roadmap-like[aria-pressed="true"] .zb-roadmap-like__icon {
  fill: currentColor;
}
.zb-roadmap-like[aria-busy="true"] {
  cursor: progress;
  opacity: 0.6;
}
/* 点赞成功时图标回弹一下（与评论区的投票动效同一曲线），由 roadmap.js 加 is-popping。 */
@keyframes zb-roadmap-like-pop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
.zb-roadmap-like.is-popping .zb-roadmap-like__icon {
  animation: zb-roadmap-like-pop var(--zb-duration-slow) var(--zb-ease-out);
}
.zbui .zb-roadmap-like:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}

/* —— 状态：圆点加文字。完整页的卡片、下一步、地图详情与图例，以及首页模块的「进行中」共用；
   圆点取根上的状态色（与时间地图同色），已取消是空心环 —— */
.zbui .zb-roadmap-status {
  display: inline-flex;
  align-items: center;
  gap: var(--zb-space-xs);
  color: var(--zb-text-soft);
  font-size: var(--zb-text-xs);
  font-weight: var(--zb-weight-medium);
  line-height: var(--zb-leading-snug);
  white-space: nowrap;
}
.zbui .zb-roadmap-status::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  box-sizing: border-box;
  border-radius: var(--zb-radius-circle);
  content: "";
}
:where(.zbui.zb-roadmap) .zb-roadmap-status--planned::before {
  background: var(--_zb-roadmap-planned);
}
:where(.zbui.zb-roadmap) .zb-roadmap-status--in-progress::before {
  background: var(--_zb-roadmap-in-progress);
}
:where(.zbui.zb-roadmap) .zb-roadmap-status--completed::before {
  background: var(--_zb-roadmap-completed);
}
:where(.zbui.zb-roadmap) .zb-roadmap-status--cancelled::before {
  border: 2px solid var(--_zb-roadmap-cancelled);
}

/* —— 首页模块的根：隐藏和恢复时，高度（grid-template-rows 1fr ↔ 0fr）和透明度一起过渡，播完才真正隐藏 —— */
.zbui.zb-roadmap--preview {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--zb-duration-base) var(--zb-ease), opacity var(--zb-duration-base) var(--zb-ease);
}
.zbui.zb-roadmap--preview.is-leaving,
.zbui.zb-roadmap--preview.is-entering {
  grid-template-rows: 0fr;
  opacity: 0;
}

/* —— 首页模块的容器：与完整页的面板同一配方 —— */
.zbui .zb-roadmap-preview {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--zb-border);
  border-radius: var(--zb-radius-md);
  background: var(--zb-surface-card);
  box-shadow: var(--zb-shadow-card);
}

/* —— 首页模块：原插件的样子 ——
   头部、栏标题带和条目行用分隔线；PC 两栏的条目行经 subgrid 对齐（每栏最多 6 条，加标题带共 7 行）。 */
.zbui .zb-roadmap-preview__head {
  display: flex;
  align-items: center;
  gap: var(--zb-space-xl);
  border-bottom: 1px solid var(--zb-border);
  padding: var(--zb-space-sm) var(--zb-space-md);
}
.zbui .zb-roadmap-preview__icon {
  display: inline-grid;
  flex: 0 0 auto;
  width: var(--zb-control-h-sm);
  height: var(--zb-control-h-sm);
  place-items: center;
  border: 1px solid var(--zb-primary-soft-border);
  border-radius: var(--zb-radius-circle);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
}
.zbui .zb-roadmap-preview__icon svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
}
.zbui .zb-roadmap-preview__heading {
  min-width: 0;
  flex: 1 1 auto;
}
.zbui .zb-roadmap-preview__title {
  margin: 0;
  color: var(--zb-text);
  font-size: var(--zb-text-xl);
  font-weight: var(--zb-weight-bold);
  line-height: var(--zb-leading-tight);
  overflow-wrap: anywhere;
}
.zbui .zb-roadmap-preview__summary {
  margin: var(--zb-space-2xs) 0 0;
  color: var(--zb-text-soft);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-normal);
}
.zbui .zb-roadmap-preview__summary strong {
  font-weight: var(--zb-weight-bold);
}
.zbui .zb-roadmap-preview__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zb-space-xs);
}
.zbui .zb-roadmap-preview__more {
  display: inline-flex;
  min-height: var(--zb-control-h);
  align-items: center;
  gap: var(--zb-space-xs);
  border: 1px solid var(--zb-primary-soft-border-strong);
  border-radius: var(--zb-radius-pill);
  background: var(--zb-primary-soft);
  box-shadow: var(--zb-inset-highlight);
  color: var(--zb-primary-soft-text);
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-snug);
  padding: var(--zb-space-2xs) var(--zb-space-2xs) var(--zb-space-2xs) var(--zb-space-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--zb-duration-fast) var(--zb-ease), box-shadow var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-roadmap-preview__more-label--short {
  display: none;
}
.zbui .zb-roadmap-preview__more-arrow {
  display: inline-grid;
  width: var(--zb-control-h-sm);
  height: var(--zb-control-h-xs);
  flex: 0 0 auto;
  place-items: center;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-primary);
  box-shadow: var(--zb-shadow-action), var(--zb-inset-highlight);
  color: var(--zb-on-primary);
  transition: background-color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-roadmap-preview__more-arrow svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
  transition: transform var(--zb-duration-base) var(--zb-ease-out);
}
.zbui .zb-roadmap-preview__hide {
  display: inline-grid;
  width: var(--zb-control-h);
  height: var(--zb-control-h);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-circle);
  background: var(--zb-surface);
  color: var(--zb-text-muted);
  cursor: pointer;
  padding: 0;
  transition: background-color var(--zb-duration-fast) var(--zb-ease), border-color var(--zb-duration-fast) var(--zb-ease), color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-roadmap-preview__hide svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
}

/* 悬停效果只给能悬停的设备，触屏上点过之后不会停在悬停态。 */
@media (hover: hover) {
  .zbui .zb-roadmap-preview__more:hover {
    border-color: var(--zb-primary);
    box-shadow: var(--zb-shadow-raise), var(--zb-inset-highlight);
  }
  .zb-roadmap-preview__more:hover .zb-roadmap-preview__more-arrow {
    background: var(--zb-primary-hover);
  }
  .zb-roadmap-preview__more:hover .zb-roadmap-preview__more-arrow svg {
    transform: translateX(2px);
  }
  .zbui .zb-roadmap-preview__hide:hover {
    border-color: var(--zb-primary-soft-border);
    background: var(--zb-primary-soft);
    color: var(--zb-primary-soft-text);
  }
  .zbui .zb-roadmap-preview__link:hover {
    color: var(--zb-link);
  }
  /* 整行可点：悬停在条目上（点赞除外）时整行显示悬停底色，与原插件一样。 */
  .zb-roadmap-preview__item:has(.zb-roadmap-preview__link:hover) {
    background: var(--zb-muted);
  }
  .zb-roadmap-restore__button:hover .zb-roadmap-restore__marker {
    background: var(--zb-primary-hover);
  }
}
.zbui .zb-roadmap-preview__more:focus-visible,
.zbui .zb-roadmap-preview__hide:focus-visible,
.zbui .zb-roadmap-preview__all:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}
.zbui .zb-roadmap-preview__tabs {
  display: none;
}
.zbui .zb-roadmap-preview__lanes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.zbui .zb-roadmap-preview__lane {
  min-width: 0;
}
.zbui .zb-roadmap-preview__lane + .zb-roadmap-preview__lane {
  border-left: 1px solid var(--zb-border);
}
.zbui .zb-roadmap-preview__lane-title {
  display: flex;
  min-height: var(--zb-control-h);
  align-items: center;
  gap: var(--zb-space-xs);
  margin: 0;
  border-bottom: 1px solid var(--zb-border);
  background: var(--zb-surface-sunken);
  color: var(--zb-text);
  font-size: var(--zb-text-base);
  font-weight: var(--zb-weight-bold);
  line-height: var(--zb-leading-snug);
  padding: var(--zb-space-xs) var(--zb-space-md);
}
.zbui .zb-roadmap-preview__lane-icon,
.zbui .zb-roadmap-preview__marker {
  display: inline-grid;
  width: var(--zb-control-h-xs);
  height: var(--zb-control-h-xs);
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--zb-primary-soft-border);
  border-radius: var(--zb-radius-circle);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
}
.zbui .zb-roadmap-preview__lane-icon svg,
.zbui .zb-roadmap-preview__marker svg {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
}
.zbui .zb-roadmap-preview__lane--done .zb-roadmap-preview__lane-icon,
.zbui .zb-roadmap-preview__item--done .zb-roadmap-preview__marker {
  border-color: var(--zb-success-soft-border);
  background: var(--zb-success-soft);
  color: var(--zb-success-soft-text-strong);
}
.zbui .zb-roadmap-preview__count {
  display: inline-flex;
  min-width: var(--zb-control-h-xs);
  min-height: var(--zb-control-h-xs);
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zb-primary-soft-border);
  border-radius: var(--zb-radius-pill);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
  font-size: var(--zb-text-xs);
  font-variant-numeric: tabular-nums;
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  padding: var(--zb-space-2xs) var(--zb-space-xs);
}
.zbui .zb-roadmap-preview__count--done {
  border-color: var(--zb-success-soft-border);
  background: var(--zb-success-soft);
  color: var(--zb-success-soft-text-strong);
}
.zbui .zb-roadmap-preview__lane-title .zb-roadmap-preview__count {
  margin-left: auto;
}
.zbui .zb-roadmap-preview__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.zbui .zb-roadmap-preview__item {
  position: relative;
  display: grid;
  min-width: 0;
  grid-template-columns: var(--zb-control-h-xs) minmax(0, 1fr);
  align-items: start;
  gap: var(--zb-space-sm);
  padding: var(--zb-space-xs) var(--zb-space-md);
}
.zbui .zb-roadmap-preview__item + .zb-roadmap-preview__item {
  border-top: 1px solid var(--zb-border);
}
.zb-roadmap-preview__item:has(.zb-roadmap-preview__link:active) {
  background: var(--zb-muted);
}
.zbui .zb-roadmap-preview__body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-self: stretch;
}
.zbui .zb-roadmap-preview__labels {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--zb-space-2xs);
  list-style: none;
  margin: 0 0 var(--zb-space-2xs);
  padding: 0;
}
.zbui .zb-roadmap-preview__label {
  display: inline-flex;
  max-width: 100%;
  min-height: var(--zb-control-h-xs);
  align-items: center;
  gap: var(--zb-space-2xs);
  border: 1px solid var(--zb-chip-border);
  border-radius: var(--zb-radius-pill);
  background: var(--zb-muted);
  color: var(--zb-text-soft);
  font-size: var(--zb-text-xs);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  padding: var(--zb-space-2xs) var(--zb-space-xs);
}
.zbui .zb-roadmap-preview__label--primary {
  border-color: var(--zb-primary-soft-border);
  background: var(--zb-primary-soft);
  color: var(--zb-primary-soft-text);
}
.zbui .zb-roadmap-preview__label--success {
  border-color: var(--zb-success-soft-border);
  background: var(--zb-success-soft);
  color: var(--zb-success-soft-text-strong);
}
.zbui .zb-roadmap-preview__label--info {
  border-color: var(--zb-info-soft-border);
  background: var(--zb-info-soft);
  color: var(--zb-info-soft-text);
}
.zbui .zb-roadmap-preview__label--warning {
  border-color: var(--zb-warning-soft-border);
  background: var(--zb-warning-soft);
  color: var(--zb-warning-soft-text-strong);
}
.zbui .zb-roadmap-preview__label--danger {
  border-color: var(--zb-danger-soft-border);
  background: var(--zb-danger-soft);
  color: var(--zb-danger-soft-text);
}

/* —— 新条目：发布或完成后几天内（后台「「新」标记天数」，默认 3 天）。照原插件：左侧一条 4px 的栏色竖线，
   圆标外一圈光晕和波浪环，标签行末尾是「✦ 新」（双层描边加柔光）；未来计划用根上的 primary 色调，已完成一栏
   换成 success。波浪环与原插件一样一直慢慢转（8 秒一圈）；「新」的动效只在条目进入视口时播一次（roadmap.js
   加 is-new-playing）：弹入后脉冲两次，共约 3.4 秒，之后不再脉冲。减少动效时都静止。能悬停的设备上悬停、键盘
   聚焦整行时加亮。闪亮是预先画好的一层（::before），动效只改它的透明度。手机上不显示圆标，只有竖线和「新」；
   分段上的圆点见手机部分 —— */
:where(.zbui.zb-roadmap) .zb-roadmap-preview__item--done {
  --_zb-roadmap-new-rgb: var(--zb-success-rgb);
  --_zb-roadmap-new-solid: var(--zb-success);
  --_zb-roadmap-new-line: var(--zb-success-soft-border);
  --_zb-roadmap-new-soft: var(--zb-success-soft);
  --_zb-roadmap-new-text: var(--zb-success-soft-text-strong);
}
:where(.zbui.zb-roadmap) .zb-roadmap-preview__list .zb-roadmap-preview__item--new {
  box-shadow: inset 4px 0 0 var(--_zb-roadmap-new-line);
}
:where(.zbui.zb-roadmap) .zb-roadmap-preview__labels .zb-roadmap-preview__new {
  position: relative;
  display: inline-flex;
  min-height: var(--zb-control-h-xs);
  align-items: center;
  gap: var(--zb-space-2xs);
  margin-left: auto;
  border: 1px solid var(--_zb-roadmap-new-line);
  border-radius: var(--zb-radius-pill);
  background: var(--_zb-roadmap-new-soft);
  box-shadow: inset 0 0 0 1px var(--_zb-roadmap-new-line), 0 0 3px rgba(var(--_zb-roadmap-new-rgb), 0.24), 0 0 8px rgba(var(--_zb-roadmap-new-rgb), 0.14);
  color: var(--_zb-roadmap-new-text);
  font-size: var(--zb-text-xs);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-tight);
  padding: var(--zb-space-2xs) var(--zb-space-xs);
  white-space: nowrap;
  transition: scale var(--zb-duration-fast) var(--zb-ease-out);
}
.zbui .zb-roadmap-preview__new-icon {
  width: var(--zb-icon-sm);
  height: var(--zb-icon-sm);
  flex: 0 0 auto;
}
/* 闪亮的一层：实色双线加更亮的柔光，平时透明；只画在边上和外面，不挡文字。 */
:where(.zbui.zb-roadmap) .zb-roadmap-preview__new::before {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--_zb-roadmap-new-solid), 0 0 4px rgba(var(--_zb-roadmap-new-rgb), 0.52), 0 0 12px rgba(var(--_zb-roadmap-new-rgb), 0.34);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--zb-duration-fast) var(--zb-ease);
}
/* 弹入和脉冲时向外扩散、淡出的一圈细线。 */
:where(.zbui.zb-roadmap) .zb-roadmap-preview__new::after {
  position: absolute;
  inset: -2px -4px;
  border: 1px solid rgba(var(--_zb-roadmap-new-rgb), 0.58);
  border-radius: inherit;
  content: "";
  opacity: 0;
  pointer-events: none;
}
.zbui .zb-roadmap-preview__item--new .zb-roadmap-preview__marker {
  position: relative;
}
/* 圆标外的光晕：平时 0.68，悬停、聚焦时全亮。 */
:where(.zbui.zb-roadmap) .zb-roadmap-preview__item--new .zb-roadmap-preview__marker::before {
  position: absolute;
  inset: -3px;
  border-radius: var(--zb-radius-circle);
  box-shadow: 0 0 0 1px rgba(var(--_zb-roadmap-new-rgb), 0.2), 0 0 6px rgba(var(--_zb-roadmap-new-rgb), 0.5), 0 0 11px rgba(var(--_zb-roadmap-new-rgb), 0.3);
  content: "";
  opacity: 0.68;
  pointer-events: none;
  transition: opacity var(--zb-duration-fast) var(--zb-ease);
}
/* 波浪环（render.php 的 zb_roadmap_new_ring()）：比圆标大一圈，描边取栏色，带一点柔光，8 秒转一圈（与原插件
   相同）。宿主 main.css 给 svg 限宽 100%，这里放开。 */
.zbui .zb-roadmap-preview__marker .zb-roadmap-preview__ring {
  position: absolute;
  top: -8px;
  left: -8px;
  width: calc(100% + 16px);
  max-width: none;
  height: calc(100% + 16px);
  opacity: 0.9;
  pointer-events: none;
  animation: zb-roadmap-new-spin calc(var(--zb-duration-slow) * 25) linear infinite;
}
:where(.zbui.zb-roadmap) .zb-roadmap-preview__marker .zb-roadmap-preview__ring {
  color: rgba(var(--_zb-roadmap-new-rgb), 0.8);
  filter: drop-shadow(0 0 3px rgba(var(--_zb-roadmap-new-rgb), 0.5));
}
.zb-roadmap-preview__item--new.is-new-playing .zb-roadmap-preview__new {
  animation: zb-roadmap-new-enter calc(var(--zb-duration-slow) * 2) var(--zb-ease-out), zb-roadmap-new-pulse var(--zb-duration-pulse) var(--zb-ease) calc(var(--zb-duration-slow) * 2) 2;
}
.zb-roadmap-preview__item--new.is-new-playing .zb-roadmap-preview__new::before {
  animation: zb-roadmap-new-flash calc(var(--zb-duration-slow) * 2) var(--zb-ease-out), zb-roadmap-new-flash-pulse var(--zb-duration-pulse) var(--zb-ease) calc(var(--zb-duration-slow) * 2) 2;
}
.zb-roadmap-preview__item--new.is-new-playing .zb-roadmap-preview__new::after {
  animation: zb-roadmap-new-burst calc(var(--zb-duration-slow) * 2) var(--zb-ease-out), zb-roadmap-new-burst-pulse var(--zb-duration-pulse) var(--zb-ease-out) calc(var(--zb-duration-slow) * 2) 2;
}
@media (hover: hover) {
  .zb-roadmap-preview__item--new:hover .zb-roadmap-preview__new {
    scale: 1.06;
  }
  .zb-roadmap-preview__item--new:hover .zb-roadmap-preview__new::before,
  .zb-roadmap-preview__item--new:hover .zb-roadmap-preview__marker::before {
    opacity: 1;
  }
}
.zb-roadmap-preview__item--new:focus-within .zb-roadmap-preview__new {
  scale: 1.06;
}
.zb-roadmap-preview__item--new:focus-within .zb-roadmap-preview__new::before,
.zb-roadmap-preview__item--new:focus-within .zb-roadmap-preview__marker::before {
  opacity: 1;
}
@keyframes zb-roadmap-new-enter {
  0% {
    transform: scale(0.78);
  }
  48% {
    transform: scale(1.16);
  }
  78% {
    transform: scale(0.985);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes zb-roadmap-new-pulse {
  0%,
  40%,
  100% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
}
@keyframes zb-roadmap-new-flash {
  0%,
  100% {
    opacity: 0;
  }
  48% {
    opacity: 1;
  }
}
@keyframes zb-roadmap-new-flash-pulse {
  0%,
  40%,
  100% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
@keyframes zb-roadmap-new-burst {
  0% {
    opacity: 0;
    transform: scale(0.82);
  }
  42% {
    opacity: 0.72;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes zb-roadmap-new-burst-pulse {
  0%,
  12% {
    opacity: 0;
    transform: scale(0.88);
  }
  20% {
    opacity: 0.68;
  }
  50%,
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}
@keyframes zb-roadmap-new-spin {
  to {
    transform: rotate(360deg);
  }
}
.zbui .zb-roadmap-preview__item-head {
  display: flex;
  min-width: 0;
  align-items: center;
}
.zbui .zb-roadmap-preview__link {
  min-width: 0;
  color: var(--zb-text);
  font-size: var(--zb-text-md);
  font-weight: var(--zb-weight-bold);
  line-height: var(--zb-leading-snug);
  overflow-wrap: anywhere;
  text-decoration: none;
}
/* 整行可点：标题链接的 ::after 铺满条目，点赞按钮按 DOM 顺序叠在上面；焦点环画在这一层上。 */
.zbui .zb-roadmap-preview__link::after {
  position: absolute;
  inset: 0;
  content: "";
}
.zbui .zb-roadmap-preview__link:focus-visible {
  outline: 0;
}
.zbui .zb-roadmap-preview__link:focus-visible::after {
  outline: 2px solid var(--zb-accent);
  outline-offset: -2px;
}
.zbui .zb-roadmap-preview__desc {
  display: -webkit-box;
  overflow: hidden;
  margin: var(--zb-space-2xs) 0 0;
  color: var(--zb-text-soft);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-normal);
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.zbui .zb-roadmap-preview__foot {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: var(--zb-space-xs);
  margin-top: auto;
  padding-top: var(--zb-space-xs);
}
.zbui .zb-roadmap-preview__date {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: var(--zb-space-2xs);
  color: var(--zb-text-muted);
  font-size: var(--zb-text-xs);
  line-height: var(--zb-leading-snug);
  white-space: nowrap;
}
.zbui .zb-roadmap-preview__date-icon {
  width: var(--zb-icon-sm);
  height: var(--zb-icon-sm);
}
.zbui .zb-roadmap-preview__foot .zb-roadmap-like {
  margin-left: auto;
}
/* PC 与平板沿用原插件的尺寸（36px 高，小号半粗字，左右 12px）和蓝色悬停；手机与完整页同一尺寸。 */
@media (min-width: 768px) {
  .zbui .zb-roadmap-preview__foot .zb-roadmap-like {
    min-height: var(--zb-control-h-sm);
    font-size: var(--zb-text-xs);
    font-weight: var(--zb-weight-semibold);
    padding: 0 var(--zb-space-sm);
  }
}
@media (hover: hover) and (min-width: 768px) {
  .zb-roadmap-preview__foot .zb-roadmap-like:hover {
    border-color: var(--zb-primary-soft-border);
    background: var(--zb-primary-soft);
    color: var(--zb-primary-soft-text);
  }
}
.zbui .zb-roadmap-preview__empty {
  display: flex;
  min-height: calc(var(--zb-control-h) * 2);
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--zb-text-muted);
  font-size: var(--zb-text-sm);
  line-height: var(--zb-leading-normal);
  padding: var(--zb-space-xl) var(--zb-space-md);
  text-align: center;
}
.zbui .zb-roadmap-preview__all {
  display: none;
}
.zbui .zb-roadmap-preview__all-icon {
  width: var(--zb-icon-md);
  height: var(--zb-icon-md);
}
@supports (grid-template-rows: subgrid) {
  .zbui .zb-roadmap-preview__lanes {
    grid-template-rows: repeat(7, auto);
  }
  .zbui .zb-roadmap-preview__lane {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
  }
  .zbui .zb-roadmap-preview__list {
    display: grid;
    grid-row: 2 / -1;
    grid-template-rows: subgrid;
  }
  .zbui .zb-roadmap-preview__empty {
    grid-row: 2 / -1;
  }
}

/* 隐藏后的恢复入口：一条细线，中间一个 36px 高的胶囊（与模块里其他按钮同高），自己不加上下留白。它和上下模块
   的距离就是首页模块外层 section 的内边距，与任意两个模块之间相同。首屏前由页头脚本给 html 加类，避免已隐藏的
   模块闪现。 */
.zbui.zb-roadmap-restore {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--zb-space-sm);
}
/* 两侧的线最长 132px，窄屏上缩短；胶囊本身不收缩。 */
.zbui.zb-roadmap-restore::before,
.zbui.zb-roadmap-restore::after {
  flex: 0 1 calc(var(--zb-control-h) * 3);
  height: 1px;
  background: var(--zb-border);
  content: "";
}
html.is-srmp-home-roadmap-hidden .zb-roadmap--preview[data-zb-roadmap-dismissible] {
  display: none;
}
html.is-srmp-home-roadmap-hidden .zb-roadmap-restore {
  display: flex;
}
.zbui .zb-roadmap-restore__button {
  position: relative;
  display: inline-flex;
  min-height: var(--zb-control-h-sm);
  flex: 0 0 auto;
  align-items: center;
  gap: var(--zb-space-xs);
  border: 0;
  border-radius: var(--zb-radius-pill);
  background: var(--zb-surface-frosted);
  box-shadow: inset 0 0 0 1px var(--zb-primary-soft-border-strong), var(--zb-shadow-card), var(--zb-inset-highlight);
  color: var(--zb-text);
  cursor: pointer;
  font-size: var(--zb-text-sm);
  font-weight: var(--zb-weight-semibold);
  line-height: var(--zb-leading-snug);
  padding: var(--zb-space-2xs) var(--zb-space-sm) var(--zb-space-2xs) var(--zb-space-2xs);
}
.zbui .zb-roadmap-restore__marker {
  display: inline-grid;
  width: var(--zb-control-h-xs);
  height: var(--zb-control-h-xs);
  place-items: center;
  border-radius: var(--zb-radius-circle);
  background: var(--zb-primary);
  box-shadow: var(--zb-shadow-action);
  color: var(--zb-on-primary);
  transition: background-color var(--zb-duration-fast) var(--zb-ease);
}
.zbui .zb-roadmap-restore__marker svg {
  width: var(--zb-icon-lg);
  height: var(--zb-icon-lg);
}
.zbui .zb-roadmap-restore__button:focus-visible {
  outline: 2px solid var(--zb-accent);
  outline-offset: 2px;
}

/* —— 手机 —— */
@media (max-width: 767.98px) {
  /* 首页模块在手机上单独设计（第 13 节）：头部只留标题和隐藏按钮，分段切换两栏，整行进入完整页，
     底部一行入口；去掉状态圆标、展开按钮和多余的描边。 */
  .zbui .zb-roadmap-preview__head {
    gap: var(--zb-space-xs);
    border-bottom: 0;
    padding: var(--zb-space-2xs) var(--zb-space-2xs) var(--zb-space-2xs) var(--zb-space-md);
  }
  .zbui .zb-roadmap-preview__icon,
  .zbui .zb-roadmap-preview__summary,
  .zbui .zb-roadmap-preview__more,
  .zbui .zb-roadmap-preview__marker {
    display: none;
  }
  .zbui .zb-roadmap-preview__title {
    overflow: hidden;
    font-size: var(--zb-text-lg);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .zbui .zb-roadmap-preview__hide {
    border-color: transparent;
    background: transparent;
  }
  .zbui .zb-roadmap-preview__tabs {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--zb-space-2xs);
    margin: 0 var(--zb-space-md) var(--zb-space-2xs);
    border-radius: var(--zb-radius-sm);
    background: var(--zb-surface-inset);
    padding: var(--zb-space-2xs);
  }
  .zbui .zb-roadmap-preview__tab {
    display: inline-flex;
    min-width: 0;
    min-height: var(--zb-control-h-sm);
    align-items: center;
    justify-content: center;
    gap: var(--zb-space-xs);
    border: 0;
    border-radius: var(--zb-radius-xs);
    background: transparent;
    color: var(--zb-text-soft);
    cursor: pointer;
    font-size: var(--zb-text-sm);
    font-weight: var(--zb-weight-medium);
    line-height: var(--zb-leading-snug);
    padding: var(--zb-space-2xs) var(--zb-space-xs);
  }
  .zb-roadmap-preview__tab[aria-selected="true"] {
    background: var(--zb-surface);
    box-shadow: var(--zb-shadow-card);
    color: var(--zb-text);
    font-weight: var(--zb-weight-semibold);
  }
  /* 选中块是轨道上的滑块（::before），切换时滑过去；不支持 :has() 的浏览器仍由选中的分段自己画底。 */
  @supports selector(:has(*)) {
    .zbui .zb-roadmap-preview__tabs {
      position: relative;
    }
    .zbui .zb-roadmap-preview__tabs::before {
      position: absolute;
      top: var(--zb-space-2xs);
      bottom: var(--zb-space-2xs);
      left: var(--zb-space-2xs);
      width: calc((100% - 3 * var(--zb-space-2xs)) / 2);
      border-radius: var(--zb-radius-xs);
      background: var(--zb-surface);
      box-shadow: var(--zb-shadow-card);
      content: "";
      transition: transform var(--zb-duration-base) var(--zb-ease);
    }
    .zb-roadmap-preview__tabs:has(> [aria-selected="true"]:last-child)::before {
      transform: translateX(calc(100% + var(--zb-space-2xs)));
    }
    .zbui .zb-roadmap-preview__tab {
      position: relative;
    }
    .zb-roadmap-preview__tab[aria-selected="true"] {
      background: transparent;
      box-shadow: none;
    }
  }
  .zbui .zb-roadmap-preview__tab:focus-visible {
    outline: 2px solid var(--zb-accent);
    outline-offset: -2px;
  }
  .zbui .zb-roadmap-preview__tab .zb-roadmap-preview__count {
    min-width: 0;
    min-height: 0;
    border: 0;
    background: none;
    color: inherit;
    font-weight: var(--zb-weight-medium);
    padding: 0;
  }
  .zbui .zb-roadmap-preview__lanes {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .zbui .zb-roadmap-preview__lane,
  .zbui .zb-roadmap-preview__list {
    display: block;
    grid-row: auto;
  }
  .zbui .zb-roadmap-preview__lane + .zb-roadmap-preview__lane {
    border-top: 1px solid var(--zb-border);
    border-left: 0;
  }
  .zb-roadmap-preview.is-tabbed .zb-roadmap-preview__lane {
    border-top: 0;
  }
  .zb-roadmap-preview.is-tabbed .zb-roadmap-preview__lane-title {
    display: none;
  }
  .zbui .zb-roadmap-preview__item {
    display: block;
    padding: var(--zb-space-sm) var(--zb-space-md);
  }
  .zbui .zb-roadmap-preview__body {
    flex-flow: row wrap;
    align-items: center;
    gap: var(--zb-space-2xs) var(--zb-space-xs);
  }
  .zbui .zb-roadmap-preview__item-head,
  .zbui .zb-roadmap-preview__desc {
    flex: 1 1 100%;
  }
  .zbui .zb-roadmap-preview__link {
    display: -webkit-box;
    overflow: hidden;
    font-weight: var(--zb-weight-semibold);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .zbui .zb-roadmap-preview__desc {
    order: 1;
    margin: 0;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
  .zbui .zb-roadmap-preview__labels {
    order: 2;
    flex-wrap: nowrap;
    margin: var(--zb-space-2xs) 0 0;
  }
  .zbui .zb-roadmap-preview__label {
    min-height: 0;
    border-color: transparent;
    line-height: var(--zb-leading-normal);
    padding: 0 var(--zb-space-xs);
    white-space: nowrap;
  }
  /* 「新」与标签同高、紧跟在标签后面，保留描边和柔光。 */
  .zbui .zb-roadmap-preview__new {
    min-height: 0;
    margin-left: 0;
    line-height: var(--zb-leading-normal);
    padding: 0 var(--zb-space-xs);
  }
  /* 分段上的圆点：这一栏有新条目、但没有选中时出现在计数后面（未来计划 accent，已完成 success）。 */
  .zbui .zb-roadmap-preview__tab-new {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    margin-left: calc(-1 * var(--zb-space-2xs));
    border-radius: var(--zb-radius-circle);
    background: var(--zb-accent);
  }
  .zbui .zb-roadmap-preview__tab-new--done {
    background: var(--zb-success-soft-text-strong);
  }
  .zb-roadmap-preview__tab[aria-selected="true"] .zb-roadmap-preview__tab-new {
    display: none;
  }
  .zbui .zb-roadmap-preview__foot {
    flex: 1 1 auto;
    order: 3;
    margin: var(--zb-space-2xs) 0 0;
    padding: 0;
  }
  .zbui .zb-roadmap-preview__all {
    display: flex;
    min-height: var(--zb-control-h);
    align-items: center;
    justify-content: center;
    gap: var(--zb-space-2xs);
    border-top: 1px solid var(--zb-border);
    color: var(--zb-link);
    font-size: var(--zb-text-sm);
    font-weight: var(--zb-weight-medium);
    line-height: var(--zb-leading-snug);
    text-decoration: none;
  }
  .zbui .zb-roadmap-preview__all:focus-visible {
    outline-offset: -2px;
  }
}

/* —— 触屏：按钮的触控区 44px（点赞和恢复入口外观不变，用 ::before 扩大点按区） —— */
@media (any-pointer: coarse) {
  .zbui .zb-roadmap-preview__tab {
    min-height: var(--zb-control-h);
  }
  .zbui .zb-roadmap-like::before,
  .zbui .zb-roadmap-restore__button::before {
    position: absolute;
    inset: 50% auto auto 50%;
    width: max(100%, var(--zb-control-h));
    height: var(--zb-control-h);
    content: "";
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .zbui .zb-roadmap-like,
  .zbui.zb-roadmap--preview,
  .zbui .zb-roadmap-preview__more,
  .zbui .zb-roadmap-preview__more-arrow,
  .zbui .zb-roadmap-preview__more-arrow svg,
  .zbui .zb-roadmap-preview__hide,
  .zbui .zb-roadmap-preview__tabs::before,
  .zbui .zb-roadmap-preview__new,
  .zbui .zb-roadmap-preview__new::before,
  .zbui .zb-roadmap-preview__marker::before,
  .zbui .zb-roadmap-restore__marker {
    transition: none !important;
  }
  .zb-roadmap-like.is-popping .zb-roadmap-like__icon,
  .zb-roadmap-preview__item.is-new-playing .zb-roadmap-preview__new,
  .zb-roadmap-preview__item.is-new-playing .zb-roadmap-preview__new::before,
  .zb-roadmap-preview__item.is-new-playing .zb-roadmap-preview__new::after,
  .zbui .zb-roadmap-preview__ring {
    animation: none !important;
  }
}
@media (forced-colors: active) {
  .zb-roadmap-like[aria-pressed="true"],
  .zb-roadmap-preview__tab[aria-selected="true"] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .zbui .zb-roadmap-status::before {
    background: CanvasText;
    forced-color-adjust: none;
  }
  .zbui .zb-roadmap-status--cancelled::before {
    border-color: CanvasText;
    background: Canvas;
  }
  .zbui .zb-roadmap-preview__tab-new {
    background: CanvasText;
    forced-color-adjust: none;
  }
}