/* moved.css —— 进展追踪——本产品的核心。给昨天读过的人看「变了什么」。 */

/* ==========================================================================
   进展追踪 —— 本产品的核心。给昨天读过的人看「变了什么」
   ========================================================================== */

.moved { margin-bottom: 52px; }

.moved-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-2);
}
.moved-item:last-child { border-bottom: 0; }

.moved-name {
  font-family: var(--serif);
  font-size: 1.06rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 9px;
}
.moved-name .tick {
  width: 3px;
  height: 15px;
  background: var(--moved);
  border-radius: 1px;
  flex: none;
}
.moved-since {
  font-size: .72rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 4px;
}

.moved-diff {
  grid-column: 1 / -1;
  margin-top: 9px;
  padding-left: 12px;
  border-left: 2px solid var(--rule);
  display: grid;
  gap: 4px;
}
.moved-diff .row {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 8px;
  font-size: .88rem;
  line-height: 1.65;
}
.moved-diff .tag {
  font-size: .72rem;
  color: var(--ink-3);
  padding-top: .15em;
}
.moved-diff .was { color: var(--ink-2); }
.moved-diff .now { color: var(--ink); font-weight: 500; }

/* 「读完整报道」——把变化摘要与下面的完整条目连起来。
   只在 moved.items 有值时出现。 */
.moved-jump {
  margin-top: 7px;
  justify-self: start;      /* .moved-diff 是 grid，不加这行按钮会被拉满整行 */
  width: fit-content;
  font: inherit;
  font-size: .74rem;
  color: var(--moved);
  background: none;
  border: 1px solid color-mix(in srgb, var(--moved) 35%, transparent);
  border-radius: 3px;
  padding: 3px 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}

.moved-jump:hover {
  background: color-mix(in srgb, var(--moved) 8%, transparent);
  border-color: var(--moved);
}

.moved-jump span { font-size: .9em; }