.date-attention { display: grid; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 390px), 1fr)); gap: 16px; margin: 0 0 20px; }
.date-attention-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.date-attention-card header { display: flex; gap: 12px; align-items: flex-start; }
.date-attention-card header > div { min-width: 0; }
.date-attention-card h2 { margin: 0; font: 700 16px/1.35 var(--display); overflow-wrap: anywhere; }
.date-attention-card p { margin: 3px 0 0; font-size: 13px; color: var(--muted); }
.date-attention-icon { flex: 0 0 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: color-mix(in srgb, var(--warn) var(--soft), var(--surface)); color: var(--warn); }
.date-attention-end .date-attention-icon { color: var(--crit); background: color-mix(in srgb, var(--crit) var(--soft), var(--surface)); }
.date-attention-card ul { list-style: none; margin: 0; padding: 0; }
.date-attention-moves { display: flex; flex-direction: column; gap: 12px; }
.date-attention-moves li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(70px, 1fr) 64px; gap: 12px; align-items: center; --move: var(--muted); }
.date-attention-moves .dc-later { --move: var(--sn); color: var(--warn); }
.date-attention-moves .dc-earlier { --move: var(--accent); color: var(--accent); }
.date-attention-moves .dc-back { --move: var(--rm); color: var(--rm); }
.date-attention-moves a { font-size: 12.5px; color: var(--ink-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.date-mini-track { position: relative; height: 18px; background: repeating-linear-gradient(to right, var(--line-2) 0 1px, transparent 1px calc(100% / 7)); }
.date-mini-segment { position: absolute; top: 8px; height: 3px; background: var(--move); opacity: .55; border-radius: 2px; }
.date-mini-dot { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border-radius: 50%; background: var(--move); }
.date-mini-dot.is-first { width: 10px; height: 10px; background: var(--surface); border: 2px solid var(--muted); }
.date-mini-dot.is-middle { width: 9px; height: 9px; opacity: .45; }
.date-mini-dot.is-current { box-shadow: 0 0 0 2px var(--surface); }
.date-mini-delta { text-align: right; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.date-mini-preview { grid-column: 2 / 4; font-size: 12px; color: var(--muted); }
.date-attention-ends li { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; border-top: 1px solid var(--line-2); padding-top: 8px; margin-bottom: 8px; }
.date-attention-ends li > a { font-size: 13px; font-weight: 600; color: var(--ink); }
.date-attention-ends li > span { font-size: 12.5px; color: var(--ink-2); }
.date-attention-more { margin-top: auto; font-size: 13px; font-weight: 600; }
@media (max-width: 520px) {
  .date-attention-card { padding: 16px; }
  .date-attention-moves li { grid-template-columns: minmax(0, 1fr) 66px; gap: 6px 10px; }
  .date-attention-moves li > a { grid-column: 1 / -1; white-space: normal; }
  .date-mini-track { grid-column: 1; }
  .date-mini-preview { grid-column: 1 / -1; }
}