/* Recalls & follow-ups: the tab strip with counts and its one-line description, the urgency summary, sections, row
   status (recalls.js). Prefix fu2-. Colour only where it means something: red for overdue. */
.fu2-strip { padding: 10px 20px 0; border-bottom: 1px solid var(--sep) }
.fu2-tabs { display: flex; flex-wrap: wrap; gap: 2px 4px }
.fu2-tabs button { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 10px; border-radius: 9px 9px 0 0; font-weight: 500; color: var(--ink2); border-bottom: 2px solid transparent; margin-bottom: -1px }
.fu2-tabs button:hover { color: var(--ink); background: #f6f6f7 }
.fu2-tabs button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600 }
.fu2-n { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--sep2); color: var(--ink2); font-size: var(--fs-12); font-weight: 600; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums }
.fu2-n.late { background: #fde7e5; color: #b42318 }
.fu2-about { margin: 0; padding: 8px 2px 10px; color: var(--ink2); font-size: var(--fs-13) }
.fu2-sum { margin: 0 0 14px; font-size: var(--fs-14); color: var(--ink) }
.fu2-sum .late { color: #b42318; font-weight: 600 }
.fu2-h { margin: 18px 0 6px; font-size: var(--fs-13); font-weight: 600; color: var(--ink2) }
.fu2-h:first-of-type { margin-top: 0 }
.fu2-h span { font-weight: 500; color: var(--ink3) }
.fu2-st { font-size: var(--fs-12); color: var(--ink2); white-space: nowrap }
.fu2-st.late { color: #b42318; font-weight: 600 }
.fu2-st.today { color: var(--ink); font-weight: 600 }
.fu2-more { min-width: 36px; font-weight: 700; letter-spacing: 1px }
.fu2-far { margin: 14px 0 0; color: var(--ink2); font-size: var(--fs-12) }
@media (max-width: 760px) { .fu2-strip { padding: 8px 12px 0 } }
/* the lists' groups (recalls.js FU_GROUP): each group a block, its name once above its tabs, a quiet rule between */
.fu2-tabs { gap: 0 }
.fu2-g { display: flex; flex-direction: column; padding-inline: 12px; border-inline-start: 1px solid var(--sep2) }
.fu2-g:first-child { padding-inline-start: 0; border-inline-start: 0 }
.fu2-gt { display: flex; gap: 2px }
.fu2-grp { padding: 0 10px 2px; font-size: var(--fs-12); font-weight: 600; color: var(--ink3); white-space: nowrap }
.fu2-tabs button { padding: 0 9px; white-space: nowrap }
@media (max-width: 760px) { .fu2-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px } }
@media (pointer: coarse) { .fu2-tabs button { height: 44px } }