/* What moved while you were away — ENG-1504. Rendered by modules/home-what-moved.mjs.
   It sits beside Where you left off; the two panels share one height and each ends on a link
   on the same line (home/HOME.md → Layout rule). Home's regions become a two-column grid in
   which every region spans both columns except this pair. */
[data-home] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--space-6);
}
[data-home] > * { grid-column: 1 / -1; min-width: 0; }
[data-home] > .home-moved { grid-column: 1; }
[data-home] > .home-moved ~ [data-home-left-off] { grid-column: 2; }
@media (max-width: 1100px) {
  [data-home] > .home-moved,
  [data-home] > .home-moved ~ [data-home-left-off] { grid-column: 1 / -1; }
}

.home-moved,
[data-home] > [data-home-left-off] { display: flex; flex-direction: column; }
.home-moved > .dl-panel,
[data-home] > [data-home-left-off] > .dl-panel { flex: 1 1 auto; }
.home-moved .dl-panel__head { flex-wrap: wrap; }
.home-moved .dl-panel__titles { flex-basis: 12rem; }
.home-moved .dl-badge { background: var(--tone-soft); color: var(--tone-solid); }
.home-moved .dl-panel__body { display: flex; flex-direction: column; gap: var(--space-4); }

.home-moved__timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.home-moved__entry { position: relative; display: flex; gap: var(--space-4); padding-bottom: var(--space-5); }
.home-moved__entry:last-child { padding-bottom: 0; }
/* The rail joins each avatar to the next entry's. */
.home-moved__entry:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(2.125rem + var(--space-1-5));
  bottom: var(--space-1-5);
  left: calc(1.0625rem - 1px);
  width: 2px;
  background: var(--tone-soft);
}
.home-moved__avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.125rem;
  height: 2.125rem;
  border-radius: 50%;
  background: var(--tone-solid);
  color: var(--on-solid);
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
}
.home-moved__body { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.home-moved__who { margin: 0; color: var(--tone-ink); font-size: var(--fs-caption); font-weight: var(--fw-semibold); }
.home-moved__what { margin: 0; color: var(--text-primary); font-size: var(--fs-body); font-weight: var(--fw-bold); overflow-wrap: anywhere; }
.home-moved__money { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2-5); margin: 0; color: var(--text-secondary); font-size: var(--fs-body-sm); }
.home-moved__money s { color: var(--text-muted); }
.home-moved__money strong { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.home-moved__shift { padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-pill); background: var(--attention-chip); color: var(--attention-text); font-size: var(--fs-caption); font-weight: var(--fw-bold); }
.home-moved__link { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--touch); color: var(--accent-ink); font-weight: var(--fw-bold); }
.home-moved__link::after { content: " →"; white-space: pre; }

.home-moved__empty { margin: 0; color: var(--text-primary); font-size: var(--fs-body-lg); font-weight: var(--fw-bold); }
.home-moved__line { margin: 0; color: var(--text-body); font-size: var(--fs-body); line-height: 1.55; }
.home-moved__failed { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }

/* Both panels end on their link, on the same line. */
.home-moved__footer,
[data-home] > [data-home-left-off] .home-left-off__footer { margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-subtle); }
.home-moved__footer a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--accent-ink); font-weight: var(--fw-bold); }
.home-moved__footer a::after { content: " →"; white-space: pre; }