/* birthday-reminders: styles only it uses, split out of site.css by scripts/split-css.mjs. */
.todo-empty { margin: 10px 0; color: var(--slate); text-align: center; }
.todo-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; color: var(--slate); font-size: 0.9rem; }
.br-add { display: grid; gap: 10px; grid-template-columns: 2fr 0.8fr 1.4fr 1fr 2fr auto; align-items: end; }
@media (max-width: 800px) { .br-add { grid-template-columns: 1fr 1fr; } .br-add .btn { grid-column: 1 / -1; } }
.br-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.br-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.br-item > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.br-item span { color: var(--slate); font-size: 0.88rem; }
.br-when { flex: none; padding: 3px 10px; border-radius: 999px; background: var(--mist); font-weight: 600; font-size: 0.82rem !important; color: var(--ink) !important; }
.br-item.is-soon .br-when { background: var(--signal-soft); color: var(--signal-ink) !important; }
.br-item.is-today { border-color: var(--signal); }
.br-item.is-today .br-when { background: var(--signal); color: #fff !important; }